Display only explicitly whitelisted settings

Previously, the presence of category and title attributes defined
if the settings show up in the global settings screen. This CL
changes the SettingsScreen to render only explicitly whitelisted
settings. It adds 'Persistence', 'Debugger' and 'Global' settings
which were previously implicit.

Bug: 1065674
Change-Id: I3506facdb41bdf6f799bcfc4e48960fdc938f835
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2183909
Reviewed-by: Mathias Bynens <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
diff --git a/front_end/settings/SettingsScreen.js b/front_end/settings/SettingsScreen.js
index c28084f..f15b95e 100644
--- a/front_end/settings/SettingsScreen.js
+++ b/front_end/settings/SettingsScreen.js
@@ -204,12 +204,14 @@
     super(Common.UIString.UIString('Preferences'), 'preferences-tab-content');
 
     /** @const */
-    const explicitSectionOrder =
-        ['', 'Appearance', 'Sources', 'Elements', 'Network', 'Performance', 'Console', 'Extensions'];
+    const explicitSectionOrder = [
+      '', 'Appearance', 'Sources', 'Elements', 'Network', 'Performance', 'Console', 'Extensions', 'Persistence',
+      'Debugger', 'Global'
+    ];
     /** @type {!Map<string, !Element>} */
     this._nameToSection = new Map();
     for (const sectionName of explicitSectionOrder) {
-      this._sectionElement(sectionName);
+      this._createSectionElement(sectionName);
     }
     self.runtime.extensions('setting').forEach(this._addSetting.bind(this));
     self.runtime.extensions(UI.SettingsUI.SettingUI).forEach(this._addSettingUI.bind(this));
@@ -246,6 +248,9 @@
       return;
     }
     const sectionElement = this._sectionElement(extension.descriptor()['category']);
+    if (!sectionElement) {
+      return;
+    }
     const setting = Common.Settings.Settings.instance().moduleSetting(extension.descriptor()['settingName']);
     const settingControl = UI.SettingsUI.createControlForSetting(setting);
     if (settingControl) {
@@ -269,7 +274,11 @@
       const settingUI = /** @type {!UI.SettingsUI.SettingUI} */ (object);
       const element = settingUI.settingElement();
       if (element) {
-        this._sectionElement(sectionName).appendChild(element);
+        let sectionElement = this._sectionElement(sectionName);
+        if (!sectionElement) {
+          sectionElement = this._createSectionElement(sectionName);
+        }
+        sectionElement.appendChild(element);
       }
     }
   }
@@ -278,15 +287,20 @@
    * @param {string} sectionName
    * @return {!Element}
    */
-  _sectionElement(sectionName) {
-    let sectionElement = this._nameToSection.get(sectionName);
-    if (!sectionElement) {
-      const uiSectionName = sectionName && Common.UIString.UIString(sectionName);
-      sectionElement = this._appendSection(uiSectionName);
-      this._nameToSection.set(sectionName, sectionElement);
-    }
+  _createSectionElement(sectionName) {
+    const uiSectionName = sectionName && Common.UIString.UIString(sectionName);
+    const sectionElement = this._appendSection(uiSectionName);
+    this._nameToSection.set(sectionName, sectionElement);
     return sectionElement;
   }
+
+  /**
+   * @param {string} sectionName
+   * @return {?Element}
+   */
+  _sectionElement(sectionName) {
+    return this._nameToSection.get(sectionName) || null;
+  }
 }
 
 /**