DevTools: polish the MQ ruler, move zoom controls to the top.

Review URL: https://codereview.chromium.org/581133002

git-svn-id: svn://svn.chromium.org/blink/trunk@182327 bbb929c8-8fbe-4397-9dbb-9b2b20218538
diff --git a/third_party/WebKit/Source/devtools/front_end/responsiveDesignView.css b/third_party/WebKit/Source/devtools/front_end/responsiveDesignView.css
index 8bbc2cd..104e31a 100644
--- a/third_party/WebKit/Source/devtools/front_end/responsiveDesignView.css
+++ b/third_party/WebKit/Source/devtools/front_end/responsiveDesignView.css
@@ -72,7 +72,7 @@
 
 .responsive-design-page-scale-container {
     position: absolute !important;
-    bottom: 0;
+    top: 0;
     right: 0;
     padding: 10px;
     background-color: rgba(0, 0, 0, 0.3);
@@ -82,7 +82,7 @@
 .responsive-design-page-scale-label {
     display: block;
     height: 20px;
-    margin: 2px 0;
+    margin: 0 4px;
     padding-top: 3px;
     color: white;
     cursor: default !important;
@@ -476,8 +476,6 @@
     right: 0;
     top: 0;
     padding-bottom: 5px;
-    background-color: rgb(43, 43, 43);
-    box-shadow: inset 0px 5px 7px rgba(0, 0, 0, 0.7);
     overflow: hidden;
 }
 
@@ -487,17 +485,12 @@
     position: relative;
     height: 14px;
     margin: 2px 0;
-    z-index: 1;
-}
-
-.media-inspector-marker-container:hover {
-    z-index: 2;
 }
 
 .media-inspector-marker {
     position: absolute;
-    top: 0px;
-    bottom: 0px;
+    top: 1px;
+    bottom: 1px;
     white-space: nowrap;
     border-radius: 2px;
 }
@@ -506,7 +499,9 @@
     -webkit-filter: brightness(80%);
 }
 
-.media-inspector-marker-highlight {
+.media-inspector-marker:hover {
+    top: -1px;
+    bottom: -1px;
     -webkit-filter: brightness(115%) !important;
 }
 
@@ -523,20 +518,19 @@
     border-right: 2px solid rgb(80, 226, 40);
 }
 
+.media-inspector-marker-min-max-width:hover {
+    z-index: 1;
+}
+
 .media-inspector-marker-min-width {
     background: linear-gradient(to right, rgba(255, 255, 255, 0.27), rgba(0,0,0,0) 30px), 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;
-    border: none !important;
-}
-
 /* Media query labels */
 
-.media-inspector-marker:not(.media-inspector-marker-highlight) .media-inspector-marker-label-container {
+.media-inspector-marker:not(:hover) .media-inspector-marker-label-container {
     display: none;
 }
 
@@ -552,25 +546,6 @@
     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;
@@ -578,6 +553,7 @@
     bottom: 0;
     font-size: 10px;
     text-shadow: rgba(0, 0, 0, 0.6) 1px 1px;
+    pointer-events: none;
 }
 
 .media-inspector-label-right {
diff --git a/third_party/WebKit/Source/devtools/front_end/toolbox/MediaQueryInspector.js b/third_party/WebKit/Source/devtools/front_end/toolbox/MediaQueryInspector.js
index 4c8676f..73a3e66 100644
--- a/third_party/WebKit/Source/devtools/front_end/toolbox/MediaQueryInspector.js
+++ b/third_party/WebKit/Source/devtools/front_end/toolbox/MediaQueryInspector.js
@@ -13,7 +13,7 @@
     this.element.classList.add("media-inspector-view", "media-inspector-view-empty");
     this.element.addEventListener("click", this._onMediaQueryClicked.bind(this), false);
     this.element.addEventListener("contextmenu", this._onContextMenu.bind(this), false);
-    this._mediaThrottler = new WebInspector.Throttler(100);
+    this._mediaThrottler = new WebInspector.Throttler(0);
 
     this._offset = 0;
     this._scale = 1;
@@ -270,12 +270,8 @@
 
         var container = null;
         for (var i = 0; i < markers.length; ++i) {
-            if (!i || markers[i].model.section() !== markers[i - 1].model.section()) {
+            if (!i || markers[i].model.section() !== markers[i - 1].model.section())
                 container = this.element.createChild("div", "media-inspector-marker-container");
-                var handler = this._onMarkerContainerMouseMove.bind(this);
-                container.addEventListener("mousemove", handler, false);
-                container.addEventListener("mouseout", handler, false);
-            }
             var marker = markers[i];
             var bar = this._createElementFromMediaQueryModel(marker.model);
             bar._model = marker.model;
@@ -290,49 +286,6 @@
     },
 
     /**
-     * @param {!Event} event
-     */
-    _onMarkerContainerMouseMove: function(event)
-    {
-        var mediaQueryMarkerContainer = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker-container");
-        if (!mediaQueryMarkerContainer)
-            return;
-        var children = mediaQueryMarkerContainer.children;
-        if (!children.length)
-            return;
-        for (var i = children.length - 1; i >= 0; --i) {
-            if (children[i].containsEventPoint(event)) {
-                this._highlightMarkerInContainer(children[i], mediaQueryMarkerContainer);
-                return;
-            }
-        }
-        this._highlightMarkerInContainer(null, mediaQueryMarkerContainer);
-    },
-
-    /**
-     * @param {?Element} marker
-     * @param {!Element} container
-     */
-    _highlightMarkerInContainer: function(marker, container)
-    {
-        var children = container.children;
-        var found = !marker;
-        for (var i = children.length - 1; i >= 0; --i) {
-            if (found) {
-                children[i].classList.remove("media-inspector-marker-highlight");
-                children[i].classList.remove("media-inspector-marker-under-highlighted");
-            } else if (children[i] === marker) {
-                children[i].classList.add("media-inspector-marker-highlight");
-                children[i].classList.remove("media-inspector-marker-under-highlighted");
-                found = true;
-            } else {
-                children[i].classList.remove("media-inspector-marker-highlight");
-                children[i].classList.add("media-inspector-marker-under-highlighted");
-            }
-        }
-    },
-
-    /**
      * @return {number}
      */
     _zoomFactor: function()
@@ -373,20 +326,19 @@
         if (typeof widthPixelValue === "number")
             markerElement.style.width = widthPixelValue + "px";
 
-        if (model.maxWidthExpression()) {
-            var labelClass = model.section() === WebInspector.MediaQueryInspector.Section.MinMax ? "media-inspector-label-left" : "media-inspector-label-right";
-            var labelContainer = markerElement.createChild("div", "media-inspector-marker-label-container media-inspector-marker-label-container-right");
-            labelContainer.createChild("div", "media-inspector-marker-serif");
-            labelContainer.createChild("span", "media-inspector-marker-label " + labelClass).textContent = model.maxWidthExpression().computedLength() + "px";
-        }
-
         if (model.minWidthExpression()) {
             var labelClass = model.section() === WebInspector.MediaQueryInspector.Section.MinMax ? "media-inspector-label-right" : "media-inspector-label-left";
             var labelContainer = markerElement.createChild("div", "media-inspector-marker-label-container media-inspector-marker-label-container-left");
-            labelContainer.createChild("div", "media-inspector-marker-serif");
-            labelContainer.createChild("span", "media-inspector-marker-label " + labelClass).textContent = model.minWidthExpression().computedLength() + "px";
+            labelContainer.createChild("span", "media-inspector-marker-label " + labelClass).textContent = model.minWidthExpression().value() + model.minWidthExpression().unit();
         }
 
+        if (model.maxWidthExpression()) {
+            var labelClass = model.section() === WebInspector.MediaQueryInspector.Section.MinMax ? "media-inspector-label-left" : "media-inspector-label-right";
+            var labelContainer = markerElement.createChild("div", "media-inspector-marker-label-container media-inspector-marker-label-container-right");
+            labelContainer.createChild("span", "media-inspector-marker-label " + labelClass).textContent = model.maxWidthExpression().value() + model.maxWidthExpression().unit();
+        }
+        markerElement.title = model.mediaText();
+
         return markerElement;
     },
 
