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 separate style sheet for emulated selectors
Created Oct. 14, 2017, 2:18 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« 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') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| 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 325 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 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.style = null; |
| 346 this.emulatedStyle = null; | |
| 346 this.tracer = null; | 347 this.tracer = null; |
| 347 this.inject = true; | 348 this.inline = true; |
| 348 this.emulatedPatterns = null; | 349 this.emulatedPatterns = null; |
| 350 this.injectedSelectors = []; | |
| 349 | 351 |
| 350 this.elemHideEmulation = new ElemHideEmulation( | 352 this.elemHideEmulation = new ElemHideEmulation( |
| 351 this.addSelectors.bind(this), | 353 this.addSelectors.bind(this), |
| 352 this.hideElements.bind(this) | 354 this.hideElements.bind(this) |
| 353 ); | 355 ); |
| 354 } | 356 } |
| 355 ElemHide.prototype = { | 357 ElemHide.prototype = { |
| 356 selectorGroupSize: 200, | 358 selectorGroupSize: 200, |
| 357 | 359 |
| 358 createShadowTree() | 360 createShadowTree() |
| (...skipping 13 matching lines...) Expand all Loading... | |
| 372 // Finally since some users have both AdBlock and Adblock Plus installed we | 374 // 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 | 375 // have to consider how the two extensions interact. For example we want to |
| 374 // avoid creating the shadowRoot twice. | 376 // avoid creating the shadowRoot twice. |
| 375 let shadow = document.documentElement.shadowRoot || | 377 let shadow = document.documentElement.shadowRoot || |
| 376 document.documentElement.createShadowRoot(); | 378 document.documentElement.createShadowRoot(); |
| 377 shadow.appendChild(document.createElement("shadow")); | 379 shadow.appendChild(document.createElement("shadow")); |
| 378 | 380 |
| 379 return shadow; | 381 return shadow; |
| 380 }, | 382 }, |
| 381 | 383 |
| 382 injectSelectors(selectors, filters) | 384 injectSelectors(selectors) |
| 383 { | 385 { |
| 384 if (!this.style) | 386 if (selectors.length == 0 && this.injectedSelectors.length == 0) |
| 387 return; | |
| 388 | |
| 389 let message = {type: "elemhide.injectSelectors"}; | |
| 390 | |
| 391 if (selectors.length > 0) | |
| 392 message.selectors = selectors; | |
| 393 | |
| 394 if (this.injectedSelectors.length > 0) | |
| 395 message.replaceSelectors = this.injectedSelectors; | |
|
Manish Jethani
2017/10/14 14:23:22
Renamed for clarity.
| |
| 396 | |
| 397 chrome.runtime.sendMessage(message); | |
| 398 this.injectedSelectors = selectors; | |
| 399 }, | |
| 400 | |
| 401 addSelectorsInline(selectors, filters, emulated) | |
| 402 { | |
| 403 if (emulated && this.emulatedStyle) | |
|
Manish Jethani
2017/10/14 14:23:21
So there's a separate style sheet for emulated sel
| |
| 404 { | |
| 405 this.emulatedStyle.parentNode.removeChild(this.emulatedStyle); | |
| 406 this.emulatedStyle = null; | |
| 407 } | |
| 408 | |
| 409 if (selectors.length == 0) | |
| 410 return; | |
| 411 | |
| 412 let style = emulated ? this.emulatedStyle : this.style; | |
| 413 | |
| 414 if (!style) | |
| 385 { | 415 { |
| 386 // Create <style> element lazily, only if we add styles. Add it to | 416 // Create <style> element lazily, only if we add styles. Add it to |
| 387 // the shadow DOM if possible. Otherwise fallback to the <head> or | 417 // the shadow DOM if possible. Otherwise fallback to the <head> or |
| 388 // <html> element. If we have injected a style element before that | 418 // <html> element. If we have injected a style element before that |
| 389 // has been removed (the sheet property is null), create a new one. | 419 // has been removed (the sheet property is null), create a new one. |
| 390 this.style = document.createElement("style"); | 420 style = document.createElement("style"); |
| 391 (this.shadow || document.head || | 421 (this.shadow || document.head || |
| 392 document.documentElement).appendChild(this.style); | 422 document.documentElement).appendChild(style); |
| 393 | 423 |
| 394 // It can happen that the frame already navigated to a different | 424 // It can happen that the frame already navigated to a different |
| 395 // document while we were waiting for the background page to respond. | 425 // document while we were waiting for the background page to respond. |
| 396 // In that case the sheet property will stay null, after addind the | 426 // In that case the sheet property will stay null, after addind the |
| 397 // <style> element to the shadow DOM. | 427 // <style> element to the shadow DOM. |
| 398 if (!this.style.sheet) | 428 if (!style.sheet) |
| 399 return; | 429 return; |
| 430 | |
| 431 if (emulated) | |
| 432 this.emulatedStyle = style; | |
| 433 else | |
| 434 this.style = style; | |
| 400 } | 435 } |
| 401 | 436 |
| 402 // If using shadow DOM, we have to add the ::content pseudo-element | 437 // If using shadow DOM, we have to add the ::content pseudo-element |
| 403 // before each selector, in order to match elements within the | 438 // before each selector, in order to match elements within the |
| 404 // insertion point. | 439 // insertion point. |
| 405 let preparedSelectors = []; | 440 let preparedSelectors = []; |
| 406 if (this.shadow) | 441 if (this.shadow) |
| 407 { | 442 { |
| 408 for (let selector of selectors) | 443 for (let selector of selectors) |
| 409 { | 444 { |
| (...skipping 10 matching lines...) Expand all Loading... | |
| 420 // Safari only allows 8192 primitive selectors to be injected at once[1], we | 455 // 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. | 456 // 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 | 457 // (Chrome also has a limit, larger... but we're not certain exactly what it |
| 423 // is! Edge apparently has no such limit.) | 458 // is! Edge apparently has no such limit.) |
| 424 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68 | 459 // [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) | 460 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) |
| 426 { | 461 { |
| 427 let selector = preparedSelectors.slice( | 462 let selector = preparedSelectors.slice( |
| 428 i, i + this.selectorGroupSize | 463 i, i + this.selectorGroupSize |
| 429 ).join(", "); | 464 ).join(", "); |
| 430 this.style.sheet.insertRule(selector + "{display: none !important;}", | 465 style.sheet.insertRule(selector + "{display: none !important;}", |
| 431 this.style.sheet.cssRules.length); | 466 style.sheet.cssRules.length); |
| 432 } | 467 } |
| 468 | |
| 469 if (this.tracer) | |
| 470 this.tracer.addSelectors(selectors, filters); | |
| 433 }, | 471 }, |
| 434 | 472 |
| 435 addSelectors(selectors, filters) | 473 addSelectors(selectors, filters) |
| 436 { | 474 { |
| 437 if (selectors.length == 0) | 475 if (this.inline) |
| 438 return; | |
| 439 | |
| 440 if (this.inject) | |
| 441 { | 476 { |
| 442 // Insert the style rules inline if we have been instructed by the | 477 // 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 | 478 // 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 | 479 // that do support user stylesheets via the chrome.tabs.insertCSS API |
| 445 // (Firefox 53 onwards for now and possibly Chrome in the near future). | 480 // (Firefox 53 onwards for now and possibly Chrome in the near future). |
| 446 // Once all supported platforms have implemented this API, we can remove | 481 // Once all supported platforms have implemented this API, we can remove |
| 447 // the code below. See issue #5090. | 482 // the code below. See issue #5090. |
| 448 // Related Chrome and Firefox issues: | 483 // Related Chrome and Firefox issues: |
| 449 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 | 484 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 |
| 450 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 | 485 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 |
| 451 this.injectSelectors(selectors, filters); | 486 this.addSelectorsInline(selectors, filters, true); |
|
Manish Jethani
2017/10/14 14:23:21
addSelectors is now only called for emulated selec
| |
| 452 } | 487 } |
| 453 else | 488 else |
| 454 { | 489 { |
| 455 chrome.runtime.sendMessage({ | 490 this.injectSelectors(selectors); |
| 456 type: "elemhide.injectSelectors", | 491 |
| 457 selectors | 492 if (this.tracer && selectors.length > 0) |
| 458 }); | 493 this.tracer.addSelectors(selectors, filters); |
| 459 } | 494 } |
| 460 | |
| 461 if (this.tracer) | |
| 462 this.tracer.addSelectors(selectors, filters); | |
| 463 }, | 495 }, |
| 464 | 496 |
| 465 hideElements(elements, filters) | 497 hideElements(elements, filters) |
| 466 { | 498 { |
| 467 for (let element of elements) | 499 for (let element of elements) |
| 468 hideElement(element); | 500 hideElement(element); |
| 469 | 501 |
| 470 if (this.tracer) | 502 if (this.tracer) |
| 471 { | 503 { |
| 472 chrome.runtime.sendMessage({ | 504 chrome.runtime.sendMessage({ |
| 473 type: "devtools.traceElemHide", | 505 type: "devtools.traceElemHide", |
| 474 selectors: [], | 506 selectors: [], |
| 475 filters | 507 filters |
| 476 }); | 508 }); |
| 477 } | 509 } |
| 478 }, | 510 }, |
| 479 | 511 |
| 480 apply() | 512 apply() |
| 481 { | 513 { |
| 482 chrome.runtime.sendMessage({type: "elemhide.getSelectors"}, response => | 514 chrome.runtime.sendMessage({type: "elemhide.getSelectors"}, response => |
| 483 { | 515 { |
| 484 if (this.tracer) | 516 if (this.tracer) |
| 485 this.tracer.disconnect(); | 517 this.tracer.disconnect(); |
| 486 this.tracer = null; | 518 this.tracer = null; |
| 487 | 519 |
| 488 if (this.style && this.style.parentElement) | 520 if (this.style && this.style.parentNode) |
|
Manish Jethani
2017/10/14 14:23:22
This needs to be parentNode, not parentElement, be
Manish Jethani
2017/10/14 21:35:33
Actually, why is this needed? The styles here will
Manish Jethani
2017/10/15 21:29:12
OK, this code is called from composer.postload.js
| |
| 489 this.style.parentElement.removeChild(this.style); | 521 this.style.parentNode.removeChild(this.style); |
| 490 this.style = null; | 522 this.style = null; |
| 491 | 523 |
| 492 if (response.trace) | 524 if (response.trace) |
| 493 this.tracer = new ElementHidingTracer(); | 525 this.tracer = new ElementHidingTracer(); |
| 494 | 526 |
| 495 this.inject = response.inject; | 527 this.inline = response.inline; |
| 496 | 528 |
| 497 if (this.inject) | 529 if (this.inline) |
| 498 this.addSelectors(response.selectors); | 530 this.addSelectorsInline(response.selectors); |
| 499 else if (this.tracer) | 531 else if (this.tracer) |
| 500 this.tracer.addSelectors(response.selectors); | 532 this.tracer.addSelectors(response.selectors); |
| 501 | 533 |
| 502 this.elemHideEmulation.apply(response.emulatedPatterns); | 534 this.elemHideEmulation.apply(response.emulatedPatterns); |
| 503 }); | 535 }); |
| 504 } | 536 } |
| 505 }; | 537 }; |
| 506 | 538 |
| 507 if (document instanceof HTMLDocument) | 539 if (document instanceof HTMLDocument) |
| 508 { | 540 { |
| 509 checkSitekey(); | 541 checkSitekey(); |
| 510 | 542 |
| 511 elemhide = new ElemHide(); | 543 elemhide = new ElemHide(); |
| 512 elemhide.apply(); | 544 elemhide.apply(); |
| 513 | 545 |
| 514 document.addEventListener("error", event => | 546 document.addEventListener("error", event => |
| 515 { | 547 { |
| 516 checkCollapse(event.target); | 548 checkCollapse(event.target); |
| 517 }, true); | 549 }, true); |
| 518 | 550 |
| 519 document.addEventListener("load", event => | 551 document.addEventListener("load", event => |
| 520 { | 552 { |
| 521 let element = event.target; | 553 let element = event.target; |
| 522 if (/^i?frame$/.test(element.localName)) | 554 if (/^i?frame$/.test(element.localName)) |
| 523 checkCollapse(element); | 555 checkCollapse(element); |
| 524 }, true); | 556 }, true); |
| 525 } | 557 } |
| OLD | NEW |
« no previous file with comments
|
« no previous file
|
lib/cssInjection.js » ('j')
|
no next file with comments »
