Bug 1966542 - Add support for config-based prefs that need to respond to changes in more than one pref r=mstriemer,reusable-components-reviewers

markcellus · markcellus · commit 67fa2b550855 · 2025-08-07T18:28:00.000Z
Differential Revision: https://phabricator.services.mozilla.com/D257555
diff --git a/browser/components/preferences/tests/chrome/test_setting_control_checkbox.html b/browser/components/preferences/tests/chrome/test_setting_control_checkbox.html
@@ -308,6 +308,44 @@
           "Nested is disabled after pref change"
         );
       });
+
+      add_task(async function testDepsChangeVisibility() {
+        const DEP_PREF_ID = "test.depsChange.dep";
+        const DEP_SETTING_ID = "testDepsChangeDep";
+        await SpecialPowers.pushPrefEnv({
+          set: [[DEP_PREF_ID, true]],
+        });
+        Preferences.add({ id: DEP_PREF_ID, type: "bool" });
+        Preferences.addSetting({
+          id: DEP_SETTING_ID,
+          pref: DEP_PREF_ID,
+        });
+
+        const PARENT_SETTING_ID = "testDepsChangeParent";
+        Preferences.addSetting({
+          id: PARENT_SETTING_ID,
+          deps: [DEP_SETTING_ID],
+          visible: deps => deps[DEP_SETTING_ID].value,
+        });
+
+        let itemConfig = { l10nId: LABEL_L10N_ID, id: PARENT_SETTING_ID };
+        let setting = Preferences.getSetting(PARENT_SETTING_ID);
+        let control = await renderTemplate(itemConfig, setting);
+        is(
+          control.controlEl.localName,
+          "moz-checkbox",
+          "The control rendered a checkbox"
+        );
+        ok(!control.hidden, "The control is visible");
+        ok(setting.visible, "Setting is visible initially");
+
+        let settingChanged = waitForSettingChange(setting);
+        Services.prefs.setBoolPref(DEP_PREF_ID, false);
+        await settingChanged;
+
+        ok(!setting.visible, "Setting is not visible based on dep");
+        ok(control.hidden, "The control is now hidden");
+      });
     </script>
   </head>
   <body>
diff --git a/browser/components/preferences/widgets/setting-control/setting-control.mjs b/browser/components/preferences/widgets/setting-control/setting-control.mjs
@@ -136,15 +136,21 @@ export class SettingControl extends MozLitElement {
     return result;
   }
 
