[DevTools] Add rulers to Device 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 ed8533012840439c226ac731072cf0f2fca788eb..57bb35c2d8811dc7826586813c104f772fb7ecd4 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
@@ -161,29 +161,121 @@
 }
 
 .device-mode-blueprint {
-    display: flex;
-    border-left: 1px dashed #dcdcdc;
-    border-right: 1px dashed #dcdcdc;
-    border-bottom: 1px dashed #dcdcdc;
     flex-direction: column;
     justify-content: flex-end;
-    text-align: end;
-    color: #aaa;
-    pointer-events: initial;
     flex: none;
+    position: relative;
+    pointer-events: auto;
+}
+
+.device-mode-blueprint-border {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    color: #aaa;
+    border: 1px solid #dcdcdc;
+    margin-top: -1px;
 }
 
-.device-mode-blueprint:hover {
+.device-mode-blueprint-border:hover {
     border-color: #aaa;
 }
 
-.device-mode-blueprint > span {
+.device-mode-blueprint-border > span {
     transition: opacity 150ms;
     opacity: 0;
     padding: 3px;
 }
 
-.device-mode-blueprint:hover > span {
+.device-mode-blueprint-border:hover > span {
     opacity: 1;
-    display: initial;
+}
+
+.device-mode-blueprint-inside {
+    position: absolute;
+    left: 20px;
+    right: 20px;
+    top: 20px;
+    bottom: 20px;
+}
+
+.device-mode-ruler {
+    pointer-events: none;
+    position: relative;
+}
+
+.device-mode-ruler-top {
+    flex: 0 0 20px;
+}
+
+.device-mode-ruler-left {
+    position: absolute;
+    left: 0;
+    width: 20px;
+    top: 0;
+    bottom: 0;
+    transform: translateX(-20px);
+}
+
+.device-mode-ruler-marker {
+    position: absolute;
+}
+
+.device-mode-ruler-top .device-mode-ruler-marker {
+    width: 0;
+    height: 5px;
+    bottom: 0;
+    border-right: 1px solid hsl(0, 0%, 50%);
+    margin-right: -1px;
+}
+
+.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-medium {
+    height: 10px;
+}
+
+.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-large {
+    height: 15px;
+}
+
+.device-mode-ruler-left .device-mode-ruler-marker {
+    height: 0;
+    width: 5px;
+    right: 0;
+    border-bottom: 1px solid hsl(0, 0%, 50%);
+    margin-bottom: -1px;
+}
+
+.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-medium {
+    width: 10px;
+}
+
+.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-large {
+    width: 15px;
+}
+
+.device-mode-ruler-text {
+    font-size: 11px;
+    color: hsl(0, 0%, 50%);
+    position: relative;
+    pointer-events: auto;
+}
+
+.device-mode-ruler-text:hover {
+    color: hsl(0, 0%, 10%);
+}
+
+.device-mode-ruler-top .device-mode-ruler-text {
+    left: 2px;
+    top: -2px;
+}
+
+.device-mode-ruler-left .device-mode-ruler-text {
+    left: -4px;
+    top: -15px;
+    transform: rotate(270deg);
 }