third_party/WebKit/Source/devtools/front_end/emulation/ResponsiveDesignView.js - Issue 1647653003: [DevTools] Remove old responsive design v1 code.

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

Issue 1647653003: [DevTools] Remove old responsive design v1 code. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

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/OverridesView.js ('k') | third_party/WebKit/Source/devtools/front_end/emulation/module.json » ('j') | third_party/WebKit/Source/devtools/front_end/main/Main.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

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

deleted file mode 100644

index f329a37c384067034c78355d988b5413dc8f3bbb..0000000000000000000000000000000000000000

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

+++ /dev/null

@@ -1,890 +0,0 @@

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

-// found in the LICENSE file.

-/**

- * @constructor

- * @extends {WebInspector.VBox}

- * @implements {WebInspector.OverridesSupport.PageResizer}

- * @implements {WebInspector.TargetManager.Observer}

- * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder

- */

-WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)

- WebInspector.VBox.call(this);

- this.setMinimumSize(150, 150);

- this.element.classList.add("responsive-design-view");

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

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

- this._responsiveDesignContainer = new WebInspector.VBox();

- this._uiInitialized = false;

- this._inspectedPagePlaceholder = inspectedPagePlaceholder;

- inspectedPagePlaceholder.show(this.element);

- this._enabled = false;

- this._viewport = { scrollX: 0, scrollY: 0, contentsWidth: 0, contentsHeight: 0, pageScaleFactor: 1, minimumPageScaleFactor: 1, maximumPageScaleFactor: 1 };

- this._drawContentsSize = true;

- this._deviceInsets = new Insets(0, 0, 0, 0);

- this._pageContainerSrcset = "";

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

- this._pageScaleFactorThrottler = new WebInspector.Throttler(50);

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

- WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.EmulationStateChanged, this._emulationEnabledChanged, this);

- WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Page);

- this._emulationEnabledChanged();

-};

-// Measured in DIP.

-WebInspector.ResponsiveDesignView.RulerWidth = 26;

-WebInspector.ResponsiveDesignView.RulerHeight = 22;

-WebInspector.ResponsiveDesignView.RulerTopHeight = 11;

-WebInspector.ResponsiveDesignView.RulerBottomHeight = 9;

-WebInspector.ResponsiveDesignView.prototype = {

- _ensureUIInitialized: function()

- {

- if (this._uiInitialized)

- return;

- this._uiInitialized = true;

- this._createToolbar();

- this._canvasContainer = new WebInspector.Widget();

- this._canvasContainer.element.classList.add("responsive-design");

- this._canvasContainer.show(this._responsiveDesignContainer.element);

- this._canvas = this._canvasContainer.element.createChild("canvas", "fill responsive-design-canvas");

- this._mediaInspectorContainer = this._canvasContainer.element.createChild("div", "responsive-design-media-container");

- WebInspector.Tooltip.addNativeOverrideContainer(this._mediaInspectorContainer);

- var deviceWidthSetting = WebInspector.overridesSupport.settings.deviceWidth;

- this._mediaInspector = new WebInspector.MediaQueryInspector(deviceWidthSetting.get.bind(deviceWidthSetting), deviceWidthSetting.set.bind(deviceWidthSetting));

- this._updateMediaQueryInspector();

- WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);

- this._slidersContainer = this._canvasContainer.element.createChild("div", "vbox responsive-design-sliders-container");

- var genericDeviceOutline = this._slidersContainer.createChild("div", "responsive-design-generic-outline-container");

- genericDeviceOutline.createChild("div", "responsive-design-generic-outline");

- var widthSlider = this._slidersContainer.createChild("div", "responsive-design-slider-width");

- widthSlider.createChild("div", "responsive-design-thumb-handle");

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

- var heightSlider = this._slidersContainer.createChild("div", "responsive-design-slider-height");

- heightSlider.createChild("div", "responsive-design-thumb-handle");

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

- var cornerSlider = this._slidersContainer.createChild("div", "responsive-design-slider-corner");

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

- this._pageContainer = this._slidersContainer.createChild("div", "vbox flex-auto responsive-design-page-container");

- this._pageContainerImage = this._pageContainer.createChild("img", "responsive-design-page-container-image hidden");

- this._pageContainerImage.addEventListener("load", this._onPageContainerImageLoaded.bind(this, true), false);

- this._pageContainerImage.addEventListener("error", this._onPageContainerImageLoaded.bind(this, false), false);

- // Page scale controls.

- this._pageScaleContainer = this._canvasContainer.element.createChild("div", "hbox responsive-design-page-scale-container");

- this._decreasePageScaleButton = this._pageScaleContainer.createChild("button", "responsive-design-page-scale-button responsive-design-page-scale-decrease");

- this._decreasePageScaleButton.createChild("div", "glyph");

- this._decreasePageScaleButton.tabIndex = -1;

- this._decreasePageScaleButton.addEventListener("click", this._pageScaleButtonClicked.bind(this, false), false);

- this._pageScaleLabel = this._pageScaleContainer.createChild("label", "responsive-design-page-scale-label");

- this._pageScaleLabel.title = WebInspector.UIString("Shift + drag to change page scale");

- this._pageScaleLabel.addEventListener("dblclick", this._resetPageScale.bind(this), false);

- this._increasePageScaleButton = this._pageScaleContainer.createChild("button", "responsive-design-page-scale-button responsive-design-page-scale-increase");

- this._increasePageScaleButton.tabIndex = -1;

- this._increasePageScaleButton.createChild("div", "glyph");

- this._increasePageScaleButton.addEventListener("click", this._pageScaleButtonClicked.bind(this, true), false);

- this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Events.CountUpdated, this._updateMediaQueryInspectorButton, this);

