Bug 1644535 - Add section to about:preferences for Experimental Features. r=Gijs,fluent-reviewers

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

browser/app/profile/firefox.js

@@ -739,7 +739,7 @@ pref("plugins.favorfallback.rules", "nosrc,video");
 
 // Toggling Search bar on and off in about:preferences
 pref("browser.preferences.search", true);
-
+pref("browser.preferences.experimental", false);
 pref("browser.preferences.defaultPerformanceSettings.enabled", true);
 
 pref("browser.download.show_plugins_in_list", true);

browser/components/preferences/experimental.inc.xhtml

@@ -0,0 +1,19 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+<!-- Experimental panel -->
+
+<script src="chrome://browser/content/preferences/experimental.js"/>
+<html:template id="template-paneExperimental">
+<html:div id="firefoxExperimentalCategory"
+          class="subcategory"
+          hidden="true"
+          data-category="paneExperimental">
+  <html:h1 style="-moz-box-flex: 1;"
+           data-l10n-id="pane-experimental-title"/>
+  <html:h2 id="pane-experimental-subtitle"
+           data-l10n-id="pane-experimental-subtitle"/>
+  <html:p data-l10n-id="pane-experimental-description"/>
+</html:div>
+</html:template>

browser/components/preferences/experimental.js

@@ -0,0 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+var gExperimentalPane = {
+  init() {},
+};

browser/components/preferences/jar.mn

@@ -14,6 +14,7 @@ browser.jar:
    content/browser/preferences/privacy.js
    content/browser/preferences/containers.js
    content/browser/preferences/sync.js
+   content/browser/preferences/experimental.js
    content/browser/preferences/fxaPairDevice.xhtml
    content/browser/preferences/fxaPairDevice.js
    content/browser/preferences/findInPage.js

browser/components/preferences/preferences.js

@@ -10,6 +10,7 @@
 /* import-globals-from containers.js */
 /* import-globals-from privacy.js */
 /* import-globals-from sync.js */
+/* import-globals-from experimental.js */
 /* import-globals-from findInPage.js */
 /* import-globals-from ../../base/content/utilityOverlay.js */
 /* import-globals-from ../../../toolkit/content/preferencesBindings.js */
@@ -90,6 +91,10 @@ function init_all() {
     // Remove the pane from the DOM so it doesn't get incorrectly included in search results.
     document.getElementById("template-paneSync").remove();
   }
+  if (Services.prefs.getBoolPref("browser.preferences.experimental")) {
+    document.getElementById("category-experimental").hidden = false;
+    register_module("paneExperimental", gExperimentalPane);
+  }
   register_module("paneSearchResults", gSearchResultsPane);
   gSearchResultsPane.init();
   gMainPane.preInit();

browser/components/preferences/preferences.xhtml

@@ -137,6 +137,18 @@
           <image class="category-icon"/>
           <label class="category-name" flex="1" data-l10n-id="pane-sync-title2"></label>
         </richlistitem>
+
+        <richlistitem id="category-experimental"
+                      class="category"
+                      hidden="true"
+                      value="paneExperimental"
+                      helpTopic="prefs-experimental"
+                      data-l10n-id="category-experimental"
+                      data-l10n-attrs="tooltiptext"
+                      align="center">
+          <image class="category-icon"/>
+          <label class="category-name" flex="1" data-l10n-id="pane-experimental-title"></label>
+        </richlistitem>
       </richlistbox>
 
       <spacer flex="1"/>
@@ -196,6 +208,7 @@
 #include privacy.inc.xhtml
 #include containers.inc.xhtml
 #include sync.inc.xhtml
+#include experimental.inc.xhtml
         </vbox>
       </vbox>
     </vbox>

browser/locales/en-US/browser/preferences/preferences.ftl

@@ -53,6 +53,12 @@ pane-sync-title2 = { -sync-brand-short-name }
 category-sync2 =
     .tooltiptext = { pane-sync-title2 }
 
+pane-experimental-title = { -brand-short-name } Experiments
+category-experimental =
+    .tooltiptext = { -brand-short-name } Experiments
+pane-experimental-subtitle = Proceed with Caution
+pane-experimental-description = Changing advanced configuration preferences can impact { -brand-short-name } performance or security.
+
 help-button-label = { -brand-short-name } Support
 addons-button-label = Extensions & Themes
 

browser/themes/shared/preferences/preferences.inc.css

@@ -1104,3 +1104,14 @@ richlistitem .text-link:hover {
   grid-column: span 2;
   height: 20px;
 }
+
+#pane-experimental-subtitle {
+  background-image: url("chrome://global/skin/icons/warning.svg");
+  background-repeat: no-repeat;
+  background-position: 0 center;
+  background-size: contain;
+  min-height: 30px;
+  padding-inline-start: 38px;
+  display: flex;
+  align-items: center;
+}