third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js - Issue 1969913002: [DevTools] Polish device mode UI, include outline into screenshot.

Unified Diff: third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

Issue 1969913002: [DevTools] Polish device mode UI, include outline into screenshot. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: cleanup Created 4 years, 7 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 | « third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js ('k') | third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

index c4769f629ee98a45dcd033c6849b23ddaf8e55ae..e581a57a6b5dd22fa1dbc7a3313352f23f105fbd 100644

--- a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

@@ -44,7 +44,6 @@ WebInspector.DeviceModeView.prototype = {

this._outlineImage = this._contentArea.createChild("img", "device-mode-outline-image hidden fill");

this._outlineImage.addEventListener("load", this._onImageLoaded.bind(this, this._outlineImage, true), false);

this._outlineImage.addEventListener("error", this._onImageLoaded.bind(this, this._outlineImage, false), false);

- this._outlineImage.classList.toggle("device-frame-visible", this._model.deviceOutlineSetting().get());

this._screenArea = this._contentArea.createChild("div", "device-mode-screen-area");

this._screenImage = this._screenArea.createChild("img", "device-mode-screen-image hidden");

@@ -86,9 +85,9 @@ WebInspector.DeviceModeView.prototype = {

WebInspector.UIString("Tablet"),

WebInspector.UIString("Laptop"),

WebInspector.UIString("Laptop L"),

- WebInspector.UIString("4K")]

+ WebInspector.UIString("4K")];

this._presetBlocks = [];

- var inner = this._responsivePresetsContainer.createChild("div", "device-mode-presets-container-inner")

+ var inner = this._responsivePresetsContainer.createChild("div", "device-mode-presets-container-inner");

