corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1893299 - build confirmation dialog for turning off scheduled backups. r=backup-reviewers,fluent-reviewers,desktop-theme-reviewers,firefox-desktop-core-reviewers ,bolsson,dao

Browse Source 
Patch by kpatenio <kpatenio@mozilla.com>.

Differential Revision: https://phabricator.services.mozilla.com/D210753
This commit is contained in:
kpatenio
2024-06-12 17:36:52 +00:00
parent 59079dfd51
commit 256fc8f6ff
18 changed files with 408 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/components/backup/content/backup-settings.css
View File

@@ -5,3 +5,7 @@
#turn-on-scheduled-backups-dialog {
width: 27.8rem;
}
#turn-off-scheduled-backups-dialog {
width: 23.94rem;
}

48
browser/components/backup/content/backup-settings.mjs
View File

@@ -7,6 +7,8 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://browser/content/backup/turn-on-scheduled-backups.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://browser/content/backup/turn-off-scheduled-backups.mjs";
/**
* The widget for managing the BackupService that is embedded within the main
@@ -22,6 +24,8 @@ export default class BackupSettings extends MozLitElement {
scheduledBackupsButtonEl: "#backup-toggle-scheduled-button",
turnOnScheduledBackupsDialogEl: "#turn-on-scheduled-backups-dialog",
turnOnScheduledBackupsEl: "turn-on-scheduled-backups",
turnOffScheduledBackupsEl: "turn-off-scheduled-backups",
turnOffScheduledBackupsDialogEl: "#turn-off-scheduled-backups-dialog",
};
}
@@ -48,23 +52,43 @@ export default class BackupSettings extends MozLitElement {
new CustomEvent("BackupUI:InitWidget", { bubbles: true })
);
this.addEventListener("scheduledBackupsCancel", this);
this.addEventListener("scheduledBackupsConfirm", this);
this.addEventListener("turnOnScheduledBackups", this);
this.addEventListener("turnOffScheduledBackups", this);
this.addEventListener("dialogCancel", this);
}
handleEvent(event) {
switch (event.type) {
case "scheduledBackupsConfirm":
case "turnOnScheduledBackups":
this.turnOnScheduledBackupsDialogEl.close();
this.dispatchEvent(
new CustomEvent("BackupUI:ScheduledBackupsConfirm", {
new CustomEvent("BackupUI:ToggleScheduledBackups", {
bubbles: true,
composed: true,
detail: {
isScheduledBackupsEnabled: true,
},
})
);
break;
case "scheduledBackupsCancel":
this.turnOnScheduledBackupsDialogEl.close();
case "turnOffScheduledBackups":
this.turnOffScheduledBackupsDialogEl.close();
this.dispatchEvent(
new CustomEvent("BackupUI:ToggleScheduledBackups", {
bubbles: true,
composed: true,
detail: {
isScheduledBackupsEnabled: false,
},
})
);
break;
case "dialogCancel":
if (this.turnOnScheduledBackupsDialogEl.open) {
this.turnOnScheduledBackupsDialogEl.close();
} else {
this.turnOffScheduledBackupsDialogEl.close();
}
break;
}
}
@@ -75,6 +99,11 @@ export default class BackupSettings extends MozLitElement {
this.turnOnScheduledBackupsDialogEl
) {
this.turnOnScheduledBackupsDialogEl.showModal();
} else if (
this.backupServiceState.scheduledBackupsEnabled &&
this.turnOffScheduledBackupsDialogEl
) {
this.turnOffScheduledBackupsDialogEl.showModal();
}
}
@@ -86,6 +115,12 @@ export default class BackupSettings extends MozLitElement {
</dialog>`;
}
turnOffScheduledBackupsDialogTemplate() {
return html`<dialog id="turn-off-scheduled-backups-dialog">
<turn-off-scheduled-backups></turn-off-scheduled-backups>
</dialog>`;
}
render() {
return html`<link
rel="stylesheet"
@@ -102,6 +137,7 @@ export default class BackupSettings extends MozLitElement {
</div>
${this.turnOnScheduledBackupsDialogTemplate()}
${this.turnOffScheduledBackupsDialogTemplate()}
<moz-button
id="backup-toggle-scheduled-button"

9
browser/components/backup/content/backup-settings.stories.mjs
View File

@@ -36,3 +36,12 @@ BackingUpInProgress.args = {
scheduledBackupsEnabled: false,
},
};
export const ScheduledBackupsEnabled = Template.bind({});
ScheduledBackupsEnabled.args = {
backupServiceState: {
backupFilePath: "Documents",
backupInProgress: false,
scheduledBackupsEnabled: true,
},
};

32
browser/components/backup/content/turn-off-scheduled-backups.css Normal file
View File

@@ -0,0 +1,32 @@
/* 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 https://mozilla.org/MPL/2.0/. */
@import url("chrome://global/skin/in-content/common.css");
#backup-turn-off-scheduled-wrapper {
display: grid;
grid-template-areas:
"header"
"content"
"button-group";
grid-template-rows: auto auto auto;
}
#backup-turn-off-scheduled-header {
grid-area: header;
margin: 0;
}
#backup-turn-off-scheduled-content {
display: flex;
flex-direction: column;
grid-area: content;
margin-block-start: var(--space-small);
margin-block-end: var(--space-large);
row-gap: var(--space-large);
}
#backup-turn-off-scheduled-button-group {
grid-area: button-group;
}

