3 files changed, 180 insertions, 169 deletions

diff --git a/chromium/chrome/browser/resources/inspect/inspect.css b/chromium/chrome/browser/resources/inspect/inspect.css
index 49bd50080eb..0398c2959d5 100644
--- a/chromium/chrome/browser/resources/inspect/inspect.css
+++ b/chromium/chrome/browser/resources/inspect/inspect.css
@@ -1,16 +1,20 @@
-/*
- * Copyright (c) 2012 The Chromium Authors. All rights reserved.
+/* 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.
- */
+ * found in the LICENSE file. */
+
+* {
+  box-sizing: border-box;
+}
 
 body {
   color: rgb(48, 57, 66);
-  font-family: Arial, sans-serif;
   font-size: 13px;
   margin: 0;
   min-width: 47em;
-  padding: 20px 20px 65px 0;
+}
+
+.hidden {
+    display: none !important;
 }
 
 img {
@@ -19,7 +23,7 @@ img {
   padding-left: 2px;
   padding-right: 5px;
   vertical-align: top;
-  width: 16px;
+  width: 23px;
 }
 
 #container {
@@ -28,11 +32,16 @@ img {
 }
 
 #navigation {
+  max-height: 100vh;
+  overflow: auto;
+  padding-top: 20px;
   width: 150px;
 }
 
 #content {
   -webkit-flex: 1;
+  max-height: 100vh;
+  overflow: auto;
 }
 
 #caption {
@@ -69,14 +78,23 @@ img {
   color: #999;
 }
 
+#content > div {
+  padding: 54px 20px 65px 0;
+}
 #content > div:not(.selected) {
   display: none;
 }
 
 .content-header {
+  background: linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92));
   border-bottom: 1px solid #eee;
   font-size: 150%;
-  padding-bottom: 10px;
+  left: 150px;
+  padding: 20px 0 10px 0;
+  position: fixed;
+  right: 20px;
+  top: 0;
+  z-index: 1;
 }
 
 #devices-help {
@@ -96,7 +114,7 @@ img {
 }
 
 .device-serial {
-  color: #888;
+  color: #999;
   font-size: 80%;
   margin-left: 6px;
 }
