Source/devtools/front_end/MediaQueryInspector.js - Issue 351303003: [DevTools] Switch from DIP to CSS pixels in device mode.

Unified Diff: Source/devtools/front_end/MediaQueryInspector.js

Issue 351303003: [DevTools] Switch from DIP to CSS pixels in device mode. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 6 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « Source/core/inspector/InspectorPageAgent.cpp ('k') | Source/devtools/front_end/ResponsiveDesignView.js » ('j') | Source/devtools/front_end/ResponsiveDesignView.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: Source/devtools/front_end/MediaQueryInspector.js

diff --git a/Source/devtools/front_end/MediaQueryInspector.js b/Source/devtools/front_end/MediaQueryInspector.js

index 8c2d68e762962e18f22079e93fa858070d7ae2fc..f5f231089ec1cfabd72c5915312c89591f37043c 100644

--- a/Source/devtools/front_end/MediaQueryInspector.js

+++ b/Source/devtools/front_end/MediaQueryInspector.js

@@ -16,6 +16,7 @@ WebInspector.MediaQueryInspector = function()

this._mediaThrottler = new WebInspector.Throttler(100);

this._translateZero = 0;

+ this._offset = 0;

this._scale = 1;

this._rulerDecorationLayer = document.createElementWithClass("div", "fill");

@@ -106,13 +107,15 @@ WebInspector.MediaQueryInspector.prototype = {

/**

* @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();

@@ -328,7 +331,7 @@ WebInspector.MediaQueryInspector.prototype = {

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";

}

@@ -354,13 +357,13 @@ WebInspector.MediaQueryInspector.prototype = {

"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 > mo

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")