[DevTools] Combine media queries preview by sections.

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.element.addEventListener("webkitAnimationEnd", this._onAnimationEnd.bind(this), false);
     this._mediaThrottler = new WebInspector.Throttler(100);
 
     this._translateZero = 0;
     this._offset = 0;
     this._scale = 1;
     this._lastReportedCount = 0;
+    this._highlightedModel = null;
+    this._highlightDecorationVisible = false;
+    this._availableSections = [false, false, false];
 
     this._rulerDecorationLayer = document.createElementWithClass("div", "fill");
     this._rulerDecorationLayer.classList.add("media-inspector-ruler-decoration");
     this._rulerDecorationLayer.addEventListener("click", this._onRulerDecorationClicked.bind(this), false);
 
     WebInspector.targetManager.observeTargets(this);
 
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._renderMediaQueries.bind(this), this);
 }
 
 /**
  * @enum {number}
  */
 WebInspector.MediaQueryInspector.Section = {
     Max: 0,
     MinMax: 1,
     Min: 2
 }
 
 WebInspector.MediaQueryInspector.Events = {
     HeightUpdated: "HeightUpdated",
-    CountUpdated: "CountUpdated"
+    CountUpdated: "CountUpdated",
+    HighlightDecorationUpdated: "HighlightDecorationUpdated"
 }
 
