Fix bulk import

_locales/en/messages.json

@@ -84,6 +84,10 @@
     "message": "Backup",
     "description": "Heading for backup"
   },
+  "backupImport": {
+    "message": "Import backup",
+    "description": "Tooltip for header import/restore backup icon"
+  },
   "backupMessage": {
     "message": "Select a file or drag and drop to this page.",
     "description": "Message for backup"

manage.html

@@ -150,7 +150,7 @@
   </template>
 
   <template data-id="appliesToEverything">
-    <span class="target" i18n-data-title="appliesToEverything">
+    <span class="target tt-w" i18n-data-title="appliesToEverything">
       <svg class="svg-icon world" viewBox="0 0 24 24">
         <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM4 12c0-.61.08-1.21.21-1.78L8.99 15v1c0
           1.1.9 2 2 2v1.93A8.01 8.01 0 0 1 4 12zm13.89 5.4a2 2 0 0 0-1.9-1.4h-1v-3a1 1 0 0
@@ -165,6 +165,21 @@
     </details>
   </template>
 
+  <template data-id="export">
+    <span i18n-text="backupMessage"></span>
+    <div class="dropdown">
+      <button class="dropbtn">
+        <span>Import</span>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+      </button>
+
+      <div class="dropdown-content">
+        <a href="#" class="unfile-all-styles" i18n-text="retrieveBckp"></a>
+        <a href="#" class="sync-dropbox-import" i18n-text="retrieveDropboxSync"></a>
+      </div>
+    </div>
+  </template>
+
   <script src="js/polyfill.js"></script>
   <script src="js/promisify.js"></script>
   <script src="js/dom.js"></script>
@@ -233,10 +248,18 @@
       </svg>
     </a>
 
+    <span class="spacer"></span>
+
     <a href="#" id="manage-options-button" i18n-data-title="openOptionsManage" class="tt-w">
       <svg class="svg-icon ui-config" viewBox="0 0 24 24"><use xlink:href="#svg-icon-config"/></svg>
     </a>
 
+    <a href="#" id="manage-backups-button" 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>
+    </a>
+
     <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
@@ -407,6 +430,19 @@
         <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
       </span>
       <button id="bulk-actions-apply" i18n-text="bulkActionsApply"></button>
+
+      <div class="dropdown export hidden">
+        <button class="dropbtn">
+          <span>Export</span>
+          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        </button>
+
+        <div class="dropdown-content">
+          <a href="#" id="file-all-styles" i18n-text="bckpInstStyles"></a>
+          <a href="#" id="sync-dropbox-export" i18n-text="syncDropboxStyles"></a>
+        </div>
+      </div>
+
       <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
       <svg class="svg-icon busy hidden" viewBox="0 0 24 24">
         <path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6
@@ -469,9 +505,7 @@
   <button id="apply-all-updates"></button>
   <button id="check-all-updates"></button>
   <button id="check-all-updates-force"></button>
-  <button id="file-all-styles"></button>
   <button id="unfile-all-styles"></button>
-  <button id="sorter-help"></button>
 </div>
 
   <!-- Applies to config, can't put this in a template because these inputs are bound to subscribed prefs -->
@@ -508,16 +542,6 @@
   <!-- <div id="manage-settings">
     <div class="settings-column">
 
-      <div id="sort-wrapper">
-        <div class="sorter-selection" i18n-title="sortLabel">
-          <select id="manage.newUI.sort"></select>
-          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-        </div>
-        <a href="#" id="sorter-help" tabindex="0">
-          <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-        </a>
-      </div>
-
       <div id="style-actions">
         <div id="update-check">
           <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>

manage/manage-actions.js

@@ -298,37 +298,35 @@ Object.assign(handleEvent, {
         dataset: {cmd: 'close'},
       }],
       onshow: box => {
-        box.addEventListener('change', handleEvent.toggleFavicons);
+        box.addEventListener('change', handleEvent.manageFavicons);
+        box.addEventListener('input', handleEvent.manageFavicons);
         $$('input', box).forEach(el => {
           el.dataset.id = el.id;
           el.id = null;
         });
       }
     }).then(() => {
-      $('#message-box').removeEventListener('change', handleEvent.toggleFavicons);
+      const box = $('#message-box')
+      box.removeEventListener('change', handleEvent.manageFavicons);
+      box.removeEventListener('input', handleEvent.manageFavicons);
     });
   },
 
