Add a button to remove all temporary changes

Fixes
https://github.com/chrisaljoudi/uBlock/issues/731#issuecomment-73964956

src/css/popup.css

@@ -338,22 +338,26 @@ body.dirty #refresh:hover {
     visibility: hidden;
     }
 
-#saveRules {
+#saveflushButtonGroup {
+    display: none;
+    position: fixed;
+}
+#saveRules,
+#flushRules {
     opacity: 0.7;
     background-color: #444;
     border-radius: 4px;
     color: rgb(255, 213, 123);
     cursor: pointer;
-    display: none;
     font-size: 35px;
     height: 35px;
     padding: 8px;
-    position: fixed;
     text-align: center;
     }
-#firewallContainer.dirty ~ #saveRules {
+#firewallContainer.dirty ~ #saveflushButtonGroup {
     display: block;
     }
-#firewallContainer.dirty ~ #saveRules:hover {
+#firewallContainer.dirty ~ #saveRules:hover,
+#firewallContainer.dirty ~ #flushRules:hover {
     opacity: 1;
     }

src/img/icons.svg

@@ -4,6 +4,10 @@
     <title>lock</title>
     <path class="path1" d="M749.715 511.999q22.857 0 38.857 16t16 38.857v329.143q0 22.857-16 38.857t-38.857 16h-548.571q-22.857 0-38.857-16t-16-38.857v-329.143q0-22.857 16-38.857t38.857-16h18.286v-182.857q0-105.714 75.143-180.857t180.857-75.143 180.857 75.143 75.143 180.857q0 14.857-10.857 25.714t-25.714 10.857h-36.571q-14.857 0-25.714-10.857t-10.857-25.714q0-60.571-42.857-103.429t-103.429-42.857-103.429 42.857-42.857 103.429v182.857h420.571z"></path>
 </symbol>
+<symbol id="icon-trash" viewBox="0 0 1024 1024">
+    <title>trash</title>
+    <path class="path1" d="M512 160v704q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-704q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM768 160v704q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-704q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1024 160v704q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-704 q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM480 1152h448l-48 117q-7 9 -17 11h-317q-10 -2 -17 -11zM1408 1120v-64q0 -14 -9 -23t-23 -9h-96v-948q0 -83 -47 -143.5t-113 -60.5h-832q-66 0 -113 58.5t-47 141.5v952h-96q-14 0 -23 9t-9 23v64q0 14 9 23t23 9h309l70 167 q15 37 54 63t79 26h320q40 0 79 -26t54 -63l70 -167h309q14 0 23 -9t9 -23z"></path>
+</symbol>
 <symbol id="icon-power" viewBox="0 0 1024 1024">
     <title>power</title>
     <path class="path1" d="M950.857 512q0 89.143-34.857 170.286t-93.714 140-140 93.714-170.286 34.857-170.286-34.857-140-93.714-93.714-140-34.857-170.286q0-104 46-196t129.429-154.286q24.571-18.286 54.571-14.286t47.714 28.571q18.286 24 14 54t-28.286 48.286q-56 42.286-86.571 103.429t-30.571 130.286q0 59.429 23.143 113.429t62.571 93.429 93.429 62.571 113.429 23.143 113.429-23.143 93.429-62.571 62.571-93.429 23.143-113.429q0-69.143-30.571-130.286t-86.571-103.429q-24-18.286-28.286-48.286t14-54q17.714-24.571 48-28.571t54.286 14.286q83.429 62.286 129.429 154.286t46 196zM585.143 73.143v365.714q0 29.714-21.714 51.429t-51.429 21.714-51.429-21.714-21.714-51.429v-365.714q0-29.714 21.714-51.429t51.429-21.714 51.429 21.714 21.714 51.429z"></path>

src/js/messaging.js

@@ -329,6 +329,14 @@ var onMessage = function(request, sender, callback) {
             µb.savePermanentFirewallRules();
             break;
 
+        case 'flushFirewallRules':
+            µb.sessionFirewall.copyRules(
+                µb.permanentFirewall,
+                request.srcHostname,
+                request.desHostnames
+            );
+            break;
+
         case 'toggleFirewallRule':
             µb.toggleFirewallRule(request);
             response = getStats(request.tabId);

src/js/popup.js

@@ -47,7 +47,7 @@ document.getElementById('dfPane').style.setProperty(
 
 // The padlock must be manually positioned:
 // - It's vertical position depends on the height on the title bar.
-document.getElementById('saveRules').style.setProperty(
+document.getElementById('saveflushButtonGroup').style.setProperty(
     'top',
     (document.getElementById('gotoPrefs').getBoundingClientRect().bottom + 4) + 'px'
 );
@@ -325,7 +325,7 @@ var buildAllFirewallRows = function() {
     // - Its horizontal position depends on whether there is a vertical
     //   scrollbar.
     var rect = document.getElementById('firewallContainer').getBoundingClientRect();
-    document.getElementById('saveRules').style.setProperty('left', (rect.left + 4) + 'px');
+    document.getElementById('saveflushButtonGroup').style.setProperty('left', (rect.left + 4) + 'px');
 
     updateAllFirewallCells();
 };
@@ -651,6 +651,17 @@ var saveFirewallRules = function() {
 
 /******************************************************************************/
 
+var flushFirewallRules = function() {
+    messager.send({
+        what: 'flushFirewallRules',
+        srcHostname: popupData.pageHostname,
+        desHostnames: popupData.hostnameDict
+    });
+    popupData.contentLastModified = -1;
+    uDom('#firewallContainer').removeClass('dirty');
+};
+
+/******************************************************************************/
 // Poll for changes.
 //
 // I couldn't find a better way to be notified of changes which can affect
@@ -734,6 +745,7 @@ uDom.onLoad(function () {
     uDom('h2').on('click', toggleFirewallPane);
     uDom('#refresh').on('click', reloadTab);
     uDom('#saveRules').on('click', saveFirewallRules);
+    uDom('#flushRules').on('click', flushFirewallRules);
     uDom('[data-i18n="popupAnyRulePrompt"]').on('click', toggleMinimize);
 });
 

src/popup.html

@@ -35,7 +35,11 @@
             <div><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="1p-script"> </span><span data-src="." data-des="*" data-type="1p-script"> </span></div>
             <div><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-script"> </span><span data-src="." data-des="*" data-type="3p-script"> </span></div>
             <div><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-frame"> </span><span data-src="." data-des="*" data-type="3p-frame"> </span></div>
-            </div><div id="saveRules"><svg class="icon icon-lock"><use xlink:href="img/icons.svg#icon-lock"></use></svg></div>
+            </div>
+            <div id="saveflushButtonGroup">
+              <div id="flushRules"><svg class="icon icon-trash"><use xlink:href="img/icons.svg#icon-trash"></use></svg></div>
+              <div id="saveRules"><svg class="icon icon-lock"><use xlink:href="img/icons.svg#icon-lock"></use></svg></div>
+            </div>
         </div>
     </div>