chrome://inspect: Better support for multiple browsers and older versions of mobile Chrome

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 78 matching lines @@
     return;
 
   function alreadyDisplayed(element, data) {
     var json = JSON.stringify(data);
     if (element.cachedJSON == json)
       return true;
     element.cachedJSON = json;
     return false;
   }
 
+  function insertChildSortedById(parent, child) {
+    for (var sibling = parent.firstElementChild;
+                     sibling;
+                     sibling = sibling.nextElementSibling) {
+      if (sibling.id > child.id) {
+        parent.insertBefore(child, sibling);
+        return;
+      }
+    }
+    parent.appendChild(child);
+  }
+
   var deviceList = $('devices');
   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 });
@@ skipping 69 matching lines @@
 
     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 isChrome =
+          browser.adbBrowserName && browser.adbBrowserName.match(/^Chrome/);
+
       var pageList;
       var browserSection = $(browser.adbGlobalId);
       if (browserSection) {
         pageList = browserSection.querySelector('.pages');
       } else {
         browserSection = document.createElement('div');
         browserSection.id = browser.adbGlobalId;
         browserSection.className = 'browser';
-        browserList.appendChild(browserSection);
+        insertChildSortedById(browserList, browserSection);
 
         var browserHeader = document.createElement('div');
         browserHeader.className = 'browser-header';
         browserHeader.textContent = browser.adbBrowserName;
+        var majorChromeVersion = 0;
+        if (browser.adbBrowserVersion) {
+          browserHeader.textContent += ' (' + browser.adbBrowserVersion + ')';
+          var match = browser.adbBrowserVersion.match(/^Chrome\/(\d+)\./);
+          if (match)
+            majorChromeVersion = parseInt(match[1]);
+        }
         browserSection.appendChild(browserHeader);
 
-        var newPage = document.createElement('div');
-        newPage.className = 'open';
+        if (isChrome && majorChromeVersion >= 29) {
+          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 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 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);
+          var newPageButton = document.createElement('button');
+          newPageButton.textContent = 'Open';
+          newPage.appendChild(newPageButton);
+          newPageButton.addEventListener('click', openHandler, true);
 
-        browserSection.appendChild(newPage);
+          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));
+        if (isChrome) {
+          row.appendChild(createActionLink(
+              'reload', reload.bind(null, page), page.attached));
+          row.appendChild(createActionLink(
+              'close', terminate.bind(null, page), page.attached));
+        }
       }
     }
   }
 }
 
 function addToPagesList(data) {
   addTargetToList(data, $('pages'), ['faviconUrl', 'name', 'url']);
 }
 
 function addToExtensionsList(data) {
@@ skipping 10 matching lines @@
       'terminate', terminate.bind(null, data), data.attached));
 }
 
 function addToOthersList(data) {
   addTargetToList(data, $('others'), ['url']);
 }
 
 function formatValue(data, property) {
   var value = data[property];
 
+  if (property == 'name' && value == '') {
+    value = 'untitled';
+  }
+
   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';
@@ skipping 260 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);