DevTools: MQs should start at zero in the grid

Source/devtools/front_end/toolbox/ResponsiveDesignView.js

Index: Source/devtools/front_end/toolbox/ResponsiveDesignView.js
diff --git a/Source/devtools/front_end/toolbox/ResponsiveDesignView.js b/Source/devtools/front_end/toolbox/ResponsiveDesignView.js
index 96c4a50ee8f06744c159e5680dd0d6f0dbe1cd99..e5bc2f05dcaad41eb6b76932bacd0bc690877d04 100644
--- a/Source/devtools/front_end/toolbox/ResponsiveDesignView.js
+++ b/Source/devtools/front_end/toolbox/ResponsiveDesignView.js
@@ -188,6 +188,7 @@ WebInspector.ResponsiveDesignView.prototype = {
                 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;
     },
@@ -284,7 +285,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         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)";
 
@@ -301,8 +302,10 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         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;
@@ -336,6 +339,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         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;
 
@@ -492,6 +496,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         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
@@ -547,23 +552,39 @@ WebInspector.ResponsiveDesignView.prototype = {
 
     _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);
@@ -580,7 +601,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
     _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");
 
@@ -637,7 +658,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
     _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");