corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1945700 - Add a boolean background property to dismiss buttons that enables contrasting colours r=omc-reviewers,aminomancer

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D237640
This commit is contained in:
Emily McMinn
2025-02-28 23:12:17 +00:00
parent bea3043c03
commit c4129a5ba8
8 changed files with 216 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
browser/components/aboutwelcome/content-src/aboutwelcome.scss
View File

@@ -2086,6 +2086,18 @@ html {
left: 0;
right: auto;
}
&.with-background {
background-color: var(--in-content-page-background);
&:hover {
background-color: var(--button-background-color-hover);
}
&:active {
background-color: var(--button-background-color-active);
}
}
}
@keyframes fadein {

4
browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx
View File

@@ -307,11 +307,11 @@ export class ProtonScreen extends React.PureComponent {
}
renderDismissButton() {
const { size, marginBlock, marginInline, label } =
const { size, marginBlock, marginInline, label, background } =
this.props.content.dismiss_button;
return (
<button
className="dismiss-button"
className={`dismiss-button ${background ? "with-background" : ""}`}
onClick={this.props.handleAction}
value="dismiss_button"
data-l10n-id={label?.string_id || "spotlight-dialog-close-button"}

5
browser/components/aboutwelcome/content/aboutwelcome.bundle.js
View File

@@ -1137,10 +1137,11 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
size,
marginBlock,
marginInline,
label
label,
background
} = this.props.content.dismiss_button;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "dismiss-button",
className: `dismiss-button ${background ? "with-background" : ""}`,
onClick: this.props.handleAction,
value: "dismiss_button",
"data-l10n-id": label?.string_id || "spotlight-dialog-close-button",

106
browser/components/aboutwelcome/content/aboutwelcome.css
View File

@@ -30,6 +30,9 @@
--fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
--fc-link-color-active: var(--fc-link-color-active-light, #053E94);
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
position: absolute;
z-index: 2147483647;
outline: none;
@@ -76,8 +79,78 @@
--fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
--fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
}
}
:root[lwt-popup=light] #feature-callout:not(.simulateContent) {
color-scheme: light;
--fc-background: var(--fc-background-light, #FFF);
--fc-color: var(--fc-color-light, rgb(21, 20, 26));
--fc-border: var(--fc-border-light, #CFCFD8);
--fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
--fc-button-background: var(--fc-button-background-light, #F0F0F4);
--fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
--fc-button-border: var(--fc-button-border-light, transparent);
--fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
--fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
--fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
--fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
--fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
--fc-button-border-active: var(--fc-button-border-active-light, transparent);
--fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
--fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
--fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
--fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
--fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
--fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
--fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
--fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
--fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
--fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
--fc-link-color: var(--fc-link-color-light, #0061E0);
--fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
--fc-link-color-active: var(--fc-link-color-active-light, #053E94);
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
}
:root[lwt-popup=dark] #feature-callout:not(.simulateContent) {
color-scheme: dark;
--fc-background: var(--fc-background-dark, rgb(43, 42, 51));
--fc-color: var(--fc-color-dark, rgb(251, 251, 254));
--fc-border: var(--fc-border-dark, #3A3944);
--fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
--fc-button-background: var(--fc-button-background-dark, #2B2A33);
--fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
--fc-button-border: var(--fc-button-border-dark, transparent);
--fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
--fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
--fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
--fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
--fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
--fc-button-border-active: var(--fc-button-border-active-dark, transparent);
--fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
--fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
--fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
--fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
--fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
--fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
--fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
--fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
--fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
--fc-link-color: var(--fc-link-color-dark, #00DDFF);
--fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
--fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
}
@media (prefers-contrast) {
#feature-callout {
--fc-background: var(--fc-background-hcm, -moz-dialog);
@@ -107,6 +180,9 @@
--fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
--fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
--fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-hcm, -moz-dialog);
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
}
}
#feature-callout.simulateContent {
@@ -141,6 +217,9 @@
--fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
--fc-link-color-active: var(--fc-link-color-active-light, #053E94);
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
}
}
@media (-moz-content-prefers-color-scheme: dark) {
@@ -171,6 +250,9 @@
--fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
--fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
}
}
:root[lwt-newtab-brighttext] #feature-callout.simulateContent.lwtNewtab {
@@ -201,6 +283,9 @@
--fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
--fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
}
@media (prefers-contrast) {
@@ -232,6 +317,9 @@
--fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
--fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
--fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-hcm, -moz-dialog);
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
}
}
panel#feature-callout {
@@ -446,6 +534,15 @@ div#feature-callout.hidden {
min-height: 24px;
min-width: 24px;
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background {
background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg);
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover {
background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg-hover);
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover:active {
background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg-active);
}
#feature-callout .screen[pos=callout] .action-buttons {
display: flex;
flex-flow: row nowrap;
@@ -3043,6 +3140,15 @@ html {
left: 0;
right: auto;
}
.onboardingContainer .dismiss-button.with-background {
background-color: var(--in-content-page-background);
}
.onboardingContainer .dismiss-button.with-background:hover {
background-color: var(--button-background-color-hover);
}
.onboardingContainer .dismiss-button.with-background:active {
background-color: var(--button-background-color-active);
}
@keyframes fadein {
from {
opacity: 0;

10
browser/components/asrouter/content-src/styles/_feature-callout-theme.scss
View File

@@ -33,6 +33,9 @@
--fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
--fc-link-color-active: var(--fc-link-color-active-light, #053E94);
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
}
@mixin dark-theme {
@@ -62,6 +65,10 @@
--fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
--fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
}
@mixin hcm-theme {
@@ -92,4 +99,7 @@
--fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
--fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
--fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-hcm, -moz-dialog);
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
}

24
browser/components/asrouter/content-src/styles/_feature-callout.scss
View File

@@ -24,6 +24,18 @@
@include dark-theme;
}
@at-root :root[lwt-popup='light'] #{&}:not(.simulateContent) {
color-scheme: light;
@include light-theme;
}
@at-root :root[lwt-popup='dark'] #{&}:not(.simulateContent) {
color-scheme: dark;
@include dark-theme;
}
@media (prefers-contrast) {
@include hcm-theme;
}
@@ -366,6 +378,18 @@
min-height: 24px;
min-width: 24px;
}
&.with-background {
background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px, var(--fc-dismiss-button-bg);
&:hover {
background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px, var(--fc-dismiss-button-bg-hover);
&:active {
background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px, var(--fc-dismiss-button-bg-active);
}
}
}
}
}

