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

chrome/browser/resources/inspect/inspect.css

 /*
  * 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.
  */
 
 body {
   color: rgb(48, 57, 66);
   font-family: Arial, sans-serif;
   font-size: 13px;
@@ skipping 120 matching lines @@
   display: -webkit-box;
   padding-top: 10px;
 }
 
 .browser-header > .browser-name {
   font-size: 110%;
   font-weight: bold;
 }
 
 .row {
+  -webkit-flex-direction: row;
+  display: -webkit-flex;
   padding: 6px 0;
+  position: relative;
 }
 
 .subrow {
   -webkit-box-orient: horizontal;
   display: -webkit-box;
 }
 
 .subrow > div {
   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 {
   padding-left: 20px;
 }
 
 .invisible-view {
   color: rgb(151, 156, 160);
 }
 
 .url {
   color: #A0A0A0;
 }
 
 .list {
   margin-top: 5px;
 }
 
 a {
   color: rgb(17, 85, 204);
   margin-right: 6px;
   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;
 }
 
 a.disabled {
   opacity: 0.5;
   pointer-events: none;
 }
 
 .open > input {
@@ skipping 129 matching lines @@
   pointer-events: none;
 }
 
 .port-forwarding-pair:not(.selected) .close-button:not(:hover) {
   opacity: 0.5;
 }
 
 #port-forwarding-config-buttons > button {
   float: right;
 }