[DevTools] Initial implementation of device modes.

Source/devtools/front_end/emulation/OverridesView.js

 /*
  * Copyright (C) 2014 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 20 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.OverridesView = function()
 {
     WebInspector.VBox.call(this);
     this.setMinimumSize(0, 30);
     this.registerRequiredCSS("emulation/overrides.css");
     this.element.classList.add("overrides-view");
+    if (Runtime.experiments.isEnabled("deviceModes"))
+        this.element.classList.add("device-modes");
 
     this._tabbedPane = new WebInspector.TabbedPane();
     this._tabbedPane.setShrinkableTabs(false);
     this._tabbedPane.setVerticalTabLayout(true);
 
     new WebInspector.OverridesView.DeviceTab().appendAsTab(this._tabbedPane);
     new WebInspector.OverridesView.MediaTab().appendAsTab(this._tabbedPane);
     new WebInspector.OverridesView.NetworkTab().appendAsTab(this._tabbedPane);
     new WebInspector.OverridesView.SensorsTab().appendAsTab(this._tabbedPane);
 
@@ skipping 141 matching lines @@
 
 WebInspector.OverridesView.DeviceTab.prototype = {
     _createDeviceElement: function()
     {
         var fieldsetElement = createElement("fieldset");
         fieldsetElement.id = "metrics-override-section";
 
         var deviceModelElement = fieldsetElement.createChild("p", "overrides-device-model-section");
         deviceModelElement.createChild("span").textContent = WebInspector.UIString("Model:");
 
-        deviceModelElement.appendChild(WebInspector.OverridesUI.createDeviceSelect());
+        deviceModelElement.appendChild(WebInspector.OverridesUI.createDeviceSelect(""));
 
         var emulateResolutionCheckbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Emulate screen resolution"), WebInspector.overridesSupport.settings.emulateResolution, true);
         fieldsetElement.appendChild(emulateResolutionCheckbox);
         var resolutionFieldset = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateResolution);
         fieldsetElement.appendChild(resolutionFieldset);
 
         var tableElement = resolutionFieldset.createChild("table");
         var rowElement = tableElement.createChild("tr");
         var cellElement = rowElement.createChild("td");
         cellElement.createTextChild(WebInspector.UIString("Resolution:"));
         cellElement = rowElement.createChild("td");
 
         var widthOverrideInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "80px", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013"));
         cellElement.appendChild(widthOverrideInput);
-        this._swapDimensionsElement = cellElement.createChild("button", "overrides-swap");
-        this._swapDimensionsElement.createTextChild(" \u21C4 "); // RIGHTWARDS ARROW OVER LEFTWARDS ARROW.
-        this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensions");
-        this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
-        this._swapDimensionsElement.tabIndex = -1;
+        if (!Runtime.experiments.isEnabled("deviceModes")) {
+            var swapDimensionsElement = cellElement.createChild("button", "overrides-swap");
+            swapDimensionsElement.createTextChild(" \u21C4 "); // RIGHTWARDS ARROW OVER LEFTWARDS ARROW.
+            swapDimensionsElement.title = WebInspector.UIString("Swap dimensions");
+            swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
+            swapDimensionsElement.tabIndex = -1;
+        }
         var heightOverrideInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "80px", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013"));
         cellElement.appendChild(heightOverrideInput);
 
         rowElement = tableElement.createChild("tr");
         cellElement = rowElement.createChild("td");
         cellElement.colSpan = 4;
 
         rowElement = tableElement.createChild("tr");
         rowElement.title = WebInspector.UIString("Ratio between a device's physical pixels and device-independent pixels.");
         rowElement.createChild("td").createTextChild(WebInspector.UIString("Device pixel ratio:"));
@@ skipping 404 matching lines @@
      * @override
      * @param {!Object} overridesSupport
      * @return {!Promise}
      */
     reveal: function(overridesSupport)
     {
         WebInspector.inspectorView.showViewInDrawer("emulation");
         return Promise.resolve();
     }
 }