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

chrome/browser/resources/inspect/inspect.js

 // 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.
 
 function inspect(data) {
   chrome.send('inspect', [data]);
 }
 
 function terminate(data) {
   chrome.send('terminate', [data]);
@@ skipping 95 matching lines @@
   }
 
   var newDeviceIds = devices.map(function(d) { return d.adbGlobalId });
   Array.prototype.forEach.call(
       deviceList.querySelectorAll('.device'),
       removeObsolete.bind(null, newDeviceIds));
 
   for (var d = 0; d < devices.length; d++) {
     var device = devices[d];
 
+    var devicePorts;
     var browserList;
     var deviceSection = $(device.adbGlobalId);
     if (deviceSection) {
+      devicePorts = deviceSection.querySelector('.device-ports');
       browserList = deviceSection.querySelector('.browsers');
     } else {
       deviceSection = document.createElement('div');
       deviceSection.id = device.adbGlobalId;
       deviceSection.className = 'device list';
       deviceList.appendChild(deviceSection);
 
       var deviceHeader = document.createElement('div');
-      deviceHeader.className = 'section';
-      deviceHeader.textContent = device.adbModel;
+      deviceHeader.className = 'device-header';
       deviceSection.appendChild(deviceHeader);
 
+      var deviceName = document.createElement('div');
+      deviceName.className = 'device-name';
+      deviceName.textContent = device.adbModel;
+      deviceHeader.appendChild(deviceName);
+
+      if (device.adbSerial) {
+        var deviceSerial = document.createElement('div');
+        deviceSerial.className = 'device-serial';
+        deviceSerial.textContent = '#' + device.adbSerial.toUpperCase();
+        deviceHeader.appendChild(deviceSerial);
+      }
+
+      devicePorts = document.createElement('div');
+      devicePorts.className = 'device-ports';
+      deviceHeader.appendChild(devicePorts);
+
       browserList = document.createElement('div');
       browserList.className = 'browsers';
       deviceSection.appendChild(browserList);
     }
 
     if (alreadyDisplayed(deviceSection, device))
       continue;
 
+    devicePorts.textContent = '';
+    if (device.adbPortStatus) {
+      for (var port in device.adbPortStatus) {
+        var status = device.adbPortStatus[port];
+        var portIcon = document.createElement('div');
+        portIcon.className = 'port-icon';
+        if (status > 0)
+          portIcon.classList.add('connected');
+        else if (status == -1 || status == -2)
+          portIcon.classList.add('transient');
+        else if (status < 0)
+          portIcon.classList.add('error');
+        devicePorts.appendChild(portIcon);
+
+        var portNumber = document.createElement('div');
+        portNumber.className = 'port-number';
+        portNumber.textContent = ':' + port;
+        if (status > 0)
+          portNumber.textContent += '(' + status + ')';
+        devicePorts.appendChild(portNumber);
+      }
+    }
+
     var newBrowserIds =
         device.browsers.map(function(b) { return b.adbGlobalId });
     Array.prototype.forEach.call(
         browserList.querySelectorAll('.browser'),
         removeObsolete.bind(null, newBrowserIds));
 
     for (var b = 0; b < device.browsers.length; b++) {
       var browser = device.browsers[b];
 
       var pageList;
       var browserSection = $(browser.adbGlobalId);
       if (browserSection) {
         pageList = browserSection.querySelector('.pages');
-        pageList.textContent = '';
       } else {
         browserSection = document.createElement('div');
         browserSection.id = browser.adbGlobalId;
         browserSection.className = 'browser';
         browserList.appendChild(browserSection);
 
         var browserHeader = document.createElement('div');
-        browserHeader.className = 'small-section';
+        browserHeader.className = 'browser-header';
         browserHeader.textContent = browser.adbBrowserName;
         browserSection.appendChild(browserHeader);
 
         var newPage = document.createElement('div');
         newPage.className = 'open';
 
         var newPageUrl = document.createElement('input');
         newPageUrl.type = 'text';
         newPageUrl.placeholder = 'Open tab with url';
         newPage.appendChild(newPageUrl);
@@ skipping 15 matching lines @@
         browserSection.appendChild(newPage);
 
         pageList = document.createElement('div');
         pageList.className = 'list pages';
         browserSection.appendChild(pageList);
       }
 
       if (alreadyDisplayed(browserSection, browser))
         continue;
 
+      pageList.textContent = '';
       for (var p = 0; p < browser.pages.length; p++) {
         var page = browser.pages[p];
         var row = addTargetToList(
             page, pageList, ['faviconUrl', 'name', 'url']);
         row.appendChild(createActionLink(
             'reload', reload.bind(null, page), page.attached));
         row.appendChild(createActionLink(
             'close', terminate.bind(null, page), page.attached));
       }
     }
@@ skipping 298 matching lines @@
   if (line.querySelector('.invalid'))
     return;
   line.classList.remove('fresh');
   var freshLine = createEmptyConfigLine();
   line.parentNode.appendChild(freshLine);
   if (opt_selectNew)
     freshLine.querySelector('.port').focus();
 }
 
 document.addEventListener('DOMContentLoaded', onload);