[DevTools] Option to show device frames in emulation mode

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 7351960afbc912116598f214d4fafec136d4df40..fca6e225e4295c002b1310c5d9dd9f83bae73e02 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
@@ -52,6 +52,10 @@
     margin-bottom: 20px;
 }
 
+.device-mode-content-clip:not(.device-mode-frame-visible) .device-mode-outline-area {
+    visibility: hidden;
+}
+
 .device-mode-presets-container {
     flex: 0 0 20px;
     display: flex;
@@ -122,7 +126,15 @@
     width: 0;
     height: 0;
     background-color: #171717;
-    box-shadow: hsl(240, 3%, 84%) 0 0 0 0.5px, hsla(0, 0%, 80%, 0.4) 0 0 20px;
+}
+
+.device-mode-content-clip:not(.device-mode-frame-visible) .device-mode-screen-area {
+    box-shadow: hsl(0, 0%, 88%) 1px 1px 0 1px, hsla(0, 0%, 80%, 0.6) 0 0 16px;
+}
+
+.device-mode-screen-area {
+    width: 454px;
+    height: 921px;
 }
 
 .device-mode-screen-image {
@@ -133,6 +145,22 @@
     height: 100%;
 }
 
+.device-mode-outline-area {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+}
+
+.device-mode-outline-image {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
 .device-mode-resizer {
     position: absolute;
     display: flex;