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

Side by Side Diff: include.preload.js

Issue 5838948538515456: Issue 370 - Make "Block element" hide elements for added filters (Closed)
Patch Set: Improved comment Created March 4, 2015, 7:34 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « include.postload.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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 }
OLDNEW
« no previous file with comments | « include.postload.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld