[DevTools] Combine media queries preview by sections.

Source/devtools/front_end/toolbox/ResponsiveDesignView.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.VBox}
  * @implements {WebInspector.OverridesSupport.PageResizer}
  * @implements {WebInspector.TargetManager.Observer}
  * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
@@ skipping 56 matching lines @@
     this._decreasePageScaleButton.element.tabIndex = -1;
     this._decreasePageScaleButton.addEventListener("click", this._pageScaleButtonClicked.bind(this, false), this);
     this._pageScaleContainer.appendChild(this._decreasePageScaleButton.element);
 
     this._inspectedPagePlaceholder = inspectedPagePlaceholder;
     inspectedPagePlaceholder.show(this.element);
 
     this._enabled = false;
     this._viewport = { scrollX: 0, scrollY: 0, contentsWidth: 0, contentsHeight: 0, pageScaleFactor: 1, minimumPageScaleFactor: 1, maximumPageScaleFactor: 1 };
     this._drawContentsSize = true;
+    this._hideTopRulerText = false;
     this._viewportChangedThrottler = new WebInspector.Throttler(0);
     this._pageScaleFactorThrottler = new WebInspector.Throttler(50);
 
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
     WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.EmulationStateChanged, this._emulationEnabledChanged, this);
     this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Events.CountUpdated, this._updateMediaQueryInspectorButton, this);
     this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Events.HeightUpdated, this.onResize, this);
+    this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Events.HighlightDecorationUpdated, this._updateUI, this);
     WebInspector.targetManager.observeTargets(this);
 
     this._emulationEnabledChanged();
     this._overridesWarningUpdated();
 };
 
 // Measured in DIP.
 WebInspector.ResponsiveDesignView.SliderWidth = 19;
 WebInspector.ResponsiveDesignView.RulerWidth = 22;
 WebInspector.ResponsiveDesignView.PageScaleContainerWidth = 40;
