This commit is contained in:
gorhill 2016-11-05 14:48:42 -04:00
parent 9b1846749e
commit 446d7fad2e
13 changed files with 185 additions and 159 deletions

View file

@ -6,7 +6,6 @@ div > p:last-child {
}
.userFilters {
box-sizing: border-box;
font-size: small;
height: 60vh;
text-align: left;
white-space: pre;

View file

@ -41,7 +41,6 @@ body[dir=rtl] #lists {
display: none;
}
li.listEntry {
font-size: 14px;
margin: 0 auto 0 auto;
margin-left: 3em;
margin-right: 0em;
@ -67,7 +66,7 @@ li.listEntry > a:nth-of-type(2):hover {
opacity: 1;
}
li.listEntry > a:nth-of-type(3) {
font-size: 13px;
font-size: smaller;
opacity: 0.5;
}
.dim {
@ -121,7 +120,6 @@ body[dir=rtl] #externalListsDiv {
}
#externalLists {
box-sizing: border-box;
font-size: smaller;
height: 10em;
white-space: pre;
width: 100%;

View file

@ -6,7 +6,6 @@ div > p:last-child {
}
textarea {
box-sizing: border-box;
font-size: smaller;
height: 60vh;
text-align: left;
white-space: pre;

View file

@ -15,7 +15,10 @@
body {
background-color: white;
color: black;
font: 14px/1.3 sans-serif;
font: 14px "Noto Sans",sans-serif;
}
textarea {
font-size: 90%;
}
/* I designed the button with: http://charliepark.org/bootstrap_buttons/ */
button.custom {

View file

@ -9,7 +9,6 @@ html, body {
}
#dashboard-nav {
border: 0;
font-size: 16px;
margin: 0;
padding: 0;
top: 0;
@ -36,7 +35,7 @@ html, body {
color: black;
cursor: pointer;
display: inline-block;
font: inherit;
font-size: 110%;
margin: 0;
padding: 4px;
position: relative;

View file

@ -15,13 +15,12 @@ code {
margin: 0;
padding: 0.5em 0 0 0;
white-space: nowrap;
font-size: 0; /* otherwise spaces between inline-blocks will be rendered */
}
#diff .pane {
border: 0;
box-sizing: border-box;
display: inline-block;
font: 12px/1.8 monospace;
font: 90%/180% "Noto Mono",monospace;
margin: 0;
padding: 0;
position: relative;
@ -143,27 +142,26 @@ body[dir="rtl"] #commitButton:before {
#diff textarea {
background-color: #f8f8ff;
border: 0;
color: black;
margin: 0;
border-top: 1px solid #eee;
box-sizing: border-box;
color: black;
direction: ltr;
font: 12px monospace;
line-height: 1.8;
font: inherit;
height: 100%;
left: 0;
margin: 0;
overflow: hidden;
overflow-y: auto;
padding: 1em 0 0 3px; /* same left and top padding as ul/li */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
resize: none;
top: 0;
visibility: hidden;
white-space: pre; /* this implies nowrap; break only on \n and <br>.
nowrap doesn't consistently
respect \n's (example: Safari) per the CSS spec:
http://www.w3.org/wiki/CSS/Properties/white-space */
width: 100%;
word-wrap: normal;
}
#diff.edit textarea {

View file

@ -23,10 +23,11 @@ h2 {
background-color: #eee;
border: 0;
color: #666;
font-size: 14px;
cursor: pointer;
font-size: 100%;
font-weight: normal;
margin: 1em 0 0.5em 0;
padding: 2px 0;
margin: 1em 0 0.8em 0;
padding: 0.2em;
text-align: center;
}
h2:nth-of-type(1) {
@ -45,20 +46,22 @@ a {
color: #bbb;
cursor: pointer;
display: block;
font-size: 12px;
line-height: 12px;
font-size: 85%;
line-height: 1.2;
margin: 0;
padding: 3px 0;
padding: calc(0.1em + 1px) 0;
position: relative;
text-align: center;
}
#version {
font-size: 10px;
font-size: 90%;
font-weight: normal;
}
#gotoPrefs > span:nth-of-type(3) {
opacity: 0.5;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
body[dir="ltr"] #gotoPrefs > span:nth-of-type(3) {
left: 3px;
@ -94,7 +97,7 @@ body[dir="rtl"] #panes > div {
#panes > div:nth-of-type(2) {
overflow-y: auto;
overflow-x: hidden;
width: 320px;
width: 24em;
}
/**
Scroll bar to the left.
@ -118,20 +121,23 @@ body.portrait[dir="ltr"] #panes > div:nth-of-type(2) {
display: none;
}
#panes > div:nth-of-type(1) {
min-width: 160px;
min-width: 11em;
padding: 0;
}
p {
text-align: center;
white-space: nowrap;
}
.fa {
font-size: 120%;
}
#switch {
margin: 8px 0;
}
#switch .fa {
color: #0046ff;
cursor: pointer;
font-size: 96px;
font-size: 700%;
margin: 0;
}
#switch .fa:hover {
@ -141,16 +147,15 @@ body.off #switch .fa {
color: #ccc;
}
#page-blocked {
font-size: 20px;
font-size: 1.25em;
}
.statName {
color: #888;
font-size: small;
margin: 1em 0.2em 0.2em 0.2em;
font-size: 85%;
margin: 0.8em 0.2em 0.1em 0.2em;
text-align: center;
}
.statValue {
font-size: 14px;
margin: 0;
text-align: center;
}
@ -158,7 +163,6 @@ body.off #switch .fa {
color: #aaa;
cursor: pointer;
display: none;
font-size: 14px;
unicode-bidi: embed;
}
.tool.enabled {
@ -171,21 +175,20 @@ body.off #switch .fa {
background-color: #eee;
border: 0;
color: #aaa;
font-weight: normal;
margin: 1em 0 0 0;
padding: 4px 0 2px 0;
margin: 0.8em 0 0 0;
padding: 4px 0;
text-align: center;
}
#extraTools > span {
cursor: pointer;
font-size: 18px;
margin: 0 0.45em;
font-size: 1.2em;
margin: 0 0.4em;
position: relative;
}
#extraTools > span > span.badge {
color: #222;
bottom: -1px;
font: 10.5px sans-serif;
font: x-small sans-serif;
position: absolute;
}
body[dir="ltr"] #extraTools > span > span.badge {
@ -196,7 +199,7 @@ body[dir="rtl"] #extraTools > span > span.badge {
}
#extraTools > span.on > span:last-of-type {
color: #e00;
font-size: 20px;
font-size: 1.1em;
left: 0;
position: absolute;
text-align: center;
@ -210,17 +213,6 @@ body[dir="rtl"] #extraTools > span > span.badge {
color: #444;
}
body.advancedUser h2 {
cursor: pointer;
}
body.advancedUser h2:before {
color: #aaa;
content: '+ ';
}
body.advancedUser #panes.dfEnabled h2:before {
content: '\2212 ';
}
#refresh {
background-color: #ffe;
border: 1px solid #ddc;
@ -278,7 +270,7 @@ body[dir="rtl"] #tooltip {
#firewallContainer {
border: 0;
font-size: 13px;
font-size: 85%;
margin: 0;
padding: 0;
text-align: right;
@ -286,7 +278,6 @@ body[dir="rtl"] #tooltip {
#firewallContainer > div {
background-color: #e6e6e6;
border: 0;
border-bottom: 1px solid white;
direction: ltr;
margin: 0;
padding: 0;
@ -294,54 +285,46 @@ body[dir="rtl"] #tooltip {
#firewallContainer > div:hover {
background-color: #f0f0f0;
}
#firewallContainer > div:first-child ~ div:not([class]) {
display: none;
}
#firewallContainer.minimized > div.isSubDomain {
display: none;
}
#firewallContainer > div > span {
background-color: transparent;
border: none;
border-bottom: 1px solid white;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #000;
display: inline-block;
height: 22px;
line-height: 22px;
height: 1.9em;
line-height: 1.9em;
overflow: hidden;
position: relative;
vertical-align: middle;
}
#firewallContainer > div:nth-of-type(1) > span {
height: 18px;
line-height: 20px;
vertical-align: top;
}
#firewallContainer > div:nth-of-type(1) > span:nth-of-type(1) {
cursor: pointer;
}
#firewallContainer > div > span:nth-of-type(1) {
border-right: 1px solid white;
padding-right: 2px;
position: relative;
text-overflow: ellipsis;
width: 70%;
width: calc(100% - 4em);
}
#firewallContainer > div > span:nth-of-type(2),
#firewallContainer > div > span:nth-of-type(3),
#firewallContainer > div > span:nth-of-type(4) {
cursor: pointer;
width: 15%;
#firewallContainer > div > span:nth-of-type(2) {
display: none;
}
#firewallContainer > div > span:nth-of-type(3),
#firewallContainer > div > span:nth-of-type(4) {
#firewallContainer > div > span:nth-of-type(1) ~ span {
border-left: 1px solid white;
color: #444;
font-family: monospace;
font-size: 11.5px;
text-align: center;
width: 4em;
}
body.portrait #firewallContainer > div > span:nth-of-type(3),
body.portrait #firewallContainer > div > span:nth-of-type(4) {
font-family: monospace;
font-size: 9px;
#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;
@ -363,6 +346,50 @@ body.portrait #firewallContainer > div > span:nth-of-type(4) {
#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
display: inline-block;
}
#firewallContainer > div > span[data-acount]:before,
#firewallContainer > div > span[data-bcount]:after {
font-family: "Noto Mono",monospace;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
#firewallContainer > div > span[data-acount]:before {
left: 0.1em;
}
#firewallContainer > div > span[data-acount="1"]:before {
content: '+';
}
#firewallContainer > div > span[data-acount="2"]:before {
content: '++';
}
#firewallContainer > div > span[data-acount="3"]:before {
content: '+++';
}
#firewallContainer > div > span[data-bcount]:after {
right: 0.1em;
}
#firewallContainer > div > span[data-bcount="1"]:after {
content: '\2212';
}
#firewallContainer > div > span[data-bcount="2"]:after {
content: '\2212\2212';
}
#firewallContainer > div > span[data-bcount="3"]:after {
content: '\2212\2212\2212';
}
body.advancedUser #firewallContainer > div > span:nth-of-type(1) {
width: calc(100% - 8em);
}
body.advancedUser #firewallContainer > div > span:nth-of-type(2) {
display: inline-block;
}
body.advancedUser #firewallContainer > div:first-child ~ div:not([class]) {
display: block;
}
body.advancedUser #firewallContainer > div > span:nth-of-type(1) ~ span {
cursor: pointer;
}
/**
Small coloured label at the left of a row
@ -405,40 +432,40 @@ body.portrait #firewallContainer > div > span:nth-of-type(4) {
background-color: rgb(192, 160, 0);
}
/* Rule cells */
#firewallContainer > div > span.aRule {
body.advancedUser #firewallContainer > div > span.aRule {
background-color: rgba(0, 160, 0, 0.3);
}
#firewallContainer.colorBlind > div > span.aRule {
body.advancedUser #firewallContainer.colorBlind > div > span.aRule {
background-color: rgba(255, 194, 57, 0.4);
}
#firewallContainer > div > span.bRule {
body.advancedUser #firewallContainer > div > span.bRule {
background-color: rgba(192, 0, 0, 0.3);
}
#firewallContainer.colorBlind > div > span.bRule {
body.advancedUser #firewallContainer.colorBlind > div > span.bRule {
background-color: rgba(0, 19, 110, 0.4);
}
#firewallContainer > div > span.nRule {
body.advancedUser #firewallContainer > div > span.nRule {
background-color: rgba(108, 108, 108, 0.3);
}
#firewallContainer.colorBlind > div > span.nRule {
body.advancedUser #firewallContainer.colorBlind > div > span.nRule {
background-color: rgba(96, 96, 96, 0.4);
}
#firewallContainer > div > span.ownRule {
body.advancedUser #firewallContainer > div > span.ownRule {
color: white;
}
#firewallContainer > div > span.aRule.ownRule {
body.advancedUser #firewallContainer > div > span.aRule.ownRule {
background-color: rgba(0, 160, 0, 1);
}
#firewallContainer.colorBlind > div > span.aRule.ownRule {
body.advancedUser #firewallContainer.colorBlind > div > span.aRule.ownRule {
background-color: rgba(255, 194, 57, 1);
}
#firewallContainer > div > span.bRule.ownRule {
body.advancedUser #firewallContainer > div > span.bRule.ownRule {
background-color: rgba(192, 0, 0, 1);
}
#firewallContainer.colorBlind > div > span.bRule.ownRule {
body.advancedUser #firewallContainer.colorBlind > div > span.bRule.ownRule {
background-color: rgba(0, 19, 110, 1);
}
#firewallContainer > div > span.nRule.ownRule {
body.advancedUser #firewallContainer > div > span.nRule.ownRule {
background-color: rgba(108, 108, 108, 1);
}
@ -446,14 +473,23 @@ body.portrait #firewallContainer > div > span:nth-of-type(4) {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 4em;
z-index: 1;
}
#actionSelector > span {
display: inline-block;
height: 22px;
height: 100%;
opacity: 0.2;
width: 33.33%;
}
#actionSelector > span:nth-of-type(1) {
width: 33%;
}
#actionSelector > span:nth-of-type(2) {
width: 33.5%;
}
#actionSelector > span:nth-of-type(3) {
width: 33.5%;
}
#actionSelector > span:hover {
opacity: 0.75;
@ -490,7 +526,7 @@ body.portrait #firewallContainer > div > span:nth-of-type(4) {
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 1.7em;
font-size: 1.8em;
line-height: 1.0;
margin: 0;
margin-right: 0.1em;

