support append from cloud storage + uniformize buttons visual in dash…

…board

src/1p-filters.html

@@ -14,11 +14,16 @@
 <div id="cloudWidget" class="hide" data-cloud-entry="myFiltersPane"></div>
 
 <p data-i18n="1pFormatHint"></p>
-<p><button id="userFiltersApply" class="important" type="button" disabled="true" data-i18n="1pApplyChanges"></button></p>
-<textarea class="userFilters" id="userFilters" dir="auto" spellcheck="false"></textarea>
-<p><button id="importUserFiltersFromFile" data-i18n="1pImport"></button> &emsp;
-   <button id="exportUserFiltersToFile" data-i18n="1pExport"></button>
-   <input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput"></p>
+<p>
+    <button id="userFiltersApply" class="custom important" type="button" disabled="true" data-i18n="1pApplyChanges"></button>&ensp;
+    <button id="userFiltersRevert" class="custom" type="button" disabled="true" data-i18n="genericRevert"></button>
+</p>
+<p><textarea class="userFilters" id="userFilters" dir="auto" spellcheck="false"></textarea></p>
+<p>
+    <button id="importUserFiltersFromFile" class="custom" data-i18n="1pImport"></button>&ensp;
+    <button id="exportUserFiltersToFile" class="custom" data-i18n="1pExport"></button>
+    <input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
+</p>
 
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>

src/3p-filters.html

@@ -17,7 +17,7 @@
     <button id="buttonApply" class="important disabled" data-i18n="3pApplyChanges"></button>
     <ul id="options">
         <li><input type="checkbox" id="autoUpdate"><label data-i18n="3pAutoUpdatePrompt1" for="autoUpdate"></label>&ensp;
-            <button class="important disabled" id="buttonUpdate" data-i18n="3pUpdateNow"></button>
+            <button class="custom important disabled" id="buttonUpdate" data-i18n="3pUpdateNow"></button>
             <button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button>
         <li><input type="checkbox" id="parseCosmeticFilters"><label data-i18n="3pParseAllABPHideFiltersPrompt1" for="parseCosmeticFilters"></label>
         <button class="whatisthis"></button>
@@ -29,8 +29,9 @@
 
 <div id="externalListsDiv">
 <p data-i18n="3pExternalListsHint" style="margin: 0 0 0.25em 0; font-size: 13px;"></p>
-<textarea id="externalLists" dir="ltr" spellcheck="false"></textarea>
-<p style="margin: 0.25em 0 0 0"><button id="externalListsApply" class="important" disabled="true" data-i18n="3pExternalListsApply"></button></p>
+<p style="margin: 0.25em 0 0 0">
+    <textarea id="externalLists" dir="ltr" spellcheck="false"></textarea>
+    <button id="externalListsApply" class="custom important" disabled="true" data-i18n="3pExternalListsApply"></button></p>
 </div>
 
 <div id="busyOverlay">

src/_locales/en/messages.json

@@ -615,6 +615,10 @@
     "message": "Submit",
     "description": "for generic 'submit' buttons"
   },
