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

chrome/browser/resources/inspect/inspect.css

Index: chrome/browser/resources/inspect/inspect.css
diff --git a/chrome/browser/resources/inspect/inspect.css b/chrome/browser/resources/inspect/inspect.css
index 052759366c5f9e8cb69ba2fefefbf69e80400bf6..5b2fee719501c94c477974b283b6a557121edc72 100644
--- a/chrome/browser/resources/inspect/inspect.css
+++ b/chrome/browser/resources/inspect/inspect.css
@@ -139,6 +139,7 @@ img {
 
 .row {
   padding: 6px 0;
+  position: relative;
 }
 
 .subrow {
@@ -150,8 +151,32 @@ img {
   margin-right: 0.5em;
 }
 
-.subrow.webview {
-  margin-top: -2px;
+.webview-thumbnail {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  bottom: 1px;
+  display: -webkit-box;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 1px;
+}
+
+.screen-rect {
+  background-color: #eee;
+  position: relative;
+}
+
+.view-rect {
+  background-color: #ccc;
+  min-height: 1px;
+  min-width: 1px;
+  position: absolute;
+}
+
+.view-rect.hidden {
+  background-color: #ddd;
 }
 
 .guest {
@@ -176,8 +201,7 @@ a {
   text-decoration: none;
 }
 
-.list.pages .subrow + a,
-.subrow.webview > div:first-child,
+.list.pages .subrow:not(.webview) + a,
 .guest .subrow + a {
   margin-left: 24px;  /* Align with the favicon */
 }