DevTools: MQs should start at zero in the grid

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 7ebc5e0ce86136bdf1c0423262a478285dbe2260..918bbbabc7285f2bd7cad6a91e16cd98d9041f95 100644
--- a/Source/devtools/front_end/responsiveDesignView.css
+++ b/Source/devtools/front_end/responsiveDesignView.css
@@ -121,6 +121,10 @@
     border-bottom: 1px solid rgb(71, 71, 71);
 }
 
+.responsive-design-toolbar-wrapper {
+    flex-grow: inherit;

[dgozman, 2014/09/08 11:44:26]

Why do you need this?

[pbakaus, 2014/09/08 12:02:34]

The "more" icon does not float at the right if I remove it.

+}
+
 .responsive-design-separator {
     flex: none;
     width: 3px;
@@ -457,10 +461,16 @@
 
 /* Media query bars */
 
+.media-inspector-view {
+    background-color: rgb(43, 43, 43);
+    box-shadow: inset 0px 5px 7px rgba(0, 0, 0, 0.7);
+}
+
 .media-inspector-marker-container {
     position: relative;
     height: 14px;
     margin: 2px 0;
+    z-index: 1;

[dgozman, 2014/09/08 11:44:26]

If you want to place media inspector above the canvas, just change their DOM
order (see ResponsiveDesignView constructor).

[pbakaus, 2014/09/08 12:02:34]

Cannot do in this case. The order goes like this:

1) MQ gradient background with inset shadow (from outer MQ DOM element)
2) Rulers drawn from canvas
3) MQs

Thus, the MQ outer element has no zindex and stays at the very bottom, then
comes the rulers on top, and the MQs themselves get a z-index, placing them
above all. There is no other solution I can think of that's simpler, other than
drawing the whole BG in the canvas.

 }
 
 .media-inspector-marker {
@@ -472,7 +482,7 @@
 }
 
 .media-inspector-marker-inactive {
-    -webkit-filter: brightness(85%);
+    -webkit-filter: brightness(65%);
 }
 
 .media-inspector-marker-highlight {
@@ -480,26 +490,27 @@
 }
 
 .media-inspector-marker-max-width {
-    background: linear-gradient(to bottom, rgb(72, 139, 249), rgb(26, 113, 233));
-    box-shadow: rgb(0, 0, 0) 1px 0 1px;
+    background: linear-gradient(to left, rgba(255, 255, 255, 0.27), rgba(0,0,0,0) 10%), linear-gradient(to bottom, rgb(72, 139, 249), rgb(26, 113, 233));
     border-radius: 0 2px 2px 0;
+    border-right: 2px solid rgb(171, 207, 255);
 }
 
 .media-inspector-marker-min-max-width {
-    background: linear-gradient(to bottom, rgb(102, 186, 11), rgb(4, 166, 0));
-    box-shadow: rgb(0, 0, 0) -1px 0 1px, rgb(0, 0, 0) 1px 0 1px;
+    background: linear-gradient(to bottom, rgb(119, 203, 28), rgb(4, 166, 0));
     border-radius: 2px;
+    border-left: 2px solid rgb(80, 226, 40);
+    border-right: 2px solid rgb(80, 226, 40);
 }
 
 .media-inspector-marker-min-width {
-    background: linear-gradient(to bottom, rgb(222, 129, 30), rgb(204, 104, 31));
-    box-shadow: rgb(0, 0, 0) -1px 0 1px;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.27), rgba(0,0,0,0) 10%), linear-gradient(to bottom, rgb(222, 129, 30), rgb(204, 104, 31));
     border-radius: 2px 0 0 2px;
+    border-left: 2px solid rgb(255, 181, 142);
 }
 
 .media-inspector-marker-under-highlighted {
     background: transparent !important;
-    box-shadow: none !important;
+    border: none !important;
 }
 
 /* Media query labels */
@@ -513,11 +524,11 @@
 }
 
 .media-inspector-marker-label-container-left {
-    left: 0;
+    left: -2px;
 }
 
 .media-inspector-marker-label-container-right {
-    right: 0;
+    right: -2px;
 }
 
 .media-inspector-marker-serif {
@@ -542,16 +553,16 @@
 .media-inspector-marker-label {
     color: rgb(230, 230, 230);
     position: absolute;
-    top: -1px;
+    top: 1px;
     bottom: 0;
-    font-size: 13px;
-    text-shadow: rgb(0, 0, 0) 1px 1px;
+    font-size: 10px;
+    text-shadow: rgba(0, 0, 0, 0.5) 1px 0;
 }
 
 .media-inspector-label-right {
-    right: 2px;
+    right: 4px;
 }
 
 .media-inspector-label-left {
-    left: 2px;
+    left: 4px;
 }