diff --git a/third_party/WebKit/Source/devtools/front_end/toolbox/ResponsiveDesignView.js b/third_party/WebKit/Source/devtools/front_end/toolbox/ResponsiveDesignView.js
index dde223c..e2f21f47 100644
--- a/third_party/WebKit/Source/devtools/front_end/toolbox/ResponsiveDesignView.js
+++ b/third_party/WebKit/Source/devtools/front_end/toolbox/ResponsiveDesignView.js
@@ -24,12 +24,12 @@
     this._canvasContainer.element.classList.add("responsive-design");
     this._canvasContainer.show(this._responsiveDesignContainer.element);
 
+    this._canvas = this._canvasContainer.element.createChild("canvas", "fill responsive-design-canvas");
+
     this._mediaInspectorContainer = this._canvasContainer.element.createChild("div", "responsive-design-media-container");
     this._mediaInspector = new WebInspector.MediaQueryInspector();
     this._updateMediaQueryInspector();
 
-    this._canvas = this._canvasContainer.element.createChild("canvas", "fill responsive-design-canvas");
-
     this._warningMessage = this._canvasContainer.element.createChild("div", "responsive-design-warning hidden");
     this._warningMessage.createChild("div", "warning-icon-small");
     this._warningMessage.createChild("span");
@@ -53,20 +53,20 @@
     this._pageContainer = this._slidersContainer.createChild("div", "vbox flex-auto");
 
     // Page scale controls.
-    this._pageScaleContainer = this._canvasContainer.element.createChild("div", "vbox responsive-design-page-scale-container");
-    this._pageScaleContainer.style.width = WebInspector.ResponsiveDesignView.PageScaleContainerWidth + "px";
-    this._pageScaleContainer.style.height = WebInspector.ResponsiveDesignView.PageScaleContainerHeight + "px";
-    this._increasePageScaleButton = new WebInspector.StatusBarButton(WebInspector.UIString(""), "responsive-design-page-scale-button responsive-design-page-scale-increase");
-    this._increasePageScaleButton.element.tabIndex = -1;
-    this._increasePageScaleButton.addEventListener("click", this._pageScaleButtonClicked.bind(this, true), this);
-    this._pageScaleContainer.appendChild(this._increasePageScaleButton.element);
-    this._pageScaleLabel = this._pageScaleContainer.createChild("label", "responsive-design-page-scale-label");
-    this._pageScaleLabel.title = WebInspector.UIString("For a simpler way to change the current page scale, hold down Shift and drag with your mouse.");
+    this._pageScaleContainer = this._canvasContainer.element.createChild("div", "hbox responsive-design-page-scale-container");
     this._decreasePageScaleButton = new WebInspector.StatusBarButton(WebInspector.UIString(""), "responsive-design-page-scale-button responsive-design-page-scale-decrease");
     this._decreasePageScaleButton.element.tabIndex = -1;
     this._decreasePageScaleButton.addEventListener("click", this._pageScaleButtonClicked.bind(this, false), this);
     this._pageScaleContainer.appendChild(this._decreasePageScaleButton.element);
 
+    this._pageScaleLabel = this._pageScaleContainer.createChild("label", "responsive-design-page-scale-label");
+    this._pageScaleLabel.title = WebInspector.UIString("For a simpler way to change the current page scale, hold down Shift and drag with your mouse.");
+
+    this._increasePageScaleButton = new WebInspector.StatusBarButton(WebInspector.UIString(""), "responsive-design-page-scale-button responsive-design-page-scale-increase");
+    this._increasePageScaleButton.element.tabIndex = -1;
+    this._increasePageScaleButton.addEventListener("click", this._pageScaleButtonClicked.bind(this, true), this);
+    this._pageScaleContainer.appendChild(this._increasePageScaleButton.element);
+
     this._inspectedPagePlaceholder = inspectedPagePlaceholder;
     inspectedPagePlaceholder.show(this.element);
 
