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

Side by Side Diff: include.preload.js

Issue 29893559: Issue 6999 - Generate style sheets in background page (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Patch Set: Apply patch for ElementHidingTracer Created Sept. 30, 2018, 8:35 a.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 | « dependencies ('k') | lib/contentFiltering.js » ('j') | 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-present eyeo GmbH 3 * Copyright (C) 2006-present 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 207 matching lines...) Expand 10 before | Expand all | Expand 10 after
218 }, 218 },
219 collapse => 219 collapse =>
220 { 220 {
221 if (collapse) 221 if (collapse)
222 { 222 {
223 if (selector) 223 if (selector)
224 { 224 {
225 if (!collapsingSelectors.has(selector)) 225 if (!collapsingSelectors.has(selector))
226 { 226 {
227 collapsingSelectors.add(selector); 227 collapsingSelectors.add(selector);
228 contentFiltering.addSelectors([selector], null, "collapsing", true); 228 contentFiltering.addSelectors([selector], "collapsing", true);
229 } 229 }
230 } 230 }
231 else 231 else
232 { 232 {
233 hideElement(element); 233 hideElement(element);
234 } 234 }
235 } 235 }
236 } 236 }
237 ); 237 );
238 } 238 }
(...skipping 12 matching lines...) Expand all
251 this.timeout = null; 251 this.timeout = null;
252 this.observer = new MutationObserver(this.observe.bind(this)); 252 this.observer = new MutationObserver(this.observe.bind(this));
253 this.trace = this.trace.bind(this); 253 this.trace = this.trace.bind(this);
254 254
255 if (document.readyState == "loading") 255 if (document.readyState == "loading")
256 document.addEventListener("DOMContentLoaded", this.trace); 256 document.addEventListener("DOMContentLoaded", this.trace);
257 else 257 else
258 this.trace(); 258 this.trace();
259 } 259 }
260 ElementHidingTracer.prototype = { 260 ElementHidingTracer.prototype = {
261 addSelectors(selectors, filters) 261 addSelectors(selectors)
262 { 262 {
263 let pairs = selectors.map((sel, i) => [sel, filters && filters[i]]); 263 if (document.readyState != "loading")
264 this.checkNodes([document], selectors);
264 265
265 if (document.readyState != "loading") 266 this.selectors.push(...selectors);
266 this.checkNodes([document], pairs);
267
268 this.selectors.push(...pairs);
269 }, 267 },
270 268
271 checkNodes(nodes, pairs) 269 checkNodes(nodes, selectors)
272 { 270 {
273 let selectors = []; 271 let effectiveSelectors = [];
274 let filters = [];
275 272
276 for (let [selector, filter] of pairs) 273 for (let selector of selectors)
277 { 274 {
278 nodes: for (let node of nodes) 275 nodes: for (let node of nodes)
279 { 276 {
280 for (let element of node.querySelectorAll(selector)) 277 for (let element of node.querySelectorAll(selector))
281 { 278 {
282 // Only consider selectors that actually have an effect on the 279 // Only consider selectors that actually have an effect on the
283 // computed styles, and aren't overridden by rules with higher 280 // computed styles, and aren't overridden by rules with higher
284 // priority, or haven't been circumvented in a different way. 281 // priority, or haven't been circumvented in a different way.
285 if (getComputedStyle(element).display == "none") 282 if (getComputedStyle(element).display == "none")
286 { 283 {
287 // For regular element hiding, we don't know the exact filter, 284 effectiveSelectors.push(selector);
288 // but the background page can find it with the given selector.
289 // In case of element hiding emulation, the generated selector
290 // we got here is different from the selector part of the filter,
291 // but in this case we can send the whole filter text instead.
292 if (filter)
293 filters.push(filter);
294 else
295 selectors.push(selector);
296
297 break nodes; 285 break nodes;
298 } 286 }
299 } 287 }
300 } 288 }
301 } 289 }
302 290
303 if (selectors.length > 0 || filters.length > 0) 291 if (effectiveSelectors.length > 0)
304 { 292 {
305 browser.runtime.sendMessage({ 293 browser.runtime.sendMessage({
306 type: "hitLogger.traceElemHide", 294 type: "hitLogger.traceElemHide",
307 selectors, filters 295 selectors: effectiveSelectors,
296 filters: []
308 }); 297 });
309 } 298 }
310 }, 299 },
311 300
312 onTimeout() 301 onTimeout()
313 { 302 {
314 this.checkNodes(this.changedNodes, this.selectors); 303 this.checkNodes(this.changedNodes, this.selectors);
315 this.changedNodes = []; 304 this.changedNodes = [];
316 this.timeout = null; 305 this.timeout = null;
317 }, 306 },
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after
390 document.removeEventListener("DOMContentLoaded", this.trace); 379 document.removeEventListener("DOMContentLoaded", this.trace);
391 this.observer.disconnect(); 380 this.observer.disconnect();
392 clearTimeout(this.timeout); 381 clearTimeout(this.timeout);
393 } 382 }
394 }; 383 };
395 384
396 function ContentFiltering() 385 function ContentFiltering()
397 { 386 {
398 this.styles = new Map(); 387 this.styles = new Map();
399 this.tracer = null; 388 this.tracer = null;
400 this.inline = true;
401 389
402 this.elemHideEmulation = new ElemHideEmulation( 390 this.elemHideEmulation = new ElemHideEmulation(this.hideElements.bind(this));
403 () => {},
404 this.hideElements.bind(this)
405 );
406 } 391 }
407 ContentFiltering.prototype = { 392 ContentFiltering.prototype = {
408 selectorGroupSize: 1024, 393 addStyleSheetInline(styleSheet, groupName = "standard", appendOnly = false)
409
410 addSelectorsInline(selectors, groupName, appendOnly = false)
411 { 394 {
412 let style = this.styles.get(groupName); 395 let style = this.styles.get(groupName);
413 396
414 if (style && !appendOnly)
415 {
416 while (style.sheet.cssRules.length > 0)
417 style.sheet.deleteRule(0);
418 }
419
420 if (selectors.length == 0)
421 return;
422
423 if (!style) 397 if (!style)
424 { 398 {
425 // Create <style> element lazily, only if we add styles. Add it to 399 // Create <style> element lazily, only if we add styles. Add it to
426 // the <head> or <html> element. If we have injected a style element 400 // the <head> or <html> element. If we have injected a style element
427 // before that has been removed (the sheet property is null), create a 401 // before that has been removed (the sheet property is null), create a
428 // new one. 402 // new one.
429 style = document.createElement("style"); 403 style = document.createElement("style");
430 (document.head || document.documentElement).appendChild(style); 404 (document.head || document.documentElement).appendChild(style);
431 405
432 // It can happen that the frame already navigated to a different 406 // It can happen that the frame already navigated to a different
433 // document while we were waiting for the background page to respond. 407 // document while we were waiting for the background page to respond.
434 // In that case the sheet property may stay null, after adding the 408 // In that case the sheet property may stay null, after adding the
435 // <style> element. 409 // <style> element.
436 if (!style.sheet) 410 if (!style.sheet)
437 return; 411 return;
438 412
439 this.styles.set(groupName, style); 413 this.styles.set(groupName, style);
440 } 414 }
441 415
442 // Chromium's Blink engine supports only up to 8,192 simple selectors, and 416 if (appendOnly)
443 // even fewer compound selectors, in a rule. The exact number of selectors 417 style.textContent += styleSheet;
444 // that would work depends on their sizes (e.g. "#foo .bar" has a 418 else
445 // size of 2). Since we don't know the sizes of the selectors here, we 419 style.textContent = styleSheet;
446 // simply split them into groups of 1,024, based on the reasonable
447 // assumption that the average selector won't have a size greater than 8.
448 // The alternative would be to calculate the sizes of the selectors and
449 // divide them up accordingly, but this approach is more efficient and has
450 // worked well in practice. In theory this could still lead to some
451 // selectors not working on Chromium, but it is highly unlikely.
452 // See issue #6298 and https://crbug.com/804179
453 for (let i = 0; i < selectors.length; i += this.selectorGroupSize)
454 {
455 let selector = selectors.slice(i, i + this.selectorGroupSize).join(", ");
456 style.sheet.insertRule(selector + "{display: none !important;}",
457 style.sheet.cssRules.length);
458 }
459 }, 420 },
460 421
461 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false) 422 addSelectors(selectors, groupName = "standard", appendOnly = false)
462 { 423 {
463 if (this.inline) 424 browser.runtime.sendMessage({
425 type: "content.injectSelectors",
426 selectors,
427 groupName,
428 appendOnly
429 },
430 styleSheet =>
464 { 431 {
465 // Insert the style rules inline if we have been instructed by the 432 if (styleSheet)
466 // background page to do so. This is usually the case, except on platforms 433 {
467 // that do support user stylesheets via the browser.tabs.insertCSS API 434 // Insert the style sheet inline if we have been instructed by the
468 // (Firefox 53 onwards for now and possibly Chrome in the near future). 435 // background page to do so. This is rarely the case, except on
469 // Once all supported platforms have implemented this API, we can remove 436 // platforms that do not support user stylesheets via the
470 // the code below. See issue #5090. 437 // browser.tabs.insertCSS API (Firefox <53, Chrome <66, and Edge).
471 // Related Chrome and Firefox issues: 438 // Once all supported platforms have implemented this API, we can remove
472 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 439 // the code below. See issue #5090.
473 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 440 // Related Chrome and Firefox issues:
474 this.addSelectorsInline(selectors, groupName, appendOnly); 441 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009
475 } 442 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
476 else 443 this.addStyleSheetInline(styleSheet, groupName, appendOnly);
477 { 444 }
478 browser.runtime.sendMessage({ 445 });
479 type: "content.injectSelectors",
480 selectors,
481 groupName,
482 appendOnly
483 });
484 }
485
486 // Only trace selectors that are based directly on hiding filters
487 // (i.e. leave out collapsing selectors).
488 if (this.tracer && groupName != "collapsing")
489 this.tracer.addSelectors(selectors, filters);
490 }, 446 },
491 447
492 hideElements(elements, filters) 448 hideElements(elements, filters)
493 { 449 {
494 for (let element of elements) 450 for (let element of elements)
495 hideElement(element); 451 hideElement(element);
496 452
497 if (this.tracer) 453 if (this.tracer)
498 { 454 {
499 browser.runtime.sendMessage({ 455 browser.runtime.sendMessage({
(...skipping 12 matching lines...) Expand all
512 }, 468 },
513 response => 469 response =>
514 { 470 {
515 if (this.tracer) 471 if (this.tracer)
516 this.tracer.disconnect(); 472 this.tracer.disconnect();
517 this.tracer = null; 473 this.tracer = null;
518 474
519 if (response.trace) 475 if (response.trace)
520 this.tracer = new ElementHidingTracer(); 476 this.tracer = new ElementHidingTracer();
521 477
522 this.inline = response.inline; 478 if (response.inline)
523 479 this.addStyleSheetInline(response.styleSheet.code);
524 if (this.inline)
525 this.addSelectorsInline(response.selectors, "standard");
526 480
527 if (this.tracer) 481 if (this.tracer)
528 this.tracer.addSelectors(response.selectors); 482 this.tracer.addSelectors(response.styleSheet.selectors);
529 483
530 this.elemHideEmulation.apply(response.emulatedPatterns); 484 this.elemHideEmulation.apply(response.emulatedPatterns);
531 }); 485 });
532 } 486 }
533 }; 487 };
534 488
535 if (document instanceof HTMLDocument) 489 if (document instanceof HTMLDocument)
536 { 490 {
537 checkSitekey(); 491 checkSitekey();
538 492
(...skipping 10 matching lines...) Expand all
549 let element = event.target; 503 let element = event.target;
550 if (/^i?frame$/.test(element.localName)) 504 if (/^i?frame$/.test(element.localName))
551 checkCollapse(element); 505 checkCollapse(element);
552 }, true); 506 }, true);
553 } 507 }
554 508
555 window.checkCollapse = checkCollapse; 509 window.checkCollapse = checkCollapse;
556 window.contentFiltering = contentFiltering; 510 window.contentFiltering = contentFiltering;
557 window.typeMap = typeMap; 511 window.typeMap = typeMap;
558 window.getURLsFromElement = getURLsFromElement; 512 window.getURLsFromElement = getURLsFromElement;
OLDNEW
« no previous file with comments | « dependencies ('k') | lib/contentFiltering.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld