Merge pull request #1307 (slightly modified)

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: rgba(255, 255, 255, 0.8);
     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>save</title>
     <path class="path1" d="M128 384h192v-96h-192v96zM352 384h32v-224q0-3.5-2.5-9.625t-5-8.625l-70.25-70.25q-2.5-2.5-8.5-5t-9.75-2.5v104q0 10-7 17t-17 7h-144q-10 0-17-7t-7-17v-104h-32v320h32v-104q0-10 7-17t17-7h208q10 0 17 7t7 17v104zM256 152v-80q0-3.25-2.375-5.625t-5.625-2.375h-48q-3.25 0-5.625 2.375t-2.375 5.625v80q0 3.25 2.375 5.625t5.625 2.375h48q3.25 0 5.625-2.375t2.375-5.625zM416 160v232q0 10-7 17t-17 7h-336q-10 0-17-7t-7-17v-336q0-10 7-17t17-7h232q10 0 22 5t19 12l70 70q7 7 12 19t5 22z"></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

@@ -342,6 +342,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'
 );
@@ -330,7 +330,7 @@ var buildAllFirewallRows = function() {
 
 var updateDfButtonsPosition = function() {
     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');
 };
 
 /******************************************************************************/
@@ -654,6 +654,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
@@ -737,6 +748,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-save"><use xlink:href="img/icons.svg#icon-save"></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-save"></use></svg></div>
+            </div>
         </div>
     </div>