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..b0327cb44f7d2d4b995c1b256234f21f044f75bb 100644
--- a/chrome/browser/resources/inspect/inspect.css
+++ b/chrome/browser/resources/inspect/inspect.css
@@ -138,7 +138,10 @@ img {
 }
 
 .row {
+  -webkit-flex-direction: row;
+  display: -webkit-flex;
   padding: 6px 0;
+  position: relative;
 }
 
 .subrow {
@@ -150,8 +153,30 @@ img {
   margin-right: 0.5em;
 }
 
-.subrow.webview {
-  margin-top: -2px;
+.webview-thumbnail {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  display: -webkit-box;
+  height: 60px;
+  margin: 0 1px;
+  overflow: hidden;
+}
+
+.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,12 +201,6 @@ a {
   text-decoration: none;
 }
 
-.list.pages .subrow + a,
-.subrow.webview > div:first-child,
-.guest .subrow + a {
-  margin-left: 24px;  /* Align with the favicon */
-}
-
 .list:not(.pages) .subrow {
   height: 19px;
 }