-  toggleFavicons(event) {
+  manageFavicons(event) {
     event.stopPropagation();
     const box = $('#message-box-contents');
 
     let value = $('[data-id="manage.newUI.favicons"]', box).checked;
     prefs.set('manage.newUI.favicons', value);
-    // UI.favicons = value;
     // Updating the hidden inputs; not the inputs in the message box
     $('#manage.newUI.favicons').checked = value;
 
     value = $('[data-id="manage.newUI.faviconsGray"]', box).checked;
     prefs.set('manage.newUI.faviconsGray', value);
-    // UI.faviconsGray = value;
     $('#manage.newUI.faviconsGray').checked = value;
 
     value = $('[data-id="manage.newUI.targets"]', box).value;
     prefs.set('manage.newUI.targets', value);
-    // UI.targets = value;
-    //$('#manage.newUI.targets').value = value;
-
   },
 
 });
@@ -419,29 +417,19 @@ function switchUI({styleOnly} = {}) {
   }
 
 
-  // TO DO: Fix switching `prefs.set('manage.newUI.favicons', true)`
   const missingFavicons = UI.favicons && !$('.entry-applies-to img[src]');
-  if (changed.enabled || (missingFavicons && !UI.createStyleElement.parts)) {
-    const header = document.createDocumentFragment().appendChild($('.entry-header'));
-    installed.textContent = '';
-    installed.appendChild(header);
-    API.getAllStyles(true).then(UI.showStyles);
-    return;
-  }
   if (changed.targets) {
     for (const targets of $$('.entry .targets')) {
       const items = $$('.target', targets);
       const extra = $('.applies-to-extra', targets);
       const x = items.length === 54;
-      items.splice(0, UI.targets).every(el => {
+      items.splice(0, UI.targets).forEach(el => {
         if (!el.parentElement.classList.contains('targets')) {
           targets.insertBefore(el, extra);
-          return false;
         }
-        return true;
       });
       extra.classList.toggle('hidden', items.length < 1);
-      items.some((el, indx) => {
+      items.some(el => {
         if (!el.parentElement.classList.contains('applies-to-extra')) {
           extra.prepend(el);
           return false;

manage/manage.css

@@ -57,7 +57,7 @@ a:hover {
 
 #main-actions {
   display: flex;
-  width: 200px;
+  width: 260px;
   height: 40px;
   justify-content: space-between;
   align-items: center;
@@ -66,7 +66,7 @@ a:hover {
 .spacer {
   width: 10px;
   height: 1em;
-  border-right: 1px solid #777;
+  border-right: 1px solid rgba(119, 119, 119, .5);
   margin-right: 10px;
 }
 
@@ -296,6 +296,7 @@ a:hover {
 }
 
 #installed:not(.has-favicons) .targets img,
+#installed.has-favicons .targets img:not([src]),
 #installed.has-favicons .targets img[src] + svg {
   display: none;
 }
@@ -624,7 +625,7 @@ details.applies-to-extra[open] {
 }
 
 .manage-row {
-  padding: 2px 10px;
+  padding: 2px 18px;
   display: flex;
   align-items: center;
   justify-content: space-between;

manage/tooltips.css

@@ -23,10 +23,17 @@
   text-shadow: none;
   text-transform: none;
   white-space: pre;
-  word-wrap: break-word;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  max-width: 50vw;
   z-index: 1000000;
 }
 
+.targets [data-title]:after {
+  white-space: pre-wrap;
+  min-width: 240px;
+}
+
 .entry-last-update[data-title]:after {
   text-align: left;
 }