third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js - Issue 2466123002: DevTools: reformat front-end code to match chromium style.

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

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)

Patch Set: all done Created 4 years, 1 month 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

« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js ('k') | third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeWrapper.js » ('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 51cc3056901a3e0b2383fda25f1f24b8dc8d75e5..6e0f80565c765e0da963a11ed775df32ea70af2b 100644

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

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

@@ -1,596 +1,576 @@

// Use of this source code is governed by a BSD-style license that can be

// found in the LICENSE file.

/**

- * @constructor

- * @extends {WebInspector.VBox}

+ * @unrestricted

-WebInspector.DeviceModeView = function()

- WebInspector.VBox.call(this, true);

+WebInspector.DeviceModeView = class extends WebInspector.VBox {

+ constructor() {

+ super(true);

this.setMinimumSize(150, 150);

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

- this.registerRequiredCSS("emulation/deviceModeView.css");

+ this.element.classList.add('device-mode-view');

+ this.registerRequiredCSS('emulation/deviceModeView.css');

WebInspector.Tooltip.addNativeOverrideContainer(this.contentElement);

this._model = new WebInspector.DeviceModeModel(this._updateUI.bind(this));

- this._mediaInspector = new WebInspector.MediaQueryInspector(() => this._model.appliedDeviceSize().width, this._model.setWidth.bind(this._model));

- this._showMediaInspectorSetting = WebInspector.settings.moduleSetting("showMediaQueryInspector");

+ this._mediaInspector = new WebInspector.MediaQueryInspector(

+ () => this._model.appliedDeviceSize().width, this._model.setWidth.bind(this._model));

+ this._showMediaInspectorSetting = WebInspector.settings.moduleSetting('showMediaQueryInspector');

this._showMediaInspectorSetting.addChangeListener(this._updateUI, this);

- this._showRulersSetting = WebInspector.settings.moduleSetting("emulation.showRulers");

+ this._showRulersSetting = WebInspector.settings.moduleSetting('emulation.showRulers');

this._showRulersSetting.addChangeListener(this._updateUI, this);

this._topRuler = new WebInspector.DeviceModeView.Ruler(true, this._model.setWidthAndScaleToFit.bind(this._model));

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

- this._leftRuler = new WebInspector.DeviceModeView.Ruler(false, this._model.setHeightAndScaleToFit.bind(this._model));

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

+ this._topRuler.element.classList.add('device-mode-ruler-top');

+ this._leftRuler =

+ new WebInspector.DeviceModeView.Ruler(false, this._model.setHeightAndScaleToFit.bind(this._model));

+ this._leftRuler.element.classList.add('device-mode-ruler-left');

this._createUI();

WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._zoomChanged, this);

-};

-WebInspector.DeviceModeView.prototype = {

- _createUI: function()

- {

- this._toolbar = new WebInspector.DeviceModeToolbar(this._model, this._showMediaInspectorSetting, this._showRulersSetting);

- this.contentElement.appendChild(this._toolbar.element());

- this._contentClip = this.contentElement.createChild("div", "device-mode-content-clip vbox");

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

- this._populatePresetsContainer();

- this._mediaInspectorContainer = this._contentClip.createChild("div", "device-mode-media-container");

- this._contentArea = this._contentClip.createChild("div", "device-mode-content-area");

- 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._screenArea = this._contentArea.createChild("div", "device-mode-screen-area");

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

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

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

- this._bottomRightResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-bottom-right-resizer");

- this._bottomRightResizerElement.createChild("div", "");

- this._createResizer(this._bottomRightResizerElement, 2, 1);

- this._bottomLeftResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-bottom-left-resizer");

- this._bottomLeftResizerElement.createChild("div", "");

- this._createResizer(this._bottomLeftResizerElement, -2, 1);

- this._rightResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-right-resizer");

- this._rightResizerElement.createChild("div", "");

- this._createResizer(this._rightResizerElement, 2, 0);

- this._leftResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-left-resizer");

- this._leftResizerElement.createChild("div", "");

- this._createResizer(this._leftResizerElement, -2, 0);

- this._bottomResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-bottom-resizer");

- this._bottomResizerElement.createChild("div", "");

- this._createResizer(this._bottomResizerElement, 0, 1);

- this._bottomResizerElement.addEventListener("dblclick", this._model.setHeight.bind(this._model, 0), false);

- this._bottomResizerElement.title = WebInspector.UIString("Double-click for full height");

- this._pageArea = this._screenArea.createChild("div", "device-mode-page-area");

- this._pageArea.createChild("content");

- },

- _populatePresetsContainer: function()

- {

- var sizes = [320, 375, 425, 768, 1024, 1440, 2560];

- var titles = [WebInspector.UIString("Mobile S"),

- WebInspector.UIString("Mobile M"),

- WebInspector.UIString("Mobile L"),

- WebInspector.UIString("Tablet"),

- WebInspector.UIString("Laptop"),

- WebInspector.UIString("Laptop L"),

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

- this._presetBlocks = [];

- 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");

- block.createChild("span").textContent = titles[i] + " \u2013 " + sizes[i] + "px";

- block.addEventListener("click", applySize.bind(this, sizes[i]), false);

- block.__width = sizes[i];

- this._presetBlocks.push(block);

- }

- /**

- * @param {number} width

- * @param {!Event} e

- * @this {WebInspector.DeviceModeView}

- */

- function applySize(width, e)

- {

- this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);

- this._model.setSizeAndScaleToFit(width, 0);

- e.consume();

- }

