Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: include.preload.js

Issue 29575739: Issue 5864 - Remove previous style sheet before adding one (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Patch Set: Maintain separate style sheet for emulated selectors Created Oct. 14, 2017, 2:18 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | lib/cssInjection.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: include.preload.js
===================================================================
--- a/include.preload.js
+++ b/include.preload.js
@@ -338,19 +338,21 @@
clearTimeout(this.timeout);
}
};
function ElemHide()
{
this.shadow = this.createShadowTree();
this.style = null;
+ this.emulatedStyle = null;
this.tracer = null;
- this.inject = true;
+ this.inline = true;
this.emulatedPatterns = null;
+ this.injectedSelectors = [];
this.elemHideEmulation = new ElemHideEmulation(
this.addSelectors.bind(this),
this.hideElements.bind(this)
);
}
ElemHide.prototype = {
selectorGroupSize: 200,
@@ -374,34 +376,67 @@
// avoid creating the shadowRoot twice.
let shadow = document.documentElement.shadowRoot ||
document.documentElement.createShadowRoot();
shadow.appendChild(document.createElement("shadow"));
return shadow;
},
- injectSelectors(selectors, filters)
+ injectSelectors(selectors)
{
- if (!this.style)
+ if (selectors.length == 0 && this.injectedSelectors.length == 0)
+ return;
+
+ let message = {type: "elemhide.injectSelectors"};
+
+ if (selectors.length > 0)
+ message.selectors = selectors;
+
+ if (this.injectedSelectors.length > 0)
+ message.replaceSelectors = this.injectedSelectors;
Manish Jethani 2017/10/14 14:23:22 Renamed for clarity.
+
+ chrome.runtime.sendMessage(message);
+ this.injectedSelectors = selectors;
+ },
+
+ addSelectorsInline(selectors, filters, emulated)
+ {
+ if (emulated && this.emulatedStyle)
Manish Jethani 2017/10/14 14:23:21 So there's a separate style sheet for emulated sel
+ {
+ this.emulatedStyle.parentNode.removeChild(this.emulatedStyle);
+ this.emulatedStyle = null;
+ }
+
+ if (selectors.length == 0)
+ return;
+
+ let style = emulated ? this.emulatedStyle : this.style;
+
+ if (!style)
{
// Create <style> element lazily, only if we add styles. Add it to
// the shadow DOM if possible. Otherwise fallback to the <head> or
// <html> element. If we have injected a style element before that
// has been removed (the sheet property is null), create a new one.
- this.style = document.createElement("style");
+ style = document.createElement("style");
(this.shadow || document.head ||
- document.documentElement).appendChild(this.style);
+ document.documentElement).appendChild(style);
// It can happen that the frame already navigated to a different
// document while we were waiting for the background page to respond.
// In that case the sheet property will stay null, after addind the
// <style> element to the shadow DOM.
- if (!this.style.sheet)
+ if (!style.sheet)
return;
+
+ if (emulated)
+ this.emulatedStyle = style;
+ else
+ this.style = style;
}
// If using shadow DOM, we have to add the ::content pseudo-element
// before each selector, in order to match elements within the
// insertion point.
let preparedSelectors = [];
if (this.shadow)
{
@@ -422,49 +457,46 @@
// (Chrome also has a limit, larger... but we're not certain exactly what it
// is! Edge apparently has no such limit.)
// [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69debb75fc1de/Source/WebCore/css/RuleSet.h#L68
for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
{
let selector = preparedSelectors.slice(
i, i + this.selectorGroupSize
).join(", ");
- this.style.sheet.insertRule(selector + "{display: none !important;}",
- this.style.sheet.cssRules.length);
+ style.sheet.insertRule(selector + "{display: none !important;}",
+ style.sheet.cssRules.length);
}
+
+ if (this.tracer)
+ this.tracer.addSelectors(selectors, filters);
},
addSelectors(selectors, filters)
{
- if (selectors.length == 0)
- return;
-
- if (this.inject)
+ if (this.inline)
{
// Insert the style rules inline if we have been instructed by the
// background page to do so. This is usually the case, except on platforms
// that do support user stylesheets via the chrome.tabs.insertCSS API
// (Firefox 53 onwards for now and possibly Chrome in the near future).
// Once all supported platforms have implemented this API, we can remove
// the code below. See issue #5090.
// Related Chrome and Firefox issues:
// https://bugs.chromium.org/p/chromium/issues/detail?id=632009
// https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
- this.injectSelectors(selectors, filters);
+ this.addSelectorsInline(selectors, filters, true);
Manish Jethani 2017/10/14 14:23:21 addSelectors is now only called for emulated selec
}
else
{
- chrome.runtime.sendMessage({
- type: "elemhide.injectSelectors",
- selectors
- });
+ this.injectSelectors(selectors);
+
+ if (this.tracer && selectors.length > 0)
+ this.tracer.addSelectors(selectors, filters);
}
-
- if (this.tracer)
- this.tracer.addSelectors(selectors, filters);
},
hideElements(elements, filters)
{
for (let element of elements)
hideElement(element);
if (this.tracer)
@@ -480,27 +512,27 @@
apply()
{
chrome.runtime.sendMessage({type: "elemhide.getSelectors"}, response =>
{
if (this.tracer)
this.tracer.disconnect();
this.tracer = null;
- if (this.style && this.style.parentElement)
- this.style.parentElement.removeChild(this.style);
+ if (this.style && this.style.parentNode)
Manish Jethani 2017/10/14 14:23:22 This needs to be parentNode, not parentElement, be
Manish Jethani 2017/10/14 21:35:33 Actually, why is this needed? The styles here will
Manish Jethani 2017/10/15 21:29:12 OK, this code is called from composer.postload.js
+ this.style.parentNode.removeChild(this.style);
this.style = null;
if (response.trace)
this.tracer = new ElementHidingTracer();
- this.inject = response.inject;
+ this.inline = response.inline;
- if (this.inject)
- this.addSelectors(response.selectors);
+ if (this.inline)
+ this.addSelectorsInline(response.selectors);
else if (this.tracer)
this.tracer.addSelectors(response.selectors);
this.elemHideEmulation.apply(response.emulatedPatterns);
});
}
};
« no previous file with comments | « no previous file | lib/cssInjection.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld