DevTools: migrate from ui-setting to settings extension point.

Source/devtools/front_end/settings/SettingsScreen.js

 /*
  * Copyright (C) 2013 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 197 matching lines @@
 }
 
 /**
  * @constructor
  * @extends {WebInspector.SettingsTab}
  */
 WebInspector.GenericSettingsTab = function()
 {
     WebInspector.SettingsTab.call(this, WebInspector.UIString("General"), "general-tab-content");
 
-    this._populateSectionsFromExtensions();
+    /** @const */
+    var explicitSectionOrder = ["", "Appearance", "Elements", "Sources", "Network", "Profiler", "Console", "Extensions"];
+    /** @type {!Map<string, !Element>} */
+    this._nameToSection = new Map();
+    /** @type {!Map<string, !Element>} */
+    this._nameToSettingFieldset = new Map();
+    for (var sectionName of explicitSectionOrder)
+        this._sectionElement(sectionName);
+    self.runtime.extensions("setting").forEach(this._addSetting.bind(this));
+    self.runtime.extensions(WebInspector.SettingUI).forEach(this._addSettingUI.bind(this));
 
     this._appendSection().appendChild(createTextButton(WebInspector.UIString("Restore defaults and reload"), restoreAndReload));
 
     function restoreAndReload()
     {
         if (window.localStorage)
             window.localStorage.clear();
         WebInspector.reload();
     }
 }
 
 WebInspector.GenericSettingsTab.prototype = {
-    _populateSectionsFromExtensions: function()
+    /**
+     * @param {!Runtime.Extension} extension
+     */
+    _addSetting: function(extension)
     {
-        /** @const */
-        var explicitSectionOrder = ["", "Appearance", "Elements", "Sources", "Network", "Profiler", "Console", "Extensions"];
+        var descriptor = extension.descriptor();
+        var sectionName = descriptor["category"] || "";
 
-        var allExtensions = self.runtime.extensions("ui-setting");
+        var settingName = descriptor["settingName"];
+        var setting = WebInspector.settings[settingName];

[dgozman, 2015/04/06 14:40:36]

Why not |WI.settings.createSetting(settingName)|?

[pfeldman, 2015/04/06 17:15:00]

Because I don't know the default value yet.

+        var uiTitle = WebInspector.UIString(descriptor["title-" + WebInspector.platform()] || descriptor["title"]);
 
-        /** @type {!Multimap.<string, !Runtime.Extension>} */
-        var extensionsBySectionId = new Multimap();
-        /** @type {!Multimap.<string, !Runtime.Extension>} */
-        var childSettingExtensionsByParentName = new Multimap();
+        var sectionElement = this._sectionElement(sectionName);
+        var parentFieldset = descriptor["parentSettingName"] ? this._nameToSettingFieldset.get(descriptor["parentSettingName"]) : null;

[dgozman, 2015/04/06 14:40:36]

This depends on the order of processing.

[pfeldman, 2015/04/06 17:15:00]

Yes and I kinda think that this is alright.

 
-        allExtensions.forEach(function(extension) {
-            var descriptor = extension.descriptor();
-            var sectionName = descriptor["section"] || "";
-            if (!sectionName && descriptor["parentSettingName"]) {
-                childSettingExtensionsByParentName.set(descriptor["parentSettingName"], extension);
-                return;
+        var settingControl;
+
+        switch (descriptor["settingType"]) {
+        case "boolean":
+            settingControl = WebInspector.SettingsUI.createSettingCheckbox(uiTitle, setting);
+            break;
+        case "enum":
+            var descriptorOptions = descriptor["options"];
+            var options = new Array(descriptorOptions.length);
+            for (var i = 0; i < options.length; ++i) {
+                // The third array item flags that the option name is "raw" (non-i18n-izable).
+                var optionName = descriptorOptions[i][2] ? descriptorOptions[i][0] : WebInspector.UIString(descriptorOptions[i][0]);
+                options[i] = [optionName, descriptorOptions[i][1]];
             }
-            extensionsBySectionId.set(sectionName, extension);
-        });
+            settingControl = this._createSelectSetting(uiTitle, options, setting);
+            break;
+        default:
+            console.error("Invalid setting type: " + descriptor["settingType"]);
+            return;
+        }
 
-        var sectionIds = extensionsBySectionId.keysArray();
-        var explicitlyOrderedSections = explicitSectionOrder.keySet();
-        for (var i = 0; i < explicitSectionOrder.length; ++i) {
-            var extensions = extensionsBySectionId.get(explicitSectionOrder[i]);
-            if (!extensions.size)
-                continue;
-            this._addSectionWithExtensionProvidedSettings(explicitSectionOrder[i], extensions.valuesArray(), childSettingExtensionsByParentName);
-        }
-        for (var i = 0; i < sectionIds.length; ++i) {
-            if (explicitlyOrderedSections[sectionIds[i]])
-                continue;
-            this._addSectionWithExtensionProvidedSettings(sectionIds[i], extensionsBySectionId.get(sectionIds[i]).valuesArray(), childSettingExtensionsByParentName);
+        var fieldSet = WebInspector.SettingsUI.createSettingFieldset(setting);
+        this._nameToSettingFieldset.set(settingName, fieldSet);
+        settingControl.appendChild(fieldSet);

[dgozman, 2015/04/06 14:40:36]

Why don't you create fieldset when you need it because of "parentSettingName" ?

[pfeldman, 2015/04/06 17:15:00]

Ok, sure.

+
+        (parentFieldset || sectionElement).appendChild(/** @type {!Element} */ (settingControl));
+    },
+
+    /**
+     * @param {!Runtime.Extension} extension
+     */
+    _addSettingUI: function(extension)
+    {
+        var descriptor = extension.descriptor();
+        var sectionName = descriptor["category"] || "";
+        extension.instancePromise().then(appendCustomSetting.bind(this));
+
+        /**
+         * @param {!Object} object
+         * @this {WebInspector.GenericSettingsTab}
+         */
+        function appendCustomSetting(object)
+        {
+            var settingUI = /** @type {!WebInspector.SettingUI} */ (object);
+            var element = settingUI.settingElement();
+            if (element)
+                this._sectionElement(sectionName).appendChild(element);
         }
     },
 
     /**
      * @param {string} sectionName
-     * @param {!Array.<!Runtime.Extension>} extensions
-     * @param {!Multimap.<string, !Runtime.Extension>} childSettingExtensionsByParentName
+     * @return {!Element}
      */
-    _addSectionWithExtensionProvidedSettings: function(sectionName, extensions, childSettingExtensionsByParentName)
+    _sectionElement: function(sectionName)
     {
-        var uiSectionName = sectionName && WebInspector.UIString(sectionName);
-        var sectionElement = this._appendSection(uiSectionName);
-        extensions.forEach(processSetting.bind(this, null));
-
-        /**
-         * @param {?Element} parentFieldset
-         * @param {!Runtime.Extension} extension
-         * @this {WebInspector.GenericSettingsTab}
-         */
-        function processSetting(parentFieldset, extension)
-        {
-            var descriptor = extension.descriptor();
-            var experimentName = descriptor["experiment"];
-            if (experimentName && !Runtime.experiments.isEnabled(experimentName))
-                return;
-
-            if (descriptor["settingType"] === "custom") {
-                extension.instancePromise().then(appendCustomSetting);
-                return;
-            }
-
-            var uiTitle = WebInspector.UIString(descriptor["title"]);
-            var settingName = descriptor["settingName"];
-            var setting = WebInspector.settings[settingName];
-            var settingControl = createSettingControl.call(this, uiTitle, setting, descriptor);
-            if (settingName) {
-                var childSettings = childSettingExtensionsByParentName.get(settingName);
-                if (childSettings.size) {
-                    var fieldSet = WebInspector.SettingsUI.createSettingFieldset(setting);
-                    settingControl.appendChild(fieldSet);
-                    childSettings.valuesArray().forEach(function(item) { processSetting.call(this, fieldSet, item); }, this);
-                }
-            }
-            appendAsChild(settingControl);
-
-            /**
-             * @param {!Object} object
-             */
-            function appendCustomSetting(object)
-            {
-                var uiSettingDelegate = /** @type {!WebInspector.UISettingDelegate} */ (object);
-                var element = uiSettingDelegate.settingElement();
-                if (element)
-                    appendAsChild(element);
-            }
-
-            /**
-             * @param {!Object} settingControl
-             */
-            function appendAsChild(settingControl)
-            {
-                (parentFieldset || sectionElement).appendChild(/** @type {!Element} */ (settingControl));
-            }
+        var sectionElement = this._nameToSection.get(sectionName);
+        if (!sectionElement) {
+            var uiSectionName = sectionName && WebInspector.UIString(sectionName);
+            sectionElement = this._appendSection(uiSectionName);
+            this._nameToSection.set(sectionName, sectionElement);
         }
-
-        /**
-         * @param {string} uiTitle
-         * @param {!WebInspector.Setting} setting
-         * @param {!Object} descriptor
-         * @return {!Element}
-         * @this {WebInspector.GenericSettingsTab}
-         */
-        function createSettingControl(uiTitle, setting, descriptor)
-        {
-            switch (descriptor["settingType"]) {
-            case "checkbox":
-                return WebInspector.SettingsUI.createSettingCheckbox(uiTitle, setting);
-            case "select":
-                var descriptorOptions = descriptor["options"];
-                var options = new Array(descriptorOptions.length);
-                for (var i = 0; i < options.length; ++i) {
-                    // The third array item flags that the option name is "raw" (non-i18n-izable).
-                    var optionName = descriptorOptions[i][2] ? descriptorOptions[i][0] : WebInspector.UIString(descriptorOptions[i][0]);
-                    options[i] = [optionName, descriptorOptions[i][1]];
-                }
-                return this._createSelectSetting(uiTitle, options, setting);
-            default:
-                throw "Invalid setting type: " + descriptor["settingType"];
-            }
-        }
+        return sectionElement;
     },
 
     __proto__: WebInspector.SettingsTab.prototype
 }
 
 /**
  * @constructor
- * @extends {WebInspector.UISettingDelegate}
+ * @implements {WebInspector.SettingUI}
  */
-WebInspector.SettingsScreen.SkipStackFramePatternSettingDelegate = function()
+WebInspector.SettingsScreen.SkipStackFramePatternSettingUI = function()
 {
-    WebInspector.UISettingDelegate.call(this);
 }
 
-WebInspector.SettingsScreen.SkipStackFramePatternSettingDelegate.prototype = {
+WebInspector.SettingsScreen.SkipStackFramePatternSettingUI.prototype = {
     /**
      * @override
      * @return {!Element}
      */
     settingElement: function()
     {
         return createTextButton(WebInspector.manageBlackboxingButtonLabel(), this._onManageButtonClick.bind(this), "", WebInspector.UIString("Skip stepping through sources with particular names"));
     },
 
     _onManageButtonClick: function()
     {
         WebInspector.FrameworkBlackboxDialog.show(WebInspector.inspectorView.element);
-    },
-
-    __proto__: WebInspector.UISettingDelegate.prototype
+    }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.SettingsTab}
  */
 WebInspector.WorkspaceSettingsTab = function()
 {
     WebInspector.SettingsTab.call(this, WebInspector.UIString("Workspace"), "workspace-tab-content");
     WebInspector.isolatedFileSystemManager.addEventListener(WebInspector.IsolatedFileSystemManager.Events.FileSystemAdded, this._fileSystemAdded, this);
@@ skipping 1065 matching lines @@
             var columnId = columns[i];
             var editElement = this._addInputElements.get(columnId);
             this._setEditElementValue(editElement, "");
         }
     },
 
     __proto__: WebInspector.SettingsList.prototype
 }
 
 WebInspector._settingsController = new WebInspector.SettingsController();