Adding upstream version 125.0.1.upstream/125.0.1

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

3 files changed, 244 insertions, 86 deletions

diff --git a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js
index cb4e9004f8..0d96257677 100644
--- a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js
+++ b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js
@@ -25,8 +25,8 @@ module.exports = ReactDOM;
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "AboutWelcomeUtils": () => (/* binding */ AboutWelcomeUtils),
-/* harmony export */   "DEFAULT_RTAMO_CONTENT": () => (/* binding */ DEFAULT_RTAMO_CONTENT)
+/* harmony export */   AboutWelcomeUtils: () => (/* binding */ AboutWelcomeUtils),
+/* harmony export */   DEFAULT_RTAMO_CONTENT: () => (/* binding */ DEFAULT_RTAMO_CONTENT)
 /* harmony export */ });
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
@@ -158,11 +158,11 @@ const DEFAULT_RTAMO_CONTENT = {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "MultiStageAboutWelcome": () => (/* binding */ MultiStageAboutWelcome),
-/* harmony export */   "SecondaryCTA": () => (/* binding */ SecondaryCTA),
-/* harmony export */   "StepsIndicator": () => (/* binding */ StepsIndicator),
-/* harmony export */   "ProgressBar": () => (/* binding */ ProgressBar),
-/* harmony export */   "WelcomeScreen": () => (/* binding */ WelcomeScreen)
+/* harmony export */   MultiStageAboutWelcome: () => (/* binding */ MultiStageAboutWelcome),
+/* harmony export */   ProgressBar: () => (/* binding */ ProgressBar),
+/* harmony export */   SecondaryCTA: () => (/* binding */ SecondaryCTA),
+/* harmony export */   StepsIndicator: () => (/* binding */ StepsIndicator),
+/* harmony export */   WelcomeScreen: () => (/* binding */ WelcomeScreen)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -656,8 +656,8 @@ class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "CONFIGURABLE_STYLES": () => (/* binding */ CONFIGURABLE_STYLES),
-/* harmony export */   "Localized": () => (/* binding */ Localized)
+/* harmony export */   CONFIGURABLE_STYLES: () => (/* binding */ CONFIGURABLE_STYLES),
+/* harmony export */   Localized: () => (/* binding */ Localized)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -666,7 +666,7 @@ __webpack_require__.r(__webpack_exports__);
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 
-const CONFIGURABLE_STYLES = ["color", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "marginBlock", "marginInline", "paddingBlock", "paddingInline", "whiteSpace"];
+const CONFIGURABLE_STYLES = ["color", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "marginBlock", "marginInline", "paddingBlock", "paddingInline", "textAlign", "whiteSpace"];
 const ZAP_SIZE_THRESHOLD = 160;
 
 /**
@@ -768,9 +768,9 @@ const Localized = ({
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "MultiStageProtonScreen": () => (/* binding */ MultiStageProtonScreen),
-/* harmony export */   "ProtonScreenActionButtons": () => (/* binding */ ProtonScreenActionButtons),
-/* harmony export */   "ProtonScreen": () => (/* binding */ ProtonScreen)
+/* harmony export */   MultiStageProtonScreen: () => (/* binding */ MultiStageProtonScreen),
+/* harmony export */   ProtonScreen: () => (/* binding */ ProtonScreen),
+/* harmony export */   ProtonScreenActionButtons: () => (/* binding */ ProtonScreenActionButtons)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1032,7 +1032,8 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
       activeMultiSelect: this.props.activeMultiSelect,
       setActiveMultiSelect: this.props.setActiveMultiSelect
     }) : null, content.tiles && content.tiles.type === "migration-wizard" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_EmbeddedMigrationWizard__WEBPACK_IMPORTED_MODULE_12__.EmbeddedMigrationWizard, {
-      handleAction: this.props.handleAction
+      handleAction: this.props.handleAction,
+      content: content
     }) : null);
   }
   renderNoodles() {
@@ -1178,6 +1179,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("main", {
       className: `screen ${this.props.id || ""}
           ${screenClassName} ${textColorClass}`,
+      "reverse-split": content.reverse_split ? "" : null,
       role: ariaRole ?? "alertdialog",
       layout: content.layout,
       pos: content.position || "center",
@@ -1185,7 +1187,8 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
       "aria-labelledby": "mainContentHeader",
       ref: input => {
         this.mainContentHeader = input;
-      }
+      },
+      "no-rdm": content.no_rdm ? "" : null
     }, isCenterPosition ? null : this.renderSecondarySection(content), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: `section-main ${isEmbeddedMigration ? "embedded-migration" : ""}`,
       "hide-secondary-section": content.hide_secondary_section ? String(content.hide_secondary_section) : null,
@@ -1198,7 +1201,9 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
       className: `main-content ${hideStepsIndicator ? "no-steps" : ""}`,
       style: {
         background: content.background && isCenterPosition ? content.background : null,
-        width: content.width && content.position !== "split" ? content.width : null
+        width: content.width && content.position !== "split" ? content.width : null,
+        paddingBlock: content.split_content_padding_block ? content.split_content_padding_block : null,
+        paddingInline: content.split_content_padding_inline ? content.split_content_padding_inline : null
       }
     }, content.logo ? this.renderPicture(content.logo) : null, isRtamo ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "rtamo-icon"