@@ skipping 26 matching lines @@
     _invalidateCache: function()
     {
         delete this._cachedScale;
         delete this._cachedCssCanvasWidth;
         delete this._cachedCssCanvasHeight;
         delete this._cachedCssHeight;
         delete this._cachedCssWidth;
         delete this._cachedZoomFactor;
         delete this._cachedViewport;
         delete this._cachedDrawContentsSize;
+        delete this._cachedHideTopRulerText;
         delete this._availableSize;
     },
 
     _emulationEnabledChanged: function()
     {
         var enabled = WebInspector.overridesSupport.emulationEnabled();
         this._mediaInspector.setEnabled(enabled);
         if (enabled && !this._enabled) {
             this._invalidateCache();
             this._ignoreResize = true;
@@ skipping 166 matching lines @@
         context.fillRect(-rulerWidth, 0, rulerWidth, dipGridHeight);
 
         context.fillStyle = backgroundColor;
         context.fillRect(0, 0, dipGridWidth, dipGridHeight);
 
         context.translate(0.5, 0.5);
         context.strokeStyle = rulerColor;
         context.fillStyle = textColor;
         context.lineWidth = 1;
 
-        // Draw vertical ruler.
+        // Draw horizontal ruler.
         context.save();
         var minXIndex = Math.ceil(dipScrollX / rulerSubStep);
         var maxXIndex = Math.floor((dipScrollX + dipGridWidth) / rulerSubStep);
         context.translate(-dipScrollX, 0);
         for (var index = minXIndex; index <= maxXIndex; index++) {
             var x = index * rulerSubStep;
             var y = -rulerWidth / 4;
             if (!(index % (rulerStepCount / 4)))
                 y = -rulerWidth / 2;
             if (!(index % (rulerStepCount / 2)))
                 y = -rulerWidth + 2;
 
             if (!(index % rulerStepCount)) {
-                context.save();
-                context.translate(x, 0);
-                context.fillText(Math.round(x / scale), 2, -rulerWidth / 2);
-                context.restore();
+                if (!this._hideTopRulerText) {
+                    context.save();
+                    context.translate(x, 0);
+                    context.fillText(Math.round(x / scale), 2, -rulerWidth / 2);
+                    context.restore();
+                }
                 y = -rulerWidth;
             }
 
             context.beginPath();
             context.moveTo(x, y);
             context.lineTo(x, 0);
             context.stroke();
         }
         context.restore();
 
-        // Draw horizontal ruler.
+        // Draw vertical ruler.
         context.save();
         var minYIndex = Math.ceil(dipScrollY / rulerSubStep);
         var maxYIndex = Math.floor((dipScrollY + dipGridHeight) / rulerSubStep);
         context.translate(0, -dipScrollY);
         for (var index = minYIndex; index <= maxYIndex; index++) {
             var y = index * rulerSubStep;
             var x = -rulerWidth / 4;
             if (!(index % (rulerStepCount / 4)))
                 x = -rulerWidth / 2;
             if (!(index % (rulerStepCount / 2)))
@@ skipping 69 matching lines @@
     _updateUI: function()
     {
         if (!this._enabled || !this.isShowing())
             return;
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var rect = this._canvas.parentElement.getBoundingClientRect();
         var availableDip = this._availableDipSize();
         var cssCanvasWidth = rect.width;
         var cssCanvasHeight = rect.height;
+        this._hideTopRulerText = this._mediaInspector.highlightDecorationVisible();
 
         this._mediaInspector.setAxisTransform(WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor, this._viewport.scrollX, this._scale * this._viewport.pageScaleFactor);
 
         if (this._cachedZoomFactor !== zoomFactor) {
             var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor + "px";
             this._rulerGlasspane.style.height = cssRulerWidth;
             this._rulerGlasspane.style.left = cssRulerWidth;
             this._slidersContainer.style.left = cssRulerWidth;
             this._slidersContainer.style.top = cssRulerWidth;
             this._warningMessage.style.height = cssRulerWidth;
@@ skipping 16 matching lines @@
         var pageScaleVisible = cssWidth + WebInspector.ResponsiveDesignView.PageScaleContainerWidth + WebInspector.ResponsiveDesignView.RulerWidth <= rect.width ||
             cssHeight + WebInspector.ResponsiveDesignView.PageScaleContainerHeight + WebInspector.ResponsiveDesignView.RulerWidth <= rect.height;
         this._pageScaleContainer.classList.toggle("hidden", !pageScaleVisible);
 
         var viewportChanged = !this._cachedViewport
             || this._cachedViewport.scrollX !== this._viewport.scrollX || this._cachedViewport.scrollY !== this._viewport.scrollY
             || this._cachedViewport.contentsWidth !== this._viewport.contentsWidth || this._cachedViewport.contentsHeight !== this._viewport.contentsHeight
             || this._cachedViewport.pageScaleFactor !== this._viewport.pageScaleFactor
             || this._cachedViewport.minimumPageScaleFactor !== this._viewport.minimumPageScaleFactor
             || this._cachedViewport.maximumPageScaleFactor !== this._viewport.maximumPageScaleFactor;
-        if (viewportChanged || this._drawContentsSize !== this._cachedDrawContentsSize || this._cachedScale !== this._scale || this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanvasHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor)
+        if (viewportChanged || this._drawContentsSize !== this._cachedDrawContentsSize || this._cachedScale !== this._scale || this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanvasHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor || this._cachedHideTopRulerText !== this._hideTopRulerText)
             this._drawCanvas(cssCanvasWidth, cssCanvasHeight);
 
         if (viewportChanged) {
             this._pageScaleLabel.textContent = WebInspector.UIString("%.1f", this._viewport.pageScaleFactor);
             this._decreasePageScaleButton.title = WebInspector.UIString("Scale down (minimum %.1f)", this._viewport.minimumPageScaleFactor);
             this._decreasePageScaleButton.setEnabled(this._viewport.pageScaleFactor > this._viewport.minimumPageScaleFactor);
             this._increasePageScaleButton.title = WebInspector.UIString("Scale up (maximum %.1f)", this._viewport.maximumPageScaleFactor);
             this._increasePageScaleButton.setEnabled(this._viewport.pageScaleFactor < this._viewport.maximumPageScaleFactor);
         }
 
         this._cachedScale = this._scale;
         this._cachedCssCanvasWidth = cssCanvasWidth;
         this._cachedCssCanvasHeight = cssCanvasHeight;
         this._cachedCssHeight = cssHeight;
         this._cachedCssWidth = cssWidth;
         this._cachedZoomFactor = zoomFactor;
         this._cachedViewport = this._viewport;
         this._cachedDrawContentsSize = this._drawContentsSize;
+        this._cachedHideTopRulerText = this._hideTopRulerText;
     },
 
     onResize: function()
     {
         if (!this._enabled || this._ignoreResize)
             return;
         var oldSize = this._availableSize;
         delete this._availableSize;
         var newSize = this._availableDipSize();
         if (!newSize.isEqual(oldSize))
@@ skipping 205 matching lines @@
                 value = Math.min(this._viewport.maximumPageScaleFactor, value);
                 value = Math.max(this._viewport.minimumPageScaleFactor, value)
                 this._target.pageAgent().setPageScaleFactor(value);
             }
             finishCallback();
         }
     },
 
     __proto__: WebInspector.VBox.prototype
 };