Bug 1649250 - Display the experimental features in sorted alphabetical ordering. r=mstriemer,preferences-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D81649

browser/components/preferences/experimental.js

@@ -52,6 +52,19 @@ var gExperimentalPane = {
     this._observedPrefs = [];
   },
 
+  async _sortFeatures(features) {
+    // Sort the features alphabetically by their title
+    let titles = await document.l10n.formatMessages(
+      features.map(f => {
+        return { id: f.title };
+      })
+    );
+    titles = titles.map((title, index) => [title.attributes[0].value, index]);
+    titles.sort((a, b) => a[0].toLowerCase().localeCompare(b[0].toLowerCase()));
+    // Get the features in order of sorted titles.
+    return titles.map(([, index]) => features[index]);
+  },
+
   async init() {
     if (this.inited) {
       return;
@@ -82,6 +95,8 @@ var gExperimentalPane = {
       }
     }
 
+    features = await this._sortFeatures(features);
+
     window.addEventListener("unload", () => this.removePrefObservers());
     this._template = document.getElementById("template-featureGate");
     this._featureGatesContainer = document.getElementById(

browser/components/preferences/tests/browser_experimental_features_hidden_when_not_public.js

@@ -41,7 +41,7 @@ class DefinitionServer {
     const definition = {
       id: "test-feature",
       // These l10n IDs are just random so we have some text to display
-      title: "pane-experimental-subtitle",
+      title: "experimental-features-media-avif",
       description: "pane-experimental-description",
       restartRequired: false,
       type: "boolean",