@@ -1226,7 +1231,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
     }) : 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, content.above_button_content ? this.renderOrderedContent(content.above_button_content) : null, this.renderContentTiles(), this.renderLanguageSwitcher(), !hideStepsIndicator && aboveButtonStepsIndicator ? this.renderStepsIndicator() : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ProtonScreenActionButtons, {
+    }) : 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, {
       content: content,
       addonName: this.props.addonName,
       handleAction: this.props.handleAction,
@@ -1245,8 +1250,8 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "MarketplaceButtons": () => (/* binding */ MarketplaceButtons),
-/* harmony export */   "MobileDownloads": () => (/* binding */ MobileDownloads)
+/* harmony export */   MarketplaceButtons: () => (/* binding */ MarketplaceButtons),
+/* harmony export */   MobileDownloads: () => (/* binding */ MobileDownloads)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1307,7 +1312,7 @@ const MobileDownloads = props => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "MultiSelect": () => (/* binding */ MultiSelect)
+/* harmony export */   MultiSelect: () => (/* binding */ MultiSelect)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1431,7 +1436,7 @@ const MultiSelect = ({
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Themes": () => (/* binding */ Themes)
+/* harmony export */   Themes: () => (/* binding */ Themes)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1486,8 +1491,8 @@ const Themes = props => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "useLanguageSwitcher": () => (/* binding */ useLanguageSwitcher),
-/* harmony export */   "LanguageSwitcher": () => (/* binding */ LanguageSwitcher)
+/* harmony export */   LanguageSwitcher: () => (/* binding */ LanguageSwitcher),
+/* harmony export */   useLanguageSwitcher: () => (/* binding */ useLanguageSwitcher)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1744,7 +1749,7 @@ function LanguageSwitcher(props) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "CTAParagraph": () => (/* binding */ CTAParagraph)
+/* harmony export */   CTAParagraph: () => (/* binding */ CTAParagraph)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1787,7 +1792,7 @@ const CTAParagraph = props => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "HeroImage": () => (/* binding */ HeroImage)
+/* harmony export */   HeroImage: () => (/* binding */ HeroImage)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1826,7 +1831,7 @@ const HeroImage = props => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "OnboardingVideo": () => (/* binding */ OnboardingVideo)
+/* harmony export */   OnboardingVideo: () => (/* binding */ OnboardingVideo)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1865,7 +1870,7 @@ const OnboardingVideo = props => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "AdditionalCTA": () => (/* binding */ AdditionalCTA)
+/* harmony export */   AdditionalCTA: () => (/* binding */ AdditionalCTA)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1914,7 +1919,7 @@ const AdditionalCTA = ({
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "SubmenuButton": () => (/* binding */ SubmenuButton)
+/* harmony export */   SubmenuButton: () => (/* binding */ SubmenuButton)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -2071,7 +2076,7 @@ const SubmenuButtonInner = ({
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "EmbeddedMigrationWizard": () => (/* binding */ EmbeddedMigrationWizard)
+/* harmony export */   EmbeddedMigrationWizard: () => (/* binding */ EmbeddedMigrationWizard)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -2081,9 +2086,11 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const EmbeddedMigrationWizard = ({
-  handleAction
+  handleAction,
+  content
 }) => {
   const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+  const options = content.migration_wizard_options;
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     const handleBeginMigration = () => {
       handleAction({
@@ -2111,9 +2118,25 @@ const EmbeddedMigrationWizard = ({
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("migration-wizard", {
-    "force-show-import-all": "false",
+    "force-show-import-all": options?.force_show_import_all || "false",
     "auto-request-state": "",
-    ref: ref
+    ref: ref,
+    "option-expander-title-string": options?.option_expander_title_string || "",
+    "hide-option-expander-subtitle": options?.hide_option_expander_subtitle || false,
+    "data-import-complete-success-string": options?.data_import_complete_success_string || "",
+    "selection-header-string": options?.selection_header_string,
+    "selection-subheader-string": options?.selection_subheader_string || "",
+    "hide-select-all": options?.hide_select_all || false,
+    "checkbox-margin-inline": options?.checkbox_margin_inline || "",
+    "checkbox-margin-block": options?.checkbox_margin_block || "",
+    "import-button-string": options?.import_button_string || "",
+    "import-button-class": options?.import_button_class || "",
+    "header-font-size": options?.header_font_size || "",
+    "header-font-weight": options?.header_font_weight || "",
+    "header-margin-block": options?.header_margin_block || "",
+    "subheader-font-size": options?.subheader_font_size || "",
+    "subheader-font-weight": options?.subheader_font_weight || "",
+    "subheader-margin-block": options?.subheader_margin_block || ""
   });
 };
 
@@ -2123,9 +2146,9 @@ const EmbeddedMigrationWizard = ({
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Loader": () => (/* binding */ Loader),
-/* harmony export */   "InstallButton": () => (/* binding */ InstallButton),
-/* harmony export */   "AddonsPicker": () => (/* binding */ AddonsPicker)
+/* harmony export */   AddonsPicker: () => (/* binding */ AddonsPicker),
+/* harmony export */   InstallButton: () => (/* binding */ InstallButton),
+/* harmony export */   Loader: () => (/* binding */ Loader)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -2150,7 +2173,11 @@ const Loader = () => {
 const InstallButton = props => {
   const [installing, setInstalling] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   const [installComplete, setInstallComplete] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
-  let buttonLabel = installComplete ? "Installed" : "Add to Firefox";
+  let buttonLabel = installComplete ? {
+    string_id: "amo-picker-install-complete-label"
+  } : {
+    string_id: "amo-picker-install-button-label"
+  };
   function onClick(event) {
     props.handleAction(event);
     // Replace the label with the spinner
@@ -2249,7 +2276,7 @@ const AddonsPicker = props => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "LinkParagraph": () => (/* binding */ LinkParagraph)
+/* harmony export */   LinkParagraph: () => (/* binding */ LinkParagraph)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -2303,8 +2330,8 @@ const LinkParagraph = props => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "BASE_PARAMS": () => (/* binding */ BASE_PARAMS),
-/* harmony export */   "addUtmParams": () => (/* binding */ addUtmParams)
+/* harmony export */   BASE_PARAMS: () => (/* binding */ BASE_PARAMS),
+/* harmony export */   addUtmParams: () => (/* binding */ addUtmParams)
 /* harmony export */ });
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
@@ -2346,7 +2373,7 @@ function addUtmParams(url, utmTerm) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "ReturnToAMO": () => (/* binding */ ReturnToAMO)
+/* harmony export */   ReturnToAMO: () => (/* binding */ ReturnToAMO)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css
index 63608bd48a..411f6d4f9b 100644
--- a/browser/components/aboutwelcome/content/aboutwelcome.css
+++ b/browser/components/aboutwelcome/content/aboutwelcome.css
@@ -758,7 +758,7 @@ panel#feature-callout[arrow-position=inline-start-bottom] {
 }
 @media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
   .onboardingContainer.shopping .screen[pos=split] {
-    box-shadow: 0 2px 6px #15141a;
+    box-shadow: 0 2px 6px rgb(21, 20, 26);
   }
 }
 .onboardingContainer.shopping .screen[pos=split]::before {
@@ -813,6 +813,7 @@ panel#feature-callout[arrow-position=inline-start-bottom] {
   margin-block: 0 20px;
   padding-inline: 30px;
   text-align: start;
+  color: inherit;
 }
 .onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph a {
   text-decoration: underline;
@@ -1369,10 +1370,12 @@ html {
 .onboardingContainer .screen[pos=split] .section-main {
   flex-direction: row;
   display: block;
-  margin: auto auto auto 0;
+  margin: auto;
+  margin-inline-start: 0;
 }
 .onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
-  margin: auto 0 auto auto;
+  margin: auto;
+  margin-inline-start: 0;
 }
 .onboardingContainer .screen[pos=split] .section-main.embedded-migration .main-content {
   padding-block: 100px 0;
@@ -1390,6 +1393,22 @@ html {
 .onboardingContainer .screen[pos=split] .section-main .main-content:dir(rtl) {
   border-radius: 8px 0 0 8px;
 }
+.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
+  text-align: start;
+  font-size: 11px;
+  line-height: 16.5px;
+  color: #5B5B66;
+}
+@media only screen and (width <= 800px) {
+  .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
+    padding-inline: 30px;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
+    color: #CFCFD8;
+  }
+}
 .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
   min-height: 330px;
 }
@@ -1563,7 +1582,8 @@ html {
 }
 .onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
   border-radius: 0 8px 8px 0;
-  margin: auto auto auto 0;
+  margin: auto;
+  margin-inline-end: 0;
 }
 .onboardingContainer .screen[pos=split] .section-secondary h1 {
   color: var(--mr-screen-heading-color);
@@ -1631,131 +1651,222 @@ html {
   .onboardingContainer .screen[pos=split] .tiles-theme-section {
     margin-inline-start: -10px;
   }
+  .onboardingContainer .screen[pos=split][reverse-split] {
+    flex-direction: row-reverse;
+  }
+  .onboardingContainer .screen[pos=split][reverse-split] .section-main {
+    margin: auto;
+    margin-inline-end: 0;
+    border-radius: 8px 0 0 8px;
+  }
+  .onboardingContainer .screen[pos=split][reverse-split] .section-main .main-content {
+    border-radius: inherit;
+  }
+  .onboardingContainer .screen[pos=split][reverse-split] .section-main:dir(rtl) {
+    border-radius: 0 8px 8px 0;
+    margin: auto;
+    margin-inline-end: 0;
+  }
+  .onboardingContainer .screen[pos=split][reverse-split] .section-secondary {
+    margin: auto;
+    margin-inline-start: 0;
+    border-radius: 0 8px 8px 0;
+  }
+  .onboardingContainer .screen[pos=split][reverse-split] .section-secondary:dir(rtl) {
+    border-radius: 8px 0 0 8px;
+    margin: auto;
+    margin-inline-start: 0;
+  }
+}
+.onboardingContainer .screen[pos=split]:where([no-rdm=true]) .tiles-theme-section {
+  margin-inline-start: -10px;
+}
+.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] {
+  flex-direction: row-reverse;
+}
+.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main {
+  margin: auto;
+  margin-inline-end: 0;
+  border-radius: 8px 0 0 8px;
+}
+.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main .main-content {
+  border-radius: inherit;
+}
+.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main:dir(rtl) {
+  border-radius: 0 8px 8px 0;
+  margin: auto;
+  margin-inline-end: 0;
+}
+.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary {
+  margin: auto;
+  margin-inline-start: 0;
+  border-radius: 0 8px 8px 0;
+}
+.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary:dir(rtl) {
+  border-radius: 8px 0 0 8px;
+  margin: auto;
+  margin-inline-start: 0;
 }
 @media only screen and (width <= 800px) {
-  .onboardingContainer .screen[pos=split] {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) {
     flex-direction: column;
     min-height: 550px;
   }
-  .onboardingContainer .screen[pos=split]::before {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before {
     width: 400px;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary,
-.onboardingContainer .screen[pos=split] .section-main {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] {
+    flex-direction: column;
+  }
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary {
+    border-radius: 8px 8px 0 0;
+    margin: auto;
+    margin-bottom: 0;
+  }
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary:dir(rtl) {
+    margin: auto;
+    margin-bottom: 0;
+    border-radius: 8px 8px 0 0;
+  }
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main {
+    margin: auto;
+    margin-top: 0;
+    border-radius: 0 0 8px 8px;
+  }
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main:dir(rtl) {
+    margin: auto;
+    margin-top: 0;
+    border-radius: 0 0 8px 8px;
+  }
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary,
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
     width: 400px;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary {
     --mr-secondary-background-position-y: top;
     --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
     border-radius: 8px 8px 0 0;
-    margin: auto auto 0;
+    margin: auto;
+    margin-bottom: 0;
     height: 100px;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img {
     margin: 6px 0;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary .message-text {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text {
     margin-inline: auto;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary h1 {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary h1 {
     font-size: 35px;
     text-align: center;
     white-space: normal;
     margin-inline: auto;
     margin-block: 14px 6px;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
-    margin: auto auto 0;
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary:dir(rtl) {
+    margin: auto;
+    margin-bottom: 0;
     border-radius: 8px 8px 0 0;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary.with-secondary-section-hidden {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden {
     display: none;
   }
-  .onboardingContainer .screen[pos=split] migration-wizard::part(deck) {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) {
     min-width: 330px;
     margin-inline: 36px;
   }
-  .onboardingContainer .screen[pos=split] .section-main {
-    margin: 0 auto auto;
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
+    margin: auto;
+    margin-top: 0;
     height: 450px;
   }
-  .onboardingContainer .screen[pos=split] .section-main migration-wizard::part(buttons) {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) {
     flex-direction: column;
     margin-inline: 46px;
   }
-  .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] {
     height: 550px;
     margin: auto;
   }
-  .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive]:dir(rtl) {
+    margin: auto;
+  }
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content {
     padding: 50px 0 0;
     border-radius: 8px;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
+    border-radius: 8px;
+  }
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content {
     border-radius: 0 0 8px 8px;
     padding: 30px 0 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner {
     align-items: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container {
     text-align: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo {
     min-height: 25px;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo:dir(rtl) {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo:dir(rtl) {
     background-position: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .logo-alt {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt {
     width: inherit;
     height: inherit;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text {
     align-items: center;
     text-align: center;
     margin-inline: 0;
     padding-inline: 30px;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-bottom,
-.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-top {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-bottom,
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-top {
     display: none;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons {
     text-align: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container {
     display: none;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .secondary-cta {
     position: relative;
     margin-block: 10px 0;
     bottom: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .primary,
-.onboardingContainer .screen[pos=split] .section-main .main-content .secondary {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .primary,
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .secondary {
     min-width: 240px;
     margin-inline: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .steps {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps {
     padding-block: 0;
     margin: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar {
     margin-inline: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .additional-cta.cta-link {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link {
     align-self: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .dismiss-button {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button {
     top: -100px;
   }
-  .onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
-    margin: 0 auto auto;
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) {
+    margin: auto;
+    margin-top: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main:dir(rtl) .main-content {
+  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) .main-content {
     border-radius: 0 0 8px 8px;
   }
+  .onboardingContainer .screen[pos=split][no-rdm] {
+    width: 800px;
+  }
 }
 @media only screen and (height <= 650px) and (800px <= width <= 990px) {
   .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
@@ -2273,6 +2384,9 @@ html {
 .onboardingContainer .additional-cta-container[flow][flow=row] .secondary-cta {
   flex-basis: 100%;
 }
+.onboardingContainer .legal-paragraph {
+  transition: var(--transition);
+}
 .onboardingContainer .primary,
 .onboardingContainer .secondary,
 .onboardingContainer .additional-cta,
@@ -2407,7 +2521,8 @@ html {
 .onboardingContainer .dialog-initial .secondary,
 .onboardingContainer .dialog-initial .secondary-cta,
 .onboardingContainer .dialog-initial .steps,
-.onboardingContainer .dialog-initial .cta-link {
+.onboardingContainer .dialog-initial .cta-link,
+.onboardingContainer .dialog-initial .legal-paragraph {
   transition-delay: 1s;
 }
 .onboardingContainer .screen:not(.dialog-initial) .tiles-theme-section,
@@ -2417,7 +2532,8 @@ html {
 .onboardingContainer .screen:not(.dialog-initial) .primary,
 .onboardingContainer .screen:not(.dialog-initial) .secondary,
 .onboardingContainer .screen:not(.dialog-initial) .secondary-cta,
-.onboardingContainer .screen:not(.dialog-initial) .cta-link {
+.onboardingContainer .screen:not(.dialog-initial) .cta-link,
+.onboardingContainer .screen:not(.dialog-initial) .legal-paragraph {
   transition-delay: 0.4s;
 }
 .onboardingContainer .screen-2 .section-main {
@@ -2473,6 +2589,7 @@ html {
 .onboardingContainer.transition-in .screen .secondary,
 .onboardingContainer.transition-in .screen .secondary-cta:not(.top),
 .onboardingContainer.transition-in .screen .cta-link,
+.onboardingContainer.transition-in .screen .legal-paragraph,
 .onboardingContainer.transition-in .screen migration-wizard {
   opacity: 0;
   translate: 0 calc(-1 * var(--translate));
@@ -2505,7 +2622,8 @@ html {
 .onboardingContainer.transition-out .screen:not(.dialog-last) .checkbox-container:not(.multi-select-item),
 .onboardingContainer.transition-out .screen:not(.dialog-last) .secondary,
 .onboardingContainer.transition-out .screen:not(.dialog-last) .secondary-cta:not(.top),
-.onboardingContainer.transition-out .screen:not(.dialog-last) .cta-link {
+.onboardingContainer.transition-out .screen:not(.dialog-last) .cta-link,
+.onboardingContainer.transition-out .screen:not(.dialog-last) .legal-paragraph {
   opacity: 0;
   translate: 0 var(--translate);
   transition-delay: 0.3s;
diff --git a/browser/components/aboutwelcome/content/onboarding.ftl b/browser/components/aboutwelcome/content/onboarding.ftl
index 9a894baf88..19690bb52f 100644
--- a/browser/components/aboutwelcome/content/onboarding.ftl
+++ b/browser/components/aboutwelcome/content/onboarding.ftl
@@ -11,3 +11,16 @@
 amo-screen-title = Personalize your { -brand-short-name }
 amo-screen-subtitle = Add-ons are tiny apps that run in { -brand-short-name } and level up the way you browse — from ultimate privacy and safety to changing how { -brand-short-name } looks and behaves.
 amo-screen-primary-cta = Explore staff-recommended add-ons
+
+## Add-ons Picker screen strings
+
+amo-picker-title = Customize your { -brand-short-name }
+amo-picker-subtitle = Extensions are like apps for your browser, and they let you protect passwords, download videos, find deals, block annoying ads, change how your browser looks, and much more.
+amo-picker-install-button-label = Add to { -brand-short-name }
+amo-picker-install-complete-label = Installed
+amo-picker-collection-link = Explore more add-ons
+
+# Button label for the experimental return to about:welcome toolbar button
+browser-aboutwelcome-button =
+    .label = Finish setup
+    .tooltiptext = Finish setting up { -brand-short-name }.