- this._overridesWarningUpdated();

- },

- /**

- * @override

- * @param {!WebInspector.Target} target

- */

- targetAdded: function(target)

- {

- if (this._target)

- return;

- this._target = target;

- target.registerEmulationDispatcher(new WebInspector.EmulationDispatcher(this));

- },

- /**

- * @override

- * @param {!WebInspector.Target} target

- */

- targetRemoved: function(target)

- {

- },

- _invalidateCache: function()

- {

- delete this._cachedScale;

- delete this._cachedCssCanvasWidth;

- delete this._cachedCssCanvasHeight;

- delete this._cachedCssHeight;

- delete this._cachedCssWidth;

- delete this._cachedCssPageWidth;

- delete this._cachedCssPageHeight;

- delete this._cachedDeviceInsets;

- delete this._cachedZoomFactor;

- delete this._cachedViewport;

- delete this._cachedDrawContentsSize;

- delete this._cachedMediaInspectorHeight;

- delete this._availableSize;

- },

- _emulationEnabledChanged: function()

- {

- var enabled = WebInspector.overridesSupport.emulationEnabled();

- if (enabled && !this._enabled) {

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

- this._invalidateCache();

- this._ignoreResize = true;

- this._ensureUIInitialized();

- this._enabled = true;

- this._mediaInspector.setEnabled(true);

- this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();

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

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

- delete this._ignoreResize;

- this.onResize();

- } else if (!enabled && this._enabled) {

- this._mediaInspector.setEnabled(false);

- this._invalidateCache();

- this._ignoreResize = true;

- this._enabled = false;

- this._scale = 1;

- this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();

- this._responsiveDesignContainer.detach();

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

- delete this._ignoreResize;

- this.onResize();

- }

- },

- /**

- * @override

- * WebInspector.OverridesSupport.PageResizer override.

- * @param {number} dipWidth

- * @param {number} dipHeight

- * @param {number} scale

- * @param {number} pageWidth

- * @param {number} pageHeight

- */

- update: function(dipWidth, dipHeight, scale, pageWidth, pageHeight)

- {

- this._scale = scale;

- this._dipWidth = dipWidth ? Math.max(dipWidth, 1) : 0;

- this._dipHeight = dipHeight ? Math.max(dipHeight, 1) : 0;

- this._pageWidth = pageWidth ? Math.max(pageWidth, 1) : 0;

- this._pageHeight = pageHeight ? Math.max(pageHeight, 1) : 0;

- this._updateUI();

- },

- updatePageResizer: function()

- {

- var available = this._availableDipSize();

- WebInspector.overridesSupport.setPageResizer(this, available.size, available.insets);

- },

- /**

- * @return {!{size: !Size, insets: !Insets}}

- */

- _availableDipSize: function()

- {

- if (typeof this._availableSize === "undefined") {

- if (!this._enabled)

- return {size: new Size(1, 1), insets: new Insets(0, 0, 0, 0)};

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

- var rect = this._canvasContainer.element.getBoundingClientRect();

- var rulerTotalHeight = this._rulerTotalHeightDIP();

- this._availableSize = {size: new Size(Math.max(rect.width * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth, 1),

- Math.max(rect.height * zoomFactor - rulerTotalHeight, 1)),

- insets: this._deviceInsets};

- }

- return this._availableSize;

- },

- /**

- * @param {!Element} element

- * @param {boolean} x

- * @param {boolean} y

- * @return {!WebInspector.ResizerWidget}

- */

