Skip to content

Commit df03e21

Browse files
anna-kulykanna-kulyk
committed
Bug 2000727 - Support slot config for items/options in config-based settings r=hjones
Differential Revision: https://phabricator.services.mozilla.com/D273885
1 parent 22046bf commit df03e21

File tree

5 files changed

+66
-10
lines changed

5 files changed

+66
-10
lines changed

‎browser/components/preferences/main.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1724,9 +1724,7 @@ SettingGroupManager.registerGroups({
17241724
{
17251725
control: "span",
17261726
l10nId: "windows-launch-on-login-disabled",
1727-
controlAttrs: {
1728-
slot: "message",
1729-
},
1727+
slot: "message",
17301728
options: [
17311729
{
17321730
control: "a",
@@ -1763,8 +1761,8 @@ SettingGroupManager.registerGroups({
17631761
control: "moz-button",
17641762
l10nId: "set-as-my-default-browser",
17651763
id: "setDefaultButton",
1764+
slot: "actions",
17661765
controlAttrs: {
1767-
slot: "actions",
17681766
type: "primary",
17691767
},
17701768
},
@@ -1874,9 +1872,9 @@ SettingGroupManager.registerGroups({
18741872
{
18751873
control: "a",
18761874
l10nId: "home-prefs-mission-message-learn-more-link",
1875+
slot: "support-link",
18771876
controlAttrs: {
18781877
is: "moz-support-link",
1879-
slot: "support-link",
18801878
"support-page": "sponsor-privacy",
18811879
"utm-content": "inproduct",
18821880
},
@@ -2508,9 +2506,7 @@ SettingGroupManager.registerGroups({
25082506
id: "turnOffPrimaryPassword",
25092507
l10nId: "forms-primary-pw-turn-off",
25102508
control: "moz-button",
2511-
controlAttrs: {
2512-
slot: "actions",
2513-
},
2509+
slot: "actions",
25142510
},
25152511
],
25162512
},

‎browser/components/preferences/tests/chrome/head.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,15 @@ async function testCommonSettingControlPropertiesSet(renderTemplateFunction) {
1818
const supportPage = "https://support.page";
1919
const subcategory = "the sub category";
2020
const label = "foo-bar";
21+
const slot = "foo";
2122

2223
const element = await renderTemplateFunction({
2324
l10nId,
2425
l10nArgs,
2526
iconSrc,
2627
supportPage,
2728
subcategory: "the sub category",
29+
slot,
2830
controlAttrs: {
2931
label,
3032
},
@@ -49,6 +51,8 @@ async function testCommonSettingControlPropertiesSet(renderTemplateFunction) {
4951
is(element.iconSrc, iconSrc, "sets iconSrc");
5052

5153
is(element.supportPage, supportPage, "sets supportPage");
54+
55+
is(element.slot, slot, "sets slot");
5256
}
5357

5458
/**
@@ -66,6 +70,7 @@ async function testCommonSettingControlPropertiesUnset(renderTemplateFunction) {
6670
ok(!element.hasAttribute("label"), "no controlAttrs.label");
6771
ok(!element.iconSrc, "no iconSrc");
6872
ok(!element.supportPage, "no supportPage");
73+
ok(!element.slot, "no slot");
6974
}
7075

7176
/**

‎browser/components/preferences/tests/chrome/test_setting_control.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -547,6 +547,59 @@
547547
"The control element no longer receives focus via keyboard interaction."
548548
);
549549
});
550+
551+
add_task(async function testSettingControlSlot() {
552+
const SETTING_PARENT = "setting-control-slot-parent";
553+
const SETTING_CHILD_ACTION = "setting-control-slot-child-action";
554+
555+
Preferences.addSetting({ id: SETTING_PARENT });
556+
Preferences.addSetting({ id: SETTING_CHILD_ACTION });
557+
558+
const itemConfig = {
559+
id: SETTING_PARENT,
560+
l10nId: LABEL_L10N_ID,
561+
control: "moz-box-item",
562+
items: [
563+
{
564+
id: SETTING_CHILD_ACTION,
565+
l10nId: LABEL_L10N_ID,
566+
slot: "actions",
567+
},
568+
],
569+
};
570+
571+
const parentSetting = Preferences.getSetting(SETTING_PARENT);
572+
const parentControl = await renderTemplate(itemConfig, parentSetting);
573+
574+
is(
575+
parentControl.setting.id,
576+
SETTING_PARENT,
577+
"Parent control id is set"
578+
);
579+
ok(parentControl.controlEl, "Parent controlEl exists");
580+
581+
const nestedControl =
582+
parentControl.controlEl.querySelector("setting-control");
583+
584+
is(
585+
nestedControl.setting.id,
586+
SETTING_CHILD_ACTION,
587+
"Nested control id is set"
588+
);
589+
ok(nestedControl.controlEl, "Nested controlEl exists");
590+
is(
591+
nestedControl.getAttribute("slot"),
592+
"actions",
593+
"Nested setting-control has expected slot name"
594+
);
595+
is(
596+
parentControl.controlEl.shadowRoot
597+
.querySelector("slot[name='actions']")
598+
.assignedElements()[0],
599+
nestedControl,
600+
"Nested setting-control is slotted in the parent control."
601+
);
602+
});
550603
</script>
551604
</head>
552605
<body>

‎browser/components/preferences/tests/chrome/test_setting_control_options.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -414,16 +414,16 @@
414414
options: [
415415
{
416416
control: "a",
417+
slot: "support-link",
417418
controlAttrs: {
418419
href: "https://example.com/",
419420
".textContent": "Link text",
420-
slot: "support-link",
421421
},
422422
},
423423
{
424424
control: "a",
425+
slot: "support-link",
425426
controlAttrs: {
426-
slot: "support-link",
427427
is: "moz-support-link",
428428
"support-page": "get-help",
429429
},

‎browser/components/preferences/widgets/setting-element/setting-element.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
2020
* @property {Record<string, string>} [l10nArgs] - An object containing l10n IDs and their values that will be translated with Fluent
2121
* @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
2222
* @property {string} [iconSrc] - A path to the icon for the control (if the control supports one)
23+
* @property {string} [slot] - The named slot for the control
2324
* @property {string} [supportPage] - The SUMO support page slug for the setting
2425
* @property {string} [subcategory] - The sub-category slug used for direct linking to a setting from SUMO
2526
*/
@@ -125,6 +126,7 @@ export class SettingElement extends MozLitElement {
125126
"data-subcategory": config.subcategory,
126127
".supportPage":
127128
config.supportPage != undefined ? config.supportPage : undefined,
129+
slot: config.slot,
128130
...config.controlAttrs,
129131
};
130132
}

0 commit comments

Comments
 (0)