Adding upstream version 125.0.1.upstream/125.0.1

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

5 files changed, 296 insertions, 118 deletions

diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss
index aa49a04799..9174fe2439 100644
--- a/browser/components/aboutwelcome/content-src/aboutwelcome.scss
+++ b/browser/components/aboutwelcome/content-src/aboutwelcome.scss
@@ -570,10 +570,12 @@ html {
       .section-main {
         flex-direction: row;
         display: block;
-        margin: auto auto auto 0;
+        margin: auto;
+        margin-inline-start: 0;
 
         &:dir(rtl) {
-          margin: auto 0 auto auto;
+          margin: auto;
+          margin-inline-start: 0;
         }
 
         &.embedded-migration {
@@ -597,6 +599,21 @@ html {
             border-radius: 8px 0 0 8px;
           }
 
+          .legal-paragraph {
+            text-align: start;
+            font-size: 11px;
+            line-height: 16.5px;
+            color: #5B5B66;
+
+            @media only screen and (width <= 800px) {
+              padding-inline: 30px;
+            }
+
+            @media (prefers-color-scheme: dark) {
+              color: #CFCFD8;
+            }
+          }
+
           .main-content-inner {
             min-height: 330px;
 
@@ -764,7 +781,8 @@ html {
 
         &:dir(rtl) {
           border-radius: 0 8px 8px 0;
-          margin: auto auto auto 0;
+          margin: auto;
+          margin-inline-end: 0;
         }
 
         h1 {
@@ -843,168 +861,285 @@ html {
         .tiles-theme-section {
           margin-inline-start: -10px;
         }
-      }
 
-      @media only screen and (width <= 800px) {
-        flex-direction: column;
-        min-height: $small-main-section-height + $small-secondary-section-height;
+        &[reverse-split] {
+          flex-direction: row-reverse;
 
-        &::before {
-          width: $split-section-width;
-        }
+          .section-main {
+            .main-content {
+              border-radius: inherit;
+            }
 
-        .section-secondary,
-        .section-main {
-          width: $split-section-width;
-        }
+            margin: auto;
+            margin-inline-end: 0;
+            border-radius: 8px 0 0 8px;
 
-        .section-secondary {
-          --mr-secondary-background-position-y: top;
-          --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
+            &:dir(rtl) {
+              border-radius: 0 8px 8px 0;
+              margin: auto;
+              margin-inline-end: 0;
+            }
+          }
 
-          border-radius: 8px 8px 0 0;
-          margin: auto auto 0;
-          height: $small-secondary-section-height;
+          .section-secondary {
+            margin: auto;
+            margin-inline-start: 0;
+            border-radius: 0 8px 8px 0;
 
-          .hero-image img {
-            margin: 6px 0;
+            &:dir(rtl) {
+              border-radius: 8px 0 0 8px;
+              margin: auto;
+              margin-inline-start: 0;
+            }
           }
+        }
+      }
 
-          .message-text {
-            margin-inline: auto;
-          }
+      // duplicate the above styles for no-rdm. unfortunately SASS won't allow
+      // us to combine these selectors.
+      &:where([no-rdm='true']) {
+        .tiles-theme-section {
+          margin-inline-start: -10px;
+        }
 
-          h1 {
-            font-size: 35px;
-            text-align: center;
-            white-space: normal;
-            margin-inline: auto;
-            margin-block: 14px 6px;
-          }
+        &[reverse-split] {
+          flex-direction: row-reverse;
 
-          &:dir(rtl) {
-            margin: auto auto 0;
-            border-radius: 8px 8px 0 0;
-          }
+          .section-main {
+            .main-content {
+              border-radius: inherit;
+            }
 
-          &.with-secondary-section-hidden {
-            display: none;
+            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;
+            }
           }
-        }
 
-        migration-wizard {
-          &::part(deck){
-            min-width: 330px;
-            margin-inline: 36px;
+          .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;
+            }
           }
         }
+      }
 
-        .section-main {
-          margin: 0 auto auto;
-          height: $small-main-section-height;
+      @media only screen and (width <= 800px) {
+        &:where(:not([no-rdm])) {
+          flex-direction: column;
+          min-height: $small-main-section-height + $small-secondary-section-height;
+
+          &::before {
+            width: $split-section-width;
+          }
 
-          migration-wizard::part(buttons) {
+          &[reverse-split] {
             flex-direction: column;
-            margin-inline: 46px;
+
+            .section-secondary {
+              border-radius: 8px 8px 0 0;
+              margin: auto;
+              margin-bottom: 0;
+
+              &:dir(rtl) {
+                margin: auto;
+                margin-bottom: 0;
+                border-radius: 8px 8px 0 0;
+              }
+            }
+
+            .section-main {
+              margin: auto;
+              margin-top: 0;
+              border-radius: 0 0 8px 8px;
+
+              &:dir(rtl) {
+                margin: auto;
+                margin-top: 0;
+                border-radius: 0 0 8px 8px;
+              }
+            }
+          }
+
+          .section-secondary,
+          .section-main {
+            width: $split-section-width;
           }
 
-          &[hide-secondary-section='responsive'] {
-            height: $split-screen-height;
+          .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;
+            margin-bottom: 0;
+            height: $small-secondary-section-height;
 
-            .main-content {
-              padding: 50px 0 0;
-              border-radius: 8px;
+            .hero-image img {
+              margin: 6px 0;
+            }
+
+            .message-text {
+              margin-inline: auto;
+            }
+
+            h1 {
+              font-size: 35px;
+              text-align: center;
+              white-space: normal;
+              margin-inline: auto;
+              margin-block: 14px 6px;
+            }
+
+            &:dir(rtl) {
+              margin: auto;
+              margin-bottom: 0;
+              border-radius: 8px 8px 0 0;
+            }
+
+            &.with-secondary-section-hidden {
+              display: none;
             }
           }
 
-          .main-content {
-            border-radius: 0 0 8px 8px;
-            padding: 30px 0 0;
+          migration-wizard {
+            &::part(deck){
+              min-width: 330px;
+              margin-inline: 36px;
+            }
+          }
+
+          .section-main {
+            margin: auto;
+            margin-top: 0;
+            height: $small-main-section-height;
 
-            .main-content-inner {
-              align-items: center;
+            migration-wizard::part(buttons) {
+              flex-direction: column;
+              margin-inline: 46px;
             }
 
-            .logo-container {
-              text-align: center;
+            &[hide-secondary-section='responsive'] {
+              height: $split-screen-height;
+              margin: auto;
+
+              &:dir(rtl) {
+                margin: auto;
+              }
 
-              .brand-logo {
-                min-height: 25px;
+              .main-content {
+                padding: 50px 0 0;
+                border-radius: 8px;
 
-                &,
                 &:dir(rtl) {
-                  background-position: center;
+                  border-radius: 8px;
                 }
               }
-
-              .logo-alt {
-                width: inherit;
-                height: inherit;
-              }
             }
 
-            .welcome-text {
-              align-items: center;
-              text-align: center;
-              margin-inline: 0;
-              padding-inline: 30px;
+            .main-content {
+              border-radius: 0 0 8px 8px;
+              padding: 30px 0 0;
 
-              .spacer-bottom,
-              .spacer-top {
-                display: none;
+              .main-content-inner {
+                align-items: center;
               }
-            }
 
-            .action-buttons {
-              text-align: center;
+              .logo-container {
+                text-align: center;
+
+                .brand-logo {
+                  min-height: 25px;
 
-              .checkbox-container {
-                display: none;
+                  &,
+                  &:dir(rtl) {
+                    background-position: center;
+                  }
+                }
+
+                .logo-alt {
+                  width: inherit;
+                  height: inherit;
+                }
               }
 
-              .secondary-cta {
-                position: relative;
-                margin-block: 10px 0;
-                bottom: 0;
+              .welcome-text {
+                align-items: center;
+                text-align: center;
+                margin-inline: 0;
+                padding-inline: 30px;
+
+                .spacer-bottom,
+                .spacer-top {
+                  display: none;
+                }
               }
-            }
 
-            .primary,
-            .secondary {
-              min-width: 240px;
-              margin-inline: 0;
-            }
+              .action-buttons {
+                text-align: center;
 
-            .steps {
-              padding-block: 0;
-              margin: 0;
+                .checkbox-container {
+                  display: none;
+                }
 
-              &.progress-bar {
+                .secondary-cta {
+                  position: relative;
+                  margin-block: 10px 0;
+                  bottom: 0;
+                }
+              }
+
+              .primary,
+              .secondary {
+                min-width: 240px;
                 margin-inline: 0;
               }
+
+              .steps {
+                padding-block: 0;
+                margin: 0;
+
+                &.progress-bar {
+                  margin-inline: 0;
+                }
+              }
             }
-          }
 
-          .additional-cta {
-            &.cta-link {
-              align-self: center;
+            .additional-cta {
+              &.cta-link {
+                align-self: center;
+              }
             }
-          }
 
-          .dismiss-button {
-            top: -$small-secondary-section-height;
-          }
+            .dismiss-button {
+              top: -$small-secondary-section-height;
+            }
 
-          &:dir(rtl) {
-            margin: 0 auto auto;
+            &:dir(rtl) {
+              margin: auto;
+              margin-top: 0;
 
-            .main-content {
-              border-radius: 0 0 8px 8px;
+              .main-content {
+                border-radius: 0 0 8px 8px;
+              }
             }
           }
         }
 
+        &[no-rdm] {
+          width: 800px;
+        }
       }
 
       @media only screen and (height <= 650px) {
@@ -1610,6 +1745,10 @@ html {
     }
   }
 
+  .legal-paragraph {
+    transition: var(--transition)
+  }
+
   .primary,
   .secondary,
   .additional-cta,
@@ -1763,7 +1902,8 @@ html {
     .secondary,
     .secondary-cta,
     .steps,
-    .cta-link {
+    .cta-link,
+    .legal-paragraph {
       transition-delay: 1s;
     }
   }
@@ -1772,14 +1912,15 @@ html {
   .screen:not(.dialog-initial) {
     .tiles-theme-section,
     .multi-select-container
-    {
+     {
       transition-delay: 0.2s;
     }
 
     .primary,
     .secondary,
     .secondary-cta,
-    .cta-link {
+    .cta-link,
+    .legal-paragraph {
       transition-delay: 0.4s;
     }
   }
@@ -1852,6 +1993,7 @@ html {
       .secondary,
       .secondary-cta:not(.top),
       .cta-link,
+      .legal-paragraph,
       migration-wizard {
         opacity: 0;
         translate: 0 calc(-1 * var(--translate));
@@ -1898,7 +2040,8 @@ html {
       .checkbox-container:not(.multi-select-item),
       .secondary,
       .secondary-cta:not(.top),
-      .cta-link {
+      .cta-link,
+      .legal-paragraph {
         opacity: 0;
         translate: 0 var(--translate);
         transition-delay: 0.3s;
diff --git a/browser/components/aboutwelcome/content-src/components/AddonsPicker.jsx b/browser/components/aboutwelcome/content-src/components/AddonsPicker.jsx
index 10c88008de..1182c785b9 100644
--- a/browser/components/aboutwelcome/content-src/components/AddonsPicker.jsx
+++ b/browser/components/aboutwelcome/content-src/components/AddonsPicker.jsx
@@ -20,7 +20,9 @@ export const InstallButton = props => {
   const [installing, setInstalling] = useState(false);
   const [installComplete, setInstallComplete] = 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);
diff --git a/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx b/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx
index 2fff85abd9..60186e2694 100644
--- a/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx
+++ b/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx
@@ -4,8 +4,9 @@
 
 import React, { useEffect, useRef } from "react";
 
-export const EmbeddedMigrationWizard = ({ handleAction }) => {
+export const EmbeddedMigrationWizard = ({ handleAction, content }) => {
   const ref = useRef();
+  const options = content.migration_wizard_options;
   useEffect(() => {
     const handleBeginMigration = () => {
       handleAction({
@@ -32,9 +33,29 @@ export const EmbeddedMigrationWizard = ({ handleAction }) => {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
   return (
     <migration-wizard
-      force-show-import-all="false"
+      force-show-import-all={options?.force_show_import_all || "false"}
       auto-request-state=""
       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 || ""}
     ></migration-wizard>
   );
 };
diff --git a/browser/components/aboutwelcome/content-src/components/MSLocalized.jsx b/browser/components/aboutwelcome/content-src/components/MSLocalized.jsx
index 42fb071475..61867a75a2 100644
--- a/browser/components/aboutwelcome/content-src/components/MSLocalized.jsx
+++ b/browser/components/aboutwelcome/content-src/components/MSLocalized.jsx
@@ -13,6 +13,7 @@ export const CONFIGURABLE_STYLES = [
   "marginInline",
   "paddingBlock",
   "paddingInline",
+  "textAlign",
   "whiteSpace",
 ];
 const ZAP_SIZE_THRESHOLD = 160;
diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx
index ffe64f05f1..59771e4e48 100644
--- a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx
+++ b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx
@@ -311,7 +311,10 @@ export class ProtonScreen extends React.PureComponent {
           />
         ) : null}
         {content.tiles && content.tiles.type === "migration-wizard" ? (
-          <EmbeddedMigrationWizard handleAction={this.props.handleAction} />
+          <EmbeddedMigrationWizard
+            handleAction={this.props.handleAction}
+            content={content}
+          />
         ) : null}
       </React.Fragment>
     );
@@ -500,6 +503,7 @@ export class ProtonScreen extends React.PureComponent {
       <main
         className={`screen ${this.props.id || ""}
           ${screenClassName} ${textColorClass}`}
+        reverse-split={content.reverse_split ? "" : null}
         role={ariaRole ?? "alertdialog"}
         layout={content.layout}
         pos={content.position || "center"}
@@ -508,6 +512,7 @@ export class ProtonScreen extends React.PureComponent {
         ref={input => {
           this.mainContentHeader = input;
         }}
+        no-rdm={content.no_rdm ? "" : null}
       >
         {isCenterPosition ? null : this.renderSecondarySection(content)}
         <div
@@ -541,6 +546,12 @@ export class ProtonScreen extends React.PureComponent {
                 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}
@@ -591,11 +602,11 @@ export class ProtonScreen extends React.PureComponent {
                   handleAction={this.props.handleAction}
                 />
               ) : null}
+              {this.renderContentTiles()}
+              {this.renderLanguageSwitcher()}
               {content.above_button_content
                 ? this.renderOrderedContent(content.above_button_content)
                 : null}
-              {this.renderContentTiles()}
-              {this.renderLanguageSwitcher()}
               {!hideStepsIndicator && aboveButtonStepsIndicator
                 ? this.renderStepsIndicator()
                 : null}