- _createResizer: function(element, x, y)

- {

- var resizer = new WebInspector.ResizerWidget();

- resizer.addElement(element);

- resizer.setCursor(x && y ? "nwse-resize" : (x ? "ew-resize" : "ns-resize"));

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

- resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeUpdate, this._onResizeUpdate.bind(this, x, y));

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

- return resizer;

- },

- /**

- * @param {!WebInspector.Event} event

- */

- _onResizeStart: function(event)

- {

- this._drawContentsSize = false;

- var available = this._availableDipSize().size;

- this._slowPositionStart = null;

- this._resizeStart = { x: this._dipWidth || available.width, y : this._dipHeight || available.height };

- this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.FixedScaleRequested, true);

- this._updateUI();

- },

- /**

- * @param {boolean} x

- * @param {boolean} y

- * @param {!WebInspector.Event} event

- */

- _onResizeUpdate: function(x, y, 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;

- }

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

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

- var newSizeX = this._resizeStart.x + dipOffsetX;

- newSizeX = Math.round(newSizeX / (this._scale || 1));

- newSizeX = Math.max(Math.min(newSizeX, WebInspector.OverridesSupport.MaxDeviceSize), 1);

- var newSizeY = this._resizeStart.y + dipOffsetY;

- newSizeY = Math.round(newSizeY / (this._scale || 1));

- newSizeY = Math.max(Math.min(newSizeY, WebInspector.OverridesSupport.MaxDeviceSize), 1);

- var requested = {};

- if (x)

- requested.width = newSizeX;

- if (y)

- requested.height = newSizeY;

- this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.ResizeRequested, requested);

- },

- /**

- * @param {!WebInspector.Event} event

- */

- _onResizeEnd: function(event)

- {

- this._drawContentsSize = true;

- this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.FixedScaleRequested, false);

- delete this._resizeStart;

- this._updateUI();

- },

- /**

- * Draws canvas of the specified css size in DevTools page space.

- * Canvas contains grid and rulers.

- * @param {number} cssCanvasWidth

- * @param {number} cssCanvasHeight

- * @param {number} rulerHeight

- */

- _drawCanvas: function(cssCanvasWidth, cssCanvasHeight, rulerHeight)