for (var i = sizes.length - 1; i >= 0; --i) {

var outer = inner.createChild("div", "fill device-mode-preset-bar-outer");

var block = outer.createChild("div", "device-mode-preset-bar");

@@ -111,11 +110,6 @@ WebInspector.DeviceModeView.prototype = {

}

- toggleDeviceMode: function()

- {

- this._toolbar.toggleDeviceMode();

- },

/**

* @param {!Element} element

* @param {number} widthFactor

@@ -210,14 +204,13 @@ WebInspector.DeviceModeView.prototype = {

var zoomFactor = WebInspector.zoomManager.zoomFactor();

var callDoResize = false;

- var showRulers = this._showRulersSetting.get() && !this._model.deviceOutlineSetting().get() && this._model.type() !== WebInspector.DeviceModeModel.Type.None;

+ var showRulers = this._showRulersSetting.get() && this._model.type() !== WebInspector.DeviceModeModel.Type.None;

var contentAreaResized = false;

var updateRulers = false;

var cssScreenRect = this._model.screenRect().scale(1 / zoomFactor);

if (!cssScreenRect.isEqual(this._cachedCssScreenRect)) {

applyRect(this._screenArea, cssScreenRect);

- this._leftRuler.element.style.left = cssScreenRect.left + "px";

updateRulers = true;

callDoResize = true;

this._cachedCssScreenRect = cssScreenRect;

@@ -236,7 +229,7 @@ WebInspector.DeviceModeView.prototype = {

callDoResize = true;

this._cachedOutlineRect = outlineRect;

}

- this._outlineImage.classList.toggle("device-frame-visible", (this._model.deviceOutlineSetting().get() && this._model.outlineImage()));

+ this._contentClip.classList.toggle("device-mode-outline-visible", !!this._model.outlineImage());

var resizable = this._model.type() === WebInspector.DeviceModeModel.Type.Responsive;

if (resizable !== this._cachedResizable) {

@@ -288,10 +281,10 @@ WebInspector.DeviceModeView.prototype = {

if (callDoResize)

this.doResize();

if (updateRulers) {

- this._topRuler.render(this._cachedCssScreenRect ? this._cachedCssScreenRect.left : 0, this._model.scale());

- this._leftRuler.render(0, this._model.scale());

- this._topRuler.element.style.top = this._cachedCssScreenRect ? this._cachedCssScreenRect.top + "px" : "0";

- this._leftRuler.element.style.top = this._cachedCssScreenRect ? this._cachedCssScreenRect.top + "px" : "0";

+ this._topRuler.render(this._model.scale());

+ this._leftRuler.render(this._model.scale());

+ this._topRuler.element.positionAt(this._cachedCssScreenRect ? this._cachedCssScreenRect.left : 0, this._cachedCssScreenRect ? this._cachedCssScreenRect.top : 0);

+ this._leftRuler.element.positionAt(this._cachedCssScreenRect ? this._cachedCssScreenRect.left : 0, this._cachedCssScreenRect ? this._cachedCssScreenRect.top : 0);

}

if (contentAreaResized)

this._contentAreaResized();

@@ -385,10 +378,12 @@ WebInspector.DeviceModeView.prototype = {

var zoomFactor = WebInspector.zoomManager.zoomFactor();

var rect = this._contentArea.getBoundingClientRect();

var availableSize = new Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));

+ var outlineVisible = this._model.deviceOutlineSetting().get();

if (availableSize.width < this._model.screenRect().width ||

availableSize.height < this._model.screenRect().height) {

WebInspector.inspectorView.minimize();

+ this._model.deviceOutlineSetting().set(false);

}

mainTarget.pageAgent().captureScreenshot(screenshotCaptured.bind(this));

@@ -400,37 +395,58 @@ WebInspector.DeviceModeView.prototype = {

function screenshotCaptured(error, content)

{

- if (error) {

- WebInspector.DOMModel.unmuteHighlight();

- WebInspector.inspectorView.restore();

+ this._model.deviceOutlineSetting().set(outlineVisible);

+ var dpr = window.devicePixelRatio;

+ var outlineRect = this._model.outlineRect().scale(dpr);

+ var screenRect = this._model.screenRect().scale(dpr);

+ screenRect.left -= outlineRect.left;

+ screenRect.top -= outlineRect.top;

+ var visiblePageRect = this._model.visiblePageRect().scale(dpr);

+ visiblePageRect.left += screenRect.left;

+ visiblePageRect.top += screenRect.top;

+ outlineRect.left = 0;

+ outlineRect.top = 0;

+ WebInspector.DOMModel.unmuteHighlight();

+ WebInspector.inspectorView.restore();

+ if (error)

return;

- }

// Create a canvas to splice the images together.

var canvas = createElement("canvas");

var ctx = canvas.getContext("2d");

- var screenRect = this._model.screenRect();

- var dpr = window.devicePixelRatio;

- canvas.width = screenRect.width * dpr;

- canvas.height = screenRect.height * dpr;

- // Add any available screen images.

- if (this._model.screenImage()) {

- var screenImage = new Image();

- screenImage.crossOrigin = "Anonymous";

- screenImage.srcset = this._model.screenImage();

- screenImage.onload = onImageLoad.bind(this);

- screenImage.onerror = paintScreenshot.bind(this);

- } else {

- paintScreenshot.call(this);

- }

+ canvas.width = outlineRect.width;

+ canvas.height = outlineRect.height;

+ var promise = Promise.resolve();

+ if (this._model.outlineImage())

+ promise = promise.then(paintImage.bind(null, this._model.outlineImage(), outlineRect));

+ if (this._model.screenImage())

+ promise = promise.then(paintImage.bind(null, this._model.screenImage(), screenRect));

+ promise.then(paintScreenshot.bind(this));

/**

- * @this {WebInspector.DeviceModeView}

+ * @param {string} src

+ * @param {!WebInspector.Rect} rect

+ * @return {!Promise<undefined>}

- function onImageLoad()

+ function paintImage(src, rect)

{

- ctx.drawImage(screenImage, 0, 0, screenRect.width * dpr, screenRect.height * dpr);

- paintScreenshot.call(this);

+ var callback;

+ var promise = new Promise(fulfill => callback = fulfill);

+ var image = new Image();

+ image.crossOrigin = "Anonymous";

+ image.srcset = src;

+ image.onload = onImageLoad;

+ image.onerror = callback;

+ return promise;

+ function onImageLoad()

+ {

+ ctx.drawImage(image, rect.left, rect.top, rect.width, rect.height);

+ callback();

+ }

}

/**

@@ -440,7 +456,6 @@ WebInspector.DeviceModeView.prototype = {

{

var pageImage = new Image();

pageImage.src = "data:image/png;base64," + content;

- var visiblePageRect = this._model.visiblePageRect().scale(dpr);

ctx.drawImage(pageImage,

visiblePageRect.left,

visiblePageRect.top,

@@ -455,8 +470,6 @@ WebInspector.DeviceModeView.prototype = {

link.download = fileName + ".png";

link.href = canvas.toDataURL("image/png");

link.click();

- WebInspector.DOMModel.unmuteHighlight();

- WebInspector.inspectorView.restore();

}

@@ -473,10 +486,10 @@ WebInspector.DeviceModeView.prototype = {

WebInspector.DeviceModeView.Ruler = function(horizontal, applyCallback)

{

WebInspector.VBox.call(this);

- this._contentElement = this.element.createChild("div", "device-mode-ruler flex-auto");

+ this.element.classList.add("device-mode-ruler");

+ this._contentElement = this.element.createChild("div", "device-mode-ruler-content").createChild("div", "device-mode-ruler-inner");

this._horizontal = horizontal;

this._scale = 1;

- this._offset = 0;

this._count = 0;

this._throttler = new WebInspector.Throttler(0);

this._applyCallback = applyCallback;

@@ -484,17 +497,11 @@ WebInspector.DeviceModeView.Ruler = function(horizontal, applyCallback)

WebInspector.DeviceModeView.Ruler.prototype = {

/**

- * @param {number} offset

* @param {number} scale

- render: function(offset, scale)

+ render: function(scale)

{

this._scale = scale;

- this._offset = offset;

- if (this._horizontal)

- this.element.style.paddingLeft = this._offset + "px";

- else

- this.element.style.paddingTop = this._offset + "px";

this._throttler.schedule(this._update.bind(this));