summaryrefslogtreecommitdiffstats
path: root/browser/components/aboutwelcome/content
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/aboutwelcome/content')
-rw-r--r--browser/components/aboutwelcome/content/aboutwelcome.bundle.js107
-rw-r--r--browser/components/aboutwelcome/content/aboutwelcome.css210
-rw-r--r--browser/components/aboutwelcome/content/onboarding.ftl13
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 }.