[DevTools] Use ListWidget to render DevicesSettingsTab.

third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.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}
+ * @implements {WebInspector.ListWidget.Delegate}
  */
 WebInspector.DevicesSettingsTab = function()
 {
     WebInspector.VBox.call(this);
     this.element.classList.add("settings-tab-container");
     this.element.classList.add("devices-settings-tab");
     this.registerRequiredCSS("emulation/devicesSettingsTab.css");
 
     var header = this.element.createChild("header");
     header.createChild("h3").createTextChild(WebInspector.UIString("Emulated Devices"));
     this.containerElement = this.element.createChild("div", "help-container-wrapper").createChild("div", "settings-tab help-content help-container");
 
     var buttonsRow = this.containerElement.createChild("div", "devices-button-row");
-    this._addCustomButton = createTextButton(WebInspector.UIString("Add custom device..."), this._addCustomDevice.bind(this));
-    buttonsRow.appendChild(this._addCustomButton);
+    var addCustomButton = createTextButton(WebInspector.UIString("Add custom device..."), this._addCustomDevice.bind(this));
+    buttonsRow.appendChild(addCustomButton);
 
-    this._devicesList = this.containerElement.createChild("div", "devices-list");
-    this._customListSearator = createElementWithClass("div", "devices-custom-separator");
-
-    this._editDevice = null;
-    this._editDeviceListItem = null;
-    this._createEditDeviceElement();
+    this._list = new WebInspector.ListWidget(this);
+    this._list.registerRequiredCSS("emulation/devicesSettingsTab.css");
+    this._list.element.classList.add("devices-list");
+    this._list.show(this.containerElement);
 
     this._muteUpdate = false;
     WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.CustomDevicesUpdated, this._devicesUpdated, this);
     WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, this._devicesUpdated, this);
+
+    this.setDefaultFocusedElement(addCustomButton);
 }
 
 WebInspector.DevicesSettingsTab.prototype = {
     wasShown: function()
     {
         WebInspector.VBox.prototype.wasShown.call(this);
         this._devicesUpdated();
-        this._stopEditing();
     },
 
     _devicesUpdated: function()
     {
         if (this._muteUpdate)
             return;
 
-        this._devicesList.removeChildren();
+        this._list.clear();
 
         var devices = WebInspector.emulatedDevicesList.custom().slice();
-        devices.sort(WebInspector.EmulatedDevice.compareByTitle);
         for (var i = 0; i < devices.length; ++i)
-            this._devicesList.appendChild(this._createDeviceListItem(devices[i], true));
+            this._list.appendItem(devices[i], true);
 
-        this._devicesList.appendChild(this._customListSearator);
-        this._updateSeparatorVisibility();
+        this._list.appendSeparator();
 
         devices = WebInspector.emulatedDevicesList.standard().slice();
         devices.sort(WebInspector.EmulatedDevice.compareByTitle);
         for (var i = 0; i < devices.length; ++i)
-            this._devicesList.appendChild(this._createDeviceListItem(devices[i], false));
-    },
-
-    _updateSeparatorVisibility: function()
-    {
-        this._customListSearator.classList.toggle("hidden", this._devicesList.firstChild === this._customListSearator);
+            this._list.appendItem(devices[i], false);
     },
 
     /**
      * @param {boolean} custom
      */
     _muteAndSaveDeviceList: function(custom)
     {
         this._muteUpdate = true;
         if (custom)
             WebInspector.emulatedDevicesList.saveCustomDevices();
         else
             WebInspector.emulatedDevicesList.saveStandardDevices();
         this._muteUpdate = false;
     },
 
+    _addCustomDevice: function()
+    {
+        var device = new WebInspector.EmulatedDevice();
+        device.deviceScaleFactor = 0;
+        this._list.addNewItem(WebInspector.emulatedDevicesList.custom().length, device);
+    },
+
     /**
-     * @param {!WebInspector.EmulatedDevice} device
-     * @param {boolean} custom
+     * @param {number} value
+     * @return {string}
+     */
+    _toNumericInputValue: function(value)
+    {
+        return value ? String(value) : "";
+    },
+
+    /**
+     * @override
+     * @param {*} item
+     * @param {boolean} editable
      * @return {!Element}
      */
-    _createDeviceListItem: function(device, custom)
+    renderItem: function(item, editable)
     {
-        var item = createElementWithClass("div", "devices-list-item");
-        var checkbox = item.createChild("input", "devices-list-checkbox");
+        var device = /** @type {!WebInspector.EmulatedDevice} */ (item);
+        var element = createElementWithClass("div", "devices-list-item");
+        var checkbox = element.createChild("input", "devices-list-checkbox");
         checkbox.type = "checkbox";
         checkbox.checked = device.show();
-        item.createChild("div", "devices-list-title").textContent = device.title;
-        item.addEventListener("click", onItemClicked.bind(this), false);
-        item.classList.toggle("device-list-item-show", device.show());
-        if (custom) {
-            var editButton = item.createChild("div", "devices-list-edit");
-            editButton.title = WebInspector.UIString("Edit");
-            editButton.addEventListener("click", onEditClicked.bind(this), false);
-
-            var removeButton = item.createChild("div", "devices-list-remove");
-            removeButton.title = WebInspector.UIString("Remove");
-            removeButton.addEventListener("click", onRemoveClicked, false);
-        }
+        element.createChild("div", "devices-list-title").textContent = device.title;
+        element.addEventListener("click", onItemClicked.bind(this), false);
+        element.classList.toggle("device-list-item-show", device.show());
+        return element;
 
         /**
          * @param {!Event} event
          * @this {WebInspector.DevicesSettingsTab}
          */
         function onItemClicked(event)
         {
             var show = !checkbox.checked;
             device.setShow(show);
-            this._muteAndSaveDeviceList(custom);
+            this._muteAndSaveDeviceList(editable);
             checkbox.checked = show;
-            item.classList.toggle("device-list-item-show", show);
+            element.classList.toggle("device-list-item-show", show);
             event.consume();
         }
-
-        /**
-         * @param {!Event} event
-         * @this {WebInspector.DevicesSettingsTab}
-         */
-        function onEditClicked(event)
-        {
-            event.consume();
-            this._startEditing(device, item);
-        }
-
-        /**
-         * @param {!Event} event
-         */
-        function onRemoveClicked(event)
-        {
-            WebInspector.emulatedDevicesList.removeCustomDevice(device);
-            event.consume();
-        }
-
-        return item;
-    },
-
-    _addCustomDevice: function()
-    {
-        this._startEditing(new WebInspector.EmulatedDevice(), null);
-    },
-
-    _createEditDeviceElement: function()
-    {
-        this._editDeviceElement = createElementWithClass("div", "devices-edit-container");
-        this._editDeviceElement.addEventListener("keydown", onKeyDown.bind(null, isEscKey, this._stopEditing.bind(this)), false);
-        this._editDeviceElement.addEventListener("keydown", onKeyDown.bind(null, isEnterKey, this._editDeviceCommitClicked.bind(this)), false);
-        this._editDeviceCheckbox = this._editDeviceElement.createChild("input", "devices-edit-checkbox");
-        this._editDeviceCheckbox.type = "checkbox";
-        var fields = this._editDeviceElement.createChild("div", "devices-edit-fields");
-
-        this._editDeviceTitle = this._createInput(WebInspector.UIString("Device name"));
-        fields.appendChild(this._editDeviceTitle);
-
-        var screen = fields.createChild("div", "hbox");
-        this._editDeviceWidth = this._createInput(WebInspector.UIString("Width"), "80px");
-        screen.appendChild(this._editDeviceWidth);
-        this._editDeviceHeight = this._createInput(WebInspector.UIString("Height"), "80px");
-        screen.appendChild(this._editDeviceHeight);
-        this._editDeviceScale = this._createInput(WebInspector.UIString("Device pixel ratio"));
-        screen.appendChild(this._editDeviceScale);
-
-        this._editDeviceUserAgent = this._createInput(WebInspector.UIString("User agent string"));
-        fields.appendChild(this._editDeviceUserAgent);
-
-        var buttonsRow = fields.createChild("div", "devices-edit-buttons");
-        this._editDeviceCommitButton = createTextButton("", this._editDeviceCommitClicked.bind(this));
-        buttonsRow.appendChild(this._editDeviceCommitButton);
-        this._editDeviceCancelButton = createTextButton(WebInspector.UIString("Cancel"), this._stopEditing.bind(this));
-        this._editDeviceCancelButton.addEventListener("keydown", onKeyDown.bind(null, isEnterKey, this._stopEditing.bind(this)), false);
-        buttonsRow.appendChild(this._editDeviceCancelButton);
-
-        /**
-         * @param {function(!Event):boolean} predicate
-         * @param {function()} callback
-         * @param {!Event} event
-         */
-        function onKeyDown(predicate, callback, event)
-        {
-            if (predicate(event)) {
-                event.consume(true);
-                callback();
-            }
-        }
     },
 
     /**
-     * @param {string} title
-     * @param {string=} width
-     * @return {!Element}
+     * @override
+     * @param {*} item
+     * @param {number} index
      */
-    _createInput: function(title, width)
+    removeItemRequested: function(item, index)
     {
-        var input = createElement("input");
-        input.type = "text";
-        if (width)
-            input.style.width = width;
-        input.placeholder = title;
-        input.addEventListener("input", this._validateInputs.bind(this, false), false);
-        input.addEventListener("blur", this._validateInputs.bind(this, false), false);
-        return input;
+        WebInspector.emulatedDevicesList.removeCustomDevice(/** @type {!WebInspector.EmulatedDevice} */ (item));
     },
 
     /**
-     * @param {boolean} forceValid
+     * @override
+     * @param {*} item
+     * @param {!WebInspector.ListWidget.Editor} editor
+     * @param {boolean} isNew
      */
-    _validateInputs: function(forceValid)
+    commitEdit: function(item, editor, isNew)
     {
-        var trimmedTitle = this._editDeviceTitle.value.trim();
-        var titleValid = trimmedTitle.length > 0 && trimmedTitle.length < 50;
-        this._editDeviceTitle.classList.toggle("error-input", !titleValid && !forceValid);
+        var device = /** @type {!WebInspector.EmulatedDevice} */ (item);
+        device.title = editor.control("title").value.trim();
+        device.vertical.width = editor.control("width").value ? parseInt(editor.control("width").value, 10) : 0;
+        device.vertical.height = editor.control("height").value ? parseInt(editor.control("height").value, 10) : 0;
+        device.horizontal.width = device.vertical.height;
+        device.horizontal.height = device.vertical.width;
+        device.deviceScaleFactor = editor.control("scale").value ? parseFloat(editor.control("scale").value) : 0;
+        device.userAgent = editor.control("user-agent").value;
+        device.modes = [];
+        device.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Horizontal, insets: new Insets(0, 0, 0, 0), images: null});
+        device.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, insets: new Insets(0, 0, 0, 0), images: null});
 
