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));
+
         }
         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;
 
         var rulerSubStep = 5 * scale * rulerScale;
         var rulerStepCount = 20;
 
         var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth;
         var rulerHeight = WebInspector.ResponsiveDesignView.RulerHeight;
+
         if (dipMediaInspectorHeight)
             rulerHeight += WebInspector.ResponsiveDesignView.RulerBottomHeight + dipMediaInspectorHeight;
+
         var dipGridWidth = dipCanvasWidth - rulerWidth;
         var dipGridHeight = dipCanvasHeight - rulerHeight;
         var dipScrollX = this._viewport.scrollX * scale;
         var dipScrollY = this._viewport.scrollY * scale;
         context.translate(rulerWidth, rulerHeight);
 
         context.fillStyle = backgroundColor;
         context.fillRect(0, 0, dipGridWidth, dipGridHeight);
 
         context.translate(0.5, 0.5);
@@ skipping 13 matching lines @@
         if (minXIndex) {
             context.beginPath();
             context.moveTo(0, -rulerHeight);
             context.lineTo(0, 0);
             context.stroke();
         }
 
         context.translate(-dipScrollX, 0);
         for (var index = minXIndex; index <= maxXIndex; index++) {
             var x = index * rulerSubStep;
+
             var y = -WebInspector.ResponsiveDesignView.RulerHeight * 0.25;
             var copyHeight = WebInspector.ResponsiveDesignView.RulerHeight * 0.25;
 
             if (!(index % (rulerStepCount / 4)))
                 copyHeight = WebInspector.ResponsiveDesignView.RulerHeight * 0.5;
             if (!(index % (rulerStepCount / 2))) {
                 context.strokeStyle = rulerOverlayColor;
                 y = -rulerHeight + WebInspector.ResponsiveDesignView.RulerHeight * 0.25;
                 copyHeight = 0;
             }
@@ skipping 136 matching lines @@
         var cssWidth = (this._dipWidth ? this._dipWidth : availableDip.width) / zoomFactor;
         var cssHeight = (this._dipHeight ? this._dipHeight : availableDip.height) / zoomFactor;
         if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHeight) {
             this._slidersContainer.style.width = cssWidth + "px";
             this._slidersContainer.style.height = cssHeight + "px";
             this._inspectedPagePlaceholder.onResize();
         }
 
         var pageScaleVisible = cssWidth + WebInspector.ResponsiveDesignView.PageScaleContainerWidth + WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor <= rect.width ||
             cssHeight + WebInspector.ResponsiveDesignView.PageScaleContainerHeight + mediaInspectorHeight + rulerTotalHeight / zoomFactor  <= rect.height;
+
         this._pageScaleContainer.classList.toggle("hidden", !pageScaleVisible);
 
         var viewportChanged = !this._cachedViewport
             || this._cachedViewport.scrollX !== this._viewport.scrollX || this._cachedViewport.scrollY !== this._viewport.scrollY
             || this._cachedViewport.contentsWidth !== this._viewport.contentsWidth || this._cachedViewport.contentsHeight !== this._viewport.contentsHeight
             || this._cachedViewport.pageScaleFactor !== this._viewport.pageScaleFactor
             || this._cachedViewport.minimumPageScaleFactor !== this._viewport.minimumPageScaleFactor
             || this._cachedViewport.maximumPageScaleFactor !== this._viewport.maximumPageScaleFactor;
 
         var canvasInvalidated = viewportChanged || this._drawContentsSize !== this._cachedDrawContentsSize || this._cachedScale !== this._scale ||
