include.preload.js - Issue 29575739: Issue 5864 - Remove previous style sheet before adding one

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: Maintain all style sheets in lib/cssInjection.js Created Oct. 18, 2017, 1:05 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

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-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 Loading...
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	349

350 this.elemHideEmulation = new ElemHideEmulation(	350 this.elemHideEmulation = new ElemHideEmulation(

351 this.addSelectors.bind(this),	351 this.addSelectors.bind(this),

352 this.hideElements.bind(this)	352 this.hideElements.bind(this)

353 );	353 );

354 }	354 }

355 ElemHide.prototype = {	355 ElemHide.prototype = {

356 selectorGroupSize: 200,	356 selectorGroupSize: 200,

357	357

(...skipping 14 matching lines...) Expand all Loading...
372 // Finally since some users have both AdBlock and Adblock Plus installed we	372 // 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	373 // have to consider how the two extensions interact. For example we want to

374 // avoid creating the shadowRoot twice.	374 // avoid creating the shadowRoot twice.

375 let shadow = document.documentElement.shadowRoot \|\|	375 let shadow = document.documentElement.shadowRoot \|\|

376 document.documentElement.createShadowRoot();	376 document.documentElement.createShadowRoot();

377 shadow.appendChild(document.createElement("shadow"));	377 shadow.appendChild(document.createElement("shadow"));

378	378

379 return shadow;	379 return shadow;

380 },	380 },

381	381

382 injectSelectors(selectors, filters)	382 addSelectorsInline(selectors, filters, groupName)

383 {	383 {

384 if (!this.style)	384 let style = this.styles.get(groupName);

	385

	386 if (style)

	387 {

	388 while (style.sheet.cssRules.length > 0)

	389 style.sheet.deleteRule(0);

	390 }

	391

	392 if (selectors.length == 0)

	393 return;

	394

	395 if (!style)

385 {	396 {

386 // Create <style> element lazily, only if we add styles. Add it to	397 // Create <style> element lazily, only if we add styles. Add it to

387 // the shadow DOM if possible. Otherwise fallback to the <head> or	398 // the shadow DOM if possible. Otherwise fallback to the <head> or

388 // <html> element. If we have injected a style element before that	399 // <html> element. If we have injected a style element before that

389 // has been removed (the sheet property is null), create a new one.	400 // has been removed (the sheet property is null), create a new one.

390 this.style = document.createElement("style");	401 style = document.createElement("style");

391 (this.shadow \|\| document.head \|\|	402 (this.shadow \|\| document.head \|\|

392 document.documentElement).appendChild(this.style);	403 document.documentElement).appendChild(style);

393	404

394 // It can happen that the frame already navigated to a different	405 // It can happen that the frame already navigated to a different

395 // document while we were waiting for the background page to respond.	406 // document while we were waiting for the background page to respond.

396 // In that case the sheet property will stay null, after addind the	407 // In that case the sheet property will stay null, after addind the

397 // <style> element to the shadow DOM.	408 // <style> element to the shadow DOM.

398 if (!this.style.sheet)	409 if (!style.sheet)

399 return;	410 return;

	411

	412 this.styles.set(groupName, style);

400 }	413 }

401	414

402 // If using shadow DOM, we have to add the ::content pseudo-element	415 // If using shadow DOM, we have to add the ::content pseudo-element

403 // before each selector, in order to match elements within the	416 // before each selector, in order to match elements within the

404 // insertion point.	417 // insertion point.

405 let preparedSelectors = [];	418 let preparedSelectors = [];

406 if (this.shadow)	419 if (this.shadow)

407 {	420 {

408 for (let selector of selectors)	421 for (let selector of selectors)

409 {	422 {

410 let subSelectors = splitSelector(selector);	423 let subSelectors = splitSelector(selector);

411 for (let subSelector of subSelectors)	424 for (let subSelector of subSelectors)

412 preparedSelectors.push("::content " + subSelector);	425 preparedSelectors.push("::content " + subSelector);

413 }	426 }

414 }	427 }

415 else	428 else

416 {	429 {

417 preparedSelectors = selectors;	430 preparedSelectors = selectors;

418 }	431 }

419	432

420 // Safari only allows 8192 primitive selectors to be injected at once[1], we	433 // 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.	434 // 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	435 // (Chrome also has a limit, larger... but we're not certain exactly what it

423 // is! Edge apparently has no such limit.)	436 // is! Edge apparently has no such limit.)

424 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68	437 // [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)	438 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)

426 {	439 {

427 let selector = preparedSelectors.slice(	440 let selector = preparedSelectors.slice(
	Manish Jethani 2017/10/18 13:16:45 Reverted to original code. Reverted to original code.
428 i, i + this.selectorGroupSize	441 i, i + this.selectorGroupSize

429 ).join(", ");	442 ).join(", ");

430 this.style.sheet.insertRule(selector + "{display: none !important;}",	443 this.style.sheet.insertRule(selector + "{display: none !important;}",

431 this.style.sheet.cssRules.length);	444 this.style.sheet.cssRules.length);

432 }	445 }

433 },	446 },

