[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 181 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());
+        var rotateButton = createElement("button");
+        rotateButton.textContent = " \u21C4 ";
+        var deviceSelect = new WebInspector.DeviceSelect(rotateButton);
+        deviceModelElement.appendChild(deviceSelect.element);
 
         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;
         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 385 matching lines @@
      * @override
      * @param {!Object} overridesSupport
      * @return {!Promise}
      */
     reveal: function(overridesSupport)
     {
         WebInspector.inspectorView.showViewInDrawer("emulation");
         return Promise.resolve();
     }
 }