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,8 +148,17 @@
         rawRecipes = [];
     };
 
-    return {
-        apply: function(details) {
+    // 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;
@@ -188,8 +197,9 @@
         if ( mustPersist ) {
             µm.saveMatrix();
         }
-        },
-        fetch: function(srcHostname, desHostnames, callback) {
+    };
+
+    api.fetch = function(srcHostname, desHostnames, callback) {
         fromPendingStrings();
         let out = [];
         let fetched = new Set();
@@ -212,35 +222,44 @@
             }
         }
         callback(out);
-        },
-        commitStatuses: function(details) {
-            let matrix = µMatrix.pMatrix;
+    };
+
+    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 (
-                        matrix.evaluateCellZXY(
-                            details.scope,
-                            parts[1],
-                            parts[2]
-                        ) === 1
+                    recipe.mustCommit !== true &&
+                    evaluateRuleParts(pMatrix, details.scope, parts)
                 ) {
                     recipe.mustCommit = true;
-                        break;
+                    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) {
+    };
+
+    api.fromString = function(raw) {
         rawRecipes.push(raw);
-        },
-        reset: function() {
+    };
+
+    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>