tor-browser

commit 5d62ceaa082881c5594adb279aab88801fdfef08
parent 232959e512092ed899323405358fae8ce442c90d
Author: Mark Striemer <mstriemer@mozilla.com>
Date:   Thu,  8 Jan 2026 05:28:00 +0000

Bug 1997198 - Part 1: Wrap setting-groups in moz-cards r=mconley

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

Diffstat:
M
browser/components/preferences/widgets/setting-group/setting-group.mjs
 | 
69
++++++++++++++++++++++++++++++++++++++++++++++-----------------------
M
browser/components/preferences/widgets/setting-pane/setting-pane.mjs
 | 
5
++++-

2 files changed, 50 insertions(+), 24 deletions(-)
diff --git a/browser/components/preferences/widgets/setting-group/setting-group.mjs b/browser/components/preferences/widgets/setting-group/setting-group.mjs
@@ -8,9 +8,12 @@ import {
   spread,
 } from "chrome://browser/content/preferences/widgets/setting-element.mjs";
 
-/** @import { SettingElementConfig } from "chrome://browser/content/preferences/widgets/setting-element.mjs" */
-/** @import { SettingControlConfig, SettingControlEvent } from "../setting-control/setting-control.mjs" */
-/** @import { Preferences } from "chrome://global/content/preferences/Preferences.mjs" */
+/**
+ * @import { SettingElementConfig } from "chrome://browser/content/preferences/widgets/setting-element.mjs"
+ * @import { SettingControlConfig, SettingControlEvent } from "../setting-control/setting-control.mjs"
+ * @import { Preferences } from "chrome://global/content/preferences/Preferences.mjs"
+ * @import { TemplateResult } from "chrome://global/content/vendor/lit.all.mjs";
+ */
 
 /**
  * @typedef {object} SettingGroupConfigExtensions
@@ -44,6 +47,18 @@ const HiddenAttr = Object.freeze({
 });
 
 export class SettingGroup extends SettingElement {
+  static properties = {
+    config: { type: Object },
+    groupId: { type: String },
+    getSetting: { type: Function },
+    srdEnabled: { type: Boolean },
+    inSubPane: { type: Boolean },
+  };
+
+  static queries = {
+    controlEls: { all: "setting-control" },
+  };
+
   constructor() {
     super();
 
@@ -57,20 +72,16 @@ export class SettingGroup extends SettingElement {
      */
     this.config = undefined;
 
+    /**
+     * Set by initSettingGroup based on browser.settings-redesign.enabled.
+     */
     this.srdEnabled = true;
+    /**
+     * Set by setting-pane if this is a sub pane so we can render cards even if SRD is off.
+     */
+    this.inSubPane = false;
   }
 
-  static properties = {
-    config: { type: Object },
-    groupId: { type: String },
-    getSetting: { type: Function },
-    srdEnabled: { type: Boolean },
-  };
-
-  static queries = {
-    controlEls: { all: "setting-control" },
-  };
-
   createRenderRoot() {
     return this;
   }
@@ -151,19 +162,31 @@ export class SettingGroup extends SettingElement {
     ></setting-control>`;
   }
 
+  /**
+   * @param {TemplateResult} content The content to render in a container.
+   */
+  containerTemplate(content) {
+    if (this.srdEnabled || this.inSubPane) {
+      return html`<moz-card>${content}</moz-card>`;
+    }
+    return content;
+  }
+
   render() {
     if (!this.config) {
       return "";
     }
-    return html`<moz-fieldset
-      .headingLevel=${this.config.headingLevel}
-      @change=${this.onChange}
-      @toggle=${this.onChange}
-      @click=${this.onClick}
-      @visibility-change=${this.handleVisibilityChange}
-      ${spread(this.getCommonPropertyMapping(this.config))}
-      >${this.config.items.map(item => this.itemTemplate(item))}</moz-fieldset
-    >`;
+    return this.containerTemplate(
+      html`<moz-fieldset
+        .headingLevel=${this.srdEnabled ? 2 : this.config.headingLevel}
+        @change=${this.onChange}
+        @toggle=${this.onChange}
+        @click=${this.onClick}
+        @visibility-change=${this.handleVisibilityChange}
+        ${spread(this.getCommonPropertyMapping(this.config))}
+        >${this.config.items.map(item => this.itemTemplate(item))}</moz-fieldset
+      >`
+    );
   }
 }
 customElements.define("setting-group", SettingGroup);
diff --git a/browser/components/preferences/widgets/setting-pane/setting-pane.mjs b/browser/components/preferences/widgets/setting-pane/setting-pane.mjs
@@ -129,7 +129,10 @@ export class SettingPane extends MozLitElement {
 
   /** @param {string} groupId */
   groupTemplate(groupId) {
-    return html`<setting-group groupid=${groupId}></setting-group>`;
+    return html`<setting-group
+      groupid=${groupId}
+      .inSubPane=${this.isSubPane}
+    ></setting-group>`;
   }
 
   render() {