Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

4 files changed, 188 insertions, 31 deletions

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}