Element hiding emulation breaks when a new style sheet is loaded

[mjethani]

Environment

A recent version of Adblock Plus with no filter lists

How to reproduce

1. Add the filter 127.0.0.1#?#:-abp-properties(color: red)
2. Load the following HTML off 127.0.0.1

<style>
  div {
    color: red;
  }
</style>
<div id="price">0.9109041176174169</div>
<script>
  setTimeout(() =>
  {
    let link = document.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("href", "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css");
    document.head.appendChild(link);
  },
  5000);
</script>

3. Wait for 5 seconds

Observed behaviour

Initially the div#price element is hidden, but after 5 second it appears again once the remote style sheet has finished loading

Expected behaviour

The div#price element should remain hidden

Notes

This occurs because we only parse the newly added style sheet, so we end up overwriting the previous style sheet that had selectors relevant to the original style sheet.

Resolution

This bug seems to have been fixed by recent changes and is no longer reproducible as of ​changeset 64e29bc1a787.

[mjethani]

To fix this we should implement an append-only mode, similar to what I proposed for the collapsing selectors in ​patch 29670575. When only a new style sheet has been added to the document (so _addSelectors gets the stylesheets argument), we should collect any new selectors and pass the new appendOnly flag to addSelectorsFunc, which will only add the new selectors without removing any old selectors from the document.

[mjethani]

Oh, we could consider this a Platform regression because of ​adblockpluschrome rev:8399e34fff05, but I think we have to fix the underlying issue in both Core and Platform.

[mjethani]

I am unable to reproduce this now. It seems to have been fixed by recent changes.