- },

- /**

- * @param {!Element} element

- * @param {number} widthFactor

- * @param {number} heightFactor

- * @return {!WebInspector.ResizerWidget}

- */

- _createResizer: function(element, widthFactor, heightFactor)

- {

- var resizer = new WebInspector.ResizerWidget();

- resizer.addElement(element);

- var cursor = widthFactor ? "ew-resize" : "ns-resize";

- if (widthFactor * heightFactor > 0)

- cursor = "nwse-resize";

- if (widthFactor * heightFactor < 0)

- cursor = "nesw-resize";

- resizer.setCursor(cursor);

- resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeStart, this._onResizeStart, this);

- resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeUpdate, this._onResizeUpdate.bind(this, widthFactor, heightFactor));

- resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeEnd, this._onResizeEnd, this);

- return resizer;

- },

+ }

+ _createUI() {

+ this._toolbar =

+ new WebInspector.DeviceModeToolbar(this._model, this._showMediaInspectorSetting, this._showRulersSetting);

+ this.contentElement.appendChild(this._toolbar.element());

+ this._contentClip = this.contentElement.createChild('div', 'device-mode-content-clip vbox');

+ this._responsivePresetsContainer = this._contentClip.createChild('div', 'device-mode-presets-container');

+ this._populatePresetsContainer();

+ this._mediaInspectorContainer = this._contentClip.createChild('div', 'device-mode-media-container');

+ this._contentArea = this._contentClip.createChild('div', 'device-mode-content-area');

+ 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._screenArea = this._contentArea.createChild('div', 'device-mode-screen-area');

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

+ this._screenImage.addEventListener('load', this._onImageLoaded.bind(this, this._screenImage, true), false);

+ this._screenImage.addEventListener('error', this._onImageLoaded.bind(this, this._screenImage, false), false);

+ this._bottomRightResizerElement =

+ this._screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-right-resizer');

+ this._bottomRightResizerElement.createChild('div', '');

+ this._createResizer(this._bottomRightResizerElement, 2, 1);

+ this._bottomLeftResizerElement =

+ this._screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-left-resizer');

+ this._bottomLeftResizerElement.createChild('div', '');

+ this._createResizer(this._bottomLeftResizerElement, -2, 1);

+ this._rightResizerElement = this._screenArea.createChild('div', 'device-mode-resizer device-mode-right-resizer');

+ this._rightResizerElement.createChild('div', '');

+ this._createResizer(this._rightResizerElement, 2, 0);

+ this._leftResizerElement = this._screenArea.createChild('div', 'device-mode-resizer device-mode-left-resizer');

+ this._leftResizerElement.createChild('div', '');

+ this._createResizer(this._leftResizerElement, -2, 0);

+ this._bottomResizerElement = this._screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-resizer');

+ this._bottomResizerElement.createChild('div', '');

+ this._createResizer(this._bottomResizerElement, 0, 1);

+ this._bottomResizerElement.addEventListener('dblclick', this._model.setHeight.bind(this._model, 0), false);

+ this._bottomResizerElement.title = WebInspector.UIString('Double-click for full height');

+ this._pageArea = this._screenArea.createChild('div', 'device-mode-page-area');

+ this._pageArea.createChild('content');

+ }

