DevTools: Improve design of WebViews available for inspection in chrome://inspect

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) {
@@ skipping 264 matching lines @@
       if (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 < MIN_VERSION_TARGET_ID;
-        var row = addTargetToList(
-            page, pageList, ['faviconUrl', 'name', 'url', 'description']);
+        var row = addTargetToList(page, pageList, ['name', 'url']);
+        if (page['description'])
+          addWebViewDetails(row, page);
+        else
+          addFavicon(row, page);
         if (isChrome) {
           if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE) {
-            row.appendChild(createActionLink(
-                'activate', activate.bind(null, page), false));
+            addActionLink(row, 'activate', activate.bind(null, page), false);
           }
-          row.appendChild(createActionLink(
-              'reload', reload.bind(null, page), page.attached));
+          addActionLink(row, 'reload', reload.bind(null, page), page.attached);
           if (majorChromeVersion >= MIN_VERSION_TAB_CLOSE) {
-            row.appendChild(createActionLink(
-                'close', terminate.bind(null, page), page.attached));
+            addActionLink(
+                row, 'close', terminate.bind(null, page), page.attached);
           }
         }
       }
     }
   }
 }
 
 function addToPagesList(data) {
-  addTargetToList(data, $('pages-list'), ['faviconUrl', 'name', 'url']);
+  var row = addTargetToList(data, $('pages-list'), ['name', 'url']);
+  addFavicon(row, data);
 }
 
 function addToExtensionsList(data) {
   addTargetToList(data, $('extensions-list'), ['name', 'url']);
 }
 
 function addToAppsList(data) {
   var row = addTargetToList(data, $('apps-list'), ['name', 'url']);
   if (data.guests) {
     Array.prototype.forEach.call(data.guests, function(guest) {
-      var guestRow = addTargetToList(guest, row, ['faviconUrl', 'name', 'url']);
+      var guestRow = addTargetToList(guest, row, ['name', 'url']);
       guestRow.classList.add('guest');
+      addFavicon(guestRow, data);
     });
   }
 }
 
 function addToWorkersList(data) {
   var row = addTargetToList(data, $('workers-list'), ['pid', 'url']);
-  row.appendChild(createActionLink(
-      'terminate', terminate.bind(null, data), data.attached));
+  addActionLink(row, 'terminate', terminate.bind(null, data), data.attached);
 }
 
 function addToOthersList(data) {
   addTargetToList(data, $('others-list'), ['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';
 
   if (property == 'pid')
     text = 'Pid:' + text;
 
   var span = document.createElement('div');
   span.textContent = text;
   span.className = property;
   return span;
 }
 
-function addWebViewDescription(webview, list) {
+function addFavicon(row, data) {
+  var favicon = document.createElement('img');
+  if (data['faviconUrl'])
+    favicon.src = data['faviconUrl'];
+  row.insertBefore(favicon, row.firstChild);
+}
+
+function addWebViewDetails(row, data) {
+  var webview;
+  try {
+    webview = JSON.parse(data['description']);
+  } catch (e) {
+    return;
+  }
+  addWebViewDescription(row, webview);
+  if (data.adbScreenWidth && data.adbScreenHeight)
+    addWebViewThumbnail(
+        row, webview, data.adbScreenWidth, data.adbScreenHeight);
+}
+
+function addWebViewDescription(row, webview) {
   var viewStatus = { visibility: 'empty', position: '', size: '' };
   if (!webview.empty) {
     if (webview.attached)
       viewStatus.visibility = webview.visible ? 'visible' : 'hidden';
     else
       viewStatus.visibility = 'detached';
     viewStatus.size = 'size ' + webview.width + ' \u00d7 ' + webview.height;
   }
   if (webview.attached) {
       viewStatus.position =
         'at (' + webview.screenX + ', ' + webview.screenY + ')';
   }
 
-  var row = document.createElement('div');
-  row.className = 'subrow webview';
+  var subRow = document.createElement('div');
+  subRow.className = 'subrow webview';
   if (webview.empty || !webview.attached || !webview.visible)
-    row.className += ' invisible-view';
-  row.appendChild(formatValue(viewStatus, 'visibility'));
-  row.appendChild(formatValue(viewStatus, 'position'));
-  row.appendChild(formatValue(viewStatus, 'size'));
-  list.appendChild(row);
-  return row;
+    subRow.className += ' invisible-view';
+  subRow.appendChild(formatValue(viewStatus, 'visibility'));
+  subRow.appendChild(formatValue(viewStatus, 'position'));
+  subRow.appendChild(formatValue(viewStatus, 'size'));
+  var mainSubrow = row.querySelector('.subrow.main');
+  if (mainSubrow.nextSibling)
+    mainSubrow.parentNode.insertBefore(subRow, mainSubrow.nextSibling);
+  else
+    mainSubrow.parentNode.appendChild(subRow);
+}
+
+function addWebViewThumbnail(row, webview, screenWidth, screenHeight) {
+  var maxScreenRectSize = 50;
+  var screenRectWidth;
+  var screenRectHeight;
+
+  var aspectRatio = screenWidth / screenHeight;
+  if (aspectRatio < 1) {
+    screenRectWidth = Math.round(maxScreenRectSize * aspectRatio);
+    screenRectHeight = maxScreenRectSize;
+  } else {
+    screenRectWidth = maxScreenRectSize;
+    screenRectHeight = Math.round(maxScreenRectSize / aspectRatio);
+  }
+
+  var thumbnail = document.createElement('div');
+  thumbnail.className = 'webview-thumbnail';
+  var thumbnailWidth = 3 * screenRectWidth;
+  thumbnail.style.width = thumbnailWidth + 'px';
+
+  var screenRect = document.createElement('div');
+  screenRect.className = 'screen-rect';
+  screenRect.style.width = screenRectWidth + 'px';
+  screenRect.style.height = screenRectHeight + 'px';
+  thumbnail.appendChild(screenRect);
+
+  if (!webview.empty && webview.attached) {
+    var viewRect = document.createElement('div');
+    viewRect.className = 'view-rect';
+    if (!webview.visible)
+      viewRect.classList.add('hidden');
+    function percent(ratio) {
+      return ratio * 100 + '%';
+    }
+    viewRect.style.left = percent(webview.screenX / screenWidth);
+    viewRect.style.top = percent(webview.screenY / screenHeight);
+    viewRect.style.width = percent(webview.width / screenWidth);
+    viewRect.style.height = percent(webview.height / screenHeight);
+    screenRect.appendChild(viewRect);
+  }
+
+  row.insertBefore(thumbnail, row.firstChild);
 }
 
 function addTargetToList(data, list, properties) {
   var row = document.createElement('div');
   row.className = 'row';
 
+  var subrowBox = document.createElement('div');
+  row.appendChild(subrowBox);
+
   var subrow = document.createElement('div');
-  subrow.className = 'subrow';
-  row.appendChild(subrow);
+  subrow.className = 'subrow main';
+  subrowBox.appendChild(subrow);
 
   var description = null;
-  for (var j = 0; j < properties.length; j++) {
-    if (properties[j] != 'description')
-      subrow.appendChild(formatValue(data, properties[j]));
-    else if (data['description']) {
-      try {
-        description = JSON.parse(data['description']);
-      } catch (e) {}
-    }
-  }
+  for (var j = 0; j < properties.length; j++)
+    subrow.appendChild(formatValue(data, properties[j]));
 
   if (description)
-    addWebViewDescription(description, row);
+    addWebViewDescription(description, subrowBox);
 
-  row.appendChild(createActionLink(
-      'inspect', inspect.bind(null, data), data.hasNoUniqueId));
+  var actionBox = document.createElement('div');
+  actionBox.className = 'actions';
+  subrowBox.appendChild(actionBox);
+
+  addActionLink(row, 'inspect', inspect.bind(null, data), data.hasNoUniqueId);
 
   list.appendChild(row);
   return row;
 }
 
-function createActionLink(text, handler, opt_disabled) {
+function addActionLink(row, text, handler, opt_disabled) {
   var link = document.createElement('a');
   if (opt_disabled)
     link.classList.add('disabled');
   else
     link.classList.remove('disabled');
 
   link.setAttribute('href', '#');
   link.textContent = text;
   link.addEventListener('click', handler, true);
-  return link;
+  row.querySelector('.actions').appendChild(link);
 }
 
 
 function initPortForwarding() {
   $('port-forwarding-enable').addEventListener('change', enablePortForwarding);
 
   $('port-forwarding-config-open').addEventListener(
       'click', openPortForwardingConfig);
   $('port-forwarding-config-close').addEventListener(
       'click', closePortForwardingConfig);
@@ skipping 214 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);