diff --git a/src/css/popup.css b/src/css/popup.css index a0a5727c8..371d5315a 100644 --- a/src/css/popup.css +++ b/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; diff --git a/src/js/background.js b/src/js/background.js index 741fc5cb5..e04ffdba4 100644 --- a/src/js/background.js +++ b/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 }, diff --git a/src/js/popup.js b/src/js/popup.js index ce777e65e..a9f826828 100644 --- a/src/js/popup.js +++ b/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 - - target.getBoundingClientRect().top; + pos = ttcRect.height - targetRect.top + ttcRect.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() { diff --git a/src/js/settings.js b/src/js/settings.js index 8355197d6..b39675a7c 100644 --- a/src/js/settings.js +++ b/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') - .prop('checked', details.collapseBlocked === true) - .on('change', function(){ - changeUserSettings('collapseBlocked', this.checked); - }); - - uDom('#icon-badge') - .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('[data-setting-type="bool"]').forEach(function(uNode) { + var input = uNode.nodeAt(0); + uNode.prop('checked', details[input.getAttribute('data-setting-name')] === true) + .on('change', function() { + changeUserSettings( + this.getAttribute('data-setting-name'), + this.checked + ); + }); + }); uDom('#export').on('click', exportToFile); uDom('#import').on('click', startImportFilePicker); diff --git a/src/popup.html b/src/popup.html index 62f0b073e..a5d4e3447 100644 --- a/src/popup.html +++ b/src/popup.html @@ -12,7 +12,7 @@
-
+

 

@@ -21,6 +21,7 @@

?

+

 

?

 

@@ -31,8 +32,6 @@
-
-
@@ -50,6 +49,7 @@
+
diff --git a/src/settings.html b/src/settings.html index 3c353536c..6123ce064 100644 --- a/src/settings.html +++ b/src/settings.html @@ -11,16 +11,17 @@