third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js - Issue 1641513003: [DevTools] Split DeviceModeView.js into view, toolbar and wrapper.

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

Issue 1641513003: [DevTools] Split DeviceModeView.js into view, toolbar and wrapper. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@device-mode-cleanup-remove-files

Patch Set: Created 4 years, 11 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/DeviceModeModel.js ('k') | third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.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/DeviceModeToolbar.js

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

similarity index 52%

copy from third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

copy to third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js

index da378087eae4001530e8ecb6998b29cec3c2d809..00f87218f0d7cb1222314ef56780900e31f7dd55 100644

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

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

@@ -1,354 +1,14 @@

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

// found in the LICENSE file.

/**

- * @constructor

- * @extends {WebInspector.VBox}

- */

-WebInspector.DeviceModeView = function()

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

- this.setMinimumSize(150, 150);

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

- // TODO(dgozman): remove CountUpdated event.

- this._showMediaInspectorSetting = WebInspector.settings.createSetting("showMediaQueryInspector", false);

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

- this._showRulersSetting = WebInspector.settings.createSetting("emulation.showRulers", false);

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

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

-};

-WebInspector.DeviceModeView.prototype = {

- _createUI: function()

- {

- this._toolbar = new WebInspector.DeviceModeView.Toolbar(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._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._onScreenImageLoaded.bind(this, true), false);

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

- this._cornerResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-corner-resizer");

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

- this._createResizer(this._cornerResizerElement, true, true);

- this._widthResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-width-resizer");

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

- this._createResizer(this._widthResizerElement, true, false);

- this._heightResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-height-resizer");

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

- this._createResizer(this._heightResizerElement, false, true);

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

- this._heightResizerElement.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();

- }

- },

- toggleDeviceMode: function()

- {

- this._toolbar.toggleDeviceMode();

- },

- /**

- * @param {!Element} element

- * @param {boolean} width

- * @param {boolean} height

- * @return {!WebInspector.ResizerWidget}

- */

- _createResizer: function(element, width, height)

- {

- var resizer = new WebInspector.ResizerWidget();

- resizer.addElement(element);

- resizer.setCursor(width && height ? "nwse-resize" : (width ? "ew-resize" : "ns-resize"));

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

- resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeUpdate, this._onResizeUpdate.bind(this, width, height));

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

- return resizer;

- },

- /**

- * @param {!WebInspector.Event} event

- */

- _onResizeStart: function(event)

- {

- this._slowPositionStart = null;

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

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

- },

- /**

- * @param {boolean} width

- * @param {boolean} height

- * @param {!WebInspector.Event} event

- */

- _onResizeUpdate: function(width, height, 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 (width) {

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

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

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

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

- this._model.setWidth(newWidth);

- }

- if (height) {

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

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

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

- {

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

- this._screenArea.style.left = cssScreenRect.left + "px";

- this._screenArea.style.top = cssScreenRect.top + "px";

- this._screenArea.style.width = cssScreenRect.width + "px";

- this._screenArea.style.height = cssScreenRect.height + "px";

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

- updateRulers = true;

- callDoResize = true;

- this._cachedCssScreenRect = cssScreenRect;

- }

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

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

- this._pageArea.style.left = cssVisiblePageRect.left + "px";

- this._pageArea.style.top = cssVisiblePageRect.top + "px";

- this._pageArea.style.width = cssVisiblePageRect.width + "px";

- this._pageArea.style.height = cssVisiblePageRect.height + "px";

- callDoResize = true;

- this._cachedCssVisiblePageRect = cssVisiblePageRect;

- }

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

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

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

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

- this._cornerResizerElement.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._contentClip, 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._loadScreenImage(this._model.screenImage());

- this._mediaInspector.setAxisTransform(-cssScreenRect.left * zoomFactor / this._model.scale(), this._model.scale());

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

- }

- if (contentAreaResized)

- this._contentAreaResized();

- },

- /**

- * @param {string} srcset

- */

- _loadScreenImage: function(srcset)

- {

- if (this._screenImage.getAttribute("srcset") === srcset)

- return;

- this._screenImage.setAttribute("srcset", srcset);

- if (!srcset)

- this._screenImage.classList.toggle("hidden", true);

- },

- /**

- * @param {boolean} success

- */

- _onScreenImageLoaded: function(success)

- {

- this._screenImage.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._widthResizerElement.classList.contains("hidden");

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

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

- this._handleWidth = this._widthResizerElement.offsetWidth;

- this._handleHeight = this._heightResizerElement.offsetHeight;

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

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

- },

- _zoomChanged: function()

- {

- delete this._handleWidth;

- delete this._handleHeight;

- if (this.isShowing()) {

- this._measureHandles();

- this._contentAreaResized();

- }

- },

- /**

- * @override

- */

- onResize: function()

- {

- if (this.isShowing())

- this._contentAreaResized();

- },

- /**

- * @override

- */

- wasShown: function()

- {

- this._measureHandles();

- this._mediaInspector.setEnabled(true);

- this._toolbar.restore();

- },

- /**

- * @override

- */

- willHide: function()

- {

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

- this._mediaInspector.setEnabled(false);

- },

