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()
@@ skipping 295 matching lines @@
                 return;
             }
         }
         this._highlightMarkerInContainer(null, mediaQueryMarkerContainer);
     },
 
     /**
      * @param {?Element} marker
      * @param {!Element} container
      */
     _highlightMarkerInContainer: function(marker, container)

[dgozman, 2014/09/19 08:41:25]

This method can be greatly simplified:
container.children.forEach(function(el) {
    el.classList.toggle("media-inspector-marker-highlight", el === marker);
});

[pfeldman, 2014/09/19 09:21:47]

Why don't we use hover and remove it altogether?

[dgozman, 2014/09/19 09:25:21]

I guess that works if you don't move the highlighted on up anymore.

     {
         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;
@@ skipping 25 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().computedLength() + "px";
+            markerElement.title = model.minWidthExpression().computedLength() + "px";
+            if (model.maxWidthExpression())
+                markerElement.title += WebInspector.UIString(" \u2014 ");
+        }
+
         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";
+            markerElement.title += model.maxWidthExpression().computedLength() + "px";
         }
 
         return markerElement;
     },
 
     __proto__: WebInspector.View.prototype
 };
 
 /**
  * @constructor
@@ skipping 138 matching lines @@
     },
 
     /**
      * @return {boolean}
      */
     active: function()
     {
         return this._active;
     }
 }