+/** @typedef {!{value: number, section: number}} */
+WebInspector.MediaQueryInspector.Threshold;
+
 WebInspector.MediaQueryInspector.prototype = {
     /**
      * @param {!WebInspector.Target} target
      */
     targetAdded: function(target)
     {
         // FIXME: adapt this to multiple targets.
         if (this._target)
             return;
         this._target = target;
@@ skipping 18 matching lines @@
 
     /**
      * @return {!Element}
      */
     rulerDecorationLayer: function()
     {
         return this._rulerDecorationLayer;
     },
 
     /**
-     * @return {!Array.<number>}
+     * @return {!Array.<!WebInspector.MediaQueryInspector.Threshold>}
      */
     _mediaQueryThresholds: function()
     {
         if (!this._cachedQueryModels)
             return [];
         var thresholds = [];
         for (var i = 0; i < this._cachedQueryModels.length; ++i) {
             var model = this._cachedQueryModels[i];
             if (model.minWidthExpression())
-                thresholds.push(model.minWidthExpression().computedLength());
+                thresholds.push({value: model.minWidthExpression().computedLength(), section: model.section()});
             if (model.maxWidthExpression())
-                thresholds.push(model.maxWidthExpression().computedLength());
+                thresholds.push({value: model.maxWidthExpression().computedLength(), section: model.section()});
         }
-        thresholds.sortNumbers();
+        /**
+         * @param {!WebInspector.MediaQueryInspector.Threshold} threshold1
+         * @param {!WebInspector.MediaQueryInspector.Threshold} threshold2
+         * @return {number}
+         */
+        function comparator(threshold1, threshold2)
+        {
+            return threshold1.value - threshold2.value;
+        }
+
+        thresholds.sort(comparator);
         return thresholds;
     },
 
     /**
      * @param {!Event} event
      */
     _onRulerDecorationClicked: function(event)
     {
-        var thresholdElement = event.target.enclosingNodeOrSelfWithClass("media-inspector-threshold-serif");
+        var thresholdElement = event.target.enclosingNodeOrSelfWithClass("media-inspector-threshold");
         if (!thresholdElement)
             return;
         WebInspector.settings.showMediaQueryInspector.set(true);
-        var revealValue = thresholdElement._value;
-        for (var mediaQueryContainer = this.element.firstChild; mediaQueryContainer; mediaQueryContainer = mediaQueryContainer.nextSibling) {
-            var model = mediaQueryContainer._model;
-            if ((model.minWidthExpression() && Math.abs(model.minWidthExpression().computedLength() - revealValue) === 0)
-                || (model.maxWidthExpression() && Math.abs(model.maxWidthExpression().computedLength() - revealValue) === 0)) {
-                mediaQueryContainer.scrollIntoViewIfNeeded(false);
-                var hasRunningAnimation = mediaQueryContainer.classList.contains("media-inspector-marker-highlight-1") || mediaQueryContainer.classList.contains("media-inspector-marker-highlight-2");
-                mediaQueryContainer.classList.toggle("media-inspector-marker-highlight-1");
-                if (hasRunningAnimation)
-                    mediaQueryContainer.classList.toggle("media-inspector-marker-highlight-2");
-                return;
-            }
-        }
     },
 
     /**
-     * @param {!Event} event
-     */
-    _onAnimationEnd: function(event)
-    {
-        event.target.classList.remove("media-inspector-marker-highlight-1");
-        event.target.classList.remove("media-inspector-marker-highlight-2");
-    },
-
-    /**
      * @param {number} translate
      * @param {number} offset
      * @param {number} scale
      */
     setAxisTransform: function(translate, offset, scale)
     {
         if (this._translateZero === translate && this._offset === offset && Math.abs(this._scale - scale) < 1e-8)
             return;
         this._translateZero = translate;
         this._offset = offset;
         this._scale = scale;
         this._renderMediaQueries();
     },
 
     /**
      * @param {boolean} enabled
      */
     setEnabled: function(enabled)
     {
         this._enabled = enabled;
         this._scheduleMediaQueriesUpdate();
     },
 
     /**
      * @param {!Event} event
      */
     _onMediaQueryClicked: function(event)
     {
-        var mediaQueryMarkerContainer = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker-container");
-        if (!mediaQueryMarkerContainer)
+        var mediaQueryMarker = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker");
+        if (!mediaQueryMarker)
             return;
 
         /**
          * @param {number} width
          */
         function setWidth(width)
         {
             WebInspector.overridesSupport.settings.deviceWidth.set(width);
             WebInspector.overridesSupport.settings.emulateResolution.set(true);
         }
 
-        var model = mediaQueryMarkerContainer._model;
+        var model = mediaQueryMarker._model;
         if (model.section() === WebInspector.MediaQueryInspector.Section.Max) {
             setWidth(model.maxWidthExpression().computedLength());
             return;
         }
         if (model.section() === WebInspector.MediaQueryInspector.Section.Min) {
             setWidth(model.minWidthExpression().computedLength());
             return;
         }
         var currentWidth = WebInspector.overridesSupport.settings.deviceWidth.get();
         if (currentWidth !== model.minWidthExpression().computedLength())
             setWidth(model.minWidthExpression().computedLength());
         else
             setWidth(model.maxWidthExpression().computedLength());
     },
 
     /**
      * @param {!Event} event
      */
     _onContextMenu: function(event)
     {
-        var mediaQueryMarkerContainer = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker-container");
-        if (!mediaQueryMarkerContainer)
+        var mediaQueryMarker = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker");
+        if (!mediaQueryMarker)
             return;
 
-        var locations = mediaQueryMarkerContainer._locations;
+        var locations = mediaQueryMarker._locations;
         var contextMenu = new WebInspector.ContextMenu(event);
         var subMenuItem = contextMenu.appendSubMenuItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Reveal in source code" : "Reveal In Source Code"));
         for (var i = 0; i < locations.length; ++i) {
             var location = locations[i];
             var title = String.sprintf("%s:%d:%d", location.uiSourceCode.uri(), location.lineNumber + 1, location.columnNumber + 1);
             subMenuItem.appendItem(title, this._revealSourceLocation.bind(this, location));
         }
         contextMenu.show();
     },
 
@@ skipping 114 matching lines @@
         }
 
         if (markers.length !== this._lastReportedCount) {
             this._lastReportedCount = markers.length;
             this.dispatchEventToListeners(WebInspector.MediaQueryInspector.Events.CountUpdated, markers.length);
         }
 
         if (!this.isShowing())
             return;
 
-        var heightChanges = this.element.children.length !== markers.length;
-
+        var oldChildrenCount = this.element.children.length;
         var scrollTop = this.element.scrollTop;
         this.element.removeChildren();
+
+        for (var i = 0; i < this._availableSections.length; ++i)
+            this._availableSections[i] = false;
+
+        var container = null;
         for (var i = 0; i < markers.length; ++i) {
+            if (!i || markers[i].model.section() !== markers[i - 1].model.section()) {
+                container = this.element.createChild("div", "media-inspector-marker-container");
+                this._availableSections[markers[i].model.section()] = true;
+                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);
+            var bar = this._createElementFromMediaQueryModel(/** @type {!Element} */ (container), marker.model);
             bar._model = marker.model;
             bar._locations = marker.locations;
             bar.classList.toggle("media-inspector-marker-inactive", !marker.active);
-
-            this.element.appendChild(bar);
         }
         this.element.scrollTop = scrollTop;
         this.element.classList.toggle("media-inspector-view-empty", !this.element.children.length);
-        if (heightChanges)
+        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)) {

[lushnikov, 2014/09/03 14:30:41]

can't we use relatedTarget/target instead of this loop?

+                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) {

[lushnikov, 2014/09/03 14:30:41]

Can we simply update z-index of a marker (if any), and in this case setup
marker-under-highlighted class for all the children except it?

+            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");
+            }
+        }
+        var highlightedModel = marker ? marker._model : null;
+        if (highlightedModel !== this._highlightedModel) {
+            this._highlightedModel = highlightedModel;
+            this._renderRulerDecorations();
+        }
+    },
+
+    /**
      * @return {number}
      */
     _zoomFactor: function()
     {
         return WebInspector.zoomManager.zoomFactor() / this._scale;
     },
 
