export in compat mode on shift-click/right-click

_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"

manage.html

@@ -320,8 +320,13 @@
 
     <div class="settings-column">
       <details id="backup" data-pref="manage.backup.expanded">
-        <summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
-        <span id="backup-message" i18n-text="backupMessage"></span>
+        <summary>
+          <h2 id="backup-title" i18n-text="backupButtons">
+            <a tabindex="0" i18n-title="backupMessage" data-cmd="note">
+              <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+            </a>
+          </h2>
+        </summary>
         <div id="backup-buttons">
           <button id="file-all-styles" i18n-text="exportLabel"></button>
           <button id="unfile-all-styles" i18n-text="importLabel"></button>

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;
       }

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 */