- __proto__: WebInspector.VBox.prototype

-/**

* @param {!WebInspector.DeviceModeModel} model

* @param {!WebInspector.Setting} showMediaInspectorSetting

* @param {!WebInspector.Setting} showRulersSetting

* @constructor

-WebInspector.DeviceModeView.Toolbar = function(model, showMediaInspectorSetting, showRulersSetting)

+WebInspector.DeviceModeToolbar = function(model, showMediaInspectorSetting, showRulersSetting)

{

this._model = model;

this._showMediaInspectorSetting = showMediaInspectorSetting;

@@ -386,7 +46,7 @@ WebInspector.DeviceModeView.Toolbar = function(model, showMediaInspectorSetting,

this._persistenceSetting = WebInspector.settings.createSetting("emulation.deviceModeValue", {device: "", orientation: "", mode: ""});

}

-WebInspector.DeviceModeView.Toolbar.prototype = {

+WebInspector.DeviceModeToolbar.prototype = {

/**

* @param {!WebInspector.Toolbar} toolbar

@@ -728,7 +388,7 @@ WebInspector.DeviceModeView.Toolbar.prototype = {

/**

* @param {!Array<!WebInspector.EmulatedDevice>} devices

- * @this {WebInspector.DeviceModeView.Toolbar}

+ * @this {WebInspector.DeviceModeToolbar}

function appendGroup(devices)

{

@@ -741,7 +401,7 @@ WebInspector.DeviceModeView.Toolbar.prototype = {

/**

- * @this {WebInspector.DeviceModeView.Toolbar}

+ * @this {WebInspector.DeviceModeToolbar}

_deviceListChanged: function()

{

@@ -904,205 +564,3 @@ WebInspector.DeviceModeView.Toolbar.prototype = {

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

}

-/**

- * @constructor

- * @extends {WebInspector.VBox}

- * @param {boolean} horizontal

- * @param {function(number)} applyCallback

- */

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

- WebInspector.VBox.call(this);

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

- this._horizontal = horizontal;

- this._scale = 1;

- this._offset = 0;

- this._count = 0;

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

- this._applyCallback = applyCallback;

-WebInspector.DeviceModeView.Ruler.prototype = {

- /**

- * @param {number} offset

- * @param {number} scale

- */

- render: function(offset, 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));

- },

- /**

- * @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;

- }

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

- 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

-/**

- * @constructor

- * @implements {WebInspector.ActionDelegate}

- */

-WebInspector.DeviceModeView.ActionDelegate = function()

-WebInspector.DeviceModeView.ActionDelegate.prototype = {

- /**

- * @override

- * @param {!WebInspector.Context} context

- * @param {string} actionId

- * @return {boolean}

- */

- handleAction: function(context, actionId)

- {

- if (WebInspector.DeviceModeView._wrapperInstance) {

- if (actionId === "emulation.toggle-device-mode") {

- WebInspector.DeviceModeView._wrapperInstance._toggleDeviceMode();

- return true;

- }

- if (actionId === "emulation.request-app-banner") {

- WebInspector.DeviceModeView._wrapperInstance._requestAppBanner();

- return true;

- }

- return false;

- }

-/**

- * @extends {WebInspector.VBox}

- * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder

- * @constructor

- */

-WebInspector.DeviceModeView.Wrapper = function(inspectedPagePlaceholder)

- WebInspector.VBox.call(this);

- WebInspector.DeviceModeView._wrapperInstance = this;

- this._inspectedPagePlaceholder = inspectedPagePlaceholder;

- /** @type {?WebInspector.DeviceModeView} */

- this._deviceModeView = null;

- this._toggleDeviceModeAction = WebInspector.actionRegistry.action("emulation.toggle-device-mode");

- this._showDeviceModeSetting = WebInspector.settings.createSetting("emulation.showDeviceMode", false);

- this._showDeviceModeSetting.addChangeListener(this._update.bind(this, false));

- this._update(true);

-/** @type {!WebInspector.DeviceModeView.Wrapper} */

-WebInspector.DeviceModeView._wrapperInstance;

-WebInspector.DeviceModeView.Wrapper.prototype = {

- _toggleDeviceMode: function()

- {

- this._showDeviceModeSetting.set(!this._showDeviceModeSetting.get());

- },

- /**

- * @param {boolean} force

- */

- _update: function(force)

- {

- this._toggleDeviceModeAction.setToggled(this._showDeviceModeSetting.get());

- if (!force) {

- var showing = this._deviceModeView && this._deviceModeView.isShowing();

- if (this._showDeviceModeSetting.get() === showing)

- return;

- }

- if (this._showDeviceModeSetting.get()) {

- if (!this._deviceModeView)

- this._deviceModeView = new WebInspector.DeviceModeView();

- this._deviceModeView.show(this.element);

- this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();

- this._inspectedPagePlaceholder.show(this._deviceModeView.element);

- } else {

- if (this._deviceModeView)

- this._deviceModeView.detach();

- this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();

- this._inspectedPagePlaceholder.show(this.element);

- }

- },

- _requestAppBanner: function()

- {

- this._deviceModeView._model.requestAppBanner();

- },

- __proto__: WebInspector.VBox.prototype