LEFT | RIGHT |
1 /* | 1 /* |
2 * This file is part of Adblock Plus <https://adblockplus.org/>, | 2 * This file is part of Adblock Plus <https://adblockplus.org/>, |
3 * Copyright (C) 2006-2015 Eyeo GmbH | 3 * Copyright (C) 2006-2015 Eyeo GmbH |
4 * | 4 * |
5 * Adblock Plus is free software: you can redistribute it and/or modify | 5 * Adblock Plus is free software: you can redistribute it and/or modify |
6 * it under the terms of the GNU General Public License version 3 as | 6 * it under the terms of the GNU General Public License version 3 as |
7 * published by the Free Software Foundation. | 7 * published by the Free Software Foundation. |
8 * | 8 * |
9 * Adblock Plus is distributed in the hope that it will be useful, | 9 * Adblock Plus is distributed in the hope that it will be useful, |
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of | 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of |
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
136 // Using non-standard addRule() here. This is the only way | 136 // Using non-standard addRule() here. This is the only way |
137 // to add rules at the end of a cross-origin stylesheet | 137 // to add rules at the end of a cross-origin stylesheet |
138 // because we don't know how many rules are already in there | 138 // because we don't know how many rules are already in there |
139 stylesheet.addRule(selector, "display: none !important;"); | 139 stylesheet.addRule(selector, "display: none !important;"); |
140 } | 140 } |
141 } | 141 } |
142 ); | 142 ); |
143 }); | 143 }); |
144 | 144 |
145 observer.observe(style.parentNode, {childList: true}); | 145 observer.observe(style.parentNode, {childList: true}); |
| 146 return observer; |
146 } | 147 } |
147 | 148 |
148 function convertSelectorsForShadowDOM(selectors) | 149 function convertSelectorsForShadowDOM(selectors) |
149 { | 150 { |
150 var result = []; | 151 var result = []; |
151 var prefix = "::content "; | 152 var prefix = "::content "; |
152 | 153 |
153 for (var i = 0; i < selectors.length; i++) | 154 for (var i = 0; i < selectors.length; i++) |
154 { | 155 { |
155 var selector = selectors[i]; | 156 var selector = selectors[i]; |
(...skipping 19 matching lines...) Expand all Loading... |
175 result.push(prefix + selector.substring(start)); | 176 result.push(prefix + selector.substring(start)); |
176 } | 177 } |
177 | 178 |
178 return result; | 179 return result; |
179 } | 180 } |
180 | 181 |
181 function init(document) | 182 function init(document) |
182 { | 183 { |
183 var shadow = null; | 184 var shadow = null; |
184 var style = null; | 185 var style = null; |
| 186 var observer = null; |
185 | 187 |
186 // Use Shadow DOM if available to don't mess with web pages that rely on | 188 // Use Shadow DOM if available to don't mess with web pages that rely on |
187 // the order of their own <style> tags (#309). | 189 // the order of their own <style> tags (#309). |
188 // | 190 // |
189 // However, creating a shadow root breaks running CSS transitions. So we | 191 // However, creating a shadow root breaks running CSS transitions. So we |
190 // have to create the shadow root before transistions might start (#452). | 192 // have to create the shadow root before transistions might start (#452). |
191 // | 193 // |
192 // Also, we can't use shadow DOM on Google Docs, since it breaks printing | 194 // Also, we can't use shadow DOM on Google Docs, since it breaks printing |
193 // there (#1770). | 195 // there (#1770). |
194 if ("createShadowRoot" in document.documentElement && document.domain != "docs
.google.com") | 196 if ("createShadowRoot" in document.documentElement && document.domain != "docs
.google.com") |
195 { | 197 { |
196 shadow = document.documentElement.createShadowRoot(); | 198 shadow = document.documentElement.createShadowRoot(); |
197 shadow.appendChild(document.createElement("shadow")); | 199 shadow.appendChild(document.createElement("shadow")); |
198 } | 200 } |
199 | 201 |
200 var hideElements = function(selectors) | 202 var updateStylesheet = function(reinject) |
201 { | 203 { |
202 // Create <style> element lazily, only if we add styles. Add it to | 204 ext.backgroundPage.sendMessage({type: "get-selectors"}, function(selectors) |
203 // the shadow DOM if possible. Otherwise fallback to the <head> or | 205 { |
204 // <html> element. If we have injected a style element before that | 206 if (observer) |
205 // has been removed (the sheet property is null), create a new one. | 207 { |
206 if (!style || !style.sheet) | 208 observer.disconnect(); |
207 { | 209 observer = null; |
208 style = document.createElement("style"); | 210 } |
209 (shadow || document.head || document.documentElement).appendChild(style); | 211 |
210 } | 212 if (style && style.parentElement) |
211 | 213 { |
212 var insertRules = function() | 214 style.parentElement.removeChild(style); |
213 { | 215 style = null; |
214 // The sheet property might not exist yet if the | 216 } |
215 // <style> element was created for an anonymous frame | 217 |
216 if (!style.sheet) | 218 if (selectors.length > 0) |
217 { | 219 { |
218 setTimeout(insertRules, 0); | 220 // Create <style> element lazily, only if we add styles. Add it to |
219 return; | 221 // the shadow DOM if possible. Otherwise fallback to the <head> or |
220 } | 222 // <html> element. If we have injected a style element before that |
221 | 223 // has been removed (the sheet property is null), create a new one. |
222 // If using shadow DOM, we have to add the ::content pseudo-element | 224 style = document.createElement("style"); |
223 // before each selector, in order to match elements within the | 225 (shadow || document.head || document.documentElement).appendChild(style)
; |
224 // insertion point. | 226 |
225 if (shadow) | 227 // It can happen that the frame already navigated to a different |
226 selectors = convertSelectorsForShadowDOM(selectors); | 228 // document while we were waiting for the background page to respond. |
227 | 229 // In that case the sheet property will stay null, after addind the |
228 // WebKit (and Blink?) apparently chokes when the selector list in a | 230 // <style> element to the shadow DOM. |
229 // CSS rule is huge. So we split the elemhide selectors into groups. | 231 if (style.sheet) |
230 while (selectors.length > 0) | 232 { |
231 { | 233 // If using shadow DOM, we have to add the ::content pseudo-element |
232 var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", "); | 234 // before each selector, in order to match elements within the |
233 | 235 // insertion point. |
234 style.sheet.insertRule( | 236 if (shadow) |
235 selector + " { display: none !important; }", | 237 selectors = convertSelectorsForShadowDOM(selectors); |
236 style.sheet.cssRules.length | 238 |
237 ); | 239 // WebKit (and Blink?) apparently chokes when the selector list in a |
238 } | 240 // CSS rule is huge. So we split the elemhide selectors into groups. |
239 } | 241 for (var i = 0; selectors.length > 0; i++) |
240 | 242 { |
241 insertRules(); | 243 var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", "); |
| 244 style.sheet.insertRule(selector + " { display: none !important; }",
i); |
| 245 } |
| 246 } |
| 247 |
| 248 observer = reinjectRulesWhenRemoved(document, style); |
| 249 } |
| 250 }); |
242 }; | 251 }; |
243 | 252 |
244 ext.backgroundPage.sendMessage({type: "get-selectors"}, function(selectors) | 253 updateStylesheet(); |
245 { | |
246 if (selectors.length > 0) | |
247 { | |
248 hideElements(selectors); | |
249 reinjectRulesWhenRemoved(document, style); | |
250 } | |
251 }); | |
252 | 254 |
253 document.addEventListener("error", function(event) | 255 document.addEventListener("error", function(event) |
254 { | 256 { |
255 checkCollapse(event.target); | 257 checkCollapse(event.target); |
256 }, true); | 258 }, true); |
257 | 259 |
258 document.addEventListener("load", function(event) | 260 document.addEventListener("load", function(event) |
259 { | 261 { |
260 var element = event.target; | 262 var element = event.target; |
261 | 263 |
262 if (/^i?frame$/.test(element.localName)) | 264 if (/^i?frame$/.test(element.localName)) |
263 checkCollapse(element); | 265 checkCollapse(element); |
264 | 266 |
265 // prior to Chrome 37, content scripts cannot run on about:blank, | 267 // prior to Chrome 37, content scripts cannot run on about:blank, |
266 // about:srcdoc and javascript: URLs. Moreover, as of Chrome 40 | 268 // about:srcdoc and javascript: URLs. Moreover, as of Chrome 40 |
267 // "load" and "error" events aren't dispatched there. So we have | 269 // "load" and "error" events aren't dispatched there. So we have |
268 // to apply element hiding and collapsing from the parent frame. | 270 // to apply element hiding and collapsing from the parent frame. |
269 if (/\bChrome\//.test(navigator.userAgent) && isInlineFrame(element)) | 271 if (/\bChrome\//.test(navigator.userAgent) && isInlineFrame(element)) |
270 { | 272 { |
271 init(element.contentDocument); | 273 init(element.contentDocument); |
272 | 274 |
273 for (var tagName in typeMap) | 275 for (var tagName in typeMap) |
274 Array.prototype.forEach.call(element.contentDocument.getElementsByTagNam
e(tagName), checkCollapse); | 276 Array.prototype.forEach.call(element.contentDocument.getElementsByTagNam
e(tagName), checkCollapse); |
275 } | 277 } |
276 }, true); | 278 }, true); |
277 | 279 |
278 return hideElements; | 280 return updateStylesheet; |
279 } | 281 } |
280 | 282 |
281 if (document instanceof HTMLDocument) | 283 if (document instanceof HTMLDocument) |
282 { | 284 { |
283 checkSitekey(); | 285 checkSitekey(); |
284 window.hideElements = init(document); | 286 window.updateStylesheet = init(document); |
285 } | 287 } |
LEFT | RIGHT |