DevTools: MQs should start at zero in the grid

Source/devtools/front_end/responsiveDesignView.css

 /*
  * Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .responsive-design {
     position: relative;
     background-color: rgb(0, 0, 0);
     overflow: hidden;
@@ skipping 103 matching lines @@
 
 .responsive-design-toolbar {
     display: flex;
     flex: none;
     background: linear-gradient(to bottom, rgb(83, 81, 81), rgb(59, 59, 59));
     color: rgb(255, 255, 255);
     overflow: hidden;
     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;
     background-color: rgb(46, 46, 46);
     border-right: 1px solid rgb(75, 75, 75);
 }
 
 .responsive-design-section {
     display: flex;
     flex: none;
@@ skipping 316 matching lines @@
 
 /* Media query inspector */
 
 .responsive-design-media-container {
     position: absolute;
     right: 0;
 }
 
 /* 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 {
     position: absolute;
     top: 0px;
     bottom: 0px;
     white-space: nowrap;
     border-radius: 2px;
 }
 
 .media-inspector-marker-inactive {
-    -webkit-filter: brightness(85%);
+    -webkit-filter: brightness(65%);
 }
 
 .media-inspector-marker-highlight {
     -webkit-filter: brightness(115%) !important;
 }
 
 .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 */
 
 .media-inspector-marker:not(.media-inspector-marker-highlight) .media-inspector-marker-label-container {
     display: none;
 }
 
 .media-inspector-marker-label-container {
     position: absolute;
 }
 
 .media-inspector-marker-label-container-left {
-    left: 0;
+    left: -2px;
 }
 
 .media-inspector-marker-label-container-right {
-    right: 0;
+    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;
-    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;
 }