DevTools: polish the MQ ruler, move zoom controls to the top.

Source/devtools/front_end/responsiveDesignView.css

Index: Source/devtools/front_end/responsiveDesignView.css
diff --git a/Source/devtools/front_end/responsiveDesignView.css b/Source/devtools/front_end/responsiveDesignView.css
index 51667de6f48cefefc42fe5c4c122cfe860697c26..d574e9e1a7e9a58b6fc9e9ea515fa63f6ec787fa 100644
--- a/Source/devtools/front_end/responsiveDesignView.css
+++ b/Source/devtools/front_end/responsiveDesignView.css
@@ -57,7 +57,7 @@
 
 .responsive-design-page-scale-container {
     position: absolute !important;
-    bottom: 0;
+    top: 0;
     right: 0;
     padding: 10px;
     background-color: rgba(0, 0, 0, 0.3);
@@ -67,7 +67,7 @@
 .responsive-design-page-scale-label {
     display: block;
     height: 20px;
-    margin: 2px 0;
+    margin: 0 4px;
     padding-top: 3px;
     color: white;
     cursor: default !important;
@@ -427,6 +427,7 @@
     display: flex;
     align-items: center;
     border-bottom: 1px solid rgb(171, 171, 171);
+    z-index: 2;

[dgozman, 2014/09/19 08:41:25]

I think, we can remove all the z-index properties now and just put
.responsive-design-media-container after canvas in DOM hierarchy.

[pfeldman, 2014/09/19 09:21:47]

Done.

 }
 
 .responsive-design-warning > span {
@@ -461,8 +462,6 @@
     right: 0;
     top: 0;
     padding-bottom: 5px;
-    background-color: rgb(43, 43, 43);
-    box-shadow: inset 0px 5px 7px rgba(0, 0, 0, 0.7);
     overflow: hidden;
 }
 
@@ -475,10 +474,6 @@
     z-index: 1;
 }
 
-.media-inspector-marker-container:hover {
-    z-index: 2;
-}
-
 .media-inspector-marker {
     position: absolute;
     top: 0px;
@@ -514,11 +509,6 @@
     border-left: 2px solid rgb(255, 181, 142);
 }
 
-.media-inspector-marker-under-highlighted {
-    background: transparent !important;
-    border: none !important;
-}
-
 /* Media query labels */
 
 .media-inspector-marker:not(.media-inspector-marker-highlight) .media-inspector-marker-label-container {
@@ -537,25 +527,6 @@
     right: -2px;
 }
 
-.media-inspector-marker-serif {
-    position: absolute;
-    top: -60px;
-    bottom: -60px;
-    width: 1px;
-}
-
-.media-inspector-marker-max-width .media-inspector-marker-serif {
-    background-color: rgb(26, 113, 233);
-}
-
-.media-inspector-marker-min-max-width .media-inspector-marker-serif {
-    background-color: rgb(4, 166, 0);
-}
-
-.media-inspector-marker-min-width .media-inspector-marker-serif {
-    background-color: rgb(204, 104, 31);
-}
-
 .media-inspector-marker-label {
     color: rgb(230, 230, 230);
     position: absolute;