Add UI DevTools under chrome://inspect/#other

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.
 
 var MIN_VERSION_TAB_CLOSE = 25;
 var MIN_VERSION_TARGET_ID = 26;
 var MIN_VERSION_NEW_TAB = 29;
 var MIN_VERSION_TAB_ACTIVATE = 30;
 var WEBRTC_SERIAL = 'WEBRTC';
 
@@ skipping 26 matching lines @@
 
 function sendTargetCommand(command, target) {
   sendCommand(command, target.source, target.id);
 }
 
 function removeChildren(element_id) {
   var element = $(element_id);
   element.textContent = '';
 }
 
+function removeAdditionalChildren(element_id) {
+  var element = $(element_id);
+  var elements = element.querySelectorAll('[additional=true]');

[dgozman, 2016/11/21 19:32:55]

Let's use class instead of a property.

[Sarmad Hashmi, 2016/11/22 04:39:32]

Done.

+  for (var i = 0; i != elements.length; i++)
+    element.removeChild(elements[i]);
+}
+
+function removeChildrenExceptAdditional(element_id) {
+  var element = $(element_id);
+  var elements = element.querySelectorAll('.row');
+  for (var i = 0; i != elements.length; i++)

[dgozman, 2016/11/21 19:32:56]

{} around the body

[Sarmad Hashmi, 2016/11/22 04:39:32]

Removed if statement and replaced querySelectorAll parameter with
.row:not(.additional).

+    if (!elements[i].additional)
+      element.removeChild(elements[i]);
+}
+
 function onload() {
   var tabContents = document.querySelectorAll('#content > div');
   for (var i = 0; i != tabContents.length; i++) {
     var tabContent = tabContents[i];
     var tabName = tabContent.querySelector('.content-header').textContent;
 
     var tabHeader = document.createElement('div');
     tabHeader.className = 'tab-header';
     var button = document.createElement('button');
     button.textContent = tabName;
@@ skipping 40 matching lines @@
 
 function populateTargets(source, data) {
   if (source == 'local')
     populateLocalTargets(data);
   else if (source == 'remote')
     populateRemoteTargets(data);
   else
     console.error('Unknown source type: ' + source);
 }
 
+function populateAdditionalTargets(data) {
+  removeAdditionalChildren('others-list');
+  for (var i = 0; i < data.length; i++)
+    addAdditionalTargetsToOthersList(data[i]);
+}
+
 function populateLocalTargets(data) {
   removeChildren('pages-list');
   removeChildren('extensions-list');
   removeChildren('apps-list');
-  removeChildren('others-list');
   removeChildren('workers-list');
   removeChildren('service-workers-list');
+  removeChildrenExceptAdditional('others-list');
 
   for (var i = 0; i < data.length; i++) {
     if (data[i].type === 'page')
       addToPagesList(data[i]);
     else if (data[i].type === 'background_page')
       addToExtensionsList(data[i]);
     else if (data[i].type === 'app')
       addToAppsList(data[i]);
     else if (data[i].type === 'shared_worker')
       addToWorkersList(data[i]);
@@ skipping 297 matching lines @@
     var row = addTargetToList(
         data, $('service-workers-list'), ['name', 'description', 'url']);
     addActionLink(row, 'terminate',
         sendTargetCommand.bind(null, 'close', data), false);
 }
 
 function addToOthersList(data) {
   addTargetToList(data, $('others-list'), ['url']);
 }
 
+function addAdditionalTargetsToOthersList(data) {
+  addTargetToList(data, $('others-list'), ['name', 'url']);
+}
+
 function formatValue(data, property) {
   var value = data[property];
 
   if (property == 'name' && value == '') {
     value = 'untitled';
   }
 
   var text = value ? String(value) : '';
   if (text.length > 100)
     text = text.substring(0, 100) + '\u2026';
@@ skipping 119 matching lines @@
   subrow.className = 'subrow';
   subrowBox.appendChild(subrow);
 
   for (var j = 0; j < properties.length; j++)
     subrow.appendChild(formatValue(data, properties[j]));
 
   var actionBox = document.createElement('div');
   actionBox.className = 'actions';
   subrowBox.appendChild(actionBox);
 
-  if (!data.hasCustomInspectAction) {
+  if (data.isAdditional) {
+    addActionLink(row, 'inspect',
+        sendCommand.bind(null, 'inspect-additional', data.url), false);
+    row.additional = true;
+  } else if (!data.hasCustomInspectAction) {
     addActionLink(row, 'inspect', sendTargetCommand.bind(null, 'inspect', data),
         data.hasNoUniqueId || data.adbAttachedForeign);
   }
 
   list.appendChild(row);
   return row;
 }
 
 function addActionLink(row, text, handler, opt_disabled) {
   var link = document.createElement('span');
@@ skipping 410 matching lines @@
     Array.prototype.forEach.call(
         deviceSection.querySelectorAll('.browser'), clearBrowserPorts);
   }
 
   Array.prototype.forEach.call(
       document.querySelectorAll('.device'), clearPorts);
 }
 
 document.addEventListener('DOMContentLoaded', onload);
 window.addEventListener('hashchange', onHashChange);