DevTools: MQs should start at zero in the grid

Source/devtools/front_end/toolbox/ResponsiveDesignView.js

 // 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.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.OverridesSupport.PageResizer}
  * @implements {WebInspector.TargetManager.Observer}
  * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
@@ skipping 266 matching lines @@
         var deviceScaleFactor = window.devicePixelRatio;
         canvas.width = deviceScaleFactor * cssCanvasWidth;
         canvas.height = deviceScaleFactor * cssCanvasHeight;
         context.scale(canvas.width / dipCanvasWidth, canvas.height / dipCanvasHeight);
         context.font = "11px " + WebInspector.fontFamily();
 
         const backgroundColor = "rgb(102, 102, 102)";
         const lightLineColor = "rgb(132, 132, 132)";
         const darkLineColor = "rgb(114, 114, 114)";
         const rulerColor = "rgb(125, 125, 125)";
-        const rulerOverlayColor = "rgba(255, 255, 255, 0.4)";
+        const rulerOverlayColor = "rgba(255, 255, 255, 0.2)";
         const textColor = "rgb(186, 186, 186)";
         const contentsSizeColor = "rgba(0, 0, 0, 0.3)";
 
         var scale = (this._scale || 1) * this._viewport.pageScaleFactor;
         var rulerScale = 0.5;
         while (Math.abs(rulerScale * scale - 1) > Math.abs((rulerScale + 0.5) * scale - 1))
             rulerScale += 0.5;
 
         var gridStep = 50 * scale * rulerScale;
         var gridSubStep = 10 * scale * rulerScale;
@@ skipping 168 matching lines @@
         this._mediaInspector.setAxisTransform(this._viewport.scrollX, this._scale * this._viewport.pageScaleFactor);
 
         if (this._cachedZoomFactor !== zoomFactor || this._cachedMediaInspectorHeight !== mediaInspectorHeight) {
             var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor + "px";
             var cssRulerHeight = WebInspector.ResponsiveDesignView.RulerHeight / zoomFactor + "px";
             var cssCanvasOffset = rulerTotalHeight / zoomFactor + mediaInspectorHeight + "px";
             this._slidersContainer.style.left = cssRulerWidth;
             this._slidersContainer.style.top = cssCanvasOffset;
             this._warningMessage.style.height = cssRulerHeight;
             this._mediaInspectorContainer.style.left = cssRulerWidth;
-            this._mediaInspectorContainer.style.top = cssRulerHeight;
+            this._mediaInspectorContainer.style.paddingTop = cssRulerHeight;

[dgozman, 2014/09/10 12:41:46]

Sorry for misleading, but this should be marginTop, so that ruler can keep black
background.

 
             var cssSliderWidth = WebInspector.ResponsiveDesignView.SliderWidth / zoomFactor + "px";
             this._heightSliderContainer.style.flexBasis = cssSliderWidth;
             this._heightSliderContainer.style.marginBottom = "-" + cssSliderWidth;
             this._widthSliderContainer.style.flexBasis = cssSliderWidth;
             this._widthSliderContainer.style.marginRight = "-" + cssSliderWidth;
         }
 
         var cssWidth = (this._dipWidth ? this._dipWidth : availableDip.width) / zoomFactor;
         var cssHeight = (this._dipHeight ? this._dipHeight : availableDip.height) / zoomFactor;
@@ skipping 256 matching lines @@
                 value = Math.min(this._viewport.maximumPageScaleFactor, value);
                 value = Math.max(this._viewport.minimumPageScaleFactor, value)
                 this._target.pageAgent().setPageScaleFactor(value);
             }
             finishCallback();
         }
     },
 
     __proto__: WebInspector.VBox.prototype
 };