mirror of
https://github.com/gorhill/uBlock.git
synced 2024-11-16 23:42:39 +01:00
Dynamic filtering: merge dfPanel; adds scope icons, reorder columns
This commit is contained in:
Chris
commit
3ca6daac73
@ -185,8 +185,54 @@ body.dirty #refresh:hover {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 22px;
|
||||
text-align: right;
|
||||
}
|
||||
#scopeIcons {
|
||||
display: none;
|
||||
cursor: default;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
border: 0;
|
||||
direction: ltr;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
opacity: 0.9;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
#panes.dfEnabled #scopeIcons {
|
||||
display: block;
|
||||
}
|
||||
#scopeIcons > span {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#scopeIcons > span:nth-of-type(1) {
|
||||
width: 70%;
|
||||
}
|
||||
#scopeIcons > span:nth-of-type(2) {
|
||||
font-size: 80%;
|
||||
}
|
||||
#scopeIcons > span:nth-of-type(3) {
|
||||
font-size: 110%;
|
||||
}
|
||||
#scopeIcons > span:nth-of-type(2),
|
||||
#scopeIcons > span:nth-of-type(3) {
|
||||
width: 15%;
|
||||
}
|
||||
#firewallContainer > div {
|
||||
background-color: #e6e6e6;
|
||||
border: 0;
|
||||
@ -222,7 +268,6 @@ body.dirty #refresh:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
#firewallContainer > div > span:nth-of-type(1) {
|
||||
border-right: 1px solid white;
|
||||
padding-right: 2px;
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
@ -231,17 +276,15 @@ body.dirty #refresh:hover {
|
||||
#firewallContainer > div > span:nth-of-type(2),
|
||||
#firewallContainer > div > span:nth-of-type(3),
|
||||
#firewallContainer > div > span:nth-of-type(4) {
|
||||
border-left: 1px solid white;
|
||||
cursor: pointer;
|
||||
width: 15%;
|
||||
}
|
||||
#firewallContainer > div > span:nth-of-type(3),
|
||||
#firewallContainer > div > span:nth-of-type(4) {
|
||||
border-left: 1px solid white;
|
||||
color: #444;
|
||||
#firewallContainer > div > span:nth-of-type(2),
|
||||
#firewallContainer > div.isDomain > span:nth-of-type(3),
|
||||
#firewallContainer > div.isSubDomain > span:nth-of-type(3) {
|
||||
text-align: center;
|
||||
}
|
||||
#firewallContainer > div > span:nth-of-type(4) {
|
||||
display: none;
|
||||
color: #444;
|
||||
}
|
||||
#firewallContainer > div.isDomain > span:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
@ -254,10 +297,14 @@ body.dirty #refresh:hover {
|
||||
#firewallContainer.minimized > div:nth-of-type(1) > span:nth-of-type(1):before {
|
||||
content: '+';
|
||||
}
|
||||
#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) {
|
||||
#firewallContainer > div.isDomain > span:nth-of-type(3),
|
||||
#firewallContainer > div.isSubDomain > span:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
|
||||
#firewallContainer.minimized > div.isDomain > span:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) {
|
||||
display: inline-block;
|
||||
}
|
||||
#firewallContainer > div.allowed > span:nth-of-type(1):before,
|
||||
@ -295,7 +342,7 @@ body.dirty #refresh:hover {
|
||||
background-color: rgba(96, 96, 96, 0.3);
|
||||
}
|
||||
#firewallContainer > div > span.ownRule {
|
||||
color: white;
|
||||
color: white !important; /* previous definition is slightly more specific */
|
||||
}
|
||||
#firewallContainer > div > span.aRule.ownRule {
|
||||
background-color: rgba(0, 160, 0, 1);
|
||||
@ -342,6 +389,7 @@ body.dirty #refresh:hover {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
#saveRules,
|
||||
#flushRules {
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 13 KiB |
@ -45,11 +45,17 @@ document.getElementById('dfPane').style.setProperty(
|
||||
document.getElementById('switchPane').offsetHeight + 'px'
|
||||
);
|
||||
|
||||
// The padlock must be manually positioned:
|
||||
// The save/flush must be manually positioned:
|
||||
// - It's vertical position depends on the height on the title bar.
|
||||
var gotoPrefsBottom = document.getElementById('gotoPrefs').getBoundingClientRect().bottom;
|
||||
document.getElementById('saveflushButtonGroup').style.setProperty(
|
||||
'top',
|
||||
(document.getElementById('gotoPrefs').getBoundingClientRect().bottom + 4) + 'px'
|
||||
(gotoPrefsBottom + 4) + 'px'
|
||||
);
|
||||
// The scope icons as well.
|
||||
document.getElementById('scopeIcons').style.setProperty(
|
||||
'top',
|
||||
(gotoPrefsBottom) + 'px'
|
||||
);
|
||||
|
||||
// https://github.com/chrisaljoudi/uBlock/issues/996
|
||||
@ -320,10 +326,7 @@ var buildAllFirewallRows = function() {
|
||||
.on('mouseleave', '[data-src]', mouseleaveCellHandler);
|
||||
dfPaneBuilt = true;
|
||||
}
|
||||
|
||||
// The padlock must be manually positioned:
|
||||
// - Its horizontal position depends on whether there is a vertical
|
||||
// scrollbar.
|
||||
setTimeout(positionDfPaneFloaters, 50);
|
||||
updateAllFirewallCells();
|
||||
};
|
||||
|
||||
@ -379,6 +382,22 @@ var renderPrivacyExposure = function() {
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
var positionDfPaneFloaters = function() {
|
||||
// The padlock must be manually positioned:
|
||||
// - Its horizontal position depends on whether there is a vertical
|
||||
// scrollbar.
|
||||
var firewallContainer = document.getElementById('firewallContainer'),
|
||||
scopeIcons = document.getElementById('scopeIcons'),
|
||||
rect = firewallContainer.getBoundingClientRect(),
|
||||
rectLeft = rect.left,
|
||||
rectWidth = rect.width;
|
||||
document.getElementById('saveRules').style.setProperty('left', (rectLeft + 4) + 'px');
|
||||
// So must be the scope icons.
|
||||
// - They need to match up with the table
|
||||
scopeIcons.style.setProperty('left', rectLeft + 'px');
|
||||
scopeIcons.style.setProperty('width', rectWidth + 'px');
|
||||
};
|
||||
|
||||
// Assume everything has to be done incrementally.
|
||||
|
||||
var renderPopup = function() {
|
||||
|
||||
@ -28,23 +28,24 @@
|
||||
<div id="refresh"><svg class="icon icon-reload"><use xlink:href="img/icons.svg#icon-reload"></use></svg></div>
|
||||
</div><!--no spaces--><div id="dfPane">
|
||||
<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>
|
||||
<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>
|
||||
<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><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>
|
||||
<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>
|
||||
<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="saveflushButtonGroup">
|
||||
<div id="flushRules"><svg class="icon icon-trash"><use xlink:href="img/icons.svg#icon-trash"></use></svg></div>
|
||||
<div id="saveRules"><svg class="icon icon-lock"><use xlink:href="img/icons.svg#icon-save"></use></svg></div>
|
||||
</div>
|
||||
<div id="scopeIcons"><span> </span><span><svg class="icon icon-pin"><use xlink:href="img/icons.svg#icon-pin"></use></svg></span><span><svg class="icon icon-globe"><use xlink:href="img/icons.svg#icon-globe"></use></svg></span></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><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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user