@@ -108,9 +126,9 @@ img {
 }
 
 .port-icon {
-  -webkit-border-radius: 6px;
   background-color: rgb(64, 192, 64);
   border: 0 solid transparent;
+  border-radius: 6px;
   height: 12px;
   margin: 2px;
   width: 12px;
@@ -120,11 +138,6 @@ img {
   background-color: rgb(224, 32, 32);
 }
 
-.port-icon.connected {
-  -webkit-transform: scale(1.2);
-  background-color: rgb(0, 255, 0);
-}
-
 .port-icon.transient {
   -webkit-transform: scale(1.2);
   background-color: orange;
@@ -139,7 +152,7 @@ img {
   align-items: center;
   display: flex;
   flex-flow: row wrap;
-  min-height: 23px;
+  min-height: 33px;
   padding-top: 10px;
 }
 
@@ -148,9 +161,14 @@ img {
   font-weight: bold;
 }
 
+.browser-header > .browser-user {
+  color: #999;
+  margin-left: 6px;
+}
+
 .used-for-port-forwarding {
-  background-image: -webkit-image-set(url('chrome://theme/IDR_INFO') 1x,
-                                      url('chrome://theme/IDR_INFO@2x') 2x);
+  background-image: -webkit-image-set(url(chrome://theme/IDR_INFO) 1x,
+                                      url(chrome://theme/IDR_INFO@2x) 2x);
   height: 15px;
   margin-left: 20px;
   width: 15px;
@@ -181,6 +199,7 @@ img {
 
 .webview-thumbnail {
   display: inline-block;
+  flex-shrink: 0;
   margin-right: 5px;
   overflow: hidden;
   position: relative;
@@ -212,7 +231,7 @@ img {
 }
 
 .url {
-  color: #A0A0A0;
+  color: #999;
 }
 
 .list {
@@ -271,21 +290,9 @@ img {
   margin-left: 15px;
 }
 
-#port-forwarding-overlay {
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
-  background-color: rgba(255, 255, 255, 0.75);
-  bottom: 0;
-  display: -webkit-box;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .warning {
-  background-image: -webkit-image-set(url('chrome://theme/IDR_WARNING') 1x,
-                                      url('chrome://theme/IDR_WARNING@2x') 2x);
+  background-image: -webkit-image-set(url(chrome://theme/IDR_WARNING) 1x,
+                                      url(chrome://theme/IDR_WARNING@2x) 2x);
   background-position: 0 center;
   background-repeat: no-repeat;
   background-size: 24px 21px;
@@ -293,31 +300,36 @@ img {
   padding-left: 25px;
 }
 
-#port-forwarding-overlay:not(.open) {
-  display: none;
+#port-forwarding-config::backdrop {
+  background-color: rgba(255, 255, 255, 0.75);
 }
 
 #port-forwarding-config {
-  -webkit-border-radius: 3px;
   background: white;
+  border: 0;
+  border-radius: 3px;
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
   color: #333;
   padding: 17px 17px 12px;
   position: relative;
 }
 
+#port-forwarding-enable {
+  vertical-align: middle;
+}
+
 .close-button {
-  background-image: url('chrome://theme/IDR_CLOSE_DIALOG');
+  background-image: url(chrome://theme/IDR_CLOSE_DIALOG);
   height: 14px;
   width: 14px;
 }
 
 .close-button:active {
-  background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
+  background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
 }
 
 .close-button:hover {
-  background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
+  background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
 }
 
 #port-forwarding-config > .close-button {
diff --git a/chromium/chrome/browser/resources/inspect/inspect.html b/chromium/chrome/browser/resources/inspect/inspect.html
index b2f5aad6ea9..8b90983c53e 100644
--- a/chromium/chrome/browser/resources/inspect/inspect.html
+++ b/chromium/chrome/browser/resources/inspect/inspect.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!doctype html>
 <html>
 <!--
 Copyright (c) 2012 The Chromium Authors. All rights reserved.
@@ -8,7 +8,7 @@ found in the LICENSE file.
 <head>
 <meta charset="utf-8">
 <title>Inspect with Chrome Developer Tools</title>
-
+<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
 <link rel="stylesheet" href="inspect.css">
 <script src="chrome://resources/js/util.js"></script>
 <script src="inspect.js"></script>
@@ -69,24 +69,23 @@ found in the LICENSE file.
     </div>
   </div>
 </div>
-<div id="port-forwarding-overlay">
-  <div id="port-forwarding-config">
-    <div id="port-forwarding-config-close" class="close-button"></div>
-    <div id="port-forwarding-config-title">Port forwarding settings</div>
-    <div id="port-forwarding-config-list">
-    </div>
-    <div id="port-forwarding-message">
-        Define the listening port on your device that maps to a port accessible
-        from your development machine.
-        <a href="https://developers.google.com/chrome-developer-tools/docs/remote-debugging#reverse-port-forwarding"
-           target="_blank">Learn more</a>
-    </div>
-    <div id="port-forwarding-config-buttons">
-      <input id="port-forwarding-enable" type="checkbox" disabled/>
-      <label for="port-forwarding-enable">Enable port forwarding</label>
-      <button id="port-forwarding-config-done">Done</button>
-    </div>
+<dialog id="port-forwarding-config">
+  <div id="port-forwarding-config-close" class="close-button"></div>
+  <div id="port-forwarding-config-title">Port forwarding settings</div>
+  <div id="port-forwarding-config-list">
   </div>
-</div>
+  <div id="port-forwarding-message">
+      Define the listening port on your device that maps to a port accessible
+      from your development machine.
+      <a href="https://developer.chrome.com/devtools/docs/remote-debugging#reverse-port-forwarding"
+         target="_blank">Learn more</a>
+  </div>
+  <div id="port-forwarding-config-buttons">
+    <label>
+      <input id="port-forwarding-enable" type="checkbox" disabled>Enable port forwarding
+    </label>
+    <button id="port-forwarding-config-done">Done</button>
+  </div>
+</dialog>
 </body>
 </html>
diff --git a/chromium/chrome/browser/resources/inspect/inspect.js b/chromium/chrome/browser/resources/inspect/inspect.js
index a99d3c44fd5..f456b66c0e2 100644
--- a/chromium/chrome/browser/resources/inspect/inspect.js
+++ b/chromium/chrome/browser/resources/inspect/inspect.js
@@ -6,8 +6,11 @@ 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';
 
 var queryParamsObject = {};
+var browserInspector;
+var browserInspectorTitle;
 
 (function() {
 var queryParams = window.location.search;
@@ -19,6 +22,13 @@ for (var i = 0; i < params.length; ++i) {
     queryParamsObject[pair[0]] = pair[1];
 }
 
+if ('trace' in queryParamsObject || 'tracing' in queryParamsObject) {
+  browserInspector = 'chrome://tracing';
+  browserInspectorTitle = 'trace';
+} else {
+  browserInspector = queryParamsObject['browser-inspector'];
+  browserInspectorTitle = 'inspect';
+}
 })();
 
 function sendCommand(command, args) {
@@ -132,25 +142,60 @@ function alreadyDisplayed(element, data) {
   return false;
 }
 
+function updateBrowserVisibility(browserSection) {
+  var icon = browserSection.querySelector('.used-for-port-forwarding');
+  browserSection.hidden = !browserSection.querySelector('.open') &&
+                          !browserSection.querySelector('.row') &&
+                          !browserInspector &&
+                          (!icon || icon.hidden);
+}
+
+function updateUsernameVisibility(deviceSection) {
+  var users = new Set();
+  var browsers = deviceSection.querySelectorAll('.browser');
+
+  Array.prototype.forEach.call(browsers, function(browserSection) {
+    if (!browserSection.hidden) {
+      var browserUser = browserSection.querySelector('.browser-user');
+      if (browserUser)
+        users.add(browserUser.textContent);
+    }
+  });
+  var hasSingleUser = users.size <= 1;
+
+  Array.prototype.forEach.call(browsers, function(browserSection) {
+    var browserUser = browserSection.querySelector('.browser-user');
+    if (browserUser)
+      browserUser.hidden = hasSingleUser;
+  });
+}
+
 function populateRemoteTargets(devices) {
   if (!devices)
     return;
 
-  if (window.modal) {
+  if ($('port-forwarding-config').open) {
     window.holdDevices = devices;
     return;
   }
 
-  function insertChildSortedById(parent, child) {
-    for (var sibling = parent.firstElementChild;
-                     sibling;
-                     sibling = sibling.nextElementSibling) {
-      if (sibling.id > child.id) {
-        parent.insertBefore(child, sibling);
+  function browserCompare(a, b) {
+    if (a.adbBrowserName != b.adbBrowserName)
+      return a.adbBrowserName < b.adbBrowserName;
+    if (a.adbBrowserVersion != b.adbBrowserVersion)
+      return a.adbBrowserVersion < b.adbBrowserVersion;
+    return a.id < b.id;
+  }
+
+  function insertBrowser(browserList, browser) {
+    for (var sibling = browserList.firstElementChild; sibling;
+        sibling = sibling.nextElementSibling) {
+      if (browserCompare(browser, sibling)) {
+        browserList.insertBefore(browser, sibling);
         return;
       }
     }
-    parent.appendChild(child);
+    browserList.appendChild(browser);
   }
 
   var deviceList = $('devices-list');
@@ -189,9 +234,13 @@ function populateRemoteTargets(devices) {
 
       var deviceSerial = document.createElement('div');
       deviceSerial.className = 'device-serial';
-      deviceSerial.textContent = '#' + device.adbSerial.toUpperCase();
+      var serial = device.adbSerial.toUpperCase();
+      deviceSerial.textContent = '#' + serial;
       deviceHeader.appendChild(deviceSerial);
 
+      if (serial === WEBRTC_SERIAL)
+        deviceHeader.classList.add('hidden');
+
       var devicePorts = document.createElement('div');
       devicePorts.className = 'device-ports';
       deviceHeader.appendChild(devicePorts);
@@ -222,11 +271,7 @@ function populateRemoteTargets(devices) {
 
     for (var b = 0; b < device.browsers.length; b++) {
       var browser = device.browsers[b];
-
       var majorChromeVersion = browser.adbBrowserChromeVersion;
-
-      var incompatibleVersion = browser.hasOwnProperty('compatibleVersion') &&
-                                !browser.compatibleVersion;
       var pageList;
       var browserSection = $(browser.id);
       if (browserSection) {
@@ -235,7 +280,7 @@ function populateRemoteTargets(devices) {
         browserSection = document.createElement('div');
         browserSection.id = browser.id;
         browserSection.className = 'browser';
-        insertChildSortedById(browserList, browserSection);
+        insertBrowser(browserList, browserSection);
 
         var browserHeader = document.createElement('div');
         browserHeader.className = 'browser-header';
@@ -246,9 +291,15 @@ function populateRemoteTargets(devices) {
         browserName.textContent = browser.adbBrowserName;
         if (browser.adbBrowserVersion)
           browserName.textContent += ' (' + browser.adbBrowserVersion + ')';
+        if (browser.adbBrowserUser) {
+          var browserUser = document.createElement('div');
+          browserUser.className = 'browser-user';
+          browserUser.textContent = browser.adbBrowserUser;
+          browserHeader.appendChild(browserUser);
+        }
         browserSection.appendChild(browserHeader);
 
-        if (!incompatibleVersion && majorChromeVersion >= MIN_VERSION_NEW_TAB) {
+        if (majorChromeVersion >= MIN_VERSION_NEW_TAB) {
           var newPage = document.createElement('div');
           newPage.className = 'open';
 
@@ -282,24 +333,6 @@ function populateRemoteTargets(devices) {
             'forwarding. Closing it will drop current connections.';
         browserHeader.appendChild(portForwardingInfo);
 
-        if (incompatibleVersion) {
-          var warningSection = document.createElement('div');
-          warningSection.className = 'warning';
-          warningSection.textContent =
-            'You may need a newer version of desktop Chrome. ' +
-            'Please try Chrome ' + browser.adbBrowserVersion + ' or later.';
-          browserSection.appendChild(warningSection);
-        }
-
-        var browserInspector;
-        var browserInspectorTitle;
-        if ('trace' in queryParamsObject || 'tracing' in queryParamsObject) {
-          browserInspector = 'chrome://tracing';
-          browserInspectorTitle = 'trace';
-        } else {
-          browserInspector = queryParamsObject['browser-inspector'];
-          browserInspectorTitle = 'inspect';
-        }
         if (browserInspector) {
           var link = document.createElement('span');
           link.classList.add('action');
@@ -317,35 +350,36 @@ function populateRemoteTargets(devices) {
         browserSection.appendChild(pageList);
       }
 
-      if (incompatibleVersion || alreadyDisplayed(browserSection, browser))
-        continue;
-
-      pageList.textContent = '';
-      for (var p = 0; p < browser.pages.length; p++) {
-        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',
-              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), false);
+      if (!alreadyDisplayed(browserSection, browser)) {
+        pageList.textContent = '';
+        for (var p = 0; p < browser.pages.length; p++) {
+          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',
+                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), false);
+          }
         }
       }
+      updateBrowserVisibility(browserSection);
     }
+    updateUsernameVisibility(deviceSection);
   }
 }
 
@@ -576,7 +610,7 @@ function initSettings() {
   $('port-forwarding-config-close').addEventListener(
       'click', closePortForwardingConfig);
   $('port-forwarding-config-done').addEventListener(
-      'click', commitPortForwardingConfig.bind(true));
+      'click', commitPortForwardingConfig.bind(null, true));
 }
 
 function enableDiscoverUsbDevices(event) {
@@ -603,68 +637,37 @@ function handleKey(event) {
         commitPortForwardingConfig(true);
       }
       break;
-
-    case 27:
-      commitPortForwardingConfig(true);
-      break;
   }
 }
 
-function setModal(dialog) {
-  dialog.deactivatedNodes = Array.prototype.filter.call(
-      document.querySelectorAll('*'),
-      function(n) {
-        return n != dialog && !dialog.contains(n) && n.tabIndex >= 0;
-      });
-
-  dialog.tabIndexes = dialog.deactivatedNodes.map(
-    function(n) { return n.getAttribute('tabindex'); });
-
-  dialog.deactivatedNodes.forEach(function(n) { n.tabIndex = -1; });
-  window.modal = dialog;
-}
-
-function unsetModal(dialog) {
-  for (var i = 0; i < dialog.deactivatedNodes.length; i++) {
-    var node = dialog.deactivatedNodes[i];
-    if (dialog.tabIndexes[i] === null)
-      node.removeAttribute('tabindex');
-    else
-      node.setAttribute('tabindex', dialog.tabIndexes[i]);
-  }
-
-  if (window.holdDevices) {
-    populateRemoteTargets(window.holdDevices);
-    delete window.holdDevices;
-  }
-
-  delete dialog.deactivatedNodes;
-  delete dialog.tabIndexes;
-  delete window.modal;
-}
-
 function openPortForwardingConfig() {
   loadPortForwardingConfig(window.portForwardingConfig);
 
-  $('port-forwarding-overlay').classList.add('open');
+  $('port-forwarding-config').showModal();
   document.addEventListener('keyup', handleKey);
+  $('port-forwarding-config').onclose = function() {
+    commitPortForwardingConfig(true);
+  };
 
   var freshPort = document.querySelector('.fresh .port');
   if (freshPort)
     freshPort.focus();
   else
     $('port-forwarding-config-done').focus();
-
-  setModal($('port-forwarding-overlay'));
 }
 
 function closePortForwardingConfig() {
-  if (!$('port-forwarding-overlay').classList.contains('open'))
+  if (!$('port-forwarding-config').open)
     return;
 
-  $('port-forwarding-overlay').classList.remove('open');
+  $('port-forwarding-config').onclose = null;
+  $('port-forwarding-config').close();
   document.removeEventListener('keyup', handleKey);
-  unsetModal($('port-forwarding-overlay'));
+
+  if (window.holdDevices) {
+    populateRemoteTargets(window.holdDevices);
+    delete window.holdDevices;
+  }
 }
 
 function loadPortForwardingConfig(config) {
@@ -883,11 +886,7 @@ function populatePortStatus(devicesStatusMap) {
       var portIcon = document.createElement('div');
       portIcon.className = 'port-icon';
       // status === 0 is the default (connected) state.
-      // Positive values correspond to the tunnelling connection count
-      // (in DEBUG_DEVTOOLS mode).
-      if (status > 0)
-        portIcon.classList.add('connected');
-      else if (status === -1 || status === -2)
+      if (status === -1 || status === -2)
         portIcon.classList.add('transient');
       else if (status < 0)
         portIcon.classList.add('error');
@@ -896,8 +895,6 @@ function populatePortStatus(devicesStatusMap) {
       var portNumber = document.createElement('div');
       portNumber.className = 'port-number';
       portNumber.textContent = ':' + port;
-      if (status > 0)
-        portNumber.textContent += '(' + status + ')';
       devicePorts.appendChild(portNumber);
     }
 
@@ -905,10 +902,13 @@ function populatePortStatus(devicesStatusMap) {
       var icon = browserSection.querySelector('.used-for-port-forwarding');
       if (icon)
         icon.hidden = (browserSection.id !== deviceStatus.browserId);
+      updateBrowserVisibility(browserSection);
     }
 
     Array.prototype.forEach.call(
         deviceSection.querySelectorAll('.browser'), updatePortForwardingInfo);
+
+    updateUsernameVisibility(deviceSection);
   }
 
   function clearPorts(deviceSection) {