Bug 1951831 - Part 1: Create setting-control to render a config based setting r=reusable-components-reviewers,mconley,hjones

This adds an initial setting-control web component that can render a
moz-checkbox based setting. This will be controlled by a pref to reduce
any churn on the Settings page while we make changes related to Settings
Redesign 2025.

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

browser/components/preferences/findInPage.js

@@ -434,7 +434,8 @@ var gSearchResultsPane = {
 
       if (
         nodeObject.localName == "label" ||
-        nodeObject.localName == "description"
+        nodeObject.localName == "description" ||
+        nodeObject.localName.startsWith("moz-")
       ) {
         accessKeyTextNodes.push(...simpleTextNodes);
       }

browser/components/preferences/jar.mn

@@ -23,5 +23,6 @@ browser.jar:
    content/browser/preferences/more-from-mozilla-qr-code-simple-cn.svg
    content/browser/preferences/web-appearance-dark.svg
    content/browser/preferences/web-appearance-light.svg
+   content/browser/preferences/widgets/setting-control.mjs              (widgets/setting-control/setting-control.mjs)
    content/browser/preferences/widgets/setting-group.mjs                (widgets/setting-group/setting-group.mjs)
    content/browser/preferences/widgets/setting-group.css                (widgets/setting-group/setting-group.css)

browser/components/preferences/preferences.xhtml

@@ -86,6 +86,7 @@
   <script src="chrome://browser/content/migration/migration-wizard.mjs" type="module"></script>
   <script type="module" src="chrome://browser/content/backup/backup-settings.mjs"></script>
   <script type="module" src="chrome://browser/content/preferences/widgets/setting-group.mjs"></script>
+  <script type="module" src="chrome://browser/content/preferences/widgets/setting-control.mjs"></script>
 </head>
 
 <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

browser/components/preferences/widgets/setting-control/setting-control.mjs

@@ -0,0 +1,60 @@
+/* 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/. */
+
+import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
+import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+
+export class SettingControl extends MozLitElement {
+  static properties = {
+    settingId: { type: String },
+    setting: { type: Object },
+    config: { type: Object },
+    value: {},
+  };
+
+  createRenderRoot() {
+    return this;
+  }
+
+  onSettingChange = () => {
+    this.value = this.setting.value;
+  };
+
+  willUpdate(changedProperties) {
+    if (changedProperties.has("settingId")) {
+      if (this.setting && this.setting.id != this.settingId) {
+        this.setting.off("change", this.onSettingChange);
+      }
+      this.setting = window.Preferences.getSetting(this.settingId);
+      this.value = this.getValue();
+      this.setting.on("change", this.onSettingChange);
+    }
+  }
+
+  getValue() {
+    return this.setting.value;
+  }
+
+  onChange(e) {
+    this.setting.userChange(e.target.checked);
+    this.value = this.getValue();
+  }
+
+  render() {
+    let { config } = this;
+    switch (config.control) {
+      case "checkbox":
+      default:
+        return html`<moz-checkbox
+          data-l10n-id=${config.l10nId}
+          .iconSrc=${config.iconSrc}
+          .checked=${this.value}
+          .supportPage=${this.config.supportPage}
+          data-subcategory=${ifDefined(this.config.subcategory)}
+          @change=${this.onChange}
+        ></moz-checkbox>`;
+    }
+  }
+}
+customElements.define("setting-control", SettingControl);

browser/components/preferences/widgets/setting-group/setting-group.mjs

@@ -2,6 +2,7 @@
  * 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/. */
 
+import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
 
 export class SettingGroup extends MozLitElement {
@@ -14,6 +15,18 @@ export class SettingGroup extends MozLitElement {
     return this;
   }
 
+  itemTemplate(item) {
+    let setting = window.Preferences.getSetting(item.id);
+    if (!setting.visible) {
+      return "";
+    }
+    return html`<setting-control
+      .settingId=${item.id}
+      .setting=${setting}
+      .config=${item}
+    ></setting-control>`;
+  }
+
   xulCheckboxTemplate(item, setting) {
     let result = document.createDocumentFragment();
     let checkbox = document.createXULElement("checkbox");
@@ -56,6 +69,11 @@ export class SettingGroup extends MozLitElement {
     if (!this.config) {
       return "";
     }
+    if (Services.prefs.getBoolPref("settings.revamp.design", false)) {
+      return html`<moz-fieldset data-l10n-id=${ifDefined(this.config.l10nId)}
+        >${this.config.items.map(item => this.itemTemplate(item))}</moz-fieldset
+      >`;
+    }
     return this.config.items.map(item => this.xulItemTemplate(item));
   }
 }