Skip to content

Loading…

Dynamic Filtering panel #1094

Closed
wants to merge 6 commits into from

4 participants

@chrisaljoudi

@gorhill since this changes the dynamic filtering panel, I thought I'd ask you what you thought before merging.

The difference is that the two dynamic filtering columns (which is to say the 2nd and 3rd ones) have been swapped, so now the global filtering column is the "outer" one (closer to the main panel), while the current-site column is the one in the middle.

This is easier to parse visually due to the layout, because it's tempting to want to organize data in one direction from the most generic to the most specific.

To make sure this doesn't silently confuse anyone who's gotten accustomed to the current order and to make it clearer for future users, icons have been added:

dynamic filtering panel screenshot

The icons were positioned to align with the columns in the dynamic filtering table. They're on top of a white background, and the combination is subtly translucent to reveal more of the rows in each viewport as the user scrolls (see screencast below).

The icons are a globe and a thumb-tack (sometimes known as a "push pin"). The choices aren't final, but they seem like good candidates. To more clearly communicate the difference in scope, the icons are sized slightly differently to enhance the visual contrast (they are called scopeIcons throughout the added code).

Here's a quick screencast testing out the pane.[1]

So far, this has been tested on the latest Chrome, Firefox, and Safari.

Footnote

It helps to note that the visual icons don't exclusively rely on the order of the columns — if it's deemed that the original (current) column order is more appropriate, the icons can be integrated while keeping that order.

[1] you might've noticed that in the screencast, the + and -'s in active dynamic filtering cells didn't become white even when their background turned green/red. I pushed the fix (e8d54ac) to this branch, but don't have an updated screencast yet.

@TheSweetLily

Ever since I started using uBlock, I keep thinking the global one is on the right, and local one is on the left like in this pull request, so this would please me.
The icons and the small white space makes the layout look slightly better, too.

@gorhill

An idea was to put the header in the title bar, as someone suggested on Wilders Security -- somebody made a sketch and I thought this was a good idea (the "uBlock x.x.x.x" would stay exactly where it is when the firewall pane is collapsed). But even then, I wrote prototype code a while ago to see the result and I scrapped it, it felt more like adding noise to me at the time: one just need to read once in the quick guide that the right-most column is the local scope and afterward there is no more need to be reminded about this all the time -- less visual noise.

Aside this, I personally do not see the point of changing anything else for the sake of change at this point, whatever is deemed a gain by changing the order seems quite subjective to me. I am pretty sure most are used now with the current order[1] and this to me is more important than debating whether left-to-right or right-to-left works better. This could have been debated early during the design process but now we can't change this, that kind of change will confuse most users out there.

[1] order which I picked originally because of many reasons: I see left-to-right as broadest-to-narrowest, just like I read numbers, also, the local scope is typically the most-used one so to have it closer to the toolbar icon means having to travel less with the mouse. It is small details but this is these which helps me make decisions when it all appears arbitrary.

@gorhill

The scrollbar in the video... how come it is positioned away from the edge of the popup?

@chrisaljoudi

@gorhill I have no idea, but it's not caused by any changes in the dfPane branch.

It's specific to Chromium on OS X (OS X has different conventions for how scrollbars are rendered — they're not allocated width, and they're invisible at all times except for when you're scrolling).

Not only is not caused by the dfPane branch, but the behavior is reproducible with uBlock builds as old as I can bother to test. Will look into it.

@chrisaljoudi

@gorhill do you think we should integrate the addition of the icons (while keeping the column order the same) or keep things completely as-is?

@gorhill

do you think we should integrate the addition of the icons

As said, I did try headers in the past (not icons though), and given that I know what each column are for, this was visual noise to me. Now the first time you still see the pane, this maybe help if these icons come with their tooltip, but the quick guide is a required reading anyways, and I can't imagine an advanced user having a hard time to remember the purpose of each column. Adding to this that clicking on a cell give a good hint of what is global/local -- global cells will bleed into their local counterpart. In short, I prefer to leave it the current way.

