From 440395db9f27423c07c30734d1fbe49749b09c82 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 25 Dec 2021 17:43:52 +0300
Subject: [PATCH] export in compat mode on shift-click/right-click

---
 _locales/en/messages.json |  4 ++--
 manage.html               |  9 +++++++--
 manage/import-export.js   | 11 ++++++++---
 manage/manage.css         |  6 ++++--
 4 files changed, 21 insertions(+), 9 deletions(-)

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