Hold on to only non-standard style sheets

[mjethani]

Background

Looking at the memory consumption of the extension, the total memory used by all strings with five tabs open (popular and heavy websites) is ~50 MB. Most of these strings are style sheets, which the extension holds on to so they can be updated. The style sheets are divided into "groups."

The groups are:

• standard: the style sheet for normal element hiding
• emulated: the style sheet for element hiding emulation
• collapsing: the style sheet for element collapsing (when a video request is blocked and the <video> element needs to be hidden)

The extension keeps all these style sheets in memory per frame.

Of these, the standard group is updated only when the filter composer is opened and the user creates a new filter. The emulated group is no longer used (#6504), but may be used in the future. The collapsing group is potentially updated frequently as the content in the document changes.

The standard style sheet weighs ~660 KB. If a tab contains ten frames, that's ~6.6 MB only in style sheets.

As noted above, the standard style sheet is updated only when the user opens the filter composer. Furthermore, when the standard style sheet needs to be updated, the old version of the style sheet must be removed and the new one must be added. The removal of style sheets is possible only on Firefox, as Chrome does not support ​tabs.removeCSS ​yet.

A lot of memory could be saved by holding on to only the non-standard style sheets for a document. It would also make the behavior consistent between Chrome and Firefox. In my tests, with ​Alexa Top 50 open in 50 tabs, the memory footprint goes from ~240 MB to ~120 MB with this change.

What to change

In lib/contentFiltering.js, add the style sheet to frame.injectedStyleSheets only if groupName is not "standard".

Change in behavior for users

Consider the following HTML document:

<p class="p1">One</p>
<p class="p2">Two</p>

Previously on Firefox, if you chose "Block element" from the popup menu and clicked on the first <p>, it would show you the filter ##.p1 as a suggestion. If you then added this filter, it would hide the first <p>. If you went to the options page and manually removed the filter, it would not unhide the first <p>. But ... if you then chose "Block element" again and added a filter for the second <p>: then it would unhide the first <p> and hide the second <p>.

On Chrome, the first <p> would remain hidden until you refreshed the page.

After this change, the behavior is the same on both Firefox and Chrome: if you want the first <p> to become visible, you have to refresh the page. In other words, any elements hidden via the "Block element" feature will remain hidden on both platforms until the document is reloaded.

At least for now, this is the correct behavior and should not be considered a bug.

Hints for testers

Simply test that element hiding filters are applying correctly to a document.

[mjethani]

Regarding how I tested the patch, basically I closed all browser windows except Task Manager, reloaded the extension, and then ran this script:

#!/bin/bash
for domain in $(curl https://www.alexa.com/topsites | sed -nE 's/.*\/siteinfo\/([^"]*).*/\1/p')
do
  open -a 'Google Chrome' "http://$domain"
done

[abpbot]

A commit referencing this issue has landed:
​Issue 6967 - Hold on to only non-standard style sheets

[Ross]

Done. Element hiding still works as expected and there is a measureable drop in memory usage. Memory usage for the extension in Chrome 69 for example drops from ~170MB (last release) to ~104MB (latest devbuild) with the first 25 sites of Alexa opened.

ABP 3.3.2.2143
Chrome 69 / 49 / Windows 10
Firefox 62 / 51 / Windows 10
Opera 56 / 36 / Windows 10

[mjethani]

Replying to Ross:

Memory usage for the extension in Chrome 69 for example drops from ~170MB (last release) to ~104MB (latest devbuild) with the first 25 sites of Alexa opened.

Incredible, thanks!