Skip to content

Commit

Permalink
Support expanding/collpasing of specific domains
Browse files Browse the repository at this point in the history 
This is related to the list of domains/subdomains in
the dynamic filtering pane of the popup panel.

Related issue:
- gorhill#284

Clicking on the empty space of a row will toggle
the visibility of the subdomains.

Additionally, the root context will always be visible
regardless of the expand/collspase state, along with
a visual indicator that a specific domain or subdomain
is the actual root context.  (the root context is the
hostname in which local rules are created).
  • Loading branch information
@gorhill
gorhill committed Dec 30, 2019
1 parent 2da8948 commit 56cc2b1
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 72 deletions.
94 changes: 51 additions & 43 deletions src/css/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,42 +244,41 @@ body[dir="rtl"] #tooltip {
text-align: right;
}
#firewallContainer > div {
background-color: #e6e6e6;
border: 0;
direction: ltr;
display: flex;
justify-content: flex-end;
margin: 0;
margin-top: 1px;
padding: 0;
}
#firewallContainer > div:hover {
background-color: #f0f0f0;
#firewallContainer > div:first-child {
margin-top: 0;
}
#firewallContainer > div:first-child ~ div:not([class]) {
#firewallContainer > div:first-child ~ div[data-des="*"] {
display: none;
}
#firewallContainer.minimized > div.isSubDomain {
#firewallContainer:not(.expanded) > div.isSubDomain:not(.expandException):not(.isRootContext),
#firewallContainer.expanded > div.isSubDomain.expandException:not(.isRootContext) {
display: none;
}
#firewallContainer > div > span {
background-color: transparent;
background-color: #e6e6e6;
border: none;
border-bottom: 1px solid white;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #000;
display: inline-block;
height: 1.9em;
line-height: 1.9;
overflow: hidden;
display: inline-flex;
flex-shrink: 0;
line-height: 2;
position: relative;
vertical-align: top;
}
#firewallContainer > div:first-of-type > span:first-of-type {
cursor: pointer;
}
#firewallContainer > div > span:first-of-type {
justify-content: flex-end;
padding-right: 2px;
position: relative;
text-overflow: ellipsis;
width: calc(100% - 4em);
}
#firewallContainer > div > span:first-of-type > sup {
Expand All @@ -295,45 +294,47 @@ body[dir="rtl"] #tooltip {
#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup::before {
content: '\0416\2002';
}
#firewallContainer > div > span:nth-of-type(2) {
display: none;
}
#firewallContainer > div > span:first-of-type ~ span {
border-left: 1px solid white;
margin-left: 1px;
width: 4em;
}
#firewallContainer > div > span:nth-of-type(2) {
display: none;
}
#firewallContainer > div > span:nth-of-type(3),
#firewallContainer > div > span:nth-of-type(4) {
color: #444;
text-align: center;
}
#firewallContainer > div > span:nth-of-type(4) {
display: none;
font-family: monospace;
text-align: center;
}
#firewallContainer > div.isDomain > span:first-of-type {
font-weight: bold;
}
#firewallContainer > div:first-of-type > span:first-of-type::before {
color: #aaa;
content: '\2012';
padding-right: 0.25em;
}
#firewallContainer.minimized > div:first-of-type > span:first-of-type::before {
content: '+';
padding-right: 0.25em;
}
#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) {
display: none;
#firewallContainer.expanded > div:first-of-type > span:first-of-type::before {
content: '\2012';
}
#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
display: inline-block;
#firewallContainer > div[data-des="*"] > span:nth-of-type(3),
#firewallContainer > div.isSubDomain > span:nth-of-type(3),
#firewallContainer > div.isSubDomain.isRootContext > span:nth-of-type(3),
#firewallContainer.expanded > div:not(.expandException) > span:nth-of-type(3),
#firewallContainer:not(.expanded) > div.expandException > span:nth-of-type(3),
#firewallContainer:not(.expanded) > div.isDomain:not(.expandException) > span:nth-of-type(4),
#firewallContainer.expanded > div.isDomain.expandException > span:nth-of-type(4) {
display: inline-flex;
justify-content: space-between;
}
#firewallContainer > div > span[data-acount]::before,
#firewallContainer > div > span[data-bcount]::after {
font-family: monospace;
position: absolute;
content: ' ';
}
#firewallContainer > div > span[data-acount]::before {
left: 0.1em;
padding-left: 0.1em;
}
#firewallContainer > div > span[data-acount="1"]::before {
content: '+';
Expand All @@ -345,7 +346,7 @@ body[dir="rtl"] #tooltip {
content: '+++';
}
#firewallContainer > div > span[data-bcount]::after {
right: 0.1em;
padding-right: 0.1em;
}
#firewallContainer > div > span[data-bcount="1"]::after {
content: '\2212';
Expand All @@ -361,10 +362,10 @@ body.advancedUser #firewallContainer > div > span:first-of-type {
width: calc(100% - 8em);
}
body.advancedUser #firewallContainer > div > span:nth-of-type(2) {
display: inline-block;
display: inline-flex;
}
body.advancedUser #firewallContainer > div:first-child ~ div:not([class]) {
display: block;
body.advancedUser #firewallContainer > div:first-child ~ div[data-des="*"] {
display: flex;
}
body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
cursor: pointer;
Expand All @@ -373,10 +374,13 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
/**
Small coloured label at the left of a row
*/
#firewallContainer > div.isRootContext > span:first-of-type::before,
#firewallContainer > div.allowed > span:first-of-type::before,
#firewallContainer > div.blocked > span:first-of-type::before,
#firewallContainer.minimized > div.isDomain.totalAllowed > span:first-of-type::before,
#firewallContainer.minimized > div.isDomain.totalBlocked > span:first-of-type::before {
#firewallContainer:not(.expanded) > div.isDomain.totalAllowed:not(.expandException) > span:first-of-type::before,
#firewallContainer:not(.expanded) > div.isDomain.totalBlocked:not(.expandException) > span:first-of-type::before,
#firewallContainer.expanded > div.isDomain.totalAllowed.expandException > span:first-of-type::before,
#firewallContainer.expanded > div.isDomain.totalBlocked.expandException > span:first-of-type::before {
box-sizing: border-box;
content: '';
display: inline-block;
Expand All @@ -386,28 +390,32 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
position: absolute;
width: 7px;
}
#firewallContainer > div.isRootContext > span:first-of-type::before {
background-color: rgb(127, 127, 127);
width: 14px !important;
}
/**
Source for color-blind color scheme from https://github.com/WyohKnott:
https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
*/
#firewallContainer > div.allowed > span:first-of-type::before,
#firewallContainer.minimized > div.isDomain.totalAllowed > span:first-of-type::before {
#firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before {
background-color: rgb(0, 160, 0);
}
#firewallContainer.colorBlind > div.allowed > span:first-of-type::before,
#firewallContainer.colorBlind.minimized > div.isDomain.totalAllowed > span:first-of-type::before {
#firewallContainer.colorBlind > div.isDomain.totalAllowed > span:first-of-type::before {
background-color: rgb(255, 194, 57);
}
#firewallContainer > div.blocked > span:first-of-type::before,
#firewallContainer.minimized > div.isDomain.totalBlocked > span:first-of-type::before {
#firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before {
background-color: rgb(192, 0, 0);
}
#firewallContainer.colorBlind > div.blocked > span:first-of-type::before,
#firewallContainer.colorBlind.minimized > div.isDomain.totalBlocked > span:first-of-type::before {
#firewallContainer.colorBlind > div.isDomain.totalBlocked > span:first-of-type::before {
background-color: rgb(0, 19, 110);
}
#firewallContainer > div.allowed.blocked > span:first-of-type::before,
#firewallContainer.minimized > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
#firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
background-color: rgb(192, 160, 0);
}
/* Rule cells */
Expand Down
2 changes: 1 addition & 1 deletion src/js/messaging.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ const getHostnameDict = function(hostnameToCountMap) {
blockCount: blockCount,
allowCount: allowCount,
totalBlockCount: 0,
totalAllowCount: 0
totalAllowCount: 0,
};
}
return r;
Expand Down
Loading

0 comments on commit 56cc2b1

Please sign in to comment.