[DevTools] Initial implementation of device modes.

Source/devtools/front_end/emulation/ResponsiveDesignView.js

Index: Source/devtools/front_end/emulation/ResponsiveDesignView.js
diff --git a/Source/devtools/front_end/emulation/ResponsiveDesignView.js b/Source/devtools/front_end/emulation/ResponsiveDesignView.js
index ec7800b1fbcb38105267e6ece17f8ea8d4771275..fbe6fca500b1ad9729c9c0bfdcce9efb09933764 100644
--- a/Source/devtools/front_end/emulation/ResponsiveDesignView.js
+++ b/Source/devtools/front_end/emulation/ResponsiveDesignView.js
@@ -14,6 +14,8 @@ 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);
@@ -27,6 +29,7 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
     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);
 
@@ -80,7 +83,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         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");
@@ -130,6 +133,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         delete this._cachedCssCanvasHeight;
         delete this._cachedCssHeight;
         delete this._cachedCssWidth;
+        delete this._cachedDeviceInsets;
         delete this._cachedZoomFactor;
         delete this._cachedViewport;
         delete this._cachedDrawContentsSize;
@@ -183,22 +187,24 @@ WebInspector.ResponsiveDesignView.prototype = {
 
     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;
     },
@@ -226,7 +232,7 @@ WebInspector.ResponsiveDesignView.prototype = {
     _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);
@@ -475,7 +481,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         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;
@@ -497,9 +503,16 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         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();
         }
 
@@ -533,6 +546,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         this._cachedCssCanvasHeight = cssCanvasHeight;
         this._cachedCssHeight = cssHeight;
         this._cachedCssWidth = cssWidth;
+        this._cachedDeviceInsets = deviceInsets;
         this._cachedZoomFactor = zoomFactor;
         this._cachedViewport = this._viewport;
         this._cachedDrawContentsSize = this._drawContentsSize;
@@ -550,7 +564,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         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();
@@ -609,7 +623,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         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");
 
@@ -632,9 +646,11 @@ WebInspector.ResponsiveDesignView.prototype = {
         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");
@@ -644,13 +660,15 @@ WebInspector.ResponsiveDesignView.prototype = {
         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);
 
@@ -725,6 +743,21 @@ WebInspector.ResponsiveDesignView.prototype = {
     },
 
     /**
+     * @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)