Settings backup refactor (#551)

* Update backup.js to be a class

* Move utilReadFileArrayBuffer
This commit is contained in:
toasted-nutbread 2020-05-24 13:56:46 -04:00 committed by GitHub
parent 66e1185686
commit 13f57cccba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 317 additions and 315 deletions

View File

@ -22,355 +22,366 @@
* utilBackend * utilBackend
* utilBackgroundIsolate * utilBackgroundIsolate
* utilIsolate * utilIsolate
* utilReadFileArrayBuffer
*/ */
// Exporting class SettingsBackup {
constructor() {
let _settingsExportToken = null; this._settingsExportToken = null;
let _settingsExportRevoke = null; this._settingsExportRevoke = null;
const SETTINGS_EXPORT_CURRENT_VERSION = 0; this._currentVersion = 0;
function _getSettingsExportDateString(date, dateSeparator, dateTimeSeparator, timeSeparator, resolution) {
const values = [
date.getUTCFullYear().toString(),
dateSeparator,
(date.getUTCMonth() + 1).toString().padStart(2, '0'),
dateSeparator,
date.getUTCDate().toString().padStart(2, '0'),
dateTimeSeparator,
date.getUTCHours().toString().padStart(2, '0'),
timeSeparator,
date.getUTCMinutes().toString().padStart(2, '0'),
timeSeparator,
date.getUTCSeconds().toString().padStart(2, '0')
];
return values.slice(0, resolution * 2 - 1).join('');
}
async function _getSettingsExportData(date) {
const optionsFull = await api.optionsGetFull();
const environment = await api.getEnvironmentInfo();
const fieldTemplatesDefault = await api.getDefaultAnkiFieldTemplates();
// Format options
for (const {options} of optionsFull.profiles) {
if (options.anki.fieldTemplates === fieldTemplatesDefault || !options.anki.fieldTemplates) {
delete options.anki.fieldTemplates; // Default
}
} }
const data = { prepare() {
version: SETTINGS_EXPORT_CURRENT_VERSION, document.querySelector('#settings-export').addEventListener('click', this._onSettingsExportClick.bind(this), false);
date: _getSettingsExportDateString(date, '-', ' ', ':', 6), document.querySelector('#settings-import').addEventListener('click', this._onSettingsImportClick.bind(this), false);
url: chrome.runtime.getURL('/'), document.querySelector('#settings-import-file').addEventListener('change', this._onSettingsImportFileChange.bind(this), false);
manifest: chrome.runtime.getManifest(), document.querySelector('#settings-reset').addEventListener('click', this._onSettingsResetClick.bind(this), false);
environment, document.querySelector('#settings-reset-modal-confirm').addEventListener('click', this._onSettingsResetConfirmClick.bind(this), false);
userAgent: navigator.userAgent, }
options: optionsFull
};
return data; // Private
}
function _saveBlob(blob, fileName) { _getSettingsExportDateString(date, dateSeparator, dateTimeSeparator, timeSeparator, resolution) {
if (typeof navigator === 'object' && typeof navigator.msSaveBlob === 'function') { const values = [
if (navigator.msSaveBlob(blob)) { date.getUTCFullYear().toString(),
dateSeparator,
(date.getUTCMonth() + 1).toString().padStart(2, '0'),
dateSeparator,
date.getUTCDate().toString().padStart(2, '0'),
dateTimeSeparator,
date.getUTCHours().toString().padStart(2, '0'),
timeSeparator,
date.getUTCMinutes().toString().padStart(2, '0'),
timeSeparator,
date.getUTCSeconds().toString().padStart(2, '0')
];
return values.slice(0, resolution * 2 - 1).join('');
}
async _getSettingsExportData(date) {
const optionsFull = await api.optionsGetFull();
const environment = await api.getEnvironmentInfo();
const fieldTemplatesDefault = await api.getDefaultAnkiFieldTemplates();
// Format options
for (const {options} of optionsFull.profiles) {
if (options.anki.fieldTemplates === fieldTemplatesDefault || !options.anki.fieldTemplates) {
delete options.anki.fieldTemplates; // Default
}
}
const data = {
version: this._currentVersion,
date: this._getSettingsExportDateString(date, '-', ' ', ':', 6),
url: chrome.runtime.getURL('/'),
manifest: chrome.runtime.getManifest(),
environment,
userAgent: navigator.userAgent,
options: optionsFull
};
return data;
}
_saveBlob(blob, fileName) {
if (typeof navigator === 'object' && typeof navigator.msSaveBlob === 'function') {
if (navigator.msSaveBlob(blob)) {
return;
}
}
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = fileName;
a.rel = 'noopener';
a.target = '_blank';
const revoke = () => {
URL.revokeObjectURL(blobUrl);
a.href = '';
this._settingsExportRevoke = null;
};
this._settingsExportRevoke = revoke;
a.dispatchEvent(new MouseEvent('click'));
setTimeout(revoke, 60000);
}
async _onSettingsExportClick() {
if (this._settingsExportRevoke !== null) {
this._settingsExportRevoke();
this._settingsExportRevoke = null;
}
const date = new Date(Date.now());
const token = {};
this._settingsExportToken = token;
const data = await this._getSettingsExportData(date);
if (this._settingsExportToken !== token) {
// A new export has been started
return; return;
} }
this._settingsExportToken = null;
const fileName = `yomichan-settings-${this._getSettingsExportDateString(date, '-', '-', '-', 6)}.json`;
const blob = new Blob([JSON.stringify(data, null, 4)], {type: 'application/json'});
this._saveBlob(blob, fileName);
} }
const blobUrl = URL.createObjectURL(blob); _readFileArrayBuffer(file) {
return new Promise((resolve, reject) => {
const a = document.createElement('a'); const reader = new FileReader();
a.href = blobUrl; reader.onload = () => resolve(reader.result);
a.download = fileName; reader.onerror = () => reject(reader.error);
a.rel = 'noopener'; reader.readAsArrayBuffer(file);
a.target = '_blank'; });
const revoke = () => {
URL.revokeObjectURL(blobUrl);
a.href = '';
_settingsExportRevoke = null;
};
_settingsExportRevoke = revoke;
a.dispatchEvent(new MouseEvent('click'));
setTimeout(revoke, 60000);
}
async function _onSettingsExportClick() {
if (_settingsExportRevoke !== null) {
_settingsExportRevoke();
_settingsExportRevoke = null;
} }
const date = new Date(Date.now()); // Importing
const token = {}; async _settingsImportSetOptionsFull(optionsFull) {
_settingsExportToken = token; return utilIsolate(utilBackend().setFullOptions(
const data = await _getSettingsExportData(date); utilBackgroundIsolate(optionsFull)
if (_settingsExportToken !== token) { ));
// A new export has been started
return;
}
_settingsExportToken = null;
const fileName = `yomichan-settings-${_getSettingsExportDateString(date, '-', '-', '-', 6)}.json`;
const blob = new Blob([JSON.stringify(data, null, 4)], {type: 'application/json'});
_saveBlob(blob, fileName);
}
// Importing
async function _settingsImportSetOptionsFull(optionsFull) {
return utilIsolate(utilBackend().setFullOptions(
utilBackgroundIsolate(optionsFull)
));
}
function _showSettingsImportError(error) {
yomichan.logError(error);
document.querySelector('#settings-import-error-modal-message').textContent = `${error}`;
$('#settings-import-error-modal').modal('show');
}
async function _showSettingsImportWarnings(warnings) {
const modalNode = $('#settings-import-warning-modal');
const buttons = document.querySelectorAll('.settings-import-warning-modal-import-button');
const messageContainer = document.querySelector('#settings-import-warning-modal-message');
if (modalNode.length === 0 || buttons.length === 0 || messageContainer === null) {
return {result: false};
} }
// Set message _showSettingsImportError(error) {
const fragment = document.createDocumentFragment(); yomichan.logError(error);
for (const warning of warnings) { document.querySelector('#settings-import-error-modal-message').textContent = `${error}`;
const node = document.createElement('li'); $('#settings-import-error-modal').modal('show');
node.textContent = `${warning}`;
fragment.appendChild(node);
} }
messageContainer.textContent = '';
messageContainer.appendChild(fragment);
// Show modal async _showSettingsImportWarnings(warnings) {
modalNode.modal('show'); const modalNode = $('#settings-import-warning-modal');
const buttons = document.querySelectorAll('.settings-import-warning-modal-import-button');
// Wait for modal to close const messageContainer = document.querySelector('#settings-import-warning-modal-message');
return new Promise((resolve) => { if (modalNode.length === 0 || buttons.length === 0 || messageContainer === null) {
const onButtonClick = (e) => { return {result: false};
e.preventDefault();
complete({
result: true,
sanitize: e.currentTarget.dataset.importSanitize === 'true'
});
modalNode.modal('hide');
};
const onModalHide = () => {
complete({result: false});
};
let completed = false;
const complete = (result) => {
if (completed) { return; }
completed = true;
modalNode.off('hide.bs.modal', onModalHide);
for (const button of buttons) {
button.removeEventListener('click', onButtonClick, false);
}
resolve(result);
};
// Hook events
modalNode.on('hide.bs.modal', onModalHide);
for (const button of buttons) {
button.addEventListener('click', onButtonClick, false);
} }
});
}
function _isLocalhostUrl(urlString) { // Set message
try { const fragment = document.createDocumentFragment();
const url = new URL(urlString); for (const warning of warnings) {
switch (url.hostname.toLowerCase()) { const node = document.createElement('li');
case 'localhost': node.textContent = `${warning}`;
case '127.0.0.1': fragment.appendChild(node);
case '[::1]': }
switch (url.protocol.toLowerCase()) { messageContainer.textContent = '';
case 'http:': messageContainer.appendChild(fragment);
case 'https:':
return true; // Show modal
modalNode.modal('show');
// Wait for modal to close
return new Promise((resolve) => {
const onButtonClick = (e) => {
e.preventDefault();
complete({
result: true,
sanitize: e.currentTarget.dataset.importSanitize === 'true'
});
modalNode.modal('hide');
};
const onModalHide = () => {
complete({result: false});
};
let completed = false;
const complete = (result) => {
if (completed) { return; }
completed = true;
modalNode.off('hide.bs.modal', onModalHide);
for (const button of buttons) {
button.removeEventListener('click', onButtonClick, false);
} }
break;
} resolve(result);
} catch (e) { };
// NOP
// Hook events
modalNode.on('hide.bs.modal', onModalHide);
for (const button of buttons) {
button.addEventListener('click', onButtonClick, false);
}
});
} }
return false;
}
function _settingsImportSanitizeProfileOptions(options, dryRun) { _isLocalhostUrl(urlString) {
const warnings = []; try {
const url = new URL(urlString);
switch (url.hostname.toLowerCase()) {
case 'localhost':
case '127.0.0.1':
case '[::1]':
switch (url.protocol.toLowerCase()) {
case 'http:':
case 'https:':
return true;
}
break;
}
} catch (e) {
// NOP
}
return false;
}
const anki = options.anki; _settingsImportSanitizeProfileOptions(options, dryRun) {
if (isObject(anki)) { const warnings = [];
const fieldTemplates = anki.fieldTemplates;
if (typeof fieldTemplates === 'string') { const anki = options.anki;
warnings.push('anki.fieldTemplates contains a non-default value'); if (isObject(anki)) {
if (!dryRun) { const fieldTemplates = anki.fieldTemplates;
delete anki.fieldTemplates; if (typeof fieldTemplates === 'string') {
warnings.push('anki.fieldTemplates contains a non-default value');
if (!dryRun) {
delete anki.fieldTemplates;
}
}
const server = anki.server;
if (typeof server === 'string' && server.length > 0 && !this._isLocalhostUrl(server)) {
warnings.push('anki.server uses a non-localhost URL');
if (!dryRun) {
delete anki.server;
}
} }
} }
const server = anki.server;
if (typeof server === 'string' && server.length > 0 && !_isLocalhostUrl(server)) { const audio = options.audio;
warnings.push('anki.server uses a non-localhost URL'); if (isObject(audio)) {
if (!dryRun) { const customSourceUrl = audio.customSourceUrl;
delete anki.server; if (typeof customSourceUrl === 'string' && customSourceUrl.length > 0 && !this._isLocalhostUrl(customSourceUrl)) {
warnings.push('audio.customSourceUrl uses a non-localhost URL');
if (!dryRun) {
delete audio.customSourceUrl;
}
} }
} }
return warnings;
} }
const audio = options.audio; _settingsImportSanitizeOptions(optionsFull, dryRun) {
if (isObject(audio)) { const warnings = new Set();
const customSourceUrl = audio.customSourceUrl;
if (typeof customSourceUrl === 'string' && customSourceUrl.length > 0 && !_isLocalhostUrl(customSourceUrl)) { const profiles = optionsFull.profiles;
warnings.push('audio.customSourceUrl uses a non-localhost URL'); if (Array.isArray(profiles)) {
if (!dryRun) { for (const profile of profiles) {
delete audio.customSourceUrl; if (!isObject(profile)) { continue; }
const options = profile.options;
if (!isObject(options)) { continue; }
const warnings2 = this._settingsImportSanitizeProfileOptions(options, dryRun);
for (const warning of warnings2) {
warnings.add(warning);
}
} }
} }
return warnings;
} }
return warnings; _utf8Decode(arrayBuffer) {
} try {
return new TextDecoder('utf-8').decode(arrayBuffer);
} catch (e) {
const binaryString = String.fromCharCode.apply(null, new Uint8Array(arrayBuffer));
return decodeURIComponent(escape(binaryString));
}
}
function _settingsImportSanitizeOptions(optionsFull, dryRun) { async _importSettingsFile(file) {
const warnings = new Set(); const dataString = this._utf8Decode(await this._readFileArrayBuffer(file));
const data = JSON.parse(dataString);
const profiles = optionsFull.profiles; // Type check
if (Array.isArray(profiles)) { if (!isObject(data)) {
for (const profile of profiles) { throw new Error(`Invalid data type: ${typeof data}`);
if (!isObject(profile)) { continue; } }
const options = profile.options;
if (!isObject(options)) { continue; }
const warnings2 = _settingsImportSanitizeProfileOptions(options, dryRun); // Version check
for (const warning of warnings2) { const version = data.version;
warnings.add(warning); if (!(
typeof version === 'number' &&
Number.isFinite(version) &&
version === Math.floor(version)
)) {
throw new Error(`Invalid version: ${version}`);
}
if (!(
version >= 0 &&
version <= this._currentVersion
)) {
throw new Error(`Unsupported version: ${version}`);
}
// Verify options exists
let optionsFull = data.options;
if (!isObject(optionsFull)) {
throw new Error(`Invalid options type: ${typeof optionsFull}`);
}
// Upgrade options
optionsFull = optionsUpdateVersion(optionsFull, {});
// Check for warnings
const sanitizationWarnings = this._settingsImportSanitizeOptions(optionsFull, true);
// Show sanitization warnings
if (sanitizationWarnings.size > 0) {
const {result, sanitize} = await this._showSettingsImportWarnings(sanitizationWarnings);
if (!result) { return; }
if (sanitize !== false) {
this._settingsImportSanitizeOptions(optionsFull, false);
} }
} }
// Assign options
await this._settingsImportSetOptionsFull(optionsFull);
// Reload settings page
window.location.reload();
} }
return warnings; _onSettingsImportClick() {
} document.querySelector('#settings-import-file').click();
function _utf8Decode(arrayBuffer) {
try {
return new TextDecoder('utf-8').decode(arrayBuffer);
} catch (e) {
const binaryString = String.fromCharCode.apply(null, new Uint8Array(arrayBuffer));
return decodeURIComponent(escape(binaryString));
}
}
async function _importSettingsFile(file) {
const dataString = _utf8Decode(await utilReadFileArrayBuffer(file));
const data = JSON.parse(dataString);
// Type check
if (!isObject(data)) {
throw new Error(`Invalid data type: ${typeof data}`);
} }
// Version check async _onSettingsImportFileChange(e) {
const version = data.version; const files = e.target.files;
if (!( if (files.length === 0) { return; }
typeof version === 'number' &&
Number.isFinite(version) &&
version === Math.floor(version)
)) {
throw new Error(`Invalid version: ${version}`);
}
if (!( const file = files[0];
version >= 0 && e.target.value = null;
version <= SETTINGS_EXPORT_CURRENT_VERSION try {
)) { await this._importSettingsFile(file);
throw new Error(`Unsupported version: ${version}`); } catch (error) {
} this._showSettingsImportError(error);
// Verify options exists
let optionsFull = data.options;
if (!isObject(optionsFull)) {
throw new Error(`Invalid options type: ${typeof optionsFull}`);
}
// Upgrade options
optionsFull = optionsUpdateVersion(optionsFull, {});
// Check for warnings
const sanitizationWarnings = _settingsImportSanitizeOptions(optionsFull, true);
// Show sanitization warnings
if (sanitizationWarnings.size > 0) {
const {result, sanitize} = await _showSettingsImportWarnings(sanitizationWarnings);
if (!result) { return; }
if (sanitize !== false) {
_settingsImportSanitizeOptions(optionsFull, false);
} }
} }
// Assign options // Resetting
await _settingsImportSetOptionsFull(optionsFull);
// Reload settings page _onSettingsResetClick() {
window.location.reload(); $('#settings-reset-modal').modal('show');
} }
function _onSettingsImportClick() { async _onSettingsResetConfirmClick() {
document.querySelector('#settings-import-file').click(); $('#settings-reset-modal').modal('hide');
}
// Get default options
function _onSettingsImportFileChange(e) { const optionsFull = optionsGetDefault();
const files = e.target.files;
if (files.length === 0) { return; } // Assign options
await this._settingsImportSetOptionsFull(optionsFull);
const file = files[0];
e.target.value = null; // Reload settings page
_importSettingsFile(file).catch(_showSettingsImportError); window.location.reload();
} }
// Resetting
function _onSettingsResetClick() {
$('#settings-reset-modal').modal('show');
}
async function _onSettingsResetConfirmClick() {
$('#settings-reset-modal').modal('hide');
// Get default options
const optionsFull = optionsGetDefault();
// Assign options
await _settingsImportSetOptionsFull(optionsFull);
// Reload settings page
window.location.reload();
}
// Setup
function backupInitialize() {
document.querySelector('#settings-export').addEventListener('click', _onSettingsExportClick, false);
document.querySelector('#settings-import').addEventListener('click', _onSettingsImportClick, false);
document.querySelector('#settings-import-file').addEventListener('change', _onSettingsImportFileChange, false);
document.querySelector('#settings-reset').addEventListener('click', _onSettingsResetClick, false);
document.querySelector('#settings-reset-modal-confirm').addEventListener('click', _onSettingsResetConfirmClick, false);
} }

View File

@ -16,13 +16,13 @@
*/ */
/* global /* global
* SettingsBackup
* ankiInitialize * ankiInitialize
* ankiTemplatesInitialize * ankiTemplatesInitialize
* ankiTemplatesUpdateValue * ankiTemplatesUpdateValue
* api * api
* appearanceInitialize * appearanceInitialize
* audioSettingsInitialize * audioSettingsInitialize
* backupInitialize
* dictSettingsInitialize * dictSettingsInitialize
* getOptionsContext * getOptionsContext
* onAnkiOptionsChanged * onAnkiOptionsChanged
@ -302,7 +302,7 @@ async function onReady() {
await dictSettingsInitialize(); await dictSettingsInitialize();
ankiInitialize(); ankiInitialize();
ankiTemplatesInitialize(); ankiTemplatesInitialize();
backupInitialize(); new SettingsBackup().prepare();
storageInfoInitialize(); storageInfoInitialize();

View File

@ -65,12 +65,3 @@ function utilBackend() {
} }
return backend; return backend;
} }
function utilReadFileArrayBuffer(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
reader.readAsArrayBuffer(file);
});
}