[DevTools] Combine media queries preview by sections.

Source/devtools/front_end/toolbox/ResponsiveDesignView.js

Index: Source/devtools/front_end/toolbox/ResponsiveDesignView.js
diff --git a/Source/devtools/front_end/toolbox/ResponsiveDesignView.js b/Source/devtools/front_end/toolbox/ResponsiveDesignView.js
index 21e92facb6de44a574a294f92d050b6cddb57cb4..318991f6f7580ca606f196d0e8962302bcbb54bb 100644
--- a/Source/devtools/front_end/toolbox/ResponsiveDesignView.js
+++ b/Source/devtools/front_end/toolbox/ResponsiveDesignView.js
@@ -74,6 +74,7 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
     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);
 
@@ -81,6 +82,7 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
     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();
@@ -127,6 +129,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         delete this._cachedZoomFactor;
         delete this._cachedViewport;
         delete this._cachedDrawContentsSize;
+        delete this._cachedHideTopRulerText;
         delete this._availableSize;
     },
 
@@ -313,7 +316,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         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);
@@ -327,10 +330,12 @@ WebInspector.ResponsiveDesignView.prototype = {
                 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;
             }
 
@@ -341,7 +346,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         }
         context.restore();
 
-        // Draw horizontal ruler.
+        // Draw vertical ruler.
         context.save();
         var minYIndex = Math.ceil(dipScrollY / rulerSubStep);
         var maxYIndex = Math.floor((dipScrollY + dipGridHeight) / rulerSubStep);
@@ -431,6 +436,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         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);
 
@@ -467,7 +473,7 @@ WebInspector.ResponsiveDesignView.prototype = {
             || 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) {
@@ -486,6 +492,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         this._cachedZoomFactor = zoomFactor;
         this._cachedViewport = this._viewport;
         this._cachedDrawContentsSize = this._drawContentsSize;
+        this._cachedHideTopRulerText = this._hideTopRulerText;
     },
 
     onResize: function()