commit df03e21143f20dca1e5e5309d4fc882372250093
parent 22046bf5f7b8f988c474fa5923c499f4ba01762a
Author: Anna Kulyk <akulyk@mozilla.com>
Date: Mon, 1 Dec 2025 17:56:58 +0000
Bug 2000727 - Support slot config for items/options in config-based settings r=hjones
Differential Revision: https://phabricator.services.mozilla.com/D273885
Diffstat:
5 files changed, 66 insertions(+), 10 deletions(-)
diff --git a/browser/components/preferences/main.js b/browser/components/preferences/main.js
@@ -1724,9 +1724,7 @@ SettingGroupManager.registerGroups({
{
control: "span",
l10nId: "windows-launch-on-login-disabled",
- controlAttrs: {
- slot: "message",
- },
+ slot: "message",
options: [
{
control: "a",
@@ -1763,8 +1761,8 @@ SettingGroupManager.registerGroups({
control: "moz-button",
l10nId: "set-as-my-default-browser",
id: "setDefaultButton",
+ slot: "actions",
controlAttrs: {
- slot: "actions",
type: "primary",
},
},
@@ -1874,9 +1872,9 @@ SettingGroupManager.registerGroups({
{
control: "a",
l10nId: "home-prefs-mission-message-learn-more-link",
+ slot: "support-link",
controlAttrs: {
is: "moz-support-link",
- slot: "support-link",
"support-page": "sponsor-privacy",
"utm-content": "inproduct",
},
@@ -2508,9 +2506,7 @@ SettingGroupManager.registerGroups({
id: "turnOffPrimaryPassword",
l10nId: "forms-primary-pw-turn-off",
control: "moz-button",
- controlAttrs: {
- slot: "actions",
- },
+ slot: "actions",
},
],
},
diff --git a/browser/components/preferences/tests/chrome/head.js b/browser/components/preferences/tests/chrome/head.js
@@ -18,6 +18,7 @@ async function testCommonSettingControlPropertiesSet(renderTemplateFunction) {
const supportPage = "https://support.page";
const subcategory = "the sub category";
const label = "foo-bar";
+ const slot = "foo";
const element = await renderTemplateFunction({
l10nId,
@@ -25,6 +26,7 @@ async function testCommonSettingControlPropertiesSet(renderTemplateFunction) {
iconSrc,
supportPage,
subcategory: "the sub category",
+ slot,
controlAttrs: {
label,
},
@@ -49,6 +51,8 @@ async function testCommonSettingControlPropertiesSet(renderTemplateFunction) {
is(element.iconSrc, iconSrc, "sets iconSrc");
is(element.supportPage, supportPage, "sets supportPage");
+
+ is(element.slot, slot, "sets slot");
}
/**
@@ -66,6 +70,7 @@ async function testCommonSettingControlPropertiesUnset(renderTemplateFunction) {
ok(!element.hasAttribute("label"), "no controlAttrs.label");
ok(!element.iconSrc, "no iconSrc");
ok(!element.supportPage, "no supportPage");
+ ok(!element.slot, "no slot");
}
/**
diff --git a/browser/components/preferences/tests/chrome/test_setting_control.html b/browser/components/preferences/tests/chrome/test_setting_control.html
@@ -547,6 +547,59 @@
"The control element no longer receives focus via keyboard interaction."
);
});
+
+ add_task(async function testSettingControlSlot() {
+ const SETTING_PARENT = "setting-control-slot-parent";
+ const SETTING_CHILD_ACTION = "setting-control-slot-child-action";
+
+ Preferences.addSetting({ id: SETTING_PARENT });
+ Preferences.addSetting({ id: SETTING_CHILD_ACTION });
+
+ const itemConfig = {
+ id: SETTING_PARENT,
+ l10nId: LABEL_L10N_ID,
+ control: "moz-box-item",
+ items: [
+ {
+ id: SETTING_CHILD_ACTION,
+ l10nId: LABEL_L10N_ID,
+ slot: "actions",
+ },
+ ],
+ };
+
+ const parentSetting = Preferences.getSetting(SETTING_PARENT);
+ const parentControl = await renderTemplate(itemConfig, parentSetting);
+
+ is(
+ parentControl.setting.id,
+ SETTING_PARENT,
+ "Parent control id is set"
+ );
+ ok(parentControl.controlEl, "Parent controlEl exists");
+
+ const nestedControl =
+ parentControl.controlEl.querySelector("setting-control");
+
+ is(
+ nestedControl.setting.id,
+ SETTING_CHILD_ACTION,
+ "Nested control id is set"
+ );
+ ok(nestedControl.controlEl, "Nested controlEl exists");
+ is(
+ nestedControl.getAttribute("slot"),
+ "actions",
+ "Nested setting-control has expected slot name"
+ );
+ is(
+ parentControl.controlEl.shadowRoot
+ .querySelector("slot[name='actions']")
+ .assignedElements()[0],
+ nestedControl,
+ "Nested setting-control is slotted in the parent control."
+ );
+ });
</script>
</head>
<body>
diff --git a/browser/components/preferences/tests/chrome/test_setting_control_options.html b/browser/components/preferences/tests/chrome/test_setting_control_options.html
@@ -414,16 +414,16 @@
options: [
{
control: "a",
+ slot: "support-link",
controlAttrs: {
href: "https://example.com/",
".textContent": "Link text",
- slot: "support-link",
},
},
{
control: "a",
+ slot: "support-link",
controlAttrs: {
- slot: "support-link",
is: "moz-support-link",
"support-page": "get-help",
},
diff --git a/browser/components/preferences/widgets/setting-element/setting-element.mjs b/browser/components/preferences/widgets/setting-element/setting-element.mjs
@@ -20,6 +20,7 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
* @property {Record<string, string>} [l10nArgs] - An object containing l10n IDs and their values that will be translated with Fluent
* @property {Record<string, any>} [controlAttrs] - An object of additional attributes to be set on the control. These can be used to further customize the control for example a message bar of the warning type, or what dialog a button should open
* @property {string} [iconSrc] - A path to the icon for the control (if the control supports one)
+ * @property {string} [slot] - The named slot for the control
* @property {string} [supportPage] - The SUMO support page slug for the setting
* @property {string} [subcategory] - The sub-category slug used for direct linking to a setting from SUMO
*/
@@ -125,6 +126,7 @@ export class SettingElement extends MozLitElement {
"data-subcategory": config.subcategory,
".supportPage":
config.supportPage != undefined ? config.supportPage : undefined,
+ slot: config.slot,
...config.controlAttrs,
};
}
