summaryrefslogtreecommitdiffstats
path: root/browser/components/aboutwelcome/content
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /browser/components/aboutwelcome/content
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/aboutwelcome/content')
-rw-r--r--browser/components/aboutwelcome/content/aboutwelcome.bundle.js2678
-rw-r--r--browser/components/aboutwelcome/content/aboutwelcome.css2536
-rw-r--r--browser/components/aboutwelcome/content/aboutwelcome.html50
-rw-r--r--browser/components/aboutwelcome/content/onboarding.ftl13
4 files changed, 5277 insertions, 0 deletions
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js
new file mode 100644
index 0000000000..cb4e9004f8
--- /dev/null
+++ b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js
@@ -0,0 +1,2678 @@
+/*!
+ *
+ * NOTE: This file is generated by webpack from aboutwelcome.jsx
+ * using the npm bundle task.
+ *
+ */
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ var __webpack_modules__ = ([
+/* 0 */,
+/* 1 */
+/***/ ((module) => {
+
+module.exports = React;
+
+/***/ }),
+/* 2 */
+/***/ ((module) => {
+
+module.exports = ReactDOM;
+
+/***/ }),
+/* 3 */
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__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 */ });
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// If the container has a "page" data attribute, then this is
+// a Spotlight modal or Feature Callout. Otherwise, this is
+// about:welcome and we should return the current page.
+const page =
+ document.querySelector(
+ "#multi-stage-message-root.onboardingContainer[data-page]"
+ )?.dataset.page || document.location.href;
+
+const AboutWelcomeUtils = {
+ handleUserAction(action) {
+ return window.AWSendToParent("SPECIAL_ACTION", action);
+ },
+ sendImpressionTelemetry(messageId, context) {
+ window.AWSendEventTelemetry?.({
+ event: "IMPRESSION",
+ event_context: {
+ ...context,
+ page,
+ },
+ message_id: messageId,
+ });
+ },
+ sendActionTelemetry(messageId, elementId, eventName = "CLICK_BUTTON") {
+ const ping = {
+ event: eventName,
+ event_context: {
+ source: elementId,
+ page,
+ },
+ message_id: messageId,
+ };
+ window.AWSendEventTelemetry?.(ping);
+ },
+ sendDismissTelemetry(messageId, elementId) {
+ // Don't send DISMISS telemetry in spotlight modals since they already send
+ // their own equivalent telemetry.
+ if (page !== "spotlight") {
+ this.sendActionTelemetry(messageId, elementId, "DISMISS");
+ }
+ },
+ async fetchFlowParams(metricsFlowUri) {
+ let flowParams;
+ try {
+ const response = await fetch(metricsFlowUri, {
+ credentials: "omit",
+ });
+ if (response.status === 200) {
+ const { deviceId, flowId, flowBeginTime } = await response.json();
+ flowParams = { deviceId, flowId, flowBeginTime };
+ } else {
+ console.error("Non-200 response", response);
+ }
+ } catch (e) {
+ flowParams = null;
+ }
+ return flowParams;
+ },
+ sendEvent(type, detail) {
+ document.dispatchEvent(
+ new CustomEvent(`AWPage:${type}`, {
+ bubbles: true,
+ detail,
+ })
+ );
+ },
+ getLoadingStrategyFor(url) {
+ return url?.startsWith("http") ? "lazy" : "eager";
+ },
+};
+
+const DEFAULT_RTAMO_CONTENT = {
+ template: "return_to_amo",
+ utm_term: "rtamo",
+ content: {
+ position: "split",
+ title: { string_id: "mr1-return-to-amo-subtitle" },
+ has_noodles: false,
+ subtitle: {
+ string_id: "mr1-return-to-amo-addon-title",
+ },
+ backdrop:
+ "var(--mr-welcome-background-color) var(--mr-welcome-background-gradient)",
+ background:
+ "url('chrome://activity-stream/content/data/content/assets/mr-rtamo-background-image.svg') no-repeat center",
+ progress_bar: true,
+ primary_button: {
+ label: { string_id: "mr1-return-to-amo-add-extension-label" },
+ source_id: "ADD_EXTENSION_BUTTON",
+ action: {
+ type: "INSTALL_ADDON_FROM_URL",
+ data: { url: null, telemetrySource: "rtamo" },
+ },
+ },
+ secondary_button: {
+ label: {
+ string_id: "onboarding-not-now-button-label",
+ },
+ source_id: "RTAMO_START_BROWSING_BUTTON",
+ action: {
+ type: "OPEN_AWESOME_BAR",
+ },
+ },
+ secondary_button_top: {
+ label: {
+ string_id: "mr1-onboarding-sign-in-button-label",
+ },
+ source_id: "RTAMO_FXA_SIGNIN_BUTTON",
+ action: {
+ data: {
+ entrypoint: "activity-stream-firstrun",
+ where: "tab",
+ },
+ type: "SHOW_FIREFOX_ACCOUNTS",
+ addFlowParams: true,
+ },
+ },
+ },
+};
+
+
+/***/ }),
+/* 4 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__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 */ });
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
+/* harmony import */ var _LanguageSwitcher__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
+/* harmony import */ var _SubmenuButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(15);
+/* harmony import */ var _lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(19);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+
+
+
+
+// Amount of milliseconds for all transitions to complete (including delays).
+const TRANSITION_OUT_TIME = 1000;
+const LANGUAGE_MISMATCH_SCREEN_ID = "AW_LANGUAGE_MISMATCH";
+const MultiStageAboutWelcome = props => {
+ let {
+ defaultScreens
+ } = props;
+ const didFilter = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+ const [didMount, setDidMount] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+ const [screens, setScreens] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(defaultScreens);
+ const [index, setScreenIndex] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(props.startScreen);
+ const [previousOrder, setPreviousOrder] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(props.startScreen - 1);
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ (async () => {
+ // If we want to load index from history state, we don't want to send impression yet
+ if (!didMount) {
+ return;
+ }
+ // On about:welcome first load, screensVisited should be empty
+ let screensVisited = didFilter.current ? screens.slice(0, index) : [];
+ let upcomingScreens = defaultScreens.filter(s => !screensVisited.find(v => v.id === s.id))
+ // Filter out Language Mismatch screen from upcoming
+ // screens if screens set from useLanguageSwitcher hook
+ // has filtered language screen
+ .filter(upcomingScreen => !(!screens.find(s => s.id === LANGUAGE_MISMATCH_SCREEN_ID) && upcomingScreen.id === LANGUAGE_MISMATCH_SCREEN_ID));
+ let filteredScreens = screensVisited.concat((await window.AWEvaluateScreenTargeting(upcomingScreens)) ?? upcomingScreens);
+
+ // Use existing screen for the filtered screen to carry over any modification
+ // e.g. if AW_LANGUAGE_MISMATCH exists, use it from existing screens
+ setScreens(filteredScreens.map(filtered => screens.find(s => s.id === filtered.id) ?? filtered));
+ didFilter.current = true;
+ const screenInitials = filteredScreens.map(({
+ id
+ }) => id?.split("_")[1]?.[0]).join("");
+ // Send impression ping when respective screen first renders
+ filteredScreens.forEach((screen, order) => {
+ if (index === order) {
+ const messageId = `${props.message_id}_${order}_${screen.id}_${screenInitials}`;
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendImpressionTelemetry(messageId, {
+ screen_family: props.message_id,
+ screen_index: order,
+ screen_id: screen.id,
+ screen_initials: screenInitials
+ });
+ window.AWAddScreenImpression?.(screen);
+ }
+ });
+
+ // Remember that a new screen has loaded for browser navigation
+ if (props.updateHistory && index > window.history.state) {
+ window.history.pushState(index, "");
+ }
+
+ // Remember the previous screen index so we can animate the transition
+ setPreviousOrder(index);
+ })();
+ }, [index, didMount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const [flowParams, setFlowParams] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+ const {
+ metricsFlowUri
+ } = props;
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ (async () => {
+ if (metricsFlowUri) {
+ setFlowParams(await _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.fetchFlowParams(metricsFlowUri));
+ }
+ })();
+ }, [metricsFlowUri]);
+
+ // Allow "in" style to render to actually transition towards regular state,
+ // which also makes using browser back/forward navigation skip transitions.
+ const [transition, setTransition] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(props.transitions ? "in" : "");
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ if (transition === "in") {
+ requestAnimationFrame(() => requestAnimationFrame(() => setTransition("")));
+ }
+ }, [transition]);
+
+ // Transition to next screen, opening about:home on last screen button CTA
+ const handleTransition = () => {
+ // Only handle transitioning out from a screen once.
+ if (transition === "out") {
+ return;
+ }
+
+ // Start transitioning things "out" immediately when moving forwards.
+ setTransition(props.transitions ? "out" : "");
+
+ // Actually move forwards after all transitions finish.
+ setTimeout(() => {
+ if (index < screens.length - 1) {
+ setTransition(props.transitions ? "in" : "");
+ setScreenIndex(prevState => prevState + 1);
+ } else {
+ window.AWFinish();
+ }
+ }, props.transitions ? TRANSITION_OUT_TIME : 0);
+ };
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ // When about:welcome loads (on refresh or pressing back button
+ // from about:home), ensure history state usEffect runs before
+ // useEffect hook that send impression telemetry
+ setDidMount(true);
+ if (props.updateHistory) {
+ // Switch to the screen tracked in state (null for initial state)
+ // or last screen index if a user navigates by pressing back
+ // button from about:home
+ const handler = ({
+ state
+ }) => {
+ if (transition === "out") {
+ return;
+ }
+ setTransition(props.transitions ? "out" : "");
+ setTimeout(() => {
+ setTransition(props.transitions ? "in" : "");
+ setScreenIndex(Math.min(state, screens.length - 1));
+ }, props.transitions ? TRANSITION_OUT_TIME : 0);
+ };
+
+ // Handle page load, e.g., going back to about:welcome from about:home
+ const {
+ state
+ } = window.history;
+ if (state) {
+ setScreenIndex(Math.min(state, screens.length - 1));
+ setPreviousOrder(Math.min(state, screens.length - 1));
+ }
+
+ // Watch for browser back/forward button navigation events
+ window.addEventListener("popstate", handler);
+ return () => window.removeEventListener("popstate", handler);
+ }
+ return false;
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const [multiSelects, setMultiSelects] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
+
+ // Save the active multi select state for each screen as an object keyed by
+ // screen id. Each screen id has an array containing checkbox ids used in
+ // handleAction to update MULTI_ACTION data. This allows us to remember the
+ // state of each screen's multi select checkboxes when navigating back and
+ // forth between screens, while also allowing a message to have more than one
+ // multi select screen.
+ const [activeMultiSelects, setActiveMultiSelects] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
+
+ // Get the active theme so the rendering code can make it selected
+ // by default.
+ const [activeTheme, setActiveTheme] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+ const [initialTheme, setInitialTheme] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ (async () => {
+ let theme = await window.AWGetSelectedTheme();
+ setInitialTheme(theme);
+ setActiveTheme(theme);
+ })();
+ }, []);
+ const {
+ negotiatedLanguage,
+ langPackInstallPhase,
+ languageFilteredScreens
+ } = (0,_LanguageSwitcher__WEBPACK_IMPORTED_MODULE_4__.useLanguageSwitcher)(props.appAndSystemLocaleInfo, screens, index, setScreenIndex);
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ setScreens(languageFilteredScreens);
+ }, [languageFilteredScreens]);
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: `outer-wrapper onboardingContainer proton transition-${transition}`,
+ style: props.backdrop ? {
+ background: props.backdrop
+ } : {}
+ }, screens.map((screen, order) => {
+ const isFirstScreen = screen === screens[0];
+ const isLastScreen = screen === screens[screens.length - 1];
+ const totalNumberOfScreens = screens.length;
+ const isSingleScreen = totalNumberOfScreens === 1;
+ const setActiveMultiSelect = valueOrFn => setActiveMultiSelects(prevState => ({
+ ...prevState,
+ [screen.id]: typeof valueOrFn === "function" ? valueOrFn(prevState[screen.id]) : valueOrFn
+ }));
+ const setScreenMultiSelects = valueOrFn => setMultiSelects(prevState => ({
+ ...prevState,
+ [screen.id]: typeof valueOrFn === "function" ? valueOrFn(prevState[screen.id]) : valueOrFn
+ }));
+ return index === order ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(WelcomeScreen, {
+ key: screen.id + order,
+ id: screen.id,
+ totalNumberOfScreens: totalNumberOfScreens,
+ isFirstScreen: isFirstScreen,
+ isLastScreen: isLastScreen,
+ isSingleScreen: isSingleScreen,
+ order: order,
+ previousOrder: previousOrder,
+ content: screen.content,
+ navigate: handleTransition,
+ messageId: `${props.message_id}_${order}_${screen.id}`,
+ UTMTerm: props.utm_term,
+ flowParams: flowParams,
+ activeTheme: activeTheme,
+ initialTheme: initialTheme,
+ setActiveTheme: setActiveTheme,
+ setInitialTheme: setInitialTheme,
+ screenMultiSelects: multiSelects[screen.id],
+ setScreenMultiSelects: setScreenMultiSelects,
+ activeMultiSelect: activeMultiSelects[screen.id],
+ setActiveMultiSelect: setActiveMultiSelect,
+ autoAdvance: screen.auto_advance,
+ negotiatedLanguage: negotiatedLanguage,
+ langPackInstallPhase: langPackInstallPhase,
+ forceHideStepsIndicator: screen.force_hide_steps_indicator,
+ ariaRole: props.ariaRole,
+ aboveButtonStepsIndicator: screen.above_button_steps_indicator
+ }) : null;
+ })));
+};
+const SecondaryCTA = props => {
+ const targetElement = props.position ? `secondary_button_${props.position}` : `secondary_button`;
+ let buttonStyling = props.content.secondary_button?.has_arrow_icon ? `secondary arrow-icon` : `secondary`;
+ const isPrimary = props.content.secondary_button?.style === "primary";
+ const isTextLink = !["split", "callout"].includes(props.content.position) && props.content.tiles?.type !== "addons-picker" && !isPrimary;
+ const isSplitButton = props.content.submenu_button?.attached_to === targetElement;
+ let className = "secondary-cta";
+ if (props.position) {
+ className += ` ${props.position}`;
+ }
+ if (isSplitButton) {
+ className += " split-button-container";
+ }
+ const isDisabled = react__WEBPACK_IMPORTED_MODULE_0___default().useCallback(disabledValue => disabledValue === "hasActiveMultiSelect" ? !(props.activeMultiSelect?.length > 0) : disabledValue, [props.activeMultiSelect?.length]);
+ if (isTextLink) {
+ buttonStyling += " text-link";
+ }
+ if (isPrimary) {
+ buttonStyling = props.content.secondary_button?.has_arrow_icon ? `primary arrow-icon` : `primary`;
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: className
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: props.content[targetElement].text
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: props.content[targetElement].label
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ className: buttonStyling,
+ value: targetElement,
+ disabled: isDisabled(props.content.secondary_button?.disabled),
+ onClick: props.handleAction
+ })), isSplitButton ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SubmenuButton__WEBPACK_IMPORTED_MODULE_5__.SubmenuButton, {
+ content: props.content,
+ handleAction: props.handleAction
+ }) : null);
+};
+const StepsIndicator = props => {
+ let steps = [];
+ for (let i = 0; i < props.totalNumberOfScreens; i++) {
+ let className = `${i === props.order ? "current" : ""} ${i < props.order ? "complete" : ""}`;
+ steps.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ key: i,
+ className: `indicator ${className}`,
+ role: "presentation"
+ }));
+ }
+ return steps;
+};
+const ProgressBar = ({
+ step,
+ previousStep,
+ totalNumberOfScreens
+}) => {
+ const [progress, setProgress] = react__WEBPACK_IMPORTED_MODULE_0___default().useState(previousStep / totalNumberOfScreens);
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ // We don't need to hook any dependencies because any time the step changes,
+ // the screen's entire DOM tree will be re-rendered.
+ setProgress(step / totalNumberOfScreens);
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "indicator",
+ role: "presentation",
+ style: {
+ "--progress-bar-progress": `${progress * 100}%`
+ }
+ });
+};
+class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+ constructor(props) {
+ super(props);
+ this.handleAction = this.handleAction.bind(this);
+ }
+ handleOpenURL(action, flowParams, UTMTerm) {
+ let {
+ type,
+ data
+ } = action;
+ if (type === "SHOW_FIREFOX_ACCOUNTS") {
+ let params = {
+ ..._lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_6__.BASE_PARAMS,
+ utm_term: `${UTMTerm}-screen`
+ };
+ if (action.addFlowParams && flowParams) {
+ params = {
+ ...params,
+ ...flowParams
+ };
+ }
+ data = {
+ ...data,
+ extraParams: params
+ };
+ } else if (type === "OPEN_URL") {
+ let url = new URL(data.args);
+ (0,_lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_6__.addUtmParams)(url, `${UTMTerm}-screen`);
+ if (action.addFlowParams && flowParams) {
+ url.searchParams.append("device_id", flowParams.deviceId);
+ url.searchParams.append("flow_id", flowParams.flowId);
+ url.searchParams.append("flow_begin_time", flowParams.flowBeginTime);
+ }
+ data = {
+ ...data,
+ args: url.toString()
+ };
+ }
+ return _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.handleUserAction({
+ type,
+ data
+ });
+ }
+ async handleAction(event) {
+ let {
+ props
+ } = this;
+ const value = event.currentTarget.value ?? event.currentTarget.getAttribute("value");
+ const source = event.source || value;
+ let targetContent = props.content[value] || props.content.tiles || props.content.languageSwitcher;
+ if (value === "submenu_button" && event.action) {
+ targetContent = {
+ action: event.action
+ };
+ }
+ if (!(targetContent && targetContent.action)) {
+ return;
+ }
+ // Send telemetry before waiting on actions
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(props.messageId, source, event.name);
+
+ // Send additional telemetry if a messaging surface like feature callout is
+ // dismissed via the dismiss button. Other causes of dismissal will be
+ // handled separately by the messaging surface's own code.
+ if (value === "dismiss_button" && !event.name) {
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendDismissTelemetry(props.messageId, source);
+ }
+ let {
+ action
+ } = targetContent;
+ action = JSON.parse(JSON.stringify(action));
+ if (action.collectSelect) {
+ this.setMultiSelectActions(action);
+ }
+ let actionResult;
+ if (["OPEN_URL", "SHOW_FIREFOX_ACCOUNTS"].includes(action.type)) {
+ actionResult = await this.handleOpenURL(action, props.flowParams, props.UTMTerm);
+ } else if (action.type) {
+ actionResult = await _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.handleUserAction(action);
+ if (action.type === "FXA_SIGNIN_FLOW") {
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(props.messageId, actionResult ? "sign_in" : "sign_in_cancel", "FXA_SIGNIN_FLOW");
+ }
+ // Wait until migration closes to complete the action
+ const hasMigrate = a => a.type === "SHOW_MIGRATION_WIZARD" || a.type === "MULTI_ACTION" && a.data?.actions?.some(hasMigrate);
+ if (hasMigrate(action)) {
+ await window.AWWaitForMigrationClose();
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(props.messageId, "migrate_close");
+ }
+ }
+
+ // A special tiles.action.theme value indicates we should use the event's value vs provided value.
+ if (action.theme) {
+ let themeToUse = action.theme === "<event>" ? event.currentTarget.value : this.props.initialTheme || action.theme;
+ this.props.setActiveTheme(themeToUse);
+ window.AWSelectTheme(themeToUse);
+ }
+
+ // If the action has persistActiveTheme: true, we set the initial theme to the currently active theme
+ // so that it can be reverted to in the event that the user navigates away from the screen
+ if (action.persistActiveTheme) {
+ this.props.setInitialTheme(this.props.activeTheme);
+ }
+
+ // `navigate` and `dismiss` can be true/false/undefined, or they can be a
+ // string "actionResult" in which case we should use the actionResult
+ // (boolean resolved by handleUserAction)
+ const shouldDoBehavior = behavior => behavior === "actionResult" ? actionResult : behavior;
+ if (shouldDoBehavior(action.navigate)) {
+ props.navigate();
+ }
+ if (shouldDoBehavior(action.dismiss)) {
+ window.AWFinish();
+ }
+ }
+ setMultiSelectActions(action) {
+ let {
+ props
+ } = this;
+ // Populate MULTI_ACTION data actions property with selected checkbox
+ // actions from tiles data
+ if (action.type !== "MULTI_ACTION") {
+ console.error("collectSelect is only supported for MULTI_ACTION type actions");
+ action.type = "MULTI_ACTION";
+ }
+ if (!Array.isArray(action.data?.actions)) {
+ console.error("collectSelect is only supported for MULTI_ACTION type actions with an array of actions");
+ action.data = {
+ actions: []
+ };
+ }
+
+ // Prepend the multi-select actions to the CTA's actions array, but keep
+ // the actions in the same order they appear in. This way the CTA action
+ // can go last, after the multi-select actions are processed. For example,
+ // 1. checkbox action 1
+ // 2. checkbox action 2
+ // 3. radio action
+ // 4. CTA action (which perhaps depends on the radio action)
+ let multiSelectActions = [];
+ for (const checkbox of props.content?.tiles?.data ?? []) {
+ let checkboxAction;
+ if (props.activeMultiSelect?.includes(checkbox.id)) {
+ checkboxAction = checkbox.checkedAction ?? checkbox.action;
+ } else {
+ checkboxAction = checkbox.uncheckedAction;
+ }
+ if (checkboxAction) {
+ multiSelectActions.push(checkboxAction);
+ }
+ }
+ action.data.actions.unshift(...multiSelectActions);
+
+ // Send telemetry with selected checkbox ids
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(props.messageId, props.activeMultiSelect, "SELECT_CHECKBOX");
+ }
+ render() {
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_3__.MultiStageProtonScreen, {
+ content: this.props.content,
+ id: this.props.id,
+ order: this.props.order,
+ previousOrder: this.props.previousOrder,
+ activeTheme: this.props.activeTheme,
+ screenMultiSelects: this.props.screenMultiSelects,
+ setScreenMultiSelects: this.props.setScreenMultiSelects,
+ activeMultiSelect: this.props.activeMultiSelect,
+ setActiveMultiSelect: this.props.setActiveMultiSelect,
+ totalNumberOfScreens: this.props.totalNumberOfScreens,
+ appAndSystemLocaleInfo: this.props.appAndSystemLocaleInfo,
+ negotiatedLanguage: this.props.negotiatedLanguage,
+ langPackInstallPhase: this.props.langPackInstallPhase,
+ handleAction: this.handleAction,
+ messageId: this.props.messageId,
+ isFirstScreen: this.props.isFirstScreen,
+ isLastScreen: this.props.isLastScreen,
+ isSingleScreen: this.props.isSingleScreen,
+ startsWithCorner: this.props.startsWithCorner,
+ autoAdvance: this.props.autoAdvance,
+ forceHideStepsIndicator: this.props.forceHideStepsIndicator,
+ ariaRole: this.props.ariaRole,
+ aboveButtonStepsIndicator: this.props.aboveButtonStepsIndicator
+ });
+ }
+}
+
+/***/ }),
+/* 5 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__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 */ });
+/* 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__);
+/* 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,
+ * 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 ZAP_SIZE_THRESHOLD = 160;
+
+/**
+ * Based on the .text prop, localizes an inner element if a string_id
+ * is provided, OR renders plain text, OR hides it if nothing is provided.
+ * Allows configuring of some styles including zap underline and color.
+ *
+ * Examples:
+ *
+ * Localized text
+ * ftl:
+ * title = Welcome
+ * jsx:
+ * <Localized text={{string_id: "title"}}><h1 /></Localized>
+ * output:
+ * <h1 data-l10n-id="title">Welcome</h1>
+ *
+ * Unlocalized text
+ * jsx:
+ * <Localized text="Welcome"><h1 /></Localized>
+ * <Localized text={{raw: "Welcome"}}><h1 /></Localized>
+ * output:
+ * <h1>Welcome</h1>
+ */
+
+const Localized = ({
+ text,
+ children
+}) => {
+ // Dynamically determine the size of the zap style.
+ const zapRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ const {
+ current
+ } = zapRef;
+ if (current) {
+ requestAnimationFrame(() => current?.classList.replace("short", current.getBoundingClientRect().width > ZAP_SIZE_THRESHOLD ? "long" : "short"));
+ }
+ });
+
+ // Skip rendering of children with no text.
+ if (!text) {
+ return null;
+ }
+
+ // Allow augmenting existing child container properties.
+ const props = {
+ children: [],
+ className: "",
+ style: {},
+ ...children?.props
+ };
+ // Support nested Localized by starting with their children.
+ const textNodes = Array.isArray(props.children) ? props.children : [props.children];
+
+ // Pick desired fluent or raw/plain text to render.
+ if (text.string_id) {
+ // Set the key so React knows not to reuse when switching to plain text.
+ props.key = text.string_id;
+ props["data-l10n-id"] = text.string_id;
+ if (text.args) {
+ props["data-l10n-args"] = JSON.stringify(text.args);
+ }
+ } else if (text.raw) {
+ textNodes.push(text.raw);
+ } else if (typeof text === "string") {
+ textNodes.push(text);
+ }
+
+ // Add zap style and content in a way that allows fluent to insert too.
+ if (text.zap) {
+ props.className += " welcomeZap";
+ textNodes.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+ className: "short zap",
+ "data-l10n-name": "zap",
+ ref: zapRef
+ }, text.zap));
+ }
+ if (text.aria_label) {
+ props["aria-label"] = text.aria_label;
+ }
+
+ // Apply certain configurable styles.
+ CONFIGURABLE_STYLES.forEach(style => {
+ if (text[style] !== undefined) {
+ props.style[style] = text[style];
+ }
+ });
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(
+ // Provide a default container for the text if necessary.
+ children ?? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null), props,
+ // Conditionally pass in as void elements can't accept empty array.
+ textNodes.length ? textNodes : null);
+};
+
+/***/ }),
+/* 6 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__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 */ });
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _MobileDownloads__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
+/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
+/* harmony import */ var _Themes__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9);
+/* harmony import */ var _MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4);
+/* harmony import */ var _LanguageSwitcher__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(10);
+/* harmony import */ var _CTAParagraph__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(11);
+/* harmony import */ var _HeroImage__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(12);
+/* harmony import */ var _OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(13);
+/* harmony import */ var _AdditionalCTA__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(14);
+/* harmony import */ var _EmbeddedMigrationWizard__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(16);
+/* harmony import */ var _AddonsPicker__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(17);
+/* harmony import */ var _LinkParagraph__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(18);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MultiStageProtonScreen = props => {
+ const {
+ autoAdvance,
+ handleAction,
+ order
+ } = props;
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ if (autoAdvance) {
+ const timer = setTimeout(() => {
+ handleAction({
+ currentTarget: {
+ value: autoAdvance
+ },
+ name: "AUTO_ADVANCE"
+ });
+ }, 20000);
+ return () => clearTimeout(timer);
+ }
+ return () => {};
+ }, [autoAdvance, handleAction, order]);
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ProtonScreen, {
+ content: props.content,
+ id: props.id,
+ order: props.order,
+ activeTheme: props.activeTheme,
+ screenMultiSelects: props.screenMultiSelects,
+ setScreenMultiSelects: props.setScreenMultiSelects,
+ activeMultiSelect: props.activeMultiSelect,
+ setActiveMultiSelect: props.setActiveMultiSelect,
+ totalNumberOfScreens: props.totalNumberOfScreens,
+ handleAction: props.handleAction,
+ isFirstScreen: props.isFirstScreen,
+ isLastScreen: props.isLastScreen,
+ isSingleScreen: props.isSingleScreen,
+ previousOrder: props.previousOrder,
+ autoAdvance: props.autoAdvance,
+ isRtamo: props.isRtamo,
+ addonName: props.addonName,
+ isTheme: props.isTheme,
+ iconURL: props.iconURL,
+ messageId: props.messageId,
+ negotiatedLanguage: props.negotiatedLanguage,
+ langPackInstallPhase: props.langPackInstallPhase,
+ forceHideStepsIndicator: props.forceHideStepsIndicator,
+ ariaRole: props.ariaRole,
+ aboveButtonStepsIndicator: props.aboveButtonStepsIndicator
+ });
+};
+const ProtonScreenActionButtons = props => {
+ const {
+ content,
+ addonName,
+ activeMultiSelect
+ } = props;
+ const defaultValue = content.checkbox?.defaultValue;
+ const [isChecked, setIsChecked] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(defaultValue || false);
+ const buttonRef = react__WEBPACK_IMPORTED_MODULE_0___default().useRef(null);
+ const shouldFocusButton = content?.primary_button?.should_focus_button;
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ if (shouldFocusButton) {
+ buttonRef.current?.focus();
+ }
+ }, [shouldFocusButton]);
+ if (!content.primary_button && !content.secondary_button && !content.additional_button) {
+ return null;
+ }
+
+ // If we have a multi-select screen, we want to disable the primary button
+ // until the user has selected at least one item.
+ const isPrimaryDisabled = primaryDisabledValue => primaryDisabledValue === "hasActiveMultiSelect" ? !(activeMultiSelect?.length > 0) : primaryDisabledValue;
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: `action-buttons ${content.additional_button ? "additional-cta-container" : ""}`,
+ flow: content.additional_button?.flow,
+ alignment: content.additional_button?.alignment
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.primary_button?.label
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ ref: buttonRef,
+ className: `${content.primary_button?.style ?? "primary"}${content.primary_button?.has_arrow_icon ? " arrow-icon" : ""}`
+ // Whether or not the checkbox is checked determines which action
+ // should be handled. By setting value here, we indicate to
+ // this.handleAction() where in the content tree it should take
+ // the action to execute from.
+ ,
+ value: isChecked ? "checkbox" : "primary_button",
+ disabled: isPrimaryDisabled(content.primary_button?.disabled),
+ onClick: props.handleAction,
+ "data-l10n-args": addonName ? JSON.stringify({
+ "addon-name": addonName
+ }) : ""
+ })), content.additional_button ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdditionalCTA__WEBPACK_IMPORTED_MODULE_11__.AdditionalCTA, {
+ content: content,
+ handleAction: props.handleAction
+ }) : null, content.checkbox ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "checkbox-container"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+ type: "checkbox",
+ id: "action-checkbox",
+ checked: isChecked,
+ onChange: () => {
+ setIsChecked(!isChecked);
+ }
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.checkbox.label
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+ htmlFor: "action-checkbox"
+ }))) : null, content.secondary_button ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__.SecondaryCTA, {
+ content: content,
+ handleAction: props.handleAction,
+ activeMultiSelect: activeMultiSelect
+ }) : null);
+};
+class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+ componentDidMount() {
+ this.mainContentHeader.focus();
+ }
+ getScreenClassName(isFirstScreen, isLastScreen, includeNoodles, isVideoOnboarding, isAddonsPicker) {
+ const screenClass = `screen-${this.props.order % 2 !== 0 ? 1 : 2}`;
+ if (isVideoOnboarding) {
+ return "with-video";
+ }
+ if (isAddonsPicker) {
+ return "addons-picker";
+ }
+ return `${isFirstScreen ? `dialog-initial` : ``} ${isLastScreen ? `dialog-last` : ``} ${includeNoodles ? `with-noodles` : ``} ${screenClass}`;
+ }
+ renderTitle({
+ title,
+ title_logo
+ }) {
+ if (title_logo) {
+ const {
+ alignment,
+ ...rest
+ } = title_logo;
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "inline-icon-container",
+ alignment: alignment ?? "center"
+ }, this.renderPicture({
+ ...rest
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: title
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h1", {
+ id: "mainContentHeader"
+ })));
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: title
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h1", {
+ id: "mainContentHeader"
+ }));
+ }
+ renderPicture({
+ imageURL = "chrome://branding/content/about-logo.svg",
+ darkModeImageURL,
+ reducedMotionImageURL,
+ darkModeReducedMotionImageURL,
+ alt = "",
+ width,
+ height,
+ marginBlock,
+ marginInline,
+ className = "logo-container"
+ }) {
+ function getLoadingStrategy() {
+ for (let url of [imageURL, darkModeImageURL, reducedMotionImageURL, darkModeReducedMotionImageURL]) {
+ if (_lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.getLoadingStrategyFor(url) === "lazy") {
+ return "lazy";
+ }
+ }
+ return "eager";
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("picture", {
+ className: className,
+ style: {
+ marginInline,
+ marginBlock
+ }
+ }, darkModeReducedMotionImageURL ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {
+ srcSet: darkModeReducedMotionImageURL,
+ media: "(prefers-color-scheme: dark) and (prefers-reduced-motion: reduce)"
+ }) : null, darkModeImageURL ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {
+ srcSet: darkModeImageURL,
+ media: "(prefers-color-scheme: dark)"
+ }) : null, reducedMotionImageURL ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {
+ srcSet: reducedMotionImageURL,
+ media: "(prefers-reduced-motion: reduce)"
+ }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: alt
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "sr-only logo-alt"
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+ className: "brand-logo",
+ style: {
+ height,
+ width
+ },
+ src: imageURL,
+ alt: "",
+ loading: getLoadingStrategy(),
+ role: alt ? null : "presentation"
+ }));
+ }
+ renderContentTiles() {
+ const {
+ content
+ } = this.props;
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, content.tiles && content.tiles.type === "addons-picker" && content.tiles.data ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AddonsPicker__WEBPACK_IMPORTED_MODULE_13__.AddonsPicker, {
+ content: content,
+ message_id: this.props.messageId,
+ handleAction: this.props.handleAction
+ }) : null, content.tiles && content.tiles.type === "theme" && content.tiles.data ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Themes__WEBPACK_IMPORTED_MODULE_5__.Themes, {
+ content: content,
+ activeTheme: this.props.activeTheme,
+ handleAction: this.props.handleAction
+ }) : null, content.tiles && content.tiles.type === "mobile_downloads" && content.tiles.data ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MobileDownloads__WEBPACK_IMPORTED_MODULE_3__.MobileDownloads, {
+ data: content.tiles.data,
+ handleAction: this.props.handleAction
+ }) : null, content.tiles && content.tiles.type === "multiselect" && content.tiles.data ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiSelect__WEBPACK_IMPORTED_MODULE_4__.MultiSelect, {
+ content: content,
+ screenMultiSelects: this.props.screenMultiSelects,
+ setScreenMultiSelects: this.props.setScreenMultiSelects,
+ 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
+ }) : null);
+ }
+ renderNoodles() {
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "noodle orange-L"
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "noodle purple-C"
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "noodle solid-L"
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "noodle outline-L"
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "noodle yellow-circle"
+ }));
+ }
+ renderLanguageSwitcher() {
+ return this.props.content.languageSwitcher ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_LanguageSwitcher__WEBPACK_IMPORTED_MODULE_7__.LanguageSwitcher, {
+ content: this.props.content,
+ handleAction: this.props.handleAction,
+ negotiatedLanguage: this.props.negotiatedLanguage,
+ langPackInstallPhase: this.props.langPackInstallPhase,
+ messageId: this.props.messageId
+ }) : null;
+ }
+ renderDismissButton() {
+ const {
+ size,
+ marginBlock,
+ marginInline,
+ label
+ } = this.props.content.dismiss_button;
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ className: "dismiss-button",
+ onClick: this.props.handleAction,
+ value: "dismiss_button",
+ "data-l10n-id": label?.string_id || "spotlight-dialog-close-button",
+ "button-size": size,
+ style: {
+ marginBlock,
+ marginInline
+ }
+ });
+ }
+ renderStepsIndicator() {
+ const currentStep = (this.props.order ?? 0) + 1;
+ const previousStep = (this.props.previousOrder ?? -1) + 1;
+ const {
+ content,
+ totalNumberOfScreens: total
+ } = this.props;
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ id: "steps",
+ className: `steps${content.progress_bar ? " progress-bar" : ""}`,
+ "data-l10n-id": content.steps_indicator?.string_id || "onboarding-welcome-steps-indicator-label",
+ "data-l10n-args": JSON.stringify({
+ current: currentStep,
+ total: total ?? 0
+ }),
+ "data-l10n-attrs": "aria-label",
+ role: "progressbar",
+ "aria-valuenow": currentStep,
+ "aria-valuemin": 1,
+ "aria-valuemax": total
+ }, content.progress_bar ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__.ProgressBar, {
+ step: currentStep,
+ previousStep: previousStep,
+ totalNumberOfScreens: total
+ }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__.StepsIndicator, {
+ order: this.props.order,
+ totalNumberOfScreens: total
+ }));
+ }
+ renderSecondarySection(content) {
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: `section-secondary ${content.hide_secondary_section ? "with-secondary-section-hidden" : ""}`,
+ style: content.background ? {
+ background: content.background,
+ "--mr-secondary-background-position-y": content.split_narrow_bkg_position
+ } : {}
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.image_alt_text
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "sr-only image-alt",
+ role: "img"
+ })), content.hero_image ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_HeroImage__WEBPACK_IMPORTED_MODULE_9__.HeroImage, {
+ url: content.hero_image.url
+ }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "message-text"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "spacer-top"
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.hero_text
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h1", null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "spacer-bottom"
+ }))));
+ }
+ renderOrderedContent(content) {
+ const elements = [];
+ for (const item of content) {
+ switch (item.type) {
+ case "text":
+ elements.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_LinkParagraph__WEBPACK_IMPORTED_MODULE_14__.LinkParagraph, {
+ text_content: item,
+ handleAction: this.props.handleAction
+ }));
+ break;
+ case "image":
+ elements.push(this.renderPicture({
+ imageURL: item.url,
+ darkModeImageURL: item.darkModeImageURL,
+ height: item.height,
+ width: item.width,
+ alt: item.alt_text,
+ marginInline: item.marginInline,
+ className: "inline-image"
+ }));
+ }
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, elements);
+ }
+ render() {
+ const {
+ autoAdvance,
+ content,
+ isRtamo,
+ isTheme,
+ isFirstScreen,
+ isLastScreen,
+ isSingleScreen,
+ forceHideStepsIndicator,
+ ariaRole,
+ aboveButtonStepsIndicator
+ } = this.props;
+ const includeNoodles = content.has_noodles;
+ // The default screen position is "center"
+ const isCenterPosition = content.position === "center" || !content.position;
+ const hideStepsIndicator = autoAdvance || content?.video_container || isSingleScreen || forceHideStepsIndicator;
+ const textColorClass = content.text_color ? `${content.text_color}-text` : "";
+ // Assign proton screen style 'screen-1' or 'screen-2' to centered screens
+ // by checking if screen order is even or odd.
+ const screenClassName = isCenterPosition ? this.getScreenClassName(isFirstScreen, isLastScreen, includeNoodles, content?.video_container, content.tiles?.type === "addons-picker") : "";
+ const isEmbeddedMigration = content.tiles?.type === "migration-wizard";
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("main", {
+ className: `screen ${this.props.id || ""}
+ ${screenClassName} ${textColorClass}`,
+ role: ariaRole ?? "alertdialog",
+ layout: content.layout,
+ pos: content.position || "center",
+ tabIndex: "-1",
+ "aria-labelledby": "mainContentHeader",
+ ref: input => {
+ this.mainContentHeader = input;
+ }
+ }, 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,
+ role: "document"
+ }, content.secondary_button_top ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__.SecondaryCTA, {
+ content: content,
+ handleAction: this.props.handleAction,
+ position: "top"
+ }) : null, includeNoodles ? this.renderNoodles() : null, content.dismiss_button ? this.renderDismissButton() : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: `main-content ${hideStepsIndicator ? "no-steps" : ""}`,
+ style: {
+ background: content.background && isCenterPosition ? content.background : null,
+ width: content.width && content.position !== "split" ? content.width : null
+ }
+ }, content.logo ? this.renderPicture(content.logo) : null, isRtamo ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "rtamo-icon"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+ className: `${isTheme ? "rtamo-theme-icon" : "brand-logo"}`,
+ src: this.props.iconURL,
+ loading: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.getLoadingStrategyFor(this.props.iconURL),
+ alt: "",
+ role: "presentation"
+ })) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "main-content-inner"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: `welcome-text ${content.title_style || ""}`
+ }, content.title ? this.renderTitle(content) : null, content.subtitle ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.subtitle
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
+ "data-l10n-args": JSON.stringify({
+ "addon-name": this.props.addonName,
+ ...this.props.appAndSystemLocaleInfo?.displayNames
+ }),
+ "aria-flowto": this.props.messageId?.includes("FEATURE_TOUR") ? "steps" : ""
+ })) : null, content.cta_paragraph ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_CTAParagraph__WEBPACK_IMPORTED_MODULE_8__.CTAParagraph, {
+ content: content.cta_paragraph,
+ handleAction: this.props.handleAction
+ }) : null), content.video_container ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__.OnboardingVideo, {
+ 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, {
+ content: content,
+ addonName: this.props.addonName,
+ handleAction: this.props.handleAction,
+ activeMultiSelect: this.props.activeMultiSelect
+ })), !hideStepsIndicator && !aboveButtonStepsIndicator ? this.renderStepsIndicator() : null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.info_text
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+ className: "info-text"
+ })));
+ }
+}
+
+/***/ }),
+/* 7 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+const MarketplaceButtons = props => {
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+ className: "mobile-download-buttons"
+ }, props.buttons.includes("ios") ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+ className: "ios"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ "data-l10n-id": "spotlight-ios-marketplace-button",
+ value: "ios",
+ onClick: props.handleAction
+ })) : null, props.buttons.includes("android") ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+ className: "android"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ "data-l10n-id": "spotlight-android-marketplace-button",
+ value: "android",
+ onClick: props.handleAction
+ })) : null);
+};
+const MobileDownloads = props => {
+ const {
+ QR_code: QRCode
+ } = props.data;
+ const showEmailLink = props.data.email && window.AWSendToDeviceEmailsSupported();
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "mobile-downloads"
+ }, QRCode ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+ "data-l10n-id": QRCode.alt_text.string_id ? QRCode.alt_text.string_id : null,
+ className: "qr-code-image",
+ alt: typeof QRCode.alt_text === "string" ? QRCode.alt_text : "",
+ src: QRCode.image_url,
+ loading: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.getLoadingStrategyFor(QRCode.image_url)
+ }) : null, showEmailLink ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: props.data.email.link_text
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ className: "email-link",
+ value: "email_link",
+ onClick: props.handleAction
+ }))) : null, props.data.marketplace_buttons ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MarketplaceButtons, {
+ buttons: props.data.marketplace_buttons,
+ handleAction: props.handleAction
+ }) : null);
+};
+
+/***/ }),
+/* 8 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const MULTI_SELECT_STYLES = [..._MSLocalized__WEBPACK_IMPORTED_MODULE_1__.CONFIGURABLE_STYLES, "flexDirection", "flexWrap", "flexFlow", "flexGrow", "flexShrink", "justifyContent", "alignItems", "gap"];
+const MULTI_SELECT_ICON_STYLES = [..._MSLocalized__WEBPACK_IMPORTED_MODULE_1__.CONFIGURABLE_STYLES, "width", "height", "background", "backgroundColor", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundOrigin", "backgroundClip", "border", "borderRadius", "appearance", "fill", "stroke", "outline", "outlineOffset", "boxShadow"];
+function getValidStyle(style, validStyles, allowVars) {
+ if (!style) {
+ return null;
+ }
+ return Object.keys(style).filter(key => validStyles.includes(key) || allowVars && key.startsWith("--")).reduce((obj, key) => {
+ obj[key] = style[key];
+ return obj;
+ }, {});
+}
+const MultiSelect = ({
+ content,
+ screenMultiSelects,
+ setScreenMultiSelects,
+ activeMultiSelect,
+ setActiveMultiSelect
+}) => {
+ const {
+ data
+ } = content.tiles;
+ const refs = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({});
+ const handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
+ const newActiveMultiSelect = [];
+ Object.keys(refs.current).forEach(key => {
+ if (refs.current[key]?.checked) {
+ newActiveMultiSelect.push(key);
+ }
+ });
+ setActiveMultiSelect(newActiveMultiSelect);
+ }, [setActiveMultiSelect]);
+ const items = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
+ function getOrderedIds() {
+ if (screenMultiSelects) {
+ return screenMultiSelects;
+ }
+ let orderedIds = data.map(item => ({
+ id: item.id,
+ rank: item.randomize ? Math.random() : NaN
+ })).sort((a, b) => b.rank - a.rank).map(({
+ id
+ }) => id);
+ setScreenMultiSelects(orderedIds);
+ return orderedIds;
+ }
+ return getOrderedIds().map(id => data.find(item => item.id === id));
+ }, [] // eslint-disable-line react-hooks/exhaustive-deps
+ );
+ const containerStyle = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => getValidStyle(content.tiles.style, MULTI_SELECT_STYLES, true), [content.tiles.style]);
+
+ // When screen renders for first time, update state
+ // with checkbox ids that has defaultvalue true
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ if (!activeMultiSelect) {
+ let newActiveMultiSelect = [];
+ items.forEach(({
+ id,
+ defaultValue
+ }) => {
+ if (defaultValue && id) {
+ newActiveMultiSelect.push(id);
+ }
+ });
+ setActiveMultiSelect(newActiveMultiSelect);
+ }
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "multi-select-container",
+ style: containerStyle,
+ role: items.some(({
+ type,
+ group
+ }) => type === "radio" && group) ? "radiogroup" : "group",
+ "aria-labelledby": "multi-stage-multi-select-label"
+ }, content.tiles.label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.tiles.label
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
+ id: "multi-stage-multi-select-label"
+ })) : null, items.map(({
+ id,
+ label,
+ icon,
+ type = "checkbox",
+ group,
+ style
+ }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ key: id + label,
+ className: "checkbox-container multi-select-item",
+ style: getValidStyle(style, MULTI_SELECT_STYLES)
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+ type: type // checkbox or radio
+ ,
+ id: id,
+ value: id,
+ name: group,
+ checked: activeMultiSelect?.includes(id),
+ style: getValidStyle(icon?.style, MULTI_SELECT_ICON_STYLES),
+ onChange: handleChange,
+ ref: el => refs.current[id] = el
+ }), label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: label
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+ htmlFor: id
+ })) : null)));
+};
+
+/***/ }),
+/* 9 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const Themes = props => {
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "tiles-theme-container"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("fieldset", {
+ className: "tiles-theme-section"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: props.content.subtitle
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("legend", {
+ className: "sr-only"
+ })), props.content.tiles.data.map(({
+ theme,
+ label,
+ tooltip,
+ description
+ }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ key: theme + label,
+ text: typeof tooltip === "object" ? tooltip : {}
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+ className: "theme",
+ title: theme + label
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: typeof description === "object" ? description : {}
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+ type: "radio",
+ value: theme,
+ name: "theme",
+ checked: theme === props.activeTheme,
+ className: "sr-only input",
+ onClick: props.handleAction
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: `icon ${theme === props.activeTheme ? " selected" : ""} ${theme}`
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: label
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "text"
+ }))))))));
+};
+
+/***/ }),
+/* 10 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ "useLanguageSwitcher": () => (/* binding */ useLanguageSwitcher),
+/* harmony export */ "LanguageSwitcher": () => (/* binding */ LanguageSwitcher)
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+/**
+ * The language switcher implements a hook that should be placed at a higher level
+ * than the actual language switcher component, as it needs to preemptively fetch
+ * and install langpacks for the user if there is a language mismatch screen.
+ */
+function useLanguageSwitcher(appAndSystemLocaleInfo, screens, screenIndex, setScreenIndex) {
+ const languageMismatchScreenIndex = screens.findIndex(({
+ id
+ }) => id === "AW_LANGUAGE_MISMATCH");
+ const screen = screens[languageMismatchScreenIndex];
+
+ // Ensure fluent messages have the negotiatedLanguage args set, as they are rendered
+ // before the negotiatedLanguage is known. If the arg isn't present then Firefox will
+ // crash in development mode.
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ if (screen?.content?.languageSwitcher) {
+ for (const text of Object.values(screen.content.languageSwitcher)) {
+ if (text?.args && text.args.negotiatedLanguage === undefined) {
+ text.args.negotiatedLanguage = "";
+ }
+ }
+ }
+ }, [screen]);
+
+ // If there is a mismatch, then Firefox can negotiate a better langpack to offer
+ // the user.
+ const [negotiatedLanguage, setNegotiatedLanguage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function getNegotiatedLanguage() {
+ if (!appAndSystemLocaleInfo) {
+ return;
+ }
+ if (appAndSystemLocaleInfo.matchType !== "language-mismatch") {
+ // There is no language mismatch, so there is no need to negotiate a langpack.
+ return;
+ }
+ (async () => {
+ const {
+ langPack,
+ langPackDisplayName
+ } = await window.AWNegotiateLangPackForLanguageMismatch(appAndSystemLocaleInfo);
+ if (langPack) {
+ setNegotiatedLanguage({
+ langPackDisplayName,
+ appDisplayName: appAndSystemLocaleInfo.displayNames.appLanguage,
+ langPack,
+ requestSystemLocales: [langPack.target_locale, appAndSystemLocaleInfo.appLocaleRaw],
+ originalAppLocales: [appAndSystemLocaleInfo.appLocaleRaw]
+ });
+ } else {
+ setNegotiatedLanguage({
+ langPackDisplayName: null,
+ appDisplayName: null,
+ langPack: null,
+ requestSystemLocales: null
+ });
+ }
+ })();
+ }, [appAndSystemLocaleInfo]);
+
+ /**
+ * @type {
+ * "before-installation"
+ * | "installing"
+ * | "installed"
+ * | "installation-error"
+ * | "none-available"
+ * }
+ */
+ const [langPackInstallPhase, setLangPackInstallPhase] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("before-installation");
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function ensureLangPackInstalled() {
+ if (!negotiatedLanguage) {
+ // There are no negotiated languages to download yet.
+ return;
+ }
+ setLangPackInstallPhase("installing");
+ window.AWEnsureLangPackInstalled(negotiatedLanguage, screen?.content).then(content => {
+ // Update screen content with strings that might have changed.
+ screen.content = content;
+ setLangPackInstallPhase("installed");
+ }, error => {
+ console.error(error);
+ setLangPackInstallPhase("installation-error");
+ });
+ }, [negotiatedLanguage, screen]);
+ const [languageFilteredScreens, setLanguageFilteredScreens] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(screens);
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function filterScreen() {
+ // Remove the language screen if it exists (already removed for no live
+ // reload) and we either don't-need-to or can't switch.
+ if (screen && (appAndSystemLocaleInfo?.matchType !== "language-mismatch" || negotiatedLanguage?.langPack === null)) {
+ if (screenIndex > languageMismatchScreenIndex) {
+ setScreenIndex(screenIndex - 1);
+ }
+ setLanguageFilteredScreens(screens.filter(s => s.id !== "AW_LANGUAGE_MISMATCH"));
+ } else {
+ setLanguageFilteredScreens(screens);
+ }
+ },
+ // Removing screenIndex as a dependency as it's causing infinite re-renders (1873019)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [appAndSystemLocaleInfo?.matchType, languageMismatchScreenIndex, negotiatedLanguage, screen, screens, setScreenIndex]);
+ return {
+ negotiatedLanguage,
+ langPackInstallPhase,
+ languageFilteredScreens
+ };
+}
+
+/**
+ * The language switcher is a separate component as it needs to perform some asynchronous
+ * network actions such as retrieving the list of langpacks available, and downloading
+ * a new langpack. On a fast connection, this won't be noticeable, but on slow or unreliable
+ * internet this may fail for a user.
+ */
+function LanguageSwitcher(props) {
+ const {
+ content,
+ handleAction,
+ negotiatedLanguage,
+ langPackInstallPhase,
+ messageId
+ } = props;
+ const [isAwaitingLangpack, setIsAwaitingLangpack] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+
+ // Determine the status of the langpack installation.
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ if (isAwaitingLangpack && langPackInstallPhase !== "installing") {
+ window.AWSetRequestedLocales(negotiatedLanguage.requestSystemLocales);
+ requestAnimationFrame(() => {
+ handleAction(
+ // Simulate the click event.
+ {
+ currentTarget: {
+ value: "download_complete"
+ }
+ });
+ });
+ }
+ }, [handleAction, isAwaitingLangpack, langPackInstallPhase, negotiatedLanguage?.requestSystemLocales]);
+ let showWaitingScreen = false;
+ let showPreloadingScreen = false;
+ let showReadyScreen = false;
+ if (isAwaitingLangpack && langPackInstallPhase !== "installed") {
+ showWaitingScreen = true;
+ } else if (langPackInstallPhase === "before-installation") {
+ showPreloadingScreen = true;
+ } else {
+ showReadyScreen = true;
+ }
+
+ // Use {display: "none"} rather than if statements to prevent layout thrashing with
+ // the localized text elements rendering as blank, then filling in the text.
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "action-buttons language-switcher-container"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ style: {
+ display: showPreloadingScreen ? "block" : "none"
+ }
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ className: "primary",
+ value: "primary_button",
+ disabled: true,
+ type: "button"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+ className: "language-loader",
+ src: "chrome://browser/skin/tabbrowser/tab-connecting.png",
+ alt: ""
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.languageSwitcher.waiting
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "secondary-cta"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.languageSwitcher.skip
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ value: "decline_waiting",
+ type: "button",
+ className: "secondary text-link arrow-icon",
+ onClick: handleAction
+ })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ style: {
+ display: showWaitingScreen ? "block" : "none"
+ }
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ className: "primary",
+ value: "primary_button",
+ disabled: true,
+ type: "button"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+ className: "language-loader",
+ src: "chrome://browser/skin/tabbrowser/tab-connecting.png",
+ alt: ""
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.languageSwitcher.downloading
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "secondary-cta"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.languageSwitcher.cancel
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ type: "button",
+ className: "secondary text-link",
+ onClick: () => {
+ setIsAwaitingLangpack(false);
+ handleAction({
+ currentTarget: {
+ value: "cancel_waiting"
+ }
+ });
+ }
+ })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ style: {
+ display: showReadyScreen ? "block" : "none"
+ }
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ className: "primary",
+ value: "primary_button",
+ onClick: () => {
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(messageId, "download_langpack");
+ setIsAwaitingLangpack(true);
+ }
+ }, content.languageSwitcher.switch ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.languageSwitcher.switch
+ }) :
+ // This is the localized name from the Intl.DisplayNames API.
+ negotiatedLanguage?.langPackDisplayName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ type: "button",
+ className: "primary",
+ value: "decline",
+ onClick: event => {
+ window.AWSetRequestedLocales(negotiatedLanguage.originalAppLocales);
+ handleAction(event);
+ }
+ }, content.languageSwitcher.continue ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.languageSwitcher.continue
+ }) :
+ // This is the localized name from the Intl.DisplayNames API.
+ negotiatedLanguage?.appDisplayName))));
+}
+
+/***/ }),
+/* 11 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const CTAParagraph = props => {
+ const {
+ content,
+ handleAction
+ } = props;
+ if (!content?.text) {
+ return null;
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
+ className: "cta-paragraph"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.text
+ }, content.text.string_name && typeof handleAction === "function" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+ "data-l10n-id": content.text.string_id,
+ onClick: handleAction,
+ onKeyUp: event => ["Enter", " "].includes(event.key) ? handleAction(event) : null,
+ value: "cta_paragraph",
+ role: "button",
+ tabIndex: "0"
+ }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+ role: "button",
+ tabIndex: "0",
+ "data-l10n-name": content.text.string_name
+ }, " ")) : null));
+};
+
+/***/ }),
+/* 12 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const HeroImage = props => {
+ const {
+ height,
+ url,
+ alt
+ } = props;
+ if (!url) {
+ return null;
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "hero-image"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+ style: height ? {
+ height
+ } : null,
+ src: url,
+ loading: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.getLoadingStrategyFor(url),
+ alt: alt || "",
+ role: alt ? null : "presentation"
+ }));
+};
+
+/***/ }),
+/* 13 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+const OnboardingVideo = props => {
+ const vidUrl = props.content.video_url;
+ const autoplay = props.content.autoPlay;
+ const handleVideoAction = event => {
+ props.handleAction({
+ currentTarget: {
+ value: event
+ }
+ });
+ };
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
+ // eslint-disable-line jsx-a11y/media-has-caption
+ controls: true,
+ autoPlay: autoplay,
+ src: vidUrl,
+ width: "604px",
+ height: "340px",
+ onPlay: () => handleVideoAction("video_start"),
+ onEnded: () => handleVideoAction("video_end")
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {
+ src: vidUrl
+ })));
+};
+
+/***/ }),
+/* 14 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _SubmenuButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(15);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+const AdditionalCTA = ({
+ content,
+ handleAction
+}) => {
+ let buttonStyle = "";
+ const isSplitButton = content.submenu_button?.attached_to === "additional_button";
+ let className = "additional-cta-box";
+ if (isSplitButton) {
+ className += " split-button-container";
+ }
+ if (!content.additional_button?.style) {
+ buttonStyle = "primary";
+ } else {
+ buttonStyle = content.additional_button?.style === "link" ? "cta-link" : content.additional_button?.style;
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: className
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.additional_button?.label
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ className: `${buttonStyle} additional-cta`,
+ onClick: handleAction,
+ value: "additional_button",
+ disabled: content.additional_button?.disabled === true
+ })), isSplitButton ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SubmenuButton__WEBPACK_IMPORTED_MODULE_2__.SubmenuButton, {
+ content: content,
+ handleAction: handleAction
+ }) : null);
+};
+
+/***/ }),
+/* 15 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const SubmenuButton = props => {
+ return document.createXULElement ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SubmenuButtonInner, props) : null;
+};
+function translateMenuitem(item, element) {
+ let {
+ label
+ } = item;
+ if (!label) {
+ return;
+ }
+ if (label.raw) {
+ element.setAttribute("label", label.raw);
+ }
+ if (label.access_key) {
+ element.setAttribute("accesskey", label.access_key);
+ }
+ if (label.aria_label) {
+ element.setAttribute("aria-label", label.aria_label);
+ }
+ if (label.tooltip_text) {
+ element.setAttribute("tooltiptext", label.tooltip_text);
+ }
+ if (label.string_id) {
+ element.setAttribute("data-l10n-id", label.string_id);
+ if (label.args) {
+ element.setAttribute("data-l10n-args", JSON.stringify(label.args));
+ }
+ }
+}
+function addMenuitems(items, popup) {
+ for (let item of items) {
+ switch (item.type) {
+ case "separator":
+ popup.appendChild(document.createXULElement("menuseparator"));
+ break;
+ case "menu":
+ let menu = document.createXULElement("menu");
+ menu.className = "fxms-multi-stage-menu";
+ translateMenuitem(item, menu);
+ if (item.id) {
+ menu.value = item.id;
+ }
+ if (item.icon) {
+ menu.classList.add("menu-iconic");
+ menu.setAttribute("image", item.icon);
+ }
+ popup.appendChild(menu);
+ let submenuPopup = document.createXULElement("menupopup");
+ menu.appendChild(submenuPopup);
+ addMenuitems(item.submenu, submenuPopup);
+ break;
+ case "action":
+ let menuitem = document.createXULElement("menuitem");
+ translateMenuitem(item, menuitem);
+ menuitem.config = item;
+ if (item.id) {
+ menuitem.value = item.id;
+ }
+ if (item.icon) {
+ menuitem.classList.add("menuitem-iconic");
+ menuitem.setAttribute("image", item.icon);
+ }
+ popup.appendChild(menuitem);
+ break;
+ }
+ }
+}
+const SubmenuButtonInner = ({
+ content,
+ handleAction
+}) => {
+ const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+ const isPrimary = content.submenu_button?.style === "primary";
+ const onCommand = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {
+ let {
+ config
+ } = event.target;
+ let mockEvent = {
+ currentTarget: ref.current,
+ source: config.id,
+ name: "command",
+ action: config.action
+ };
+ handleAction(mockEvent);
+ }, [handleAction]);
+ const onClick = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
+ let button = ref.current;
+ let submenu = button?.querySelector(".fxms-multi-stage-submenu");
+ if (submenu && !button.hasAttribute("open")) {
+ submenu.openPopup(button, {
+ position: "after_end"
+ });
+ }
+ }, []);
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ let button = ref.current;
+ if (!button || button.querySelector(".fxms-multi-stage-submenu")) {
+ return null;
+ }
+ let menupopup = document.createXULElement("menupopup");
+ menupopup.className = "fxms-multi-stage-submenu";
+ addMenuitems(content.submenu_button.submenu, menupopup);
+ button.appendChild(menupopup);
+ let stylesheet;
+ if (!document.head.querySelector(`link[href="chrome://global/content/widgets.css"], link[href="chrome://global/skin/global.css"]`)) {
+ stylesheet = document.createElement("link");
+ stylesheet.rel = "stylesheet";
+ stylesheet.href = "chrome://global/content/widgets.css";
+ document.head.appendChild(stylesheet);
+ }
+ if (!menupopup.listenersRegistered) {
+ menupopup.addEventListener("command", onCommand);
+ menupopup.addEventListener("popupshowing", event => {
+ if (event.target === menupopup && event.target.anchorNode) {
+ event.target.anchorNode.toggleAttribute("open", true);
+ }
+ });
+ menupopup.addEventListener("popuphiding", event => {
+ if (event.target === menupopup && event.target.anchorNode) {
+ event.target.anchorNode.toggleAttribute("open", false);
+ }
+ });
+ menupopup.listenersRegistered = true;
+ }
+ return () => {
+ menupopup?.remove();
+ stylesheet?.remove();
+ };
+ }, [onCommand]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: content.submenu_button.label ?? {}
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ className: `submenu-button ${isPrimary ? "primary" : "secondary"}`,
+ value: "submenu_button",
+ onClick: onClick,
+ ref: ref
+ }));
+};
+
+/***/ }),
+/* 16 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+const EmbeddedMigrationWizard = ({
+ handleAction
+}) => {
+ const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ const handleBeginMigration = () => {
+ handleAction({
+ currentTarget: {
+ value: "migrate_start"
+ },
+ source: "primary_button"
+ });
+ };
+ const handleClose = () => {
+ handleAction({
+ currentTarget: {
+ value: "migrate_close"
+ }
+ });
+ };
+ const {
+ current
+ } = ref;
+ current?.addEventListener("MigrationWizard:BeginMigration", handleBeginMigration);
+ current?.addEventListener("MigrationWizard:Close", handleClose);
+ return () => {
+ current?.removeEventListener("MigrationWizard:BeginMigration", handleBeginMigration);
+ current?.removeEventListener("MigrationWizard:Close", handleClose);
+ };
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("migration-wizard", {
+ "force-show-import-all": "false",
+ "auto-request-state": "",
+ ref: ref
+ });
+};
+
+/***/ }),
+/* 17 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__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 */ });
+/* 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__);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+const Loader = () => {
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ className: "primary"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "loaderContainer"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+ className: "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";
+ function onClick(event) {
+ props.handleAction(event);
+ // Replace the label with the spinner
+ setInstalling(true);
+ window.AWEnsureAddonInstalled(props.addonId).then(value => {
+ if (value === "complete") {
+ // Set the label to "Installed"
+ setInstallComplete(true);
+ }
+ // Whether the addon installs or not, we want to remove the spinner
+ setInstalling(false);
+ });
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "install-button-wrapper"
+ }, installing ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Loader, null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_2__.Localized, {
+ text: buttonLabel
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+ id: props.name,
+ value: props.index,
+ onClick: onClick,
+ disabled: installComplete,
+ className: "primary"
+ })));
+};
+const AddonsPicker = props => {
+ const {
+ content
+ } = props;
+ if (!content) {
+ return null;
+ }
+ function handleAction(event) {
+ const {
+ message_id
+ } = props;
+ let {
+ action,
+ source_id
+ } = content.tiles.data[event.currentTarget.value];
+ let {
+ type,
+ data
+ } = action;
+ if (type === "INSTALL_ADDON_FROM_URL") {
+ if (!data) {
+ return;
+ }
+ }
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.handleUserAction({
+ type,
+ data
+ });
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.sendActionTelemetry(message_id, source_id);
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "addons-picker-container"
+ }, content.tiles.data.map(({
+ id,
+ name,
+ type,
+ description,
+ icon
+ }, index) => name ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ key: id,
+ className: "addon-container"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "rtamo-icon"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+ className: `${type === "theme" ? "rtamo-theme-icon" : "brand-logo"}`,
+ src: icon,
+ role: "presentation",
+ alt: ""
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "addon-details"
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_2__.Localized, {
+ text: name
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "addon-title"
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_2__.Localized, {
+ text: description
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "addon-description"
+ }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(InstallButton, {
+ key: id,
+ addonId: id,
+ name: name,
+ handleAction: handleAction,
+ index: index
+ })) : null));
+};
+
+/***/ }),
+/* 18 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const LinkParagraph = props => {
+ const {
+ text_content,
+ handleAction
+ } = props;
+ const handleParagraphAction = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {
+ if (event.target.closest("a")) {
+ handleAction({
+ ...event,
+ currentTarget: event.target
+ });
+ }
+ }, [handleAction]);
+ const onKeyPress = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {
+ if (event.key === "Enter" && !event.repeat) {
+ handleParagraphAction(event);
+ }
+ }, [handleParagraphAction]);
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+ text: text_content.text
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+ className: text_content.font_styles === "legal" ? "legal-paragraph" : "link-paragraph",
+ onClick: handleParagraphAction,
+ value: "link_paragraph",
+ onKeyPress: onKeyPress
+ }, text_content.link_keys?.map(link => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+ key: link,
+ value: link,
+ role: "link",
+ className: "text-link",
+ "data-l10n-name": link
+ // must pass in tabIndex when no href is provided
+ ,
+ tabIndex: "0"
+ }, " "))));
+};
+
+/***/ }),
+/* 19 */
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__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 */ });
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * BASE_PARAMS keys/values can be modified from outside this file
+ */
+const BASE_PARAMS = {
+ utm_source: "activity-stream",
+ utm_campaign: "firstrun",
+ utm_medium: "referral",
+};
+
+/**
+ * Takes in a url as a string or URL object and returns a URL object with the
+ * utm_* parameters added to it. If a URL object is passed in, the paraemeters
+ * are added to it (the return value can be ignored in that case as it's the
+ * same object).
+ */
+function addUtmParams(url, utmTerm) {
+ let returnUrl = url;
+ if (typeof returnUrl === "string") {
+ returnUrl = new URL(url);
+ }
+ for (let [key, value] of Object.entries(BASE_PARAMS)) {
+ if (!returnUrl.searchParams.has(key)) {
+ returnUrl.searchParams.append(key, value);
+ }
+ }
+ returnUrl.searchParams.append("utm_term", utmTerm);
+ return returnUrl;
+}
+
+
+/***/ }),
+/* 20 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* 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__);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var _MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
+/* harmony import */ var _lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19);
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+class ReturnToAMO extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+ constructor(props) {
+ super(props);
+ this.fetchFlowParams = this.fetchFlowParams.bind(this);
+ this.handleAction = this.handleAction.bind(this);
+ }
+ async fetchFlowParams() {
+ if (this.props.metricsFlowUri) {
+ this.setState({
+ flowParams: await _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.fetchFlowParams(this.props.metricsFlowUri)
+ });
+ }
+ }
+ componentDidUpdate() {
+ this.fetchFlowParams();
+ }
+ handleAction(event) {
+ const {
+ content,
+ message_id,
+ url,
+ utm_term
+ } = this.props;
+ let {
+ action,
+ source_id
+ } = content[event.currentTarget.value];
+ let {
+ type,
+ data
+ } = action;
+ if (type === "INSTALL_ADDON_FROM_URL") {
+ if (!data) {
+ return;
+ }
+ // Set add-on url in action.data.url property from JSON
+ data = {
+ ...data,
+ url
+ };
+ } else if (type === "SHOW_FIREFOX_ACCOUNTS") {
+ let params = {
+ ..._lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_3__.BASE_PARAMS,
+ utm_term: `aboutwelcome-${utm_term}-screen`
+ };
+ if (action.addFlowParams && this.state.flowParams) {
+ params = {
+ ...params,
+ ...this.state.flowParams
+ };
+ }
+ data = {
+ ...data,
+ extraParams: params
+ };
+ }
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.handleUserAction({
+ type,
+ data
+ });
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.sendActionTelemetry(message_id, source_id);
+ }
+ render() {
+ const {
+ content,
+ type
+ } = this.props;
+ if (!content) {
+ return null;
+ }
+ if (content?.primary_button.label) {
+ content.primary_button.label.string_id = type.includes("theme") ? "return-to-amo-add-theme-label" : "mr1-return-to-amo-add-extension-label";
+ }
+
+ // For experiments, when needed below rendered UI allows settings hard coded strings
+ // directly inside JSON except for ReturnToAMOText which picks add-on name and icon from fluent string
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+ className: "outer-wrapper onboardingContainer proton",
+ style: content.backdrop ? {
+ background: content.backdrop
+ } : {}
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_2__.MultiStageProtonScreen, {
+ content: content,
+ isRtamo: true,
+ isTheme: type.includes("theme"),
+ id: this.props.message_id,
+ order: this.props.order || 0,
+ totalNumberOfScreens: 1,
+ isSingleScreen: true,
+ autoAdvance: this.props.auto_advance,
+ iconURL: type.includes("theme") ? this.props.themeScreenshots[0]?.url : this.props.iconURL,
+ addonName: this.props.name,
+ handleAction: this.handleAction
+ }));
+ }
+}
+ReturnToAMO.defaultProps = _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.DEFAULT_RTAMO_CONTENT;
+
+/***/ })
+/******/ ]);
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/compat get default export */
+/******/ (() => {
+/******/ // getDefaultExport function for compatibility with non-harmony modules
+/******/ __webpack_require__.n = (module) => {
+/******/ var getter = module && module.__esModule ?
+/******/ () => (module['default']) :
+/******/ () => (module);
+/******/ __webpack_require__.d(getter, { a: getter });
+/******/ return getter;
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ // define getter functions for harmony exports
+/******/ __webpack_require__.d = (exports, definition) => {
+/******/ for(var key in definition) {
+/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ }
+/******/ }
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+/* 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__);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _components_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var _components_ReturnToAMO__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(20);
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* 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,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+
+class AboutWelcome extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+ constructor(props) {
+ super(props);
+ this.state = {
+ metricsFlowUri: null
+ };
+ this.fetchFxAFlowUri = this.fetchFxAFlowUri.bind(this);
+ }
+ async fetchFxAFlowUri() {
+ this.setState({
+ metricsFlowUri: await window.AWGetFxAMetricsFlowURI?.()
+ });
+ }
+ componentDidMount() {
+ if (!this.props.skipFxA) {
+ this.fetchFxAFlowUri();
+ }
+ if (document.location.href === "about:welcome") {
+ // Record impression with performance data after allowing the page to load
+ const recordImpression = domState => {
+ const {
+ domComplete,
+ domInteractive
+ } = performance.getEntriesByType("navigation").pop();
+ _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendImpressionTelemetry(this.props.messageId, {
+ domComplete,
+ domInteractive,
+ mountStart: performance.getEntriesByName("mount").pop().startTime,
+ domState,
+ source: this.props.UTMTerm
+ });
+ };
+ if (document.readyState === "complete") {
+ // Page might have already triggered a load event because it waited for async data,
+ // e.g., attribution, so the dom load timing could be of a empty content
+ // with domState in telemetry captured as 'complete'
+ recordImpression(document.readyState);
+ } else {
+ window.addEventListener("load", () => recordImpression("load"), {
+ once: true
+ });
+ }
+
+ // Captures user has seen about:welcome by setting
+ // firstrun.didSeeAboutWelcome pref to true and capturing welcome UI unique messageId
+ window.AWSendToParent("SET_WELCOME_MESSAGE_SEEN", this.props.messageId);
+ }
+ }
+ render() {
+ const {
+ props
+ } = this;
+ if (props.template === "return_to_amo") {
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_ReturnToAMO__WEBPACK_IMPORTED_MODULE_4__.ReturnToAMO, {
+ message_id: props.messageId,
+ type: props.type,
+ name: props.name,
+ url: props.url,
+ iconURL: props.iconURL,
+ themeScreenshots: props.screenshots,
+ metricsFlowUri: this.state.metricsFlowUri
+ });
+ }
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_3__.MultiStageAboutWelcome, {
+ message_id: props.messageId,
+ defaultScreens: props.screens,
+ updateHistory: !props.disableHistoryUpdates,
+ metricsFlowUri: this.state.metricsFlowUri,
+ utm_term: props.UTMTerm,
+ transitions: props.transitions,
+ backdrop: props.backdrop,
+ startScreen: props.startScreen || 0,
+ appAndSystemLocaleInfo: props.appAndSystemLocaleInfo,
+ ariaRole: props.aria_role
+ });
+ }
+}
+
+// Computes messageId and UTMTerm info used in telemetry
+function ComputeTelemetryInfo(welcomeContent, experimentId, branchId) {
+ let messageId = welcomeContent.template === "return_to_amo" ? `RTAMO_DEFAULT_WELCOME_${welcomeContent.type.toUpperCase()}` : "DEFAULT_ID";
+ let UTMTerm = "aboutwelcome-default";
+ if (welcomeContent.id) {
+ messageId = welcomeContent.id.toUpperCase();
+ }
+ if (experimentId && branchId) {
+ UTMTerm = `aboutwelcome-${experimentId}-${branchId}`.toLowerCase();
+ }
+ return {
+ messageId,
+ UTMTerm
+ };
+}
+async function retrieveRenderContent() {
+ // Feature config includes RTAMO attribution data if exists
+ // else below data in order specified
+ // user prefs
+ // experiment data
+ // defaults
+ let featureConfig = await window.AWGetFeatureConfig();
+ let {
+ messageId,
+ UTMTerm
+ } = ComputeTelemetryInfo(featureConfig, featureConfig.slug, featureConfig.branch && featureConfig.branch.slug);
+ return {
+ featureConfig,
+ messageId,
+ UTMTerm
+ };
+}
+async function mount() {
+ let {
+ featureConfig: aboutWelcomeProps,
+ messageId,
+ UTMTerm
+ } = await retrieveRenderContent();
+ react_dom__WEBPACK_IMPORTED_MODULE_1___default().render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AboutWelcome, _extends({
+ messageId: messageId,
+ UTMTerm: UTMTerm
+ }, aboutWelcomeProps)), document.getElementById("multi-stage-message-root"));
+}
+performance.mark("mount");
+mount();
+})();
+
+/******/ })()
+; \ No newline at end of file
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css
new file mode 100644
index 0000000000..63608bd48a
--- /dev/null
+++ b/browser/components/aboutwelcome/content/aboutwelcome.css
@@ -0,0 +1,2536 @@
+/* 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, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* stylelint-disable max-nesting-depth */
+#feature-callout {
+ --fc-background: var(--fc-background-light, #fff);
+ --fc-color: var(--fc-color-light, rgb(21, 20, 26));
+ --fc-border: var(--fc-border-light, #CFCFD8);
+ --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
+ --fc-button-background: var(--fc-button-background-light, #F0F0F4);
+ --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
+ --fc-button-border: var(--fc-button-border-light, transparent);
+ --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
+ --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
+ --fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
+ --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
+ --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
+ --fc-button-border-active: var(--fc-button-border-active-light, transparent);
+ --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0);
+ --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
+ --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
+ --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb);
+ --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
+ --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
+ --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94);
+ --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
+ --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
+ --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
+ --fc-link-color: var(--fc-link-color-light, #0061E0);
+ --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
+ --fc-link-color-active: var(--fc-link-color-active-light, #053E94);
+ position: absolute;
+ z-index: 2147483647;
+ outline: none;
+ color: var(--fc-color);
+ accent-color: var(--fc-accent-color);
+ -moz-theme: non-native;
+ --arrow-width: 33.9411px;
+ --arrow-square-size: calc(var(--arrow-width) / sqrt(2));
+ --extra-width-from-rotation: calc(var(--arrow-width) - var(--arrow-square-size));
+ --arrow-visible-height: calc(var(--arrow-width) / 2);
+ --arrow-visible-size: calc(var(--arrow-square-size) / 2);
+ --arrow-center-inset: calc(50% - var(--arrow-visible-size));
+ --arrow-offset: calc(1.5px - var(--arrow-visible-size));
+ --arrow-corner-distance: 12px;
+ --arrow-corner-inset: calc(var(--arrow-corner-distance) + (var(--extra-width-from-rotation) / 2));
+ --arrow-overlap-magnitude: 5px;
+}
+@media (prefers-color-scheme: dark) {
+ #feature-callout {
+ --fc-background: var(--fc-background-dark, rgb(43, 42, 51));
+ --fc-color: var(--fc-color-dark, rgb(251, 251, 254));
+ --fc-border: var(--fc-border-dark, #3A3944);
+ --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
+ --fc-button-background: var(--fc-button-background-dark, #2B2A33);
+ --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
+ --fc-button-border: var(--fc-button-border-dark, transparent);
+ --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
+ --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
+ --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
+ --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
+ --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
+ --fc-button-border-active: var(--fc-button-border-active-dark, transparent);
+ --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
+ --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
+ --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
+ --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
+ --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
+ --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
+ --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
+ --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
+ --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
+ --fc-link-color: var(--fc-link-color-dark, #00DDFF);
+ --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
+ --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
+ }
+}
+@media (prefers-contrast) {
+ #feature-callout {
+ --fc-background: var(--fc-background-hcm, -moz-dialog);
+ --fc-color: var(--fc-color-hcm, -moz-dialogtext);
+ --fc-border: var(--fc-border-hcm, -moz-dialogtext);
+ --fc-accent-color: var(--fc-accent-color-hcm, LinkText);
+ --fc-button-background: var(--fc-button-background-hcm, ButtonFace);
+ --fc-button-color: var(--fc-button-color-hcm, ButtonText);
+ --fc-button-border: var(--fc-button-border-hcm, ButtonText);
+ --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText);
+ --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace);
+ --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText);
+ --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText);
+ --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
+ --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
+ --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText);
+ --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace);
+ --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace);
+ --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem);
+ --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText);
+ --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText);
+ --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText);
+ --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem);
+ --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem);
+ --fc-step-color: var(--fc-accent-color-hcm, LinkText);
+ --fc-link-color: var(--fc-link-color-hcm, LinkText);
+ --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
+ --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
+ }
+}
+#feature-callout.simulateContent {
+ color-scheme: env(-moz-content-preferred-color-scheme);
+}
+@media (-moz-content-prefers-color-scheme: light) {
+ #feature-callout.simulateContent {
+ --fc-background: var(--fc-background-light, #fff);
+ --fc-color: var(--fc-color-light, rgb(21, 20, 26));
+ --fc-border: var(--fc-border-light, #CFCFD8);
+ --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
+ --fc-button-background: var(--fc-button-background-light, #F0F0F4);
+ --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
+ --fc-button-border: var(--fc-button-border-light, transparent);
+ --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
+ --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
+ --fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
+ --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
+ --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
+ --fc-button-border-active: var(--fc-button-border-active-light, transparent);
+ --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0);
+ --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
+ --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
+ --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb);
+ --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
+ --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
+ --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94);
+ --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
+ --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
+ --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
+ --fc-link-color: var(--fc-link-color-light, #0061E0);
+ --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
+ --fc-link-color-active: var(--fc-link-color-active-light, #053E94);
+ }
+}
+@media (-moz-content-prefers-color-scheme: dark) {
+ #feature-callout.simulateContent {
+ --fc-background: var(--fc-background-dark, rgb(43, 42, 51));
+ --fc-color: var(--fc-color-dark, rgb(251, 251, 254));
+ --fc-border: var(--fc-border-dark, #3A3944);
+ --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
+ --fc-button-background: var(--fc-button-background-dark, #2B2A33);
+ --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
+ --fc-button-border: var(--fc-button-border-dark, transparent);
+ --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
+ --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
+ --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
+ --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
+ --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
+ --fc-button-border-active: var(--fc-button-border-active-dark, transparent);
+ --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
+ --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
+ --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
+ --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
+ --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
+ --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
+ --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
+ --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
+ --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
+ --fc-link-color: var(--fc-link-color-dark, #00DDFF);
+ --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
+ --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
+ }
+}
+@media (prefers-contrast) {
+ #feature-callout.simulateContent {
+ --fc-background: var(--fc-background-hcm, -moz-dialog);
+ --fc-color: var(--fc-color-hcm, -moz-dialogtext);
+ --fc-border: var(--fc-border-hcm, -moz-dialogtext);
+ --fc-accent-color: var(--fc-accent-color-hcm, LinkText);
+ --fc-button-background: var(--fc-button-background-hcm, ButtonFace);
+ --fc-button-color: var(--fc-button-color-hcm, ButtonText);
+ --fc-button-border: var(--fc-button-border-hcm, ButtonText);
+ --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText);
+ --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace);
+ --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText);
+ --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText);
+ --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
+ --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
+ --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText);
+ --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace);
+ --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace);
+ --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem);
+ --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText);
+ --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText);
+ --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText);
+ --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem);
+ --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem);
+ --fc-step-color: var(--fc-accent-color-hcm, LinkText);
+ --fc-link-color: var(--fc-link-color-hcm, LinkText);
+ --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
+ --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
+ }
+}
+panel#feature-callout {
+ --panel-color: var(--fc-color);
+ --panel-shadow: none;
+ --panel-shadow-margin: 6px;
+ --panel-arrow-space: calc(var(--panel-shadow-margin) + var(--arrow-visible-height) - 1.5px);
+ --panel-margin-offset: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-corner-distance) + (var(--arrow-width) / 2)));
+}
+
+panel#feature-callout::part(content) {
+ width: initial;
+ border: 0;
+ border-radius: 0;
+ padding: 0;
+ margin: var(--panel-shadow-margin);
+ background: none;
+ color: inherit;
+ overflow: visible !important;
+}
+
+div#feature-callout {
+ transition: opacity 0.5s ease;
+}
+div#feature-callout.hidden {
+ opacity: 0;
+ pointer-events: none;
+}
+
+#feature-callout .onboardingContainer,
+#feature-callout .onboardingContainer .outer-wrapper {
+ --transition: none;
+ height: auto;
+}
+#feature-callout:dir(rtl) {
+ transform: none;
+ direction: ltr;
+}
+#feature-callout .outer-wrapper:dir(rtl) {
+ transform: none;
+ direction: rtl;
+}
+#feature-callout .screen:dir(rtl) {
+ transform: none;
+}
+#feature-callout .screen[pos=callout] {
+ height: fit-content;
+ min-height: unset;
+ overflow: visible;
+}
+#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content,
+#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps {
+ width: 18em;
+ padding-inline: 16px;
+ padding-block: 0;
+}
+#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content .welcome-text,
+#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps .welcome-text {
+ height: 24px;
+ margin-block: 12px;
+ margin-inline: 0;
+ padding: 0;
+ white-space: nowrap;
+}
+#feature-callout .screen[pos=callout][layout=inline] .section-main .dismiss-button {
+ height: 24px;
+ width: 24px;
+ min-height: 24px;
+ min-width: 24px;
+ margin: 0;
+ top: calc(50% - 12px);
+ inset-inline-end: 12px;
+}
+#feature-callout .screen[pos=callout] .logo-container {
+ display: flex;
+ justify-content: center;
+}
+#feature-callout .screen[pos=callout] .logo-container .brand-logo {
+ margin: 0;
+}
+#feature-callout .screen[pos=callout] .logo-container .brand-logo:dir(rtl) {
+ transform: rotateY(180deg);
+}
+#feature-callout .screen[pos=callout] .welcome-text {
+ align-items: baseline;
+ text-align: start;
+ margin: 0;
+ padding: 0;
+ gap: 8px;
+}
+#feature-callout .screen[pos=callout] .welcome-text h1,
+#feature-callout .screen[pos=callout] .welcome-text h2 {
+ font-size: 0.813em;
+ margin: 0;
+ color: inherit;
+}
+#feature-callout .screen[pos=callout] .welcome-text h1 {
+ font-weight: 600;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: center;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container {
+ height: 16px;
+ width: 16px;
+ margin-inline-end: 6px;
+ box-sizing: border-box;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container img {
+ height: 16px;
+ width: 16px;
+ margin: 0;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top], #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] {
+ flex-wrap: nowrap;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] .logo-container, #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] .logo-container {
+ height: 1.5em;
+ align-items: center;
+ padding-bottom: 0.15em;
+ box-sizing: border-box;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] {
+ align-items: start;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] {
+ align-items: end;
+}
+#feature-callout .screen[pos=callout] .multi-select-container {
+ margin: 0;
+ font-size: 0.813em;
+ row-gap: 12px;
+ color: inherit;
+ overflow: visible;
+}
+#feature-callout .screen[pos=callout] .multi-select-container #multi-stage-multi-select-label {
+ font-size: inherit;
+ margin: -4px 0 0;
+ color: inherit;
+}
+#feature-callout .screen[pos=callout] .cta-link {
+ background: none;
+ text-decoration: underline;
+ cursor: pointer;
+ border: none;
+ padding: 0;
+ color: var(--fc-link-color);
+ order: -1;
+ margin-inline-end: auto;
+ margin-block: 8px;
+}
+#feature-callout .screen[pos=callout] .cta-link:hover {
+ color: var(--fc-link-color-hover);
+}
+#feature-callout .screen[pos=callout] .cta-link:active {
+ color: var(--fc-link-color-active);
+}
+#feature-callout .screen[pos=callout] .section-secondary {
+ display: none;
+}
+#feature-callout .screen[pos=callout] .section-main {
+ height: fit-content;
+ width: fit-content;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content {
+ position: relative;
+ overflow: hidden;
+ border: 1px solid var(--fc-border);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+ border-radius: 4px;
+ padding: var(--callout-padding, 24px);
+ width: 25em;
+ gap: 16px;
+ background-color: var(--fc-background);
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .main-content-inner {
+ gap: 12px;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps {
+ height: auto;
+ position: absolute;
+ bottom: calc(var(--callout-padding, 24px) + 12px);
+ padding-block: 0;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator {
+ border: 4px solid var(--fc-step-color);
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current {
+ border-color: var(--fc-accent-color);
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) {
+ flex-flow: row nowrap;
+ gap: 8px;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) .indicator {
+ margin: 0;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current, #feature-callout .screen[pos=callout] .section-main .main-content .steps.progress-bar .indicator.complete {
+ border-color: var(--fc-accent-color);
+}
+#feature-callout .screen[pos=callout] .section-main .dismiss-button {
+ font-size: 1em;
+ inset-block: 0 auto;
+ inset-inline: auto 0;
+ margin-block: 16px 0;
+ margin-inline: 0 16px;
+ background-color: var(--fc-background);
+}
+#feature-callout .screen[pos=callout] .section-main .dismiss-button[button-size=small] {
+ height: 24px;
+ width: 24px;
+ min-height: 24px;
+ min-width: 24px;
+}
+#feature-callout .screen[pos=callout] .action-buttons {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: stretch;
+ justify-content: end;
+ gap: 10px;
+ margin-top: 4px;
+}
+#feature-callout .screen[pos=callout] .action-buttons[alignment=start] {
+ justify-content: start;
+}
+#feature-callout .screen[pos=callout] .action-buttons[alignment=space-between] {
+ justify-content: space-between;
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary-cta {
+ font-size: inherit;
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary,
+#feature-callout .screen[pos=callout] .action-buttons .secondary {
+ padding: 4px 16px;
+ margin: 0;
+ font-size: 0.813em;
+ font-weight: 600;
+ line-height: 16px;
+ min-height: 32px;
+ text-decoration: none;
+ cursor: default;
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary {
+ background-color: var(--fc-button-background);
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary {
+ background-color: var(--fc-primary-button-background);
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container {
+ align-items: stretch;
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container:not([hidden]) {
+ display: flex;
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:not(.submenu-button),
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:not(.submenu-button),
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:not(.submenu-button) {
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+ margin-inline-end: 0;
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:focus-visible,
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:focus-visible,
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:focus-visible {
+ z-index: 2;
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .submenu-button {
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+ margin-inline-start: 1px;
+ padding: 8px;
+ min-width: 30px;
+ box-sizing: border-box;
+ background-image: url("chrome://global/skin/icons/arrow-down.svg");
+ background-repeat: no-repeat;
+ background-size: 16px;
+ background-position: center;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary,
+#feature-callout .screen[pos=callout] .action-buttons .secondary,
+#feature-callout .screen[pos=callout] .dismiss-button {
+ border-radius: 4px;
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary:focus-visible,
+#feature-callout .screen[pos=callout] .action-buttons .secondary:focus-visible,
+#feature-callout .screen[pos=callout] .dismiss-button:focus-visible {
+ box-shadow: none;
+ outline: 2px solid var(--fc-accent-color);
+ outline-offset: 2px;
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary:disabled,
+#feature-callout .screen[pos=callout] .action-buttons .secondary:disabled,
+#feature-callout .screen[pos=callout] .dismiss-button:disabled {
+ opacity: 0.4;
+ cursor: auto;
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary,
+#feature-callout .screen[pos=callout] .dismiss-button {
+ border: 1px solid var(--fc-button-border);
+ color: var(--fc-button-color);
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .secondary[open],
+#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled),
+#feature-callout .screen[pos=callout] .dismiss-button[open] {
+ background-color: var(--fc-button-background-hover);
+ color: var(--fc-button-color-hover);
+ border: 1px solid var(--fc-button-border-hover);
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .secondary[open]:active,
+#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled):active,
+#feature-callout .screen[pos=callout] .dismiss-button[open]:active {
+ background-color: var(--fc-button-background-active);
+ color: var(--fc-button-color-active);
+ border: 1px solid var(--fc-button-border-active);
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary {
+ border: 1px solid var(--fc-primary-button-border);
+ color: var(--fc-primary-button-color);
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .primary[open] {
+ background-color: var(--fc-primary-button-background-hover);
+ color: var(--fc-primary-button-color-hover);
+ border: 1px solid var(--fc-primary-button-border-hover);
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .primary[open]:active {
+ background-color: var(--fc-primary-button-background-active);
+ color: var(--fc-primary-button-color-active);
+ border: 1px solid var(--fc-primary-button-border-active);
+}
+panel#feature-callout:is([side=top], [side=bottom]):not([hide-arrow=permanent]) {
+ margin-inline: var(--panel-margin-offset);
+}
+
+panel#feature-callout:is([side=left], [side=right]):not([hide-arrow=permanent]) {
+ margin-block: var(--panel-margin-offset);
+}
+
+panel#feature-callout::part(content) {
+ position: relative;
+}
+
+#feature-callout .arrow-box {
+ position: absolute;
+ overflow: visible;
+ transform: rotate(45deg);
+ transform-style: preserve-3d;
+}
+#feature-callout:not([arrow-position]) .arrow-box, #feature-callout[hide-arrow] .arrow-box {
+ display: none;
+}
+#feature-callout .arrow {
+ width: var(--arrow-square-size);
+ height: var(--arrow-square-size);
+}
+#feature-callout .shadow-arrow-box {
+ z-index: -1;
+}
+#feature-callout .shadow-arrow {
+ background: transparent;
+ outline: 1px solid var(--fc-border);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+#feature-callout .background-arrow-box {
+ z-index: 1;
+ pointer-events: none;
+}
+#feature-callout .background-arrow {
+ background-color: var(--fc-background);
+ clip-path: var(--fc-arrow-clip-path);
+}
+#feature-callout[arrow-position=top] .arrow-box {
+ top: var(--arrow-offset);
+ inset-inline-start: var(--arrow-center-inset);
+ --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
+}
+panel#feature-callout[arrow-position=top]::part(content) {
+ margin-top: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=top] {
+ margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=bottom] .arrow-box {
+ bottom: var(--arrow-offset);
+ inset-inline-start: var(--arrow-center-inset);
+ --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
+}
+panel#feature-callout[arrow-position=bottom]::part(content) {
+ margin-bottom: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=bottom] {
+ margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-end] .arrow-box {
+ top: var(--arrow-center-inset);
+ inset-inline-end: var(--arrow-offset);
+ --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
+}
+panel#feature-callout[arrow-position=inline-end]::part(content) {
+ margin-inline-end: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-end] {
+ margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-start] .arrow-box {
+ top: var(--arrow-center-inset);
+ inset-inline-start: var(--arrow-offset);
+ --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
+}
+panel#feature-callout[arrow-position=inline-start]::part(content) {
+ margin-inline-start: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-start] {
+ margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=top-end] .arrow-box {
+ top: var(--arrow-offset);
+ inset-inline-end: var(--arrow-corner-inset);
+ --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
+}
+panel#feature-callout[arrow-position=top-end]::part(content) {
+ margin-top: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=top-end] {
+ margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=top-start] .arrow-box {
+ top: var(--arrow-offset);
+ inset-inline-start: var(--arrow-corner-inset);
+ --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
+}
+panel#feature-callout[arrow-position=top-start]::part(content) {
+ margin-top: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=top-start] {
+ margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=bottom-end] .arrow-box {
+ bottom: var(--arrow-offset);
+ inset-inline-end: var(--arrow-corner-inset);
+ --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
+}
+panel#feature-callout[arrow-position=bottom-end]::part(content) {
+ margin-bottom: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=bottom-end] {
+ margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=bottom-start] .arrow-box {
+ bottom: var(--arrow-offset);
+ inset-inline-start: var(--arrow-corner-inset);
+ --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
+}
+panel#feature-callout[arrow-position=bottom-start]::part(content) {
+ margin-bottom: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=bottom-start] {
+ margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-end-top] .arrow-box {
+ top: var(--arrow-corner-inset);
+ inset-inline-end: var(--arrow-offset);
+ --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
+}
+panel#feature-callout[arrow-position=inline-end-top]::part(content) {
+ margin-inline-end: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-end-top] {
+ margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-end-bottom] .arrow-box {
+ bottom: var(--arrow-corner-inset);
+ inset-inline-end: var(--arrow-offset);
+ --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
+}
+panel#feature-callout[arrow-position=inline-end-bottom]::part(content) {
+ margin-inline-end: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-end-bottom] {
+ margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-start-top] .arrow-box {
+ top: var(--arrow-corner-inset);
+ inset-inline-start: var(--arrow-offset);
+ --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
+}
+panel#feature-callout[arrow-position=inline-start-top]::part(content) {
+ margin-inline-start: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-start-top] {
+ margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-start-bottom] .arrow-box {
+ bottom: var(--arrow-corner-inset);
+ inset-inline-start: var(--arrow-offset);
+ --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
+}
+panel#feature-callout[arrow-position=inline-start-bottom]::part(content) {
+ margin-inline-start: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-start-bottom] {
+ margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout:focus-visible .screen[pos=callout] .section-main .main-content {
+ outline: 2px solid var(--fc-accent-color);
+ border-color: transparent;
+}
+@media (prefers-contrast) {
+ #feature-callout:focus-visible .screen[pos=callout] .section-main .main-content {
+ border-color: var(--fc-background);
+ }
+}
+#feature-callout:focus-visible .shadow-arrow {
+ outline: 2px solid var(--fc-accent-color);
+}
+
+/* stylelint-disable max-nesting-depth */
+.onboardingContainer.shopping {
+ height: auto;
+}
+.onboardingContainer.shopping .outer-wrapper {
+ height: auto;
+}
+
+.onboardingContainer.shopping .screen[pos=split] {
+ height: auto;
+ margin: 0 auto;
+ min-height: fit-content;
+ border-radius: 8px;
+ box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2);
+ overflow-x: auto;
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+ .onboardingContainer.shopping .screen[pos=split] {
+ box-shadow: 0 2px 6px #15141a;
+ }
+}
+.onboardingContainer.shopping .screen[pos=split]::before {
+ display: none;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main {
+ width: auto;
+ height: auto;
+ margin: 0 auto;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content {
+ border-radius: 4px;
+ color: inherit;
+ font: menu;
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+ .onboardingContainer.shopping .screen[pos=split] .section-main .main-content {
+ background-color: #52525E;
+ }
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content.no-steps {
+ padding: 16px 0 36px;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text {
+ text-align: start;
+ margin-block: 10px 12px;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h1 {
+ width: auto;
+ font-weight: 400;
+ line-height: 1.5;
+ font-size: 1.7em;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h2 {
+ color: inherit;
+ font-size: 1em;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary,
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .secondary {
+ min-width: auto;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary {
+ font-weight: 400;
+ padding: 4px 16px;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container {
+ align-items: center;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph {
+ font-size: 0.85em;
+ line-height: 1.5;
+ margin-block: 0 20px;
+ padding-inline: 30px;
+ text-align: start;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph a {
+ text-decoration: underline;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .brand-logo {
+ width: 100%;
+ max-width: 294px;
+ max-height: 290px;
+ height: auto;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .dismiss-button {
+ top: 0;
+ margin: 14px 10px;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-secondary {
+ display: none;
+}
+.onboardingContainer.shopping .screen[pos=split] .info-text, .onboardingContainer.shopping .screen[pos=split] .link-paragraph {
+ font-size: 1em;
+ margin: 10px auto;
+ line-height: 1.5;
+}
+.onboardingContainer.shopping .screen[pos=split] .link-paragraph {
+ margin-block: 0 10px;
+ padding-inline: 30px;
+ text-align: start;
+}
+.onboardingContainer.shopping .screen[pos=split] .link-paragraph a {
+ text-decoration: underline;
+}
+
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content {
+ padding: 12px;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner {
+ min-height: auto;
+ align-items: initial;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text {
+ align-items: initial;
+ padding: 0;
+ margin-top: 0;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1,
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 {
+ line-height: 20px;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1 {
+ font-size: 1em;
+ font-weight: 590;
+ margin: 0;
+ margin-inline-end: 28px;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 {
+ color: inherit;
+ margin-block: 10px 0;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .action-buttons .cta-link {
+ padding: 4px;
+ margin-block: -4px;
+ outline-offset: 0;
+ min-height: revert;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container {
+ color: inherit;
+ padding: 0;
+ margin-block: 0 24px;
+ align-items: center;
+ overflow: visible;
+ font-size: 1em;
+ gap: 12px;
+ width: 100%;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container #multi-stage-multi-select-label {
+ color: inherit;
+ line-height: 20px;
+ margin-block: -2px 0;
+ font-size: 1em;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container .multi-select-item input {
+ margin-block: 0;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .steps {
+ height: auto;
+ margin-bottom: 12px;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .dismiss-button {
+ width: 24px;
+ height: 24px;
+ min-width: 24px;
+ min-height: 24px;
+ margin: 10px;
+}
+
+.onboardingContainer.shopping shopping-message-bar {
+ font: menu;
+}
+
+/* stylelint-disable max-nesting-depth */
+html {
+ height: 100%;
+}
+
+.dummy {
+ background: var(--mr-welcome-background-color) var(--mr-welcome-background-gradient) var(--mr-secondary-position) var(--mr-screen-background-color);
+}
+
+:root[dialogroot] {
+ background-color: transparent;
+}
+:root[dialogroot] body {
+ padding: 0;
+}
+:root[dialogroot] .onboardingContainer {
+ height: 100%;
+ background-color: transparent;
+}
+:root[dialogroot] .onboardingContainer:dir(rtl) {
+ transform: unset;
+}
+:root[dialogroot] .onboardingContainer .logo-container {
+ pointer-events: none;
+}
+:root[dialogroot] .onboardingContainer .screen:dir(rtl) {
+ transform: unset;
+}
+
+.welcome-container .onboardingContainer {
+ min-height: 610px;
+ min-width: fit-content;
+}
+
+.onboardingContainer {
+ --grey-subtitle-1: #696977;
+ --mr-welcome-background-color: #F8F6F4;
+ --mr-screen-heading-color: var(--in-content-text-color);
+ --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 20%) 0%, rgba(2, 144, 238, 20%) 100%);
+ --mr-screen-background-color: #F8F6F4;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+ font-size: 16px;
+ position: relative;
+ text-align: center;
+ height: 100vh;
+ --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
+}
+@media (prefers-color-scheme: dark) {
+ .onboardingContainer {
+ --grey-subtitle-1: #FFF;
+ --mr-welcome-background-color: #333336;
+ --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 30%) 0%, rgba(2, 144, 238, 30%) 100%);
+ --mr-screen-background-color: #62697A;
+ }
+}
+@media (prefers-contrast) {
+ .onboardingContainer {
+ --mr-screen-background-color: buttontext;
+ --mr-screen-heading-color: buttonface;
+ background-color: var(--in-content-page-background);
+ }
+}
+@media (prefers-reduced-motion: no-preference) {
+ .onboardingContainer {
+ --translate: 30px;
+ --rotate: 20deg;
+ --scale: 0.4;
+ --progress-bar-transition: 0.6s translate;
+ }
+ .onboardingContainer:dir(rtl) {
+ --scale: -0.4 0.4;
+ }
+}
+@media (prefers-reduced-motion: reduce) {
+ .onboardingContainer {
+ --translate: 0;
+ --rotate: 0deg;
+ --scale: 1;
+ --progress-bar-transition: none;
+ }
+ .onboardingContainer:dir(rtl) {
+ --scale: -1 1;
+ }
+}
+.onboardingContainer:dir(rtl) {
+ transform: rotateY(180deg);
+}
+.onboardingContainer .section-main {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 504px;
+ flex-shrink: 0;
+}
+.onboardingContainer .section-main:not(.embedded-migration) {
+ position: relative;
+}
+.onboardingContainer .main-content {
+ background-color: var(--in-content-page-background);
+ border-radius: 20px;
+ box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding: 0;
+ transition: var(--transition);
+ z-index: 1;
+ box-sizing: border-box;
+}
+.onboardingContainer .main-content.no-steps {
+ padding-bottom: 48px;
+}
+.onboardingContainer .main-content .main-content-inner {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ justify-content: space-around;
+}
+.onboardingContainer .main-content .no-steps .main-content {
+ padding-bottom: 48px;
+}
+.onboardingContainer .main-content .no-steps .steps {
+ display: none;
+}
+.onboardingContainer .screen {
+ display: flex;
+ position: relative;
+ flex-flow: row nowrap;
+ height: 100%;
+ min-height: 500px;
+ overflow: hidden;
+}
+.onboardingContainer .screen.light-text {
+ --in-content-page-color: rgb(251, 251, 254);
+ --in-content-primary-button-text-color: rgb(43, 42, 51);
+ --in-content-primary-button-text-color-hover: rgb(43, 42, 51);
+ --in-content-primary-button-background: rgb(0, 221, 255);
+ --in-content-primary-button-background-hover: rgb(128, 235, 255);
+ --in-content-primary-button-background-active: rgb(170, 242, 255);
+ --in-content-button-text-color: var(--in-content-page-color);
+}
+.onboardingContainer .screen.dark-text {
+ --in-content-page-color: rgb(21, 20, 26);
+ --in-content-primary-button-text-color: rgb(251, 251, 254);
+ --in-content-primary-button-text-color-hover: rgb(251, 251, 254);
+ --in-content-primary-button-background: #0061E0;
+ --in-content-primary-button-background-hover: #0250BB;
+ --in-content-primary-button-background-active: #053E94;
+ --in-content-primary-button-border-color: transparent;
+ --in-content-primary-button-border-hover: transparent;
+ --in-content-button-text-color: var(--in-content-page-color);
+}
+.onboardingContainer .screen:dir(rtl) {
+ transform: rotateY(180deg);
+}
+.onboardingContainer .screen[pos=center] {
+ background-color: rgba(21, 20, 26, 0.5);
+ min-width: 504px;
+}
+.onboardingContainer .screen[pos=center].with-noodles {
+ min-width: 610px;
+ min-height: 610px;
+}
+.onboardingContainer .screen[pos=center].with-noodles .section-main {
+ height: 504px;
+}
+.onboardingContainer .screen[pos=center].with-video {
+ justify-content: center;
+ background: none;
+ align-items: center;
+}
+.onboardingContainer .screen[pos=center].with-video .section-main {
+ width: 800px;
+ height: 550px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content {
+ background-color: var(--mr-welcome-background-color);
+ border-radius: 8px;
+ box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);
+ padding: 44px 85px 20px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .welcome-text {
+ margin: 0;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .main-content-inner {
+ justify-content: space-between;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content h1,
+.onboardingContainer .screen[pos=center].with-video .main-content h2 {
+ align-self: start;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content h1 {
+ font-size: 24px;
+ line-height: 28.8px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content h2 {
+ font-size: 15px;
+ line-height: 22px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta {
+ justify-content: end;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ text-decoration: none;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon::after {
+ content: "";
+ padding-inline-end: 12px;
+ margin-inline-start: 4px;
+ background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon:dir(rtl)::after {
+ background-image: url("chrome://browser/skin/back.svg");
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary {
+ background-color: var(--in-content-button-background);
+ border: 1px solid var(--in-content-button-border-color);
+ line-height: 12px;
+ font-size: 0.72em;
+ font-weight: 600;
+ padding: 8px 16px;
+ text-decoration: none;
+ cursor: default;
+ color: var(--in-content-button-text-color);
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open] {
+ background-color: var(--in-content-button-background-hover);
+ color: var(--in-content-button-text-color-hover);
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open]:active {
+ background-color: var(--in-content-button-background-active);
+ color: var(--in-content-button-text-color-active);
+}
+.onboardingContainer .screen[pos=center].addons-picker {
+ justify-content: center;
+ align-items: center;
+ background: none;
+}
+.onboardingContainer .screen[pos=center].addons-picker .section-main {
+ width: 800px;
+ height: 550px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content {
+ background-color: var(--in-content-page-background);
+ border-radius: 8px;
+ box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);
+ overflow: hidden;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .welcome-text {
+ display: flex;
+ margin: 0;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .main-content-inner {
+ padding: 25px 56px 0;
+ justify-content: space-between;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content h1,
+.onboardingContainer .screen[pos=center].addons-picker .main-content h2 {
+ align-self: start;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content h2 {
+ font-size: 15px;
+ text-align: start;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .brand-logo {
+ display: block;
+ margin: 40px 56px 0;
+ transition: var(--transition);
+ height: 30px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta {
+ display: block;
+ margin: 8px 0;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link {
+ background: none;
+ padding: 0;
+ font-weight: normal;
+ background: none;
+ text-decoration: underline;
+ cursor: pointer;
+ color: var(--link-color);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:hover {
+ color: var(--link-color-hover);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
+ color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+ .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
+ text-decoration: none;
+ }
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.secondary:hover {
+ background-color: var(--in-content-button-background-hover);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta {
+ justify-content: end;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ text-decoration: none;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon::after {
+ content: "";
+ padding-inline-end: 12px;
+ margin-inline-start: 4px;
+ background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon:dir(rtl)::after {
+ background-image: url("chrome://browser/skin/back.svg");
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary {
+ background-color: var(--in-content-button-background);
+ border: 1px solid var(--in-content-button-border-color);
+ line-height: 12px;
+ font-size: 0.72em;
+ font-weight: 600;
+ padding: 8px 16px;
+ text-decoration: none;
+ cursor: default;
+ color: var(--in-content-button-text-color);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open] {
+ background-color: var(--in-content-button-background-hover);
+ color: var(--in-content-button-text-color-hover);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open]:active {
+ background-color: var(--in-content-button-background-active);
+ color: var(--in-content-button-text-color-active);
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container {
+ display: flex;
+ border: 1px solid var(--in-content-border-color);
+ box-shadow: 0 1px 2px 0 var(--in-content-border-color);
+ border-radius: 4px;
+ margin: 5px auto;
+ text-align: start;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .rtamo-icon img {
+ margin: 10px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-details {
+ display: grid;
+ width: 70%;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-title {
+ margin: 10px 0 3px;
+ font-size: 16px;
+ font-weight: 600;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-description {
+ margin: 2px 0 10px;
+ font-size: 13px;
+ font-weight: 400;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .install-button-wrapper {
+ display: flex;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container button {
+ align-self: center;
+ width: 124px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .loader {
+ width: 1em;
+ height: 1em;
+ border: 3px solid var(--in-content-primary-button-text-color);
+ border-bottom-color: transparent;
+ border-radius: 50%;
+ box-sizing: border-box;
+ animation: rotation 1s linear infinite;
+ justify-self: center;
+}
+@keyframes rotation {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+.onboardingContainer .screen[pos=center].addons-picker .loaderContainer {
+ display: flex;
+ padding: 1.5px 37.5px;
+ margin: auto;
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary {
+ background: none;
+ text-decoration: underline;
+ cursor: pointer;
+ color: var(--link-color);
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 20px;
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:hover {
+ color: var(--link-color-hover);
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
+ color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+ .onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
+ text-decoration: none;
+ }
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button {
+ color: #FFF;
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button:hover {
+ color: #E0E0E6;
+}
+.onboardingContainer .screen:not([pos=split]) migration-wizard {
+ padding: 5px 60px;
+}
+.onboardingContainer .screen:not([pos=split]) migration-wizard::part(header) {
+ text-align: center;
+}
+.onboardingContainer .screen:not([pos=split]) migration-wizard::part(buttons) {
+ margin: 32px auto 0;
+}
+.onboardingContainer .screen:not([pos=split]) .welcome-text:empty {
+ margin: 0;
+}
+.onboardingContainer .screen[pos=split] {
+ margin: auto;
+ min-height: 550px;
+}
+.onboardingContainer .screen[pos=split]::before {
+ content: "";
+ position: absolute;
+ box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
+ width: 800px;
+ height: 550px;
+ border-radius: 8px;
+ inset: 0;
+ margin: auto;
+ pointer-events: none;
+}
+.onboardingContainer .screen[pos=split] .section-secondary,
+.onboardingContainer .screen[pos=split] .section-main {
+ width: 400px;
+ height: 550px;
+}
+.onboardingContainer .screen[pos=split] .secondary-cta.top {
+ position: fixed;
+ padding-inline-end: 0;
+}
+.onboardingContainer .screen[pos=split] .secondary-cta.top button {
+ padding: 7px 15px;
+}
+.onboardingContainer .screen[pos=split] .section-main {
+ flex-direction: row;
+ display: block;
+ margin: auto auto auto 0;
+}
+.onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
+ margin: auto 0 auto auto;
+}
+.onboardingContainer .screen[pos=split] .section-main.embedded-migration .main-content {
+ padding-block: 100px 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content {
+ border-radius: 0 8px 8px 0;
+ overflow: hidden;
+ padding-inline: 35px 20px;
+ padding-block: 120px 0;
+ box-shadow: none;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content.no-steps {
+ padding-bottom: 48px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content:dir(rtl) {
+ border-radius: 8px 0 0 8px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
+ min-height: 330px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons {
+ padding: 0;
+ margin-inline-start: -5px;
+ display: flex;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons button {
+ cursor: pointer;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .qr-code-image {
+ margin: 5px 0 10px;
+ display: flex;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .language-switcher-container .primary {
+ margin-bottom: 5px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons {
+ position: relative;
+ text-align: initial;
+ height: 100%;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
+ font-size: 13px;
+ margin-block: 1em;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container:not(.multi-select-item) {
+ transition: var(--transition);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container input,
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container label {
+ vertical-align: middle;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box {
+ margin: 8px 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta {
+ margin: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link {
+ background: none;
+ text-decoration: underline;
+ cursor: pointer;
+ color: var(--link-color);
+ padding: 0;
+ font-weight: normal;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:hover {
+ color: var(--link-color-hover);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active {
+ color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+ .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active {
+ text-decoration: none;
+ }
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary[open] {
+ background-color: var(--in-content-button-background-hover);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container {
+ flex-wrap: nowrap;
+ align-items: start;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
+ position: absolute;
+ bottom: -30px;
+ inset-inline-end: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary {
+ background-color: var(--in-content-button-background);
+ border: 1px solid var(--in-content-button-border-color);
+ line-height: 12px;
+ font-size: 0.72em;
+ font-weight: 600;
+ padding: 8px 16px;
+ text-decoration: none;
+ cursor: default;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open] {
+ background-color: var(--in-content-button-background-hover);
+ color: var(--in-content-button-text-color-hover);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open]:active {
+ background-color: var(--in-content-button-background-active);
+ color: var(--in-content-button-text-color-active);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ text-decoration: none;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon::after {
+ content: "";
+ padding-inline-end: 12px;
+ margin-inline-start: 4px;
+ background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon:dir(rtl)::after {
+ background-image: url("chrome://browser/skin/back.svg");
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
+ text-align: start;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .brand-logo {
+ height: 25px;
+ margin-block: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .logo-alt {
+ width: inherit;
+ height: inherit;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text {
+ margin-inline: 0 10px;
+ margin-block: 10px 35px;
+ text-align: initial;
+ align-items: initial;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text:empty {
+ margin: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1 {
+ font-size: 24px;
+ line-height: 1.2;
+ width: 300px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
+ margin: 10px 0 0;
+ min-height: 1em;
+ font-size: 15px;
+ line-height: 1.5;
+}
+@media (prefers-contrast: no-preference) {
+ .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
+ color: #5B5B66;
+ }
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1,
+.onboardingContainer .screen[pos=split] .section-main .main-content .primary {
+ margin: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .steps {
+ z-index: 1;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
+ width: 400px;
+ margin-inline: -35px;
+}
+@media (prefers-contrast) {
+ .onboardingContainer .screen[pos=split] .section-main .main-content {
+ border: 1px solid var(--in-content-page-color);
+ }
+ .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
+ border-top: 1px solid var(--in-content-page-color);
+ background-color: var(--in-content-page-background);
+ }
+ .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar .indicator {
+ background-color: var(--in-content-accent-color);
+ }
+}
+.onboardingContainer .screen[pos=split] .section-secondary {
+ --mr-secondary-position: center center / auto 350px;
+ border-radius: 8px 0 0 8px;
+ margin: auto 0 auto auto;
+ display: flex;
+ align-items: center;
+ -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
+ stroke: currentColor;
+}
+.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
+ border-radius: 0 8px 8px 0;
+ margin: auto auto auto 0;
+}
+.onboardingContainer .screen[pos=split] .section-secondary h1 {
+ color: var(--mr-screen-heading-color);
+ font-weight: 700;
+ font-size: 47px;
+ line-height: 110%;
+ max-width: 340px;
+ text-align: initial;
+ white-space: pre-wrap;
+ text-shadow: none;
+ margin-inline: 40px 0;
+}
+.onboardingContainer .screen[pos=split] .section-secondary .image-alt {
+ width: inherit;
+ height: inherit;
+}
+.onboardingContainer .screen[pos=split] .section-secondary .hero-image {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ max-height: 100%;
+}
+.onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
+ width: 100%;
+ max-width: 180px;
+ margin: 25px 0;
+ padding-bottom: 30px;
+}
+@media only screen and (width <= 800px) {
+ .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
+ padding-bottom: unset;
+ }
+}
+.onboardingContainer .screen[pos=split] .multi-select-container {
+ margin-inline: 0 10px;
+}
+@media only screen and (width <= 800px) {
+ .onboardingContainer .screen[pos=split] .multi-select-container {
+ flex-direction: column;
+ align-self: center;
+ align-items: start;
+ justify-content: center;
+ width: 240px;
+ padding: 0 30px;
+ margin-inline: 0;
+ box-sizing: content-box;
+ }
+}
+.onboardingContainer .screen[pos=split] .tiles-theme-container {
+ margin-block: -20px auto;
+ align-items: initial;
+}
+.onboardingContainer .screen[pos=split] .tiles-theme-container .theme {
+ min-width: 38px;
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+ .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
+ color: #CFCFD8;
+ }
+ .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary {
+ background-color: #2B2A33;
+ }
+}
+@media only screen and (width >= 800px) {
+ .onboardingContainer .screen[pos=split] .tiles-theme-section {
+ margin-inline-start: -10px;
+ }
+}
+@media only screen and (width <= 800px) {
+ .onboardingContainer .screen[pos=split] {
+ flex-direction: column;
+ min-height: 550px;
+ }
+ .onboardingContainer .screen[pos=split]::before {
+ width: 400px;
+ }
+ .onboardingContainer .screen[pos=split] .section-secondary,
+.onboardingContainer .screen[pos=split] .section-main {
+ width: 400px;
+ }
+ .onboardingContainer .screen[pos=split] .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;
+ height: 100px;
+ }
+ .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
+ margin: 6px 0;
+ }
+ .onboardingContainer .screen[pos=split] .section-secondary .message-text {
+ margin-inline: auto;
+ }
+ .onboardingContainer .screen[pos=split] .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;
+ border-radius: 8px 8px 0 0;
+ }
+ .onboardingContainer .screen[pos=split] .section-secondary.with-secondary-section-hidden {
+ display: none;
+ }
+ .onboardingContainer .screen[pos=split] migration-wizard::part(deck) {
+ min-width: 330px;
+ margin-inline: 36px;
+ }
+ .onboardingContainer .screen[pos=split] .section-main {
+ margin: 0 auto auto;
+ height: 450px;
+ }
+ .onboardingContainer .screen[pos=split] .section-main migration-wizard::part(buttons) {
+ flex-direction: column;
+ margin-inline: 46px;
+ }
+ .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] {
+ height: 550px;
+ margin: auto;
+ }
+ .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content {
+ padding: 50px 0 0;
+ border-radius: 8px;
+ }
+ .onboardingContainer .screen[pos=split] .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 {
+ align-items: center;
+ }
+ .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
+ text-align: center;
+ }
+ .onboardingContainer .screen[pos=split] .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) {
+ background-position: center;
+ }
+ .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .logo-alt {
+ width: inherit;
+ height: inherit;
+ }
+ .onboardingContainer .screen[pos=split] .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 {
+ display: none;
+ }
+ .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons {
+ text-align: center;
+ }
+ .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
+ display: none;
+ }
+ .onboardingContainer .screen[pos=split] .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 {
+ min-width: 240px;
+ margin-inline: 0;
+ }
+ .onboardingContainer .screen[pos=split] .section-main .main-content .steps {
+ padding-block: 0;
+ margin: 0;
+ }
+ .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
+ margin-inline: 0;
+ }
+ .onboardingContainer .screen[pos=split] .section-main .additional-cta.cta-link {
+ align-self: center;
+ }
+ .onboardingContainer .screen[pos=split] .section-main .dismiss-button {
+ top: -100px;
+ }
+ .onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
+ margin: 0 auto auto;
+ }
+ .onboardingContainer .screen[pos=split] .section-main:dir(rtl) .main-content {
+ border-radius: 0 0 8px 8px;
+ }
+}
+@media only screen and (height <= 650px) and (800px <= width <= 990px) {
+ .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
+ display: none;
+ }
+}
+@media only screen and (height <= 650px) and (width <= 620px) {
+ .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
+ position: absolute;
+ padding: 0;
+ top: 0;
+ inset-inline-end: 0;
+ }
+}
+.onboardingContainer .brand-logo {
+ margin-block: 60px 10px;
+ transition: var(--transition);
+ height: 80px;
+}
+.onboardingContainer .brand-logo.cta-top {
+ margin-top: 25px;
+}
+.onboardingContainer .brand-logo.hide {
+ visibility: hidden;
+ padding: unset;
+ margin-top: 50px;
+}
+.onboardingContainer .logo-alt {
+ width: inherit;
+ height: inherit;
+}
+.onboardingContainer .rtamo-theme-icon {
+ max-height: 30px;
+ border-radius: 2px;
+ margin-bottom: 10px;
+ margin-top: 24px;
+}
+.onboardingContainer .rtamo-icon {
+ text-align: start;
+}
+@media only screen and (width <= 800px) {
+ .onboardingContainer .rtamo-icon {
+ text-align: center;
+ }
+}
+.onboardingContainer .text-link {
+ background: none;
+ text-decoration: underline;
+ cursor: pointer;
+ color: var(--link-color);
+}
+.onboardingContainer .text-link:hover {
+ color: var(--link-color-hover);
+}
+.onboardingContainer .text-link:active {
+ color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+ .onboardingContainer .text-link:active {
+ text-decoration: none;
+ }
+}
+.onboardingContainer .welcome-text {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 0.5em 1em;
+ transition: var(--transition);
+}
+.onboardingContainer .welcome-text h1,
+.onboardingContainer .welcome-text h2 {
+ color: var(--in-content-page-color);
+ line-height: 1.5;
+}
+.onboardingContainer .welcome-text h1 {
+ font-size: 24px;
+ font-weight: 600;
+ margin: 0 6px;
+ letter-spacing: -0.02em;
+ outline: none;
+}
+.onboardingContainer .welcome-text h2 {
+ font-size: 16px;
+ font-weight: normal;
+ margin: 10px 6px 0;
+ max-width: 750px;
+ letter-spacing: -0.01em;
+}
+.onboardingContainer .welcome-text.fancy h1 {
+ background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
+ background-clip: text;
+ background-size: 200%;
+}
+@media (prefers-contrast: no-preference) {
+ .onboardingContainer .welcome-text.fancy h1 {
+ color: transparent;
+ }
+}
+@media (prefers-color-scheme: dark) {
+ .onboardingContainer .welcome-text.fancy h1 {
+ background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
+ }
+ .onboardingContainer .welcome-text.fancy h1::selection {
+ color: #FFF;
+ background-color: #696977;
+ }
+}
+.onboardingContainer .welcome-text.shine h1 {
+ animation: shine 50s linear infinite;
+ background-size: 400%;
+}
+@keyframes shine {
+ to {
+ background-position: 400%;
+ }
+}
+.onboardingContainer .welcome-text .cta-paragraph a {
+ margin: 0;
+ text-decoration: underline;
+ cursor: pointer;
+}
+.onboardingContainer .screen.light-text .welcome-text.fancy h1 {
+ background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
+}
+.onboardingContainer .screen.dark-text .welcome-text.fancy h1 {
+ background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
+}
+.onboardingContainer .welcomeZap span {
+ position: relative;
+ z-index: 1;
+ white-space: nowrap;
+}
+.onboardingContainer .welcomeZap .zap::after {
+ display: block;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ content: "";
+ position: absolute;
+ top: calc(100% - 0.15em);
+ width: 100%;
+ height: 0.3em;
+ left: 0;
+ z-index: -1;
+ transform: scaleY(3);
+}
+.onboardingContainer .welcomeZap .zap.short::after {
+ background-image: url("chrome://activity-stream/content/data/content/assets/short-zap.svg");
+}
+.onboardingContainer .welcomeZap .zap.long::after {
+ background-image: url("chrome://activity-stream/content/data/content/assets/long-zap.svg");
+}
+.onboardingContainer .language-loader {
+ filter: invert(1);
+ margin-inline-end: 10px;
+ position: relative;
+ top: 3px;
+ width: 16px;
+ height: 16px;
+ margin-top: -6px;
+}
+@media (prefers-color-scheme: dark) {
+ .onboardingContainer .language-loader {
+ filter: invert(0);
+ }
+}
+.onboardingContainer .tiles-theme-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 10px auto;
+}
+.onboardingContainer .sr-only {
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+}
+.onboardingContainer .sr-only.input {
+ height: 1px;
+ width: 1px;
+}
+.onboardingContainer .tiles-theme-section {
+ border: 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ justify-content: space-evenly;
+ margin-inline: 10px;
+ padding: 10px;
+ transition: var(--transition);
+}
+.onboardingContainer .tiles-theme-section:hover, .onboardingContainer .tiles-theme-section:active, .onboardingContainer .tiles-theme-section:focus-within {
+ border-radius: 8px;
+ outline: 2px solid var(--in-content-primary-button-background);
+}
+.onboardingContainer .tiles-theme-section .theme {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 0;
+ min-width: 50px;
+ width: 180px;
+ color: #000;
+ box-shadow: none;
+ border-radius: 4px;
+ cursor: pointer;
+ z-index: 0;
+}
+.onboardingContainer .tiles-theme-section .theme:focus, .onboardingContainer .tiles-theme-section .theme:active {
+ outline: initial;
+ outline-offset: initial;
+}
+.onboardingContainer .tiles-theme-section .theme .icon {
+ background-size: cover;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ outline: 1px solid var(--in-content-border-color);
+ outline-offset: -0.5px;
+ z-index: -1;
+}
+.onboardingContainer .tiles-theme-section .theme .icon:dir(rtl) {
+ transform: scaleX(-1);
+}
+.onboardingContainer .tiles-theme-section .theme .icon:focus, .onboardingContainer .tiles-theme-section .theme .icon:active, .onboardingContainer .tiles-theme-section .theme .icon.selected {
+ outline: 2px solid var(--in-content-primary-button-background);
+ outline-offset: 2px;
+}
+.onboardingContainer .tiles-theme-section .theme .icon.light {
+ background-image: url("resource://builtin-themes/light/icon.svg");
+}
+.onboardingContainer .tiles-theme-section .theme .icon.dark {
+ background-image: url("resource://builtin-themes/dark/icon.svg");
+}
+.onboardingContainer .tiles-theme-section .theme .icon.alpenglow {
+ background-image: url("resource://builtin-themes/alpenglow/icon.svg");
+}
+.onboardingContainer .tiles-theme-section .theme .icon.default, .onboardingContainer .tiles-theme-section .theme .icon.automatic {
+ background-image: url("resource://default-theme/icon.svg");
+}
+.onboardingContainer .tiles-theme-section .theme .text {
+ display: flex;
+ color: var(--in-content-page-color);
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 20px;
+ margin-inline-start: 0;
+ margin-top: 9px;
+}
+.onboardingContainer .tiles-theme-section legend {
+ cursor: default;
+}
+.onboardingContainer .tiles-container {
+ margin: 10px auto;
+}
+.onboardingContainer .tiles-container.info {
+ padding: 6px 12px 12px;
+}
+.onboardingContainer .tiles-container.info:hover, .onboardingContainer .tiles-container.info:focus {
+ background-color: rgba(217, 217, 227, 0.3);
+ border-radius: 4px;
+}
+.onboardingContainer .tiles-delayed {
+ animation: fadein 0.4s;
+}
+.onboardingContainer .multi-select-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ flex-shrink: 0;
+ align-items: flex-start;
+ gap: 16px;
+ margin-block: -1em 2em;
+ margin-inline: 1em;
+ color: #5B5B66;
+ font-weight: 400;
+ font-size: 14px;
+ text-align: initial;
+ transition: var(--transition);
+ z-index: 1;
+}
+.onboardingContainer .multi-select-container #multi-stage-multi-select-label {
+ color: var(--in-content-page-color);
+ line-height: 1.5;
+ font-size: 16px;
+ font-weight: normal;
+ letter-spacing: -0.01em;
+ margin: calc(0.5em + 10px) 6px 0;
+ max-width: 750px;
+}
+.onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
+ margin: calc(-35px + 1em + 10px) 0 0;
+ min-height: 1em;
+ font-size: 15px;
+ line-height: 1.5;
+}
+@media (prefers-contrast: no-preference) {
+ .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
+ color: #5B5B66;
+ }
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+ .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
+ color: #CFCFD8;
+ }
+}
+
+.onboardingContainer .multi-select-container .checkbox-container {
+ display: flex;
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+ .onboardingContainer .multi-select-container {
+ color: #CFCFD8;
+ }
+}
+.onboardingContainer .mobile-downloads .qr-code-image {
+ margin: 24px 0 10px;
+ width: 113px;
+ height: 113px;
+}
+.onboardingContainer .mobile-downloads .email-link {
+ background: none;
+ text-decoration: underline;
+ cursor: pointer;
+ color: var(--link-color);
+ font-size: 16px;
+ font-weight: 400;
+}
+.onboardingContainer .mobile-downloads .email-link:hover {
+ color: var(--link-color-hover);
+}
+.onboardingContainer .mobile-downloads .email-link:active {
+ color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+ .onboardingContainer .mobile-downloads .email-link:active {
+ text-decoration: none;
+ }
+}
+.onboardingContainer .mobile-downloads .email-link:hover {
+ background: none;
+}
+.onboardingContainer .mobile-downloads .ios button {
+ background-image: url("chrome://app-marketplace-icons/locale/ios.svg");
+}
+.onboardingContainer .mobile-downloads .android button {
+ background-image: url("chrome://app-marketplace-icons/locale/android.png");
+}
+.onboardingContainer .mobile-download-buttons {
+ list-style: none;
+ padding: 10px 0;
+ margin: 0;
+}
+.onboardingContainer .mobile-download-buttons li {
+ display: inline-block;
+}
+.onboardingContainer .mobile-download-buttons li button {
+ display: inline-block;
+ height: 45px;
+ width: 152px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ box-shadow: none;
+ border: 0;
+}
+.onboardingContainer .mobile-download-buttons li:not(:first-child) {
+ margin-inline: 5px 0;
+}
+.onboardingContainer .dismiss-button {
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ left: auto;
+ right: 0;
+ box-sizing: border-box;
+ padding: 0;
+ margin: 16px;
+ display: block;
+ float: inline-end;
+ background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px;
+ height: 32px;
+ width: 32px;
+ align-self: end;
+ min-height: 32px;
+ min-width: 32px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ transition: var(--transition);
+}
+.onboardingContainer .dismiss-button:dir(rtl) {
+ left: 0;
+ right: auto;
+}
+@keyframes fadein {
+ from {
+ opacity: 0;
+ }
+}
+.onboardingContainer .secondary-cta {
+ display: flex;
+ align-items: end;
+ flex-direction: row;
+ justify-content: center;
+ font-size: 14px;
+ transition: var(--transition);
+}
+.onboardingContainer .secondary-cta.top {
+ justify-content: end;
+ padding-inline-end: min(150px, 500px - 70vh);
+ padding-top: 4px;
+ position: absolute;
+ top: 10px;
+ inset-inline-end: 20px;
+ z-index: 2;
+}
+.onboardingContainer .secondary-cta span {
+ color: var(--grey-subtitle-1);
+ margin: 0 4px;
+}
+.onboardingContainer .message-text {
+ transition: var(--transition);
+}
+.onboardingContainer .helptext {
+ padding: 1em;
+ text-align: center;
+ color: var(--grey-subtitle-1);
+ font-size: 12px;
+ line-height: 18px;
+}
+.onboardingContainer .helptext.default {
+ align-self: center;
+ max-width: 40%;
+}
+.onboardingContainer .helptext span {
+ padding-inline-end: 4px;
+}
+.onboardingContainer .helptext-img {
+ height: 1.5em;
+ width: 1.5em;
+ margin-inline-end: 4px;
+ vertical-align: middle;
+}
+.onboardingContainer .helptext-img.end {
+ margin: 4px;
+}
+.onboardingContainer .helptext-img.footer {
+ vertical-align: bottom;
+}
+.onboardingContainer .steps {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin-top: 0;
+ padding-block: 16px 0;
+ transition: var(--transition);
+ z-index: -1;
+ height: 48px;
+ box-sizing: border-box;
+}
+.onboardingContainer .steps.has-helptext {
+ padding-bottom: 0;
+}
+.onboardingContainer .steps .indicator {
+ width: 0;
+ height: 0;
+ margin-inline-end: 4px;
+ margin-inline-start: 4px;
+ background: var(--grey-subtitle-1);
+ border-radius: 5px;
+ border: 3px solid var(--in-content-button-text-color);
+ opacity: 0.35;
+ box-sizing: inherit;
+}
+.onboardingContainer .steps .indicator.current {
+ opacity: 1;
+ border-color: var(--in-content-primary-button-background);
+}
+.onboardingContainer .steps .indicator.current:last-of-type:first-of-type {
+ opacity: 0;
+}
+.onboardingContainer .steps.progress-bar {
+ height: 6px;
+ padding-block: 0;
+ margin-block: 42px 0;
+ background-color: color-mix(in srgb, var(--in-content-button-text-color) 25%, transparent);
+ justify-content: start;
+ opacity: 1;
+ transition: none;
+}
+.onboardingContainer .steps.progress-bar .indicator {
+ width: 100%;
+ height: 100%;
+ margin-inline: -1px;
+ background-color: var(--in-content-primary-button-background);
+ border: 0;
+ border-radius: 0;
+ opacity: 1;
+ transition: var(--progress-bar-transition);
+ translate: calc(var(--progress-bar-progress, 0%) - 100%);
+}
+.onboardingContainer .steps.progress-bar .indicator:dir(rtl) {
+ translate: calc(var(--progress-bar-progress, 0%) * -1 + 100%);
+}
+.onboardingContainer .additional-cta-container[flow] {
+ display: flex;
+ flex-flow: column wrap;
+ align-items: center;
+}
+.onboardingContainer .additional-cta-container[flow][flow=row] {
+ flex-direction: row;
+ justify-content: center;
+}
+.onboardingContainer .additional-cta-container[flow][flow=row] .secondary-cta {
+ flex-basis: 100%;
+}
+.onboardingContainer .primary,
+.onboardingContainer .secondary,
+.onboardingContainer .additional-cta,
+.onboardingContainer .submenu-button {
+ font-size: 13px;
+ line-height: 16px;
+ padding: 11px 15px;
+ transition: var(--transition);
+}
+.onboardingContainer .primary.rtamo,
+.onboardingContainer .secondary.rtamo,
+.onboardingContainer .additional-cta.rtamo,
+.onboardingContainer .submenu-button.rtamo {
+ margin-top: 24px;
+}
+.onboardingContainer .secondary {
+ background-color: var(--in-content-button-background);
+ color: var(--in-content-button-text-color);
+}
+.onboardingContainer .split-button-container,
+.onboardingContainer .screen .action-buttons .split-button-container {
+ align-items: stretch;
+}
+.onboardingContainer .split-button-container:not([hidden]),
+.onboardingContainer .screen .action-buttons .split-button-container:not([hidden]) {
+ display: flex;
+}
+.onboardingContainer .split-button-container .primary:not(.submenu-button),
+.onboardingContainer .split-button-container .secondary:not(.submenu-button),
+.onboardingContainer .split-button-container .additional-cta:not(.submenu-button),
+.onboardingContainer .screen .action-buttons .split-button-container .primary:not(.submenu-button),
+.onboardingContainer .screen .action-buttons .split-button-container .secondary:not(.submenu-button),
+.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:not(.submenu-button) {
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+ margin-inline-end: 0;
+}
+.onboardingContainer .split-button-container .primary:focus-visible,
+.onboardingContainer .split-button-container .secondary:focus-visible,
+.onboardingContainer .split-button-container .additional-cta:focus-visible,
+.onboardingContainer .screen .action-buttons .split-button-container .primary:focus-visible,
+.onboardingContainer .screen .action-buttons .split-button-container .secondary:focus-visible,
+.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:focus-visible {
+ z-index: 2;
+}
+.onboardingContainer .split-button-container .submenu-button,
+.onboardingContainer .screen .action-buttons .split-button-container .submenu-button {
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+ margin-inline-start: 1px;
+ padding: 8px;
+ min-width: 30px;
+ box-sizing: border-box;
+ background-image: url("chrome://global/skin/icons/arrow-down.svg");
+ background-repeat: no-repeat;
+ background-size: 16px;
+ background-position: center;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+.onboardingContainer .noodle {
+ display: block;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ transition: var(--transition);
+}
+.onboardingContainer .noodle:dir(rtl) {
+ scale: -1 1;
+}
+.onboardingContainer .outline-L {
+ background-image: url("chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg");
+}
+.onboardingContainer .solid-L {
+ background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg");
+ -moz-context-properties: fill;
+ fill: var(--in-content-page-background);
+ display: none;
+}
+.onboardingContainer .purple-C {
+ background-image: url("chrome://activity-stream/content/data/content/assets/noodle-C.svg");
+ -moz-context-properties: fill;
+ fill: #E7258C;
+}
+.onboardingContainer .orange-L {
+ background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg");
+ -moz-context-properties: fill;
+ fill: #FFA437;
+}
+.onboardingContainer .screen-1 .section-main {
+ z-index: 1;
+ margin: auto;
+}
+.onboardingContainer .screen-1 .outline-L {
+ width: 87px;
+ height: 80px;
+ transform: rotate(10deg) translate(-30%, 200%);
+ transition-delay: 0.4s;
+ z-index: 2;
+}
+.onboardingContainer .screen-1 .orange-L {
+ width: 550px;
+ height: 660px;
+ transform: rotate(-155deg) translate(11%, -18%);
+ transition-delay: 0.2s;
+}
+.onboardingContainer .screen-1 .purple-C {
+ width: 310px;
+ height: 260px;
+ transform: translate(-18%, -67%);
+}
+.onboardingContainer .screen-1 .yellow-circle {
+ width: 165px;
+ height: 165px;
+ border-radius: 50%;
+ transform: translate(230%, -5%);
+ background: #952BB9;
+ transition-delay: -0.2s;
+}
+.onboardingContainer .dialog-initial .brand-logo {
+ transition-delay: 0.6s;
+}
+.onboardingContainer .dialog-initial .welcome-text {
+ transition-delay: 0.8s;
+}
+.onboardingContainer .dialog-initial .tiles-theme-section,
+.onboardingContainer .dialog-initial .multi-select-container,
+.onboardingContainer .dialog-initial migration-wizard {
+ transition-delay: 0.9s;
+}
+.onboardingContainer .dialog-initial .primary,
+.onboardingContainer .dialog-initial .secondary,
+.onboardingContainer .dialog-initial .secondary-cta,
+.onboardingContainer .dialog-initial .steps,
+.onboardingContainer .dialog-initial .cta-link {
+ transition-delay: 1s;
+}
+.onboardingContainer .screen:not(.dialog-initial) .tiles-theme-section,
+.onboardingContainer .screen:not(.dialog-initial) .multi-select-container {
+ transition-delay: 0.2s;
+}
+.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 {
+ transition-delay: 0.4s;
+}
+.onboardingContainer .screen-2 .section-main {
+ z-index: 1;
+ margin: auto;
+}
+.onboardingContainer .screen-2 .outline-L {
+ width: 87px;
+ height: 80px;
+ transform: rotate(250deg) translate(-420%, 425%);
+ transition-delay: 0.2s;
+ z-index: 2;
+}
+.onboardingContainer .screen-2 .orange-L {
+ height: 800px;
+ width: 660px;
+ transform: rotate(35deg) translate(-10%, -7%);
+ transition-delay: -0.4s;
+}
+.onboardingContainer .screen-2 .purple-C {
+ width: 392px;
+ height: 394px;
+ transform: rotate(260deg) translate(-34%, -35%);
+ transition-delay: -0.2s;
+ fill: #952BB9;
+}
+.onboardingContainer .screen-2 .yellow-circle {
+ width: 165px;
+ height: 165px;
+ border-radius: 50%;
+ transform: translate(160%, 130%);
+ background: #E7258C;
+}
+.onboardingContainer.transition-in .noodle {
+ opacity: 0;
+ rotate: var(--rotate);
+ scale: var(--scale);
+}
+.onboardingContainer.transition-in .dialog-initial .main-content,
+.onboardingContainer.transition-in .dialog-initial .dismiss-button {
+ translate: 0 calc(-2 * var(--translate));
+}
+.onboardingContainer.transition-in .dialog-initial .brand-logo,
+.onboardingContainer.transition-in .dialog-initial .steps {
+ opacity: 0;
+ translate: 0 calc(-1 * var(--translate));
+}
+.onboardingContainer.transition-in .screen .welcome-text,
+.onboardingContainer.transition-in .screen .multi-select-container,
+.onboardingContainer.transition-in .screen .tiles-theme-section,
+.onboardingContainer.transition-in .screen .primary,
+.onboardingContainer.transition-in .screen .checkbox-container:not(.multi-select-item),
+.onboardingContainer.transition-in .screen .secondary,
+.onboardingContainer.transition-in .screen .secondary-cta:not(.top),
+.onboardingContainer.transition-in .screen .cta-link,
+.onboardingContainer.transition-in .screen migration-wizard {
+ opacity: 0;
+ translate: 0 calc(-1 * var(--translate));
+}
+.onboardingContainer.transition-in .screen:not(.dialog-initial) .steps:not(.progress-bar) {
+ opacity: 0.2;
+}
+.onboardingContainer.transition-out .noodle {
+ opacity: 0;
+ rotate: var(--rotate);
+ scale: var(--scale);
+ transition-delay: 0.2s;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .main-content {
+ overflow: hidden;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .welcome-text,
+.onboardingContainer.transition-out .screen:not(.dialog-last) .multi-select-container {
+ opacity: 0;
+ translate: 0 var(--translate);
+ transition-delay: 0.1s;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .tiles-theme-section,
+.onboardingContainer.transition-out .screen:not(.dialog-last) migration-wizard {
+ opacity: 0;
+ translate: 0 var(--translate);
+ transition-delay: 0.2s;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .primary,
+.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 {
+ opacity: 0;
+ translate: 0 var(--translate);
+ transition-delay: 0.3s;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .steps:not(.progress-bar) {
+ opacity: 0.2;
+ transition-delay: 0.5s;
+}
+.onboardingContainer.transition-out .dialog-last .noodle {
+ transition-delay: 0s;
+}
+.onboardingContainer.transition-out .dialog-last .main-content,
+.onboardingContainer.transition-out .dialog-last .dismiss-button {
+ opacity: 0;
+ translate: 0 calc(2 * var(--translate));
+ transition-delay: 0.4s;
+}
+.onboardingContainer migration-wizard {
+ width: unset;
+ transition: var(--transition);
+}
+.onboardingContainer migration-wizard::part(buttons) {
+ margin-top: 24px;
+ justify-content: flex-start;
+}
+.onboardingContainer migration-wizard::part(deck) {
+ font-size: 0.83em;
+}
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.html b/browser/components/aboutwelcome/content/aboutwelcome.html
new file mode 100644
index 0000000000..eb56c63110
--- /dev/null
+++ b/browser/components/aboutwelcome/content/aboutwelcome.html
@@ -0,0 +1,50 @@
+<!-- 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,
+ - You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="color-scheme" content="light dark" />
+ <meta
+ http-equiv="Content-Security-Policy"
+ content="default-src 'none'; object-src 'none'; script-src resource: chrome:; media-src resource: chrome: https://assets.mozilla.net https://www.mozilla.org; connect-src https:; img-src https: data: blob: chrome:; style-src resource: chrome:;"
+ />
+ <title data-l10n-id="onboarding-welcome-header"></title>
+ <link
+ rel="icon"
+ type="image/png"
+ href="chrome://branding/content/icon32.png"
+ />
+ <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
+ <link
+ rel="stylesheet"
+ href="chrome://browser/content/aboutwelcome/aboutwelcome.css"
+ />
+ <link rel="localization" href="branding/brand.ftl" />
+ <link rel="localization" href="preview/onboarding.ftl" />
+ <link rel="localization" href="browser/newtab/onboarding.ftl" />
+ <link rel="localization" href="browser/spotlight.ftl" />
+ <link rel="localization" href="browser/migrationWizard.ftl" />
+ <link rel="localization" href="toolkit/branding/accounts.ftl" />
+ <link rel="localization" href="toolkit/branding/brandings.ftl" />
+ </head>
+ <body>
+ <div
+ id="multi-stage-message-root"
+ class="welcome-container"
+ role="presentation"
+ ></div>
+ <script src="resource://activity-stream/vendor/react.js"></script>
+ <script src="resource://activity-stream/vendor/react-dom.js"></script>
+ <script src="chrome://browser/content/contentTheme.js"></script>
+ <script src="chrome://browser/content/aboutwelcome/aboutwelcome.bundle.js"></script>
+ <script src="chrome://global/content/elements/named-deck.js" async></script>
+ <script src="chrome://global/content/elements/panel-list.js" async></script>
+ <script
+ src="chrome://browser/content/migration/migration-wizard.mjs"
+ type="module"
+ ></script>
+ </body>
+</html>
diff --git a/browser/components/aboutwelcome/content/onboarding.ftl b/browser/components/aboutwelcome/content/onboarding.ftl
new file mode 100644
index 0000000000..9a894baf88
--- /dev/null
+++ b/browser/components/aboutwelcome/content/onboarding.ftl
@@ -0,0 +1,13 @@
+# 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, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+### This file is not in a locales directory to prevent it from
+### being translated as the feature is still in heavy development
+### and strings are likely to change often.
+
+## AMO (Introduce Add-ons) onboarding screen strings
+
+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