Show reminder to backup styles

_locales/en/messages.json

@@ -92,6 +92,10 @@
     "message": "Select a file or drag and drop to this page.",
     "description": "Message for backup"
   },
+  "backupReminderMessage": {
+    "message": "It's about that time to backup (export) your styles!",
+    "description": "Tooltip shown to remind users to backup their styles"
+  },
   "bckpInstStyles": {
     "message": "Export styles"
   },

manage.html

@@ -373,6 +373,7 @@
       <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>
+        <span id="backup-reminder-tooltip" i18n-text="backupReminderMessage"></span>
         <div id="backup-buttons">
           <div class="dropdown">
             <button class="dropbtn">

manage/import-export.js

@@ -11,6 +11,10 @@ onDOMready().then(() => {
   $('#unfile-all-styles').onclick = () => {
     importFromFile({fileTypeFilter: STYLUS_BACKUP_FILE_EXT});
   };
+  $('#backup-reminder-tooltip').onclick = () => {
+    setLastBackup({ update: false });
+  };
+  isItTimeToBackup();
 
   Object.assign(document.body, {
     ondragover(event) {
@@ -51,6 +55,40 @@ onDOMready().then(() => {
   });
 });
 
+function showTimeToBackupTooltip() {
+  const wrap = $('#backup');
+  if (wrap) {
+    $('#backup').open = true;
+    wrap.classList.add('show-reminder');
+  }
+}
+
+function setLastBackup({ update = true }) {
+  const wrap = $('#backup');
+  if (update) {
+    localStorage['stylus-last-backup'] = Date.now();
+  }
+  if (wrap) {
+    wrap.classList.remove('show-reminder');
+  }
+  if (!prefs.get('manage.backup.expanded')) {
+    $('#backup').removeAttribute('open');
+  }
+}
+
+function isItTimeToBackup() {
+  // show message every 14 days
+  const timeSinceLastBackup = 14 * (24 * 60 * 60 * 1000);
+  const lastBackup = localStorage['stylus-last-backup'];
+  if (!lastBackup) {
+    // initial setting
+    return setLastBackup();
+  }
+  if (Date.now() > Number(lastBackup) + timeSinceLastBackup) {
+    showTimeToBackupTooltip();
+  }
+}
+
 function importFromFile({fileTypeFilter, file} = {}) {
   return new Promise(resolve => {
     const fileInput = document.createElement('input');
@@ -92,6 +130,7 @@ function importFromFile({fileTypeFilter, file} = {}) {
             })
           ).then(numStyles => {
             document.body.style.cursor = '';
+            setLastBackup();
             resolve(numStyles);
           });
         };
@@ -299,6 +338,7 @@ function exportToFile() {
     document.documentElement.appendChild(
       $create('iframe', {
         onload() {
+          setLastBackup();
           const text = JSON.stringify(styles, null, '\t');
           const type = 'application/json';
           this.onload = null;

manage/manage.css

@@ -1046,6 +1046,15 @@ input[id^="manage.newUI"] {
   text-overflow: ellipsis;
 }
 
+#backup.show-reminder[open] summary {
+  padding-bottom: 0;
+}
+
+#backup.show-reminder #backup-message,
+#backup:not(.show-reminder) #backup-reminder-tooltip {
+  display: none;
+}
+
 /* export/import buttons */
 #backup-buttons .dropbtn {
   padding: 3px 7px;
@@ -1072,6 +1081,14 @@ input[id^="manage.newUI"] {
   z-index: 1;
 }
 
+#backup-reminder-tooltip {
+  display: block;
+  padding: 10px;
+  background: #cb4;
+  color: #000;
+  cursor: pointer;
+}
+
 #backup-buttons .dropdown-content a {
   color: black;
   padding: 8px;