+ _populatePresetsContainer() {

+ var sizes = [320, 375, 425, 768, 1024, 1440, 2560];

+ var titles = [

+ WebInspector.UIString('Mobile S'), WebInspector.UIString('Mobile M'), WebInspector.UIString('Mobile L'),

+ WebInspector.UIString('Tablet'), WebInspector.UIString('Laptop'), WebInspector.UIString('Laptop L'),

+ WebInspector.UIString('4K')

+ ];

+ this._presetBlocks = [];

+ 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');

+ block.createChild('span').textContent = titles[i] + ' \u2013 ' + sizes[i] + 'px';

+ block.addEventListener('click', applySize.bind(this, sizes[i]), false);

+ block.__width = sizes[i];

+ this._presetBlocks.push(block);

+ }

/**

- * @param {!WebInspector.Event} event

+ * @param {number} width

+ * @param {!Event} e

+ * @this {WebInspector.DeviceModeView}

- _onResizeStart: function(event)

- {

- this._slowPositionStart = null;

- /** @type {!Size} */

- this._resizeStart = this._model.screenRect().size();

- },

- /**

- * @param {number} widthFactor

- * @param {number} heightFactor

- * @param {!WebInspector.Event} event

- */

- _onResizeUpdate: function(widthFactor, heightFactor, event)

- {

- if (event.data.shiftKey !== !!this._slowPositionStart)

- this._slowPositionStart = event.data.shiftKey ? {x: event.data.currentX, y: event.data.currentY} : null;

- var cssOffsetX = event.data.currentX - event.data.startX;

- var cssOffsetY = event.data.currentY - event.data.startY;

- if (this._slowPositionStart) {

- cssOffsetX = (event.data.currentX - this._slowPositionStart.x) / 10 + this._slowPositionStart.x - event.data.startX;

- cssOffsetY = (event.data.currentY - this._slowPositionStart.y) / 10 + this._slowPositionStart.y - event.data.startY;

- }

- if (widthFactor) {

- var dipOffsetX = cssOffsetX * WebInspector.zoomManager.zoomFactor();

- var newWidth = this._resizeStart.width + dipOffsetX * widthFactor;

- newWidth = Math.round(newWidth / this._model.scale());

- if (newWidth >= WebInspector.DeviceModeModel.MinDeviceSize && newWidth <= WebInspector.DeviceModeModel.MaxDeviceSize)

- this._model.setWidth(newWidth);

- }

- if (heightFactor) {

- var dipOffsetY = cssOffsetY * WebInspector.zoomManager.zoomFactor();

- var newHeight = this._resizeStart.height + dipOffsetY * heightFactor;

- newHeight = Math.round(newHeight / this._model.scale());

- if (newHeight >= WebInspector.DeviceModeModel.MinDeviceSize && newHeight <= WebInspector.DeviceModeModel.MaxDeviceSize)

- this._model.setHeight(newHeight);

- }

- },

- /**

- * @param {!WebInspector.Event} event

- */

- _onResizeEnd: function(event)

- {

- delete this._resizeStart;

- WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.ResizedViewInResponsiveMode);

- },

- _updateUI: function()

- {

- /**

- * @param {!Element} element

- * @param {!WebInspector.Rect} rect

- */

- function applyRect(element, rect)

- {

- element.style.left = rect.left + "px";

- element.style.top = rect.top + "px";

- element.style.width = rect.width + "px";

- element.style.height = rect.height + "px";

- }

- if (!this.isShowing())

- return;

- var zoomFactor = WebInspector.zoomManager.zoomFactor();

- var callDoResize = false;

- 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);

- updateRulers = true;

- callDoResize = true;

- this._cachedCssScreenRect = cssScreenRect;

- }

- var cssVisiblePageRect = this._model.visiblePageRect().scale(1 / zoomFactor);

- if (!cssVisiblePageRect.isEqual(this._cachedCssVisiblePageRect)) {

- applyRect(this._pageArea, cssVisiblePageRect);

- callDoResize = true;

- this._cachedCssVisiblePageRect = cssVisiblePageRect;

- }

- var outlineRect = this._model.outlineRect().scale(1 / zoomFactor);

- if (!outlineRect.isEqual(this._cachedOutlineRect)) {

- applyRect(this._outlineImage, outlineRect);

- callDoResize = true;

- this._cachedOutlineRect = outlineRect;

- }

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

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

