DevTools: Refactor InspectUI class for extensibility

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;
 
-function inspect(data) {
-  chrome.send('inspect', [data]);
+function sendCommand(command, args) {
+  chrome.send(command, Array.prototype.slice.call(arguments, 1));
 }
 
-function activate(data) {
-  chrome.send('activate', [data]);
-}
-
-function close(data) {
-  chrome.send('close', [data]);
-}
-
-function reload(data) {
-  chrome.send('reload', [data]);
-}
-
-function open(browserId, url) {
-  chrome.send('open', [browserId, url]);
-}
-
-function launch(packageId) {
-  chrome.send('launch', [packageId]);
+function sendTargetCommand(command, target) {
+  sendCommand(command, target.source, target.id);
 }
 
 function removeChildren(element_id) {
   var element = $(element_id);
   element.textContent = '';
 }
 
 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;
     tabHeader.appendChild(button);
     tabHeader.addEventListener('click', selectTab.bind(null, tabContent.id));
     $('navigation').appendChild(tabHeader);
   }
   var selectedTabName = window.location.hash.slice(1) || 'devices';
   selectTab(selectedTabName);
   initSettings();
-  chrome.send('init-ui');
+  sendCommand('init-ui');
 }
 
 function selectTab(id) {
   var tabContents = document.querySelectorAll('#content > div');
   var tabHeaders = $('navigation').querySelectorAll('.tab-header');
   for (var i = 0; i != tabContents.length; i++) {
     var tabContent = tabContents[i];
     var tabHeader = tabHeaders[i];
     if (tabContent.id == id) {
       tabContent.classList.add('selected');
       tabHeader.classList.add('selected');
     } else {
       tabContent.classList.remove('selected');
       tabHeader.classList.remove('selected');
     }
   }
   window.location.hash = id;
 }
 
