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 170 matching lines @@
     _availableDipSize: function()
     {
         if (typeof this._availableSize === "undefined") {
             var zoomFactor = WebInspector.zoomManager.zoomFactor();
             var rect = this._canvasContainer.element.getBoundingClientRect();
             var mediaInspectorHeight = this._mediaInspector.element.offsetHeight;
             if (mediaInspectorHeight)
                 mediaInspectorHeight += WebInspector.ResponsiveDesignView.RulerBottomHeight;
             this._availableSize = new Size(Math.max(rect.width * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth, 1),
                                            Math.max(rect.height * zoomFactor - mediaInspectorHeight - WebInspector.ResponsiveDesignView.RulerHeight, 1));
+

[dgozman, 2014/09/09 14:46:49]

nit: remove this extra line.

[pbakaus, 2014/09/10 11:18:15]

Done.

         }
         return this._availableSize;
     },
 
     /**
      * @param {!Element} element
      * @param {boolean} vertical
      * @return {!WebInspector.ResizerWidget}
      */
     _createResizer: function(element, vertical)
@@ skipping 76 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;

[dgozman, 2014/09/09 14:46:49]

I know this is not your change, but... If you set paddingTop here instead of top
and add "top: 0; overflow: hidden;" to this element in css, serifs will not
overlap the grid when hovering. Right now it looks bad.

[pbakaus, 2014/09/10 11:18:15]

Good point, will address.

 
             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
 };