diff options
Diffstat (limited to 'browser/components/migration/content/migration-wizard.mjs')
| -rw-r--r-- | browser/components/migration/content/migration-wizard.mjs | 155 |
1 files changed, 143 insertions, 12 deletions
diff --git a/browser/components/migration/content/migration-wizard.mjs b/browser/components/migration/content/migration-wizard.mjs index 7643e4bce3..6fc7a715d7 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 { <link rel="stylesheet" href="chrome://browser/skin/migration/migration-wizard.css"> <named-deck id="wizard-deck" selected-view="page-loading" aria-busy="true" part="deck"> <div name="page-loading"> - <h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1> + <h1 class="migration-wizard-header" data-l10n-id="migration-wizard-selection-header" part="header"></h1> <div class="loading-block large"></div> <div class="loading-block small"></div> <div class="loading-block small"></div> @@ -46,12 +46,13 @@ export class MigrationWizard extends HTMLElement { <!-- If possible, use the same button labels as the SELECTION page with the same strings. That'll prevent flicker when the load state exits if we then enter the SELECTION page. --> <button class="cancel-close" data-l10n-id="migration-cancel-button-label" disabled></button> - <button data-l10n-id="migration-import-button-label" disabled></button> + <button class="migration-import-button" data-l10n-id="migration-import-button-label" disabled></button> </moz-button-group> </div> <div name="page-selection"> - <h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1> + <h1 class="migration-wizard-header" data-l10n-id="migration-wizard-selection-header" part="header"></h1> + <p class="migration-wizard-subheader" part="subheader" hidden=""></p> <button id="browser-profile-selector" aria-haspopup="menu" aria-labelledby="migrator-name profile-name"> <span class="migrator-icon" role="img"></span> <div class="migrator-description" role="presentation"> @@ -89,22 +90,22 @@ export class MigrationWizard extends HTMLElement { <label id="select-all"> <input type="checkbox" class="select-all-checkbox"/><span data-l10n-id="migration-select-all-option-label"></span> </label> - <label id="bookmarks" data-resource-type="BOOKMARKS"/> + <label id="bookmarks" class="resource-type-label" data-resource-type="BOOKMARKS"/> <input type="checkbox"/><span default-data-l10n-id="migration-bookmarks-option-label" ie-edge-data-l10n-id="migration-favorites-option-label"></span> </label> - <label id="logins-and-passwords" data-resource-type="PASSWORDS"> + <label id="logins-and-passwords" class="resource-type-label" data-resource-type="PASSWORDS"> <input type="checkbox"/><span data-l10n-id="migration-passwords-option-label"></span> </label> - <label id="history" data-resource-type="HISTORY"> + <label id="history" class="resource-type-label" data-resource-type="HISTORY"> <input type="checkbox"/><span data-l10n-id="migration-history-option-label"></span> </label> - <label id="extensions" data-resource-type="EXTENSIONS"> + <label id="extensions" class="resource-type-label" data-resource-type="EXTENSIONS"> <input type="checkbox"/><span data-l10n-id="migration-extensions-option-label"></span> </label> - <label id="form-autofill" data-resource-type="FORMDATA"> + <label id="form-autofill" class="resource-type-label" data-resource-type="FORMDATA"> <input type="checkbox"/><span data-l10n-id="migration-form-autofill-option-label"></span> </label> - <label id="payment-methods" data-resource-type="PAYMENT_METHODS"> + <label id="payment-methods" class="resource-type-label" data-resource-type="PAYMENT_METHODS"> <input type="checkbox"/><span data-l10n-id="migration-payment-methods-option-label"></span> </label> </fieldset> @@ -118,7 +119,7 @@ export class MigrationWizard extends HTMLElement { <moz-button-group class="buttons" part="buttons"> <button class="cancel-close" data-l10n-id="migration-cancel-button-label"></button> <button id="import-from-file" class="primary" data-l10n-id="migration-import-from-file-button-label"></button> - <button id="import" class="primary" data-l10n-id="migration-import-button-label"></button> + <button id="import" class="primary migration-import-button" data-l10n-id="migration-import-button-label"></button> <button id="get-permissions" class="primary" data-l10n-id="migration-continue-button-label"></button> </moz-button-group> </div> @@ -582,6 +583,18 @@ 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")) { @@ -596,6 +609,8 @@ 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); @@ -772,6 +787,7 @@ export class MigrationWizard extends HTMLElement { MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.EXTENSIONS ) { messageText.textContent = ""; + this.#extensionsSuccessLink.target = "_blank"; this.#extensionsSuccessLink.textContent = state.progress[resourceType].message; } @@ -787,6 +803,7 @@ export class MigrationWizard extends HTMLElement { messageText.textContent = state.progress[resourceType].message; supportLink.textContent = state.progress[resourceType].linkText; supportLink.href = state.progress[resourceType].linkURL; + supportLink.target = "_blank"; remainingProgressGroups--; totalWarnings++; break; @@ -800,11 +817,13 @@ export class MigrationWizard extends HTMLElement { messageText.textContent = state.progress[resourceType].message; supportLink.textContent = state.progress[resourceType].linkText; supportLink.href = state.progress[resourceType].linkURL; + supportLink.target = "_blank"; if ( resourceType == MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.EXTENSIONS ) { messageText.textContent = ""; + this.#extensionsSuccessLink.target = "_blank"; this.#extensionsSuccessLink.textContent = state.progress[resourceType].message; } @@ -816,16 +835,20 @@ 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"); @@ -1233,7 +1256,10 @@ export class MigrationWizard extends HTMLElement { let importButton = this.#shadowRoot.querySelector("#import"); importButton.disabled = checkedResources == 0; - if (checkedResources == 0) { + if (this.hasAttribute("option-expander-title-string")) { + let optionString = this.getAttribute("option-expander-title-string"); + selectedDataHeader.textContent = optionString; + } else if (checkedResources == 0) { document.l10n.setAttributes( selectedDataHeader, "migration-no-selected-data-label" @@ -1260,6 +1286,111 @@ 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": { |