105
browser/components/backup/content/turn-off-scheduled-backups.mjs Normal file
View File

@@ -0,0 +1,105 @@
/* 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 { html } from "chrome://global/content/vendor/lit.all.mjs";
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
/**
* The widget for showing available options when users want to turn on
* scheduled backups.
*/
export default class TurnOffScheduledBackups extends MozLitElement {
static get queries() {
return {
cancelButtonEl: "#backup-turn-off-scheduled-cancel-button",
confirmButtonEl: "#backup-turn-off-scheduled-confirm-button",
};
}
/**
* Dispatches the BackupUI:InitWidget custom event upon being attached to the
* DOM, which registers with BackupUIChild for BackupService state updates.
*/
connectedCallback() {
super.connectedCallback();
this.dispatchEvent(
new CustomEvent("BackupUI:InitWidget", { bubbles: true })
);
}
handleCancel() {
this.dispatchEvent(
new CustomEvent("dialogCancel", {
bubbles: true,
composed: true,
})
);
}
handleConfirm() {
this.dispatchEvent(
new CustomEvent("turnOffScheduledBackups", {
bubbles: true,
composed: true,
})
);
}
contentTemplate() {
return html`
<div
id="backup-turn-off-scheduled-wrapper"
aria-labelledby="backup-turn-off-scheduled-header"
aria-describedby="backup-turn-off-scheduled-description"
>
<h1
id="backup-turn-off-scheduled-header"
class="heading-medium"
data-l10n-id="turn-off-scheduled-backups-header"
></h1>
<main id="backup-turn-off-scheduled-content">
<div id="backup-turn-off-scheduled-description">
<span
id="backup-turn-off-scheduled-description-span"
data-l10n-id="turn-off-scheduled-backups-description"
></span>
<!--TODO: finalize support page links (bug 1900467)-->
<a
id="backup-turn-off-scheduled-learn-more-link"
is="moz-support-link"
support-page="todo-backup"
data-l10n-id="turn-off-scheduled-backups-support-link"
></a>
</div>
</main>
<moz-button-group id="backup-turn-off-scheduled-button-group">
<moz-button
id="backup-turn-off-scheduled-cancel-button"
@click=${this.handleCancel}
data-l10n-id="turn-off-scheduled-backups-cancel-button"
></moz-button>
<moz-button
id="backup-turn-off-scheduled-confirm-button"
@click=${this.handleConfirm}
type="primary"
data-l10n-id="turn-off-scheduled-backups-confirm-button"
></moz-button>
</moz-button-group>
</div>
`;
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://browser/content/backup/turn-off-scheduled-backups.css"
/>
${this.contentTemplate()}
`;
}
}
customElements.define("turn-off-scheduled-backups", TurnOffScheduledBackups);

25
browser/components/backup/content/turn-off-scheduled-backups.stories.mjs Normal file
View File

@@ -0,0 +1,25 @@
/* 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/. */
// eslint-disable-next-line import/no-unresolved
import { html } from "lit.all.mjs";
import "chrome://global/content/elements/moz-card.mjs";
import "./turn-off-scheduled-backups.mjs";
window.MozXULElement.insertFTLIfNeeded("locales-preview/backupSettings.ftl");
window.MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
export default {
title: "Domain-specific UI Widgets/Backup/Turn Off Scheduled Backups",
component: "turn-off-scheduled-backups",
argTypes: {},
};
const Template = () => html`
<moz-card style="width: 27.8rem;">
<turn-off-scheduled-backups></turn-off-scheduled-backups>
</moz-card>
`;
export const Default = Template.bind({});

3
browser/components/backup/content/turn-on-scheduled-backups.css
View File

@@ -15,12 +15,9 @@
"content"
"button-group";
grid-template-rows: auto auto auto;
line-height: 1.5;
#backup-turn-on-scheduled-header {
grid-area: header;
font-size: var(--font-size-large);
font-weight: var(--font-weight);
margin: 0;
}

6
browser/components/backup/content/turn-on-scheduled-backups.mjs
View File

@@ -48,7 +48,7 @@ export default class TurnOnScheduledBackups extends MozLitElement {
handleCancel() {
this.dispatchEvent(
new CustomEvent("scheduledBackupsCancel", {
new CustomEvent("dialogCancel", {
bubbles: true,
composed: true,
})
@@ -65,7 +65,7 @@ export default class TurnOnScheduledBackups extends MozLitElement {
* Before confirmation, verify passwords match and FxA format rules (bug 1896772).
*/
this.dispatchEvent(
new CustomEvent("scheduledBackupsConfirm", {
new CustomEvent("turnOnScheduledBackups", {
bubbles: true,
composed: true,
})
@@ -163,6 +163,7 @@ export default class TurnOnScheduledBackups extends MozLitElement {
>
<h1
id="backup-turn-on-scheduled-header"
class="heading-medium"
data-l10n-id="turn-on-scheduled-backups-header"
></h1>
<main id="backup-turn-on-scheduled-content">
@@ -171,6 +172,7 @@ export default class TurnOnScheduledBackups extends MozLitElement {
id="backup-turn-on-scheduled-description-span"
data-l10n-id="turn-on-scheduled-backups-description"
></span>
<!--TODO: finalize support page links (bug 1900467)-->
<a
id="backup-turn-on-scheduled-learn-more-link"
is="moz-support-link"