+  onSettingChange = () => {
+    this.setValue();
+    this.requestUpdate();
+  };
+
   willUpdate(changedProperties) {
     if (changedProperties.has("setting")) {
       if (this.#lastSetting) {
-        this.#lastSetting.off("change", this.setValue);
+        this.#lastSetting.off("change", this.onSettingChange);
       }
       this.#lastSetting = this.setting;
       this.setValue();
-      this.setting.on("change", this.setValue);
+      this.setting.on("change", this.onSettingChange);
     }
+    this.hidden = !this.setting.visible;
   }
 
   /**
@@ -198,7 +204,6 @@ export class SettingControl extends MozLitElement {
   // Called by our parent when our input changed.
   onChange(el) {
     this.setting.userChange(this.controlValue(el));
-    this.setValue();
   }
 
   render() {
@@ -208,12 +213,10 @@ export class SettingControl extends MozLitElement {
 
     // Prepare nested item config and settings.
     let itemArgs =
-      config.items
-        ?.map(i => ({
-          config: i,
-          setting: this.getSetting(i.id),
-        }))
-        .filter(i => i.setting.visible) || [];
+      config.items?.map(i => ({
+        config: i,
+        setting: this.getSetting(i.id),
+      })) || [];
     let nestedSettings = itemArgs.map(
       opts =>
         html`<setting-control
diff --git a/browser/components/preferences/widgets/setting-group/setting-group.mjs b/browser/components/preferences/widgets/setting-group/setting-group.mjs
@@ -40,9 +40,6 @@ export class SettingGroup extends MozLitElement {
 
   itemTemplate(item) {
     let setting = this.getSetting(item.id);
-    if (!setting.visible) {
-      return "";
-    }
     return html`<setting-control
       .setting=${setting}
       .config=${item}
diff --git a/toolkit/content/preferencesBindings.js b/toolkit/content/preferencesBindings.js
@@ -4,6 +4,14 @@
 
 "use strict";
 
+/**
+ * A map of Setting instances (values) along with their IDs
+ * (keys) so that the dependencies of a setting can
+ * be easily looked up by just their ID.
+ *
+ * @typedef {Record<string, any>} PreferenceSettingDepsMap
+ */
+
 // We attach Preferences to the window object so other contexts (tests, JSMs)
 // have access to it.
 const Preferences = (window.Preferences = (function () {
@@ -689,11 +697,29 @@ const Preferences = (window.Preferences = (function () {
   }
 
   class Setting extends EventEmitter {
+    /**
+     * @type {Preference | undefined | null}
+     */
+    pref;
+
+    /**
+     * Keeps a cache of each dep's Setting so that
+     * it can be easily looked up by its ID.
+     *
+     * @type {PreferenceSettingDepsMap | undefined}
+     */
+    _deps;
+
     constructor(id, config) {
       super();
       this.id = id;
       this.config = config;
       this.pref = config.pref && Preferences.get(config.pref);
+
+      for (const setting of Object.values(this.deps)) {
+        setting.on("change", this.onChange);
+      }
+
       if (this.pref) {
         this.pref.on("change", this.onChange);
       }
@@ -706,6 +732,32 @@ const Preferences = (window.Preferences = (function () {
       this.emit("change");
     };
 
+    /**
+     * A map of each dep and it's associated {@link Setting} instance.
+     *
+     * @type {PreferenceSettingDepsMap}
+     */
+    get deps() {
+      if (this._deps) {
+        return this._deps;
+      }
+      /**
+       * @type {PreferenceSettingDepsMap}
+       */
+      const deps = {};
+
+      if (this.config.deps) {
+        for (let id of this.config.deps) {
+          const setting = Preferences.getSetting(id);
+          if (setting) {
+            deps[id] = setting;
+          }
+        }
+      }
+      this._deps = deps;
+      return this._deps;
+    }
+
     get value() {
       let prefVal = this.pref?.value;
       if (this.config.get) {
@@ -726,7 +778,7 @@ const Preferences = (window.Preferences = (function () {
     }
 
     get visible() {
-      return this.config.visible ? this.config.visible() : true;
+      return this.config.visible ? this.config.visible(this.deps) : true;
     }
 
     getControlConfig(config) {
diff --git a/toolkit/content/tests/chrome/test_preferencesBindings_setting.html b/toolkit/content/tests/chrome/test_preferencesBindings_setting.html
@@ -212,6 +212,39 @@
           "There's a default implementation"
         );
       });
+
+      add_task(async function testDepsChange() {
+        const DEP_PREF_ID = "test.depsChange.dep";
+        const DEP_SETTING_ID = "testDepsChangeDep";
+        await SpecialPowers.pushPrefEnv({
+          set: [[DEP_PREF_ID, true]],
+        });
+        Preferences.add({ id: DEP_PREF_ID, type: "bool" });
+        Preferences.addSetting({
+          id: DEP_SETTING_ID,
+          pref: DEP_PREF_ID,
+        });
+
+        const PARENT_SETTING_ID = "testDepsChangeParent";
+        Preferences.addSetting({
+          id: PARENT_SETTING_ID,
+          deps: [DEP_SETTING_ID],
+          visible: deps => deps[DEP_SETTING_ID].value,
+        });
+
+        const parentSetting = Preferences.getSetting(PARENT_SETTING_ID);
+
+        ok(parentSetting.visible, "Parent setting is visible initially");
+
+        let settingChanged = waitForSettingChange(parentSetting);
+        Services.prefs.setBoolPref(DEP_PREF_ID, false);
+        await settingChanged;
+
+        ok(
+          !parentSetting.visible,
+          "Parent setting is not visible based on dep"
+        );
+      });
     </script>
   </head>
   <body>
