Source/devtools/front_end/ScreencastView.js - Issue 347143002: DevTools: Screencast view scaling

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

Issue 347143002: DevTools: Screencast view scaling (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Added units to variable names 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

Index: Source/devtools/front_end/ScreencastView.js

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

index 3344a14fa7a0e4fd710194dd44f2a423134705e7..66609d863b585f10d4e23ceb80f0153e304b6018 100644

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

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

@@ -123,14 +123,14 @@ WebInspector.ScreencastView.prototype = {

return;

this._isCasting = true;

- const maxImageDimension = 1024;

+ const maxImageDimension = 2048;

var dimensions = this._viewportDimensions();

if (dimensions.width < 0 || dimensions.height < 0) {

this._isCasting = false;

return;

}

- dimensions.width *= WebInspector.zoomManager.zoomFactor();

- dimensions.height *= WebInspector.zoomManager.zoomFactor();

+ dimensions.width *= WebInspector.zoomManager.zoomFactor() * window.devicePixelRatio;

+ dimensions.height *= WebInspector.zoomManager.zoomFactor() * window.devicePixelRatio;

this._target.pageAgent().startScreencast("jpeg", 80, Math.min(maxImageDimension, dimensions.width), Math.min(maxImageDimension, dimensions.height));

this._target.domModel.setHighlighter(this);

@@ -150,12 +150,6 @@ WebInspector.ScreencastView.prototype = {

_screencastFrame: function(event)

{

var metadata = /** type {PageAgent.ScreencastFrameMetadata} */(event.data.metadata);

- if (!metadata.deviceScaleFactor) {

- console.log(event.data.data);

- return;

- }

var base64Data = /** type {string} */(event.data.data);

this._imageElement.src = "data:image/jpg;base64," + base64Data;

this._deviceScaleFactor = metadata.deviceScaleFactor;

@@ -163,15 +157,35 @@ WebInspector.ScreencastView.prototype = {

this._viewport = metadata.viewport;

if (!this._viewport)

return;

- var offsetTop = metadata.offsetTop || 0;

- var offsetBottom = metadata.offsetBottom || 0;

+ var offsetTopDIP = metadata.offsetTop || 0;

+ var offsetBottomDIP = metadata.offsetBottom || 0;

+ this._screenOffsetTop = offsetTopDIP;

+ var totalBarHeightDIP = offsetTopDIP + offsetBottomDIP;

+ var deviceWidthDIP = Math.round(this._viewport.width);

+ var deviceHeightDIP = Math.round(this._viewport.height + totalBarHeightDIP);

pfeldman 2014/06/24 16:24:59 Lets pass device dimensions from the backend inste

vkuzkokov 2014/06/25 12:17:39 Done.

+ var deviceSizeRatio = deviceHeightDIP / deviceWidthDIP;

- var screenWidthDIP = this._viewport.width * this._pageScaleFactor;

- var screenHeightDIP = this._viewport.height * this._pageScaleFactor + offsetTop + offsetBottom;

- this._screenOffsetTop = offsetTop;

- this._resizeViewport(screenWidthDIP, screenHeightDIP);

+ var dimensionsCSS = this._viewportDimensions();

+ var dimensions = { width : dimensionsCSS.width * window.devicePixelRatio, height : dimensionsCSS.height * window.devicePixelRatio };

+ // _imageZoom - screen pixels per pixel of the image

+ this._imageZoom = Math.min(dimensions.width / this._imageElement.naturalWidth, dimensions.height / (this._imageElement.naturalWidth * deviceSizeRatio));

+ this._viewportElement.classList.remove("hidden");

+ var bordersSize = WebInspector.ScreencastView._bordersSize;

+ if (this._imageZoom < 1.01) {

+ this._imageZoom = 1;

+ // _screenZoom - screen pixels per DIP

+ this._screenZoom = this._imageElement.naturalWidth / deviceWidthDIP;

+ this._viewportElement.style.width = this._imageElement.naturalWidth / window.devicePixelRatio + bordersSize + "px";

+ this._viewportElement.style.height = (this._imageElement.naturalHeight + Math.round(totalBarHeightDIP * this._screenZoom)) / window.devicePixelRatio + bordersSize + "px";

+ } else {

+ // _screenZoom - screen pixels per DIP

+ this._screenZoom = Math.min(dimensions.width / deviceWidthDIP, dimensions.height / deviceHeightDIP);

+ this._viewportElement.style.width = deviceWidthDIP * this._screenZoom / window.devicePixelRatio + bordersSize + "px";

+ this._viewportElement.style.height = deviceHeightDIP * this._screenZoom / window.devicePixelRatio + bordersSize + "px";

+ }

- this._imageZoom = this._imageElement.naturalWidth ? this._canvasElement.offsetWidth / this._imageElement.naturalWidth : 1;

this.highlightDOMNode(this._highlightNode, this._highlightConfig);

@@ -234,21 +248,6 @@ WebInspector.ScreencastView.prototype = {

/**

- * @param {number} screenWidthDIP

- * @param {number} screenHeightDIP

- */

- _resizeViewport: function(screenWidthDIP, screenHeightDIP)

- {

- var dimensions = this._viewportDimensions();

- this._screenZoom = Math.min(dimensions.width / screenWidthDIP, dimensions.height / screenHeightDIP);

- var bordersSize = WebInspector.ScreencastView._bordersSize;

- this._viewportElement.classList.remove("hidden");

- this._viewportElement.style.width = screenWidthDIP * this._screenZoom + bordersSize + "px";

- this._viewportElement.style.height = screenHeightDIP * this._screenZoom + bordersSize + "px";

- },

- /**

* @param {?Event} event

_handleMouseEvent: function(event)

@@ -281,7 +280,7 @@ WebInspector.ScreencastView.prototype = {

if (!node)

return;

if (event.type === "mousemove")

- this.highlightDOMNode(node, this._inspectModeConfig);

+ node.highlight(this._inspectModeConfig);

pfeldman 2014/06/24 16:24:59 Roll back

vkuzkokov 2014/06/25 12:17:39 Done.

else if (event.type === "click")

node.reveal();

}

@@ -494,7 +493,7 @@ WebInspector.ScreencastView.prototype = {

_zoomIntoScreenSpace: function(event)

{

- var zoom = this._canvasElement.offsetWidth / this._viewport.width / this._pageScaleFactor;

+ var zoom = this._canvasElement.offsetWidth / this._viewport.width;

var position = {};

position.x = Math.round(event.offsetX / zoom);

position.y = Math.round(event.offsetY / zoom);

@@ -568,7 +567,7 @@ WebInspector.ScreencastView.prototype = {

function callback(model)

{

- if (!model) {

+ if (!model || !this._viewport) {

this._repaint();

return;

}

@@ -619,8 +618,8 @@ WebInspector.ScreencastView.prototype = {

// Paint top and bottom gutter.

this._context.save();

this._context.fillStyle = this._checkerboardPattern;

- this._context.fillRect(0, 0, this._canvasElement.offsetWidth, this._screenOffsetTop * this._screenZoom);

- this._context.fillRect(0, this._screenOffsetTop * this._screenZoom + this._imageElement.naturalHeight * this._imageZoom, this._canvasElement.offsetWidth, this._canvasElement.offsetHeight);

+ this._context.fillRect(0, 0, this._canvasElement.offsetWidth, (this._screenOffsetTop * this._screenZoom) / window.devicePixelRatio);

+ this._context.fillRect(0, (this._screenOffsetTop * this._screenZoom + this._imageElement.naturalHeight * this._imageZoom) / window.devicePixelRatio, this._canvasElement.offsetWidth, this._canvasElement.offsetHeight);

this._context.restore();

if (model && config) {

@@ -653,9 +652,9 @@ WebInspector.ScreencastView.prototype = {

this._context.globalCompositeOperation = "destination-over";

}

+ this._context.restore();

this._context.drawImage(this._imageElement, 0, this._screenOffsetTop * this._screenZoom, this._imageElement.naturalWidth * this._imageZoom, this._imageElement.naturalHeight * this._imageZoom);

- this._context.restore();

@@ -817,8 +816,9 @@ WebInspector.ScreencastView.prototype = {

{

const gutterSize = 30;

const bordersSize = WebInspector.ScreencastView._bordersSize;

- return { width: this.element.offsetWidth - bordersSize - gutterSize,

- height: this.element.offsetHeight - bordersSize - gutterSize - WebInspector.ScreencastView._navBarHeight};

+ var width = Math.floor(this.element.offsetWidth - bordersSize - gutterSize);

+ var height = Math.floor(this.element.offsetHeight - bordersSize - gutterSize - WebInspector.ScreencastView._navBarHeight);

+ return { width: width, height: height };

/**

« no previous file with comments | « no previous file | no next file » | no next file with comments »