- {

- if (!this._enabled)

- return;

- var canvas = this._canvas;

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

- canvas.style.width = cssCanvasWidth + "px";

- canvas.style.height = cssCanvasHeight + "px";

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

- var dipCanvasWidth = cssCanvasWidth * zoomFactor;

- var dipCanvasHeight = cssCanvasHeight * zoomFactor;

- var deviceScaleFactor = window.devicePixelRatio;

- canvas.width = deviceScaleFactor * cssCanvasWidth;

- canvas.height = deviceScaleFactor * cssCanvasHeight;

- context.scale(canvas.width / dipCanvasWidth, canvas.height / dipCanvasHeight);

- context.font = "11px " + WebInspector.fontFamily();

- const backgroundColor = "rgb(102, 102, 102)";

- const lightLineColor = "rgb(132, 132, 132)";

- const darkLineColor = "rgb(114, 114, 114)";

- const rulerColor = "rgb(125, 125, 125)";

- const textColor = "rgb(186, 186, 186)";

- const contentsSizeColor = "rgba(0, 0, 0, 0.3)";

- var scale = (this._scale || 1) * this._viewport.pageScaleFactor;

- var rulerScale = 0.5;

- while (Math.abs(rulerScale * scale - 1) > Math.abs((rulerScale + 0.5) * scale - 1))

- rulerScale += 0.5;

- var gridStep = 50 * scale * rulerScale;

- var gridSubStep = 10 * scale * rulerScale;

- var rulerSubStep = 5 * scale * rulerScale;

- var rulerStepCount = 20;

- var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth;

- var dipGridWidth = dipCanvasWidth - rulerWidth;

- var dipGridHeight = dipCanvasHeight - rulerHeight;

- var dipScrollX = this._viewport.scrollX * scale;

- var dipScrollY = this._viewport.scrollY * scale;

- context.translate(rulerWidth, rulerHeight);

- context.fillStyle = backgroundColor;

- context.fillRect(0, 0, dipGridWidth, dipGridHeight);

- context.translate(0.5, 0.5);

- context.strokeStyle = rulerColor;

- context.fillStyle = textColor;

- context.lineWidth = 1;

- // Draw horizontal ruler.

- context.save();

- var minXIndex = Math.ceil(dipScrollX / rulerSubStep);

- var maxXIndex = Math.floor((dipScrollX + dipGridWidth) / rulerSubStep);

- if (minXIndex) {

- context.beginPath();

- context.moveTo(0, -rulerHeight);

- context.lineTo(0, 0);

- context.stroke();

- }

- context.translate(-dipScrollX, 0);

- for (var index = minXIndex; index <= maxXIndex; index++) {

- var x = index * rulerSubStep;

- var height = WebInspector.ResponsiveDesignView.RulerHeight * 0.25;

- if (!(index % (rulerStepCount / 4)))

- height = WebInspector.ResponsiveDesignView.RulerHeight * 0.5;

- if (!(index % (rulerStepCount / 2)))

- height = rulerHeight;

- if (!(index % rulerStepCount)) {

- context.save();

- context.translate(x, 0);

- context.fillText(Math.round(x / scale), 2, -rulerHeight + 10);

- context.restore();

- height = rulerHeight;

- }

- context.beginPath();

- context.moveTo(x, - height);

- context.lineTo(x, 0);

- context.stroke();

- }

- context.restore();

- // Draw vertical ruler.

- context.save();

- context.translate(0, this._deviceInsets.top);

- var minYIndex = Math.ceil(dipScrollY / rulerSubStep);

- var maxYIndex = Math.floor((dipScrollY + dipGridHeight) / rulerSubStep);

- context.translate(0, -dipScrollY);

- for (var index = minYIndex; index <= maxYIndex; index++) {

- var y = index * rulerSubStep;

- var x = -rulerWidth * 0.25;

- if (!(index % (rulerStepCount / 4)))

- x = -rulerWidth * 0.5;

- if (!(index % (rulerStepCount / 2)))

- x = -rulerWidth * 0.75;

- if (!(index % rulerStepCount)) {

- context.save();

- context.translate(0, y);

- context.rotate(-Math.PI / 2);

- context.fillText(Math.round(y / scale), 2, -rulerWidth + 10);

- context.restore();

- x = -rulerWidth;

- }

- context.beginPath();

- context.moveTo(x, y);

- context.lineTo(0, y);

- context.stroke();

- }

- context.restore();

- // Draw grid.

- drawGrid(dipScrollX, dipScrollY + this._deviceInsets.top, darkLineColor, gridSubStep);

- drawGrid(dipScrollX, dipScrollY + this._deviceInsets.top, lightLineColor, gridStep);

- /**

- * @param {number} scrollX

- * @param {number} scrollY

- * @param {string} color

- * @param {number} step

- */

- function drawGrid(scrollX, scrollY, color, step)

- {

- context.strokeStyle = color;

- var minX = Math.ceil(scrollX / step) * step;

- var maxX = Math.floor((scrollX + dipGridWidth) / step) * step - minX;

- var minY = Math.ceil(scrollY / step) * step;

- var maxY = Math.floor((scrollY + dipGridHeight) / step) * step - minY;

- context.save();

- context.translate(minX - scrollX, 0);

- for (var x = 0; x <= maxX; x += step) {

- context.beginPath();

- context.moveTo(x, 0);

- context.lineTo(x, dipGridHeight);

- context.stroke();

- }

- context.restore();

- context.save();

- context.translate(0, minY - scrollY);

- for (var y = 0; y <= maxY; y += step) {

- context.beginPath();

- context.moveTo(0, y);

- context.lineTo(dipGridWidth, y);

- context.stroke();

- }

- context.restore();

- }

- context.translate(-0.5, -0.5);

- // Draw contents size.

- var pageScaleAvailable = WebInspector.overridesSupport.settings.emulateMobile.get() || WebInspector.overridesSupport.settings.emulateTouch.get();

- if (this._drawContentsSize && pageScaleAvailable) {

- context.save();

- context.fillStyle = contentsSizeColor;

- var visibleContentsWidth = Math.max(0, Math.min(dipGridWidth, this._viewport.contentsWidth * scale - dipScrollX));

- var visibleContentsHeight = Math.max(0, Math.min(dipGridHeight, this._viewport.contentsHeight * scale - dipScrollY + this._deviceInsets.top));

- context.translate(0, this._deviceInsets.top);

- context.fillRect(0, Math.max(-this._deviceInsets.top, -dipScrollY), visibleContentsWidth, visibleContentsHeight);

- context.restore();

- }

- },

- /**

- * @return {number}

- */

- _rulerTotalHeightDIP: function()

- {

- var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._mediaInspector.element.offsetHeight : 0;

- if (!mediaInspectorHeight)

- return WebInspector.ResponsiveDesignView.RulerHeight;

- return WebInspector.ResponsiveDesignView.RulerTopHeight + WebInspector.ResponsiveDesignView.RulerBottomHeight + mediaInspectorHeight * WebInspector.zoomManager.zoomFactor();

- },

