this fixes #451

src/css/popup.css

@@ -211,11 +211,10 @@ body.advancedUser #panes.dfEnabled h2:before {
     background-color: #ffe;
     border: 1px solid #ddc;
     border-radius: 4px;
-    bottom: 0.7em;
     color: #888;
     cursor: pointer;
     display: none;
-    font-size: 42px;
+    font-size: 3.5em;
     left: 4px;
     line-height: 1;
     padding: 4px 8px;
@@ -245,7 +244,7 @@ body.dirty #refresh:hover {
     opacity: 0;
     padding: 4px 6px;
     pointer-events: none;
-    position: fixed;
+    position: absolute;
     text-align: center;
     visibility: hidden;
     white-space: pre-line;

src/js/background.js

@@ -50,6 +50,7 @@ return {
     userSettings: {
         advancedUserEnabled: false,
         autoUpdate: true,
+        cloudStorageEnabled: false,
         collapseBlocked: true,
         colorBlindFriendly: false,
         contextMenuEnabled: true,
@@ -62,7 +63,7 @@ return {
         prefetchingDisabled: true,
         requestLogMaxEntries: 1000,
         showIconBadge: true,
-        cloudStorageEnabled: false,
+        tooltipsDisabled: false,
         webrtcIPAddressHidden: false
     },
 

src/js/popup.js

@@ -814,30 +814,39 @@ var getPopupData = function(tabId) {
 /******************************************************************************/
 
 var onShowTooltip = function() {
-    if ( popupData.advancedUserEnabled ) {
+    if ( popupData.tooltipsDisabled ) {
         return;
     }
 
-    var tip = document.getElementById('tooltip');
     var target = this;
 
+    // Tooltip container
+    var ttc = uDom(target).ancestors('.tooltipContainer').nodeAt(0) ||
+              document.body;
+    var ttcRect = ttc.getBoundingClientRect();
+
+    // Tooltip itself
+    var tip = uDom.nodeFromId('tooltip');
     tip.textContent = target.getAttribute('data-tip');
     tip.style.removeProperty('top');
     tip.style.removeProperty('bottom');
+    ttc.appendChild(tip);
+
+    // Target rect
+    var targetRect = target.getBoundingClientRect();
 
     // Default is "over"
     var pos;
     var over = target.getAttribute('data-tip-position') !== 'under';
     if ( over ) {
-        pos = document.body.getBoundingClientRect().height -
+        pos = ttcRect.height - targetRect.top + ttcRect.top;
-              target.getBoundingClientRect().top;
         tip.style.setProperty('bottom', pos + 'px');
     } else {
-        pos = target.getBoundingClientRect().bottom;
+        pos = targetRect.bottom - ttcRect.top;
         tip.style.setProperty('top', pos + 'px');
     }
 
-    uDom(tip).addClass('show');
+    tip.classList.add('show');
 };
 
 var onHideTooltip = function() {

src/js/settings.js

@@ -162,65 +162,16 @@ var changeUserSettings = function(name, value) {
 // TODO: use data-* to declare simple settings
 
 var onUserSettingsReceived = function(details) {
-    uDom('#collapse-blocked')
+    uDom('[data-setting-type="bool"]').forEach(function(uNode) {
-        .prop('checked', details.collapseBlocked === true)
+        var input = uNode.nodeAt(0);
-        .on('change', function(){
+        uNode.prop('checked', details[input.getAttribute('data-setting-name')] === true)
-            changeUserSettings('collapseBlocked', this.checked);
+             .on('change', function() {
-        });
+                changeUserSettings(
-
+                    this.getAttribute('data-setting-name'),
-    uDom('#icon-badge')
+                    this.checked
-        .prop('checked', details.showIconBadge === true)
+                );
-        .on('change', function(){
+            });
-            changeUserSettings('showIconBadge', this.checked);
+    });
-        });
-
-    uDom('#context-menu-enabled')
-        .prop('checked', details.contextMenuEnabled === true)
-        .on('change', function(){
-            changeUserSettings('contextMenuEnabled', this.checked);
-        });
-
-    uDom('#color-blind-friendly')
-        .prop('checked', details.colorBlindFriendly === true)
-        .on('change', function(){
-            changeUserSettings('colorBlindFriendly', this.checked);
-        });
-
-    uDom('#cloud-storage-enabled')
-        .prop('checked', details.cloudStorageEnabled === true)
-        .on('change', function(){
-            changeUserSettings('cloudStorageEnabled', this.checked);
-        });
-
-    uDom('#advanced-user-enabled')
-        .prop('checked', details.advancedUserEnabled === true)
-        .on('change', function(){
-            changeUserSettings('advancedUserEnabled', this.checked);
-        });
-
-    uDom('#prefetching-disabled')
-        .prop('checked', details.prefetchingDisabled === true)
-        .on('change', function(){
-            changeUserSettings('prefetchingDisabled', this.checked);
-        });
-
-    uDom('#hyperlink-auditing-disabled')
-        .prop('checked', details.hyperlinkAuditingDisabled === true)
-        .on('change', function(){
-            changeUserSettings('hyperlinkAuditingDisabled', this.checked);
-        });
-
-    uDom('#webrtc-ipaddress-hidden')
-        .prop('checked', details.webrtcIPAddressHidden === true)
-        .on('change', function(){
-            changeUserSettings('webrtcIPAddressHidden', this.checked);
-        });
-
-    uDom('#experimental-enabled')
-        .prop('checked', details.experimentalEnabled === true)
-        .on('change', function(){
-            changeUserSettings('experimentalEnabled', this.checked);
-        });
 
     uDom('#export').on('click', exportToFile);
     uDom('#import').on('click', startImportFilePicker);

src/popup.html

@@ -12,7 +12,7 @@
 <body>
 <a href="dashboard.html" target="_blank" id="gotoPrefs" data-i18n-tip="popupTipDashboard" data-tip-position="under"><span id="appname"> </span> <span id="version"> </span></a>
 <div id="panes">
-    <div>
+    <div class="tooltipContainer">
         <p id="switch" data-i18n-tip="popupPowerSwitchInfo" data-tip-position="under"><span class="fa">&#xf011;</span></p>
         <h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt">&nbsp;</h2>
         <p class="statName">
@@ -21,6 +21,7 @@
             <a href="logger-ui.html" rel="popup" class="fa tool enabled" data-i18n-tip="popupTipLog">&#xf022;</a>
         </p>
         <p class="statValue" id="page-blocked">?</p>
+        <div id="refresh" class="fa">&#xf021;</div>
         <p class="statName" data-i18n="popupBlockedSinceInstallPrompt">&nbsp;</p>
         <p class="statValue" id="total-blocked">?</p>
         <h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
@@ -31,8 +32,6 @@
             <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 id="refresh" class="fa">&#xf021;</div>
-        <div id="tooltip"></div>
     </div><!-- DO NOT REMOVE --><div>
         <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>
@@ -50,6 +49,7 @@
     <div><span></span><span data-src="/" data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span></div>
     <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
     <div id="hotspotTip"></div>
+    <div id="tooltip"></div>
 </div>
 
 <script src="lib/punycode.js"></script>

src/settings.html

@@ -11,16 +11,17 @@
 <body>
 
 <ul id="userSettings">
-    <li><input id="collapse-blocked" type="checkbox"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label>
+    <li><input id="collapse-blocked" type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label>
-    <li><input id="icon-badge" type="checkbox"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label>
+    <li><input id="icon-badge" type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label>
-    <li><input id="context-menu-enabled" type="checkbox"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label>
+    <li><input id="context-menu-enabled" type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label>
-    <li><input id="color-blind-friendly" type="checkbox"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label>
+    <li><input id="tooltips-disabled" type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><label data-i18n="settingsTooltipsPrompt" for="tooltips-disabled"></label>
-    <li><input id="cloud-storage-enabled" type="checkbox"><label data-i18n="settingsCloudStorageEnabledPrompt" for="cloud-storage-enabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">&#xf05a;</a>
+    <li><input id="color-blind-friendly" type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label>
-    <li><input id="advanced-user-enabled" type="checkbox"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label>
+    <li><input id="cloud-storage-enabled" type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><label data-i18n="settingsCloudStorageEnabledPrompt" for="cloud-storage-enabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">&#xf05a;</a>
+    <li><input id="advanced-user-enabled" type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label>
     <li class="subgroup"><span data-i18n="3pGroupPrivacy"></span><ul>
-        <li><input id="prefetching-disabled" type="checkbox"><label data-i18n="settingsPrefetchingDisabledPrompt" for="prefetching-disabled"></label> <a class="fa info" href="https://wikipedia.org/wiki/Link_prefetching#Issues_and_criticisms" target="_blank">&#xf05a;</a>
+        <li><input id="prefetching-disabled" type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><label data-i18n="settingsPrefetchingDisabledPrompt" for="prefetching-disabled"></label> <a class="fa info" href="https://wikipedia.org/wiki/Link_prefetching#Issues_and_criticisms" target="_blank">&#xf05a;</a>
-        <li><input id="hyperlink-auditing-disabled" type="checkbox"><label data-i18n="settingsHyperlinkAuditingDisabledPrompt" for="hyperlink-auditing-disabled"></label> <a class="fa info" href="http://www.wilderssecurity.com/threads/hyperlink-auditing-aka-a-ping-and-beacon-aka-navigator-sendbeacon.364904/" target="_blank">&#xf05a;</a>
+        <li><input id="hyperlink-auditing-disabled" type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><label data-i18n="settingsHyperlinkAuditingDisabledPrompt" for="hyperlink-auditing-disabled"></label> <a class="fa info" href="http://www.wilderssecurity.com/threads/hyperlink-auditing-aka-a-ping-and-beacon-aka-navigator-sendbeacon.364904/" target="_blank">&#xf05a;</a>
-        <li><input id="webrtc-ipaddress-hidden" type="checkbox"><label data-i18n="settingsWebRTCIPAddressHiddenPrompt" for="webrtc-ipaddress-hidden"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">&#xf05a;</a>
+        <li><input id="webrtc-ipaddress-hidden" type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><label data-i18n="settingsWebRTCIPAddressHiddenPrompt" for="webrtc-ipaddress-hidden"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">&#xf05a;</a>
         </ul>
     </ul>