diff options
Diffstat (limited to 'browser/components/aboutwelcome')
13 files changed, 449 insertions, 52 deletions
diff --git a/browser/components/aboutwelcome/.eslintrc.js b/browser/components/aboutwelcome/.eslintrc.js index 1168a8e840..0b8e1cc676 100644 --- a/browser/components/aboutwelcome/.eslintrc.js +++ b/browser/components/aboutwelcome/.eslintrc.js @@ -80,8 +80,6 @@ module.exports = { }, ], rules: { - "fetch-options/no-fetch-credentials": "error", - "react/jsx-boolean-value": ["error", "always"], "react/jsx-key": "error", "react/jsx-no-bind": [ diff --git a/browser/components/aboutwelcome/actors/AboutWelcomeParent.sys.mjs b/browser/components/aboutwelcome/actors/AboutWelcomeParent.sys.mjs index 7b32161e3b..258eff36ef 100644 --- a/browser/components/aboutwelcome/actors/AboutWelcomeParent.sys.mjs +++ b/browser/components/aboutwelcome/actors/AboutWelcomeParent.sys.mjs @@ -70,7 +70,7 @@ class AboutWelcomeObserver { this.win.addEventListener("unload", this.onWindowClose, { once: true }); } - observe(aSubject, aTopic, aData) { + observe(aSubject, aTopic) { switch (aTopic) { case "quit-application": this.terminateReason = AWTerminate.APP_SHUT_DOWN; diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss index 9174fe2439..07bfcd2c96 100644 --- a/browser/components/aboutwelcome/content-src/aboutwelcome.scss +++ b/browser/components/aboutwelcome/content-src/aboutwelcome.scss @@ -1139,6 +1139,38 @@ html { &[no-rdm] { width: 800px; + + &[reverse-split] { + flex-direction: row-reverse; + + .section-main { + .main-content { + border-radius: inherit; + } + + margin: auto; + margin-inline-end: 0; + border-radius: 8px 0 0 8px; + + &:dir(rtl) { + border-radius: 0 8px 8px 0; + margin: auto; + margin-inline-end: 0; + } + } + + .section-secondary { + margin: auto; + margin-inline-start: 0; + border-radius: 0 8px 8px 0; + + &:dir(rtl) { + border-radius: 8px 0 0 8px; + margin: auto; + margin-inline-start: 0; + } + } + } } } @@ -1372,6 +1404,107 @@ html { outline: 2px solid var(--in-content-primary-button-background); } + // newtab wallpaper specific styles + &.wallpaper { + justify-content: center; + gap: 10px; + + &:hover, &:focus-within { + outline: none; + } + + .theme { + flex: unset; + width: unset; + transition: var(--transition); + + &:has(.input:focus) { + outline: 2px solid var(--in-content-primary-button-background); + outline-offset: 2px; + } + + .icon { + width: 116px; + height: 86px; + border-radius: 8px; + box-shadow: 0 1px 2px 0 #3A394433; + + &:hover { + filter: brightness(45%); + } + + // dark theme wallpapers + &.dark-landscape { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-landscape.avif'); + } + + &.dark-beach { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-beach.avif'); + } + + &.dark-color { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-color.avif'); + } + + &.dark-mountain { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-mountain.avif'); + } + + &.dark-panda { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-panda.avif'); + } + + &.dark-sky { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-sky.avif'); + } + + // light theme wallpapers + &.light-beach { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-beach.avif'); + } + + &.light-color { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-color.avif'); + } + + &.light-landscape { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-landscape.avif'); + } + + &.light-mountain { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-mountain.avif'); + } + + &.light-panda { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-panda.avif'); + } + + &.light-sky { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-sky.avif'); + } + } + } + + .dark { + display: none; + } + + .text { + display: none; + } + + @media (prefers-color-scheme: dark) { + .light { + display: none; + } + + .dark { + display: block; + } + } + + } + .theme { align-items: center; display: flex; @@ -1405,13 +1538,17 @@ html { transform: scaleX(-1); } - &:focus, + &:focus-visible, &:active, &.selected { outline: 2px solid var(--in-content-primary-button-background); outline-offset: 2px; } + &.selected { + outline-color: var(--color-accent-primary-active); + } + &.light { background-image: url('resource://builtin-themes/light/icon.svg'); } diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx index 034055bf3d..3ccbd71f40 100644 --- a/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx +++ b/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx @@ -463,9 +463,21 @@ export class WelcomeScreen extends React.PureComponent { action.theme === "<event>" ? event.currentTarget.value : this.props.initialTheme || action.theme; - this.props.setActiveTheme(themeToUse); - window.AWSelectTheme(themeToUse); + if (props.content.tiles?.category?.type === "wallpaper") { + const theme = themeToUse.split("-")?.[1]; + let actionWallpaper = { ...props.content.tiles.category.action }; + actionWallpaper.data.actions.forEach(async wpAction => { + if (wpAction.data.pref.name?.includes("dark")) { + wpAction.data.pref.value = `dark-${theme}`; + } else { + wpAction.data.pref.value = `light-${theme}`; + } + await AboutWelcomeUtils.handleUserAction(actionWallpaper); + }); + } else { + window.AWSelectTheme(themeToUse); + } } // If the action has persistActiveTheme: true, we set the initial theme to the currently active theme diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx index 59771e4e48..b6e1ffa6b5 100644 --- a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx +++ b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx @@ -570,32 +570,39 @@ export class ProtonScreen extends React.PureComponent { </div> ) : null} - <div className="main-content-inner"> - <div className={`welcome-text ${content.title_style || ""}`}> - {content.title ? this.renderTitle(content) : null} + <div + className="main-content-inner" + style={{ + justifyContent: content.split_content_justify_content, + }} + > + {content.title || content.subtitle ? ( + <div className={`welcome-text ${content.title_style || ""}`}> + {content.title ? this.renderTitle(content) : null} - {content.subtitle ? ( - <Localized text={content.subtitle}> - <h2 - data-l10n-args={JSON.stringify({ - "addon-name": this.props.addonName, - ...this.props.appAndSystemLocaleInfo?.displayNames, - })} - aria-flowto={ - this.props.messageId?.includes("FEATURE_TOUR") - ? "steps" - : "" - } + {content.subtitle ? ( + <Localized text={content.subtitle}> + <h2 + data-l10n-args={JSON.stringify({ + "addon-name": this.props.addonName, + ...this.props.appAndSystemLocaleInfo?.displayNames, + })} + aria-flowto={ + this.props.messageId?.includes("FEATURE_TOUR") + ? "steps" + : "" + } + /> + </Localized> + ) : null} + {content.cta_paragraph ? ( + <CTAParagraph + content={content.cta_paragraph} + handleAction={this.props.handleAction} /> - </Localized> - ) : null} - {content.cta_paragraph ? ( - <CTAParagraph - content={content.cta_paragraph} - handleAction={this.props.handleAction} - /> - ) : null} - </div> + ) : null} + </div> + ) : null} {content.video_container ? ( <OnboardingVideo content={content.video_container} diff --git a/browser/components/aboutwelcome/content-src/components/Themes.jsx b/browser/components/aboutwelcome/content-src/components/Themes.jsx index 0ee986f982..e430ecf3aa 100644 --- a/browser/components/aboutwelcome/content-src/components/Themes.jsx +++ b/browser/components/aboutwelcome/content-src/components/Themes.jsx @@ -6,28 +6,29 @@ import React from "react"; import { Localized } from "./MSLocalized"; export const Themes = props => { + const category = props.content.tiles?.category?.type; return ( <div className="tiles-theme-container"> <div> - <fieldset className="tiles-theme-section"> + <fieldset className={`tiles-theme-section ${category}`}> <Localized text={props.content.subtitle}> <legend className="sr-only" /> </Localized> {props.content.tiles.data.map( - ({ theme, label, tooltip, description }) => ( + ({ theme, label, tooltip, description, type }) => ( <Localized key={theme + label} text={typeof tooltip === "object" ? tooltip : {}} > {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - <label className="theme" title={theme + label}> + <label className={`theme ${type}`} title={theme + label}> <Localized text={typeof description === "object" ? description : {}} > <input type="radio" value={theme} - name="theme" + name={category === "wallpaper" ? theme : "theme"} checked={theme === props.activeTheme} className="sr-only input" onClick={props.handleAction} diff --git a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js index 0d96257677..11a398e960 100644 --- a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js +++ b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js @@ -560,7 +560,22 @@ class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo if (action.theme) { let themeToUse = action.theme === "<event>" ? event.currentTarget.value : this.props.initialTheme || action.theme; this.props.setActiveTheme(themeToUse); - window.AWSelectTheme(themeToUse); + if (props.content.tiles?.category?.type === "wallpaper") { + const theme = themeToUse.split("-")?.[1]; + let actionWallpaper = { + ...props.content.tiles.category.action + }; + actionWallpaper.data.actions.forEach(async wpAction => { + if (wpAction.data.pref.name?.includes("dark")) { + wpAction.data.pref.value = `dark-${theme}`; + } else { + wpAction.data.pref.value = `light-${theme}`; + } + await _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.handleUserAction(actionWallpaper); + }); + } else { + window.AWSelectTheme(themeToUse); + } } // If the action has persistActiveTheme: true, we set the initial theme to the currently active theme @@ -1214,8 +1229,11 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom alt: "", role: "presentation" })) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - className: "main-content-inner" - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { + className: "main-content-inner", + style: { + justifyContent: content.split_content_justify_content + } + }, content.title || content.subtitle ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `welcome-text ${content.title_style || ""}` }, content.title ? this.renderTitle(content) : null, content.subtitle ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { text: content.subtitle @@ -1228,7 +1246,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom })) : null, content.cta_paragraph ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_CTAParagraph__WEBPACK_IMPORTED_MODULE_8__.CTAParagraph, { content: content.cta_paragraph, handleAction: this.props.handleAction - }) : null), content.video_container ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__.OnboardingVideo, { + }) : null) : null, content.video_container ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__.OnboardingVideo, { content: content.video_container, handleAction: this.props.handleAction }) : null, this.renderContentTiles(), this.renderLanguageSwitcher(), content.above_button_content ? this.renderOrderedContent(content.above_button_content) : null, !hideStepsIndicator && aboveButtonStepsIndicator ? this.renderStepsIndicator() : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ProtonScreenActionButtons, { @@ -1448,10 +1466,11 @@ __webpack_require__.r(__webpack_exports__); const Themes = props => { + const category = props.content.tiles?.category?.type; return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "tiles-theme-container" }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("fieldset", { - className: "tiles-theme-section" + className: `tiles-theme-section ${category}` }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { text: props.content.subtitle }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("legend", { @@ -1460,19 +1479,20 @@ const Themes = props => { theme, label, tooltip, - description + description, + type }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { key: theme + label, text: typeof tooltip === "object" ? tooltip : {} }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", { - className: "theme", + className: `theme ${type}`, title: theme + label }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { text: typeof description === "object" ? description : {} }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "radio", value: theme, - name: "theme", + name: category === "wallpaper" ? theme : "theme", checked: theme === props.activeTheme, className: "sr-only input", onClick: props.handleAction diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css index 411f6d4f9b..4e86b29e5d 100644 --- a/browser/components/aboutwelcome/content/aboutwelcome.css +++ b/browser/components/aboutwelcome/content/aboutwelcome.css @@ -167,6 +167,35 @@ --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF); } } +:root[lwt-newtab-brighttext] #feature-callout.simulateContent.lwtNewtab { + 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); +} + @media (prefers-contrast) { #feature-callout.simulateContent { --fc-background: var(--fc-background-hcm, -moz-dialog); @@ -1867,6 +1896,32 @@ html { .onboardingContainer .screen[pos=split][no-rdm] { width: 800px; } + .onboardingContainer .screen[pos=split][no-rdm][reverse-split] { + flex-direction: row-reverse; + } + .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main { + margin: auto; + margin-inline-end: 0; + border-radius: 8px 0 0 8px; + } + .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main .main-content { + border-radius: inherit; + } + .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main:dir(rtl) { + border-radius: 0 8px 8px 0; + margin: auto; + margin-inline-end: 0; + } + .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary { + margin: auto; + margin-inline-start: 0; + border-radius: 0 8px 8px 0; + } + .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary:dir(rtl) { + border-radius: 8px 0 0 8px; + margin: auto; + margin-inline-start: 0; + } } @media only screen and (height <= 650px) and (800px <= width <= 990px) { .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top { @@ -2062,6 +2117,81 @@ html { border-radius: 8px; outline: 2px solid var(--in-content-primary-button-background); } +.onboardingContainer .tiles-theme-section.wallpaper { + justify-content: center; + gap: 10px; +} +.onboardingContainer .tiles-theme-section.wallpaper:hover, .onboardingContainer .tiles-theme-section.wallpaper:focus-within { + outline: none; +} +.onboardingContainer .tiles-theme-section.wallpaper .theme { + flex: unset; + width: unset; + transition: var(--transition); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme:has(.input:focus) { + outline: 2px solid var(--in-content-primary-button-background); + outline-offset: 2px; +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon { + width: 116px; + height: 86px; + border-radius: 8px; + box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.2); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon:hover { + filter: brightness(45%); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.dark-landscape { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-landscape.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.dark-beach { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-beach.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.dark-color { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-color.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.dark-mountain { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-mountain.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.dark-panda { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-panda.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.dark-sky { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-sky.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.light-beach { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-beach.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.light-color { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-color.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.light-landscape { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-landscape.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.light-mountain { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-mountain.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.light-panda { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-panda.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .theme .icon.light-sky { + background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-sky.avif"); +} +.onboardingContainer .tiles-theme-section.wallpaper .dark { + display: none; +} +.onboardingContainer .tiles-theme-section.wallpaper .text { + display: none; +} +@media (prefers-color-scheme: dark) { + .onboardingContainer .tiles-theme-section.wallpaper .light { + display: none; + } + .onboardingContainer .tiles-theme-section.wallpaper .dark { + display: block; + } +} .onboardingContainer .tiles-theme-section .theme { align-items: center; display: flex; @@ -2092,10 +2222,13 @@ html { .onboardingContainer .tiles-theme-section .theme .icon:dir(rtl) { transform: scaleX(-1); } -.onboardingContainer .tiles-theme-section .theme .icon:focus, .onboardingContainer .tiles-theme-section .theme .icon:active, .onboardingContainer .tiles-theme-section .theme .icon.selected { +.onboardingContainer .tiles-theme-section .theme .icon:focus-visible, .onboardingContainer .tiles-theme-section .theme .icon:active, .onboardingContainer .tiles-theme-section .theme .icon.selected { outline: 2px solid var(--in-content-primary-button-background); outline-offset: 2px; } +.onboardingContainer .tiles-theme-section .theme .icon.selected { + outline-color: var(--color-accent-primary-active); +} .onboardingContainer .tiles-theme-section .theme .icon.light { background-image: url("resource://builtin-themes/light/icon.svg"); } diff --git a/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js b/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js index 3081688a0c..f3bea5b499 100644 --- a/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js +++ b/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js @@ -249,7 +249,7 @@ add_task(async function test_aboutwelcome_with_title_styles() { { "font-weight": "276", "font-size": "36px", - animation: "50s linear 0s infinite normal none running shine", + animation: "50s linear infinite shine", "letter-spacing": "normal", } ); diff --git a/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_toolbar_button.js b/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_toolbar_button.js index c9180ddf2d..308c27a427 100644 --- a/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_toolbar_button.js +++ b/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_toolbar_button.js @@ -32,7 +32,7 @@ add_task(async function test_add_and_remove_toolbar_button() { }); // Open newtab let win = await BrowserTestUtils.openNewBrowserWindow(); - win.BrowserOpenTab(); + win.BrowserCommands.openTab(); ok(win, "browser exists"); // Try to add the button. It shouldn't add because the pref is false await AWToolbarButton.maybeAddSetupButton(); diff --git a/browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx b/browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx index 9b452d5c6b..ed0260bf30 100644 --- a/browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx +++ b/browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx @@ -671,4 +671,27 @@ describe("MultiStageAboutWelcomeProton module", () => { assert.isTrue(wrapper.find("migration-wizard").exists()); }); }); + + describe("Custom main content inner custom justify content", () => { + const SCREEN_PROPS = { + content: { + title: "test title", + position: "split", + split_content_justify_content: "flex-start", + }, + }; + + it("should render split screen with custom justify-content", async () => { + const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />); + assert.ok(wrapper.exists()); + assert.equal(wrapper.find("main").prop("pos"), "split"); + assert.exists(wrapper.find(".main-content-inner")); + assert.ok( + wrapper + .find(".main-content-inner") + .prop("style") + .justifyContent.includes("flex-start") + ); + }); + }); }); diff --git a/browser/components/aboutwelcome/tests/unit/MultiStageAboutWelcome.test.jsx b/browser/components/aboutwelcome/tests/unit/MultiStageAboutWelcome.test.jsx index b4593a45f3..2fb897125d 100644 --- a/browser/components/aboutwelcome/tests/unit/MultiStageAboutWelcome.test.jsx +++ b/browser/components/aboutwelcome/tests/unit/MultiStageAboutWelcome.test.jsx @@ -383,6 +383,72 @@ describe("MultiStageAboutWelcome module", () => { ); }); }); + + describe("Wallpaper screen", () => { + let WALLPAPER_SCREEN_PROPS; + beforeEach(() => { + WALLPAPER_SCREEN_PROPS = { + content: { + title: "test title", + subtitle: "test subtitle", + tiles: { + type: "theme", + category: { + type: "wallpaper", + action: { + type: "MULTI_ACTION", + data: { + actions: [ + { + type: "SET_PREF", + data: { + pref: { + name: "test-dark", + }, + }, + }, + { + type: "SET_PREF", + data: { + pref: { + name: "test-light", + }, + }, + }, + ], + }, + }, + }, + action: { + theme: "<event>", + }, + data: [ + { + theme: "mountain", + type: "light", + }, + ], + }, + primary_button: { + action: {}, + label: "test button", + }, + }, + navigate: sandbox.stub(), + setActiveTheme: sandbox.stub(), + }; + sandbox.stub(AboutWelcomeUtils, "handleUserAction").resolves(); + }); + it("should handle wallpaper click", () => { + const wrapper = mount(<WelcomeScreen {...WALLPAPER_SCREEN_PROPS} />); + const wallpaperOptions = wrapper.find( + ".tiles-theme-section .theme input[name='mountain']" + ); + wallpaperOptions.simulate("click"); + assert.calledTwice(AboutWelcomeUtils.handleUserAction); + }); + }); + describe("#handleAction", () => { let SCREEN_PROPS; let TEST_ACTION; diff --git a/browser/components/aboutwelcome/tests/unit/unit-entry.js b/browser/components/aboutwelcome/tests/unit/unit-entry.js index fb70eeb843..3da6964c53 100644 --- a/browser/components/aboutwelcome/tests/unit/unit-entry.js +++ b/browser/components/aboutwelcome/tests/unit/unit-entry.js @@ -97,8 +97,8 @@ const TEST_GLOBAL = { JSWindowActorParent, JSWindowActorChild, AboutReaderParent: { - addMessageListener: (messageName, listener) => {}, - removeMessageListener: (messageName, listener) => {}, + addMessageListener: (_messageName, _listener) => {}, + removeMessageListener: (_messageName, _listener) => {}, }, AboutWelcomeTelemetry: class { submitGleanPingForPing() {} @@ -281,8 +281,8 @@ const TEST_GLOBAL = { }, dump() {}, EveryWindow: { - registerCallback: (id, init, uninit) => {}, - unregisterCallback: id => {}, + registerCallback: (_id, _init, _uninit) => {}, + unregisterCallback: _id => {}, }, setTimeout: window.setTimeout.bind(window), clearTimeout: window.clearTimeout.bind(window), @@ -402,7 +402,7 @@ const TEST_GLOBAL = { }, urlFormatter: { formatURL: str => str, formatURLPref: str => str }, mm: { - addMessageListener: (msg, cb) => this.receiveMessage(), + addMessageListener: (_msg, _cb) => this.receiveMessage(), removeMessageListener() {}, }, obs: { @@ -412,7 +412,7 @@ const TEST_GLOBAL = { }, telemetry: { setEventRecordingEnabled: () => {}, - recordEvent: eventDetails => {}, + recordEvent: _eventDetails => {}, scalarSet: () => {}, keyedScalarAdd: () => {}, }, @@ -570,7 +570,7 @@ const TEST_GLOBAL = { finish: () => {}, }, Sampling: { - ratioSample(seed, ratios) { + ratioSample(_seed, _ratios) { return Promise.resolve(0); }, }, |