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: Removed unused variable 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..88ac5c6e88dc3f89dfe25e2c2bbe5a66b586e075 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 *= window.devicePixelRatio;

+ dimensions.height *= window.devicePixelRatio;

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

this._target.domModel.setHighlighter(this);

@@ -150,28 +150,27 @@ 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;

this._pageScaleFactor = metadata.pageScaleFactor;

- this._viewport = metadata.viewport;

- if (!this._viewport)

- return;

- var offsetTop = metadata.offsetTop || 0;

- var offsetBottom = metadata.offsetBottom || 0;

+ this._screenOffsetTop = metadata.offsetTop;

+ this._deviceWidth = metadata.deviceWidth;

+ this._deviceHeight = metadata.deviceHeight;

+ this._scrollOffsetX = metadata.scrollOffsetX;

+ this._scrollOffsetY = metadata.scrollOffsetY;

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

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

- this._screenOffsetTop = offsetTop;

- this._resizeViewport(screenWidthDIP, screenHeightDIP);

+ var deviceSizeRatio = metadata.deviceHeight / metadata.deviceWidth;

+ var dimensionsCSS = this._viewportDimensions();

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

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

+ var bordersSize = WebInspector.ScreencastView._bordersSize;

+ if (this._imageZoom < 1.01 / window.devicePixelRatio)

+ this._imageZoom = 1 / window.devicePixelRatio;

+ this._screenZoom = this._imageElement.naturalWidth * this._imageZoom / metadata.deviceWidth;

+ this._viewportElement.style.width = metadata.deviceWidth * this._screenZoom + bordersSize + "px";

+ this._viewportElement.style.height = metadata.deviceHeight * this._screenZoom + bordersSize + "px";

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

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

@@ -234,21 +233,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)

@@ -258,7 +242,7 @@ WebInspector.ScreencastView.prototype = {

return;

}

- if (!this._viewport)

+ if (!this._pageScaleFactor)

return;

if (!this._inspectModeConfig || event.type === "mousewheel") {

@@ -270,7 +254,7 @@ WebInspector.ScreencastView.prototype = {

}

var position = this._convertIntoScreenSpace(event);

- this._target.domModel.nodeForLocation(position.x / this._pageScaleFactor, position.y / this._pageScaleFactor, callback.bind(this));

+ this._target.domModel.nodeForLocation(position.x / this._pageScaleFactor + this._scrollOffsetX, position.y / this._pageScaleFactor + this._scrollOffsetY, callback.bind(this));

/**

* @param {?WebInspector.DOMNode} node

@@ -494,10 +478,9 @@ WebInspector.ScreencastView.prototype = {

_zoomIntoScreenSpace: function(event)

{

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

var position = {};

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

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

+ position.x = Math.round(event.offsetX / this._screenZoom);

+ position.y = Math.round(event.offsetY / this._screenZoom);

return position;

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

function callback(model)

{

- if (!model) {

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

this._repaint();

return;

}

@@ -584,8 +567,6 @@ WebInspector.ScreencastView.prototype = {

_scaleModel: function(model)

{

- var scale = this._canvasElement.offsetWidth / this._viewport.width;

/**

* @param {!DOMAgent.Quad} quad

* @this {WebInspector.ScreencastView}

@@ -593,8 +574,8 @@ WebInspector.ScreencastView.prototype = {

function scaleQuad(quad)

{

for (var i = 0; i < quad.length; i += 2) {

- quad[i] = (quad[i] - this._viewport.x) * scale;

- quad[i + 1] = (quad[i + 1] - this._viewport.y) * scale + this._screenOffsetTop * this._screenZoom;

+ quad[i] = (quad[i] - this._scrollOffsetX) * this._pageScaleFactor * this._screenZoom;

+ quad[i + 1] = ((quad[i + 1] - this._scrollOffsetY) * this._pageScaleFactor + this._screenOffsetTop) * this._screenZoom;

}

@@ -610,8 +591,10 @@ WebInspector.ScreencastView.prototype = {

var model = this._model;

var config = this._config;

- this._canvasElement.width = window.devicePixelRatio * this._canvasElement.offsetWidth;

- this._canvasElement.height = window.devicePixelRatio * this._canvasElement.offsetHeight;

+ var canvasWidth = this._canvasElement.getBoundingClientRect().width;

+ var canvasHeight = this._canvasElement.getBoundingClientRect().height;

+ this._canvasElement.width = window.devicePixelRatio * canvasWidth;

+ this._canvasElement.height = window.devicePixelRatio * canvasHeight;

this._context.save();

this._context.scale(window.devicePixelRatio, window.devicePixelRatio);

@@ -619,8 +602,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, canvasWidth, this._screenOffsetTop * this._screenZoom);

+ this._context.fillRect(0, this._screenOffsetTop * this._screenZoom + this._imageElement.naturalHeight * this._imageZoom, canvasWidth, canvasHeight);

this._context.restore();

if (model && config) {

@@ -654,8 +637,8 @@ WebInspector.ScreencastView.prototype = {

}

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

this._context.restore();

@@ -735,8 +718,8 @@ WebInspector.ScreencastView.prototype = {

if (!this._node)

return;

- var canvasWidth = this._canvasElement.offsetWidth;

- var canvasHeight = this._canvasElement.offsetHeight;

+ var canvasWidth = this._canvasElement.getBoundingClientRect().width;

+ var canvasHeight = this._canvasElement.getBoundingClientRect().height;

var lowerCaseName = this._node.localName() || this._node.nodeName().toLowerCase();

this._tagNameElement.textContent = lowerCaseName;

@@ -817,8 +800,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 = this.element.offsetWidth - bordersSize - gutterSize;

+ var height = this.element.offsetHeight - bordersSize - gutterSize - WebInspector.ScreencastView._navBarHeight;

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

/**

« no previous file with comments | « Source/core/inspector/InspectorDOMAgent.cpp ('k') | no next file » | no next file with comments »