OLD | NEW |
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 162 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
173 } | 173 } |
174 | 174 |
175 result.push(prefix + selector.substring(start)); | 175 result.push(prefix + selector.substring(start)); |
176 } | 176 } |
177 | 177 |
178 return result; | 178 return result; |
179 } | 179 } |
180 | 180 |
181 function init(document) | 181 function init(document) |
182 { | 182 { |
| 183 var shadow = null; |
| 184 var style = null; |
| 185 |
183 // Use Shadow DOM if available to don't mess with web pages that rely on | 186 // Use Shadow DOM if available to don't mess with web pages that rely on |
184 // the order of their own <style> tags (#309). | 187 // the order of their own <style> tags (#309). |
185 // | 188 // |
186 // However, creating a shadow root breaks running CSS transitions. So we | 189 // However, creating a shadow root breaks running CSS transitions. So we |
187 // have to create the shadow root before transistions might start (#452). | 190 // have to create the shadow root before transistions might start (#452). |
188 // | 191 // |
189 // Also, we can't use shadow DOM on Google Docs, since it breaks printing | 192 // Also, we can't use shadow DOM on Google Docs, since it breaks printing |
190 // there (#1770). | 193 // there (#1770). |
191 var shadow = null; | |
192 if ("createShadowRoot" in document.documentElement && document.domain != "docs
.google.com") | 194 if ("createShadowRoot" in document.documentElement && document.domain != "docs
.google.com") |
193 { | 195 { |
194 shadow = document.documentElement.createShadowRoot(); | 196 shadow = document.documentElement.createShadowRoot(); |
195 shadow.appendChild(document.createElement("shadow")); | 197 shadow.appendChild(document.createElement("shadow")); |
196 } | 198 } |
197 | 199 |
198 // Sets the currently used CSS rules for elemhide filters | 200 var hideElements = function(selectors) |
199 var setElemhideCSSRules = function(selectors) | |
200 { | 201 { |
201 if (selectors.length == 0) | 202 // Create <style> element lazily, only if we add styles. Add it to |
202 return; | 203 // the shadow DOM if possible. Otherwise fallback to the <head> or |
203 | 204 // <html> element. If we have injected a style element before that |
204 var style = document.createElement("style"); | 205 // has been removed (the sheet property is null), create a new one. |
205 style.setAttribute("type", "text/css"); | 206 if (!style || !style.sheet) |
206 | |
207 if (shadow) | |
208 { | 207 { |
209 shadow.appendChild(style); | 208 style = document.createElement("style"); |
210 selectors = convertSelectorsForShadowDOM(selectors); | 209 (shadow || document.head || document.documentElement).appendChild(style); |
211 } | |
212 else | |
213 { | |
214 // Try to insert the style into the <head> tag, inserting directly under t
he | |
215 // document root breaks dev tools functionality: | |
216 // http://code.google.com/p/chromium/issues/detail?id=178109 | |
217 (document.head || document.documentElement).appendChild(style); | |
218 } | 210 } |
219 | 211 |
220 var setRules = function() | 212 // It can happen that the frame already navigated to a different document |
| 213 // while we were waiting for the background page to respond. In that case |
| 214 // the sheet property will stay null, after addind the <style> element to |
| 215 // the shadow DOM. |
| 216 if (style.sheet) |
221 { | 217 { |
222 // The sheet property might not exist yet if the | 218 // If using shadow DOM, we have to add the ::content pseudo-element |
223 // <style> element was created for a sub frame | 219 // before each selector, in order to match elements within the |
224 if (!style.sheet) | 220 // insertion point. |
225 { | 221 if (shadow) |
226 setTimeout(setRules, 0); | 222 selectors = convertSelectorsForShadowDOM(selectors); |
227 return; | |
228 } | |
229 | 223 |
230 // WebKit apparently chokes when the selector list in a CSS rule is huge. | 224 // WebKit (and Blink?) apparently chokes when the selector list in a |
231 // So we split the elemhide selectors into groups. | 225 // CSS rule is huge. So we split the elemhide selectors into groups. |
232 for (var i = 0; selectors.length > 0; i++) | 226 while (selectors.length > 0) |
233 { | 227 { |
234 var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", "); | 228 var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", "); |
235 style.sheet.insertRule(selector + " { display: none !important; }", i); | 229 |
| 230 style.sheet.insertRule( |
| 231 selector + " { display: none !important; }", |
| 232 style.sheet.cssRules.length |
| 233 ); |
236 } | 234 } |
237 }; | 235 } |
| 236 }; |
238 | 237 |
239 setRules(); | 238 ext.backgroundPage.sendMessage({type: "get-selectors"}, function(selectors) |
240 reinjectRulesWhenRemoved(document, style); | 239 { |
241 }; | 240 if (selectors.length > 0) |
| 241 { |
| 242 hideElements(selectors); |
| 243 reinjectRulesWhenRemoved(document, style); |
| 244 } |
| 245 }); |
242 | 246 |
243 document.addEventListener("error", function(event) | 247 document.addEventListener("error", function(event) |
244 { | 248 { |
245 checkCollapse(event.target); | 249 checkCollapse(event.target); |
246 }, true); | 250 }, true); |
247 | 251 |
248 document.addEventListener("load", function(event) | 252 document.addEventListener("load", function(event) |
249 { | 253 { |
250 var element = event.target; | 254 var element = event.target; |
251 | 255 |
252 if (/^i?frame$/.test(element.localName)) | 256 if (/^i?frame$/.test(element.localName)) |
253 checkCollapse(element); | 257 checkCollapse(element); |
254 | 258 |
255 // prior to Chrome 37, content scripts cannot run on about:blank, | 259 // prior to Chrome 37, content scripts cannot run on about:blank, |
256 // about:srcdoc and javascript: URLs. Moreover, as of Chrome 40 | 260 // about:srcdoc and javascript: URLs. Moreover, as of Chrome 40 |
257 // "load" and "error" events aren't dispatched there. So we have | 261 // "load" and "error" events aren't dispatched there. So we have |
258 // to apply element hiding and collapsing from the parent frame. | 262 // to apply element hiding and collapsing from the parent frame. |
259 if (/\bChrome\//.test(navigator.userAgent) && isInlineFrame(element)) | 263 if (/\bChrome\//.test(navigator.userAgent) && isInlineFrame(element)) |
260 { | 264 { |
261 init(element.contentDocument); | 265 init(element.contentDocument); |
262 | 266 |
263 for (var tagName in typeMap) | 267 for (var tagName in typeMap) |
264 Array.prototype.forEach.call(element.contentDocument.getElementsByTagNam
e(tagName), checkCollapse); | 268 Array.prototype.forEach.call(element.contentDocument.getElementsByTagNam
e(tagName), checkCollapse); |
265 } | 269 } |
266 }, true); | 270 }, true); |
267 | 271 |
268 ext.backgroundPage.sendMessage({type: "get-selectors"}, setElemhideCSSRules); | 272 return hideElements; |
269 } | 273 } |
270 | 274 |
271 if (document instanceof HTMLDocument) | 275 if (document instanceof HTMLDocument) |
272 { | 276 { |
273 checkSitekey(); | 277 checkSitekey(); |
274 init(document); | 278 window.hideElements = init(document); |
275 } | 279 } |
OLD | NEW |