56
browser/components/asrouter/modules/FeatureCallout.sys.mjs
View File

@@ -1955,6 +1955,9 @@ export class FeatureCallout {
"link-color-hover",
"link-color-active",
"icon-success-color",
"dismiss-button-bg",
"dismiss-button-bg-hover",
"dismiss-button-bg-active",
];
/** @type {Object<String, FeatureCalloutTheme>} */
@@ -2002,6 +2005,12 @@ export class FeatureCallout {
"link-color-hover": "LinkText",
"link-color-active": "ActiveText",
"link-color-visited": "VisitedText",
"dismiss-button-bg":
"var(--newtab-background-color, var(--in-content-page-background)) linear-gradient(var(--newtab-background-color-secondary), var(--newtab-background-color-secondary))",
"dismiss-button-bg-hover":
"var(--newtab-background-color, var(--in-content-page-background)) linear-gradient(color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary)), color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary)))",
"dismiss-button-bg-active":
"var(--newtab-background-color, var(--in-content-page-background)) linear-gradient(color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary)), color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary)))",
},
dark: {
border:
@@ -2024,6 +2033,11 @@ export class FeatureCallout {
"button-background-active": "ButtonText",
"button-color-active": "ButtonFace",
"button-border-active": "ButtonText",
"dismiss-button-bg": "-moz-dialog",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, -moz-dialog)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, -moz-dialog)",
},
},
// PDF.js colors are from toolkit/components/pdfjs/content/web/viewer.css
@@ -2047,6 +2061,10 @@ export class FeatureCallout {
"link-color-hover": "LinkText",
"link-color-active": "ActiveText",
"link-color-visited": "VisitedText",
"dismiss-button-bg": "#FFF",
"dismiss-button-bg-hover": "color-mix(in srgb, currentColor 14%, #FFF)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, #FFF)",
},
dark: {
background: "#1C1B22",
@@ -2058,6 +2076,11 @@ export class FeatureCallout {
"button-color-hover": "#F9F9FA",
"button-background-active": "rgb(102, 102, 103)",
"button-color-active": "#F9F9FA",
"dismiss-button-bg": "#1C1B22",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, #1C1B22)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, #1C1B22)",
},
hcm: {
background: "-moz-dialog",
@@ -2073,6 +2096,11 @@ export class FeatureCallout {
"button-background-active": "Highlight",
"button-color-active": "CanvasText",
"button-border-active": "Highlight",
"dismiss-button-bg": "-moz-dialog",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, -moz-dialog)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, -moz-dialog)",
},
},
newtab: {
@@ -2098,6 +2126,12 @@ export class FeatureCallout {
"link-color-active": "color-mix(in srgb, rgb(0, 97, 224) 80%, #000)",
"link-color-visited": "rgb(0, 97, 224)",
"icon-success-color": "#2AC3A2",
"dismiss-button-bg":
"var(--newtab-background-color, #F9F9FB) linear-gradient(var(--newtab-background-color-secondary, #FFF), var(--newtab-background-color-secondary, #FFF))",
"dismiss-button-bg-hover":
"var(--newtab-background-color, #F9F9FB) linear-gradient(color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary, #FFF)), color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary, #FFF)))",
"dismiss-button-bg-active":
"var(--newtab-background-color, #F9F9FB) linear-gradient(color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary, #FFF)), color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary, #FFF)))",
},
dark: {
"accent-color": "rgb(0, 221, 255)",
@@ -2113,6 +2147,12 @@ export class FeatureCallout {
"link-color-active": "color-mix(in srgb, rgb(0, 221, 255) 60%, #FFF)",
"link-color-visited": "rgb(0, 221, 255)",
"icon-success-color": "#54FFBD",
"dismiss-button-bg":
"var(--newtab-background-color, #2B2A33) linear-gradient(var(--newtab-background-color-secondary, #42414D), var(--newtab-background-color-secondary, #42414D))",
"dismiss-button-bg-hover":
"var(--newtab-background-color, #2B2A33) linear-gradient(color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary, #42414D)), color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary, #42414D)))",
"dismiss-button-bg-active":
"var(--newtab-background-color, #2B2A33) linear-gradient(color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary, #42414D), color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary, #42414D)))",
},
hcm: {
background: "-moz-dialog",
@@ -2132,6 +2172,11 @@ export class FeatureCallout {
"link-color-hover": "LinkText",
"link-color-active": "ActiveText",
"link-color-visited": "VisitedText",
"dismiss-button-bg": "-moz-dialog",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, -moz-dialog)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, -moz-dialog)",
},
},
// These colors are intended to inherit the user's theme properties from the
@@ -2173,9 +2218,20 @@ export class FeatureCallout {
"link-color-active": "ActiveText",
"link-color-visited": "VisitedText",
"icon-success-color": "var(--attention-dot-color)",
"dismiss-button-bg":
"Menu linear-gradient(var(--arrowpanel-background), var(--arrowpanel-background))",
"dismiss-button-bg-hover":
"Menu linear-gradient(color-mix(in srgb, currentColor 14%, var(--arrowpanel-background)))",
"dismiss-button-bg-active":
"Menu linear-gradient(color-mix(in srgb, currentColor 21%, var(--arrowpanel-background)))",
},
hcm: {
background: "var(--arrowpanel-background)",
"dismiss-button-bg": "var(--arrowpanel-background)",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, var(--arrowpanel-background))",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, var(--arrowpanel-background))",
},
},
};

3
browser/components/asrouter/modules/FeatureCalloutMessages.sys.mjs
View File

@@ -285,6 +285,9 @@ const MESSAGES = () => {
skip_in_tests:
"not tested in automation and might pop up unexpectedly during review checker tests",
},
// Appears the first time a user uses the "save and close" action on a tab group,
// anchored to the alltabs-button. Will only show if at least an hour has passed
// since the CREATE_TAB_GROUP callout showed.
{
id: "SAVE_TAB_GROUP_ONBOARDING_CALLOUT",
template: "feature_callout",