[DevTools] Polish device mode UI, include outline into screenshot.

third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css

Index: third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css b/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
index 9613727c2dff631f5c6dcb631bbe93819319ba79..71f1d2551dad954fa3b0c6b4f14338a245c63793 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
@@ -48,6 +48,10 @@
     box-shadow: inset 0 -1px #ccc;
 }
 
+.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-media-container {
+    margin-bottom: 20px;
+}
+
 .device-mode-presets-container {
     flex: 0 0 20px;
     display: flex;
@@ -118,6 +122,9 @@
     width: 0;
     height: 0;
     background-color: #171717;
+}
+
+.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area {
     box-shadow: hsl(240, 3%, 84%) 0 0 0 0.5px, hsla(0, 0%, 80%, 0.4) 0 0 20px;
 }
 
@@ -129,10 +136,6 @@
     height: 100%;
 }
 
-.device-mode-outline-image.device-frame-visible + .device-mode-screen-area {
-    box-shadow: none;
-}
-
 .device-mode-resizer {
     position: absolute;
     display: flex;
@@ -260,21 +263,69 @@
 }
 
 .device-mode-ruler {
-    pointer-events: none;
-    position: relative;
+    position: absolute;
+    overflow: visible;
 }
 
 .device-mode-ruler-top {
-    flex: 0 0 20px;
+    height: 20px;
+    right: 0;
 }
 
 .device-mode-ruler-left {
-    position: absolute;
-    left: 0;
     width: 20px;
+    bottom: 0;
+}
+
+.device-mode-ruler-content {
+    pointer-events: none;
+    position: absolute;
+    left: -20px;
+    top: -20px;
+}
+
+.device-mode-ruler-top .device-mode-ruler-content {
+    border-top: 1px solid transparent;
+    right: 0;
+    bottom: 20px;
+    background-color: hsla(0, 0%, 98%, 0.9);
+}
+
+.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-top .device-mode-ruler-content {
+    border-top: 1px solid hsl(0, 0%, 50%);
+}
+
+.device-mode-ruler-left .device-mode-ruler-content {
+    border-left: 1px solid transparent;
+    border-top: 1px solid transparent;
+    right: 20px;
+    bottom: 0;
+}
+
+.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-left .device-mode-ruler-content {
+    border-left: 1px solid hsl(0, 0%, 50%);
+    border-top: 1px solid hsl(0, 0%, 50%);
+}
+
+.device-mode-ruler-inner {
+    position: absolute;
+}
+
+.device-mode-ruler-top .device-mode-ruler-inner {
     top: 0;
     bottom: 0;
-    transform: translateX(-20px);
+    left: 20px;
+    right: 0;
+    border-bottom: 1px solid hsl(0, 0%, 50%);
+}
+
+.device-mode-ruler-left .device-mode-ruler-inner {
+    left: 0;
+    right: 0;
+    top: 19px;
+    bottom: 0;
+    border-right: 1px solid hsl(0, 0%, 50%);
+    background-color: hsla(0, 0%, 98%, 0.9);
 }
 
 .device-mode-ruler-marker {