- if (resizable !== this._cachedResizable) {

- this._rightResizerElement.classList.toggle("hidden", !resizable);

- this._leftResizerElement.classList.toggle("hidden", !resizable);

- this._bottomResizerElement.classList.toggle("hidden", !resizable);

- this._bottomRightResizerElement.classList.toggle("hidden", !resizable);

- this._bottomLeftResizerElement.classList.toggle("hidden", !resizable);

- this._cachedResizable = resizable;

- }

- var mediaInspectorVisible = this._showMediaInspectorSetting.get() && this._model.type() !== WebInspector.DeviceModeModel.Type.None;

- if (mediaInspectorVisible !== this._cachedMediaInspectorVisible) {

- if (mediaInspectorVisible)

- this._mediaInspector.show(this._mediaInspectorContainer);

- else

- this._mediaInspector.detach();

- contentAreaResized = true;

- callDoResize = true;

- this._cachedMediaInspectorVisible = mediaInspectorVisible;

- }

- if (showRulers !== this._cachedShowRulers) {

- this._contentClip.classList.toggle("device-mode-rulers-visible", showRulers);

- if (showRulers) {

- this._topRuler.show(this._contentArea);

- this._leftRuler.show(this._contentArea);

- } else {

- this._topRuler.detach();

- this._leftRuler.detach();

- }

- contentAreaResized = true;

- callDoResize = true;

- this._cachedShowRulers = showRulers;

- }

- if (this._model.scale() !== this._cachedScale) {

- updateRulers = true;

- callDoResize = true;

- for (var block of this._presetBlocks)

- block.style.width = block.__width * this._model.scale() + "px";

- this._cachedScale = this._model.scale();

- }

- this._toolbar.update();

- this._loadImage(this._screenImage, this._model.screenImage());

- this._loadImage(this._outlineImage, this._model.outlineImage());

- this._mediaInspector.setAxisTransform(this._model.scale());

- if (callDoResize)

- this.doResize();

- if (updateRulers) {

- 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();

- },

+ function applySize(width, e) {

+ this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);

+ this._model.setSizeAndScaleToFit(width, 0);

+ e.consume();

+ }

+ /**

+ * @param {!Element} element

+ * @param {number} widthFactor

+ * @param {number} heightFactor

+ * @return {!WebInspector.ResizerWidget}

+ */

+ _createResizer(element, widthFactor, heightFactor) {

+ var resizer = new WebInspector.ResizerWidget();

+ resizer.addElement(element);

+ var cursor = widthFactor ? 'ew-resize' : 'ns-resize';

+ if (widthFactor * heightFactor > 0)

+ cursor = 'nwse-resize';

+ if (widthFactor * heightFactor < 0)

+ cursor = 'nesw-resize';

+ resizer.setCursor(cursor);

+ resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeStart, this._onResizeStart, this);

+ resizer.addEventListener(

+ WebInspector.ResizerWidget.Events.ResizeUpdate, this._onResizeUpdate.bind(this, widthFactor, heightFactor));

+ resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeEnd, this._onResizeEnd, this);

+ return resizer;

+ }

+ /**

+ * @param {!WebInspector.Event} event

+ */

+ _onResizeStart(event) {

+ this._slowPositionStart = null;

+ /** @type {!Size} */

+ this._resizeStart = this._model.screenRect().size();

+ }

+ /**

+ * @param {number} widthFactor

+ * @param {number} heightFactor

+ * @param {!WebInspector.Event} event

+ */

+ _onResizeUpdate(widthFactor, heightFactor, event) {

+ if (event.data.shiftKey !== !!this._slowPositionStart)

+ this._slowPositionStart = event.data.shiftKey ? {x: event.data.currentX, y: event.data.currentY} : null;

+ var cssOffsetX = event.data.currentX - event.data.startX;

+ var cssOffsetY = event.data.currentY - event.data.startY;

+ if (this._slowPositionStart) {

+ cssOffsetX =

+ (event.data.currentX - this._slowPositionStart.x) / 10 + this._slowPositionStart.x - event.data.startX;

+ cssOffsetY =

+ (event.data.currentY - this._slowPositionStart.y) / 10 + this._slowPositionStart.y - event.data.startY;

+ }

+ if (widthFactor) {

+ var dipOffsetX = cssOffsetX * WebInspector.zoomManager.zoomFactor();

+ var newWidth = this._resizeStart.width + dipOffsetX * widthFactor;

+ newWidth = Math.round(newWidth / this._model.scale());

+ if (newWidth >= WebInspector.DeviceModeModel.MinDeviceSize &&

+ newWidth <= WebInspector.DeviceModeModel.MaxDeviceSize)

+ this._model.setWidth(newWidth);

+ }

+ if (heightFactor) {

+ var dipOffsetY = cssOffsetY * WebInspector.zoomManager.zoomFactor();

+ var newHeight = this._resizeStart.height + dipOffsetY * heightFactor;

+ newHeight = Math.round(newHeight / this._model.scale());

+ if (newHeight >= WebInspector.DeviceModeModel.MinDeviceSize &&

+ newHeight <= WebInspector.DeviceModeModel.MaxDeviceSize)

+ this._model.setHeight(newHeight);

+ }

+ /**

+ * @param {!WebInspector.Event} event

+ */

+ _onResizeEnd(event) {

+ delete this._resizeStart;

+ WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.ResizedViewInResponsiveMode);

+ }

