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

chrome/browser/resources/inspect/inspect.js

Index: chrome/browser/resources/inspect/inspect.js
diff --git a/chrome/browser/resources/inspect/inspect.js b/chrome/browser/resources/inspect/inspect.js
index f0bfd203c8b236cb31063434cfbbc78a85b1df35..3d036f884a5b31c8892c6b7538ed486e4904747d 100644
--- a/chrome/browser/resources/inspect/inspect.js
+++ b/chrome/browser/resources/inspect/inspect.js
@@ -44,6 +44,21 @@ function removeChildren(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++) {
@@ -104,13 +119,19 @@ function populateTargets(source, data) {
     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')
@@ -428,6 +449,10 @@ 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];
 
@@ -567,7 +592,11 @@ function addTargetToList(data, list, properties) {
   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);
   }