-        var widthValid = !WebInspector.OverridesSupport.deviceSizeValidator(this._editDeviceWidth.value);
-        this._editDeviceWidth.classList.toggle("error-input", !widthValid && !forceValid);
-
-        var heightValid = !WebInspector.OverridesSupport.deviceSizeValidator(this._editDeviceHeight.value);
-        this._editDeviceHeight.classList.toggle("error-input", !heightValid && !forceValid);
-
-        var scaleValid = !WebInspector.OverridesSupport.deviceScaleFactorValidator(this._editDeviceScale.value);
-        this._editDeviceScale.classList.toggle("error-input", !scaleValid && !forceValid);
-
-        var allValid = titleValid && widthValid && heightValid && scaleValid;
-        this._editDeviceCommitButton.disabled = !allValid;
+        if (isNew)
+            WebInspector.emulatedDevicesList.addCustomDevice(device);
+        else
+            WebInspector.emulatedDevicesList.saveCustomDevices();
     },
 
     /**
-     * @param {number} value
-     * @return {string}
+     * @override
+     * @param {*} item
+     * @return {!WebInspector.ListWidget.Editor}
      */
-    _toNumericInputValue: function(value)
+    beginEdit: function(item)
     {
-        return value ? String(value) : "";
+        var device = /** @type {!WebInspector.EmulatedDevice} */ (item);
+        var editor = this._createEditor();
+        editor.control("title").value = device.title;
+        editor.control("width").value = this._toNumericInputValue(device.vertical.width);
+        editor.control("height").value = this._toNumericInputValue(device.vertical.height);
+        editor.control("scale").value = this._toNumericInputValue(device.deviceScaleFactor);
+        editor.control("user-agent").value = device.userAgent;
+        return editor;
     },
 
     /**
-     * @param {!WebInspector.EmulatedDevice} device
-     * @param {?Element} listItem
+     * @return {!WebInspector.ListWidget.Editor}
      */