+ _updateUI() {

/**

* @param {!Element} element

- * @param {string} srcset

- */

- _loadImage: function(element, srcset)

- {

- if (element.getAttribute("srcset") === srcset)

- return;

- element.setAttribute("srcset", srcset);

- if (!srcset)

- element.classList.toggle("hidden", true);

- },

- /**

- * @param {!Element} element

- * @param {boolean} success

- */

- _onImageLoaded: function(element, success)

- {

- element.classList.toggle("hidden", !success);

- },

- _contentAreaResized: function()

- {

- 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 preferredSize = new Size(Math.max((rect.width - 2 * this._handleWidth) * zoomFactor, 1), Math.max((rect.height - this._handleHeight) * zoomFactor, 1));

- this._model.setAvailableSize(availableSize, preferredSize);

- },

- _measureHandles: function()

- {

- var hidden = this._rightResizerElement.classList.contains("hidden");

- this._rightResizerElement.classList.toggle("hidden", false);

- this._bottomResizerElement.classList.toggle("hidden", false);

- this._handleWidth = this._rightResizerElement.offsetWidth;

- this._handleHeight = this._bottomResizerElement.offsetHeight;

- this._rightResizerElement.classList.toggle("hidden", hidden);

- this._bottomResizerElement.classList.toggle("hidden", hidden);

- },

- _zoomChanged: function()

- {

- delete this._handleWidth;

- delete this._handleHeight;

- if (this.isShowing()) {

- this._measureHandles();

- this._contentAreaResized();

- }

- },

- /**

- * @override

+ * @param {!WebInspector.Rect} rect

- onResize: function()

- {

- if (this.isShowing())

- this._contentAreaResized();

- },

+ function applyRect(element, rect) {

+ element.style.left = rect.left + 'px';

+ element.style.top = rect.top + 'px';

+ element.style.width = rect.width + 'px';

+ element.style.height = rect.height + 'px';

+ }

+ if (!this.isShowing())

+ return;

+ var zoomFactor = WebInspector.zoomManager.zoomFactor();

+ var callDoResize = false;

+ 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);

+ updateRulers = true;

+ callDoResize = true;

+ this._cachedCssScreenRect = cssScreenRect;

+ }

+ var cssVisiblePageRect = this._model.visiblePageRect().scale(1 / zoomFactor);

+ if (!cssVisiblePageRect.isEqual(this._cachedCssVisiblePageRect)) {

+ applyRect(this._pageArea, cssVisiblePageRect);

+ callDoResize = true;

+ this._cachedCssVisiblePageRect = cssVisiblePageRect;

+ }

+ var outlineRect = this._model.outlineRect().scale(1 / zoomFactor);

+ if (!outlineRect.isEqual(this._cachedOutlineRect)) {

+ applyRect(this._outlineImage, outlineRect);

+ callDoResize = true;

+ this._cachedOutlineRect = outlineRect;

+ }

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

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

+ if (resizable !== this._cachedResizable) {

+ this._rightResizerElement.classList.toggle('hidden', !resizable);

+ this._leftResizerElement.classList.toggle('hidden', !resizable);

+ this._bottomResizerElement.classList.toggle('hidden', !resizable);

+ this._bottomRightResizerElement.classList.toggle('hidden', !resizable);

+ this._bottomLeftResizerElement.classList.toggle('hidden', !resizable);

+ this._cachedResizable = resizable;

+ }

+ var mediaInspectorVisible =

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

+ if (mediaInspectorVisible !== this._cachedMediaInspectorVisible) {

+ if (mediaInspectorVisible)

+ this._mediaInspector.show(this._mediaInspectorContainer);

+ else

+ this._mediaInspector.detach();

+ contentAreaResized = true;

+ callDoResize = true;

+ this._cachedMediaInspectorVisible = mediaInspectorVisible;

+ }

+ if (showRulers !== this._cachedShowRulers) {

+ this._contentClip.classList.toggle('device-mode-rulers-visible', showRulers);

+ if (showRulers) {

+ this._topRuler.show(this._contentArea);

+ this._leftRuler.show(this._contentArea);

+ } else {

+ this._topRuler.detach();

+ this._leftRuler.detach();

+ }

+ contentAreaResized = true;

+ callDoResize = true;

+ this._cachedShowRulers = showRulers;

+ }

+ if (this._model.scale() !== this._cachedScale) {

+ updateRulers = true;

+ callDoResize = true;

+ for (var block of this._presetBlocks)

+ block.style.width = block.__width * this._model.scale() + 'px';

+ this._cachedScale = this._model.scale();

+ }

+ this._toolbar.update();

+ this._loadImage(this._screenImage, this._model.screenImage());

+ this._loadImage(this._outlineImage, this._model.outlineImage());

+ this._mediaInspector.setAxisTransform(this._model.scale());

+ if (callDoResize)

+ this.doResize();

+ if (updateRulers) {

+ 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();

+ }

+ /**

+ * @param {!Element} element

+ * @param {string} srcset

+ */

+ _loadImage(element, srcset) {

+ if (element.getAttribute('srcset') === srcset)

+ return;

+ element.setAttribute('srcset', srcset);

+ if (!srcset)

+ element.classList.toggle('hidden', true);

+ }

+ /**

+ * @param {!Element} element

+ * @param {boolean} success

+ */

+ _onImageLoaded(element, success) {

+ element.classList.toggle('hidden', !success);

+ }

+ _contentAreaResized() {

+ 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 preferredSize = new Size(

+ Math.max((rect.width - 2 * this._handleWidth) * zoomFactor, 1),

+ Math.max((rect.height - this._handleHeight) * zoomFactor, 1));

+ this._model.setAvailableSize(availableSize, preferredSize);

+ }

+ _measureHandles() {

+ var hidden = this._rightResizerElement.classList.contains('hidden');

+ this._rightResizerElement.classList.toggle('hidden', false);

+ this._bottomResizerElement.classList.toggle('hidden', false);

+ this._handleWidth = this._rightResizerElement.offsetWidth;

+ this._handleHeight = this._bottomResizerElement.offsetHeight;

+ this._rightResizerElement.classList.toggle('hidden', hidden);

+ this._bottomResizerElement.classList.toggle('hidden', hidden);

+ }

+ _zoomChanged() {

+ delete this._handleWidth;

+ delete this._handleHeight;

+ if (this.isShowing()) {

+ this._measureHandles();

+ this._contentAreaResized();

+ }

+ /**

+ * @override

+ */

+ onResize() {

+ if (this.isShowing())

+ this._contentAreaResized();

+ }

+ /**

+ * @override

+ */

+ wasShown() {

+ this._measureHandles();

+ this._toolbar.restore();

+ }

+ /**

+ * @override

+ */

+ willHide() {

+ this._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);

+ }

+ captureScreenshot() {

+ var mainTarget = WebInspector.targetManager.mainTarget();

+ if (!mainTarget)

+ return;

+ WebInspector.DOMModel.muteHighlight();

+ 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));

