From da4c7e7ed675c3bf405668739c3012d140856109 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Wed, 15 May 2024 05:34:42 +0200
Subject: Adding upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 browser/components/aboutwelcome/.eslintrc.js       |   2 -
 .../aboutwelcome/actors/AboutWelcomeParent.sys.mjs |   2 +-
 .../aboutwelcome/content-src/aboutwelcome.scss     | 139 ++++++++++++++++++++-
 .../components/MultiStageAboutWelcome.jsx          |  16 ++-
 .../components/MultiStageProtonScreen.jsx          |  55 ++++----
 .../aboutwelcome/content-src/components/Themes.jsx |   9 +-
 .../aboutwelcome/content/aboutwelcome.bundle.js    |  36 ++++--
 .../aboutwelcome/content/aboutwelcome.css          | 106 +++++++++++++++-
 .../browser_aboutwelcome_configurable_ui.js        |   2 +-
 .../browser/browser_aboutwelcome_toolbar_button.js |   2 +-
 .../tests/unit/MultiStageAWProton.test.jsx         |  23 ++++
 .../tests/unit/MultiStageAboutWelcome.test.jsx     |  66 ++++++++++
 .../aboutwelcome/tests/unit/unit-entry.js          |  14 +--
 13 files changed, 420 insertions(+), 52 deletions(-)

(limited to 'browser/components/aboutwelcome')

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 aa0445e0ef..4e86b29e5d 100644
--- a/browser/components/aboutwelcome/content/aboutwelcome.css
+++ b/browser/components/aboutwelcome/content/aboutwelcome.css
@@ -1896,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 {
@@ -2091,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;
@@ -2121,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);
     },
   },
-- 
cgit v1.2.3