commit b24cb3377c1da2e146a01c0301fe19cbc2521c7f parent 01546f5cdc4678a4e69043610b1a0524ffff6e5d Author: Cristina Horotan <chorotan@mozilla.com> Date: Sat, 4 Oct 2025 03:27:53 +0300 Revert "Bug 1979456 - Update SingleSelect component and add TileButton && TileList components to support backup select messages r=omc-reviewers,aminomancer" for causing node failures This reverts commit 4f84e3036aa8fc0a8d7d27e25ad1d991218283b7. Diffstat:
14 files changed, 35 insertions(+), 929 deletions(-)
diff --git a/browser/base/content/spotlight.html b/browser/base/content/spotlight.html @@ -25,7 +25,6 @@ <link rel="localization" href="browser/migrationWizard.ftl" /> <link rel="localization" href="browser/preonboarding.ftl" /> <link rel="localization" href="browser/termsofuse.ftl" /> - <link rel="localization" href="browser/featureCallout.ftl" /> </head> <body role="dialog" diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss @@ -117,8 +117,6 @@ html { --picker-focus-ring-color: var(--in-content-item-selected); --picker-checkbox-color: var(--in-content-item-selected); --picker-checkbox-hover-color: var(--picker-checkbox-color); - --picker-backup-flair-background: var(--color-blue-0); - --picker-backup-flair-color: var(--color-blue-50); @media (forced-colors: active) { --picker-background-color: ButtonFace; @@ -1860,34 +1858,6 @@ html { right: 1px; top: -10px; line-height: 1; - - &.centered { - /* stylelint-disable-next-line */ - border-radius: 8px 8px 0 0; - background-color: var(--button-background-color-primary); - position: relative; - right: unset; - top: -6px; - line-height: 0.75; - width: 100%; - box-sizing: border-box; - - &.backup { - /* stylelint-disable-next-line */ - border-radius: 10px 10px 0 0; - background-color: var(--picker-backup-flair-background); - color: var(--picker-backup-flair-color); - top: -5px; - - &.spacer { - background-color: transparent; - } - } - } - - &.spacer { - background-color: transparent; - } } .icon { @@ -1897,32 +1867,11 @@ html { .text { margin-block: 8px; } + } - .tile-list-container { - display: flex; - flex-direction: column; - margin-inline-start: 20px; - - .tile-list-item { - display: flex; - - &:last-child { - margin-block-end: 8px; - } - } + } - .tile-list-icon-wrapper { - padding-block-start: 10px; - } - .tile-list-text { - margin-inline-start: 8px; - margin-inline-end: 20px; - text-align: start; - } - } - } - } // single select and theme specific styles &.single-select, &.theme { @@ -1952,19 +1901,6 @@ html { cursor: pointer; z-index: 0; - &.backup { - cursor: unset; - width: 300px; - - &:has(.selected) { - border: 2px solid var(--picker-backup-flair-color); - } - - &:hover { - background-color: transparent; - } - } - &:focus, &:active { outline: initial; @@ -2600,14 +2536,6 @@ html { &.rtamo { margin-top: 24px; } - - &.slim { - padding: 0; - } - - &.tile-button { - cursor: pointer; - } } .secondary { diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx @@ -128,7 +128,7 @@ export const MultiStageAboutWelcome = props => { }, [transition]); // Transition to next screen, opening about:home on last screen button CTA - const handleTransition = goBack => { + const handleTransition = () => { // Only handle transitioning out from a screen once. if (transition === "out") { return; @@ -140,10 +140,7 @@ export const MultiStageAboutWelcome = props => { // Actually move forwards after all transitions finish. setTimeout( () => { - if (goBack) { - setTransition(props.transitions ? "in" : ""); - setScreenIndex(prevState => prevState - 1); - } else if (index < screens.length - 1) { + if (index < screens.length - 1) { setTransition(props.transitions ? "in" : ""); setScreenIndex(prevState => prevState + 1); } else { @@ -618,10 +615,7 @@ export class WelcomeScreen extends React.PureComponent { } resolveActionFromContent(value, event, props) { - if ( - (value === "submenu_button" || value === "tile_button") && - event.action - ) { + if (value === "submenu_button" && event.action) { return event.action; } @@ -712,7 +706,7 @@ export class WelcomeScreen extends React.PureComponent { this.props.setInitialTheme(this.props.activeTheme); } - // `navigate`, `goBack` and `dismiss` can be true/false/undefined, or they can be a + // `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 => { @@ -731,7 +725,7 @@ export class WelcomeScreen extends React.PureComponent { }; if (shouldDoBehavior(action.navigate)) { - props.navigate(action.goBack); + props.navigate(); } // Used by FeatureCallout to advance screens by re-rendering the whole diff --git a/browser/components/aboutwelcome/content-src/components/SingleSelect.jsx b/browser/components/aboutwelcome/content-src/components/SingleSelect.jsx @@ -5,8 +5,6 @@ import React, { useEffect } from "react"; import { Localized } from "./MSLocalized"; -import { TileButton } from "./TileButton"; -import { TileList } from "./TileList"; import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils.mjs"; // This component was formerly "Themes" and continues to support theme @@ -99,17 +97,14 @@ export const SingleSelect = ({ {content.tiles.data.map( ({ description, - inert, icon, id, label = "", - body = "", theme, tooltip, type = "", flair, style, - tilebutton, }) => { const value = id || theme; let inputName = "select-item"; @@ -158,9 +153,7 @@ export const SingleSelect = ({ > {flair ? ( <Localized text={valOrObj(flair.text)}> - <span - className={`flair ${flair.centered ? "centered" : ""} ${flair.spacer ? "spacer" : ""} ${type}`} - ></span> + <span className="flair"></span> </Localized> ) : ( "" @@ -172,7 +165,6 @@ export const SingleSelect = ({ name={inputName} checked={selected} className="sr-only input" - disabled={inert} onClick={e => handleClick(e)} /> </Localized> @@ -184,24 +176,8 @@ export const SingleSelect = ({ )} /> <Localized text={label}> - <div className="text label-text" /> + <div className="text" /> </Localized> - {body.items ? ( - <TileList content={body} /> - ) : ( - <Localized text={body}> - <div className="text body-text" /> - </Localized> - )} - {tilebutton ? ( - <TileButton - content={tilebutton} - handleAction={handleAction} - inputName={inputName} - /> - ) : ( - "" - )} </label> </Localized> ); diff --git a/browser/components/aboutwelcome/content-src/components/TileButton.jsx b/browser/components/aboutwelcome/content-src/components/TileButton.jsx @@ -1,56 +0,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/. */ - -import React, { useRef } from "react"; -import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils.mjs"; -import { Localized } from "./MSLocalized"; - -export const TileButton = props => { - const { content, handleAction, inputName } = props; - const ref = useRef(null); - - if (!content) { - return null; - } - - const CONFIGURABLE_STYLES = [ - "background", - "borderRadius", - "height", - "marginBlock", - "marginBlockStart", - "marginBlockEnd", - "marginInline", - "paddingBlock", - "paddingBlockStart", - "paddingBlockEnd", - "paddingInline", - "paddingInlineStart", - "paddingInlineEnd", - "width", - ]; - - function onClick(event) { - let mockEvent = { - currentTarget: ref.current, - source: event.target.id, - name: "command", - action: content.action, - }; - handleAction(mockEvent); - } - - return ( - <Localized text={content.label}> - <button - id={`tile-button-${inputName}`} - onClick={onClick} - value="tile_button" - ref={ref} - className={`${content.style} tile-button slim`} - style={AboutWelcomeUtils.getValidStyle(content, CONFIGURABLE_STYLES)} - /> - </Localized> - ); -}; diff --git a/browser/components/aboutwelcome/content-src/components/TileList.jsx b/browser/components/aboutwelcome/content-src/components/TileList.jsx @@ -1,52 +0,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/. */ - -import React from "react"; -import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils.mjs"; -import { Localized } from "./MSLocalized"; - -export const TileList = props => { - const { content } = props; - - if (!content) { - return null; - } - - const CONFIGURABLE_STYLES = [ - "background", - "borderRadius", - "height", - "marginBlock", - "marginBlockStart", - "marginBlockEnd", - "marginInline", - "paddingBlock", - "paddingBlockStart", - "paddingBlockEnd", - "paddingInline", - "paddingInlineStart", - "paddingInlineEnd", - "width", - ]; - - return ( - <div className={"tile-list-container"}> - {content.items.map(({ icon, text }, index) => ( - <div key={index} className="tile-list-item"> - <div className="tile-list-icon-wrapper"> - <div - className="tile-list-icon" - style={AboutWelcomeUtils.getValidStyle(icon, CONFIGURABLE_STYLES)} - ></div> - </div> - <div className="tile-list-text"> - <Localized text={text}> - <div className="text body-text" /> - </Localized> - </div> - </div> - ))} - </div> - ); -}; diff --git a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js @@ -151,7 +151,7 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6); /* harmony import */ var _LanguageSwitcher__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7); /* harmony import */ var _SubmenuButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(12); -/* harmony import */ var _lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(26); +/* harmony import */ var _lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(24); /* 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/. */ @@ -259,7 +259,7 @@ const MultiStageAboutWelcome = props => { }, [transition]); // Transition to next screen, opening about:home on last screen button CTA - const handleTransition = goBack => { + const handleTransition = () => { // Only handle transitioning out from a screen once. if (transition === "out") { return; @@ -270,10 +270,7 @@ const MultiStageAboutWelcome = props => { // Actually move forwards after all transitions finish. setTimeout(() => { - if (goBack) { - setTransition(props.transitions ? "in" : ""); - setScreenIndex(prevState => prevState - 1); - } else if (index < screens.length - 1) { + if (index < screens.length - 1) { setTransition(props.transitions ? "in" : ""); setScreenIndex(prevState => prevState + 1); } else { @@ -678,7 +675,7 @@ class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo } } resolveActionFromContent(value, event, props) { - if ((value === "submenu_button" || value === "tile_button") && event.action) { + if (value === "submenu_button" && event.action) { return event.action; } const { @@ -761,7 +758,7 @@ class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo this.props.setInitialTheme(this.props.activeTheme); } - // `navigate`, `goBack` and `dismiss` can be true/false/undefined, or they can be a + // `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 => { @@ -775,7 +772,7 @@ class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo return false; }; if (shouldDoBehavior(action.navigate)) { - props.navigate(action.goBack); + props.navigate(); } // Used by FeatureCallout to advance screens by re-rendering the whole @@ -2252,13 +2249,13 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5); /* harmony import */ var _AddonsPicker__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(15); /* harmony import */ var _SingleSelect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17); -/* harmony import */ var _MobileDownloads__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(20); -/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(21); -/* harmony import */ var _EmbeddedMigrationWizard__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(22); -/* harmony import */ var _ActionChecklist__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(23); -/* harmony import */ var _EmbeddedBrowser__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(24); +/* harmony import */ var _MobileDownloads__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(18); +/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19); +/* harmony import */ var _EmbeddedMigrationWizard__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(20); +/* harmony import */ var _ActionChecklist__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(21); +/* harmony import */ var _EmbeddedBrowser__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(22); /* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(3); -/* harmony import */ var _EmbeddedBackupRestore__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(25); +/* harmony import */ var _EmbeddedBackupRestore__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(23); /* 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/. */ @@ -2760,9 +2757,7 @@ __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 _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5); -/* harmony import */ var _TileButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(18); -/* harmony import */ var _TileList__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19); -/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3); +/* 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/. */ @@ -2771,8 +2766,6 @@ __webpack_require__.r(__webpack_exports__); - - // This component was formerly "Themes" and continues to support theme const SingleSelect = ({ activeSingleSelectSelections = {}, @@ -2835,17 +2828,14 @@ const SingleSelect = ({ className: "sr-only" })), content.tiles.data.map(({ description, - inert, icon, id, label = "", - body = "", theme, tooltip, type = "", flair, - style, - tilebutton + style }) => { const value = id || theme; let inputName = "select-item"; @@ -2875,7 +2865,7 @@ const SingleSelect = ({ title: value, onKeyDown: e => handleKeyDown(e), style: { - ..._lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_4__.AboutWelcomeUtils.getValidStyle(style, CONFIGURABLE_STYLES), + ..._lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.getValidStyle(style, CONFIGURABLE_STYLES), ...(icon?.width ? { minWidth: icon.width } : {}) @@ -2883,7 +2873,7 @@ const SingleSelect = ({ }, flair ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { text: valOrObj(flair.text) }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { - className: `flair ${flair.centered ? "centered" : ""} ${flair.spacer ? "spacer" : ""} ${type}` + className: "flair" })) : "", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { text: valOrObj(description) }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { @@ -2892,26 +2882,15 @@ const SingleSelect = ({ name: inputName, checked: selected, className: "sr-only input", - disabled: inert, onClick: e => handleClick(e) })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `icon ${selected ? " selected" : ""} ${value}`, - style: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_4__.AboutWelcomeUtils.getValidStyle(icon, CONFIGURABLE_STYLES) + style: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.getValidStyle(icon, CONFIGURABLE_STYLES) }), /*#__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 label-text" - })), body.items ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_TileList__WEBPACK_IMPORTED_MODULE_3__.TileList, { - content: body - }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { - text: body - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - className: "text body-text" - })), tilebutton ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_TileButton__WEBPACK_IMPORTED_MODULE_2__.TileButton, { - content: tilebutton, - handleAction: handleAction, - inputName: inputName - }) : "")); + className: "text" + })))); })))); }; @@ -2921,106 +2900,6 @@ const SingleSelect = ({ __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ TileButton: () => (/* binding */ TileButton) -/* 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 TileButton = props => { - const { - content, - handleAction, - inputName - } = props; - const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null); - if (!content) { - return null; - } - const CONFIGURABLE_STYLES = ["background", "borderRadius", "height", "marginBlock", "marginBlockStart", "marginBlockEnd", "marginInline", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "width"]; - function onClick(event) { - let mockEvent = { - currentTarget: ref.current, - source: event.target.id, - name: "command", - action: content.action - }; - handleAction(mockEvent); - } - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_2__.Localized, { - text: content.label - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { - id: `tile-button-${inputName}`, - onClick: onClick, - value: "tile_button", - ref: ref, - className: `${content.style} tile-button slim`, - style: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.getValidStyle(content, CONFIGURABLE_STYLES) - })); -}; - -/***/ }), -/* 19 */ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ TileList: () => (/* binding */ TileList) -/* 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 TileList = props => { - const { - content - } = props; - if (!content) { - return null; - } - const CONFIGURABLE_STYLES = ["background", "borderRadius", "height", "marginBlock", "marginBlockStart", "marginBlockEnd", "marginInline", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "width"]; - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - className: "tile-list-container" - }, content.items.map(({ - icon, - text - }, index) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - key: index, - className: "tile-list-item" - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - className: "tile-list-icon-wrapper" - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - className: "tile-list-icon", - style: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.getValidStyle(icon, CONFIGURABLE_STYLES) - })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - className: "tile-list-text" - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_2__.Localized, { - text: text - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - className: "text body-text" - })))))); -}; - -/***/ }), -/* 20 */ -/***/ ((__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 */ }); @@ -3078,7 +2957,7 @@ const MobileDownloads = props => { }; /***/ }), -/* 21 */ +/* 19 */ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -3267,7 +3146,7 @@ const MultiSelect = ({ }; /***/ }), -/* 22 */ +/* 20 */ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -3338,7 +3217,7 @@ const EmbeddedMigrationWizard = ({ }; /***/ }), -/* 23 */ +/* 21 */ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -3496,7 +3375,7 @@ const ActionChecklist = ({ }; /***/ }), -/* 24 */ +/* 22 */ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -3564,7 +3443,7 @@ const EmbeddedBrowserInner = ({ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EmbeddedBrowser); /***/ }), -/* 25 */ +/* 23 */ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -3641,7 +3520,7 @@ const EmbeddedBackupRestore = ({ }; /***/ }), -/* 26 */ +/* 24 */ /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css @@ -1062,8 +1062,6 @@ html { --picker-focus-ring-color: var(--in-content-item-selected); --picker-checkbox-color: var(--in-content-item-selected); --picker-checkbox-hover-color: var(--picker-checkbox-color); - --picker-backup-flair-background: var(--color-blue-0); - --picker-backup-flair-color: var(--color-blue-50); font-family: system-ui; font-size: 16px; position: relative; @@ -2740,55 +2738,12 @@ html { top: -10px; line-height: 1; } -.onboardingContainer .tiles-single-select-section.single-select .select-item .flair.centered, .onboardingContainer .tiles-single-select-section.theme .select-item .flair.centered { - /* stylelint-disable-next-line */ - border-radius: 8px 8px 0 0; - background-color: var(--button-background-color-primary); - position: relative; - right: unset; - top: -6px; - line-height: 0.75; - width: 100%; - box-sizing: border-box; -} -.onboardingContainer .tiles-single-select-section.single-select .select-item .flair.centered.backup, .onboardingContainer .tiles-single-select-section.theme .select-item .flair.centered.backup { - /* stylelint-disable-next-line */ - border-radius: 10px 10px 0 0; - background-color: var(--picker-backup-flair-background); - color: var(--picker-backup-flair-color); - top: -5px; -} -.onboardingContainer .tiles-single-select-section.single-select .select-item .flair.centered.backup.spacer, .onboardingContainer .tiles-single-select-section.theme .select-item .flair.centered.backup.spacer { - background-color: transparent; -} -.onboardingContainer .tiles-single-select-section.single-select .select-item .flair.spacer, .onboardingContainer .tiles-single-select-section.theme .select-item .flair.spacer { - background-color: transparent; -} .onboardingContainer .tiles-single-select-section.single-select .select-item .icon, .onboardingContainer .tiles-single-select-section.theme .select-item .icon { outline: none; } .onboardingContainer .tiles-single-select-section.single-select .select-item .text, .onboardingContainer .tiles-single-select-section.theme .select-item .text { margin-block: 8px; } -.onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container { - display: flex; - flex-direction: column; - margin-inline-start: 20px; -} -.onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container .tile-list-item, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container .tile-list-item { - display: flex; -} -.onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container .tile-list-item:last-child, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container .tile-list-item:last-child { - margin-block-end: 8px; -} -.onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container .tile-list-icon-wrapper, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container .tile-list-icon-wrapper { - padding-block-start: 10px; -} -.onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container .tile-list-text, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container .tile-list-text { - margin-inline-start: 8px; - margin-inline-end: 20px; - text-align: start; -} .onboardingContainer .tiles-single-select-section.single-select:hover, .onboardingContainer .tiles-single-select-section.single-select:focus-within, .onboardingContainer .tiles-single-select-section.theme:hover, .onboardingContainer .tiles-single-select-section.theme:focus-within { outline: none; } @@ -2811,16 +2766,6 @@ html { cursor: pointer; z-index: 0; } -.onboardingContainer .tiles-single-select-section .select-item.backup { - cursor: unset; - width: 300px; -} -.onboardingContainer .tiles-single-select-section .select-item.backup:has(.selected) { - border: 2px solid var(--picker-backup-flair-color); -} -.onboardingContainer .tiles-single-select-section .select-item.backup:hover { - background-color: transparent; -} .onboardingContainer .tiles-single-select-section .select-item:focus, .onboardingContainer .tiles-single-select-section .select-item:active { outline: initial; outline-offset: initial; @@ -3361,18 +3306,6 @@ html { .onboardingContainer .submenu-button.rtamo { margin-top: 24px; } -.onboardingContainer .primary.slim, -.onboardingContainer .secondary.slim, -.onboardingContainer .additional-cta.slim, -.onboardingContainer .submenu-button.slim { - padding: 0; -} -.onboardingContainer .primary.tile-button, -.onboardingContainer .secondary.tile-button, -.onboardingContainer .additional-cta.tile-button, -.onboardingContainer .submenu-button.tile-button { - cursor: pointer; -} .onboardingContainer .secondary { background-color: var(--button-background-color); color: var(--button-text-color); diff --git a/browser/components/asrouter/content/assets/checkmark-16.svg b/browser/components/asrouter/content/assets/checkmark-16.svg @@ -1,6 +0,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/. --> -<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M6.39422 13.3591L1.55422 8.52009C1.44185 8.40172 1.38014 8.24415 1.38225 8.08095C1.38437 7.91775 1.45014 7.76183 1.56555 7.64642C1.68096 7.53101 1.83688 7.46523 2.00009 7.46312C2.16329 7.461 2.32086 7.52271 2.43922 7.63509L6.74622 11.9431L14.3052 4.38209C14.4229 4.26527 14.5819 4.19971 14.7477 4.19971C14.9135 4.19971 15.0726 4.26527 15.1902 4.38209C15.307 4.49973 15.3726 4.65879 15.3726 4.82459C15.3726 4.99038 15.307 5.14944 15.1902 5.26709L7.10022 13.3571L6.39422 13.3591Z" fill="#37B847"/> -</svg> diff --git a/browser/components/asrouter/content/assets/close-16.svg b/browser/components/asrouter/content/assets/close-16.svg @@ -1,6 +0,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/. --> -<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M9.47922 8.13519L14.1882 3.42619C14.2975 3.30736 14.3566 3.15092 14.3533 2.98953C14.35 2.82814 14.2844 2.67427 14.1703 2.56006C14.0562 2.44585 13.9025 2.38013 13.7411 2.37661C13.5797 2.37309 13.4232 2.43206 13.3042 2.54119L8.61522 7.23019H8.12722L3.43822 2.54219C3.38011 2.48414 3.31114 2.43811 3.23524 2.40673C3.15934 2.37534 3.078 2.35921 2.99587 2.35925C2.91374 2.3593 2.83242 2.37552 2.75655 2.407C2.68069 2.43847 2.61177 2.48458 2.55372 2.54269C2.49568 2.6008 2.44965 2.66977 2.41826 2.74567C2.38687 2.82157 2.37074 2.90291 2.37079 2.98504C2.37088 3.15092 2.43687 3.30996 2.55422 3.42719L7.24122 8.11319V8.60419L2.55422 13.2912C2.44496 13.41 2.38582 13.5665 2.38915 13.7278C2.39249 13.8892 2.45804 14.0431 2.57212 14.1573C2.6862 14.2715 2.83999 14.3372 3.00138 14.3408C3.16277 14.3443 3.31928 14.2853 3.43822 14.1762L8.12522 9.48919H8.61622L13.3032 14.1762C13.4207 14.2933 13.5799 14.359 13.7457 14.359C13.9116 14.359 14.0707 14.2933 14.1882 14.1762C14.3055 14.0588 14.3714 13.8996 14.3714 13.7337C14.3714 13.5677 14.3055 13.4086 14.1882 13.2912L9.47922 8.58219V8.13519Z" fill="#CF1748"/> -</svg> diff --git a/browser/components/asrouter/content/assets/shield-checkmark-16.svg b/browser/components/asrouter/content/assets/shield-checkmark-16.svg @@ -1,7 +0,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/. --> -<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M8.8712 16.3591C8.4412 16.3591 8.0112 16.2491 7.6312 16.0291C5.9912 15.0991 4.4812 13.6691 3.3712 11.9991C2.8012 11.1391 2.4012 10.0891 2.1812 8.88913L1.6212 5.86913C1.4212 4.79913 1.9312 3.73913 2.8912 3.21913L7.6212 0.659131C8.3612 0.259131 9.2512 0.259131 9.9912 0.659131L14.8412 3.26913C15.8012 3.78913 16.3112 4.84913 16.1112 5.92913L15.5612 8.89913C15.3412 10.0991 14.9412 11.1391 14.3712 11.9991C13.2712 13.6691 11.7612 15.1091 10.1112 16.0391C9.7312 16.2591 9.3012 16.3691 8.8712 16.3691V16.3591ZM8.8112 1.85913C8.6512 1.85913 8.4812 1.89913 8.3312 1.97913L3.6112 4.53913C3.2312 4.74913 3.0212 5.16913 3.1012 5.59913L3.6612 8.61913C3.8512 9.61913 4.1712 10.4891 4.6312 11.1791C5.6012 12.6591 6.9312 13.9191 8.3712 14.7291C8.6812 14.8991 9.0612 14.8991 9.3712 14.7291C10.8112 13.9091 12.1412 12.6491 13.1212 11.1691C13.5812 10.4791 13.9012 9.61913 14.0912 8.61913L14.6412 5.64913C14.7212 5.21913 14.5212 4.78913 14.1312 4.58913L9.2812 1.97913C9.1312 1.89913 8.9712 1.85913 8.8112 1.85913Z" fill="#37B847"/> -<path d="M8.51122 10.5791C8.32122 10.5791 8.13122 10.5091 7.98122 10.3591L5.81122 8.1891L6.87122 7.1291L8.51122 8.7691L11.4512 5.8291L12.5112 6.8891L9.04122 10.3591C8.89122 10.5091 8.70122 10.5791 8.51122 10.5791Z" fill="#37B847"/> -</svg> diff --git a/browser/components/asrouter/jar.mn b/browser/components/asrouter/jar.mn @@ -36,9 +36,6 @@ browser.jar: content/browser/asrouter/assets/desktop-to-mobile-banner.svg (content/assets/desktop-to-mobile-banner.svg) content/browser/asrouter/assets/fox-question-mark-icon.svg (content/assets/fox-question-mark-icon.svg) content/browser/asrouter/assets/double-star-icon.svg (content/assets/double-star-icon.svg) - content/browser/asrouter/assets/checkmark-16.svg (content/assets/checkmark-16.svg) - content/browser/asrouter/assets/close-16.svg (content/assets/close-16.svg) - content/browser/asrouter/assets/shield-checkmark-16.svg (content/assets/shield-checkmark-16.svg) content/browser/asrouter/assets/recommend-bookmarks-toolbar/bookmarks-toolbar-light.svg (content/assets/recommend-bookmarks-toolbar/bookmarks-toolbar-light.svg) content/browser/asrouter/assets/recommend-bookmarks-toolbar/bookmarks-toolbar-dark.svg (content/assets/recommend-bookmarks-toolbar/bookmarks-toolbar-dark.svg) content/browser/asrouter/assets/recommend-bookmarks-toolbar/drag-drop-bookmark-light.svg (content/assets/recommend-bookmarks-toolbar/drag-drop-bookmark-light.svg) diff --git a/browser/components/asrouter/modules/PanelTestProvider.sys.mjs b/browser/components/asrouter/modules/PanelTestProvider.sys.mjs @@ -20,479 +20,6 @@ const isMSIX = const MESSAGES = () => [ { - id: "TEST_BACKUP_SPOTLIGHT", - groups: [], - targeting: true, - trigger: { - id: "defaultBrowserCheck", - }, - template: "spotlight", - profileScope: "single", - frequency: { - lifetime: 100, - }, - content: { - template: "multistage", - modal: "tab", - screens: [ - { - id: "SCREEN_1", - force_hide_steps_indicator: true, - content: { - position: "center", - screen_style: { - width: "700px", - }, - logo: { - height: "0px", - imageURL: "", - }, - title: { - raw: "Upgrading to Windows 11? Let's back up your Firefox data", - }, - subtitle: { - raw: "Automatically protect your passwords, bookmarks, and more in 1-2 minutes. Learn more", - }, - tiles: { - type: "single-select", - autoTrigger: false, - selected: "sync", - action: { - picker: "<event>", - }, - data: [ - { - inert: true, - type: "backup", - icon: { - background: - "center / contain no-repeat url('chrome://browser/content/asrouter/assets/fox-with-box-on-cloud.svg')", - width: "60px", - height: "42px", - marginBlockStart: "10px", - paddingBlockEnd: "10px", - borderRadius: "5px", - }, - id: "sync", - flair: { - centered: true, - text: { - raw: "Recommended", - }, - }, - label: { - raw: "Sync to cloud", - fontSize: 17, - fontWeight: 600, - }, - body: { - raw: "Back up on all signed in devices", - fontWeight: 300, - marginBlock: "-6px 16px", - }, - tilebutton: { - label: { - raw: "Select", - }, - style: "primary", - marginBlock: "0 16px", - action: { - type: "FXA_SIGNIN_FLOW", - dismiss: "actionResult", - needsAwait: true, - data: { - entrypoint: "onboarding", - extraParams: { - utm_content: "migration-onboarding", - }, - }, - }, - }, - }, - { - inert: true, - type: "backup", - icon: { - background: - "center / contain no-repeat url('chrome://browser/content/asrouter/assets/fox-with-locked-box.svg')", - width: "60px", - height: "40px", - marginBlockStart: "10px", - paddingBlockEnd: "10px", - borderRadius: "5px", - }, - id: "backup", - flair: { - centered: true, - spacer: true, - }, - label: { - raw: "Back up to PC", - fontSize: 17, - fontWeight: 600, - }, - body: { - raw: "Save to this device", - fontWeight: 300, - marginBlock: "-6px 16px", - }, - tilebutton: { - label: { - raw: "Select", - }, - style: "secondary", - marginBlock: "0 16px", - action: { - navigate: true, - }, - }, - }, - ], - }, - additional_button: { - label: { - string_id: "fx-view-discoverability-secondary-button-label", - }, - style: "secondary", - flow: "row", - action: { - type: "BLOCK_MESSAGE", - data: { - id: "TEST_BACKUP_SPOTLIGHT", - }, - dismiss: true, - }, - }, - submenu_button: { - submenu: [ - { - type: "action", - label: { - string_id: "split-dismiss-button-dont-show-option", - }, - action: { - type: "BLOCK_MESSAGE", - data: { - id: "TEST_BACKUP_SPOTLIGHT", - }, - dismiss: true, - }, - id: "block_recommendation", - }, - { - type: "action", - label: { - string_id: "split-dismiss-button-show-fewer-option", - }, - action: { - type: "MULTI_ACTION", - dismiss: true, - data: { - actions: [ - { - type: "SET_PREF", - data: { - pref: { - name: "messaging-system-action.firefox-view-recommendations", - value: true, - }, - }, - }, - { - type: "BLOCK_MESSAGE", - data: { - id: "TASKBAR_TAB_TEST_CALLOUT", - }, - }, - ], - }, - }, - id: "show_fewer_recommendations", - }, - { - type: "separator", - }, - { - type: "action", - label: { - string_id: "split-dismiss-button-manage-settings-option", - }, - action: { - type: "OPEN_ABOUT_PAGE", - data: { - args: "preferences#general-cfrfeatures", - where: "tab", - }, - dismiss: true, - }, - id: "manage_settings", - }, - ], - attached_to: "additional_button", - }, - }, - }, - { - id: "SCREEN_2", - force_hide_steps_indicator: true, - content: { - position: "center", - screen_style: { - width: "700px", - }, - logo: { - height: "0px", - imageURL: "", - }, - title: { - raw: "Choose Firefox data to back up", - }, - subtitle: { - raw: "Only takes a minute.", - }, - tiles: { - type: "single-select", - selected: "all", - action: { - picker: "<event>", - }, - data: [ - { - inert: true, - type: "backup", - icon: { - background: - "center / contain no-repeat url('https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/ms-images/a43cd9cc-e8b2-477c-92f2-345557370de1.svg')", - width: "60px", - height: "40px", - marginBlockStart: "10px", - paddingBlockEnd: "10px", - borderRadius: "5px", - }, - id: "easy", - label: { - raw: "Easy setup", - fontSize: 17, - fontWeight: 600, - }, - body: { - items: [ - { - icon: { - background: - "center / contain no-repeat url('chrome://browser/content/asrouter/assets/checkmark-16.svg')", - height: "18px", - width: "18px", - }, - text: { - raw: "Bookmarks, history, settings, and more", - }, - }, - { - icon: { - background: - "center / contain no-repeat url('chrome://browser/content/asrouter/assets/close-16.svg')", - height: "18px", - width: "18px", - }, - text: { - raw: "Doesn't include passwords and payments", - }, - }, - { - icon: { - background: - "center / contain no-repeat url('chrome://browser/content/asrouter/assets/close-16.svg')", - height: "18px", - width: "18px", - }, - text: { - raw: "Not encrypted", - fontWeight: 500, - }, - }, - ], - }, - tilebutton: { - label: { - raw: "Select", - }, - marginBlock: "0 16px", - style: "primary", - action: { - type: "SET_PREF", - navigate: true, - data: { - pref: { - name: "messaging-system-action.backupChooser", - value: "easy", - }, - }, - }, - }, - }, - { - inert: true, - type: "backup", - icon: { - background: - "center / contain no-repeat url('https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/ms-images/0ddfd632-b9c4-45d6-86c3-b89f94797110.svg')", - width: "60px", - height: "40px", - marginBlockStart: "10px", - paddingBlockEnd: "10px", - borderRadius: "5px", - }, - id: "all", - label: { - raw: "All data", - fontSize: 17, - fontWeight: 600, - }, - body: { - items: [ - { - icon: { - background: - "center / contain no-repeat url('chrome://browser/content/asrouter/assets/checkmark-16.svg')", - height: "18px", - width: "18px", - }, - text: { - raw: "Bookmarks, history, settings, and more", - }, - }, - { - icon: { - background: - "center / contain no-repeat url('chrome://browser/content/asrouter/assets/checkmark-16.svg')", - height: "18px", - width: "18px", - }, - text: { - raw: "Includes passwords and payments", - }, - }, - { - icon: { - background: - "center / contain no-repeat url('chrome://browser/content/asrouter/assets/shield-checkmark-16.svg')", - height: "18px", - width: "18px", - }, - text: { - raw: "Encrypted with a password", - fontWeight: 500, - }, - }, - ], - }, - tilebutton: { - label: { - raw: "Select", - }, - marginBlock: "0 16px", - style: "primary", - action: { - type: "SET_PREF", - navigate: true, - data: { - pref: { - name: "messaging-system-action.backupChooser", - value: "full", - }, - }, - }, - }, - }, - ], - }, - additional_button: { - style: "secondary", - label: { - raw: "Back", - }, - action: { - navigate: true, - goBack: true, - }, - }, - }, - }, - { - id: "SCREEN_3A", - force_hide_steps_indicator: true, - targeting: - "('messaging-system-action.backupChooser' |preferenceValue == 'easy')", - content: { - logo: { - imageURL: - "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/ms-images/a3c640c8-7594-4bb2-bc18-8b4744f3aaf2.gif", - }, - title: { - raw: "Easy Backup", - paddingBlock: "8px", - }, - dismiss_button: { - action: { - dismiss: true, - }, - }, - primary_button: { - label: "Primary", - action: { - navigate: true, - }, - }, - secondary_button: { - label: "Go back", - action: { - navigate: true, - goBack: true, - }, - }, - }, - }, - { - id: "SCREEN_3B", - force_hide_steps_indicator: true, - targeting: - "('messaging-system-action.backupChooser' |preferenceValue == 'full' || preferenceValue == null)", - content: { - logo: { - imageURL: - "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/ms-images/a3c640c8-7594-4bb2-bc18-8b4744f3aaf2.gif", - }, - title: { - raw: "Full Backup", - paddingBlock: "8px", - }, - dismiss_button: { - action: { - dismiss: true, - }, - }, - primary_button: { - label: "Primary", - action: { - navigate: true, - }, - }, - secondary_button: { - label: "Go back", - action: { - navigate: true, - goBack: true, - }, - }, - }, - }, - ], - transitions: true, - }, - provider: "panel_local_testing", - }, - { id: "TASKBAR_TAB_TEST_CALLOUT", template: "feature_callout", groups: ["cfr"], diff --git a/browser/components/asrouter/tests/xpcshell/test_PanelTestProvider.js b/browser/components/asrouter/tests/xpcshell/test_PanelTestProvider.js @@ -22,7 +22,7 @@ add_task(async function test_PanelTestProvider() { cfr_doorhanger: 1, milestone_message: 0, update_action: 1, - spotlight: 8, + spotlight: 7, feature_callout: 11, pb_newtab: 2, toast_notification: 3,
