[DevTools] Handle emulated device scale factor and original device scale factor properly.

third_party/WebKit/Source/devtools/front_end/emulation/InspectedPagePlaceholder.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.Widget}
  */
 WebInspector.InspectedPagePlaceholder = function()
 {
@@ skipping 60 matching lines @@
 
     clearMinimumSizeAndMargins: function()
     {
         this._useMargins = false;
         this.setMinimumSize(1, 1);
         this._findMargins();
     },
 
     _dipPageRect: function()
     {
-        var zoomFactor = WebInspector.zoomManager.zoomFactor();
+        var windowToViewportRatio = 1000 / DevToolsHost.convertLengthForEmbedder(1000);

[dgozman, 2016/02/29 20:26:20]

Looks like this compensates for similar call to convertLengthForEmbedder in
devtools.js file. Just remove it altogether.

[oshima, 2016/02/29 21:28:03]

setInspectedPageBounds is also used by browser, which uses DIP, to update the
bounds, so we can't simply remove it.
The issue is that the same function is called from browser and renderer, which
now uses different coordinate system.

How about creating a separate API for a browser (like
setInspectedPageBoundsInDIP)?

[dgozman, 2016/02/29 21:38:41]

Not sure I'm following you. setInspectedPageBounds is only used from the
devtools' renderer and goes directly to the browser window. It should talk in
whatever units browser ui understands (I think that's DIP).

There is no other usage of this function or
DevToolsHost.convertLengthForEmbedder.

[oshima, 2016/02/29 22:59:50]

Sorry I seem to have wrong memory. I somehow thought the devtool layout is
controlled by browser process. Done.

+        var zoomFactor = WebInspector.zoomManager.zoomFactor() * windowToViewportRatio;
         var rect = this.element.getBoundingClientRect();
         var bodyRect = this.element.ownerDocument.body.getBoundingClientRect();
 
         var left = Math.max(rect.left * zoomFactor + this._margins.left, bodyRect.left * zoomFactor);
         var top = Math.max(rect.top * zoomFactor + this._margins.top, bodyRect.top * zoomFactor);
         var bottom = Math.min(rect.bottom * zoomFactor - this._margins.bottom, bodyRect.bottom * zoomFactor);
         var right = Math.min(rect.right * zoomFactor - this._margins.right, bodyRect.right * zoomFactor);
 
         return { x: left, y: top, width: right - left, height: bottom - top };
     },
 
     update: function()
     {
         delete this._updateId;
         var rect = this._dipPageRect();
         var bounds = { x: Math.round(rect.x), y: Math.round(rect.y), height: Math.max(1, Math.round(rect.height)), width: Math.max(1, Math.round(rect.width)) };
         this.dispatchEventToListeners(WebInspector.InspectedPagePlaceholder.Events.Update, bounds);
     },
 
     __proto__: WebInspector.Widget.prototype
 };