#671: this adds a tooltip for top-most cells in advanced user mode

src/_locales/en/messages.json

@@ -32,8 +32,8 @@
     "description":"appears as tab name in dashboard"
   },
   "statsPageName":{
-    "message":"uBlock₀ — Network request log",
+    "message":"uBlock₀ — Logger",
-    "description":"Title for the network request log window"
+    "description":"Title for the logger window"
   },
   "aboutPageName":{
     "message":"About",
@@ -72,8 +72,8 @@
     "description":"English: Enter element picker mode"
   },
   "popupTipLog":{
-    "message":"Go to request log",
+    "message":"Open the logger",
-    "description":"English: Go to request log"
+    "description":"Tooltip used for the logger icon in the panel"
   },
   "popupTipNoPopups":{
     "message":"Toggle the blocking of all popups for this site",
@@ -91,6 +91,14 @@
     "message":"Toggle the blocking of remote fonts for this site",
     "description":"English: Toggle the blocking of remote fonts for this site"
   },
+  "popupTipGlobalRules":{
+    "message":"Global rules: this column is for rules which apply to all sites.",
+    "description":"Tooltip when hovering the top-most cell of the global-rules column."
+  },
+  "popupTipLocalRules":{
+    "message":"Local rules: this column is for rules which apply to the current site only.\nLocal rules override global rules.",
+    "description":"Tooltip when hovering the top-most cell of the local-rules column."
+  },
   "popupAnyRulePrompt":{
     "message":"all",
     "description":""

src/css/popup.css

@@ -237,6 +237,7 @@ body.dirty #refresh:hover {
     box-sizing: border-box;
     color: black;
     cursor: pointer;
+    direction: ltr;
     font: 12px sans-serif;
     left: 5%;
     line-height: 130%;
@@ -251,14 +252,16 @@ body.dirty #refresh:hover {
     width: 90%;
     z-index: 100;
     }
+body[dir="rtl"] #tooltip {
+    direction: rtl;
+    }
 #tooltip.show {
-    transition: opacity 0.2s 0.7s;
+    transition: opacity 0.15s 0.5s;
-    -webkit-transition: opacity 0.2s 0.7s;
+    -webkit-transition: opacity 0.15s 0.5s;
     visibility: visible;
     opacity: 1;
     }
 
-
 #firewallContainer {
     border: 0;
     font-size: 13px;

src/popup.html

@@ -32,9 +32,9 @@
             <span id="no-cosmetic-filtering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering">&#xf070;<span class="badge"></span><span></span></span>
             <span id="no-remote-fonts" class="hnSwitch fa" data-i18n-tip="popupTipNoRemoteFonts">&#xf031;<span class="badge"></span><span></span></span>
         </div>
-    </div><!-- DO NOT REMOVE --><div>
+    </div><!-- DO NOT REMOVE --><div class="tooltipContainer">
         <div id="firewallContainer" class="minimized">
-            <div><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="*"> </span><span data-src="." data-des="*" data-type="*"> </span></div>
+            <div><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="*" data-i18n-tip="popupTipGlobalRules" data-tip-position="under"> </span><span data-src="." data-des="*" data-type="*" data-i18n-tip="popupTipLocalRules" data-tip-position="under"> </span></div>
             <div><span data-i18n="popupImageRulePrompt"></span><span data-src="/" data-des="*" data-type="image"> </span><span data-src="." data-des="*" data-type="image"> </span></div>
             <div><span data-i18n="popup3pAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="3p"> </span><span data-src="." data-des="*" data-type="3p"> </span></div>
             <div><span data-i18n="popupInlineScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="inline-script"> </span><span data-src="." data-des="*" data-type="inline-script"> </span></div>