Visualize status of port forwarding sockets in chrome:inspect Devices tab

chrome/browser/resources/inspect/inspect.css

 /*
  * Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 body {
   color: rgb(48, 57, 66);
   font-family: Arial, sans-serif;
   font-size: 13px;
@@ skipping 56 matching lines @@
 #content > div:not(.selected) {
   display: none;
 }
 
 .content-header {
   border-bottom: 1px solid #eee;
   font-size: 150%;
   padding-bottom: 4px;
 }
 
-.section {
-  font-size: 150%;
+.device-header {
+  -webkit-box-align: baseline;
+  -webkit-box-orient: horizontal;
+  display: -webkit-box;
   margin: 10px 0 0;
   padding: 2px 0;
 }
 
-.small-section {
+.device-name {
+  font-size: 150%;
+}
+
+.device-serial {
+  color: #888;
+  font-size: 80%;
+  margin-left: 6px;
+}
+
+.device-ports {
+  -webkit-box-orient: horizontal;
+  display: -webkit-box;
+  margin-left: 8px;
+}
+
+.port-icon {
+  -webkit-border-radius: 6px;
+  background-color: rgb(64, 192, 64);
+  border: 0 solid transparent;
+  height: 12px;
+  margin: 2px;
+  width: 12px;
+}
+
+.port-icon.error {
+  background-color: rgb(224, 32, 32);
+}
+
+.port-icon.connected {
+  -webkit-transform: scale(1.2);
+  background-color: rgb(0, 255, 0);
+}
+
+.port-icon.connecting {
+  -webkit-transform: scale(1.2);
+  background-color: orange;
+}
+
+.port-number {
+  height: 16px;
+  margin-right: 5px;
+}
+
+.browser-header {
   font-weight: bold;
   margin: 5px 0 0;
   padding: 2px 0;
 }
 
 .row {
   padding: 5px 0;
 }
 
 .url {
@@ skipping 143 matching lines @@
   pointer-events: none;
 }
 
 .port-forwarding-pair:not(.selected) .close-button:not(:hover) {
   opacity: 0.5;
 }
 
 #port-forwarding-config-buttons > button {
   float: right;
 }