@@ -89,9 +89,8 @@
 // Measured in DIP.
 WebInspector.ResponsiveDesignView.RulerWidth = 34;
 WebInspector.ResponsiveDesignView.RulerHeight = 22;
+WebInspector.ResponsiveDesignView.RulerTopHeight = 11;
 WebInspector.ResponsiveDesignView.RulerBottomHeight = 9;
-WebInspector.ResponsiveDesignView.PageScaleContainerWidth = 40;
-WebInspector.ResponsiveDesignView.PageScaleContainerHeight = 80;
 
 WebInspector.ResponsiveDesignView.prototype = {
 
@@ -184,11 +183,9 @@
         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;
+            var rulerTotalHeight = this._rulerTotalHeightDIP();
             this._availableSize = new Size(Math.max(rect.width * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth, 1),
-                                           Math.max(rect.height * zoomFactor - mediaInspectorHeight - WebInspector.ResponsiveDesignView.RulerHeight, 1));
+                                           Math.max(rect.height * zoomFactor - rulerTotalHeight, 1));
         }
         return this._availableSize;
     },
@@ -258,9 +255,9 @@
      * Canvas contains grid and rulers.
      * @param {number} cssCanvasWidth
      * @param {number} cssCanvasHeight
-     * @param {number} mediaInspectorHeight
+     * @param {number} rulerHeight
      */
-    _drawCanvas: function(cssCanvasWidth, cssCanvasHeight, mediaInspectorHeight)
+    _drawCanvas: function(cssCanvasWidth, cssCanvasHeight, rulerHeight)
     {
         if (!this._enabled)
             return;
@@ -273,7 +270,6 @@
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var dipCanvasWidth = cssCanvasWidth * zoomFactor;
         var dipCanvasHeight = cssCanvasHeight * zoomFactor;
-        var dipMediaInspectorHeight = mediaInspectorHeight * zoomFactor;
 
         var deviceScaleFactor = window.devicePixelRatio;
         canvas.width = deviceScaleFactor * cssCanvasWidth;
@@ -285,7 +281,6 @@
         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.2)";
         const textColor = "rgb(186, 186, 186)";
         const contentsSizeColor = "rgba(0, 0, 0, 0.3)";
 
@@ -301,9 +296,7 @@
         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;
@@ -320,10 +313,6 @@
 
         // Draw horizontal ruler.
         context.save();
-        context.beginPath();
-        context.moveTo(0, -rulerHeight + WebInspector.ResponsiveDesignView.RulerHeight);
-        context.lineTo(dipGridWidth, -rulerHeight + WebInspector.ResponsiveDesignView.RulerHeight);
-        context.stroke();
 
         var minXIndex = Math.ceil(dipScrollX / rulerSubStep);
         var maxXIndex = Math.floor((dipScrollX + dipGridWidth) / rulerSubStep);
@@ -337,37 +326,26 @@
         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;
+            var height = 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;
-            }
+                height = WebInspector.ResponsiveDesignView.RulerHeight * 0.5;
+
+            if (!(index % (rulerStepCount / 2)))
+                height = rulerHeight;
+
             if (!(index % rulerStepCount)) {
                 context.save();
                 context.translate(x, 0);
                 context.fillText(Math.round(x / scale), 2, -rulerHeight + 10);
                 context.restore();
-                y = -rulerHeight;
+                height = rulerHeight;
             }
 
             context.beginPath();
-            context.moveTo(x, y);
+            context.moveTo(x, - height);
             context.lineTo(x, 0);
             context.stroke();
