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

chrome/browser/resources/inspect/inspect.js

Index: chrome/browser/resources/inspect/inspect.js
diff --git a/chrome/browser/resources/inspect/inspect.js b/chrome/browser/resources/inspect/inspect.js
index b9c1bee964878c91e11ed7aef72948de8bd33d76..f47f00d1430b80aef4a554c04f18423b5a27c921 100644
--- a/chrome/browser/resources/inspect/inspect.js
+++ b/chrome/browser/resources/inspect/inspect.js
@@ -282,8 +282,9 @@ function populateDeviceLists(devices) {
         // it is impossible to activate existing DevTools window.
         page.hasNoUniqueId = page.attached &&
             majorChromeVersion < MIN_VERSION_TARGET_ID;
+        var iconProperty = page.description ? 'description' : 'faviconUrl';
         var row = addTargetToList(
-            page, pageList, ['faviconUrl', 'name', 'url', 'description']);
+            page, pageList, [iconProperty, 'name', 'url'], device);
         if (isChrome) {
           if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE) {
             row.appendChild(createActionLink(
@@ -381,7 +382,54 @@ function addWebViewDescription(webview, list) {
   return row;
 }
 
-function addTargetToList(data, list, properties) {
+function addWebViewThumbnail(webview, row, device) {
+  if (!device.adbScreenWidth || !device.adbScreenHeight)
+    return;
+
+  var maxScreenRectSize = 50;
+  var screenRectWidth;
+  var screenRectHeight;
+
+  var aspectRatio = device.adbScreenWidth / device.adbScreenHeight;
+  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';
+  row.appendChild(thumbnail);
+  row.style.paddingLeft = thumbnailWidth + 6 + '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)
+    return;
+
+  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 / device.adbScreenWidth);
+  viewRect.style.top = percent(webview.screenY / device.adbScreenHeight);
+  viewRect.style.width = percent(webview.width / device.adbScreenWidth);
+  viewRect.style.height = percent(webview.height / device.adbScreenHeight);
+  screenRect.appendChild(viewRect);
+}
+
+function addTargetToList(data, list, properties, opt_device) {
   var row = document.createElement('div');
   row.className = 'row';
 
@@ -396,6 +444,8 @@ function addTargetToList(data, list, properties) {
     else if (data['description']) {
       try {
         description = JSON.parse(data['description']);
+        if (opt_device)
+          addWebViewThumbnail(description, row, opt_device);
       } catch (e) {}
     }
   }