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

Delta Between Two Patch Sets: include.preload.js

Issue 5838948538515456: Issue 370 - Make "Block element" hide elements for added filters (Closed)
Left Patch Set: Improved comment Created March 4, 2015, 7:34 p.m.
Right Patch Set: Addressed comments and simplified loop Created March 4, 2015, 9:35 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « include.postload.js ('k') | no next file » | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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
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
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 // It can happen that the frame already navigated to a different document 214 style.parentElement.removeChild(style);
213 // while we were waiting for the background page to respond. In that case 215 style = null;
214 // the sheet property will stay null, after addind the <style> element to 216 }
215 // the shadow DOM. 217
216 if (style.sheet) 218 if (selectors.length > 0)
217 { 219 {
218 // If using shadow DOM, we have to add the ::content pseudo-element 220 // Create <style> element lazily, only if we add styles. Add it to
219 // before each selector, in order to match elements within the 221 // the shadow DOM if possible. Otherwise fallback to the <head> or
220 // insertion point. 222 // <html> element. If we have injected a style element before that
221 if (shadow) 223 // has been removed (the sheet property is null), create a new one.
222 selectors = convertSelectorsForShadowDOM(selectors); 224 style = document.createElement("style");
223 225 (shadow || document.head || document.documentElement).appendChild(style) ;
224 // WebKit (and Blink?) apparently chokes when the selector list in a 226
225 // CSS rule is huge. So we split the elemhide selectors into groups. 227 // It can happen that the frame already navigated to a different
226 while (selectors.length > 0) 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 var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", "); 230 // <style> element to the shadow DOM.
229 231 if (style.sheet)
230 style.sheet.insertRule( 232 {
231 selector + " { display: none !important; }", 233 // If using shadow DOM, we have to add the ::content pseudo-element
232 style.sheet.cssRules.length 234 // before each selector, in order to match elements within the
233 ); 235 // insertion point.
234 } 236 if (shadow)
235 } 237 selectors = convertSelectorsForShadowDOM(selectors);
238
239 // WebKit (and Blink?) apparently chokes when the selector list in a
240 // CSS rule is huge. So we split the elemhide selectors into groups.
241 for (var i = 0; selectors.length > 0; i++)
242 {
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 });
236 }; 251 };
237 252
238 ext.backgroundPage.sendMessage({type: "get-selectors"}, function(selectors) 253 updateStylesheet();
239 {
240 if (selectors.length > 0)
241 {
242 hideElements(selectors);
243 reinjectRulesWhenRemoved(document, style);
244 }
245 });
246 254
247 document.addEventListener("error", function(event) 255 document.addEventListener("error", function(event)
248 { 256 {
249 checkCollapse(event.target); 257 checkCollapse(event.target);
250 }, true); 258 }, true);
251 259
252 document.addEventListener("load", function(event) 260 document.addEventListener("load", function(event)
253 { 261 {
254 var element = event.target; 262 var element = event.target;
255 263
256 if (/^i?frame$/.test(element.localName)) 264 if (/^i?frame$/.test(element.localName))
257 checkCollapse(element); 265 checkCollapse(element);
258 266
259 // prior to Chrome 37, content scripts cannot run on about:blank, 267 // prior to Chrome 37, content scripts cannot run on about:blank,
260 // about:srcdoc and javascript: URLs. Moreover, as of Chrome 40 268 // about:srcdoc and javascript: URLs. Moreover, as of Chrome 40
261 // "load" and "error" events aren't dispatched there. So we have 269 // "load" and "error" events aren't dispatched there. So we have
262 // to apply element hiding and collapsing from the parent frame. 270 // to apply element hiding and collapsing from the parent frame.
263 if (/\bChrome\//.test(navigator.userAgent) && isInlineFrame(element)) 271 if (/\bChrome\//.test(navigator.userAgent) && isInlineFrame(element))
264 { 272 {
265 init(element.contentDocument); 273 init(element.contentDocument);
266 274
267 for (var tagName in typeMap) 275 for (var tagName in typeMap)
268 Array.prototype.forEach.call(element.contentDocument.getElementsByTagNam e(tagName), checkCollapse); 276 Array.prototype.forEach.call(element.contentDocument.getElementsByTagNam e(tagName), checkCollapse);
269 } 277 }
270 }, true); 278 }, true);
271 279
272 return hideElements; 280 return updateStylesheet;
273 } 281 }
274 282
275 if (document instanceof HTMLDocument) 283 if (document instanceof HTMLDocument)
276 { 284 {
277 checkSitekey(); 285 checkSitekey();
278 window.hideElements = init(document); 286 window.updateStylesheet = init(document);
279 } 287 }
LEFTRIGHT
« include.postload.js ('k') | no next file » | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld