From c1fd73f008f0368ef96d931a0337b221f24b3f9d Mon Sep 17 00:00:00 2001
From: Tigran Sargsyan <tigran.sargsyan.w@gmail.com>
Date: Mon, 15 Sep 2025 19:52:10 +0200
Subject: [PATCH 1/2] feat: network ping display readable bar

---
 .../Mirror/Components/NetworkPingDisplay.cs   | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/Assets/Mirror/Components/NetworkPingDisplay.cs b/Assets/Mirror/Components/NetworkPingDisplay.cs
index a45ced5b2b..d27acf6c00 100644
--- a/Assets/Mirror/Components/NetworkPingDisplay.cs
+++ b/Assets/Mirror/Components/NetworkPingDisplay.cs
@@ -11,10 +11,16 @@ namespace Mirror
     [HelpURL("https://mirror-networking.gitbook.io/docs/components/network-ping-display")]
     public class NetworkPingDisplay : MonoBehaviour
     {
+        [Header("UI")]
         public Color color = Color.white;
         public int padding = 2;
-        public int width = 150;
+        public int width = 250;
         public int height = 25;
+        
+        [Header("Bar Characters")]
+        [Tooltip("Character to represent filled segments of the connection quality bar")]
+        public char filledChar = '■';
+        public char emptyChar  = '·';
 
 #if !UNITY_SERVER || UNITY_EDITOR
         void OnGUI()
@@ -28,10 +34,18 @@ void OnGUI()
             GUILayout.BeginArea(rect);
             GUIStyle style = GUI.skin.GetStyle("Label");
             style.alignment = TextAnchor.MiddleRight;
+            
+            double rttMs = Math.Round(NetworkTime.rtt * 1000);
+            var quality = NetworkClient.connectionQuality;
+            int totalSegments = Enum.GetValues(typeof(ConnectionQuality)).Length - 1;
+            int filled = Mathf.Clamp((int)quality, 0, totalSegments);
+            string bar = new string(filledChar, filled) + new string(emptyChar, totalSegments - filled);
+
             GUILayout.BeginHorizontal(style);
-                GUILayout.Label($"RTT: {Math.Round(NetworkTime.rtt * 1000)}ms");
-                GUI.color = NetworkClient.connectionQuality.ColorCode();
-                GUILayout.Label($"Q: {new string('-', (int)NetworkClient.connectionQuality)}");
+            GUILayout.Label($"RTT: {rttMs} ms");
+            GUI.color = quality.ColorCode();
+            GUILayout.Label($"Q: {quality} [{bar}]");
+                
             GUILayout.EndHorizontal();
             GUILayout.EndArea();
             GUI.color = Color.white;

From 5b69d0616af976075b32b8705dbbe78311b2fd6f Mon Sep 17 00:00:00 2001
From: Tigran Sargsyan <tigran.sargsyan.w@gmail.com>
Date: Tue, 16 Sep 2025 12:39:25 +0200
Subject: [PATCH 2/2] feat: bar with lit part colored, unlit part grey

---
 .../Mirror/Components/NetworkPingDisplay.cs   | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/Assets/Mirror/Components/NetworkPingDisplay.cs b/Assets/Mirror/Components/NetworkPingDisplay.cs
index d27acf6c00..85a0a8fd87 100644
--- a/Assets/Mirror/Components/NetworkPingDisplay.cs
+++ b/Assets/Mirror/Components/NetworkPingDisplay.cs
@@ -11,16 +11,14 @@ namespace Mirror
     [HelpURL("https://mirror-networking.gitbook.io/docs/components/network-ping-display")]
     public class NetworkPingDisplay : MonoBehaviour
     {
-        [Header("UI")]
         public Color color = Color.white;
         public int padding = 2;
-        public int width = 250;
+        public int width = 150;
         public int height = 25;
         
-        [Header("Bar Characters")]
+        [Header("Bar Character")]
         [Tooltip("Character to represent filled segments of the connection quality bar")]
-        public char filledChar = '■';
-        public char emptyChar  = '·';
+        public char barChar = '■';
 
 #if !UNITY_SERVER || UNITY_EDITOR
         void OnGUI()
@@ -34,18 +32,25 @@ void OnGUI()
             GUILayout.BeginArea(rect);
             GUIStyle style = GUI.skin.GetStyle("Label");
             style.alignment = TextAnchor.MiddleRight;
+            style.richText = true; // enable colored substrings
+            
+            GUILayout.BeginHorizontal(style);
             
             double rttMs = Math.Round(NetworkTime.rtt * 1000);
             var quality = NetworkClient.connectionQuality;
             int totalSegments = Enum.GetValues(typeof(ConnectionQuality)).Length - 1;
             int filled = Mathf.Clamp((int)quality, 0, totalSegments);
-            string bar = new string(filledChar, filled) + new string(emptyChar, totalSegments - filled);
 
-            GUILayout.BeginHorizontal(style);
+            string lit   = new string(barChar, filled);
+            string unlit = new string(barChar, totalSegments - filled);
+            string litColor  = ColorUtility.ToHtmlStringRGB(quality.ColorCode());
+            string unlitColor = "666666";
+            
+            // Q: [■■■■] (lit part colored, unlit part grey)
+            string bar = $"[<color=#{litColor}>{lit}</color><color=#{unlitColor}>{unlit}</color>]";
             GUILayout.Label($"RTT: {rttMs} ms");
-            GUI.color = quality.ColorCode();
-            GUILayout.Label($"Q: {quality} [{bar}]");
-                
+            GUILayout.Label($"Q: {bar}");
+            
             GUILayout.EndHorizontal();
             GUILayout.EndArea();
             GUI.color = Color.white;