polish recipe-related code, user interface

src/_locales/en/messages.json

@@ -155,6 +155,14 @@
         "message": "No web page found",
         "description": "Displays in place of matrix when no data is found for the current page"
     },
+    "matrixRecipeImportTip" : {
+        "message": "Import rules",
+        "description": "Used as a tooltip for the recipe import button"
+    },
+    "matrixRecipeSaveTip" : {
+        "message": "Save rules",
+        "description": "Used as a tooltip for the recipe padlock button"
+    },
 
     "statsPageTitle" : {
         "message": "uMatrix – Statistics",

src/css/popup.css

@@ -159,7 +159,7 @@ body .toolbar button.fa {
     }
 
 .dropdown-menu-capture {
-    background-color: transparent;
+    background-color: rgba(0,0,0,0.2);
     border: 0;
     bottom: 0;
     display: none;
@@ -171,6 +171,10 @@ body .toolbar button.fa {
     top: 0;
     z-index: 300;
     }
+.dropdown-menu-capture.dropdown-menu-centered > .dropdown-menu {
+    left: 4em;
+    right: 4em;
+    }
 .dropdown-menu-capture.show {
     display: block;
     }
@@ -211,14 +215,15 @@ body .toolbar button.fa {
     }
 
 button > span.badge {
-    padding: 1px 1px;
+    background-color: rgba(240,240,240,0.75);
+    bottom: 1px;
+    color: #000;
     display: inline-block;
     font-size: 40%;
+    padding: 1px 1px;
+    pointer-events: none;
     position: absolute;
     right: 1px;
-    bottom: 1px;
-    color: #000;
-    background-color: rgba(240,240,240,0.75)
     }
 button.disabled > span.badge {
     display: none;
@@ -238,7 +243,6 @@ button.disabled > span.badge {
     padding: 0;
     }
 .recipe {
-    cursor: pointer;
     list-style-type: none;
     white-space: nowrap;
     }
@@ -266,15 +270,21 @@ button.disabled > span.badge {
     }
 .recipe .name {
     color: #000;
+    cursor: default;
     flex-grow: 1;
+    padding: 0.4em 0;
     }
+.recipe .importer,
 .recipe .committer {
+    cursor: pointer;
     display: none;
     font-size: 120%;
     padding: 0.4em;
-    width: 0.8em;
+    text-align: center;
+    width: 1em;
     }
-.recipe.mustCommit .committer {
+.recipe.mustImport .importer,
+.recipe.mustCommit:not(.mustImport) .committer {
     display: inline;
     }
 .recipe:hover {

src/hosts-files.html

@@ -21,7 +21,7 @@
 <div class="assets">
     <div data-i18n="assetsHostsSection"></div>
     <div>
-        <p data-i18n="hostsFilesPrompt"></p>
+        <p><span data-i18n="hostsFilesPrompt"></span>&nbsp;<a class="fa info" href="https://github.com/gorhill/uMatrix/wiki/Preset-whitelisted-and-blacklisted-domains#preset-blacklist-rules" target="_blank">&#xf05a;</a></p>
         <p id="listsOfBlockedHostsPrompt"></p>
         <ul id="hosts">
             <li class="listEntry notAnAsset toImport"><input type="checkbox" id="importHosts"><label for="importHosts" data-i18n="assetsImportLabel"></label><!--
@@ -33,7 +33,7 @@
 <div class="assets">
     <div data-i18n="assetsRecipesSection"></div>
     <div>
-        <p data-i18n="assetsRecipesSummary"></p>
+        <p><span data-i18n="assetsRecipesSummary"></span>&nbsp;<a class="fa info" href="https://github.com/gorhill/uMatrix/wiki/Ruleset-recipes" target="_blank">&#xf05a;</a></p>
         <ul id="recipes">
             <li class="listEntry notAnAsset toImport"><input type="checkbox" id="importRecipes"><label for="importRecipes" data-i18n="assetsImportLabel"></label><!--
                 --><textarea dir="ltr" spellcheck="false" placeholder="hostsFilesExternalListsHint"></textarea>

src/js/messaging.js

@@ -349,7 +349,7 @@ var onMessage = function(request, sender, callback) {
         break;
 
     case 'fetchRecipeCommitStatuses':
-        response = µm.recipeManager.commitStatuses(request);
+        response = µm.recipeManager.statuses(request);
         break;
 
     case 'toggleMatrixSwitch':

src/js/popup.js

@@ -1310,10 +1310,19 @@ let recipeManager = (function() {
     }
 
     function apply(ev) {
-        if ( ev.target.classList.contains('expander') ) {
+        if (
+            ev.target.classList.contains('expander') ||
+            ev.target.classList.contains('name')
+        ) {
             ev.currentTarget.classList.toggle('expanded');
             return;
         }
+        if (
+            ev.target.classList.contains('importer') === false &&
+            ev.target.classList.contains('committer') === false
+        ) {
+            return;
+        }
         let root = ev.currentTarget;
         let ruleset = root.querySelector('.ruleset');
         let commit = ev.target.classList.contains('committer');
@@ -1326,6 +1335,7 @@ let recipeManager = (function() {
             },
             updateMatrixSnapshot
         );
+        root.classList.remove('mustImport');
         if ( commit ) {
             root.classList.remove('mustCommit');
         }
@@ -1341,6 +1351,7 @@ let recipeManager = (function() {
                 recipe.ruleset.replace(reScopeAlias, '$1' + details.scope + '$2'),
                 ul
             );
+            li.classList.toggle('mustImport', recipe.mustImport === true);
             li.classList.toggle('mustCommit', recipe.mustCommit === true);
             li.addEventListener('click', apply);
         }
@@ -1448,8 +1459,10 @@ function dropDownMenuShow(button) {
     var menu = menuOverlay.querySelector('.dropdown-menu');
     var menuRect = menu.getBoundingClientRect();
     var menuLeft = butnNormalLeft * (viewRect.width - menuRect.width);
-    menu.style.left = menuLeft.toFixed(0) + 'px';
     menu.style.top = butnRect.bottom + 'px';
+    if ( menuOverlay.classList.contains('dropdown-menu-centered') === false ) {
+        menu.style.left = menuLeft.toFixed(0) + 'px';
+    }
 }
 
 function dropDownMenuHide() {

src/js/recipe-manager.js

@@ -148,99 +148,118 @@
         rawRecipes = [];
     };
 
-    return {
-        apply: function(details) {
-            let µm = µMatrix;
-            let tMatrix = µm.tMatrix;
-            let pMatrix = µm.pMatrix;
-            let mustPersist = false;
-            for ( let rule of details.ruleset.split('\n') ) {
-                let parts = rule.split(/\s+/);
-                if ( parts.length < 2 ) { continue; }
-                let f0 = parts[0];
-                let f1 = parts[1];
-                // Switch
-                if ( f0.endsWith(':') ) {
-                    f0 = f0.slice(0, -1);
-                    if ( tMatrix.evaluateSwitchZ(f0, f1) !== false ) {
-                        tMatrix.setSwitchZ(f0, f1, false);
-                        if ( details.commit ) {
-                            pMatrix.setSwitchZ(f0, f1, false);
-                            mustPersist = true;
-                        }
+    // true = blocked, false = not blocked
+    var evaluateRuleParts = function(matrix, scope, parts) {
+        if ( parts[0].endsWith(':') ) {
+            return matrix.evaluateSwitchZ(parts[0].slice(0, -1), scope);
+        }
+        return matrix.evaluateCellZXY(scope, parts[1], parts[2]) === 1;
+    };
+
+    var api = {};
+
+    api.apply = function(details) {
+        let µm = µMatrix;
+        let tMatrix = µm.tMatrix;
+        let pMatrix = µm.pMatrix;
+        let mustPersist = false;
+        for ( let rule of details.ruleset.split('\n') ) {
+            let parts = rule.split(/\s+/);
+            if ( parts.length < 2 ) { continue; }
+            let f0 = parts[0];
+            let f1 = parts[1];
+            // Switch
+            if ( f0.endsWith(':') ) {
+                f0 = f0.slice(0, -1);
+                if ( tMatrix.evaluateSwitchZ(f0, f1) !== false ) {
+                    tMatrix.setSwitchZ(f0, f1, false);
+                    if ( details.commit ) {
+                        pMatrix.setSwitchZ(f0, f1, false);
+                        mustPersist = true;
                     }
-                    continue;
-                }
-                // Rule
-                if ( parts.length < 3 ) { continue; }
-                let f2 = parts[2];
-                let action = tMatrix.evaluateCellZXY(f0, f1, f2);
-                if ( (action & 3) === 1 ) {
-                    tMatrix.whitelistCell(f0, f1, f2);
-                }
-                if ( details.commit !== true ) { continue; }
-                action = pMatrix.evaluateCellZXY(f0, f1, f2);
-                if ( (action & 3) === 1 ) {
-                    pMatrix.whitelistCell(f0, f1, f2);
-                    mustPersist = true;
                 }
+                continue;
             }
-            if ( mustPersist ) {
-                µm.saveMatrix();
+            // Rule
+            if ( parts.length < 3 ) { continue; }
+            let f2 = parts[2];
+            let action = tMatrix.evaluateCellZXY(f0, f1, f2);
+            if ( (action & 3) === 1 ) {
+                tMatrix.whitelistCell(f0, f1, f2);
             }
-        },
-        fetch: function(srcHostname, desHostnames, callback) {
-            fromPendingStrings();
-            let out = [];
-            let fetched = new Set();
-            let tokens = getTokens(srcHostname + ' ' + desHostnames.join(' '));
-            for ( let token of tokens ) {
-                let recipes = recipeBook.get(token);
-                if ( recipes === undefined ) { continue; }
-                for ( let recipe of recipes ) {
-                    if ( fetched.has(recipe.id) ) { continue; }
-                    if (
-                        conditionMatch(
-                            recipe.condition,
-                            srcHostname,
-                            desHostnames
-                        )
-                    ) {
-                        out.push(recipe);
-                        fetched.add(recipe.id);
-                    }
+            if ( details.commit !== true ) { continue; }
+            action = pMatrix.evaluateCellZXY(f0, f1, f2);
+            if ( (action & 3) === 1 ) {
+                pMatrix.whitelistCell(f0, f1, f2);
+                mustPersist = true;
+            }
+        }
+        if ( mustPersist ) {
+            µm.saveMatrix();
+        }
+    };
+
+    api.fetch = function(srcHostname, desHostnames, callback) {
+        fromPendingStrings();
+        let out = [];
+        let fetched = new Set();
+        let tokens = getTokens(srcHostname + ' ' + desHostnames.join(' '));
+        for ( let token of tokens ) {
+            let recipes = recipeBook.get(token);
+            if ( recipes === undefined ) { continue; }
+            for ( let recipe of recipes ) {
+                if ( fetched.has(recipe.id) ) { continue; }
+                if (
+                    conditionMatch(
+                        recipe.condition,
+                        srcHostname,
+                        desHostnames
+                    )
+                ) {
+                    out.push(recipe);
+                    fetched.add(recipe.id);
                 }
             }
-            callback(out);
-        },
-        commitStatuses: function(details) {
-            let matrix = µMatrix.pMatrix;
-            for ( let recipe of details.recipes ) {
-                let ruleIter = new µMatrix.LineIterator(recipe.ruleset);
-                while ( ruleIter.eot() === false ) {
-                    let parts = ruleIter.next().split(/\s+/);
-                    if (
-                        matrix.evaluateCellZXY(
-                            details.scope,
-                            parts[1],
-                            parts[2]
-                        ) === 1
-                    ) {
-                        recipe.mustCommit = true;
-                        break;
-                    }
+        }
+        callback(out);
+    };
+
+    api.statuses = function(details) {
+        let pMatrix = µMatrix.pMatrix,
+            tMatrix = µMatrix.tMatrix;
+        for ( let recipe of details.recipes ) {
+            let ruleIter = new µMatrix.LineIterator(recipe.ruleset);
+            while ( ruleIter.eot() === false ) {
+                let parts = ruleIter.next().split(/\s+/);
+                if (
+                    recipe.mustCommit !== true &&
+                    evaluateRuleParts(pMatrix, details.scope, parts)
+                ) {
+                    recipe.mustCommit = true;
+                    if ( recipe.mustImport ) { break; }
+                }
+                if (
+                    recipe.mustImport !== true &&
+                    evaluateRuleParts(tMatrix, details.scope, parts)
+                ) {
+                    recipe.mustImport = true;
+                    if ( recipe.mustCommit ) { break; }
                 }
             }
-            return details;
-        },
-        fromString: function(raw) {
-            rawRecipes.push(raw);
-        },
-        reset: function() {
-            rawRecipes.length = 0;
-            recipeBook.clear();
         }
+        return details;
+    };
+
+    api.fromString = function(raw) {
+        rawRecipes.push(raw);
     };
+
+    api.reset = function() {
+        rawRecipes.length = 0;
+        recipeBook.clear();
+    };
+
+    return api;
 })();
 
 /******************************************************************************/

src/popup.html

@@ -74,7 +74,7 @@
     </div>
 </div>
 
-<div id="dropDownMenuRecipes" class="dropdown-menu-capture">
+<div id="dropDownMenuRecipes" class="dropdown-menu-capture dropdown-menu-centered">
     <div class="dropdown-menu">
         <ul></ul>
     </div>
@@ -111,7 +111,7 @@
         </symbol>
     </svg>
     -->
-    <li class="recipe"><div><span class="expander"></span><span class="name"></span><span class="fa committer">&#xf13e;</span></div><div class="ruleset"></div></li>
+    <li class="recipe"><div><span class="expander"></span><span class="name"></span><span class="fa importer" title="matrixRecipeImportTip">&#xf019;</span><span class="fa committer" title="matrixRecipeSaveTip">&#xf13e;</span></div><div class="ruleset"></div></li>
 </div>
 
 <script src="lib/punycode.js"></script>