- _updateUI: function()

- {

- if (!this._enabled || !this.isShowing())

- return;

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

- var rect = this._canvas.parentElement.getBoundingClientRect();

- var availableDip = this._availableDipSize().size;

- var cssCanvasWidth = rect.width;

- var cssCanvasHeight = rect.height;

- var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._mediaInspector.element.offsetHeight : 0;

- var rulerTotalHeight = this._rulerTotalHeightDIP();

- this._mediaInspector.setAxisTransform(this._viewport.scrollX, this._scale * this._viewport.pageScaleFactor);

- if (this._cachedZoomFactor !== zoomFactor || this._cachedMediaInspectorHeight !== mediaInspectorHeight) {

- var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor + "px";

- var cssRulerHeight = (mediaInspectorHeight ? WebInspector.ResponsiveDesignView.RulerTopHeight : WebInspector.ResponsiveDesignView.RulerHeight) / zoomFactor + "px";

- var cssCanvasOffset = rulerTotalHeight / zoomFactor + "px";

- this._slidersContainer.style.left = cssRulerWidth;

- this._slidersContainer.style.top = cssCanvasOffset;

- this._warningInfobar.element.style.height = cssCanvasOffset;

- this._pageScaleContainer.style.top = cssCanvasOffset;

- this._mediaInspectorContainer.style.left = cssRulerWidth;

- this._mediaInspectorContainer.style.marginTop = cssRulerHeight;

- this._warningInfobar.element.style.left = cssRulerWidth;

- }

- var cssWidth = (this._dipWidth ? this._dipWidth : availableDip.width) / zoomFactor;

- var cssHeight = (this._dipHeight ? this._dipHeight : availableDip.height) / zoomFactor;

- var cssPageWidth = (this._pageWidth ? this._pageWidth : availableDip.width) / zoomFactor;

- var cssPageHeight = (this._pageHeight ? this._pageHeight : availableDip.height) / zoomFactor;

- var deviceInsets = new Insets(this._deviceInsets.left * this._scale / zoomFactor, this._deviceInsets.top * this._scale / zoomFactor, this._deviceInsets.right * this._scale / zoomFactor, this._deviceInsets.bottom * this._scale / zoomFactor);

- cssWidth += deviceInsets.left + deviceInsets.right;

- cssHeight += deviceInsets.top + deviceInsets.bottom;

- var insetsChanged = !deviceInsets.isEqual(this._cachedDeviceInsets);

- if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHeight || insetsChanged) {

- this._slidersContainer.style.width = cssWidth + "px";

- this._slidersContainer.style.height = cssHeight + "px";

- this._pageContainer.style.paddingLeft = deviceInsets.left + "px";

- this._pageContainer.style.paddingTop = deviceInsets.top + "px";

- this._pageContainer.style.paddingRight = deviceInsets.right + "px";

- this._pageContainer.style.paddingBottom = deviceInsets.bottom + "px";

- this._inspectedPagePlaceholder.onResize();

- }

- if (this._cachedCssPageWidth !== cssPageWidth || this._cachedCssPageHeight !== cssPageHeight) {

- this._pageContainerImage.style.width = cssPageWidth + "px";

- this._pageContainerImage.style.height = cssPageHeight + "px";

- }

- this._loadPageContainerImage();

- var pageScaleVisible = cssWidth + this._pageScaleContainerWidth + WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor <= rect.width;

- this._pageScaleContainer.classList.toggle("hidden", !pageScaleVisible);

- var viewportChanged = !this._cachedViewport

- || this._cachedViewport.scrollX !== this._viewport.scrollX || this._cachedViewport.scrollY !== this._viewport.scrollY

- || this._cachedViewport.contentsWidth !== this._viewport.contentsWidth || this._cachedViewport.contentsHeight !== this._viewport.contentsHeight

- || this._cachedViewport.pageScaleFactor !== this._viewport.pageScaleFactor

- || this._cachedViewport.minimumPageScaleFactor !== this._viewport.minimumPageScaleFactor

- || this._cachedViewport.maximumPageScaleFactor !== this._viewport.maximumPageScaleFactor;

- var canvasInvalidated = viewportChanged || this._drawContentsSize !== this._cachedDrawContentsSize || this._cachedScale !== this._scale ||

- this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanvasHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor ||

- this._cachedMediaInspectorHeight !== mediaInspectorHeight || insetsChanged;

- if (canvasInvalidated)