View file

@ -6,7 +6,6 @@ div > p:last-child {
}
#whitelist {
box-sizing: border-box;
font-size: small;
height: 60vh;
text-align: left;
white-space: pre;

View file

@ -56,7 +56,7 @@ return {
collapseBlocked: true,
colorBlindFriendly: false,
contextMenuEnabled: true,
dynamicFilteringEnabled: true,
dynamicFilteringEnabled: false,
externalLists: defaultExternalLists,
firewallPaneMinimized: true,
hyperlinkAuditingDisabled: true,

View file

@ -90,9 +90,6 @@ var scopeToSrcHostnameMap = {
'/': '*',
'.': ''
};
var threePlus = '+++';
var threeMinus = '';
var sixSpace = '\u2007\u2007\u2007\u2007\u2007\u2007';
var dfHotspots = null;
var hostnameToSortableTokenMap = {};
var allDomains = {};
@ -226,17 +223,15 @@ var addFirewallRow = function(des) {
var updateFirewallCell = function(scope, des, type, rule) {
var selector = '#firewallContainer span[data-src="' + scope + '"][data-des="' + des + '"][data-type="' + type + '"]';
var cell = uDom(selector);
// This should not happen
if ( cell.length === 0 ) {
var cells = uDom(selector);
if ( cells.length === 0 ) {
return;
}
cell.removeClass();
cells.removeClass();
var action = rule.charAt(1);
if ( action !== '' ) {
cell.toggleClass(action + 'Rule', true);
cells.toggleClass(action + 'Rule', true);
}
// Use dark shade visual cue if the rule is specific to the cell.
@ -247,54 +242,47 @@ var updateFirewallCell = function(scope, des, type, rule) {
(matches[2] === des) &&
(matches[1] === scopeToSrcHostnameMap[scope]);
}
cell.toggleClass('ownRule', ownRule);
cells.toggleClass('ownRule', ownRule);
if ( scope !== '.' || des === '*' ) {
return;
}
// IMPORTANT: It is completely assumed the first node is a TEXT_NODE, so
// ensure this in the HTML file counterpart when you make
// changes
var textNode = cell.nodeAt(0).firstChild;
// Remember this may be a cell from a reused row, we need to clear text
// content if we can't compute request counts.
if ( popupData.hostnameDict.hasOwnProperty(des) === false ) {
textNode.nodeValue = ' ';
cells.removeAttr('data-acount');
cells.removeAttr('data-acount');
return;
}
var hnDetails = popupData.hostnameDict[des];
var aCount = hnDetails.allowCount;
var bCount = hnDetails.blockCount;
if ( aCount !== 0 || bCount !== 0 ) {
// https://github.com/chrisaljoudi/uBlock/issues/471
aCount = Math.min(Math.ceil(Math.log(aCount + 1) / Math.LN10), 3);
bCount = Math.min(Math.ceil(Math.log(bCount + 1) / Math.LN10), 3);
textNode.nodeValue = threePlus.slice(0, aCount) +
sixSpace.slice(aCount + bCount) +
threeMinus.slice(0, bCount);
var hnDetails = popupData.hostnameDict[des],
cell = cells.nodeAt(0);
if ( hnDetails.allowCount !== 0 ) {
cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.allowCount + 1) / Math.LN10), 3));
} else {
textNode.nodeValue = ' ';
cell.removeAttribute('data-acount');
}
if ( hnDetails.blockCount !== 0 ) {
cell.setAttribute('data-bcount', Math.min(Math.ceil(Math.log(hnDetails.blockCount + 1) / Math.LN10), 3));
} else {
cell.removeAttribute('data-bcount');
}
if ( hnDetails.domain !== des ) {
return;
}
textNode = cell.nodeAt(1).firstChild;
aCount = hnDetails.totalAllowCount;
bCount = hnDetails.totalBlockCount;
if ( aCount !== 0 || bCount !== 0 ) {
// https://github.com/chrisaljoudi/uBlock/issues/471
aCount = Math.min(Math.ceil(Math.log(aCount + 1) / Math.LN10), 3);
bCount = Math.min(Math.ceil(Math.log(bCount + 1) / Math.LN10), 3);
textNode.nodeValue = threePlus.slice(0, aCount) +
sixSpace.slice(aCount + bCount) +
threeMinus.slice(0, bCount);
cell = cells.nodeAt(1);
if ( hnDetails.totalAllowCount !== 0 ) {
cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.totalAllowCount + 1) / Math.LN10), 3));
} else {
textNode.nodeValue = ' ';
cell.removeAttribute('data-acount');
}
if ( hnDetails.totalBlockCount !== 0 ) {
cell.setAttribute('data-bcount', Math.min(Math.ceil(Math.log(hnDetails.totalBlockCount + 1) / Math.LN10), 3));
} else {
cell.removeAttribute('data-bcount');
}
};
@ -342,7 +330,7 @@ var buildAllFirewallRows = function() {
addFirewallRow(allHostnameRows[i]);
}
if ( dfPaneBuilt !== true ) {
if ( dfPaneBuilt !== true && popupData.advancedUserEnabled ) {
uDom('#firewallContainer')
.on('click', 'span[data-src]', unsetFirewallRuleHandler)
.on('mouseenter', '[data-src]', mouseenterCellHandler)
@ -388,16 +376,6 @@ var renderPrivacyExposure = function() {
desHostnameDone[des] = true;
}
// Domain of the page must always be included (if there is one)
if (
allDomains.hasOwnProperty(popupData.pageDomain) === false &&
reNetworkRelatedURL.test(popupData.rawURL)
) {
allHostnameRows.push(popupData.pageDomain);
allDomains[popupData.pageDomain] = false;
allDomainCount += 1;
}
var summary = domainsHitStr.replace('{{count}}', touchedDomainCount.toLocaleString())
.replace('{{total}}', allDomainCount.toLocaleString());
uDom.nodeFromId('popupHitDomainCount').textContent = summary;
@ -482,7 +460,7 @@ var renderPopup = function() {
// https://github.com/chrisaljoudi/uBlock/issues/470
// This must be done here, to be sure the popup is resized properly
var dfPaneVisible = popupData.dfEnabled && popupData.advancedUserEnabled;
var dfPaneVisible = popupData.dfEnabled;
// https://github.com/chrisaljoudi/uBlock/issues/1068
// Remember the last state of the firewall pane. This allows to
@ -590,9 +568,6 @@ var gotoURL = function(ev) {
/******************************************************************************/
var toggleFirewallPane = function() {
if ( popupData.advancedUserEnabled === false ) {
return;
}
popupData.dfEnabled = !popupData.dfEnabled;
messaging.send(

View file

@ -19,12 +19,13 @@
Home: https://github.com/gorhill/uBlock
*/
'use strict';
/******************************************************************************/
/******************************************************************************/
(function(){
'use strict';
/******************************************************************************/
// https://github.com/chrisaljoudi/uBlock/issues/405
@ -153,6 +154,11 @@ var matchWhitelistDirective = function(url, hostname, directive) {
/******************************************************************************/
})();
/******************************************************************************/
/******************************************************************************/
µBlock.stringFromWhitelist = function(whitelist) {
var r = {};
var i, bucket;
@ -266,14 +272,18 @@ var matchWhitelistDirective = function(url, hostname, directive) {
}
// Change -- but only if the user setting actually exists.
var mustSave = us.hasOwnProperty(name) &&
value !== us[name];
var mustSave = us.hasOwnProperty(name) && value !== us[name];
if ( mustSave ) {
us[name] = value;
}
// Post-change
switch ( name ) {
case 'advancedUserEnabled':
if ( value === true ) {
us.dynamicFilteringEnabled = true;
}
break;
case 'collapseBlocked':
if ( value === false ) {
this.cosmeticFilteringEngine.removeFromSelectorCache('*', 'net');
@ -533,5 +543,3 @@ var matchWhitelistDirective = function(url, hostname, directive) {
})();
/******************************************************************************/
})();

View file

@ -22,6 +22,8 @@
/* global DOMTokenList */
/* exported uDom */
'use strict';
/******************************************************************************/
// It's just a silly, minimalist DOM framework: this allows me to not rely
@ -32,8 +34,6 @@
var uDom = (function() {
'use strict';
/******************************************************************************/
var DOMList = function() {
@ -499,6 +499,16 @@ DOMList.prototype.attr = function(attr, value) {
/******************************************************************************/
DOMList.prototype.removeAttr = function(attr) {
var i = this.nodes.length;
while ( i-- ) {
this.nodes[i].removeAttribute(attr);
}
return this;
};
/******************************************************************************/
DOMList.prototype.prop = function(prop, value) {
var i = this.nodes.length;
if ( value === undefined ) {

View file

@ -22,7 +22,9 @@
</p>
<p class="statValue" id="page-blocked">?</p>
<div id="refresh" class="fa">&#xf021;</div>
<p class="statName" data-i18n="popupBlockedSinceInstallPrompt">&nbsp;</p>
<p class="statName">
<span data-i18n="popupBlockedSinceInstallPrompt">&nbsp;</span>
</p>
<p class="statValue" id="total-blocked">?</p>
<h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
<p class="statValue" id="popupHitDomainCount">&nbsp;</p>
@ -46,7 +48,7 @@
</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 id="tooltip"></div>