Will look into it.

I was just curious. So it's an OS X thing, I just wish I had that kind of scroll bars, they get out of the way when not used -- though we lose the sense of how many rows there are in total.

Cursious again: what is the resolution of your screen? The images you post always look very sharp.

@my-password-is-password

@gorhill About the scrollbars. Why now use css to make the scrollbars smaller. Heres how I have it.

ublockthinscrollbars

Here are the changes to popup.css.
https://github.com/my-password-is-password/stuff/blob/master/uBlock.Chromium_thinScrollbar.zip

@chrisaljoudi

@my-password-is-password yeah — the thing is, styling scrollbars is asking for trouble in general, especially if you do this in the core CSS for uBlock (vs. something platform-specific).

Browser support is flakey, inconsistent, and overall a pain in the butt.

I'm not against what you've illustrated/achieved at all — I hope you understand I'm merely concerned about problems arising from browser implementations.


The advantage of going with native scrollbars is that is makes it much easier to get reasonable native-feeling results on an arbitrary number of platforms.

@my-password-is-password

@chrisaljoudi Yeah, i understand. Not asking to include it in uBlock but just a suggestion for gorhill to change his local copy to something he likes by changing css.

@gorhill

I looked in the past at scroll bar stuff, and I rely on MDN doc to figure whether something can be used safely or not, and scrollbar UI is not among those things which can be dealt with safely across platforms.

@chrisaljoudi

Seems like we can close this.

@chrisaljoudi chrisaljoudi deleted the dfPanel branch
@chrisaljoudi chrisaljoudi restored the dfPanel branch
@chrisaljoudi chrisaljoudi deleted the dfPanel branch
@andre-hub andre-hub pushed a commit to andre-hub/uBlock that referenced this pull request
@gorhill gorhill this should take care of #1094 (issue number corrected) 61d42db
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 93 additions and 28 deletions.
  1. +60 −12 src/css/popup.css
  2. +24 −8 src/js/popup.js
  3. +9 −8 src/popup.html
View
72 src/css/popup.css
@@ -171,8 +171,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;
@@ -208,26 +254,23 @@ 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;
width: 70%;
}
-#firewallContainer > div > span:nth-of-type(2) {
- cursor: pointer;
- width: 15%;
- }
+#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;
- color: #444;
cursor: pointer;
- text-align: center;
width: 15%;
}
-#firewallContainer > div > span:nth-of-type(4) {
- display: none;
+#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;
+ color: #444;
}
#firewallContainer > div.isDomain > span:nth-of-type(1) {
font-weight: bold;
@@ -240,10 +283,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(2) {
display: none;
}
-#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
+#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) {
display: inline-block;
}
#firewallContainer > div.allowed > span:nth-of-type(1):before,
@@ -281,7 +328,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);
@@ -335,6 +382,7 @@ body.dirty #refresh:hover {
line-height: 40px;
padding: 0.1em 0.4em;
position: fixed;
+ z-index: 10;
text-align: center;
}
#firewallContainer.dirty ~ #saveRules {
View
32 src/js/popup.js
@@ -47,9 +47,15 @@ document.querySelector('#panes > div:nth-of-type(2)').style.setProperty(
// The padlock 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('saveRules').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/gorhill/uBlock/issues/996
@@ -320,13 +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.
- var rect = document.getElementById('firewallContainer').getBoundingClientRect();
- document.getElementById('saveRules').style.setProperty('left', (rect.left + 4) + 'px');
-
+ setTimeout(positionDfPaneFloaters, 50);
updateAllFirewallCells();
};
@@ -382,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() {
View
17 src/popup.html
@@ -29,19 +29,20 @@ <h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
<div id="refresh" class="fa">&#xf021;</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>
- <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="saveRules" class="fa">&#xf13e;</div>
+ <div id="scopeIcons"><span> </span><span class="fa">&#xf08d;</i></span><span class="fa">&#xf0ac;</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>
Something went wrong with that request. Please try again.