+function populateTargets(source, data) {
+  if (source == 'renderers')
+    populateWebContentsTargets(data);
+  else if (source == 'workers')
+    populateWorkerTargets(data);
+  else if (source == 'adb')
+    populateRemoteTargets(data);
+  else
+    console.error('Unknown source type: ' + source);
+}
+
 function populateWebContentsTargets(data) {
   removeChildren('pages-list');
   removeChildren('extensions-list');
   removeChildren('apps-list');
   removeChildren('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')
@@ skipping 43 matching lines @@
 
   var deviceList = $('devices-list');
   if (alreadyDisplayed(deviceList, devices))
     return;
 
   function removeObsolete(validIds, section) {
     if (validIds.indexOf(section.id) < 0)
       section.remove();
   }
 
-  var newDeviceIds = devices.map(function(d) { return d.adbGlobalId });
+  var newDeviceIds = devices.map(function(d) { return d.id });
   Array.prototype.forEach.call(
       deviceList.querySelectorAll('.device'),
       removeObsolete.bind(null, newDeviceIds));
 
   for (var d = 0; d < devices.length; d++) {
     var device = devices[d];
 
-    var deviceSection = $(device.adbGlobalId);
+    var deviceSection = $(device.id);
     if (!deviceSection) {
       deviceSection = document.createElement('div');
-      deviceSection.id = device.adbGlobalId;
+      deviceSection.id = device.id;
       deviceSection.className = 'device';
       deviceList.appendChild(deviceSection);
 
       var deviceHeader = document.createElement('div');
       deviceHeader.className = 'device-header';
       deviceSection.appendChild(deviceHeader);
 
       var deviceName = document.createElement('div');
       deviceName.className = 'device-name';
       deviceHeader.appendChild(deviceName);
@@ skipping 49 matching lines @@
         portNumber.className = 'port-number';
         portNumber.textContent = ':' + port;
         if (status > 0)
           portNumber.textContent += '(' + status + ')';
         devicePorts.appendChild(portNumber);
       }
     }
 
     var browserList = deviceSection.querySelector('.browsers');
     var newBrowserIds =
-        device.browsers.map(function(b) { return b.adbGlobalId });
+        device.browsers.map(function(b) { return b.id });
     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 majorChromeVersion = browser.adbBrowserChromeVersion;
 
       var pageList;
-      var browserSection = $(browser.adbGlobalId);
+      var browserSection = $(browser.id);
       if (browserSection) {
         pageList = browserSection.querySelector('.pages');
       } else {
         browserSection = document.createElement('div');
-        browserSection.id = browser.adbGlobalId;
+        browserSection.id = browser.id;
         browserSection.className = 'browser';
         insertChildSortedById(browserList, browserSection);
 
         var browserHeader = document.createElement('div');
         browserHeader.className = 'browser-header';
 
         var browserName = document.createElement('div');
         browserName.className = 'browser-name';
         browserHeader.appendChild(browserName);
         browserName.textContent = browser.adbBrowserName;
         if (browser.adbBrowserVersion)
           browserName.textContent += ' (' + browser.adbBrowserVersion + ')';
         browserSection.appendChild(browserHeader);
 
         if (majorChromeVersion >= MIN_VERSION_NEW_TAB) {
           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);
 
-          var openHandler = function(browserId, input) {
-            open(browserId, input.value || 'about:blank');
+          var openHandler = function(sourceId, browserId, input) {
+            sendCommand(

[vsevik, 2013/11/12 14:24:07]

I would use sendTargetCommand(browser, url) instead.

[Vladislav Kaznacheev, 2013/11/13 16:02:33]

sendTargetCommand accepts 3 args (command, source and id). Rewriting it to
accept varargs makes it overly complicated.
On 2013/11/12 14:24:07, vsevik wrote:

+                'open', sourceId, browserId, input.value || 'about:blank');
             input.value = '';
-          }.bind(null, browser.adbGlobalId, newPageUrl);
+          }.bind(null, browser.source, browser.id, newPageUrl);
           newPageUrl.addEventListener('keyup', function(handler, event) {
             if (event.keyIdentifier == 'Enter' && event.target.value)
               handler();
           }.bind(null, openHandler), true);
 
           var newPageButton = document.createElement('button');
           newPageButton.textContent = 'Open';
           newPage.appendChild(newPageButton);
           newPageButton.addEventListener('click', openHandler, true);
 
@@ skipping 13 matching lines @@
         var page = browser.pages[p];
         // Attached targets have no unique id until Chrome 26. For such targets
         // it is impossible to activate existing DevTools window.
         page.hasNoUniqueId = page.attached &&
             (majorChromeVersion && majorChromeVersion < MIN_VERSION_TARGET_ID);
         var row = addTargetToList(page, pageList, ['name', 'url']);
         if (page['description'])
           addWebViewDetails(row, page);
         else
           addFavicon(row, page);
-        if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE)
-          addActionLink(row, 'focus tab', activate.bind(null, page), false);
-        if (majorChromeVersion)
-          addActionLink(row, 'reload', reload.bind(null, page), page.attached);
-        if (majorChromeVersion >= MIN_VERSION_TAB_CLOSE)
-          addActionLink(row, 'close', close.bind(null, page), page.attached);
+        if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE) {
+          addActionLink(row, 'focus tab',
+              sendTargetCommand.bind(null, 'activate', page), false);
+        }
+        if (majorChromeVersion) {
+          addActionLink(row, 'reload',
+              sendTargetCommand.bind(null, 'reload', page), page.attached);
+        }
+        if (majorChromeVersion >= MIN_VERSION_TAB_CLOSE) {
+          addActionLink(row, 'close',
+              sendTargetCommand.bind(null, 'close', page), page.attached);
+        }
       }
     }
 
     var packageList = deviceSection.querySelector('.packages');
     packageList.textContent = '';
 
     if (device.packages.length) {
       var packagesHeader = document.createElement('div');
       packagesHeader.className = 'packages-header';
       packagesHeader.textContent =
           device.browsers.length ? 'Also installed:' : 'Installed browsers:';
       packageList.appendChild(packagesHeader);
     }
 
     for (var p = 0; p < device.packages.length; p++) {
       var packageSection = document.createElement('div');
       packageSection.className = 'package';
       packageList.appendChild(packageSection);
 
       var launchButton = document.createElement('button');
       launchButton.textContent = 'Launch';
       launchButton.addEventListener(
-          'click', launch.bind(null, device.packages[p].adbGlobalId), true);
+          'click',
+          sendTargetCommand.bind(null, 'launch', device.packages[p]),
+          true);
       packageSection.appendChild(launchButton);
 
       var packageDisplayName = document.createElement('span');
       packageDisplayName.textContent = device.packages[p].adbBrowserName;
       packageSection.appendChild(packageDisplayName);
     }
   }
 }
 
 function addToPagesList(data) {
@@ skipping 14 matching lines @@
       var guestRow = addTargetToList(guest, row, ['name', 'url']);
       guestRow.classList.add('guest');
       addFavicon(guestRow, guest);
     });
   }
 }
 
 function addToWorkersList(data) {
   var row =
       addTargetToList(data, $('workers-list'), ['name', 'description', 'url']);
-  addActionLink(row, 'terminate', close.bind(null, data), data.attached);
+  addActionLink(row, 'terminate',
+      sendTargetCommand.bind(null, 'close', data), data.attached);
 }
 
 function addToOthersList(data) {
   addTargetToList(data, $('others-list'), ['url']);
 }
 
 function formatValue(data, property) {
   var value = data[property];
 
   if (property == 'name' && value == '') {
@@ skipping 124 matching lines @@
   for (var j = 0; j < properties.length; j++)
     subrow.appendChild(formatValue(data, properties[j]));
 
   if (description)
     addWebViewDescription(description, subrowBox);
 
   var actionBox = document.createElement('div');
   actionBox.className = 'actions';
   subrowBox.appendChild(actionBox);
 
-  addActionLink(row, 'inspect', inspect.bind(null, data),
+  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('a');
   if (opt_disabled)
     link.classList.add('disabled');
@@ skipping 14 matching lines @@
   $('port-forwarding-enable').addEventListener('change', enablePortForwarding);
   $('port-forwarding-config-open').addEventListener(
       'click', openPortForwardingConfig);
   $('port-forwarding-config-close').addEventListener(
       'click', closePortForwardingConfig);
   $('port-forwarding-config-done').addEventListener(
       'click', commitPortForwardingConfig.bind(true));
 }
 
 function enableDiscoverUsbDevices(event) {
-  chrome.send('set-discover-usb-devices-enabled', [event.target.checked]);
+  sendCommand('set-discover-usb-devices-enabled', event.target.checked);
 }
 
 function enablePortForwarding(event) {
-  chrome.send('set-port-forwarding-enabled', [event.target.checked]);
+  sendCommand('set-port-forwarding-enabled', event.target.checked);
 }
 
 function handleKey(event) {
   switch (event.keyCode) {
     case 13:  // Enter
       if (event.target.nodeName == 'INPUT') {
         var line = event.target.parentNode;
         if (!line.classList.contains('fresh') ||
             line.classList.contains('empty')) {
           commitPortForwardingConfig(true);
@@ skipping 90 matching lines @@
                portInput.lastValidValue :
                portInput.value;
 
     var location = locationInput.classList.contains('invalid') ?
                    locationInput.lastValidValue :
                    locationInput.value;
 
     if (port && location)
       config[port] = location;
   }
-  chrome.send('set-port-forwarding-config', [config]);
+  sendCommand('set-port-forwarding-config', config);
 }
 
 function updateDiscoverUsbDevicesEnabled(enabled) {
   var checkbox = $('discover-usb-devices-enable');
   checkbox.checked = !!enabled;
   checkbox.disabled = false;
 }
 
 function updatePortForwardingEnabled(enabled) {
   var checkbox = $('port-forwarding-enable');
@@ skipping 140 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);
+
+if (window.WebInspector) {

[Vladislav Kaznacheev, 2013/11/12 11:49:51]

Please disregard, this crept in from another patch

[vsevik, 2013/11/12 14:24:07]

Why is this needed?

[Vladislav Kaznacheev, 2013/11/13 16:02:33]

Done.

+  console.log('Loaded into WebInspector');
+}