[DevTools] Switch from DIP to CSS pixels in device mode.

Source/devtools/front_end/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}
  */
 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._rulerDecorationLayer = document.createElementWithClass("div", "fill");
     this._rulerDecorationLayer.classList.add("media-inspector-ruler-decoration");
     this._rulerDecorationLayer.addEventListener("click", this._onRulerDecorationClicked.bind(this), false);
 
     WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._scheduleMediaQueriesUpdate, this);
     WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._scheduleMediaQueriesUpdate, this);
     WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._scheduleMediaQueriesUpdate, this);
     WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._scheduleMediaQueriesUpdate, this);
@@ skipping 70 matching lines @@
      * @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, scale)
+    setAxisTransform: function(translate, offset, scale)
     {
-        if (this._translateZero === translate && Math.abs(this._scale - scale) < 1e-8)
+        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;
@@ skipping 195 matching lines @@
 
     _renderRulerDecorations: function()
     {
         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._value = thresholds[i];
-            thresholdElement.style.left = thresholds[i] / zoomFactor + "px";
+            thresholdElement.style.left = (thresholds[i] - this._offset) / zoomFactor + "px";
         }
     },
 
     wasShown: function()
     {
         this._renderMediaQueries();
     },
 
     /**
      * @param {!WebInspector.MediaQueryInspector.MediaQueryUIModel} model
      * @return {!Element}
      */
     _createElementFromMediaQueryModel: function(model)
     {
         var zoomFactor = this._zoomFactor();
         var minWidthValue = model.minWidthExpression() ? model.minWidthExpression().computedLength() : 0;
 
         var container = document.createElementWithClass("div", "media-inspector-marker-container hbox");
         var markerElement = container.createChild("div", "media-inspector-marker");
         const styleClassPerSection = [
             "media-inspector-marker-max-width",
             "media-inspector-marker-min-max-width",
             "media-inspector-marker-min-width"
         ];
         markerElement.classList.add(styleClassPerSection[model.section()]);
-        var leftPixelValue = minWidthValue ? minWidthValue / zoomFactor + this._translateZero : 0;
+        var leftPixelValue = minWidthValue ? (minWidthValue - this._offset) / zoomFactor + this._translateZero : 0;
         markerElement.style.left = leftPixelValue + "px";
         var widthPixelValue = null;
         if (model.maxWidthExpression() && model.minWidthExpression())
             widthPixelValue = (model.maxWidthExpression().computedLength() - minWidthValue) / zoomFactor;
         else if (model.maxWidthExpression())
-            widthPixelValue = model.maxWidthExpression().computedLength() / zoomFactor + this._translateZero;
+            widthPixelValue = (model.maxWidthExpression().computedLength() - this._offset) / zoomFactor + this._translateZero;

[lushnikov, 2014/06/26 20:21:46]

This should not work in case of  this._offset >
model.maxWidthExpression().computedLength() - CSS width property becomes invalid
in case of negative values.

[dgozman, 2014/06/27 11:07:00]

You are right. Feel free to fix in a follow-up.

         else
             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 = widthPixelValue + leftPixelValue + "px";
             var label = container.createChild("span", "media-inspector-marker-label media-inspector-max-label");
             label.textContent = model.maxWidthExpression().computedLength() + "px";
@@ skipping 142 matching lines @@
     },
 
     /**
      * @return {?WebInspector.CSSMediaQueryExpression}
      */
     maxWidthExpression: function()
     {
         return this._maxWidthExpression;
     }
 }