- this._drawCanvas(cssCanvasWidth, cssCanvasHeight, rulerTotalHeight);

- if (viewportChanged) {

- this._pageScaleLabel.textContent = WebInspector.UIString("%.1f", this._viewport.pageScaleFactor);

- this._decreasePageScaleButton.title = WebInspector.UIString("Scale down (minimum %.1f)", this._viewport.minimumPageScaleFactor);

- this._decreasePageScaleButton.disabled = this._viewport.pageScaleFactor <= this._viewport.minimumPageScaleFactor;

- this._increasePageScaleButton.title = WebInspector.UIString("Scale up (maximum %.1f)", this._viewport.maximumPageScaleFactor);

- this._increasePageScaleButton.disabled = this._viewport.pageScaleFactor >= this._viewport.maximumPageScaleFactor;

- }

- this._cachedScale = this._scale;

- this._cachedCssCanvasWidth = cssCanvasWidth;

- this._cachedCssCanvasHeight = cssCanvasHeight;

- this._cachedCssHeight = cssHeight;

- this._cachedCssWidth = cssWidth;

- this._cachedCssPageWidth = cssPageWidth;

- this._cachedCssPageHeight = cssPageHeight;

- this._cachedDeviceInsets = deviceInsets;

- this._cachedZoomFactor = zoomFactor;

- this._cachedViewport = this._viewport;

- this._cachedDrawContentsSize = this._drawContentsSize;

- this._cachedMediaInspectorHeight = mediaInspectorHeight;

- },

- _loadPageContainerImage: function()

- {

- if (this._pageContainerImage.getAttribute("srcset") === this._pageContainerSrcset)

- return;

- this._pageContainerImage.setAttribute("srcset", this._pageContainerSrcset);

- if (!this._pageContainerSrcset)

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

- },

- /**

- * @param {boolean} success

- */

- _onPageContainerImageLoaded: function(success)

- {

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

- },

- onResize: function()

- {

- if (!this._enabled || this._ignoreResize)

- return;

- var oldSize = this._availableSize;

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

- this._pageScaleContainerWidth = this._pageScaleContainer.offsetWidth;

- delete this._availableSize;

- var newSize = this._availableDipSize();

- if (!oldSize || !newSize.size.isEqual(oldSize.size) || !newSize.insets.isEqual(oldSize.insets))

- this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged, newSize);

- this._updateUI();

- this._inspectedPagePlaceholder.onResize();

- },

- _onZoomChanged: function()

- {

- this._updateUI();

- },

- _createToolbar: function()

- {

- this._toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");

- this._createButtonsSection();

- this._createDeviceSection();

- this._toolbarElement.createChild("div", "responsive-design-separator");

- this._createNetworkSection();

- this._toolbarElement.createChild("div", "responsive-design-separator");

- var moreButtonContainer = this._toolbarElement.createChild("div", "responsive-design-more-button-container");

- var moreButton = moreButtonContainer.createChild("button", "responsive-design-more-button");

- moreButton.title = WebInspector.UIString("More overrides");

- moreButton.addEventListener("click", this._showEmulationInDrawer.bind(this), false);

- moreButton.textContent = "\u2026";

- },

- _createButtonsSection: function()

- {

- var buttonsToolbar = new WebInspector.Toolbar("", this._toolbarElement);

- buttonsToolbar.makeVertical();

- buttonsToolbar.setColor("white");

- buttonsToolbar.setToggledColor("rgb(105, 194, 236)");

- buttonsToolbar.element.classList.add("responsive-design-section", "responsive-design-section-buttons");

- var resetButton = new WebInspector.ToolbarButton(WebInspector.UIString("Reset all overrides"), "clear-toolbar-item");

- buttonsToolbar.appendToolbarItem(resetButton);

- resetButton.addEventListener("click", WebInspector.overridesSupport.reset, WebInspector.overridesSupport);

- // Media Query Inspector.

- this._toggleMediaInspectorButton = new WebInspector.ToolbarToggle(WebInspector.UIString("Media queries not found"), "waterfall-toolbar-item");

- this._toggleMediaInspectorButton.setToggled(this._showMediaQueryInspectorSetting.get());

- this._toggleMediaInspectorButton.setEnabled(false);

- this._toggleMediaInspectorButton.addEventListener("click", this._onToggleMediaInspectorButtonClick, this);

- this._showMediaQueryInspectorSetting.addChangeListener(this._updateMediaQueryInspector, this);

- buttonsToolbar.appendToolbarItem(this._toggleMediaInspectorButton);

- },

- _createDeviceSection: function()