+  "genericRevert": {
+    "message": "Revert",
+    "description": "for generic 'revert' buttons"
+  },
   "dummy":{
     "message":"This entry must be the last one",
     "description":"so we dont need to deal with comma for last entry"

src/css/3p-filters.css

@@ -73,28 +73,6 @@ li.listEntry > a:nth-of-type(3) {
 .dim {
     opacity: 0.5;
     }
-/* I designed the button with: http://charliepark.org/bootstrap_buttons/ */
-button.custom {
-    padding: 0.6em 1em;
-    border: 1px solid transparent;
-    border-color: #80b3ff #80b3ff hsl(216, 100%, 75%);
-    border-radius: 3px;
-    background-color: hsl(216, 100%, 75%);
-    background-image: linear-gradient(#a8cbff, #80b3ff);
-    background-repeat: repeat-x;
-    color: #222;
-    opacity: 0.8;
-    }
-button.custom.disabled {
-    border-color: #dddddd #dddddd hsl(36, 0%, 85%);
-    background-color: hsl(36, 0%, 72%);
-    background-image: linear-gradient(#f2f2f2, #dddddd);
-    color: #aaa;
-    pointer-events: none;
-    }
-button.custom:hover {
-    opacity: 1.0;
-    }
 #buttonApply {
     display: initial;
     position: fixed;

src/css/common.css

@@ -17,6 +17,30 @@ body {
     color: black;
     font: 14px/1.3 sans-serif;
     }
+/* I designed the button with: http://charliepark.org/bootstrap_buttons/ */
+button.custom {
+    padding: 0.6em 1em;
+    border: 1px solid transparent;
+    border-color: #ccc #ccc #bbb #bbb;
+    border-radius: 3px;
+    background-color: hsl(216, 0%, 75%);
+    background-image: linear-gradient(#f2f2f2, #dddddd);
+    background-repeat: repeat-x;
+    color: #000;
+    opacity: 0.8;
+    }
+button.custom.disabled,
+button.custom[disabled] {
+    border-color: #ddd #ddd hsl(36, 0%, 85%);
+    background-color: hsl(36, 0%, 72%);
+    background-image: linear-gradient(#f2f2f2, #dddddd);
+    color: #666;
+    opacity: 0.6;
+    pointer-events: none;
+    }
+button.custom:hover {
+    opacity: 1.0;
+    }
 button.important {
     padding: 0.6em 1em;
     border: 1px solid transparent;
@@ -28,14 +52,6 @@ button.important {
     color: #222;
     opacity: 0.8;
     }
-button.important[disabled],
-button.important.disabled {
-    border-color: #dddddd #dddddd hsl(36, 0%, 85%);
-    background-color: hsl(36, 0%, 72%);
-    background-image: linear-gradient(#f2f2f2, #dddddd);
-    color: #888;
-    pointer-events: none;
-    }
 button.important:hover {
     opacity: 1.0;
     }

src/dyna-rules.html

@@ -19,8 +19,8 @@
     <div class="pane left">
         <div class="ruleActions">
             <h2 data-i18n="rulesPermanentHeader"></h2>
-            <button type="button" id="exportButton" data-i18n="rulesExport"></button>
-            <button type="button" id="revertButton" data-i18n="rulesRevert"></button>
+            <button type="button" class="custom" id="exportButton" data-i18n="rulesExport"></button>
+            <button type="button" class="custom" id="revertButton" data-i18n="rulesRevert"></button>
         </div>
         <div class="rulesContainer">
             <ul></ul>
@@ -29,11 +29,11 @@ <h2 data-i18n="rulesPermanentHeader"></h2>
     <div class="pane right">
         <div class="ruleActions">
             <h2 data-i18n="rulesTemporaryHeader"></h2>
-            <button type="button" id="commitButton" data-i18n="rulesCommit"></button>
-            <button type="button" id="editEnterButton" data-i18n="rulesEdit"></button>
-            <button type="button" id="editStopButton" data-i18n="rulesEditSave"></button>
-            <button type="button" id="editCancelButton" data-i18n="rulesEditDiscard"></button>
-            <button type="button" id="importButton" data-i18n="rulesImport"></button>
+            <button type="button" class="custom" id="commitButton" data-i18n="rulesCommit"></button>
+            <button type="button" class="custom" id="editEnterButton" data-i18n="rulesEdit"></button>
+            <button type="button" class="custom" id="editStopButton" data-i18n="rulesEditSave"></button>
+            <button type="button" class="custom" id="editCancelButton" data-i18n="rulesEditDiscard"></button>
+            <button type="button" class="custom" id="importButton" data-i18n="rulesImport"></button>
         </div>
         <div class="rulesContainer">
             <textarea spellcheck="false"></textarea>

src/js/1p-filters.js

@@ -19,7 +19,7 @@
     Home: https://github.com/gorhill/uBlock
 */
 
-/* global vAPI, uDom */
+/* global vAPI, uDom, uBlockDashboard */
 
 /******************************************************************************/
 
@@ -40,8 +40,9 @@ var messager = vAPI.messaging.channel('1p-filters.js');
 // This is to give a visual hint that the content of user blacklist has changed.
 
 function userFiltersChanged() {
-    uDom.nodeFromId('userFiltersApply').disabled = 
-        uDom('#userFilters').val().trim() === cachedUserFilters;
+    var changed = uDom.nodeFromId('userFilters').value.trim() !== cachedUserFilters;
+    uDom.nodeFromId('userFiltersApply').disabled = !changed;
+    uDom.nodeFromId('userFiltersRevert').disabled = !changed;
 }
 
 /******************************************************************************/
@@ -53,6 +54,7 @@ function renderUserFilters() {
         }
         cachedUserFilters = details.content.trim();
         uDom.nodeFromId('userFilters').value = details.content;
+        userFiltersChanged();
     };
     messager.send({ what: 'readUserFilters' }, onRead);
 }
@@ -133,14 +135,14 @@ var exportUserFiltersToFile = function() {
         .replace('{{datetime}}', now.toLocaleString())
         .replace(/ +/g, '_');
     vAPI.download({
-        'url': 'data:text/plain;charset=utf-8,' + encodeURIComponent(val),
+        'url': 'data:text/plain;charset=utf-8,' + encodeURIComponent(val + '\n'),
         'filename': filename
     });
 };
 
 /******************************************************************************/
 
-var userFiltersApplyHandler = function() {
+var applyChanges = function() {
     var onWritten = function(details) {
         if ( details.error ) {
             return;
@@ -156,17 +158,26 @@ var userFiltersApplyHandler = function() {
     messager.send(request, onWritten);
 };
 
+var revertChanges = function() {
+    uDom.nodeFromId('userFilters').value = cachedUserFilters + '\n';
+    userFiltersChanged();
+};
+
 /******************************************************************************/
 
 var getCloudData = function() {
     return uDom.nodeFromId('userFilters').value;
 };
 
-var setCloudData = function(data) {
+var setCloudData = function(data, append) {
     if ( typeof data !== 'string' ) {
         return;
     }
-    uDom.nodeFromId('userFilters').value = data;
+    var textarea = uDom.nodeFromId('userFilters');
+    if ( append ) {
+        data = uBlockDashboard.mergeNewLines(textarea.value, data);
+    }
+    textarea.value = data;
     userFiltersChanged();
 };
 
@@ -180,7 +191,8 @@ uDom('#importUserFiltersFromFile').on('click', startImportFilePicker);
 uDom('#importFilePicker').on('change', handleImportFilePicker);
 uDom('#exportUserFiltersToFile').on('click', exportUserFiltersToFile);
 uDom('#userFilters').on('input', userFiltersChanged);
-uDom('#userFiltersApply').on('click', userFiltersApplyHandler);
+uDom('#userFiltersApply').on('click', applyChanges);
+uDom('#userFiltersRevert').on('click', revertChanges);
 
 renderUserFilters();
 

src/js/cloud-ui.js

@@ -110,9 +110,9 @@ var pushData = function() {
 
 /******************************************************************************/
 
-var pullData = function() {
+var pullData = function(ev) {
     if ( typeof self.cloud.onPull === 'function' ) {
-        self.cloud.onPull(self.cloud.data);
+        self.cloud.onPull(self.cloud.data, ev.shiftKey);
     }
 };
 
@@ -196,4 +196,6 @@ messager.send({ what: 'cloudGetOptions' }, onInitialize);
 
 /******************************************************************************/
 
+// https://www.youtube.com/watch?v=aQFp67VoiDA
+
 })();

src/js/dashboard-common.js

@@ -24,7 +24,86 @@
 
 /******************************************************************************/
 
-uDom.onLoad(function() {
+self.uBlockDashboard = self.uBlockDashboard || {};
+
+/******************************************************************************/
+
+// Helper for client panes:
+//   Remove literal duplicate lines from a set based on another set.
+
+self.uBlock.mergeNewLines = function(text, newText) {
+    var lineBeg, textEnd, lineEnd;
+    var line, hash, bucket;
+
+    // Step 1: build dictionary for existing lines.
+    var fromDict = Object.create(null);
+    lineBeg = 0;
+    textEnd = text.length;
+    while ( lineBeg < textEnd ) {
+        lineEnd = text.indexOf('\n', lineBeg);
+        if ( lineEnd === -1 ) {
+            lineEnd = text.indexOf('\r', lineBeg);
+            if ( lineEnd === -1 ) {
+                lineEnd = textEnd;
+            }
+        }
+        line = text.slice(lineBeg, lineEnd).trim();
+        lineBeg = lineEnd + 1;
+        if ( line.length === 0 ) {
+            continue;
+        }
+        hash = line.slice(0, 8);
+        bucket = fromDict[hash];
+        if ( bucket === undefined ) {
+            fromDict[hash] = line;
+        } else if ( typeof bucket === 'string' ) {
+            fromDict[hash] = [bucket, line];
+        } else /* if ( Array.isArray(bucket) ) */ {
+            bucket.push(line);
+        }
+    }
+
+    // Step 2: use above dictionary to filter out duplicate lines.
+    var out = [ '' ];
+    lineBeg = 0;
+    textEnd = newText.length;
+    while ( lineBeg < textEnd ) {
+        lineEnd = newText.indexOf('\n', lineBeg);
+        if ( lineEnd === -1 ) {
+            lineEnd = newText.indexOf('\r', lineBeg);
+            if ( lineEnd === -1 ) {
+                lineEnd = textEnd;
+            }
+        }
+        line = newText.slice(lineBeg, lineEnd).trim();
+        lineBeg = lineEnd + 1;
+        if ( line.length === 0 ) {
+            if ( out[out.length - 1] !== '' ) {
+                out.push('');
+            }
+            continue;
+        }
+        bucket = fromDict[line.slice(0, 8)];
+        if ( bucket === undefined ) {
+            out.push(line);
+            continue;
+        }
+        if ( typeof bucket === 'string' && line !== bucket ) {
+            out.push(line);
+            continue;
+        }
+        if ( bucket.indexOf(line) === -1 ) {
+            out.push(line);
+            /* continue; */
+        }
+    }
+
+    return text.trim() + '\n' + out.join('\n');
+};
+
+/******************************************************************************/
+
+(function() {
     // Open links in the proper window
     uDom('a').attr('target', '_blank');
     uDom('a[href*="dashboard.html"]').attr('target', '_parent');
@@ -34,4 +113,4 @@ uDom.onLoad(function() {
             .descendants('.whatisthis-expandable')
             .toggleClass('whatisthis-expanded');
     });
-});
+})();

src/js/dyna-rules.js

@@ -158,7 +158,7 @@ function exportUserRulesToFile() {
         .replace('{{datetime}}', now.toLocaleString())
         .replace(/ +/g, '_');
     vAPI.download({
-        'url': 'data:text/plain,' + encodeURIComponent(rulesFromHTML('#diff .left li')),
+        'url': 'data:text/plain,' + encodeURIComponent(rulesFromHTML('#diff .left li') + '\n'),
         'filename': filename,
         'saveAs': true
     });
@@ -238,10 +238,13 @@ var getCloudData = function() {
     return rulesFromHTML('#diff .left li');
 };
 
-var setCloudData = function(data) {
+var setCloudData = function(data, append) {
     if ( typeof data !== 'string' ) {
         return;
     }
+    if ( append ) {
+        data = rulesFromHTML('#diff .right li') + '\n' + data;
+    }
     var request = {
         'what': 'setSessionRules',
         'rules': data