[DevTools] Add device type to custom device presets.

BUG=587841 Review URL: https://codereview.chromium.org/1720973002 Cr-Commit-Position: refs/heads/master@{#376821}
binaryage · Feb 22, 2016 · 4a73f2e · 4a73f2e
1 parent 9ae3c2c
commit 4a73f2e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 39 deletions.
diff --git a/front_end/emulation/DeviceModeModel.js b/front_end/emulation/DeviceModeModel.js
@@ -76,10 +76,10 @@ WebInspector.DeviceModeModel.Type = {
 
 /** @enum {string} */
 WebInspector.DeviceModeModel.UA = {
-    Mobile: "Mobile",
-    MobileNoTouch: "MobileNoTouch",
-    Desktop: "Desktop",
-    DesktopTouch: "DesktopTouch"
+    Mobile: WebInspector.UIString("Mobile"),
+    MobileNoTouch: WebInspector.UIString("Mobile (no touch)"),
+    Desktop: WebInspector.UIString("Desktop"),
+    DesktopTouch: WebInspector.UIString("Desktop (touch)")
 }
 
 WebInspector.DeviceModeModel.MinDeviceSize = 50;

diff --git a/front_end/emulation/DeviceModeToolbar.js b/front_end/emulation/DeviceModeToolbar.js
@@ -235,10 +235,10 @@ WebInspector.DeviceModeToolbar.prototype = {
     _appendUserAgentMenuItems: function(contextMenu)
     {
         var uaSetting = this._model.uaSetting();
-        appendUAItem(WebInspector.UIString("Mobile"), WebInspector.DeviceModeModel.UA.Mobile);
-        appendUAItem(WebInspector.UIString("Mobile (no touch)"), WebInspector.DeviceModeModel.UA.MobileNoTouch);
-        appendUAItem(WebInspector.UIString("Desktop"), WebInspector.DeviceModeModel.UA.Desktop);
-        appendUAItem(WebInspector.UIString("Desktop (touch)"), WebInspector.DeviceModeModel.UA.DesktopTouch);
+        appendUAItem(WebInspector.DeviceModeModel.UA.Mobile, WebInspector.DeviceModeModel.UA.Mobile);
+        appendUAItem(WebInspector.DeviceModeModel.UA.MobileNoTouch, WebInspector.DeviceModeModel.UA.MobileNoTouch);
+        appendUAItem(WebInspector.DeviceModeModel.UA.Desktop, WebInspector.DeviceModeModel.UA.Desktop);
+        appendUAItem(WebInspector.DeviceModeModel.UA.DesktopTouch, WebInspector.DeviceModeModel.UA.DesktopTouch);
 
         /**
          * @param {string} title
@@ -506,14 +506,7 @@ WebInspector.DeviceModeToolbar.prototype = {
 
         var uaType = this._model.appliedUserAgentType();
         if (uaType !== this._cachedUaType) {
-            var uaTitle = WebInspector.UIString("Desktop");
-            if (uaType === WebInspector.DeviceModeModel.UA.Mobile)
-                uaTitle = WebInspector.UIString("Mobile");
-            if (uaType === WebInspector.DeviceModeModel.UA.MobileNoTouch)
-                uaTitle = WebInspector.UIString("Mobile (no touch)");
-            if (uaType === WebInspector.DeviceModeModel.UA.DesktopTouch)
-                uaTitle = WebInspector.UIString("Desktop (touch)");
-            this._uaItem.setText(uaTitle);
+            this._uaItem.setText(uaType);
             this._cachedUaType = uaType;
         }
 

diff --git a/front_end/emulation/DevicesSettingsTab.js b/front_end/emulation/DevicesSettingsTab.js
@@ -154,7 +154,12 @@ WebInspector.DevicesSettingsTab.prototype = {
         device.modes = [];
         device.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, insets: new Insets(0, 0, 0, 0), images: null});
         device.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Horizontal, insets: new Insets(0, 0, 0, 0), images: null});
-
+        device.capabilities = [];
+        var uaType = editor.control("ua-type").value;
+        if (uaType === WebInspector.DeviceModeModel.UA.Mobile || uaType === WebInspector.DeviceModeModel.UA.MobileNoTouch)
+            device.capabilities.push(WebInspector.EmulatedDevice.Capability.Mobile);
+        if (uaType === WebInspector.DeviceModeModel.UA.Mobile || uaType === WebInspector.DeviceModeModel.UA.DesktopTouch)
+            device.capabilities.push(WebInspector.EmulatedDevice.Capability.Touch);
         if (isNew)
             this._emulatedDevicesList.addCustomDevice(device);
         else
@@ -177,6 +182,12 @@ WebInspector.DevicesSettingsTab.prototype = {
         editor.control("height").value = this._toNumericInputValue(device.vertical.height);
         editor.control("scale").value = this._toNumericInputValue(device.deviceScaleFactor);
         editor.control("user-agent").value = device.userAgent;
+        var uaType;
+        if (device.mobile())
+            uaType = device.touch() ? WebInspector.DeviceModeModel.UA.Mobile : WebInspector.DeviceModeModel.UA.MobileNoTouch;
+        else
+            uaType = device.touch() ? WebInspector.DeviceModeModel.UA.DesktopTouch : WebInspector.DeviceModeModel.UA.Desktop;
+        editor.control("ua-type").value = uaType;
         return editor;
     },
 
@@ -193,16 +204,18 @@ WebInspector.DevicesSettingsTab.prototype = {
         var content = editor.contentElement();
 
         var fields = content.createChild("div", "devices-edit-fields");
-        fields.appendChild(editor.createInput("title", "text", WebInspector.UIString("Device name"), titleValidator));
+        fields.createChild("div", "hbox").appendChild(editor.createInput("title", "text", WebInspector.UIString("Device name"), titleValidator));
         var screen = fields.createChild("div", "hbox");
-        var width = editor.createInput("width", "text", WebInspector.UIString("Width"), sizeValidator);
-        width.classList.add("device-edit-small");
-        screen.appendChild(width);
-        var height = editor.createInput("height", "text", WebInspector.UIString("height"), sizeValidator);
-        height.classList.add("device-edit-small");
-        screen.appendChild(height);
-        screen.appendChild(editor.createInput("scale", "text", WebInspector.UIString("Device pixel ratio"), scaleValidator));
-        fields.appendChild(editor.createInput("user-agent", "text", WebInspector.UIString("User agent string"), userAgentValidator));
+        screen.appendChild(editor.createInput("width", "text", WebInspector.UIString("Width"), sizeValidator));
+        screen.appendChild(editor.createInput("height", "text", WebInspector.UIString("height"), sizeValidator));
+        var dpr = editor.createInput("scale", "text", WebInspector.UIString("Device pixel ratio"), scaleValidator);
+        dpr.classList.add("device-edit-fixed");
+        screen.appendChild(dpr);
+        var ua = fields.createChild("div", "hbox");
+        ua.appendChild(editor.createInput("user-agent", "text", WebInspector.UIString("User agent string"), () => true));
+        var uaType = editor.createSelect("ua-type", [WebInspector.DeviceModeModel.UA.Mobile, WebInspector.DeviceModeModel.UA.MobileNoTouch, WebInspector.DeviceModeModel.UA.Desktop, WebInspector.DeviceModeModel.UA.DesktopTouch], () => true);
+        uaType.classList.add("device-edit-fixed");
+        ua.appendChild(uaType);
 
         return editor;
 
@@ -239,17 +252,6 @@ WebInspector.DevicesSettingsTab.prototype = {
         {
             return WebInspector.DeviceModeModel.deviceScaleFactorValidator(input.value);
         }
-
-        /**
-         * @param {*} item
-         * @param {number} index
-         * @param {!HTMLInputElement|!HTMLSelectElement} input
-         * @return {boolean}
-         */
-        function userAgentValidator(item, index, input)
-        {
-            return true;
-        }
     },
 
     __proto__: WebInspector.VBox.prototype

diff --git a/front_end/emulation/devicesSettingsTab.css b/front_end/emulation/devicesSettingsTab.css
@@ -78,6 +78,10 @@
     padding: 3px;
 }
 
-.devices-edit-fields input.device-edit-small {
-    flex: 0 0 80px;
+.devices-edit-fields .device-edit-fixed {
+    flex: 0 0 140px;
+}
+
+.devices-edit-fields select {
+    margin: 8px 5px 0 5px;
 }