Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

better tooltips for popup UI

This commit is contained in:
gorhill 2015-04-05 14:44:41 -04:00
parent 2dde6f15de
commit eaa3ac53d5
4 changed files with 89 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/css/common.css
View File

@ -13,65 +13,6 @@
vertical-align: baseline;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */
[data-tip] {
cursor: pointer;
position: relative;
}
body:not(.advancedUser) [data-tip]:after {
background-color: #ffffee;
border: 1px solid gray;
border-radius: 3px;
box-shadow: 1px 1px 3px gray;
box-sizing: border-box;
color: black;
content: attr(data-tip);
font: 12px sans-serif;
left: 0.5em;
line-height: 130%;
opacity: 0;
padding: 4px 6px;
pointer-events: none;
position: fixed;
right: 0.5em;
text-align: left;
top: 110%;
visibility: hidden;
white-space: pre-line;
z-index: 20;
}
body [data-tip]:hover:after {
opacity: 1;
position: absolute;
transition: visibility 0s 0.6s, opacity 0.2s 0.7s;
-webkit-transition: visibility 0s 0.6s, opacity 0.2s 0.7s;
visibility: visible;
}
body[dir=rtl] [data-tip]:hover:after {
text-align: right;
}
body [data-tip][data-tip-anchor="top"]:hover:after {
bottom: 140%;
left: initial;
top: auto;
width: 8.5em;
}
body[dir=ltr] [data-tip][data-tip-anchor="top"]:hover:after {
right: 0;
}
body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
left: 0;
}
body [data-tip][data-tip-anchor="topcenter"]:hover:after {
bottom: 140%;
left: -225%;
right: initial;
top: auto;
width: 8.5em;
}
.hiddenFileInput {
visibility: hidden;
width: 0;

43
src/css/popup.css
View File

@ -103,10 +103,6 @@ p {
body.off #switch .fa {
color: #ccc;
}
#switch-hint {
color: #888;
font-size: 11px;
}
#page-blocked {
font-size: 20px;
}
@ -150,11 +146,16 @@ body.off #switch .fa {
}
#extraTools > span > span.badge {
color: #000;
bottom: -2px;
bottom: 0;
font: 10px sans-serif;
left: 100%;
position: absolute;
}
body[dir="ltr"] #extraTools > span > span.badge {
left: 100%;
}
body[dir="rtl"] #extraTools > span > span.badge {
right: 100%;
}
#extraTools > span.on > span:last-of-type {
color: #e00;
font-size: 20px;
@ -202,6 +203,36 @@ body.dirty #refresh:hover {
color: black;
}
#tooltip {
background-color: #ffffee;
border: 1px solid gray;
border-radius: 3px;
box-shadow: 1px 1px 3px gray;
box-sizing: border-box;
color: black;
cursor: pointer;
font: 12px sans-serif;
left: 5%;
line-height: 130%;
margin: 0.5em 0;
opacity: 0;
padding: 4px 6px;
pointer-events: none;
position: fixed;
text-align: center;
visibility: hidden;
white-space: pre-line;
width: 90%;
z-index: 100;
}
#tooltip.show {
transition: opacity 0.2s 0.7s;
-webkit-transition: opacity 0.2s 0.7s;
visibility: visible;
opacity: 1;
}
#firewallContainer {
border: 0;
font-size: 12px;

41
src/js/popup.js
View File

