Opened on 10/14/2017 at 01:28:12 AM
Closed on 01/25/2018 at 04:17:58 PM
Last modified on 02/08/2018 at 12:48:04 PM
#5864 closed change (fixed)
Maintain at most one style sheet for element hiding emulation
| Reported by: | mjethani | Assignee: | mjethani |
|---|---|---|---|
| Priority: | P2 | Milestone: | Adblock-Plus-3.0.3-for-Chrome-Opera-Firefox |
| Module: | Platform | Keywords: | |
| Cc: | sebastian, hfiguiere, kzar | Blocked By: | |
| Blocking: | Platform: | Unknown / Cross platform | |
| Ready: | yes | Confidential: | no |
| Tester: | Ross | Verified working: | yes |
| Review URL(s): |
https://codereview.adblockplus.org/29575739/ |
||
Description (last modified by sebastian)
Background
Currently -abp-properties causes multiple style sheets, or multiple sets of selectors (in the case of styles injected into the DOM), to be added to the document as the DOM is updated and new elements are affected.
This HTML, for example:
<style>
.greeting1 { color: blue }
</style>
<div>
<h1 class="greeting1">Hello</h1>
<h1 class="greeting2">Hi</h1>
</div>
<script>
setTimeout(() =>
{
let style = document.createElement("style");
style.innerHTML = ".greeting2 { color: blue }";
document.head.appendChild(style);
},
1000);
</script>
With the filter localhost#?#h1:-abp-properties(color: blue), the first H1 with the greeting1 class ends up with two sets of selectors applying to it:
h1.greeting1 { display: none !important }
h1.greeting1, h1.greeting2 { display: none !important }
The first set is redundant here.
If style sheets are removed from the document, the elements affected by the change still remain hidden, thus potentially breaking the page's functionality.
What to change
Remove previous stylesheet before adding a new one.
Attachments (0)
Change History (13)
comment:1 Changed on 10/14/2017 at 01:29:31 AM by mjethani
- Cc sebastian dave added
comment:3 Changed on 10/14/2017 at 02:28:10 PM by hfiguiere
- Cc hfiguiere added
comment:4 Changed on 10/16/2017 at 06:50:40 AM by mapx
- Cc kzar added; dave removed
comment:5 Changed on 10/17/2017 at 09:50:36 PM by sebastian
- Priority changed from Unknown to P2
- Ready set
comment:7 Changed on 11/21/2017 at 01:21:31 PM by mjethani
- Owner set to mjethani
comment:8 Changed on 01/25/2018 at 04:05:27 PM by abpbot
comment:9 Changed on 01/25/2018 at 04:17:58 PM by mjethani
- Milestone set to Adblock-Plus-for-Chrome-Opera-Firefox-next
- Resolution set to fixed
- Status changed from new to closed
comment:10 Changed on 01/26/2018 at 04:40:35 PM by abpbot
A commit referencing this issue has landed:
Issue 5864 - Remove previous style sheet before adding one
comment:11 Changed on 01/31/2018 at 12:10:03 PM by abpbot
A commit referencing this issue has landed:
Issue 5864 - Specify CSS group name for standard filters
comment:12 Changed on 01/31/2018 at 12:11:10 PM by mjethani
- Review URL(s) modified (diff)
- Summary changed from Maintain one at most one style sheet for element hiding emulation to Maintain at most one style sheet for element hiding emulation
comment:13 Changed on 02/08/2018 at 12:48:04 PM by Ross
- Tester changed from Unknown to Ross
- Verified working set
Done. Looks to work as expected (one set of selectors applied to the page/one stylesheet). Thank you for the example HTML/script.
ABP 3.0.2.1968
Chrome 64 / 49 / Canary (66) / Windows 7
Opera 49 / 36 / Beta (52) / Windows 7
Firefox 58 / 51 / Beta (59) / Windows 7
Firefox Mobile 57 / Android 7.0.1
A commit referencing this issue has landed:
Issue 5864 - Remove previous style sheet before adding one