@@ skipping 35 matching lines @@
         this._inspectedPagePlaceholder.onResize();
     },
 
     _onZoomChanged: function()
     {
         this._updateUI();
     },
 
     _createToolbar: function()
     {
-        this._toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
+        var toolbar = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
+
+        // create a hbox that contains the left-hand buttons and the panels
+        this._toolbarHorizontalContainer = toolbar.createChild("div", "hbox flex-auto");

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

Why change all this? I don't how this affects anything based on screenshot
attached.

+
+        // put left hand buttons into a single vertical row
         this._createButtonsSection();
+
+        // create a wrapper to place the rest in
+        this._toolbarWrapper = this._toolbarHorizontalContainer.createChild("div", "responsive-design-toolbar-wrapper");
+        this._toolbarPanelWrapper = this._toolbarWrapper.createChild("div", "hbox");
+
         this._createDeviceSection();
-        this._toolbarElement.createChild("div", "responsive-design-separator");
+        this._toolbarPanelWrapper.createChild("div", "responsive-design-separator");
         this._createNetworkSection();
-        this._toolbarElement.createChild("div", "responsive-design-separator");
+        this._toolbarPanelWrapper.createChild("div", "responsive-design-separator");
 
-        var moreButtonContainer = this._toolbarElement.createChild("div", "responsive-design-more-button-container");
+        // create more button
+        var moreButtonContainer = this._toolbarPanelWrapper.createChild("div", "responsive-design-more-button-container");
         var moreButton = moreButtonContainer.createChild("button", "responsive-design-more-button");
         moreButton.title = WebInspector.UIString("More overrides");
         moreButton.addEventListener("click", this._showEmulationInDrawer.bind(this), false);
         moreButton.textContent = "\u2026";
+
+        // Create media query inspector
+        this._mediaInspector = new WebInspector.MediaQueryInspector();

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

You create media inspector here for the second time (first is in the
constructor).

+        this._mediaInspectorContainer = this._toolbarWrapper.createChild("div", "responsive-design-media-container");
+        this._updateMediaQueryInspector();
     },
 
     _createButtonsSection: function()
     {
-        var buttonsSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-buttons");
+        var buttonsSection = this._toolbarHorizontalContainer.createChild("div", "responsive-design-section responsive-design-section-buttons");
 
         var resetButton = new WebInspector.StatusBarButton(WebInspector.UIString("Reset all overrides."), "clear-status-bar-item");
         buttonsSection.appendChild(resetButton.element);
         resetButton.addEventListener("click", WebInspector.overridesSupport.reset, WebInspector.overridesSupport);
 
         // Media Query Inspector.
         this._toggleMediaInspectorButton = new WebInspector.StatusBarButton(WebInspector.UIString("Media queries not found"), "responsive-design-toggle-media-inspector");
         this._toggleMediaInspectorButton.toggled = WebInspector.settings.showMediaQueryInspector.get();
         this._toggleMediaInspectorButton.setEnabled(false);
         this._toggleMediaInspectorButton.addEventListener("click", this._onToggleMediaInspectorButtonClick, this);
         WebInspector.settings.showMediaQueryInspector.addChangeListener(this._updateMediaQueryInspector, this);
         buttonsSection.appendChild(this._toggleMediaInspectorButton.element);
     },
 
     _createDeviceSection: function()
     {
-        var deviceSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-device");
+        var deviceSection = this._toolbarPanelWrapper.createChild("div", "responsive-design-section responsive-design-section-device");
 
         var separator = deviceSection.createChild("div", "responsive-design-section-decorator");
 
         // Device.
         var deviceElement = deviceSection.createChild("div", "responsive-design-suite responsive-design-suite-top").createChild("div");
 
         var fieldsetElement = deviceElement.createChild("fieldset");
         fieldsetElement.createChild("label").textContent = WebInspector.UIString("Device");
         var deviceSelectElement = WebInspector.OverridesUI.createDeviceSelect(document);
         fieldsetElement.appendChild(deviceSelectElement);
@@ skipping 36 matching lines @@
 
         // Fit to window.
         detailsElement.createChild("div", "responsive-design-suite-separator");
         var fitToWindowElement = detailsElement.createChild("div", "");
         fieldsetElement = fitToWindowElement.createChild("fieldset");
         fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Fit"), WebInspector.overridesSupport.settings.deviceFitWindow, true, undefined, WebInspector.UIString("Zoom to fit available space")));
     },
 
     _createNetworkSection: function()
     {
-        var networkSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-network");
+        var networkSection = this._toolbarPanelWrapper.createChild("div", "responsive-design-section responsive-design-section-network");
 
         var separator = networkSection.createChild("div", "responsive-design-section-decorator");
 
         // Bandwidth.
         var bandwidthElement = networkSection.createChild("div", "responsive-design-suite responsive-design-suite-top").createChild("div");
         var fieldsetElement = bandwidthElement.createChild("fieldset");
         var networkCheckbox = fieldsetElement.createChild("label");
         networkCheckbox.textContent = WebInspector.UIString("Network");
         fieldsetElement.appendChild(WebInspector.OverridesUI.createNetworkConditionsSelect(document));
 
@@ skipping 92 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
 };