[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 cf00646e1d482de55dc30dbf7491bbe128fd75d8..6ecfc4c64b99b40dc64dde163d00f3a9063166f9 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;
@@ -123,6 +127,12 @@
     height: 0;
     background-color: #171717;
     box-shadow: hsl(0, 0%, 88%) 1px 1px 0 1px, hsla(0, 0%, 80%, 0.6) 0 0 16px;
+    z-index: 2;

[dgozman, 2016/02/01 17:18:27]

I'd prefer to avoid z-index. Can we instead rearrange things in the DOM?

[mmccoy, 2016/02/10 20:06:34]

Done!

+}
+
+.device-mode-screen-area {
+    width: 454px;
+    height: 921px;
 }
 
 .device-mode-screen-image {
@@ -133,6 +143,23 @@
     height: 100%;
 }
 
+.device-mode-outline-area {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    z-index: 1;
+}
+
+.device-mode-outline-image {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
 .device-mode-resizer {
     position: absolute;
     display: flex;