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

Source/devtools/front_end/toolbox/MediaQueryInspector.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.View}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.MediaQueryInspector = function()
 {
     WebInspector.View.call(this);
     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;
     this._lastReportedCount = 0;
 
     WebInspector.targetManager.observeTargets(this);
 
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._renderMediaQueries.bind(this), this);
 }
 
@@ skipping 236 matching lines @@
 
         if (!this.isShowing())
             return;
 
         var oldChildrenCount = this.element.children.length;
         var scrollTop = this.element.scrollTop;
         this.element.removeChildren();
 
         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;
             bar._locations = marker.locations;
             bar.classList.toggle("media-inspector-marker-inactive", !marker.active);
             container.appendChild(bar);
         }
         this.element.scrollTop = scrollTop;
         this.element.classList.toggle("media-inspector-view-empty", !this.element.children.length);
         if (this.element.children.length !== oldChildrenCount)
             this.dispatchEventToListeners(WebInspector.MediaQueryInspector.Events.HeightUpdated);
     },
 
     /**
-     * @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()
     {
         return WebInspector.zoomManager.zoomFactor() / this._scale;
     },
 
     wasShown: function()
     {
         this._renderMediaQueries();
@@ skipping 20 matching lines @@
         var widthPixelValue = null;
         if (model.maxWidthExpression() && model.minWidthExpression())
             widthPixelValue = (model.maxWidthExpression().computedLength() - minWidthValue) / zoomFactor;
         else if (model.maxWidthExpression())
             widthPixelValue = (model.maxWidthExpression().computedLength() - this._offset) / zoomFactor;
         else
             markerElement.style.right = "0";
         if (typeof widthPixelValue === "number")
             markerElement.style.width = widthPixelValue + "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("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("div", "media-inspector-marker-serif");
-            labelContainer.createChild("span", "media-inspector-marker-label " + labelClass).textContent = model.maxWidthExpression().computedLength() + "px";
+            labelContainer.createChild("span", "media-inspector-marker-label " + labelClass).textContent = model.maxWidthExpression().value() + model.maxWidthExpression().unit();
         }
-
-        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";
-        }
+        markerElement.title = model.mediaText();
 
         return markerElement;
     },
 
     __proto__: WebInspector.View.prototype
 };
 
 /**
  * @constructor
  * @param {!WebInspector.CSSMedia} cssMedia
@@ skipping 137 matching lines @@
     },
 
     /**
      * @return {boolean}
      */
     active: function()
     {
         return this._active;
     }
 }