DevTools: responsive design rulers UI tweaks.

Source/devtools/front_end/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}
  * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
  */
@@ skipping 39 matching lines @@
     WebInspector.settings.responsiveDesign.enabled.addChangeListener(this._responsiveDesignEnabledChanged, this);
     WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(this._maybeEnableResponsiveDesign, this);
     WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(this._maybeEnableResponsiveDesign, this);
     WebInspector.overridesSupport.settings.overrideDeviceResolution.addChangeListener(this._maybeEnableResponsiveDesign, this);
     this._responsiveDesignEnabledChanged();
     this._overridesWarningUpdated();
 };
 
 // Measured in DIP.
 WebInspector.ResponsiveDesignView.SliderWidth = 19;
-WebInspector.ResponsiveDesignView.RulerWidth = 20;
+WebInspector.ResponsiveDesignView.RulerWidth = 22;
 
 WebInspector.ResponsiveDesignView.prototype = {
     _maybeEnableResponsiveDesign: function()
     {
         if (this._enabled)
             return;
         if (WebInspector.overridesSupport.settings.emulateViewport.get() ||
                 WebInspector.overridesSupport.settings.emulateTouchEvents.get() ||
                 WebInspector.overridesSupport.settings.overrideDeviceResolution.get()) {
             WebInspector.settings.responsiveDesign.enabled.set(true);
@@ skipping 136 matching lines @@
         canvas.style.height = cssCanvasHeight + "px";
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var dipCanvasWidth = cssCanvasWidth * zoomFactor;
         var dipCanvasHeight = cssCanvasHeight * zoomFactor;
 
         var deviceScaleFactor = window.devicePixelRatio;
         canvas.width = deviceScaleFactor * cssCanvasWidth;
         canvas.height = deviceScaleFactor * cssCanvasHeight;
         context.scale(canvas.width / dipCanvasWidth, canvas.height / dipCanvasHeight);
-
-        context.font = "11px " + WebInspector.fontFamily();
+        context.font = "10px " + WebInspector.fontFamily();
 
         const rulerStep = 100;
         const rulerSubStep = 5;
         const gridStep = 50;
         const gridSubStep = 10;
-        const rulerBackgroundColor = "rgb(64, 64, 64)";
+        const rulerBackgroundColor = "rgb(0, 0, 0)";
         const backgroundColor = "rgb(102, 102, 102)";
         const lightLineColor = "rgb(132, 132, 132)";
         const darkLineColor = "rgb(114, 114, 114)";
-        const textColor = "rgb(180, 180, 180)";
+        const rulerColor = "rgb(125, 125, 125)";
+        const textColor = "rgb(168, 168, 168)";
 
         var scale = this._scale || 1;
         var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth;
         var dipGridWidth = dipCanvasWidth / scale - rulerWidth;
         var dipGridHeight = dipCanvasHeight / scale - rulerWidth;
         rulerWidth /= scale;
         context.scale(scale, scale);
         context.translate(rulerWidth, rulerWidth);
 
         context.fillStyle = rulerBackgroundColor;
         context.fillRect(-rulerWidth, -rulerWidth, dipGridWidth + rulerWidth, rulerWidth);
         context.fillRect(-rulerWidth, 0, rulerWidth, dipGridHeight);
 
         context.fillStyle = backgroundColor;
         context.fillRect(0, 0, dipGridWidth, dipGridHeight);
 
         context.translate(0.5, 0.5);
-        context.strokeStyle = textColor;
+        context.strokeStyle = rulerColor;
         context.fillStyle = textColor;
         context.lineWidth = 1;
 
         // Draw vertical ruler.
         for (var x = 0; x < dipGridWidth; x += rulerSubStep) {
             var color = darkLineColor;
             var y = -rulerWidth / 4;
+            if (!(x % (rulerStep / 4)))
+                y = -rulerWidth / 2;
             if (!(x % (rulerStep / 2)))
-                y = -rulerWidth / 2;
+                y = -rulerWidth + 2;
 
             if (!(x % rulerStep)) {
-                if (x) {
-                    context.save();
-                    context.translate(x, 0);
-                    context.fillText(x, 2, -rulerWidth / 2);
-                    context.restore();
-                }
-                y = -rulerWidth * 2 / 3;
+                context.save();
+                context.translate(x, 0);
+                context.fillText(x, 2, -rulerWidth / 2);
+                context.restore();
+                y = -rulerWidth;
             }
 
             context.beginPath();
             context.moveTo(x, y);
             context.lineTo(x, 0);
             context.stroke();
         }
 
         // Draw horizontal ruler.
         for (var y = 0; y < dipGridHeight; y += rulerSubStep) {
             var color = darkLineColor;
             x = -rulerWidth / 4;
+            if (!(y % (rulerStep / 4)))
+                x = -rulerWidth / 2;
             if (!(y % (rulerStep / 2)))
-                x = -rulerWidth / 2;
+                x = -rulerWidth + 2;
 
             if (!(y % rulerStep)) {
-                if (y) {
-                    context.save();
-                    context.translate(0, y);
-                    context.rotate(-Math.PI / 2);
-                    context.fillText(y, 2, -rulerWidth / 2);
-                    context.restore();
-                }
-                x = -rulerWidth * 2 / 3;
+                context.save();
+                context.translate(0, y);
+                context.rotate(-Math.PI / 2);
+                context.fillText(y, 2, -rulerWidth / 2);
+                context.restore();
+                x = -rulerWidth;
             }
 
             context.beginPath();
             context.moveTo(x, y);
             context.lineTo(0, y);
             context.stroke();
         }
 
         // Draw grid.
         drawGrid(darkLineColor, gridSubStep);
@@ skipping 237 matching lines @@
         if (this._warningMessage.textContent === message)
             return;
         this._warningMessage.classList.toggle("hidden", !message);
         this._warningMessage.textContent = message;
         this._invalidateCache();
         this.onResize();
     },
 
     __proto__: WebInspector.VBox.prototype
 };