uBlock/platform/chromium/vapi-usercss.pseudo.js

563 lines
19 KiB
JavaScript
Raw Normal View History

2017-10-21 11:43:46 -06:00
/*******************************************************************************
uBlock Origin - a browser extension to block requests.
Copyright (C) 2017-2018 Raymond Hill
2017-10-21 11:43:46 -06:00
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see {http://www.gnu.org/licenses/}.
Home: https://github.com/gorhill/uBlock
*/
'use strict';
// Packaging this file is optional: it is not necessary to package it if the
// platform is known to support user stylesheets.
2017-10-21 11:43:46 -06:00
// >>>>>>>> start of HUGE-IF-BLOCK
if ( typeof vAPI === 'object' && vAPI.userStylesheet === undefined ) {
2017-10-21 11:43:46 -06:00
/******************************************************************************/
/******************************************************************************/
2017-10-22 06:59:29 -06:00
vAPI.userStylesheet = {
style: null,
styleFixCount: 0,
2017-10-22 06:59:29 -06:00
css: new Map(),
disabled: false,
apply: function() {
},
inject: function() {
this.style = document.createElement('style');
this.style.disabled = this.disabled;
const parent = document.head || document.documentElement;
if ( parent === null ) { return; }
parent.appendChild(this.style);
const observer = new MutationObserver(function() {
if ( this.style === null ) { return; }
if ( this.style.sheet !== null ) { return; }
this.styleFixCount += 1;
if ( this.styleFixCount < 32 ) {
parent.appendChild(this.style);
} else {
observer.disconnect();
}
}.bind(this));
observer.observe(parent, { childList: true });
},
2017-10-22 06:59:29 -06:00
add: function(cssText) {
if ( cssText === '' || this.css.has(cssText) ) { return; }
if ( this.style === null ) { this.inject(); }
const sheet = this.style.sheet;
2017-10-22 06:59:29 -06:00
if ( !sheet ) { return; }
const i = sheet.cssRules.length;
2017-10-22 06:59:29 -06:00
sheet.insertRule(cssText, i);
this.css.set(cssText, sheet.cssRules[i]);
},
remove: function(cssText) {
if ( cssText === '' ) { return; }
const cssRule = this.css.get(cssText);
2017-10-22 06:59:29 -06:00
if ( cssRule === undefined ) { return; }
this.css.delete(cssText);
if ( this.style === null ) { return; }
const sheet = this.style.sheet;
if ( !sheet ) { return; }
const rules = sheet.cssRules;
let i = rules.length;
2017-10-22 06:59:29 -06:00
while ( i-- ) {
if ( rules[i] !== cssRule ) { continue; }
sheet.deleteRule(i);
2017-10-22 06:59:29 -06:00
break;
}
if ( rules.length !== 0 ) { return; }
const style = this.style;
this.style = null;
const parent = style.parentNode;
if ( parent !== null ) {
parent.removeChild(style);
2017-10-22 06:59:29 -06:00
}
},
toggle: function(state) {
if ( state === undefined ) { state = this.disabled; }
if ( state !== this.disabled ) { return; }
this.disabled = !state;
if ( this.style !== null ) {
this.style.disabled = this.disabled;
}
}
};
/******************************************************************************/
vAPI.DOMFilterer = class {
constructor() {
this.commitTimer = new vAPI.SafeAnimationFrame(this.commitNow.bind(this));
this.domIsReady = document.readyState !== 'loading';
this.listeners = [];
this.excludedNodeSet = new WeakSet();
this.addedNodes = new Set();
this.removedNodes = false;
2017-10-21 11:43:46 -06:00
this.specificSimpleHide = new Set();
this.specificSimpleHideAggregated = undefined;
this.addedSpecificSimpleHide = [];
this.specificComplexHide = new Set();
this.specificComplexHideAggregated = undefined;
this.addedSpecificComplexHide = [];
this.specificOthers = [];
this.genericSimpleHide = new Set();
this.genericComplexHide = new Set();
this.exceptedCSSRules = [];
this.hideNodeExpando = undefined;
this.hideNodeBatchProcessTimer = undefined;
this.hiddenNodeObserver = undefined;
this.hiddenNodesetToProcess = new Set();
this.hiddenNodeset = new WeakSet();
if ( vAPI.domWatcher instanceof Object ) {
vAPI.domWatcher.addListener(this);
}
// https://www.w3.org/community/webed/wiki/CSS/Selectors#Combinators
this.reCSSCombinators = /[ >+~]/;
}
2017-10-21 11:43:46 -06:00
commitNow() {
2017-10-21 11:43:46 -06:00
this.commitTimer.clear();
2017-10-22 06:59:29 -06:00
if ( this.domIsReady !== true || vAPI.userStylesheet.disabled ) {
2017-10-21 11:43:46 -06:00
return;
}
// Filterset changed.
if ( this.addedSpecificSimpleHide.length !== 0 ) {
//console.time('specific simple filterset changed');
//console.log('added %d specific simple selectors', this.addedSpecificSimpleHide.length);
const nodes = document.querySelectorAll(this.addedSpecificSimpleHide.join(','));
for ( const node of nodes ) {
2017-10-21 11:43:46 -06:00
this.hideNode(node);
}
this.addedSpecificSimpleHide = [];
this.specificSimpleHideAggregated = undefined;
//console.timeEnd('specific simple filterset changed');
2017-10-21 11:43:46 -06:00
}
if ( this.addedSpecificComplexHide.length !== 0 ) {
//console.time('specific complex filterset changed');
//console.log('added %d specific complex selectors', this.addedSpecificComplexHide.length);
const nodes = document.querySelectorAll(this.addedSpecificComplexHide.join(','));
for ( const node of nodes ) {
2017-10-21 11:43:46 -06:00
this.hideNode(node);
}
this.addedSpecificComplexHide = [];
this.specificComplexHideAggregated = undefined;
//console.timeEnd('specific complex filterset changed');
2017-10-21 11:43:46 -06:00
}
// DOM layout changed.
const domNodesAdded = this.addedNodes.size !== 0;
const domLayoutChanged = domNodesAdded || this.removedNodes;
2017-10-21 11:43:46 -06:00
if ( domNodesAdded === false || domLayoutChanged === false ) {
return;
}
//console.log('%d nodes added', this.addedNodes.size);
2017-10-21 11:43:46 -06:00
if ( this.specificSimpleHide.size !== 0 && domNodesAdded ) {
//console.time('dom layout changed/specific simple selectors');
2017-10-21 11:43:46 -06:00
if ( this.specificSimpleHideAggregated === undefined ) {
this.specificSimpleHideAggregated =
Array.from(this.specificSimpleHide).join(',\n');
}
for ( const node of this.addedNodes ) {
if ( node.matches(this.specificSimpleHideAggregated) ) {
2017-10-21 11:43:46 -06:00
this.hideNode(node);
}
const nodes = node.querySelectorAll(this.specificSimpleHideAggregated);
for ( const node of nodes ) {
2017-10-21 11:43:46 -06:00
this.hideNode(node);
}
}
//console.timeEnd('dom layout changed/specific simple selectors');
2017-10-21 11:43:46 -06:00
}
if ( this.specificComplexHide.size !== 0 && domLayoutChanged ) {
//console.time('dom layout changed/specific complex selectors');
2017-10-21 11:43:46 -06:00
if ( this.specificComplexHideAggregated === undefined ) {
this.specificComplexHideAggregated =
Array.from(this.specificComplexHide).join(',\n');
}
const nodes = document.querySelectorAll(this.specificComplexHideAggregated);
for ( const node of nodes ) {
2017-10-21 11:43:46 -06:00
this.hideNode(node);
}
//console.timeEnd('dom layout changed/specific complex selectors');
2017-10-21 11:43:46 -06:00
}
this.addedNodes.clear();
this.removedNodes = false;
}
2017-10-21 11:43:46 -06:00
commit(now) {
2017-10-21 11:43:46 -06:00
if ( now ) {
this.commitTimer.clear();
this.commitNow();
} else {
this.commitTimer.start();
}
}
2017-10-21 11:43:46 -06:00
addCSSRule(selectors, declarations, details = {}) {
2017-10-21 11:43:46 -06:00
if ( selectors === undefined ) { return; }
const selectorsStr = Array.isArray(selectors) ?
2017-10-21 11:43:46 -06:00
selectors.join(',\n') :
selectors;
if ( selectorsStr.length === 0 ) { return; }
vAPI.userStylesheet.add(selectorsStr + '\n{' + declarations + '}');
2017-10-21 11:43:46 -06:00
this.commit();
if ( details.silent !== true && this.hasListeners() ) {
2017-11-14 13:03:20 -07:00
this.triggerListeners({
declarative: [ [ selectorsStr, declarations ] ]
});
}
2017-10-21 11:43:46 -06:00
if ( declarations !== 'display:none!important;' ) {
2017-10-22 06:59:29 -06:00
this.specificOthers.push({
selectors: selectorsStr,
declarations: declarations
});
2017-10-21 11:43:46 -06:00
return;
}
const isGeneric= details.lazy === true;
const isSimple = details.type === 'simple';
const isComplex = details.type === 'complex';
2017-10-22 06:59:29 -06:00
2017-10-21 11:43:46 -06:00
if ( isGeneric ) {
if ( isSimple ) {
this.genericSimpleHide.add(selectorsStr);
return;
}
if ( isComplex ) {
this.genericComplexHide.add(selectorsStr);
return;
}
}
const selectorsArr = Array.isArray(selectors) ?
2017-10-21 11:43:46 -06:00
selectors :
selectors.split(',\n');
if ( isGeneric ) {
for ( const selector of selectorsArr ) {
2017-10-21 11:43:46 -06:00
if ( this.reCSSCombinators.test(selector) ) {
this.genericComplexHide.add(selector);
} else {
this.genericSimpleHide.add(selector);
}
}
return;
}
// Specific cosmetic filters.
for ( const selector of selectorsArr ) {
2017-10-21 11:43:46 -06:00
if (
isComplex ||
isSimple === false && this.reCSSCombinators.test(selector)
) {
if ( this.specificComplexHide.has(selector) === false ) {
this.specificComplexHide.add(selector);
this.addedSpecificComplexHide.push(selector);
}
} else if ( this.specificSimpleHide.has(selector) === false ) {
this.specificSimpleHide.add(selector);
this.addedSpecificSimpleHide.push(selector);
}
}
}
exceptCSSRules(exceptions) {
if ( exceptions.length === 0 ) { return; }
this.exceptedCSSRules.push(...exceptions);
if ( this.hasListeners() ) {
this.triggerListeners({ exceptions });
}
}
2017-10-21 11:43:46 -06:00
onDOMCreated() {
2017-10-21 11:43:46 -06:00
this.domIsReady = true;
this.addedNodes.clear();
this.removedNodes = false;
this.commit();
}
2017-10-21 11:43:46 -06:00
onDOMChanged(addedNodes, removedNodes) {
for ( const node of addedNodes ) {
2017-10-21 11:43:46 -06:00
this.addedNodes.add(node);
}
this.removedNodes = this.removedNodes || removedNodes;
this.commit();
}
2017-10-21 11:43:46 -06:00
addListener(listener) {
2017-10-21 11:43:46 -06:00
if ( this.listeners.indexOf(listener) !== -1 ) { return; }
this.listeners.push(listener);
}
2017-10-21 11:43:46 -06:00
removeListener(listener) {
const pos = this.listeners.indexOf(listener);
2017-10-21 11:43:46 -06:00
if ( pos === -1 ) { return; }
this.listeners.splice(pos, 1);
}
2017-10-21 11:43:46 -06:00
hasListeners() {
2017-11-14 13:03:20 -07:00
return this.listeners.length !== 0;
}
2017-11-14 13:03:20 -07:00
triggerListeners(changes) {
for ( const listener of this.listeners ) {
listener.onFiltersetChanged(changes);
2017-10-21 11:43:46 -06:00
}
}
2017-10-21 11:43:46 -06:00
// https://jsperf.com/clientheight-and-clientwidth-vs-getcomputedstyle
// Avoid getComputedStyle(), detecting whether a node is visible can be
// achieved with clientWidth/clientHeight.
// https://gist.github.com/paulirish/5d52fb081b3570c81e3a
// Do not interleave read-from/write-to the DOM. Write-to DOM
// operations would cause the first read-from to be expensive, and
// interleaving means that potentially all single read-from operation
// would be expensive rather than just the 1st one.
// Benchmarking toggling off/on cosmetic filtering confirms quite an
// improvement when:
// - batching as much as possible handling of all nodes;
// - avoiding to interleave read-from/write-to operations.
// However, toggling off/on cosmetic filtering repeatedly is not
// a real use case, but this shows this will help performance
// on sites which try to use inline styles to bypass blockers.
hideNodeBatchProcess() {
2017-10-21 11:43:46 -06:00
this.hideNodeBatchProcessTimer.clear();
const expando = this.hideNodeExpando;
for ( const node of this.hiddenNodesetToProcess ) {
2017-10-21 11:43:46 -06:00
if (
this.hiddenNodeset.has(node) === false ||
node[expando] === undefined ||
node.clientHeight === 0 || node.clientWidth === 0
) {
continue;
}
let attr = node.getAttribute('style');
2017-10-21 11:43:46 -06:00
if ( attr === null ) {
attr = '';
} else if ( attr.length !== 0 ) {
if ( attr.endsWith('display:none!important;') ) { continue; }
if ( attr.charCodeAt(attr.length - 1) !== 0x3B /* ';' */ ) {
attr += ';';
}
2017-10-21 11:43:46 -06:00
}
node.setAttribute('style', attr + 'display:none!important;');
2017-10-21 11:43:46 -06:00
}
this.hiddenNodesetToProcess.clear();
}
2017-10-21 11:43:46 -06:00
hideNodeObserverHandler(mutations) {
2017-10-22 06:59:29 -06:00
if ( vAPI.userStylesheet.disabled ) { return; }
const stagedNodes = this.hiddenNodesetToProcess;
for ( const mutation of mutations ) {
stagedNodes.add(mutation.target);
2017-10-21 11:43:46 -06:00
}
this.hideNodeBatchProcessTimer.start();
}
2017-10-21 11:43:46 -06:00
hideNodeInit() {
2017-10-21 11:43:46 -06:00
this.hideNodeExpando = vAPI.randomToken();
this.hideNodeBatchProcessTimer =
new vAPI.SafeAnimationFrame(this.hideNodeBatchProcess.bind(this));
this.hiddenNodeObserver =
new MutationObserver(this.hideNodeObserverHandler.bind(this));
if ( this.hideNodeStyleSheetInjected === false ) {
this.hideNodeStyleSheetInjected = true;
2017-10-22 06:59:29 -06:00
vAPI.userStylesheet.add(
`[${this.hideNodeAttr}]\n{display:none!important;}`
2017-10-21 11:43:46 -06:00
);
}
}
2017-10-21 11:43:46 -06:00
excludeNode(node) {
2017-10-21 11:43:46 -06:00
this.excludedNodeSet.add(node);
this.unhideNode(node);
}
2017-10-21 11:43:46 -06:00
unexcludeNode(node) {
2017-10-22 06:59:29 -06:00
this.excludedNodeSet.delete(node);
}
2017-10-22 06:59:29 -06:00
hideNode(node) {
2017-10-21 11:43:46 -06:00
if ( this.excludedNodeSet.has(node) ) { return; }
if ( this.hideNodeAttr === undefined ) { return; }
2017-10-21 11:43:46 -06:00
if ( this.hiddenNodeset.has(node) ) { return; }
node.hidden = true;
2017-10-21 11:43:46 -06:00
this.hiddenNodeset.add(node);
if ( this.hideNodeExpando === undefined ) { this.hideNodeInit(); }
2017-10-22 06:59:29 -06:00
node.setAttribute(this.hideNodeAttr, '');
2017-10-21 11:43:46 -06:00
if ( node[this.hideNodeExpando] === undefined ) {
node[this.hideNodeExpando] =
node.hasAttribute('style') &&
(node.getAttribute('style') || '');
}
this.hiddenNodesetToProcess.add(node);
this.hideNodeBatchProcessTimer.start();
this.hiddenNodeObserver.observe(node, this.hiddenNodeObserverOptions);
}
2017-10-21 11:43:46 -06:00
unhideNode(node) {
2017-10-21 11:43:46 -06:00
if ( this.hiddenNodeset.has(node) === false ) { return; }
node.hidden = false;
2017-10-22 06:59:29 -06:00
node.removeAttribute(this.hideNodeAttr);
2017-10-21 11:43:46 -06:00
this.hiddenNodesetToProcess.delete(node);
if ( this.hideNodeExpando === undefined ) { return; }
const attr = node[this.hideNodeExpando];
2017-10-21 11:43:46 -06:00
if ( attr === false ) {
node.removeAttribute('style');
} else if ( typeof attr === 'string' ) {
node.setAttribute('style', attr);
}
node[this.hideNodeExpando] = undefined;
this.hiddenNodeset.delete(node);
}
2017-10-21 11:43:46 -06:00
showNode(node) {
node.hidden = false;
const attr = node[this.hideNodeExpando];
2017-10-21 11:43:46 -06:00
if ( attr === false ) {
node.removeAttribute('style');
} else if ( typeof attr === 'string' ) {
node.setAttribute('style', attr);
}
}
2017-10-21 11:43:46 -06:00
unshowNode(node) {
node.hidden = true;
2017-10-21 11:43:46 -06:00
this.hiddenNodesetToProcess.add(node);
}
2017-10-21 11:43:46 -06:00
toggle(state, callback) {
2017-10-22 06:59:29 -06:00
vAPI.userStylesheet.toggle(state);
const disabled = vAPI.userStylesheet.disabled;
const nodes = document.querySelectorAll(`[${this.hideNodeAttr}]`);
for ( const node of nodes ) {
2017-10-21 11:43:46 -06:00
if ( disabled ) {
this.showNode(node);
} else {
this.unshowNode(node);
}
}
if ( disabled === false && this.hideNodeExpando !== undefined ) {
this.hideNodeBatchProcessTimer.start();
}
if ( typeof callback === 'function' ) {
callback();
}
}
2017-10-21 11:43:46 -06:00
getAllSelectors_(all) {
const out = {
declarative: [],
exceptions: this.exceptedCSSRules,
2017-11-14 13:03:20 -07:00
};
2017-10-22 06:59:29 -06:00
if ( this.specificSimpleHide.size !== 0 ) {
2017-11-14 13:03:20 -07:00
out.declarative.push([
Array.from(this.specificSimpleHide).join(',\n'),
'display:none!important;'
]);
2017-10-22 06:59:29 -06:00
}
if ( this.specificComplexHide.size !== 0 ) {
2017-11-14 13:03:20 -07:00
out.declarative.push([
Array.from(this.specificComplexHide).join(',\n'),
'display:none!important;'
]);
2017-10-22 06:59:29 -06:00
}
if ( this.genericSimpleHide.size !== 0 ) {
2017-11-14 13:03:20 -07:00
out.declarative.push([
Array.from(this.genericSimpleHide).join(',\n'),
'display:none!important;'
]);
2017-10-22 06:59:29 -06:00
}
if ( this.genericComplexHide.size !== 0 ) {
2017-11-14 13:03:20 -07:00
out.declarative.push([
Array.from(this.genericComplexHide).join(',\n'),
'display:none!important;'
]);
2017-10-22 06:59:29 -06:00
}
if ( all ) {
2017-11-14 13:03:20 -07:00
out.declarative.push([
'[' + this.hideNodeAttr + ']',
'display:none!important;'
]);
2017-10-22 06:59:29 -06:00
}
for ( const entry of this.specificOthers ) {
2017-11-14 13:03:20 -07:00
out.declarative.push([ entry.selectors, entry.declarations ]);
2017-10-22 06:59:29 -06:00
}
2017-11-14 13:03:20 -07:00
return out;
}
2017-10-22 06:59:29 -06:00
getFilteredElementCount() {
const details = this.getAllSelectors_(true);
2017-11-14 13:03:20 -07:00
if ( Array.isArray(details.declarative) === false ) { return 0; }
const selectors = details.declarative.map(entry => entry[0]);
2017-10-22 06:59:29 -06:00
if ( selectors.length === 0 ) { return 0; }
2017-11-14 13:03:20 -07:00
return document.querySelectorAll(selectors.join(',\n')).length;
}
2017-10-21 11:43:46 -06:00
getAllSelectors() {
2017-11-14 13:03:20 -07:00
return this.getAllSelectors_(false);
2017-10-21 11:43:46 -06:00
}
};
vAPI.DOMFilterer.prototype.hiddenNodeObserverOptions = {
attributes: true,
attributeFilter: [ 'style' ]
};
2017-10-21 11:43:46 -06:00
/******************************************************************************/
/******************************************************************************/
}
// <<<<<<<< end of HUGE-IF-BLOCK
/*******************************************************************************
DO NOT:
- Remove the following code
- Add code beyond the following code
Reason:
- https://github.com/gorhill/uBlock/pull/3721
- uBO never uses the return value from injected content scripts
**/
void 0;