Skip to content

Commit 175299c

Browse files
jwaynjwayn
committed
Bug 1876176 - Update migration wizard to support future experiments r=omc-reviewers,desktop-theme-reviewers,mconley,migration-reviewers,aminomancer,Itiel
Differential Revision: https://phabricator.services.mozilla.com/D201142
1 parent d3f16a0 commit 175299c

File tree

8 files changed

+547
-26
lines changed

8 files changed

+547
-26
lines changed

‎browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44

55
import React, { useEffect, useRef } from "react";
66

7-
export const EmbeddedMigrationWizard = ({ handleAction }) => {
7+
export const EmbeddedMigrationWizard = ({ handleAction, content }) => {
88
const ref = useRef();
9+
const options = content.migration_wizard_options;
910
useEffect(() => {
1011
const handleBeginMigration = () => {
1112
handleAction({
@@ -32,9 +33,29 @@ export const EmbeddedMigrationWizard = ({ handleAction }) => {
3233
}, []); // eslint-disable-line react-hooks/exhaustive-deps
3334
return (
3435
<migration-wizard
35-
force-show-import-all="false"
36+
force-show-import-all={options?.force_show_import_all || "false"}
3637
auto-request-state=""
3738
ref={ref}
39+
option-expander-title-string={options?.option_expander_title_string || ""}
40+
hide-option-expander-subtitle={
41+
options?.hide_option_expander_subtitle || false
42+
}
43+
data-import-complete-success-string={
44+
options?.data_import_complete_success_string || ""
45+
}
46+
selection-header-string={options?.selection_header_string || ""}
47+
selection-subheader-string={options?.selection_subheader_string || ""}
48+
hide-select-all={options?.hide_select_all || false}
49+
checkbox-margin-inline={options?.checkbox_margin_inline || ""}
50+
checkbox-margin-block={options?.checkbox_margin_block || ""}
51+
import-button-string={options?.import_button_string || ""}
52+
import-button-class={options?.import_button_class || ""}
53+
header-font-size={options?.header_font_size || ""}
54+
header-font-weight={options?.header_font_weight || ""}
55+
header-margin-block={options?.header_margin_block || ""}
56+
subheader-font-size={options?.subheader_font_size || ""}
57+
subheader-font-weight={options?.subheader_font_weight || ""}
58+
subheader-margin-block={options?.subheader_margin_block || ""}
3859
></migration-wizard>
3960
);
4061
};

‎browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,10 @@ export class ProtonScreen extends React.PureComponent {
311311
/>
312312
) : null}
313313
{content.tiles && content.tiles.type === "migration-wizard" ? (
314-
<EmbeddedMigrationWizard handleAction={this.props.handleAction} />
314+
<EmbeddedMigrationWizard
315+
handleAction={this.props.handleAction}
316+
content={content}
317+
/>
315318
) : null}
316319
</React.Fragment>
317320
);
@@ -542,6 +545,12 @@ export class ProtonScreen extends React.PureComponent {
542545
content.width && content.position !== "split"
543546
? content.width
544547
: null,
548+
paddingBlock: content.split_content_padding_block
549+
? content.split_content_padding_block
550+
: null,
551+
paddingInline: content.split_content_padding_inline
552+
? content.split_content_padding_inline
553+
: null,
545554
}}
546555
>
547556
{content.logo ? this.renderPicture(content.logo) : null}

‎browser/components/aboutwelcome/content/aboutwelcome.bundle.js‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1032,7 +1032,8 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
10321032
activeMultiSelect: this.props.activeMultiSelect,
10331033
setActiveMultiSelect: this.props.setActiveMultiSelect
10341034
}) : null, content.tiles && content.tiles.type === "migration-wizard" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_EmbeddedMigrationWizard__WEBPACK_IMPORTED_MODULE_12__.EmbeddedMigrationWizard, {
1035-
handleAction: this.props.handleAction
1035+
handleAction: this.props.handleAction,
1036+
content: content
10361037
}) : null);
10371038
}
10381039
renderNoodles() {
@@ -1199,7 +1200,9 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
11991200
className: `main-content ${hideStepsIndicator ? "no-steps" : ""}`,
12001201
style: {
12011202
background: content.background && isCenterPosition ? content.background : null,
1202-
width: content.width && content.position !== "split" ? content.width : null
1203+
width: content.width && content.position !== "split" ? content.width : null,
1204+
paddingBlock: content.split_content_padding_block ? content.split_content_padding_block : null,
1205+
paddingInline: content.split_content_padding_inline ? content.split_content_padding_inline : null
12031206
}
12041207
}, content.logo ? this.renderPicture(content.logo) : null, isRtamo ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
12051208
className: "rtamo-icon"
@@ -2082,9 +2085,11 @@ __webpack_require__.r(__webpack_exports__);
20822085

