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

Side by Side Diff: include.preload.js

Issue 29575739: Issue 5864 - Remove previous style sheet before adding one (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Patch Set: Create style sheet in include.preload.js Created Oct. 14, 2017, 11:36 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 | « no previous file | lib/cssInjection.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 324 matching lines...) Expand 10 before | Expand all | Expand 10 after
335 { 335 {
336 document.removeEventListener("DOMContentLoaded", this.trace); 336 document.removeEventListener("DOMContentLoaded", this.trace);
337 this.observer.disconnect(); 337 this.observer.disconnect();
338 clearTimeout(this.timeout); 338 clearTimeout(this.timeout);
339 } 339 }
340 }; 340 };
341 341
342 function ElemHide() 342 function ElemHide()
343 { 343 {
344 this.shadow = this.createShadowTree(); 344 this.shadow = this.createShadowTree();
345 this.style = null; 345 this.styles = new Map();
346 this.tracer = null; 346 this.tracer = null;
347 this.inject = true; 347 this.inline = true;
348 this.emulatedPatterns = null; 348 this.emulatedPatterns = null;
349 this.injectedStyleSheet = null;
349 350
350 this.elemHideEmulation = new ElemHideEmulation( 351 this.elemHideEmulation = new ElemHideEmulation(
351 this.addSelectors.bind(this), 352 this.addSelectors.bind(this),
352 this.hideElements.bind(this) 353 this.hideElements.bind(this)
353 ); 354 );
354 } 355 }
355 ElemHide.prototype = { 356 ElemHide.prototype = {
356 selectorGroupSize: 200, 357 selectorGroupSize: 200,
357 358
358 createShadowTree() 359 createShadowTree()
(...skipping 13 matching lines...) Expand all
372 // Finally since some users have both AdBlock and Adblock Plus installed we 373 // Finally since some users have both AdBlock and Adblock Plus installed we
373 // have to consider how the two extensions interact. For example we want to 374 // have to consider how the two extensions interact. For example we want to
374 // avoid creating the shadowRoot twice. 375 // avoid creating the shadowRoot twice.
375 let shadow = document.documentElement.shadowRoot || 376 let shadow = document.documentElement.shadowRoot ||
376 document.documentElement.createShadowRoot(); 377 document.documentElement.createShadowRoot();
377 shadow.appendChild(document.createElement("shadow")); 378 shadow.appendChild(document.createElement("shadow"));
378 379
379 return shadow; 380 return shadow;
380 }, 381 },
381 382
382 injectSelectors(selectors, filters) 383 createRule(selectors)
383 { 384 {
384 if (!this.style) 385 if (selectors.length == 0)
386 return null;
Sebastian Noack 2017/10/17 22:00:38 .sheet.insertRule() fails if we return null here.
Manish Jethani 2017/10/17 22:14:27 Yes, but we have the following code earlier in add
Sebastian Noack 2017/10/18 00:53:06 So this check is redundant here. It seems in the o
Manish Jethani 2017/10/18 01:48:37 We still need that check for this line of code in
Manish Jethani 2017/10/18 01:49:56 I mean the initial value of "this.injectedStyleShe
387
388 return selectors.join(", ") + "{display: none !important;}";
389 },
390
391 injectStyleSheet(styleSheet)
392 {
393 if (styleSheet == this.injectedStyleSheet)
394 return;
395
396 chrome.runtime.sendMessage({
397 type: "elemhide.injectStyleSheet",
398 styleSheet,
399 oldStyleSheet: this.injectedStyleSheet
400 });
401
402 this.injectedStyleSheet = styleSheet;
403 },
404
405 addSelectorsInline(selectors, filters, groupName)
406 {
407 let style = this.styles.get(groupName);
408
409 if (style)
410 {
411 while (style.sheet.cssRules.length > 0)
412 style.sheet.deleteRule(0);
413 }
414
415 if (selectors.length == 0)
416 return;
417
418 if (!style)
385 { 419 {
386 // Create <style> element lazily, only if we add styles. Add it to 420 // Create <style> element lazily, only if we add styles. Add it to
387 // the shadow DOM if possible. Otherwise fallback to the <head> or 421 // the shadow DOM if possible. Otherwise fallback to the <head> or
388 // <html> element. If we have injected a style element before that 422 // <html> element. If we have injected a style element before that
389 // has been removed (the sheet property is null), create a new one. 423 // has been removed (the sheet property is null), create a new one.
390 this.style = document.createElement("style"); 424 style = document.createElement("style");
391 (this.shadow || document.head || 425 (this.shadow || document.head ||
392 document.documentElement).appendChild(this.style); 426 document.documentElement).appendChild(style);
393 427
394 // It can happen that the frame already navigated to a different 428 // It can happen that the frame already navigated to a different
395 // document while we were waiting for the background page to respond. 429 // document while we were waiting for the background page to respond.
396 // In that case the sheet property will stay null, after addind the 430 // In that case the sheet property will stay null, after addind the
397 // <style> element to the shadow DOM. 431 // <style> element to the shadow DOM.
398 if (!this.style.sheet) 432 if (!style.sheet)
399 return; 433 return;
434
435 this.styles.set(groupName, style);
400 } 436 }
401 437
402 // If using shadow DOM, we have to add the ::content pseudo-element 438 // If using shadow DOM, we have to add the ::content pseudo-element
403 // before each selector, in order to match elements within the 439 // before each selector, in order to match elements within the
404 // insertion point. 440 // insertion point.
405 let preparedSelectors = []; 441 let preparedSelectors = [];
406 if (this.shadow) 442 if (this.shadow)
407 { 443 {
408 for (let selector of selectors) 444 for (let selector of selectors)
409 { 445 {
410 let subSelectors = splitSelector(selector); 446 let subSelectors = splitSelector(selector);
411 for (let subSelector of subSelectors) 447 for (let subSelector of subSelectors)
412 preparedSelectors.push("::content " + subSelector); 448 preparedSelectors.push("::content " + subSelector);
413 } 449 }
414 } 450 }
415 else 451 else
416 { 452 {
417 preparedSelectors = selectors; 453 preparedSelectors = selectors;
418 } 454 }
419 455
420 // Safari only allows 8192 primitive selectors to be injected at once[1], we 456 // Safari only allows 8192 primitive selectors to be injected at once[1], we
421 // therefore chunk the inserted selectors into groups of 200 to be safe. 457 // therefore chunk the inserted selectors into groups of 200 to be safe.
422 // (Chrome also has a limit, larger... but we're not certain exactly what it 458 // (Chrome also has a limit, larger... but we're not certain exactly what it
423 // is! Edge apparently has no such limit.) 459 // is! Edge apparently has no such limit.)
424 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68 460 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68
425 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) 461 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
426 { 462 {
427 let selector = preparedSelectors.slice( 463 style.sheet.insertRule(
428 i, i + this.selectorGroupSize 464 this.createRule(preparedSelectors.slice(i, i + this.selectorGroupSize)),
429 ).join(", "); 465 style.sheet.cssRules.length
430 this.style.sheet.insertRule(selector + "{display: none !important;}", 466 );
431 this.style.sheet.cssRules.length);
432 } 467 }
433 }, 468 },
434 469
435 addSelectors(selectors, filters) 470 addSelectors(selectors, filters)
436 { 471 {
437 if (selectors.length == 0) 472 if (this.inline)
438 return;
439
440 if (this.inject)
441 { 473 {
442 // Insert the style rules inline if we have been instructed by the 474 // Insert the style rules inline if we have been instructed by the
443 // background page to do so. This is usually the case, except on platforms 475 // background page to do so. This is usually the case, except on platforms
444 // that do support user stylesheets via the chrome.tabs.insertCSS API 476 // that do support user stylesheets via the chrome.tabs.insertCSS API
445 // (Firefox 53 onwards for now and possibly Chrome in the near future). 477 // (Firefox 53 onwards for now and possibly Chrome in the near future).
446 // Once all supported platforms have implemented this API, we can remove 478 // Once all supported platforms have implemented this API, we can remove
447 // the code below. See issue #5090. 479 // the code below. See issue #5090.
448 // Related Chrome and Firefox issues: 480 // Related Chrome and Firefox issues:
449 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 481 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009
450 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 482 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
451 this.injectSelectors(selectors, filters); 483 this.addSelectorsInline(selectors, filters, "emulated");
452 } 484 }
453 else 485 else
454 { 486 {
455 chrome.runtime.sendMessage({ 487 this.injectStyleSheet(this.createRule(selectors));
456 type: "elemhide.injectSelectors",
457 selectors
458 });
459 } 488 }
460 489
461 if (this.tracer) 490 if (this.tracer)
462 this.tracer.addSelectors(selectors, filters); 491 this.tracer.addSelectors(selectors, filters);
463 }, 492 },
464 493
465 hideElements(elements, filters) 494 hideElements(elements, filters)
466 { 495 {
467 for (let element of elements) 496 for (let element of elements)
468 hideElement(element); 497 hideElement(element);
469 498
470 if (this.tracer) 499 if (this.tracer)
471 { 500 {
472 chrome.runtime.sendMessage({ 501 chrome.runtime.sendMessage({
473 type: "devtools.traceElemHide", 502 type: "devtools.traceElemHide",
474 selectors: [], 503 selectors: [],
475 filters 504 filters
476 }); 505 });
477 } 506 }
478 }, 507 },
479 508
480 apply() 509 apply()
481 { 510 {
482 chrome.runtime.sendMessage({type: "elemhide.getSelectors"}, response => 511 chrome.runtime.sendMessage({type: "elemhide.getSelectors"}, response =>
483 { 512 {
484 if (this.tracer) 513 if (this.tracer)
485 this.tracer.disconnect(); 514 this.tracer.disconnect();
486 this.tracer = null; 515 this.tracer = null;
487 516
488 if (this.style && this.style.parentElement)
489 this.style.parentElement.removeChild(this.style);
490 this.style = null;
Sebastian Noack 2017/10/17 22:00:38 What if the "Block element" dialog (from the brows
Manish Jethani 2017/10/17 22:14:27 No, now the removal of the previous style sheet is
Sebastian Noack 2017/10/18 00:53:07 Doesn't that cause ElemHideEmulation when adding s
Manish Jethani 2017/10/18 01:48:37 ElemHideEmulation styles are in this.styles.get("e
491
492 if (response.trace) 517 if (response.trace)
493 this.tracer = new ElementHidingTracer(); 518 this.tracer = new ElementHidingTracer();
494 519
495 this.inject = response.inject; 520 this.inline = response.inline;
496 521
497 if (this.inject) 522 if (this.inline)
498 this.addSelectors(response.selectors); 523 this.addSelectorsInline(response.selectors);
499 else if (this.tracer) 524
525 if (this.tracer)
500 this.tracer.addSelectors(response.selectors); 526 this.tracer.addSelectors(response.selectors);
501 527
502 this.elemHideEmulation.apply(response.emulatedPatterns); 528 this.elemHideEmulation.apply(response.emulatedPatterns);
503 }); 529 });
504 } 530 }
505 }; 531 };
506 532
507 if (document instanceof HTMLDocument) 533 if (document instanceof HTMLDocument)
508 { 534 {
509 checkSitekey(); 535 checkSitekey();
510 536
511 elemhide = new ElemHide(); 537 elemhide = new ElemHide();
512 elemhide.apply(); 538 elemhide.apply();
513 539
514 document.addEventListener("error", event => 540 document.addEventListener("error", event =>
515 { 541 {
516 checkCollapse(event.target); 542 checkCollapse(event.target);
517 }, true); 543 }, true);
518 544
519 document.addEventListener("load", event => 545 document.addEventListener("load", event =>
520 { 546 {
521 let element = event.target; 547 let element = event.target;
522 if (/^i?frame$/.test(element.localName)) 548 if (/^i?frame$/.test(element.localName))
523 checkCollapse(element); 549 checkCollapse(element);
524 }, true); 550 }, true);
525 } 551 }
OLDNEW
« no previous file with comments | « no previous file | lib/cssInjection.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld