[DevTools] More UX fixes in Device Mode.

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js

 // Copyright 2015 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
  * @param {function()} updateCallback
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.DeviceModeModel = function(updateCallback)
@@ skipping 27 matching lines @@
         this._heightSetting.set(WebInspector.DeviceModeModel.MinDeviceSize);
     if (this._heightSetting.get() > WebInspector.DeviceModeModel.MaxDeviceSize)
         this._heightSetting.set(WebInspector.DeviceModeModel.MaxDeviceSize);
     this._heightSetting.addChangeListener(this._heightSettingChanged, this);
 
     this._uaSetting = WebInspector.settings.createSetting("emulation.deviceUA", WebInspector.DeviceModeModel.UA.Mobile);
     this._uaSetting.addChangeListener(this._uaSettingChanged, this);
     this._deviceScaleFactorSetting = WebInspector.settings.createSetting("emulation.deviceScaleFactor", 0);
     this._deviceScaleFactorSetting.addChangeListener(this._deviceScaleFactorSettingChanged, this);
 
-    this._deviceOutlineSetting = WebInspector.settings.createSetting("emulation.deviceOutline", false);
+    this._deviceOutlineSetting = WebInspector.settings.moduleSetting("emulation.showDeviceOutline");
     this._deviceOutlineSetting.addChangeListener(this._deviceOutlineSettingChanged, this);
 
     /** @type {!WebInspector.DeviceModeModel.Type} */
     this._type = WebInspector.DeviceModeModel.Type.None;
     /** @type {?WebInspector.EmulatedDevice} */
     this._device = null;
     /** @type {?WebInspector.EmulatedDevice.Mode} */
     this._mode = null;
     /** @type {number} */
     this._fitScale = 1;
@@ skipping 478 matching lines @@
         var screenOrientationAngle = screenOrientation === "landscapePrimary" ? 90 : 0;
 
         this._appliedDeviceSize = screenSize;
         this._appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRatio;
         this._screenRect = new WebInspector.Rect(
             Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2),
             outline.top * scale,
             screenSize.width * scale,
             screenSize.height * scale);
         this._outlineRect = new WebInspector.Rect(
-            Math.max(0, this._screenRect.left - outline.left * scale),
+            this._screenRect.left - outline.left * scale,
             0,
             (outline.left + screenSize.width + outline.right) * scale,
             (outline.top + screenSize.height + outline.bottom) * scale);
         this._visiblePageRect = new WebInspector.Rect(
             positionX * scale,
             positionY * scale,
             Math.min(pageWidth * scale, this._availableSize.width - this._screenRect.left - positionX * scale),
             Math.min(pageHeight * scale, this._availableSize.height - this._screenRect.top - positionY * scale));
         this._scale = scale;
 
@@ skipping 44 matching lines @@
 
     /**
      * @param {boolean} touchEnabled
      * @param {boolean} mobile
      */
     _applyTouch: function(touchEnabled, mobile)
     {
         WebInspector.MultitargetTouchModel.instance().setTouchEnabled(touchEnabled, mobile);
     }
 }