[DevTools] Initial implementation of device modes.

Source/devtools/front_end/emulation/ResponsiveDesignView.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // 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");
+    if (Runtime.experiments.isEnabled("deviceModes"))
+        this.element.classList.add("device-modes");
     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._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.
@@ skipping 33 matching lines @@
         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");
+        this._pageContainer = this._slidersContainer.createChild("div", "vbox flex-auto responsive-design-page-container");
 
         // 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("For a simpler way to change the current page scale, hold down Shift and drag with your mouse.");
@@ skipping 29 matching lines @@
     {
     },
 
     _invalidateCache: function()
     {
         delete this._cachedScale;
         delete this._cachedCssCanvasWidth;
         delete this._cachedCssCanvasHeight;
         delete this._cachedCssHeight;
         delete this._cachedCssWidth;
+        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();
@@ skipping 33 matching lines @@
     update: function(dipWidth, dipHeight, scale)
     {
         this._scale = scale;
         this._dipWidth = dipWidth ? Math.max(dipWidth, 1) : 0;
         this._dipHeight = dipHeight ? Math.max(dipHeight, 1) : 0;
         this._updateUI();
     },
 
     updatePageResizer: function()
     {
-        WebInspector.overridesSupport.setPageResizer(this, this._availableDipSize());
+        var available = this._availableDipSize();
+        WebInspector.overridesSupport.setPageResizer(this, available.size, available.insets);
     },
 
     /**
-     * @return {!Size}
+     * @return {!{size: !Size, insets: !Insets}}
      */
     _availableDipSize: function()
     {
         if (typeof this._availableSize === "undefined") {
             if (!this._enabled)
-                return new Size(1, 1);
+                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 = new Size(Math.max(rect.width * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth, 1),
-                                           Math.max(rect.height * zoomFactor - rulerTotalHeight, 1));
+            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();
+        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
@@ skipping 228 matching lines @@
         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();
+        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;
         }
 
         var cssWidth = (this._dipWidth ? this._dipWidth : availableDip.width) / zoomFactor;
         var cssHeight = (this._dipHeight ? this._dipHeight : availableDip.height) / zoomFactor;
-        if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHeight) {
+        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;
+        if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHeight || !deviceInsets.isEqual(this._cachedDeviceInsets)) {
             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();
         }
 
         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
@@ skipping 13 matching lines @@
             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._cachedDeviceInsets = deviceInsets;
         this._cachedZoomFactor = zoomFactor;
         this._cachedViewport = this._viewport;
         this._cachedDrawContentsSize = this._drawContentsSize;
         this._cachedMediaInspectorHeight = mediaInspectorHeight;
     },
 
     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 (!newSize.isEqual(oldSize))
+        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();
     },
 
@@ skipping 38 matching lines @@
     {
         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 deviceSelectElement = WebInspector.OverridesUI.createDeviceSelect();
+        var deviceSelectElement = WebInspector.OverridesUI.createDeviceSelect("", this._deviceModeSelected.bind(this));
         fieldsetElement.appendChild(deviceSelectElement);
         deviceSelectElement.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);
 
         var resolutionIcon = fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-resolution");
         resolutionIcon.title = WebInspector.UIString("Screen resolution");
         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")));
 
-        var swapButton = resolutionFieldset.createChild("button", "responsive-design-icon responsive-design-icon-swap");
-        swapButton.title = WebInspector.UIString("Swap dimensions");
-        swapButton.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
+        if (!Runtime.experiments.isEnabled("deviceModes")) {
+            var swapButton = resolutionFieldset.createChild("button", "responsive-design-icon responsive-design-icon-swap");
+            swapButton.title = WebInspector.UIString("Swap dimensions");
+            swapButton.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
+        }
 
         // 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")));
+        var width = Runtime.experiments.isEnabled("deviceModes") ? "2.5em" : "1.9em";
+        resolutionFieldset2.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, width, 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("Fit"), WebInspector.overridesSupport.settings.deviceFitWindow, true, WebInspector.UIString("Zoom to fit available space"))
+        var fitTitle = Runtime.experiments.isEnabled("deviceModes") ? WebInspector.UIString("Zoom to fit") : WebInspector.UIString("Fit");
+        var fitCheckbox = WebInspector.SettingsUI.createSettingCheckbox(fitTitle, 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)";
@@ skipping 54 matching lines @@
         this._warningMessage.textContent = message;
         this._warningInfobar.setVisible(!!message);
     },
 
     _showEmulationInDrawer: function()
     {
         WebInspector.Revealer.reveal(WebInspector.overridesSupport);
     },
 
     /**
+     * @param {?WebInspector.EmulatedDevice} device
+     * @param {?WebInspector.EmulatedDevice.Mode} mode
+     */
+    _deviceModeSelected: function(device, mode)
+    {
+        if (device && mode) {
+            var orientation = device.orientationByName(mode.orientation);
+            this._deviceInsets = new Insets(mode.pageRect.left, mode.pageRect.top, orientation.width - mode.pageRect.left - mode.pageRect.width, orientation.height - mode.pageRect.top - mode.pageRect.height);
+        } else {
+            this._deviceInsets = new Insets(0, 0, 0, 0);
+        }
+        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);
@@ skipping 68 matching lines @@
 WebInspector.EmulationDispatcher.prototype = {
     /**
      * @override
      * @param {!EmulationAgent.Viewport=} viewport
      */
     viewportChanged: function(viewport)
     {
         this._responsiveDesignView._viewportChanged(viewport);
     }
 }