diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 3e6a9326..2e5a5a32 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -93,8 +93,8 @@ "description": "Heading for backup" }, "backupMessage": { - "message": "Select a file or drag and drop to this page.", - "description": "Message for backup" + "message": "To import the backup file, drag'n'drop it into this page or click the Import button.\n\nTo export a compatible backup for Stylus older than 1.5.18, right-click or shift-click the Export button.", + "description": "Text for Backup section's (i) in the manager" }, "bckpInstStyles": { "message": "Export styles" diff --git a/manage.html b/manage.html index c0eddb19..dc9e4dd1 100644 --- a/manage.html +++ b/manage.html @@ -320,8 +320,13 @@
-

- + +

+ + + +

+
diff --git a/manage/import-export.js b/manage/import-export.js index 0b9a919b..2b45a388 100644 --- a/manage/import-export.js +++ b/manage/import-export.js @@ -15,6 +15,7 @@ 'use strict'; $('#file-all-styles').onclick = exportToFile; +$('#file-all-styles').oncontextmenu = exportToFile; $('#unfile-all-styles').onclick = () => importFromFile({fileTypeFilter: '.json'}); Object.assign(document.body, { @@ -333,8 +334,11 @@ async function importFromString(jsonString) { } } -async function exportToFile() { +/** @param {MouseEvent} e */ +async function exportToFile(e) { + e.preventDefault(); await require(['/js/storage-util']); + const keepDupSections = e.type === 'contextmenu' || e.shiftKey; const data = [ Object.assign({ [prefs.STORAGE_KEY]: prefs.values, @@ -353,8 +357,9 @@ async function exportToFile() { const copy = {}; for (let [key, val] of Object.entries(style)) { if (key === 'sections' - // Keeping dummy `sections` for compatibility with older Stylus - ? !style.usercssData || (val = [{code: ''}]) + // Keeping dummy `sections` for compatibility with older Stylus + // even in deduped backup so the user can resave/reconfigure the style to rebuild it. + ? !style.usercssData || keepDupSections || (val = [{code: ''}]) : typeof val !== 'object' || !isEmptyObj(val)) { copy[key] = val; } diff --git a/manage/manage.css b/manage/manage.css index a6f88b21..75b490da 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -262,7 +262,6 @@ a:hover { #backup-buttons { display: flex; flex-wrap: wrap; - margin-top: .5rem; } #backup-buttons button { @@ -300,10 +299,13 @@ a:hover { margin-top: .1em; margin-bottom: .1em; } - #header summary:hover h2 { border-color: #bbb; } +#header summary h2 [data-cmd="note"] { + display: flex; + align-items: center; +} /* compact layout */