20832086

20842087
const EmbeddedMigrationWizard = ({
2085-
handleAction
2088+
handleAction,
2089+
content
20862090
}) => {
20872091
const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
2092+
const options = content.migration_wizard_options;
20882093
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
20892094
const handleBeginMigration = () => {
20902095
handleAction({
@@ -2112,9 +2117,25 @@ const EmbeddedMigrationWizard = ({
21122117
};
21132118
}, []); // eslint-disable-line react-hooks/exhaustive-deps
21142119
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("migration-wizard", {
2115-
"force-show-import-all": "false",
2120+
"force-show-import-all": options?.force_show_import_all || "false",
21162121
"auto-request-state": "",
2117-
ref: ref
2122+
ref: ref,
2123+
"option-expander-title-string": options?.option_expander_title_string || "",
2124+
"hide-option-expander-subtitle": options?.hide_option_expander_subtitle || false,
2125+
"data-import-complete-success-string": options?.data_import_complete_success_string || "",
2126+
"selection-header-string": options?.selection_header_string || "",
2127+
"selection-subheader-string": options?.selection_subheader_string || "",
2128+
"hide-select-all": options?.hide_select_all || false,
2129+
"checkbox-margin-inline": options?.checkbox_margin_inline || "",
2130+
"checkbox-margin-block": options?.checkbox_margin_block || "",
2131+
"import-button-string": options?.import_button_string || "",
2132+
"import-button-class": options?.import_button_class || "",
2133+
"header-font-size": options?.header_font_size || "",
2134+
"header-font-weight": options?.header_font_weight || "",
2135+
"header-margin-block": options?.header_margin_block || "",
2136+
"subheader-font-size": options?.subheader_font_size || "",
2137+
"subheader-font-weight": options?.subheader_font_weight || "",
2138+
"subheader-margin-block": options?.subheader_margin_block || ""
21182139
});
21192140
};
21202141

‎browser/components/migration/content/migration-wizard.mjs‎

Lines changed: 139 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,21 @@ export class MigrationWizard extends HTMLElement {
3838
<link rel="stylesheet" href="chrome://browser/skin/migration/migration-wizard.css">
3939
<named-deck id="wizard-deck" selected-view="page-loading" aria-busy="true" part="deck">
4040
<div name="page-loading">
41-
<h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1>
41+
<h1 class="migration-wizard-header" data-l10n-id="migration-wizard-selection-header" part="header"></h1>
4242
<div class="loading-block large"></div>
4343
<div class="loading-block small"></div>
4444
<div class="loading-block small"></div>
4545
<moz-button-group class="buttons" part="buttons">
4646
<!-- If possible, use the same button labels as the SELECTION page with the same strings.
4747
That'll prevent flicker when the load state exits if we then enter the SELECTION page. -->
4848
<button class="cancel-close" data-l10n-id="migration-cancel-button-label" disabled></button>
49-
<button data-l10n-id="migration-import-button-label" disabled></button>
49+
<button class="migration-import-button" data-l10n-id="migration-import-button-label" disabled></button>
5050
</moz-button-group>
5151
</div>
5252
5353
<div name="page-selection">
54-
<h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1>
54+
<h1 class="migration-wizard-header" data-l10n-id="migration-wizard-selection-header" part="header"></h1>
55+
<p class="migration-wizard-subheader" part="subheader" hidden=""></p>
5556
<button id="browser-profile-selector" aria-haspopup="menu" aria-labelledby="migrator-name profile-name">
5657
<span class="migrator-icon" role="img"></span>
5758
<div class="migrator-description" role="presentation">
@@ -89,22 +90,22 @@ export class MigrationWizard extends HTMLElement {
8990
<label id="select-all">
9091
<input type="checkbox" class="select-all-checkbox"/><span data-l10n-id="migration-select-all-option-label"></span>
9192
</label>
92-
<label id="bookmarks" data-resource-type="BOOKMARKS"/>
93+
<label id="bookmarks" class="resource-type-label" data-resource-type="BOOKMARKS"/>
9394
<input type="checkbox"/><span default-data-l10n-id="migration-bookmarks-option-label" ie-edge-data-l10n-id="migration-favorites-option-label"></span>
9495
</label>
95-
<label id="logins-and-passwords" data-resource-type="PASSWORDS">
96+
<label id="logins-and-passwords" class="resource-type-label" data-resource-type="PASSWORDS">
9697
<input type="checkbox"/><span data-l10n-id="migration-passwords-option-label"></span>
9798
</label>
98-
<label id="history" data-resource-type="HISTORY">
99+
<label id="history" class="resource-type-label" data-resource-type="HISTORY">
99100
<input type="checkbox"/><span data-l10n-id="migration-history-option-label"></span>
100101
</label>
101-
<label id="extensions" data-resource-type="EXTENSIONS">
102+
<label id="extensions" class="resource-type-label" data-resource-type="EXTENSIONS">
102103
<input type="checkbox"/><span data-l10n-id="migration-extensions-option-label"></span>
103104
</label>
104-
<label id="form-autofill" data-resource-type="FORMDATA">
105+
<label id="form-autofill" class="resource-type-label" data-resource-type="FORMDATA">
105106
<input type="checkbox"/><span data-l10n-id="migration-form-autofill-option-label"></span>
106107
</label>
107-
<label id="payment-methods" data-resource-type="PAYMENT_METHODS">
108+
<label id="payment-methods" class="resource-type-label" data-resource-type="PAYMENT_METHODS">
108109
<input type="checkbox"/><span data-l10n-id="migration-payment-methods-option-label"></span>
109110
</label>
110111
</fieldset>
@@ -118,7 +119,7 @@ export class MigrationWizard extends HTMLElement {
118119
<moz-button-group class="buttons" part="buttons">
119120
<button class="cancel-close" data-l10n-id="migration-cancel-button-label"></button>
120121
<button id="import-from-file" class="primary" data-l10n-id="migration-import-from-file-button-label"></button>
121-
<button id="import" class="primary" data-l10n-id="migration-import-button-label"></button>
122+
<button id="import" class="primary migration-import-button" data-l10n-id="migration-import-button-label"></button>
122123
<button id="get-permissions" class="primary" data-l10n-id="migration-continue-button-label"></button>
123124
</moz-button-group>
124125
</div>
@@ -582,6 +583,18 @@ export class MigrationWizard extends HTMLElement {
582583
"div[name='page-selection']"
583584
);
584585

586+
if (this.hasAttribute("selection-header-string")) {
587+
selectionPage.querySelector(".migration-wizard-header").textContent =
588+
this.getAttribute("selection-header-string");
589+
}
590+
591+
let selectionSubheaderString = this.getAttribute(
592+
"selection-subheader-string"
593+
);
594+
let subheader = selectionPage.querySelector(".migration-wizard-subheader");
595+
subheader.textContent = selectionSubheaderString;
596+
subheader.toggleAttribute("hidden", !selectionSubheaderString);
597+
585598
let details = this.#shadowRoot.querySelector("details");
586599

587600
if (this.hasAttribute("force-show-import-all")) {
@@ -596,6 +609,8 @@ export class MigrationWizard extends HTMLElement {
596609

597610
this.#expandedDetails = false;
598611

612+
this.#applyContentCustomizations();
613+
599614
for (let migrator of state.migrators) {
600615
let opt = document.createElement("panel-item");
601616
opt.setAttribute("key", migrator.key);
@@ -820,16 +835,20 @@ export class MigrationWizard extends HTMLElement {
820835

821836
let migrationDone = remainingProgressGroups == 0;
822837
let headerL10nID = "migration-wizard-progress-header";
838+
let header = this.#shadowRoot.getElementById("progress-header");
823839

824840
if (migrationDone) {
825841
if (totalWarnings) {
826842
headerL10nID = "migration-wizard-progress-done-with-warnings-header";
843+
} else if (this.getAttribute("data-import-complete-success-string")) {
844+
header.textContent = this.getAttribute(
845+
"data-import-complete-success-string"
846+
);
827847
} else {
828848
headerL10nID = "migration-wizard-progress-done-header";
829849
}
830850
}
831851

832-
let header = this.#shadowRoot.getElementById("progress-header");
833852
document.l10n.setAttributes(header, headerL10nID);
834853

835854
let finishButtons = progressPage.querySelectorAll(".finish-button");
@@ -1237,7 +1256,10 @@ export class MigrationWizard extends HTMLElement {
12371256
let importButton = this.#shadowRoot.querySelector("#import");
12381257
importButton.disabled = checkedResources == 0;
12391258

1240-
if (checkedResources == 0) {
1259+
if (this.hasAttribute("option-expander-title-string")) {
1260+
let optionString = this.getAttribute("option-expander-title-string");
1261+
selectedDataHeader.textContent = optionString;
1262+
} else if (checkedResources == 0) {
12411263
document.l10n.setAttributes(
12421264
selectedDataHeader,
12431265
"migration-no-selected-data-label"
@@ -1264,6 +1286,111 @@ export class MigrationWizard extends HTMLElement {
12641286
);
12651287
}
12661288

1289+
/**
1290+
* Updates content and layout to apply changes that are
1291+
* informed through element attributes
1292+
*/
1293+
#applyContentCustomizations() {
1294+
let selectionPage = this.#shadowRoot.querySelector(
1295+
"div[name='page-selection']"
1296+
);
1297+
if (this.hasAttribute("hide-select-all")) {
1298+
let hideSelectAll = this.getAttribute("hide-select-all");
1299+
1300+
selectionPage.toggleAttribute("hide-select-all", hideSelectAll);
1301+
} else {
1302+
selectionPage.removeAttribute("hide-select-all");
1303+
}
1304+
1305+
if (this.hasAttribute("import-button-string")) {
1306+
if (this.getAttribute("import-button-string")) {
1307+
this.#importButton.textContent = this.getAttribute(
1308+
"import-button-string"
1309+
);
1310+
}
1311+
}
1312+
1313+
if (this.hasAttribute("checkbox-margin-inline")) {
1314+
let inlineMargin = this.getAttribute("checkbox-margin-inline");
1315+
this.style.setProperty(
1316+
"--resource-type-label-margin-inline",
1317+
inlineMargin
1318+
);
1319+
}
1320+
1321+
if (this.hasAttribute("checkbox-margin-block")) {
1322+
let blockMargin = this.getAttribute("checkbox-margin-block");
1323+
this.style.setProperty("--resource-type-label-margin-block", blockMargin);
1324+
}
1325+
1326+
if (this.hasAttribute("import-button-class")) {
1327+
let importButtonClass = this.getAttribute("import-button-class");
1328+
if (importButtonClass) {
1329+
this.#importButton.classList.add(importButtonClass);
1330+
}
1331+
}
1332+
1333+
if (this.hasAttribute("header-font-size")) {
1334+
let headerFontSize = this.getAttribute("header-font-size");
1335+
if (headerFontSize) {
1336+
this.style.setProperty(
1337+
"--embedded-wizard-header-font-size",
1338+
headerFontSize
1339+
);
1340+
}
1341+
}
1342+
1343+
if (this.hasAttribute("header-font-weight")) {
1344+
let headerFontWeight = this.getAttribute("header-font-weight");
1345+
if (headerFontWeight) {
1346+
this.style.setProperty(
1347+
"--embedded-wizard-header-font-weight",
1348+
headerFontWeight
1349+
);
1350+
}
1351+
}
1352+
1353+
if (this.hasAttribute("header-margin-block")) {
1354+
let headerMarginBlock = this.getAttribute("header-margin-block");
1355+
if (headerMarginBlock) {
1356+
this.style.setProperty(
1357+
"--embedded-wizard-header-margin-block",
1358+
headerMarginBlock
1359+
);
1360+
}
1361+
}
1362+
1363+
if (this.hasAttribute("subheader-font-size")) {
1364+
let subheaderFontSize = this.getAttribute("subheader-font-size");
1365+
if (subheaderFontSize) {
1366+
this.style.setProperty(
1367+
"--embedded-wizard-subheader-font-size",
1368+
subheaderFontSize
1369+
);
1370+
}
1371+
}
1372+
1373+
if (this.hasAttribute("subheader-font-weight")) {
1374+
let subheaderFontWeight = this.getAttribute("subheader-font-weight");
1375+
if (subheaderFontWeight) {
1376+
this.style.setProperty(
1377+
"--embedded-wizard-subheader-font-weight",
1378+
subheaderFontWeight
1379+
);
1380+
}
1381+
}
1382+
1383+
if (this.hasAttribute("subheader-margin-block")) {
1384+
let subheaderMarginBlock = this.getAttribute("subheader-margin-block");
1385+
if (subheaderMarginBlock) {
1386+
this.style.setProperty(
1387+
"--embedded-wizard-subheader-margin-block",
1388+
subheaderMarginBlock
1389+
);
1390+
}
1391+
}
1392+
}
1393+
12671394
handleEvent(event) {
12681395
switch (event.type) {
12691396
case "click": {

0 commit comments

Comments
 (0)