- {

- var deviceSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-device");

- deviceSection.createChild("div", "responsive-design-section-decorator");

- // Device.

- var deviceElement = deviceSection.createChild("div", "responsive-design-suite responsive-design-suite-top").createChild("div");

- var fieldsetElement = deviceElement.createChild("fieldset");

- fieldsetElement.createChild("label").textContent = WebInspector.UIString("Device");

- var deviceSelect = new WebInspector.DeviceSelect(createElementWithClass("button", "responsive-design-icon responsive-design-icon-swap"), this._deviceModeSelected.bind(this));

- fieldsetElement.appendChild(deviceSelect.element);

- deviceSelect.element.classList.add("responsive-design-device-select");

- var detailsElement = deviceSection.createChild("div", "responsive-design-suite");

- // Dimensions.

- var screenElement = detailsElement.createChild("div", "");

- fieldsetElement = screenElement.createChild("fieldset");

- var emulateResolutionCheckbox = WebInspector.SettingsUI.createSettingCheckbox("", WebInspector.overridesSupport.settings.emulateResolution, true, WebInspector.UIString("Emulate screen resolution"));

- themeCheckbox(emulateResolutionCheckbox);

- fieldsetElement.appendChild(emulateResolutionCheckbox);

- fieldsetElement.createChild("label").textContent = WebInspector.UIString("Screen");

- var resolutionFieldset = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateResolution);

- fieldsetElement.appendChild(resolutionFieldset);

- resolutionFieldset.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013")));

- resolutionFieldset.createTextChild("\u00D7");

- resolutionFieldset.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013")));

- // Device pixel ratio.

- detailsElement.createChild("div", "responsive-design-suite-separator");

- var dprElement = detailsElement.createChild("div", "");

- var resolutionFieldset2 = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateResolution);

- dprElement.appendChild(resolutionFieldset2);

- var dprButton = resolutionFieldset2.createChild("div", "responsive-design-icon responsive-design-icon-dpr");

- dprButton.title = WebInspector.UIString("Device pixel ratio");

- resolutionFieldset2.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "1.9em", WebInspector.OverridesSupport.deviceScaleFactorValidator, true, true, WebInspector.UIString("\u2013")));

- // Fit to window.

- detailsElement.createChild("div", "responsive-design-suite-separator");

- var fitToWindowElement = detailsElement.createChild("div", "");

- fieldsetElement = fitToWindowElement.createChild("fieldset");

- var fitCheckbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Zoom to fit"), WebInspector.overridesSupport.settings.deviceFitWindow, true, WebInspector.UIString("Zoom to fit available space"))

- fieldsetElement.appendChild(fitCheckbox);

- themeCheckbox(fitCheckbox);

- /**

- * @param {!Element} checkbox

- */

- function themeCheckbox(checkbox)

- {

- checkbox.checkColor = "rgb(255, 156, 0)";

- checkbox.backgroundColor = "rgb(102, 102, 102)";

- checkbox.borderColor = "rgb(45, 45, 45)";

- }

- },

- _createNetworkSection: function()

- {

- var networkSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-network");

- networkSection.createChild("div", "responsive-design-section-decorator");

- var networkLabel = networkSection.createChild("div", "responsive-design-suite responsive-design-suite-top").createChild("div").createChild("label");

- networkLabel.textContent = WebInspector.UIString("Network");

- var showDrawerButton = networkSection.createChild("div", "responsive-design-suite").createChild("a");

- showDrawerButton.textContent = WebInspector.UIString("Configure throttling");

- var action = WebInspector.actionRegistry.action("network.show-config");

- showDrawerButton.addEventListener("click", action.execute.bind(action));

- },

- _onToggleMediaInspectorButtonClick: function()

- {

- this._showMediaQueryInspectorSetting.set(!this._toggleMediaInspectorButton.toggled());

- },

- _updateMediaQueryInspector: function()

- {

- this._toggleMediaInspectorButton.setToggled(this._showMediaQueryInspectorSetting.get());

- if (this._mediaInspector.isShowing() === this._showMediaQueryInspectorSetting.get())

- return;

- if (this._mediaInspector.isShowing())

- this._mediaInspector.detach();

- else

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

- this.onResize();

- },

- /**

- * @param {!WebInspector.Event} event

- */

- _updateMediaQueryInspectorButton: function(event)

- {

- var count = /** @type {number} */ (event.data);

- this._toggleMediaInspectorButton.setEnabled(!!count);

- this._toggleMediaInspectorButton.setTitle(!count ? WebInspector.UIString("Media queries not found") :

- WebInspector.UIString((count === 1 ? "%d media query found" : "%d media queries found"), count));

- },

