chrome://inspect: Add "open", "close" and "reload" actions to 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]);
 }
 
+function reload(data) {
+  chrome.send('reload', [data]);
+}
+
+function open(browserId, url) {
+  chrome.send('open', [browserId, url]);
+}
+
 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;
@@ skipping 53 matching lines @@
     addToWorkersList(data[i]);
 }
 
 function populateDeviceLists(devices) {
   var devicesDigest = JSON.stringify(devices);
   if (!devices || devicesDigest == window.devicesDigest)
     return;
 
   window.devicesDigest = devicesDigest;
 
-  var containerElement = $('devices');
-  containerElement.textContent = '';
+  function removeObsolete(validIds, section) {
+    if (validIds.indexOf(section.id) < 0)
+      section.remove();
+  }
 
-  // Populate with new entries
+  var deviceList = $('devices');
+
+  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 deviceHeader = document.createElement('div');
-    deviceHeader.className = 'section';
-    deviceHeader.textContent = device.adbModel;
-    containerElement.appendChild(deviceHeader);
+    var browserList;
+    var deviceSection = $(device.adbGlobalId);
+    if (deviceSection) {
+      browserList = deviceSection.querySelector('.browsers');
+    } else {
+      deviceSection = document.createElement('div');
+      deviceSection.id = device.adbGlobalId;
+      deviceSection.className = 'device list';
+      deviceList.appendChild(deviceSection);
 
-    var deviceContent = document.createElement('div');
-    deviceContent.className = 'list';
-    containerElement.appendChild(deviceContent);
+      var deviceHeader = document.createElement('div');
+      deviceHeader.className = 'section';
+      deviceHeader.textContent = device.adbModel;
+      deviceSection.appendChild(deviceHeader);
+
+      browserList = document.createElement('div');
+      browserList.className = 'browsers';
+      deviceSection.appendChild(browserList);
+    }
+
+    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 browserHeader = document.createElement('div');
-      browserHeader.className = 'small-section';
-      browserHeader.textContent = browser.adbBrowserName;
-      deviceContent.appendChild(browserHeader);
+      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 browserPages = document.createElement('div');
-      browserPages.className = 'list package';
-      deviceContent.appendChild(browserPages);
+        var browserHeader = document.createElement('div');
+        browserHeader.className = 'small-section';
+        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);
+
+        var openHandler = function(browserId, input) {
+          open(browserId, input.value || 'about:blank');
+          input.value = '';
+        }.bind(null, browser.adbGlobalId, 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);
+
+        browserSection.appendChild(newPage);
+
+        pageList = document.createElement('div');
+        pageList.className = 'list pages';
+        browserSection.appendChild(pageList);
+      }
 
       for (var p = 0; p < browser.pages.length; p++) {
-        addTargetToList(
-            browser.pages[p], browserPages, ['faviconUrl', 'name', 'url']);
+        var page = browser.pages[p];
+        var row = addTargetToList(
+            page, pageList, ['faviconUrl', 'name', 'url']);
+        row.appendChild(createActionLink('reload', reload.bind(null, page)));
+        row.appendChild(createActionLink('close', terminate.bind(null, page)));
       }
     }
   }
 }
 
 function addToPagesList(data) {
   addTargetToList(data, $('pages'), ['faviconUrl', 'name', 'url']);
 }
 
 function addToExtensionsList(data) {
   addTargetToList(data, $('extensions'), ['name', 'url']);
 }
 
 function addToAppsList(data) {
   addTargetToList(data, $('apps'), ['name', 'url']);
 }
 
 function addToWorkersList(data) {
-  addTargetToList(data,
-                  $('workers'),
-                  ['name', 'url', 'pid'],
-                  true);
+  var row = addTargetToList(data, $('workers'), ['name', 'url', 'pid']);
+  row.appendChild(createActionLink(
+      'terminate', terminate.bind(null, data), data.attached));
 }
 
 function addToOthersList(data) {
   addTargetToList(data, $('others'), ['url']);
 }
 
 function formatValue(data, property) {
   var value = data[property];
 
   if (property == 'faviconUrl') {
     var faviconElement = document.createElement('img');
     if (value)
       faviconElement.src = value;
     return faviconElement;
   }
 
   var text = value ? String(value) : '';
   if (text.length > 100)
     text = text.substring(0, 100) + '\u2026';
 
   if (property == 'pid')
     text = 'Pid:' + text;
 
   var span = document.createElement('span');
   span.textContent = ' ' + text + ' ';
   span.className = property;
   return span;
 }
 
-function addTargetToList(data, list, properties, canTerminate) {
+function addTargetToList(data, list, properties) {
   var row = document.createElement('div');
   row.className = 'row';
   for (var j = 0; j < properties.length; j++)
     row.appendChild(formatValue(data, properties[j]));
 
-  row.appendChild(createInspectElement(data));
-
-  if (canTerminate)
-    row.appendChild(createTerminateElement(data));
+  row.appendChild(createActionLink('inspect', inspect.bind(null, data)));
 
   row.processId = data.processId;
   row.routeId = data.routeId;
 
   list.appendChild(row);
+  return row;
 }
 
-function createInspectElement(data) {
+function createActionLink(text, handler, opt_disabled) {
   var link = document.createElement('a');
+  if (opt_disabled)
+    link.disabled = true;
+
   link.setAttribute('href', '#');
-  link.textContent = ' inspect ';
-  link.addEventListener(
-      'click',
-      inspect.bind(this, data),
-      true);
+  link.textContent = text;
+  link.addEventListener('click', handler, true);
   return link;
 }
 
-function createTerminateElement(data) {
-  var link = document.createElement('a');
-  if (data.attached)
-    link.disabled = true;
-
-  link.setAttribute('href', '#');
-  link.textContent = ' terminate ';
-  link.addEventListener(
-      'click',
-      terminate.bind(this, data),
-      true);
-  return link;
-}
-
 
 function initPortForwarding() {
   $('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);
@@ skipping 212 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);