472 lines
16 KiB
JavaScript
472 lines
16 KiB
JavaScript
/* 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";
|
|
|
|
// 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";
|
|
// eslint-disable-next-line import/no-unassigned-import
|
|
import "chrome://browser/content/backup/restore-from-backup.mjs";
|
|
// eslint-disable-next-line import/no-unassigned-import
|
|
import "chrome://browser/content/backup/enable-backup-encryption.mjs";
|
|
// eslint-disable-next-line import/no-unassigned-import
|
|
import "chrome://browser/content/backup/disable-backup-encryption.mjs";
|
|
|
|
/**
|
|
* The widget for managing the BackupService that is embedded within the main
|
|
* document of about:settings / about:preferences.
|
|
*/
|
|
export default class BackupSettings extends MozLitElement {
|
|
#placeholderIconURL = "chrome://global/skin/icons/page-portrait.svg";
|
|
|
|
static properties = {
|
|
backupServiceState: { type: Object },
|
|
recoveryErrorCode: { type: Number },
|
|
recoveryInProgress: { type: Boolean },
|
|
_enableEncryptionTypeAttr: { type: String },
|
|
};
|
|
|
|
static get queries() {
|
|
return {
|
|
scheduledBackupsButtonEl: "#backup-toggle-scheduled-button",
|
|
changePasswordButtonEl: "#backup-change-password-button",
|
|
disableBackupEncryptionEl: "disable-backup-encryption",
|
|
disableBackupEncryptionDialogEl: "#disable-backup-encryption-dialog",
|
|
enableBackupEncryptionEl: "enable-backup-encryption",
|
|
enableBackupEncryptionDialogEl: "#enable-backup-encryption-dialog",
|
|
turnOnScheduledBackupsDialogEl: "#turn-on-scheduled-backups-dialog",
|
|
turnOnScheduledBackupsEl: "turn-on-scheduled-backups",
|
|
turnOffScheduledBackupsEl: "turn-off-scheduled-backups",
|
|
turnOffScheduledBackupsDialogEl: "#turn-off-scheduled-backups-dialog",
|
|
restoreFromBackupEl: "restore-from-backup",
|
|
restoreFromBackupButtonEl: "#backup-toggle-restore-button",
|
|
restoreFromBackupDescriptionEl: "#backup-restore-description",
|
|
restoreFromBackupDialogEl: "#restore-from-backup-dialog",
|
|
sensitiveDataCheckboxInputEl: "#backup-sensitive-data-checkbox-input",
|
|
passwordControlsEl: "#backup-password-controls",
|
|
lastBackupLocationInputEl: "#last-backup-location",
|
|
lastBackupFileNameEl: "#last-backup-filename",
|
|
lastBackupDateEl: "#last-backup-date",
|
|
backupLocationShowButtonEl: "#backup-location-show",
|
|
backupLocationEditButtonEl: "#backup-location-edit",
|
|
scheduledBackupsDescriptionEl: "#scheduled-backups-description",
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Creates a BackupPreferences instance and sets the initial default
|
|
* state.
|
|
*/
|
|
constructor() {
|
|
super();
|
|
this.backupServiceState = {
|
|
backupDirPath: "",
|
|
backupFileToRestore: null,
|
|
backupFileInfo: null,
|
|
defaultParent: {
|
|
fileName: "",
|
|
path: "",
|
|
iconURL: "",
|
|
},
|
|
encryptionEnabled: false,
|
|
scheduledBackupsEnabled: false,
|
|
lastBackupDate: null,
|
|
lastBackupFileName: "",
|
|
supportBaseLink: "",
|
|
};
|
|
this.recoveryInProgress = false;
|
|
this.recoveryErrorCode = 0;
|
|
this._enableEncryptionTypeAttr = "";
|
|
}
|
|
|
|
/**
|
|
* 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 })
|
|
);
|
|
|
|
this.addEventListener("dialogCancel", this);
|
|
this.addEventListener("getBackupFileInfo", this);
|
|
this.addEventListener("restoreFromBackupConfirm", this);
|
|
this.addEventListener("restoreFromBackupChooseFile", this);
|
|
}
|
|
|
|
handleEvent(event) {
|
|
switch (event.type) {
|
|
case "dialogCancel":
|
|
if (this.turnOnScheduledBackupsDialogEl.open) {
|
|
this.turnOnScheduledBackupsDialogEl.close();
|
|
} else if (this.turnOffScheduledBackupsDialogEl.open) {
|
|
this.turnOffScheduledBackupsDialogEl.close();
|
|
} else if (this.restoreFromBackupDialogEl.open) {
|
|
this.restoreFromBackupDialogEl.close();
|
|
} else if (this.disableBackupEncryptionDialogEl.open) {
|
|
this.disableBackupEncryptionDialogEl.close();
|
|
} else if (this.enableBackupEncryptionDialogEl.open) {
|
|
this.enableBackupEncryptionDialogEl.close();
|
|
}
|
|
break;
|
|
case "restoreFromBackupConfirm":
|
|
this.dispatchEvent(
|
|
new CustomEvent("BackupUI:RestoreFromBackupFile", {
|
|
bubbles: true,
|
|
composed: true,
|
|
detail: {
|
|
backupFile: event.detail.backupFile,
|
|
backupPassword: event.detail.backupPassword,
|
|
},
|
|
})
|
|
);
|
|
break;
|
|
case "restoreFromBackupChooseFile":
|
|
this.dispatchEvent(
|
|
new CustomEvent("BackupUI:RestoreFromBackupChooseFile", {
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
break;
|
|
case "getBackupFileInfo":
|
|
this.dispatchEvent(
|
|
new CustomEvent("BackupUI:GetBackupFileInfo", {
|
|
bubbles: true,
|
|
composed: true,
|
|
detail: {
|
|
backupFile: event.detail.backupFile,
|
|
},
|
|
})
|
|
);
|
|
break;
|
|
}
|
|
}
|
|
|
|
handleShowScheduledBackups() {
|
|
if (
|
|
!this.backupServiceState.scheduledBackupsEnabled &&
|
|
this.turnOnScheduledBackupsDialogEl
|
|
) {
|
|
this.turnOnScheduledBackupsDialogEl.showModal();
|
|
} else if (
|
|
this.backupServiceState.scheduledBackupsEnabled &&
|
|
this.turnOffScheduledBackupsDialogEl
|
|
) {
|
|
this.turnOffScheduledBackupsDialogEl.showModal();
|
|
}
|
|
}
|
|
|
|
async handleToggleBackupEncryption(event) {
|
|
event.preventDefault();
|
|
|
|
// Checkbox was unchecked, meaning encryption is already enabled and should be disabled.
|
|
let toggledToDisable =
|
|
!event.target.checked && this.backupServiceState.encryptionEnabled;
|
|
|
|
if (toggledToDisable && this.disableBackupEncryptionDialogEl) {
|
|
this.disableBackupEncryptionDialogEl.showModal();
|
|
} else {
|
|
this._enableEncryptionTypeAttr = "set-password";
|
|
await this.updateComplete;
|
|
this.enableBackupEncryptionDialogEl.showModal();
|
|
}
|
|
}
|
|
|
|
async handleChangePassword() {
|
|
if (this.enableBackupEncryptionDialogEl) {
|
|
this._enableEncryptionTypeAttr = "change-password";
|
|
await this.updateComplete;
|
|
this.enableBackupEncryptionDialogEl.showModal();
|
|
}
|
|
}
|
|
|
|
scheduledBackupsDescriptionTemplate() {
|
|
return html`
|
|
<div
|
|
id="scheduled-backups-description"
|
|
data-l10n-id="settings-data-backup-scheduled-backups-description"
|
|
>
|
|
<!--TODO: finalize support page links (bug 1900467)-->
|
|
<a
|
|
is="moz-support-link"
|
|
support-page="todo-backup"
|
|
data-l10n-name="support-link"
|
|
></a>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
turnOnScheduledBackupsDialogTemplate() {
|
|
let { fileName, path, iconURL } = this.backupServiceState.defaultParent;
|
|
return html`<dialog
|
|
id="turn-on-scheduled-backups-dialog"
|
|
class="backup-dialog"
|
|
>
|
|
<turn-on-scheduled-backups
|
|
defaultlabel=${fileName}
|
|
defaultpath=${path}
|
|
defaulticonurl=${iconURL}
|
|
.supportBaseLink=${this.backupServiceState.supportBaseLink}
|
|
></turn-on-scheduled-backups>
|
|
</dialog>`;
|
|
}
|
|
|
|
turnOffScheduledBackupsDialogTemplate() {
|
|
return html`<dialog id="turn-off-scheduled-backups-dialog">
|
|
<turn-off-scheduled-backups></turn-off-scheduled-backups>
|
|
</dialog>`;
|
|
}
|
|
|
|
restoreFromBackupDialogTemplate() {
|
|
let { backupFilePath, backupFileToRestore, backupFileInfo } =
|
|
this.backupServiceState;
|
|
return html`<dialog id="restore-from-backup-dialog">
|
|
<restore-from-backup
|
|
.backupFilePath=${backupFilePath}
|
|
.backupFileToRestore=${backupFileToRestore}
|
|
.backupFileInfo=${backupFileInfo}
|
|
.recoveryInProgress=${this.recoveryInProgress}
|
|
.recoveryErrorCode=${this.recoveryErrorCode}
|
|
></restore-from-backup>
|
|
</dialog>`;
|
|
}
|
|
|
|
restoreFromBackupTemplate() {
|
|
let descriptionL10nID = this.backupServiceState.scheduledBackupsEnabled
|
|
? "settings-data-backup-scheduled-backups-on-restore-description"
|
|
: "settings-data-backup-scheduled-backups-off-restore-description";
|
|
|
|
let restoreButtonL10nID = this.backupServiceState.scheduledBackupsEnabled
|
|
? "settings-data-backup-scheduled-backups-on-restore-choose"
|
|
: "settings-data-backup-scheduled-backups-off-restore-choose";
|
|
|
|
return html`<section id="restore-from-backup">
|
|
${this.restoreFromBackupDialogTemplate()}
|
|
<div class="backups-control">
|
|
<span
|
|
id="restore-header"
|
|
data-l10n-id="settings-data-backup-restore-header"
|
|
class="heading-medium"
|
|
></span>
|
|
<moz-button
|
|
id="backup-toggle-restore-button"
|
|
@click=${this.handleShowRestoreDialog}
|
|
data-l10n-id=${restoreButtonL10nID}
|
|
></moz-button>
|
|
<div
|
|
id="backup-restore-description"
|
|
data-l10n-id=${descriptionL10nID}
|
|
></div>
|
|
</div>
|
|
</section>`;
|
|
}
|
|
|
|
handleShowRestoreDialog() {
|
|
if (this.restoreFromBackupDialogEl) {
|
|
this.restoreFromBackupDialogEl.showModal();
|
|
}
|
|
}
|
|
|
|
handleShowBackupLocation() {
|
|
this.dispatchEvent(
|
|
new CustomEvent("BackupUI:ShowBackupLocation", {
|
|
bubbles: true,
|
|
})
|
|
);
|
|
}
|
|
|
|
handleEditBackupLocation() {
|
|
this.dispatchEvent(
|
|
new CustomEvent("BackupUI:EditBackupLocation", {
|
|
bubbles: true,
|
|
})
|
|
);
|
|
}
|
|
|
|
enableBackupEncryptionDialogTemplate() {
|
|
return html`<dialog
|
|
id="enable-backup-encryption-dialog"
|
|
class="backup-dialog"
|
|
>
|
|
<enable-backup-encryption
|
|
type=${this._enableEncryptionTypeAttr}
|
|
.supportBaseLink=${this.backupServiceState.supportBaseLink}
|
|
></enable-backup-encryption>
|
|
</dialog>`;
|
|
}
|
|
|
|
disableBackupEncryptionDialogTemplate() {
|
|
return html`<dialog id="disable-backup-encryption-dialog">
|
|
<disable-backup-encryption></disable-backup-encryption>
|
|
</dialog>`;
|
|
}
|
|
|
|
lastBackupInfoTemplate() {
|
|
// The lastBackupDate is stored in preferences, which only accepts
|
|
// 32-bit signed values, so we automatically divide it by 1000 before
|
|
// storing it. We need to re-multiply it by 1000 to get Fluent to render
|
|
// the right time.
|
|
let backupDateArgs = {
|
|
date: this.backupServiceState.lastBackupDate * 1000,
|
|
};
|
|
let backupFileNameArgs = {
|
|
fileName: this.backupServiceState.lastBackupFileName,
|
|
};
|
|
|
|
return html`
|
|
<div id="last-backup-info">
|
|
<div
|
|
id="last-backup-date"
|
|
data-l10n-id="settings-data-backup-last-backup-date"
|
|
data-l10n-args=${JSON.stringify(backupDateArgs)}
|
|
></div>
|
|
<div
|
|
id="last-backup-filename"
|
|
data-l10n-id="settings-data-backup-last-backup-filename"
|
|
data-l10n-args=${JSON.stringify(backupFileNameArgs)}
|
|
></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
backupLocationTemplate() {
|
|
let iconURL =
|
|
this.backupServiceState.defaultParent.iconURL || this.#placeholderIconURL;
|
|
let { backupDirPath } = this.backupServiceState;
|
|
|
|
return html`
|
|
<div id="last-backup-location-control">
|
|
<span data-l10n-id="settings-data-backup-last-backup-location"></span>
|
|
<input
|
|
id="last-backup-location"
|
|
class="backup-location-filepicker-input"
|
|
type="text"
|
|
readonly
|
|
value=${backupDirPath}
|
|
style=${`background-image: url(${iconURL})`}></input>
|
|
<moz-button
|
|
id="backup-location-show"
|
|
@click=${this.handleShowBackupLocation}
|
|
data-l10n-id="settings-data-backup-last-backup-location-show-in-folder"
|
|
></moz-button>
|
|
<moz-button
|
|
id="backup-location-edit"
|
|
@click=${this.handleEditBackupLocation}
|
|
data-l10n-id="settings-data-backup-last-backup-location-edit"
|
|
></moz-button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
sensitiveDataTemplate() {
|
|
return html`<section id="backup-password-controls">
|
|
<!-- TODO: we can use the moz-checkbox reusable component once it is ready (bug 1901635)-->
|
|
<div id="backup-sensitive-data-checkbox">
|
|
<label
|
|
id="backup-sensitive-data-checkbox-label"
|
|
for="backup-sensitive-data-checkbox-input"
|
|
>
|
|
<input
|
|
id="backup-sensitive-data-checkbox-input"
|
|
@click=${this.handleToggleBackupEncryption}
|
|
type="checkbox"
|
|
.checked=${this.backupServiceState.encryptionEnabled}
|
|
/>
|
|
<span
|
|
id="backup-sensitive-data-checkbox-span"
|
|
data-l10n-id="settings-data-toggle-encryption-label"
|
|
></span>
|
|
</label>
|
|
<div
|
|
id="backup-sensitive-data-checkbox-description"
|
|
class="text-deemphasized"
|
|
>
|
|
<span
|
|
id="backup-sensitive-data-checkbox-description-span"
|
|
data-l10n-id="settings-data-toggle-encryption-description"
|
|
></span>
|
|
<!--TODO: finalize support page links (bug 1900467)-->
|
|
<a
|
|
id="settings-data-toggle-encryption-learn-more-link"
|
|
is="moz-support-link"
|
|
support-page="todo-backup"
|
|
data-l10n-id="settings-data-toggle-encryption-support-link"
|
|
></a>
|
|
</div>
|
|
</div>
|
|
${this.backupServiceState.encryptionEnabled
|
|
? html`<moz-button
|
|
id="backup-change-password-button"
|
|
@click=${this.handleChangePassword}
|
|
data-l10n-id="settings-data-change-password"
|
|
></moz-button>`
|
|
: null}
|
|
</section>`;
|
|
}
|
|
|
|
updated() {
|
|
if (this.backupServiceState.scheduledBackupsEnabled) {
|
|
let input = this.lastBackupLocationInputEl;
|
|
input.setSelectionRange(input.value.length, input.value.length);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let scheduledBackupsEnabledL10nID = this.backupServiceState
|
|
.scheduledBackupsEnabled
|
|
? "settings-data-backup-scheduled-backups-on"
|
|
: "settings-data-backup-scheduled-backups-off";
|
|
return html`<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/skin/preferences/preferences.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/content/backup/backup-settings.css"
|
|
/>
|
|
${this.turnOnScheduledBackupsDialogTemplate()}
|
|
${this.turnOffScheduledBackupsDialogTemplate()}
|
|
${this.enableBackupEncryptionDialogTemplate()}
|
|
${this.disableBackupEncryptionDialogTemplate()}
|
|
|
|
<section id="scheduled-backups">
|
|
<div class="backups-control">
|
|
<span
|
|
id="scheduled-backups-enabled"
|
|
data-l10n-id=${scheduledBackupsEnabledL10nID}
|
|
class="heading-medium"
|
|
></span>
|
|
|
|
<moz-button
|
|
id="backup-toggle-scheduled-button"
|
|
@click=${this.handleShowScheduledBackups}
|
|
data-l10n-id="settings-data-backup-toggle"
|
|
></moz-button>
|
|
|
|
${this.backupServiceState.scheduledBackupsEnabled
|
|
? null
|
|
: this.scheduledBackupsDescriptionTemplate()}
|
|
</div>
|
|
|
|
${this.backupServiceState.lastBackupDate
|
|
? this.lastBackupInfoTemplate()
|
|
: null}
|
|
${this.backupServiceState.scheduledBackupsEnabled
|
|
? this.backupLocationTemplate()
|
|
: null}
|
|
${this.backupServiceState.scheduledBackupsEnabled
|
|
? this.sensitiveDataTemplate()
|
|
: null}
|
|
</section>
|
|
|
|
${this.restoreFromBackupTemplate()} `;
|
|
}
|
|
}
|
|
|
|
customElements.define("backup-settings", BackupSettings);
|