Add export & update all buttons to header

_locales/en/messages.json

@@ -336,7 +336,11 @@
   },
   "exportLabel": {
     "message": "Export",
-    "description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)"
+    "description": "Label for the button to export a style ('edit' page) or bulk styles ('manage' page)"
+  },
+  "exportAllLabel": {
+    "message": "Export All",
+    "description": "Label for the button to export all styles ('manage' page)"
   },
   "externalFeedback": {
     "message": "Feedback",

manage.html

@@ -243,16 +243,6 @@
       <svg class="svg-icon ui-config" viewBox="0 0 24 24"><use xlink:href="#svg-icon-config"/></svg>
     </a>
 
-    <div id="manage-backups" i18n-data-title="backupImport" class="tt-w">
-      <svg class="svg-icon" viewBox="0 0 24 24">
-        <path d="M20.5 5.2l-1.4-1.6C19 3.2 18.5 3 18 3H6c-.5 0-.9.2-1.2.6L3.5 5.2A2 2 0 0 0 3 6.5V19c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V6.5c0-.5-.2-1-.5-1.3zM6.2 5h11.6l.8 1H5.4l.8-1zM5 19V8h14v11H5zm3-5h2.5v3h3v-3H16l-4-4z"/>
-      </svg>
-      <div class="dropdown">
-        <a href="#" id="unfile-all-styles" i18n-text="bckpInstStyles"></a>
-        <a href="#" id="sync-dropbox-import" i18n-text="syncDropboxStyles"></a>
-      </div>
-    </div>
-
     <a href="#" id="manage-shortcuts-button" class="chromium-only tt-w" i18n-data-title="shortcutsNote">
       <svg class="svg-icon" viewBox="0 0 24 24">
         <path d="M20 7v10H4V7h16m0-2H4a2 2 0 0 0-1.99 2L2 17c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V7a2 2 0
@@ -261,6 +251,34 @@
       </svg>
     </a>
 
+    <span class="spacer"></span>
+
+    <a href="#" id="update-all" class="tt-w" i18n-data-title="checkAllUpdates">
+      <svg class="svg-icon" viewBox="0 0 24 24">
+        <path d="M11 8v5l4.25 2.52.77-1.28-3.52-2.09V8zm10 2V3l-2.64 2.64A9 9 0 1 0 21 12h-2a7 7 0 1 1-2.05-4.95L14 10h7z"/>
+      </svg>
+    </a>
+
+    <div class="manage-backups tt-w" i18n-data-title="backupImport">
+      <svg class="svg-icon" viewBox="0 0 24 24">
+        <path d="M20.54 5.23l-1.39-1.68A1.45 1.45 0 0 0 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V6.5c0-.48-.17-.93-.46-1.27zM6.24 5h11.52l.81.97H5.44l.8-.97zM5 19V8h14v11H5zm8.45-9h-2.9v3H8l4 4 4-4h-2.55z"/>
+      </svg>
+      <div class="dropdown">
+        <a href="#" id="unfile-all-styles" i18n-text="bckpInstStyles"></a>
+        <a href="#" id="sync-dropbox-import" i18n-text="syncDropboxStyles"></a>
+      </div>
+    </div>
+
+    <div class="manage-backups tt-w" i18n-data-title="exportAllLabel">
+      <svg class="svg-icon" viewBox="0 0 24 24">
+        <path d="M20.5 5.2l-1.4-1.6C19 3.2 18.5 3 18 3H6c-.5 0-.9.2-1.2.6L3.5 5.2A2 2 0 0 0 3 6.5V19c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V6.5c0-.5-.2-1-.5-1.3zM6.2 5h11.6l.8 1H5.4l.8-1zM5 19V8h14v11H5zm3-5h2.5v3h3v-3H16l-4-4z"/>
+      </svg>
+      <div class="dropdown">
+        <a href="#" id="file-all-styles" i18n-text="bckpInstStyles"></a>
+        <a href="#" id="sync-dropbox-export" i18n-text="syncDropboxStyles"></a>
+      </div>
+    </div>
+
     <span class="spacer"></span>
     <a href="https://add0n.com/stylus.html#features" target="_blank" i18n-data-title="linkGetHelp" class="tt-w">
       <svg class="svg-icon" viewBox="0 0 24 24">

manage/bulk-actions.js

@@ -11,6 +11,14 @@ const bulk = {
     $('#bulk-actions-apply').onclick = bulk.handleApply;
   },
 
+  // Update all button in header
+  updateAll: () => {
+    const toggle = $('#toggle-all-filters');
+    toggle.checked = false; // ensure click will check all styles
+    toggle.click();
+    checkUpdateBulk();
+  },
+
   checkApply: () => {
     const checkedEntries = $$('.entry-filter-toggle').filter(entry => entry.checked);
     if (checkedEntries.length > 0 && $('#bulk-actions-select').value !== '') {

manage/manage-actions.js

@@ -71,6 +71,12 @@ function initGlobalEvents() {
     openURL({url: URLS.configureCommands});
   };
 
+  $('#update-all').onclick = event => {
+    event.preventDefault();
+    handleEvent.toggleBulkActions({hidden: false});
+    bulk.updateAll();
+  }
+
   $$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
 
   document.addEventListener('visibilitychange', onVisibilityChange);

manage/manage.css

@@ -9,6 +9,7 @@
 
   --header-bg-color: #333;
   --header-text-color: #ddd;
+  --header-text-hover-color: hsla(180, 100%, 20%, 1);
   --header-icon-color: #888;
   --header-icon-hover-color: hsla(180, 99%, 58%, 1);
 
@@ -152,7 +153,7 @@ a:hover {
 
 #main-header a:hover,
 #main-actions a:hover svg,
-#manage-backups:hover svg {
+.manage-backups:hover svg {
   color: var(--header-icon-hover-color);
   fill: var(--header-icon-hover-color);
 }
@@ -795,11 +796,11 @@ details.applies-to-extra[open] {
 }
 
 /* export/import buttons */
-#manage-backups {
+.manage-backups {
   position: relative;
 }
 
-#manage-backups .dropdown {
+.manage-backups .dropdown {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
@@ -808,7 +809,7 @@ details.applies-to-extra[open] {
   z-index: 101;
 }
 
-#manage-backups .dropdown a {
+.manage-backups .dropdown a {
   color: black;
   padding: 8px;
   font-size: 12px;
@@ -816,12 +817,13 @@ details.applies-to-extra[open] {
   display: block;
 }
 
-#manage-backups .dropdown a:hover {
+#main-header .manage-backups .dropdown a:hover {
   /* background-color: #f2f2f2 */
-  background-color: #e9e9e9
+  background-color: #e9e9e9;
+  color: var(--header-text-hover-color);
 }
 
-#manage-backups:hover .dropdown {
+.manage-backups:hover .dropdown {
   display: block;
   right: -20px;
   top: 99%;
@@ -899,11 +901,11 @@ details.applies-to-extra[open] {
     width: 100%;
     height: auto;
   }
-  #manage-backups {
+  .manage-backups {
     display: inline-block;
     vertical-align: center;
   }
-  #manage-backups:hover .dropdown {
+  .manage-backups:hover .dropdown {
     display: block;
     left: -20px;
     right: auto;