[DevTools] Promote Device Mode v2 to default experiments.

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.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
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
  */
 WebInspector.DeviceModeView = function(inspectedPagePlaceholder)
@@ skipping 147 matching lines @@
         var resizable = this._model.isResizable();
         if (resizable !== this._cachedResizable) {
             this._resizerElement.classList.toggle("hidden", !resizable);
             this._cachedResizable = resizable;
         }
 
         this._toolbar.update();
         this._loadScreenImage(this._model.screenImage());
         if (resizePagePlaceholder)
             this._inspectedPagePlaceholder.onResize();
-        this._mediaInspector.setAxisTransform(-cssScreenRect.left, this._model.fitScale());
+        this._mediaInspector.setAxisTransform(-cssScreenRect.left / this._model.fitScale(), this._model.fitScale());
     },
 
     /**
      * @param {string} srcset
      */
     _loadScreenImage: function(srcset)
     {
         if (this._screenImage.getAttribute("srcset") === srcset)
             return;
         this._screenImage.setAttribute("srcset", srcset);
@@ skipping 218 matching lines @@
         select.addEventListener("change", optionSelected.bind(this), false);
         return select;
 
         /**
          * @this {WebInspector.DeviceModeView.Toolbar}
          */
         function deviceListChanged()
         {
             select.removeChildren();
 
-            addOption.call(this, select, WebInspector.DeviceModeModel.Type.Mobile, null, WebInspector.UIString("Responsive"));
+            var defaultGroup = select.createChild("optgroup");
+            defaultGroup.label = WebInspector.UIString("Default");
+            addOption.call(this, defaultGroup, WebInspector.DeviceModeModel.Type.Mobile, null, WebInspector.UIString("Responsive"));
 
-            var group = select.createChild("optgroup");
-            group.label = WebInspector.UIString("Devices");
-            addGroup.call(this, group, WebInspector.emulatedDevicesList.custom());
-            addGroup.call(this, group, WebInspector.emulatedDevicesList.standard());
+            var devicesGroup = select.createChild("optgroup");
+            devicesGroup.label = WebInspector.UIString("Devices");
+            addGroup.call(this, devicesGroup, WebInspector.emulatedDevicesList.standard());
+
+            var customGroup = select.createChild("optgroup");
+            customGroup.label = WebInspector.UIString("Custom");
+            addGroup.call(this, customGroup, WebInspector.emulatedDevicesList.custom());
+            var editCustomOption = new Option(WebInspector.UIString("Edit\u2026"), WebInspector.UIString("Edit\u2026"));
+            editCustomOption.edit = true;
+            customGroup.appendChild(editCustomOption);
         }
 
         /**
          * @param {!Element} parent
          * @param {!Array<!WebInspector.EmulatedDevice>} devices
          * @this {WebInspector.DeviceModeView.Toolbar}
          */
         function addGroup(parent, devices)
         {
             devices = devices.filter(function(d) { return d.show(); });
@@ skipping 18 matching lines @@
 
             if (type === this._model.type() && device === this._model.device())
                 select.selectedIndex = Array.prototype.slice.call(select.options).indexOf(option);
         }
 
         /**
          * @this {WebInspector.DeviceModeView.Toolbar}
          */
         function optionSelected()
         {
-            this._emulateDeviceSelectOption(select.options[select.selectedIndex]);
+            var option = select.options[select.selectedIndex];
+            if (option.edit) {
+                WebInspector.emulatedDevicesList.revealCustomSetting();
+                this._updateDeviceSelectedIndex();
+            } else {
+                this._emulateDeviceSelectOption(option);
+            }
         }
     },
 
+    _updateDeviceSelectedIndex: function()
+    {
+        for (var i = 0; i < this._deviceSelect.options.length; ++i) {
+            if (this._deviceSelect.options[i].device === this._model.device())
+                this._deviceSelect.selectedIndex = i;
+        }
+    },
+
     /**
      * @param {!Option} option
      */
     _emulateDeviceSelectOption: function(option)
     {
         this._model.emulate(option.type, option.device, option.device ? (this._lastMode.get(option.device) || option.device.modes[0]) : null);
     },
 
     /**
      * @param {!WebInspector.Event} event
@@ skipping 124 matching lines @@
                 this._deviceScaleFactorItem.setText(String(deviceScaleFactor));
                 this._cachedDeviceScaleFactor = deviceScaleFactor;
             }
         }
 
         if (this._model.device() !== this._cachedModelDevice) {
             var device = this._model.device();
 
             var modeCount = device ? device.modes.length : 0;
             this._modeToolbar.element.classList.toggle("hidden", modeCount < 2);
-
-            for (var i = 0; i < this._deviceSelect.options.length; ++i) {
-                if (this._deviceSelect.options[i].device === this._model.device())
-                    this._deviceSelect.selectedIndex = i;
-            }
+            this._updateDeviceSelectedIndex();
 
             this._cachedModelDevice = device;
         }
 
         if (this._model.device() && this._model.mode())
             this._lastMode.set(/** @type {!WebInspector.EmulatedDevice} */ (this._model.device()), /** @type {!WebInspector.EmulatedDevice.Mode} */ (this._model.mode()));
 
         if (this._model.type() !== WebInspector.DeviceModeModel.Type.Desktop)
             this._lastDevice = this._model.device();
     }
 }