/**

- * @override

+ * @param {?Protocol.Error} error

+ * @param {string} content

+ * @this {WebInspector.DeviceModeView}

- wasShown: function()

- {

- this._measureHandles();

- this._toolbar.restore();

- },

- /**

- * @override

- */

- willHide: function()

- {

- this._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);

- },

- captureScreenshot: function()

- {

- var mainTarget = WebInspector.targetManager.mainTarget();

- if (!mainTarget)

- return;

- WebInspector.DOMModel.muteHighlight();

- 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);

+ function screenshotCaptured(error, content) {

+ 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) {

+ console.error(error);

+ return;

+ }

+ // Create a canvas to splice the images together.

+ var canvas = createElement('canvas');

+ var ctx = canvas.getContext('2d');

+ canvas.width = outlineRect.width;

+ canvas.height = outlineRect.height;

+ ctx.imageSmoothingEnabled = false;

+ var promise = Promise.resolve();

+ if (this._model.outlineImage())

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

+ promise = promise.then(drawBorder);

+ if (this._model.screenImage())

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

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

+ /**

+ * @param {string} src

+ * @param {!WebInspector.Rect} rect

+ * @return {!Promise<undefined>}

+ */

+ function paintImage(src, rect) {

+ 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();

}

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

- /**

- * @param {?Protocol.Error} error

- * @param {string} content

- * @this {WebInspector.DeviceModeView}

- */