- _overridesWarningUpdated: function()

- {

- var message = WebInspector.overridesSupport.warningMessage();

- if (!message) {

- if (this._warningInfobar) {

- this._warningInfobar.dispose();

- delete this._warningInfobar;

- }

- if (!this._warningInfobar) {

- this._warningInfobar = WebInspector.Infobar.create(WebInspector.Infobar.Type.Warning, message, WebInspector.moduleSetting("disableOverridesWarning"));

- if (this._warningInfobar) {

- this._warningInfobar.element.classList.add("responsive-design-warning");

- this._warningInfobar.setCloseCallback(WebInspector.overridesSupport.clearWarningMessage.bind(WebInspector.overridesSupport));

- this._canvasContainer.element.appendChild(this._warningInfobar.element);

- }

- } else {

- this._warningInfobar.setText(message);

- }

- },

- _showEmulationInDrawer: function()

- {

- WebInspector.Revealer.reveal(WebInspector.overridesSupport);

- },

- /**

- * @param {?WebInspector.EmulatedDevice} device

- * @param {?WebInspector.EmulatedDevice.Mode} mode

- */

- _deviceModeSelected: function(device, mode)

- {

- this._pageContainerSrcset = "";

- if (device && mode) {

- var orientation = device.orientationByName(mode.orientation);

- this._deviceInsets = mode.insets;

- WebInspector.overridesSupport.settings.screenOrientationOverride.set(mode.orientation == WebInspector.EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary");

- this._pageContainerSrcset = device.modeImage(mode);

- } else {

- this._deviceInsets = new Insets(0, 0, 0, 0);

- WebInspector.overridesSupport.settings.screenOrientationOverride.set("");

- }

- this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.InsetsChanged, this._deviceInsets);

- },

- /**

- * @param {!EmulationAgent.Viewport=} viewport

- */

- _viewportChanged: function(viewport)

- {

- if (viewport) {

- this._viewport = viewport;

- this._viewport.minimumPageScaleFactor = Math.max(0.1, this._viewport.minimumPageScaleFactor);

- this._viewport.minimumPageScaleFactor = Math.min(this._viewport.minimumPageScaleFactor, this._viewport.pageScaleFactor);

- this._viewport.maximumPageScaleFactor = Math.min(10, this._viewport.maximumPageScaleFactor);

- this._viewport.maximumPageScaleFactor = Math.max(this._viewport.maximumPageScaleFactor, this._viewport.pageScaleFactor);

- this._viewportChangedThrottler.schedule(this._updateUIThrottled.bind(this));

- }

- },

- /**

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

- */

- _updateUIThrottled: function()

- {

- this._updateUI();

- return Promise.resolve();

- },

- /**

- * @param {boolean} increase

- * @param {!Event} event

- */

- _pageScaleButtonClicked: function(increase, event)

- {

- this._pageScaleFactorThrottler.schedule(updatePageScaleFactor.bind(this));

- /**

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

- * @this {WebInspector.ResponsiveDesignView}

- */

- function updatePageScaleFactor()

- {

- if (this._target && this._viewport) {

- var value = this._viewport.pageScaleFactor;

- value = increase ? value * 1.1 : value / 1.1;

- value = Math.min(this._viewport.maximumPageScaleFactor, value);

- value = Math.max(this._viewport.minimumPageScaleFactor, value);

- this._target.emulationAgent().setPageScaleFactor(value);

- }

- return Promise.resolve();

- }

- },

- _resetPageScale: function()

- {

- this._pageScaleFactorThrottler.schedule(updatePageScaleFactor.bind(this));

- /**

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

- * @this {WebInspector.ResponsiveDesignView}

- */

- function updatePageScaleFactor()

- {

- if (this._target && this._viewport && this._viewport.minimumPageScaleFactor <= 1 && this._viewport.maximumPageScaleFactor >= 1)

- this._target.emulationAgent().setPageScaleFactor(1);

- return Promise.resolve();

- }

- },

- __proto__: WebInspector.VBox.prototype

-};

-/**

- * @constructor

- * @implements {EmulationAgent.Dispatcher}

- * @param {!WebInspector.ResponsiveDesignView} responsiveDesignView

- */

-WebInspector.EmulationDispatcher = function(responsiveDesignView)

- this._responsiveDesignView = responsiveDesignView;

-WebInspector.EmulationDispatcher.prototype = {

- /**

- * @override

- * @param {!EmulationAgent.Viewport=} viewport

- */

- viewportChanged: function(viewport)

- {

- this._responsiveDesignView._viewportChanged(viewport);

- }