434	447

435 addSelectors(selectors, filters)	448 addSelectors(selectors, filters)

436 {	449 {

437 if (selectors.length == 0)	450 if (this.inline)

438 return;

439

440 if (this.inject)

441 {	451 {

442 // Insert the style rules inline if we have been instructed by the	452 // 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	453 // 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	454 // that do support user stylesheets via the chrome.tabs.insertCSS API

445 // (Firefox 53 onwards for now and possibly Chrome in the near future).	455 // (Firefox 53 onwards for now and possibly Chrome in the near future).

446 // Once all supported platforms have implemented this API, we can remove	456 // Once all supported platforms have implemented this API, we can remove

447 // the code below. See issue #5090.	457 // the code below. See issue #5090.

448 // Related Chrome and Firefox issues:	458 // Related Chrome and Firefox issues:

449 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009	459 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009

450 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026	460 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026

451 this.injectSelectors(selectors, filters);	461 this.addSelectorsInline(selectors, filters, "emulated");

452 }	462 }

453 else	463 else

454 {	464 {

455 chrome.runtime.sendMessage({	465 chrome.runtime.sendMessage({

456 type: "elemhide.injectSelectors",	466 type: "elemhide.injectSelectors",

457 selectors	467 selectors,

	468 groupName: "emulated"

458 });	469 });

459 }	470 }

460	471

461 if (this.tracer)	472 if (this.tracer)

462 this.tracer.addSelectors(selectors, filters);	473 this.tracer.addSelectors(selectors, filters);

463 },	474 },

464	475

465 hideElements(elements, filters)	476 hideElements(elements, filters)

466 {	477 {

467 for (let element of elements)	478 for (let element of elements)

(...skipping 10 matching lines...) Expand all Loading...
478 },	489 },

479	490

480 apply()	491 apply()

481 {	492 {

482 chrome.runtime.sendMessage({type: "elemhide.getSelectors"}, response =>	493 chrome.runtime.sendMessage({type: "elemhide.getSelectors"}, response =>

483 {	494 {

484 if (this.tracer)	495 if (this.tracer)

485 this.tracer.disconnect();	496 this.tracer.disconnect();

486 this.tracer = null;	497 this.tracer = null;

487	498

488 if (this.style && this.style.parentElement)

489 this.style.parentElement.removeChild(this.style);

490 this.style = null;

491

492 if (response.trace)	499 if (response.trace)

493 this.tracer = new ElementHidingTracer();	500 this.tracer = new ElementHidingTracer();

494	501

495 this.inject = response.inject;	502 this.inline = response.inline;

496	503

497 if (this.inject)	504 if (this.inline)

498 this.addSelectors(response.selectors);	505 this.addSelectorsInline(response.selectors);

499 else if (this.tracer)	506

	507 if (this.tracer)

500 this.tracer.addSelectors(response.selectors);	508 this.tracer.addSelectors(response.selectors);

501	509

502 this.elemHideEmulation.apply(response.emulatedPatterns);	510 this.elemHideEmulation.apply(response.emulatedPatterns);

503 });	511 });

504 }	512 }

505 };	513 };

506	514

507 if (document instanceof HTMLDocument)	515 if (document instanceof HTMLDocument)

508 {	516 {

509 checkSitekey();	517 checkSitekey();

510	518

511 elemhide = new ElemHide();	519 elemhide = new ElemHide();

512 elemhide.apply();	520 elemhide.apply();

513	521

514 document.addEventListener("error", event =>	522 document.addEventListener("error", event =>

515 {	523 {

516 checkCollapse(event.target);	524 checkCollapse(event.target);

517 }, true);	525 }, true);

518	526

519 document.addEventListener("load", event =>	527 document.addEventListener("load", event =>

520 {	528 {

521 let element = event.target;	529 let element = event.target;

522 if (/^i?frame$/.test(element.localName))	530 if (/^i?frame$/.test(element.localName))

523 checkCollapse(element);	531 checkCollapse(element);

524 }, true);	532 }, true);

525 }	533 }

OLD	NEW

« no previous file with comments | « no previous file | lib/cssInjection.js » ('j') | lib/cssInjection.js » ('J')