- function screenshotCaptured(error, content)

- {

- 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) {

- console.error(error);

- return;

- }

- // Create a canvas to splice the images together.

- var canvas = createElement("canvas");

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

- canvas.width = outlineRect.width;

- canvas.height = outlineRect.height;

- ctx.imageSmoothingEnabled = false;

- var promise = Promise.resolve();

- if (this._model.outlineImage())

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

- promise = promise.then(drawBorder);

- if (this._model.screenImage())

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

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

- /**

- * @param {string} src

- * @param {!WebInspector.Rect} rect

- * @return {!Promise<undefined>}

- */

- function paintImage(src, rect)

- {

- 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();

- }

- function drawBorder()

- {

- ctx.strokeStyle = "hsla(0, 0%, 98%, 0.5)";

- ctx.lineWidth = 1;

- ctx.setLineDash([10, 10]);

- ctx.strokeRect(screenRect.left + 1, screenRect.top + 1, screenRect.width - 2, screenRect.height - 2);

- }

- /**

- * @this {WebInspector.DeviceModeView}

- */

- function paintScreenshot()

- {

- var pageImage = new Image();

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

- ctx.drawImage(pageImage,

- visiblePageRect.left,

- visiblePageRect.top,

- Math.min(pageImage.naturalWidth, screenRect.width),

- Math.min(pageImage.naturalHeight, screenRect.height));

- var url = mainTarget && mainTarget.inspectedURL();

- var fileName = url ? url.trimURL().removeURLFragment() : "";

- if (this._model.type() === WebInspector.DeviceModeModel.Type.Device)

- fileName += WebInspector.UIString("(%s)", this._model.device().title);

- // Trigger download.

- var link = createElement("a");

- link.download = fileName + ".png";

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

- link.click();

- }

- },

- __proto__: WebInspector.VBox.prototype

+ }

+ function drawBorder() {

+ ctx.strokeStyle = 'hsla(0, 0%, 98%, 0.5)';

+ ctx.lineWidth = 1;

+ ctx.setLineDash([10, 10]);

+ ctx.strokeRect(screenRect.left + 1, screenRect.top + 1, screenRect.width - 2, screenRect.height - 2);

+ }

+ /**

+ * @this {WebInspector.DeviceModeView}

+ */

+ function paintScreenshot() {

+ var pageImage = new Image();

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

+ ctx.drawImage(

+ pageImage, visiblePageRect.left, visiblePageRect.top, Math.min(pageImage.naturalWidth, screenRect.width),

+ Math.min(pageImage.naturalHeight, screenRect.height));

+ var url = mainTarget && mainTarget.inspectedURL();

+ var fileName = url ? url.trimURL().removeURLFragment() : '';

+ if (this._model.type() === WebInspector.DeviceModeModel.Type.Device)

+ fileName += WebInspector.UIString('(%s)', this._model.device().title);

+ // Trigger download.

+ var link = createElement('a');

+ link.download = fileName + '.png';

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

+ link.click();

+ }

};

/**

- * @constructor

- * @extends {WebInspector.VBox}

- * @param {boolean} horizontal

- * @param {function(number)} applyCallback

+ * @unrestricted

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

- WebInspector.VBox.call(this);

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

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

+WebInspector.DeviceModeView.Ruler = class extends WebInspector.VBox {

+ /**

+ * @param {boolean} horizontal

+ * @param {function(number)} applyCallback

+ */

+ constructor(horizontal, applyCallback) {

+ super();

+ 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._count = 0;

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

this._applyCallback = applyCallback;

-};