-    _startEditing: function(device, listItem)
+    _createEditor: function()
     {
-        this._stopEditing();
+        if (this._editor)
+            return this._editor;
 
-        this._addCustomButton.disabled = true;
-        this._devicesList.classList.add("devices-list-editing");
-        this._editDevice = device;
-        this._editDeviceListItem = listItem;
-        if (listItem)
-            listItem.classList.add("hidden");
+        var editor = new WebInspector.ListWidget.Editor();
+        this._editor = editor;
+        var content = editor.contentElement();
 
-        this._editDeviceCommitButton.textContent = listItem ? WebInspector.UIString("Save") : WebInspector.UIString("Add device");
-        this._editDeviceCheckbox.checked = device.show();
-        this._editDeviceTitle.value = device.title;
-        this._editDeviceWidth.value = listItem ? this._toNumericInputValue(device.vertical.width) : "";
-        this._editDeviceHeight.value = listItem ? this._toNumericInputValue(device.vertical.height) : "";
-        this._editDeviceScale.value = listItem ? this._toNumericInputValue(device.deviceScaleFactor) : "";
-        this._editDeviceUserAgent.value = device.userAgent;
-        this._validateInputs(true);
+        var fields = content.createChild("div", "devices-edit-fields");
+        fields.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));
 
-        if (listItem && listItem.nextElementSibling)
-            this._devicesList.insertBefore(this._editDeviceElement, listItem.nextElementSibling);
-        else
-            this._devicesList.insertBefore(this._editDeviceElement, this._customListSearator);
-        this._editDeviceCommitButton.scrollIntoView();
-        this._editDeviceTitle.focus();
-    },
+        return editor;
 
-    _editDeviceCommitClicked: function()
-    {
-        if (this._editDeviceCommitButton.disabled)
-            return;
+        /**
+         * @param {!HTMLInputElement|!HTMLSelectElement} input
+         * @return {boolean}
+         */
+        function titleValidator(input)
+        {
+            var value = input.value.trim();
+            return value.length > 0 && value.length < 50;
+        }
 
-        this._editDevice.setShow(this._editDeviceCheckbox.checked);
-        this._editDevice.title = this._editDeviceTitle.value;
-        this._editDevice.vertical.width = this._editDeviceWidth.value ? parseInt(this._editDeviceWidth.value, 10) : 0;
-        this._editDevice.vertical.height = this._editDeviceHeight.value ? parseInt(this._editDeviceHeight.value, 10) : 0;
-        this._editDevice.horizontal.width = this._editDevice.vertical.height;
-        this._editDevice.horizontal.height = this._editDevice.vertical.width;
-        this._editDevice.deviceScaleFactor = this._editDeviceScale.value ? parseFloat(this._editDeviceScale.value) : 0;
-        this._editDevice.userAgent = this._editDeviceUserAgent.value;
-        this._editDevice.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Horizontal, insets: new Insets(0, 0, 0, 0), images: null});
-        this._editDevice.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, insets: new Insets(0, 0, 0, 0), images: null});
+        /**
+         * @param {!HTMLInputElement|!HTMLSelectElement} input
+         * @return {boolean}
+         */
+        function sizeValidator(input)
+        {
+            return !WebInspector.OverridesSupport.deviceSizeValidator(input.value);
+        }
 
-        this._stopEditing();
-        if (this._editDeviceListItem)
-            WebInspector.emulatedDevicesList.saveCustomDevices();
-        else
-            WebInspector.emulatedDevicesList.addCustomDevice(this._editDevice);
-        this._editDevice = null;
-        this._editDeviceListItem = null;
-    },
+        /**
+         * @param {!HTMLInputElement|!HTMLSelectElement} input
+         * @return {boolean}
+         */
+        function scaleValidator(input)
+        {
+            return !WebInspector.OverridesSupport.deviceScaleFactorValidator(input.value);
+        }
 
-    _stopEditing: function()
-    {
-        this._devicesList.classList.remove("devices-list-editing");
-        if (this._editDeviceListItem)
-            this._editDeviceListItem.classList.remove("hidden");
-        if (this._editDeviceElement.parentElement)
-            this._devicesList.removeChild(this._editDeviceElement);
-        this._addCustomButton.disabled = false;
-        this._addCustomButton.focus();
+        /**
+         * @param {!HTMLInputElement|!HTMLSelectElement} input
+         * @return {boolean}
+         */
+        function userAgentValidator(input)
+        {
+            return true;
+        }
     },
 
     __proto__: WebInspector.VBox.prototype
 }