+    /**
+     * @return {boolean}
+     */
+    highlightDecorationVisible: function()
+    {
+        return this._highlightDecorationVisible;
+    },
+
     _renderRulerDecorations: function()
     {
+        var highlightDecorationVisible = this.isShowing() && !!this._highlightedModel;
+        if (highlightDecorationVisible !== this._highlightDecorationVisible) {
+            this._highlightDecorationVisible = highlightDecorationVisible;
+            this.dispatchEventToListeners(WebInspector.MediaQueryInspector.Events.HighlightDecorationUpdated);
+        }
+
         this._rulerDecorationLayer.removeChildren();
         var zoomFactor = this._zoomFactor();
 
-        var thresholds = this._mediaQueryThresholds();
-        for (var i = 0; i < thresholds.length; ++i) {
-            var thresholdElement = this._rulerDecorationLayer.createChild("div", "media-inspector-threshold-serif");
-            thresholdElement.title = thresholds[i] + "px";
-            thresholdElement._value = thresholds[i];
-            thresholdElement.style.left = (thresholds[i] - this._offset) / zoomFactor + "px";
+        if (this.isShowing()) {
+            if (!this._highlightedModel)

[lushnikov, 2014/09/03 14:30:41]

Can we extract this if-branch in a separate method so that it would be easier to
follow? e.g. _renderRulerProjections

[dgozman, 2014/09/04 15:34:32]

This method is removed now.

+                return;
+
+            const highlightStyleClassPerSection = [
+                "media-inspector-highlight-threshold-max",
+                "media-inspector-highlight-threshold-min-max",
+                "media-inspector-highlight-threshold-min"
+            ];
+            const classPerRowCount = [
+                "media-inspector-highlight-threshold-one-row",
+                "media-inspector-highlight-threshold-two-rows",
+                "media-inspector-highlight-threshold-three-rows"
+            ];
+            var section = this._highlightedModel.section();
+            var rowCount = 0;
+            for (var i = section; i < highlightStyleClassPerSection.length; ++i) {
+                if (this._availableSections[i])

[lushnikov, 2014/09/03 14:30:41]

availableSections is used only here; lets compute it here as well

[dgozman, 2014/09/04 15:34:32]

Done.

+                    rowCount++;
+            }
+
+            if (this._highlightedModel.minWidthExpression()) {
+                var valueInPixels = this._highlightedModel.minWidthExpression().computedLength();
+                var minThresholdElement = this._rulerDecorationLayer.createChild("div", "media-inspector-highlight-threshold");
+                minThresholdElement.classList.add(highlightStyleClassPerSection[section]);
+                minThresholdElement.classList.add(classPerRowCount[rowCount - 1]);
+                if (this._highlightedModel.maxWidthExpression()) {

[lushnikov, 2014/09/03 14:30:41]

curly braces are not needed

+                    minThresholdElement.classList.add("media-inspector-highlight-threshold-left");
+                } else {
+                    minThresholdElement.classList.add("media-inspector-highlight-threshold-right");
+                }
+                minThresholdElement.title = valueInPixels + "px";
+                minThresholdElement.style.left = (valueInPixels - this._offset) / zoomFactor + "px";
+                minThresholdElement.createChild("span", "media-inspector-highlight-threshold-label").textContent = valueInPixels + "px";
+            }
+
+            if (this._highlightedModel.maxWidthExpression()) {

[lushnikov, 2014/09/03 14:30:41]

this if-statment look almost identical to the previous one. can we dedup the
code?

+                var valueInPixels = this._highlightedModel.maxWidthExpression().computedLength();
+                var maxThresholdElement = this._rulerDecorationLayer.createChild("div", "media-inspector-highlight-threshold");
+                maxThresholdElement.classList.add(highlightStyleClassPerSection[section]);
+                maxThresholdElement.classList.add(classPerRowCount[rowCount - 1]);
+                if (this._highlightedModel.minWidthExpression()) {
+                    maxThresholdElement.classList.add("media-inspector-highlight-threshold-right");
+                } else {
+                    maxThresholdElement.classList.add("media-inspector-highlight-threshold-left");
+                }
+                maxThresholdElement.title = valueInPixels + "px";
+                maxThresholdElement.style.left = (valueInPixels - this._offset) / zoomFactor + "px";
+                maxThresholdElement.createChild("span", "media-inspector-highlight-threshold-label").textContent = valueInPixels + "px";
+            }
+        } else {
+            const thresholdStyleClassPerSection = [
+                "media-inspector-threshold-max",
+                "media-inspector-threshold-min-max",
+                "media-inspector-threshold-min"
+            ];
+            var thresholds = this._mediaQueryThresholds();
+            for (var i = 0; i < thresholds.length; ++i) {
+                var thresholdElement = this._rulerDecorationLayer.createChild("div", "media-inspector-threshold");
+                thresholdElement.classList.add(thresholdStyleClassPerSection[thresholds[i].section]);
+                thresholdElement.title = thresholds[i].value + "px";
+                thresholdElement._value = thresholds[i].value;
+                thresholdElement.style.left = (thresholds[i].value - this._offset) / zoomFactor + "px";
+            }
         }
     },
 
     wasShown: function()
     {
         this._renderMediaQueries();
     },
 
+    willHide: function()
+    {
+        window.setImmediate(this._renderRulerDecorations.bind(this));

[lushnikov, 2014/09/03 14:30:41]

why do you use setImmediate here?

[dgozman, 2014/09/04 15:34:32]

It was necessary to have isShowing return the right value. I'd better do this in
wasHidden notification, but we don't have such.
Anyway, this is removed.

+    },
+
     /**
+     * @param {!Element} container
      * @param {!WebInspector.MediaQueryInspector.MediaQueryUIModel} model
      * @return {!Element}
      */
-    _createElementFromMediaQueryModel: function(model)
+    _createElementFromMediaQueryModel: function(container, model)
     {
         var zoomFactor = this._zoomFactor();
         var minWidthValue = model.minWidthExpression() ? model.minWidthExpression().computedLength() : 0;
 
         const styleClassPerSection = [
-            "media-inspector-marker-container-max-width",
-            "media-inspector-marker-container-min-max-width",
-            "media-inspector-marker-container-min-width"
+            "media-inspector-marker-max-width",
+            "media-inspector-marker-min-max-width",
+            "media-inspector-marker-min-width"
         ];
-        var container = document.createElementWithClass("div", "media-inspector-marker-container hbox");
-        container.classList.add(styleClassPerSection[model.section()]);
-
         var markerElement = container.createChild("div", "media-inspector-marker");
         var leftPixelValue = minWidthValue ? (minWidthValue - this._offset) / zoomFactor + this._translateZero : 0;
         markerElement.style.left = leftPixelValue + "px";
+        markerElement.classList.add(styleClassPerSection[model.section()]);
         var widthPixelValue = null;
-        if (model.maxWidthExpression() && model.minWidthExpression())
+        if (model.maxWidthExpression() && model.minWidthExpression()) {

[lushnikov, 2014/09/03 14:30:41]

curlies are not needed

[dgozman, 2014/09/04 15:34:32]

Done.

             widthPixelValue = (model.maxWidthExpression().computedLength() - minWidthValue) / zoomFactor;
-        else if (model.maxWidthExpression())
+        } else if (model.maxWidthExpression()) {

[lushnikov, 2014/09/03 14:30:41]

ditto

             widthPixelValue = (model.maxWidthExpression().computedLength() - this._offset) / zoomFactor + this._translateZero;
-        else
+        } else {

[lushnikov, 2014/09/03 14:30:41]

ditto

             markerElement.style.right = "0";
+        }
         if (typeof widthPixelValue === "number")
             markerElement.style.width = widthPixelValue + "px";
 
-        var maxLabelFiller = container.createChild("div", "media-inspector-max-label-filler");
-        if (model.maxWidthExpression()) {
-            maxLabelFiller.style.maxWidth = Math.max(widthPixelValue + leftPixelValue, 0) + "px";
-            var label = container.createChild("span", "media-inspector-marker-label media-inspector-max-label");
-            label.textContent = model.maxWidthExpression().computedLength() + "px";
-        }
-
-        if (model.minWidthExpression()) {
-            var minLabelFiller = maxLabelFiller.createChild("div", "media-inspector-min-label-filler");
-            minLabelFiller.style.maxWidth = Math.max(leftPixelValue, 0) + "px";
-            var label = minLabelFiller.createChild("span", "media-inspector-marker-label media-inspector-min-label");
-            label.textContent = model.minWidthExpression().computedLength() + "px";
-        }
-
-        return container;
+        return markerElement;
     },
 
     __proto__: WebInspector.View.prototype
 };
 
 /**
  * @constructor
  * @param {!WebInspector.CSSMedia} cssMedia
  * @param {?WebInspector.CSSMediaQueryExpression} minWidthExpression
  * @param {?WebInspector.CSSMediaQueryExpression} maxWidthExpression
@@ skipping 81 matching lines @@
                 return this.mediaText().compareTo(other.mediaText());
             if (myLocation && !otherLocation)
                 return 1;
             if (!myLocation && otherLocation)
                 return -1;
             if (this.active() !== other.active())
                 return this.active() ? -1 : 1;
             return myLocation.uiSourceCode.uri().compareTo(otherLocation.uiSourceCode.uri()) || myLocation.lineNumber - otherLocation.lineNumber || myLocation.columnNumber - otherLocation.columnNumber;
         }
         if (this.section() === WebInspector.MediaQueryInspector.Section.Max)
-            return this.maxWidthExpression().computedLength() - other.maxWidthExpression().computedLength();
+            return other.maxWidthExpression().computedLength() - this.maxWidthExpression().computedLength();
         if (this.section() === WebInspector.MediaQueryInspector.Section.Min)
             return this.minWidthExpression().computedLength() - other.minWidthExpression().computedLength();
-        return this.minWidthExpression().computedLength() - other.minWidthExpression().computedLength() || this.maxWidthExpression().computedLength() - other.maxWidthExpression().computedLength();
+        return this.minWidthExpression().computedLength() - other.minWidthExpression().computedLength() || other.maxWidthExpression().computedLength() - this.maxWidthExpression().computedLength();
     },
 
     /**
      * @return {!WebInspector.MediaQueryInspector.Section}
      */
     section: function()
     {
         return this._section;
     },
 
@@ skipping 30 matching lines @@
     },
 
     /**
      * @return {boolean}
      */
     active: function()
     {
         return this._active;
     }
 }