[DevTools] Do not scale device image when "fit" is off.

BUG=544799

Review URL: https://codereview.chromium.org/1406053004

Cr-Commit-Position: refs/heads/master@{#355953}

2 files changed, 24 insertions, 4 deletions

diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/OverridesSupport.js b/third_party/WebKit/Source/devtools/front_end/emulation/OverridesSupport.js
index e7e7d38..eabbacb 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/OverridesSupport.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/OverridesSupport.js
@@ -94,8 +94,10 @@ WebInspector.OverridesSupport.PageResizer.prototype = {
      * @param {number} dipWidth
      * @param {number} dipHeight
      * @param {number} scale
+     * @param {number} pageWidth
+     * @param {number} pageHeight
      */
-    update: function(dipWidth, dipHeight, scale) { }
+    update: function(dipWidth, dipHeight, scale, pageWidth, pageHeight) { }
 };
 
 /** @typedef {{width: number, height: number, deviceScaleFactor: number, userAgent: string, touch: boolean, mobile: boolean}} */
@@ -529,7 +531,7 @@ WebInspector.OverridesSupport.prototype = {
         if (!this.emulationEnabled()) {
             this._deviceMetricsThrottler.schedule(clearDeviceMetricsOverride.bind(this));
             if (this._pageResizer)
-                this._pageResizer.update(0, 0, 1);
+                this._pageResizer.update(0, 0, 1, 0, 0);
             return;
         }
 
@@ -556,7 +558,10 @@ WebInspector.OverridesSupport.prototype = {
                 }
             }
 
-            this._pageResizer.update(Math.min(dipWidth * scale, available.width - insets.left * scale), Math.min(dipHeight * scale, available.height - insets.top * scale), scale);
+            this._pageResizer.update(
+                Math.min(dipWidth * scale, available.width - insets.left * scale), Math.min(dipHeight * scale, available.height - insets.top * scale),
+                scale,
+                (dipWidth + insets.left + insets.right) * scale, (dipHeight + insets.top + insets.bottom) * scale);
             if (scale === 1 && available.width >= dipWidth && available.height >= dipHeight) {
                 // When we have enough space, no page size override is required. This will speed things up and remove lag.
                 overrideWidth = 0;
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/ResponsiveDesignView.js b/third_party/WebKit/Source/devtools/front_end/emulation/ResponsiveDesignView.js
index 119938e..5a05325 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/ResponsiveDesignView.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/ResponsiveDesignView.js
@@ -136,6 +136,8 @@ WebInspector.ResponsiveDesignView.prototype = {
         delete this._cachedCssCanvasHeight;
         delete this._cachedCssHeight;
         delete this._cachedCssWidth;
+        delete this._cachedCssPageWidth;
+        delete this._cachedCssPageHeight;
         delete this._cachedDeviceInsets;
         delete this._cachedZoomFactor;
         delete this._cachedViewport;
@@ -179,12 +181,16 @@ WebInspector.ResponsiveDesignView.prototype = {
      * @param {number} dipWidth
      * @param {number} dipHeight
      * @param {number} scale
+     * @param {number} pageWidth
+     * @param {number} pageHeight
      */
-    update: function(dipWidth, dipHeight, scale)
+    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();
     },
 
@@ -510,6 +516,8 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         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;
@@ -524,6 +532,11 @@ WebInspector.ResponsiveDesignView.prototype = {
             this._inspectedPagePlaceholder.onResize();
         }
 
+        if (this._cachedCssPageWidth !== cssPageHeight || 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;
@@ -556,6 +569,8 @@ WebInspector.ResponsiveDesignView.prototype = {
         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;