diff --git a/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx b/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx index cb304154c3c7b..2fff85abd9995 100644 --- a/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx +++ b/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx @@ -4,9 +4,8 @@ import React, { useEffect, useRef } from "react"; -export const EmbeddedMigrationWizard = ({ handleAction, content }) => { +export const EmbeddedMigrationWizard = ({ handleAction }) => { const ref = useRef(); - const options = content.migration_wizard_options; useEffect(() => { const handleBeginMigration = () => { handleAction({ @@ -33,29 +32,9 @@ export const EmbeddedMigrationWizard = ({ handleAction, content }) => { }, []); // eslint-disable-line react-hooks/exhaustive-deps return ( ); }; diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx index 90cf04c0c9b1c..fb9f734c94dec 100644 --- a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx +++ b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx @@ -311,10 +311,7 @@ export class ProtonScreen extends React.PureComponent { /> ) : null} {content.tiles && content.tiles.type === "migration-wizard" ? ( - + ) : null} ); @@ -545,12 +542,6 @@ export class ProtonScreen extends React.PureComponent { content.width && content.position !== "split" ? content.width : null, - paddingBlock: content.split_content_padding_block - ? content.split_content_padding_block - : null, - paddingInline: content.split_content_padding_inline - ? content.split_content_padding_inline - : null, }} > {content.logo ? this.renderPicture(content.logo) : null} diff --git a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js index f9e0f742295f4..0c2c2c1114e0c 100644 --- a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js +++ b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js @@ -1032,8 +1032,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom activeMultiSelect: this.props.activeMultiSelect, setActiveMultiSelect: this.props.setActiveMultiSelect }) : null, content.tiles && content.tiles.type === "migration-wizard" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_EmbeddedMigrationWizard__WEBPACK_IMPORTED_MODULE_12__.EmbeddedMigrationWizard, { - handleAction: this.props.handleAction, - content: content + handleAction: this.props.handleAction }) : null); } renderNoodles() { @@ -1200,9 +1199,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom className: `main-content ${hideStepsIndicator ? "no-steps" : ""}`, style: { background: content.background && isCenterPosition ? content.background : null, - width: content.width && content.position !== "split" ? content.width : null, - paddingBlock: content.split_content_padding_block ? content.split_content_padding_block : null, - paddingInline: content.split_content_padding_inline ? content.split_content_padding_inline : 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" @@ -2085,11 +2082,9 @@ __webpack_require__.r(__webpack_exports__); const EmbeddedMigrationWizard = ({ - handleAction, - content + handleAction }) => { const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(); - const options = content.migration_wizard_options; (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { const handleBeginMigration = () => { handleAction({ @@ -2117,25 +2112,9 @@ const EmbeddedMigrationWizard = ({ }; }, []); // eslint-disable-line react-hooks/exhaustive-deps return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("migration-wizard", { - "force-show-import-all": options?.force_show_import_all || "false", + "force-show-import-all": "false", "auto-request-state": "", - ref: ref, - "option-expander-title-string": options?.option_expander_title_string || "", - "hide-option-expander-subtitle": options?.hide_option_expander_subtitle || false, - "data-import-complete-success-string": options?.data_import_complete_success_string || "", - "selection-header-string": options?.selection_header_string || "", - "selection-subheader-string": options?.selection_subheader_string || "", - "hide-select-all": options?.hide_select_all || false, - "checkbox-margin-inline": options?.checkbox_margin_inline || "", - "checkbox-margin-block": options?.checkbox_margin_block || "", - "import-button-string": options?.import_button_string || "", - "import-button-class": options?.import_button_class || "", - "header-font-size": options?.header_font_size || "", - "header-font-weight": options?.header_font_weight || "", - "header-margin-block": options?.header_margin_block || "", - "subheader-font-size": options?.subheader_font_size || "", - "subheader-font-weight": options?.subheader_font_weight || "", - "subheader-margin-block": options?.subheader_margin_block || "" + ref: ref }); }; diff --git a/browser/components/migration/content/migration-wizard.mjs b/browser/components/migration/content/migration-wizard.mjs index 6fc7a715d7a20..017fa99956c34 100644 --- a/browser/components/migration/content/migration-wizard.mjs +++ b/browser/components/migration/content/migration-wizard.mjs @@ -38,7 +38,7 @@ export class MigrationWizard extends HTMLElement {
-

+

@@ -46,13 +46,12 @@ export class MigrationWizard extends HTMLElement { - +
-

- +

- +
@@ -583,18 +582,6 @@ export class MigrationWizard extends HTMLElement { "div[name='page-selection']" ); - if (this.hasAttribute("selection-header-string")) { - selectionPage.querySelector(".migration-wizard-header").textContent = - this.getAttribute("selection-header-string"); - } - - let selectionSubheaderString = this.getAttribute( - "selection-subheader-string" - ); - let subheader = selectionPage.querySelector(".migration-wizard-subheader"); - subheader.textContent = selectionSubheaderString; - subheader.toggleAttribute("hidden", !selectionSubheaderString); - let details = this.#shadowRoot.querySelector("details"); if (this.hasAttribute("force-show-import-all")) { @@ -609,8 +596,6 @@ export class MigrationWizard extends HTMLElement { this.#expandedDetails = false; - this.#applyContentCustomizations(); - for (let migrator of state.migrators) { let opt = document.createElement("panel-item"); opt.setAttribute("key", migrator.key); @@ -835,20 +820,16 @@ export class MigrationWizard extends HTMLElement { let migrationDone = remainingProgressGroups == 0; let headerL10nID = "migration-wizard-progress-header"; - let header = this.#shadowRoot.getElementById("progress-header"); if (migrationDone) { if (totalWarnings) { headerL10nID = "migration-wizard-progress-done-with-warnings-header"; - } else if (this.getAttribute("data-import-complete-success-string")) { - header.textContent = this.getAttribute( - "data-import-complete-success-string" - ); } else { headerL10nID = "migration-wizard-progress-done-header"; } } + let header = this.#shadowRoot.getElementById("progress-header"); document.l10n.setAttributes(header, headerL10nID); let finishButtons = progressPage.querySelectorAll(".finish-button"); @@ -1256,10 +1237,7 @@ export class MigrationWizard extends HTMLElement { let importButton = this.#shadowRoot.querySelector("#import"); importButton.disabled = checkedResources == 0; - if (this.hasAttribute("option-expander-title-string")) { - let optionString = this.getAttribute("option-expander-title-string"); - selectedDataHeader.textContent = optionString; - } else if (checkedResources == 0) { + if (checkedResources == 0) { document.l10n.setAttributes( selectedDataHeader, "migration-no-selected-data-label" @@ -1286,111 +1264,6 @@ export class MigrationWizard extends HTMLElement { ); } - /** - * Updates content and layout to apply changes that are - * informed through element attributes - */ - #applyContentCustomizations() { - let selectionPage = this.#shadowRoot.querySelector( - "div[name='page-selection']" - ); - if (this.hasAttribute("hide-select-all")) { - let hideSelectAll = this.getAttribute("hide-select-all"); - - selectionPage.toggleAttribute("hide-select-all", hideSelectAll); - } else { - selectionPage.removeAttribute("hide-select-all"); - } - - if (this.hasAttribute("import-button-string")) { - if (this.getAttribute("import-button-string")) { - this.#importButton.textContent = this.getAttribute( - "import-button-string" - ); - } - } - - if (this.hasAttribute("checkbox-margin-inline")) { - let inlineMargin = this.getAttribute("checkbox-margin-inline"); - this.style.setProperty( - "--resource-type-label-margin-inline", - inlineMargin - ); - } - - if (this.hasAttribute("checkbox-margin-block")) { - let blockMargin = this.getAttribute("checkbox-margin-block"); - this.style.setProperty("--resource-type-label-margin-block", blockMargin); - } - - if (this.hasAttribute("import-button-class")) { - let importButtonClass = this.getAttribute("import-button-class"); - if (importButtonClass) { - this.#importButton.classList.add(importButtonClass); - } - } - - if (this.hasAttribute("header-font-size")) { - let headerFontSize = this.getAttribute("header-font-size"); - if (headerFontSize) { - this.style.setProperty( - "--embedded-wizard-header-font-size", - headerFontSize - ); - } - } - - if (this.hasAttribute("header-font-weight")) { - let headerFontWeight = this.getAttribute("header-font-weight"); - if (headerFontWeight) { - this.style.setProperty( - "--embedded-wizard-header-font-weight", - headerFontWeight - ); - } - } - - if (this.hasAttribute("header-margin-block")) { - let headerMarginBlock = this.getAttribute("header-margin-block"); - if (headerMarginBlock) { - this.style.setProperty( - "--embedded-wizard-header-margin-block", - headerMarginBlock - ); - } - } - - if (this.hasAttribute("subheader-font-size")) { - let subheaderFontSize = this.getAttribute("subheader-font-size"); - if (subheaderFontSize) { - this.style.setProperty( - "--embedded-wizard-subheader-font-size", - subheaderFontSize - ); - } - } - - if (this.hasAttribute("subheader-font-weight")) { - let subheaderFontWeight = this.getAttribute("subheader-font-weight"); - if (subheaderFontWeight) { - this.style.setProperty( - "--embedded-wizard-subheader-font-weight", - subheaderFontWeight - ); - } - } - - if (this.hasAttribute("subheader-margin-block")) { - let subheaderMarginBlock = this.getAttribute("subheader-margin-block"); - if (subheaderMarginBlock) { - this.style.setProperty( - "--embedded-wizard-subheader-margin-block", - subheaderMarginBlock - ); - } - } - } - handleEvent(event) { switch (event.type) { case "click": { diff --git a/browser/components/migration/docs/migration-wizard.rst b/browser/components/migration/docs/migration-wizard.rst index c54d50515b002..320b429db5492 100644 --- a/browser/components/migration/docs/migration-wizard.rst +++ b/browser/components/migration/docs/migration-wizard.rst @@ -28,23 +28,6 @@ After binding to the document, if the ``MigrationWizard`` has the ``auto-request If the ``auto-request-state`` attribute is not set, calling ``requestState()`` on the ``MigrationWizard`` will perform the above step. This is useful in situations where the ``MigrationWizard`` element is being constructed dynamically and the callers wants finer-grain control over when the state will be requested. -There are also a handful of attributes that can be set to customize the experience that the ``MigrationWizard`` provides. -* ``option-expander-title-string``: The string of the label that is displayed next to the button that expands or hides the resource list on the selection page will be overwritten with the value of this attribute, if it is set. -* ``hide-option-expander-subtitle``: When set to true, this attribute hides the subtitle that is displayed underneath the resource list expander. -* ``import-button-string``: The string on the primary action button on the selection page is overridden with the value of this attribute when set. -* ``import-button-class``: When set, the value of this attribute will be added to the class list on the primary action button on the selection page. -* ``checkbox-margin-inline``: When set, the value of this attribute will be used to override the ``margin-inline`` of the labels in the resource list on the selection page. -* ``checkbox-margin-block``: When set, the value of this attribute will be used to override the ``margin-block`` of the labels in the resource list on the selection page. -* ``selection-header-string``: When set, overrides the text content of the header on the selection page with the set string. -* ``selection-subheader-string``: When set, presents a subheader on the selection page with the set string. -* ``data-import-complete-success-string``: When set, this attribute will be used to override the text content of the header of the import complete screen when the import was successful. -* ``header-font-size``: Overrides the default ``font-size`` of all headers with the value of this string. -* ``header-font-weight``: Overrides the default ``font-weight`` of all headers with the value of this string. -* ``header-margin-block``: Overrides the default ``margin-block`` of all headers with the value of this string. -* ``subheader-font-size``: When used with ``selection-subheader-string``, overrides the default ``font-size`` of the selection page subheader with the value in this string. This has no effect when used alone. -* ``subheader-font-weight``: When used with ``selection-subheader-string``, overrides the default ``font-weight`` of the selection page subheader with the value in this string. This has no effect when used alone. -* ``subheader-margin-block``: When used with ``selection-subheader-string``, overrides the default ``margin-block`` of the selection page subheader with the value in this string. This has no effect when used alone. - Notably, the ``MigrationWizard`` does not contain any internal logic or privileged code to perform any migrations or to directly interact with the migration mechanisms. Its sole function is to accept input from the user and emit that input as events. The associated ``MigrationWizardChild`` will listen for those events, and take care of calling into the ``MigrationWizard`` to update the state of the reusable component. This means that the reusable component can be embedded in unprivileged contexts and have its states presented in a tool like Storybook. If the ``MigrationWizard`` is embedded in a dialog, it should have the ``dialog-mode`` attribute set on it so that dialog-appropriate buttons and styles are applied. diff --git a/browser/components/migration/tests/chrome/test_migration_wizard.html b/browser/components/migration/tests/chrome/test_migration_wizard.html index cc2d8a036347f..9e235edf34c1d 100644 --- a/browser/components/migration/tests/chrome/test_migration_wizard.html +++ b/browser/components/migration/tests/chrome/test_migration_wizard.html @@ -1533,248 +1533,6 @@ let getPermissionButton = gShadowRoot.querySelector("#get-permissions"); ok(isHidden(getPermissionButton), "Get permissions button hiddne."); }); - - add_task(async function hide_option_expander_subtitle() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - gWiz.setAttribute("hide-option-expander-subtitle", "true"); - let subtitle = selectionPage.querySelector("#resource-selection-summary > .selected-data"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - ok(gWiz.hasAttribute("hide-option-expander-subtitle"), "hide option expander subtitle attribute is present on migration wizard"); - - ok(isHidden(subtitle), "subtitle is hidden"); - - gWiz.removeAttribute("hide-option-expander-subtitle"); - }); - - add_task(async function update_option_expander_title_string() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - - let title = selectionPage.querySelector(".selected-data-header"); - gWiz.setAttribute("option-expander-title-string", "test"); - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - await BrowserTestUtils.waitForMutationCondition( - title, - {childList: true}, - () => title.textContent == "test" - ) - is(title.textContent, "test", "resource selection expander subtitle has been changed"); - - gWiz.removeAttribute("option-expander-title-string"); - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - await BrowserTestUtils.waitForMutationCondition( - title, - {childList: true}, - () => title.textContent != "test" - ) - isnot(title.textContent, "test", "resource selection expander subtitle was reverted"); - }); - - add_task(async function hide_select_all_checkbox() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - - let selectAll = selectionPage.querySelector("#select-all"); - gWiz.setAttribute("hide-select-all", true); - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - ok(isHidden(selectAll), "select all is not displayed"); - - gWiz.removeAttribute("hide-select-all"); - }); - - add_task(async function update_import_button_string() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - gWiz.setAttribute("import-button-string", "test"); - let button = selectionPage.querySelector(".migration-import-button"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - is(button.textContent, "test", "button text is expected"); - - gWiz.removeAttribute("import-button-string"); - }); - - add_task(async function update_checkbox_margins() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - - gWiz.setAttribute("checkbox-margin-inline", "27px 42px"); - gWiz.setAttribute("checkbox-margin-block", "42px 27px"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - let checkboxLabels = selectionPage.querySelectorAll(".resource-type-label"); - for(let label of checkboxLabels) { - let computedStyle = getComputedStyle(label); - let marginInline = computedStyle.getPropertyValue("margin-inline"); - let marginBlock = computedStyle.getPropertyValue("margin-block"); - is(marginInline, "27px 42px", "margin inline is set to expected value"); - is(marginBlock, "42px 27px", "margin block is set to expected value"); - } - - gWiz.removeAttribute("checkbox-margin-inline"); - gWiz.removeAttribute("checkbox-margin-block"); - }); - - add_task(async function update_import_button_class() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - let importButton = selectionPage.querySelector("#import"); - - gWiz.setAttribute("import-button-class", "primary"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - ok(importButton.classList.contains("primary"), "import button has the primary class"); - - gWiz.removeAttribute("import-button-class"); - }); - - add_task(async function update_header_font_size() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - let header = selectionPage.querySelector("h1"); - - gWiz.setAttribute("header-font-size", "24px"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - let computedStyle = getComputedStyle(header); - - is(computedStyle.getPropertyValue("font-size"), "24px", "header font size is changed to correct value"); - gWiz.removeAttribute("header-font-size"); - }); - - add_task(async function update_header_margin_block() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - let header = selectionPage.querySelector("h1"); - - gWiz.setAttribute("header-margin-block", "20px 30px"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - let computedStyle = getComputedStyle(header); - - is(computedStyle.getPropertyValue("margin-block"), "20px 30px", "header margin block is changed to correct value"); - gWiz.removeAttribute("header-margin-block"); - }); - - add_task(async function update_header_string() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - let header = selectionPage.querySelector("h1"); - - gWiz.setAttribute("selection-header-string", "test string"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - is(header.textContent, "test string", "header text content is changed to correct value"); - gWiz.removeAttribute("selection-header-string"); - }); - - add_task(async function update_subheader_font_size() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - let subheader = selectionPage.querySelector("h1"); - - gWiz.setAttribute("subheader-font-size", "24px"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - let computedStyle = getComputedStyle(subheader); - - is(computedStyle.getPropertyValue("font-size"), "24px", "subheader font size is changed to correct value"); - gWiz.removeAttribute("subheader-font-size"); - }); - - add_task(async function update_subheader_margin_block() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - let subheader = selectionPage.querySelector("h1"); - - gWiz.setAttribute("subheader-margin-block", "20px 30px"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - let computedStyle = getComputedStyle(subheader); - - is(computedStyle.getPropertyValue("margin-block"), "20px 30px", "subheader margin block is changed to correct value"); - gWiz.removeAttribute("subheader-margin-block"); - }); - - add_task(async function update_subheader_string() { - let selectionPage = gShadowRoot.querySelector("div[name='page-selection']"); - let subheader = selectionPage.querySelector(".migration-wizard-subheader"); - - gWiz.setAttribute("selection-subheader-string", "test string"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - is(subheader.textContent, "test string", "subheader text content is changed to correct value"); - - gWiz.removeAttribute("selection-subheader-string"); - gWiz.setState({ - page: MigrationWizardConstants.PAGES.SELECTION, - migrators: MIGRATOR_PROFILE_INSTANCES, - }); - - ok(isHidden(subheader), "subheader is hidden") - }); - - add_task(async function update_data_import_success_string() { - let progressPage = gShadowRoot.querySelector("div[name='page-progress']"); - let header = progressPage.querySelector("h1"); - - gWiz.setAttribute("data-import-complete-success-string", "test string"); - - gWiz.setState({ - page: MigrationWizardConstants.PAGES.PROGRESS, - key: "chrome", - progress: { - [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.EXTENSIONS]: { - value: MigrationWizardConstants.PROGRESS_VALUE.SUCCESS, - }, - [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.FORMDATA]: { - value: MigrationWizardConstants.PROGRESS_VALUE.SUCCESS, - }, - }, - }); - - is(header.textContent, "test string", "import success header text content is changed to correct value"); - gWiz.removeAttribute("data-import-complete-success-string"); - }); diff --git a/browser/components/storybook/stories/migration-wizard.stories.mjs b/browser/components/storybook/stories/migration-wizard.stories.mjs index 53d4698a7a54c..64ce519a667d5 100644 --- a/browser/components/storybook/stories/migration-wizard.stories.mjs +++ b/browser/components/storybook/stories/migration-wizard.stories.mjs @@ -172,27 +172,7 @@ const FAKE_MIGRATOR_LIST = [ }, ]; -const Template = ({ - state, - dialogMode, - forceShowImportAll, - hideOptionExpanderSubtitle, - optionExpanderTitleString, - hideSelectAll, - importButtonString, - checkboxMarginInline, - checkboxMarginBlock, - importButtonClass, - selectionHeaderString, - selectionSubheaderString, - dataImportCompleteSuccessString, - headerFontSize, - headerMarginBlock, - headerFontWeight, - subheaderFontSize, - subheaderMarginBlock, - subheaderFontWeight, -}) => html` +const Template = ({ state, dialogMode }) => html`