-WebInspector.DeviceModeView.Ruler.prototype = {

- /**

- * @param {number} scale

- */

- render: function(scale)

- {

- this._scale = scale;

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

- },

- /**

- * @override

- */

- onResize: function()

- {

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

- },

- /**

- * @return {!Promise.<?>}

- */

- _update: function()

- {

- var zoomFactor = WebInspector.zoomManager.zoomFactor();

- var size = this._horizontal ? this._contentElement.offsetWidth : this._contentElement.offsetHeight;

- if (this._scale !== this._renderedScale || zoomFactor !== this._renderedZoomFactor) {

- this._contentElement.removeChildren();

- this._count = 0;

- this._renderedScale = this._scale;

- this._renderedZoomFactor = zoomFactor;

+ }

+ /**

+ * @param {number} scale

+ */

+ render(scale) {

+ this._scale = scale;

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

+ }

+ /**

+ * @override

+ */

+ onResize() {

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

+ }

+ /**

+ * @return {!Promise.<?>}

+ */

+ _update() {

+ var zoomFactor = WebInspector.zoomManager.zoomFactor();

+ var size = this._horizontal ? this._contentElement.offsetWidth : this._contentElement.offsetHeight;

+ if (this._scale !== this._renderedScale || zoomFactor !== this._renderedZoomFactor) {

+ this._contentElement.removeChildren();

+ this._count = 0;

+ this._renderedScale = this._scale;

+ this._renderedZoomFactor = zoomFactor;

+ }

+ var dipSize = size * zoomFactor / this._scale;

+ var count = Math.ceil(dipSize / 5);

+ var step = 1;

+ if (this._scale < 0.8)

+ step = 2;

+ if (this._scale < 0.6)

+ step = 4;

+ if (this._scale < 0.4)

+ step = 8;

+ if (this._scale < 0.2)

+ step = 16;

+ if (this._scale < 0.1)

+ step = 32;

+ for (var i = count; i < this._count; i++) {

+ if (!(i % step))

+ this._contentElement.lastChild.remove();

+ }

+ for (var i = this._count; i < count; i++) {

+ if (i % step)

+ continue;

+ var marker = this._contentElement.createChild('div', 'device-mode-ruler-marker');

+ if (i) {

+ if (this._horizontal)

+ marker.style.left = (5 * i) * this._scale / zoomFactor + 'px';

+ else

+ marker.style.top = (5 * i) * this._scale / zoomFactor + 'px';

+ if (!(i % 20)) {

+ var text = marker.createChild('div', 'device-mode-ruler-text');

+ text.textContent = i * 5;

+ text.addEventListener('click', this._onMarkerClick.bind(this, i * 5), false);

}

- var dipSize = size * zoomFactor / this._scale;

- var count = Math.ceil(dipSize / 5);

- var step = 1;

- if (this._scale < 0.8)

- step = 2;

- if (this._scale < 0.6)

- step = 4;

- if (this._scale < 0.4)

- step = 8;

- if (this._scale < 0.2)

- step = 16;

- if (this._scale < 0.1)

- step = 32;

- for (var i = count; i < this._count; i++) {

- if (!(i % step))

- this._contentElement.lastChild.remove();

- }

- for (var i = this._count; i < count; i++) {

- if (i % step)

- continue;

- var marker = this._contentElement.createChild("div", "device-mode-ruler-marker");

- if (i) {

- if (this._horizontal)

- marker.style.left = (5 * i) * this._scale / zoomFactor + "px";

- else

- marker.style.top = (5 * i) * this._scale / zoomFactor + "px";

- if (!(i % 20)) {

- var text = marker.createChild("div", "device-mode-ruler-text");

- text.textContent = i * 5;

- text.addEventListener("click", this._onMarkerClick.bind(this, i * 5), false);

- }

- if (!(i % 10))

- marker.classList.add("device-mode-ruler-marker-large");

- else if (!(i % 5))

- marker.classList.add("device-mode-ruler-marker-medium");

- }

- this._count = count;

- return Promise.resolve();

- },

- /**

- * @param {number} size

- */

- _onMarkerClick: function(size)

- {

- this._applyCallback.call(null, size);

- },

- __proto__: WebInspector.VBox.prototype

+ }

+ if (!(i % 10))

+ marker.classList.add('device-mode-ruler-marker-large');

+ else if (!(i % 5))

+ marker.classList.add('device-mode-ruler-marker-medium');

+ }

+ this._count = count;

+ return Promise.resolve();

+ }

+ /**

+ * @param {number} size

+ */

+ _onMarkerClick(size) {

+ this._applyCallback.call(null, size);

+ }

};