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

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

Rulers, grid and media queries are now rendered in CSS pixels.
Additionally, a content size rectangle is drawn for visual feedback.

BUG=none

Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=177098

[dgozman, 2014-06-26 16:59:12]

Could you please take a look?

[lushnikov, 2014-06-26 20:21:47]

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/Me...
File Source/devtools/front_end/MediaQueryInspector.js (right):

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/Me...
Source/devtools/front_end/MediaQueryInspector.js:366: widthPixelValue =
(model.maxWidthExpression().computedLength() - this._offset) / zoomFactor +
this._translateZero;
This should not work in case of  this._offset >
model.maxWidthExpression().computedLength() - CSS width property becomes invalid
in case of negative values.

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/Re...
File Source/devtools/front_end/ResponsiveDesignView.js (right):

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/Re...
Source/devtools/front_end/ResponsiveDesignView.js:170: this._drawContentsSize =
false;
why is this needed? In fact, here and in _onResizeEnd you force canvas
repainting. Is it really necessary?

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/Re...
Source/devtools/front_end/ResponsiveDesignView.js:421: ||
this._cachedViewport.pageScaleFactor !== this._viewport.pageScaleFactor;
isn't this a double? worth using "fuzzy equals".

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/re...
File Source/devtools/front_end/responsiveDesignView.css (right):

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/re...
Source/devtools/front_end/responsiveDesignView.css:500:
.media-inspector-ruler-decoration {
lets better add this into ruler glasspane.

https://codereview.chromium.org/351303003/diff/1/Source/devtools/protocol.json
File Source/devtools/protocol.json (right):

https://codereview.chromium.org/351303003/diff/1/Source/devtools/protocol.jso...
Source/devtools/protocol.json:197: { "name": "scrollX", "type": "number",
"hidden": true, "description": "X scroll offset in CSS pixels." },
I believe there's no need to specify "hidden" for every field here - you've
already specified the whole type as "hidden".

[dgozman, 2014-06-27 11:07:01]

PTAL

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/Me...
File Source/devtools/front_end/MediaQueryInspector.js (right):

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/Me...
Source/devtools/front_end/MediaQueryInspector.js:366: widthPixelValue =
(model.maxWidthExpression().computedLength() - this._offset) / zoomFactor +
this._translateZero;
On 2014/06/26 20:21:46, lushnikov wrote:
> This should not work in case of  this._offset >
> model.maxWidthExpression().computedLength() - CSS width property becomes
invalid
> in case of negative values.

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

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/Re...
File Source/devtools/front_end/ResponsiveDesignView.js (right):

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/Re...
Source/devtools/front_end/ResponsiveDesignView.js:170: this._drawContentsSize =
false;
On 2014/06/26 20:21:46, lushnikov wrote:
> why is this needed? In fact, here and in _onResizeEnd you force canvas
> repainting. Is it really necessary?

Yes it is. Contents size is lagging behind when you drag the handle, so it's
just hidden while resizing.

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/re...
File Source/devtools/front_end/responsiveDesignView.css (right):

https://codereview.chromium.org/351303003/diff/1/Source/devtools/front_end/re...
Source/devtools/front_end/responsiveDesignView.css:500:
.media-inspector-ruler-decoration {
On 2014/06/26 20:21:46, lushnikov wrote:
> lets better add this into ruler glasspane.

Done.

https://codereview.chromium.org/351303003/diff/1/Source/devtools/protocol.json
File Source/devtools/protocol.json (right):

https://codereview.chromium.org/351303003/diff/1/Source/devtools/protocol.jso...
Source/devtools/protocol.json:197: { "name": "scrollX", "type": "number",
"hidden": true, "description": "X scroll offset in CSS pixels." },
On 2014/06/26 20:21:46, lushnikov wrote:
> I believe there's no need to specify "hidden" for every field here - you've
> already specified the whole type as "hidden".

Done.

[lushnikov, 2014-06-27 11:37:20]

lgtm

[pfeldman, 2014-06-27 11:39:30]

lgtm

[dgozman, 2014-06-27 11:40:54]

The CQ bit was checked by dgozman@chromium.org

[commit-bot: I haz the power, 2014-06-27 11:41:11]

CQ is trying da patch. Follow status at
 https://chromium-status.appspot.com/cq/dgozman@chromium.org/351303003/20001

[commit-bot: I haz the power, 2014-06-27 12:53:49]

Change committed as 177098