@ -462,7 +462,10 @@ var renderPopup = function() {
var renderPopupLazy = function() {
var onDataReady = function(data) {
uDom('#noCosmeticFiltering > span.badge').text(data.hiddenElementCount);
var v = data.hiddenElementCount;
uDom('#noCosmeticFiltering > span.badge').text(
typeof v === 'number' ? v.toLocaleString() : v
);
};
messager.send({
@ -756,6 +759,39 @@ var getPopupData = function(tabId) {
/******************************************************************************/
var onShowTooltip = function() {
if ( popupData.advancedUserEnabled ) {
return;
}
var tip = document.getElementById('tooltip');
var target = this;
tip.textContent = target.getAttribute('data-tip');
tip.style.removeProperty('top');
tip.style.removeProperty('bottom');
// Default is "over"
var pos;
var over = target.getAttribute('data-tip-position') !== 'under';
if ( over ) {
pos = document.body.getBoundingClientRect().height -
target.getBoundingClientRect().top;
tip.style.setProperty('bottom', pos + 'px');
} else {
pos = target.getBoundingClientRect().bottom;
tip.style.setProperty('top', pos + 'px');
}
uDom(tip).addClass('show');
};
var onHideTooltip = function() {
uDom('#tooltip').removeClass('show');
};
/******************************************************************************/
// Make menu only when popup html is fully loaded
uDom.onLoad(function () {
@ -776,6 +812,9 @@ uDom.onLoad(function () {
uDom('.hnSwitch').on('click', toggleHostnameSwitch);
uDom('#saveRules').on('click', saveFirewallRules);
uDom('[data-i18n="popupAnyRulePrompt"]').on('click', toggleMinimize);
uDom('body').on('mouseenter', '[data-tip]', onShowTooltip)
.on('mouseleave', '[data-tip]', onHideTooltip);
});
/******************************************************************************/

24
src/popup.html
View File

@ -13,13 +13,12 @@
<a href="dashboard.html" target="_blank" id="gotoPrefs" title="popupTipDashboard"><span id="appname">&nbsp;</span><span id="version">&nbsp;</span></a>
<div id="panes">
<div>
<p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa">&#xf011;</span></p>
<p id="switch-hint"></p>
<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">
<span data-i18n="popupBlockedOnThisPagePrompt">&nbsp;</span>&ensp;
<span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top">&#xf1fb;</span>&ensp;
<a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</a>
<span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker">&#xf1fb;</span>&ensp;
<a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog">&#xf06e;</a>
</p>
<p class="statValue" id="page-blocked">?</p>
<p class="statName" data-i18n="popupBlockedSinceInstallPrompt">&nbsp;</p>
@ -27,12 +26,13 @@
<h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
<p class="statValue" id="popupHitDomainCount">&nbsp;</p>
<div id="extraTools">
<span id="noPopups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups" data-tip-anchor="topcenter">&#xf0c5;<span></span></span>
<span id="noStrictBlocking" class="hnSwitch fa" data-i18n-tip="popupTipNoStrictBlocking" data-tip-anchor="topcenter">&#xf071;<span></span></span>
<span id="noCosmeticFiltering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering" data-tip-anchor="topcenter">&#xf070;<span class="badge"></span><span></span></span>
</div>
<span id="noPopups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups">&#xf0c5;<span></span></span>
<span id="noStrictBlocking" class="hnSwitch fa" data-i18n-tip="popupTipNoStrictBlocking">&#xf071;<span></span></span>
<span id="noCosmeticFiltering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering">&#xf070;<span class="badge"></span><span></span></span>
</div>
<div id="refresh" class="fa">&#xf021;</div>
</div><!-- DO NOT REMOVE --><div>
<div id="tooltip"></div>
</div><!-- DO NOT REMOVE --><div>
<div id="firewallContainer">
<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="popupImageRulePrompt"></span><span data-src="/" data-des="*" data-type="image"> </span><span data-src="." data-des="*" data-type="image"> </span></div>
@ -41,15 +41,15 @@
<div><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="1p-script"> </span><span data-src="." data-des="*" data-type="1p-script"> </span></div>
<div><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-script"> </span><span data-src="." data-des="*" data-type="3p-script"> </span></div>
<div><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-frame"> </span><span data-src="." data-des="*" data-type="3p-frame"> </span></div>
</div><div id="saveRules" class="fa">&#xf13e;</div>
</div>
</div><div id="saveRules" class="fa">&#xf13e;</div>
</div>
</div>
<div id="templates" style="display: none">
<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>
</div>
<script src="lib/punycode.js"></script>
<script src="js/vapi-common.js"></script>