-            if (copyHeight) {
-                context.beginPath();
-                context.moveTo(x, -rulerHeight + WebInspector.ResponsiveDesignView.RulerHeight - copyHeight);
-                context.lineTo(x, -rulerHeight + WebInspector.ResponsiveDesignView.RulerHeight);
-                context.stroke();
-            }
-
-            if (!(index % (rulerStepCount / 2)))
-                context.strokeStyle = rulerColor;
         }
         context.restore();
 
@@ -451,6 +429,17 @@
         }
     },
 
+    /**
+     * @return {number}
+     */
+    _rulerTotalHeightDIP: function()
+    {
+        var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._mediaInspector.element.offsetHeight : 0;
+        if (!mediaInspectorHeight)
+            return WebInspector.ResponsiveDesignView.RulerHeight;
+        return WebInspector.ResponsiveDesignView.RulerTopHeight + WebInspector.ResponsiveDesignView.RulerBottomHeight + mediaInspectorHeight * WebInspector.zoomManager.zoomFactor();
+    },
+
     _updateUI: function()
     {
         if (!this._enabled || !this.isShowing())
@@ -462,17 +451,18 @@
         var cssCanvasWidth = rect.width;
         var cssCanvasHeight = rect.height;
         var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._mediaInspector.element.offsetHeight : 0;
-        var rulerTotalHeight = WebInspector.ResponsiveDesignView.RulerHeight + (mediaInspectorHeight ? WebInspector.ResponsiveDesignView.RulerBottomHeight : 0);
+        var rulerTotalHeight = this._rulerTotalHeightDIP();
 
         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";
+            var cssRulerHeight = (mediaInspectorHeight ? WebInspector.ResponsiveDesignView.RulerTopHeight : WebInspector.ResponsiveDesignView.RulerHeight) / zoomFactor + "px";
+            var cssCanvasOffset = rulerTotalHeight / zoomFactor + "px";
             this._slidersContainer.style.left = cssRulerWidth;
             this._slidersContainer.style.top = cssCanvasOffset;
-            this._warningMessage.style.height = cssRulerHeight;
+            this._warningMessage.style.height = cssCanvasOffset;
+            this._pageScaleContainer.style.top = cssCanvasOffset;
             this._mediaInspectorContainer.style.left = cssRulerWidth;
             this._mediaInspectorContainer.style.marginTop = cssRulerHeight;
         }
@@ -485,8 +475,7 @@
             this._inspectedPagePlaceholder.onResize();
         }
 
-        var pageScaleVisible = cssWidth + WebInspector.ResponsiveDesignView.PageScaleContainerWidth + WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor <= rect.width ||
-            cssHeight + WebInspector.ResponsiveDesignView.PageScaleContainerHeight + mediaInspectorHeight + rulerTotalHeight / zoomFactor  <= rect.height;
+        var pageScaleVisible = cssWidth + this._pageScaleContainerWidth + WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor <= rect.width;
         this._pageScaleContainer.classList.toggle("hidden", !pageScaleVisible);
 
         var viewportChanged = !this._cachedViewport
@@ -501,7 +490,7 @@
             this._cachedMediaInspectorHeight !== mediaInspectorHeight;
 
         if (canvasInvalidated)
-            this._drawCanvas(cssCanvasWidth, cssCanvasHeight, mediaInspectorHeight);
+            this._drawCanvas(cssCanvasWidth, cssCanvasHeight, rulerTotalHeight);
 
         if (viewportChanged) {
             this._pageScaleLabel.textContent = WebInspector.UIString("%.1f", this._viewport.pageScaleFactor);
@@ -527,6 +516,10 @@
         if (!this._enabled || this._ignoreResize)
             return;
         var oldSize = this._availableSize;
+
+        this._pageScaleContainer.classList.remove("hidden");
+        this._pageScaleContainerWidth = this._pageScaleContainer.offsetWidth;
+
         delete this._availableSize;
         var newSize = this._availableDipSize();
         if (!newSize.isEqual(oldSize))