diff options
Diffstat (limited to 'browser/components/aboutwelcome/content')
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 |