Pre-render icons for badge on Chromium

[mjethani]

Background

Chrome's ​implementation of chrome.browserAction.setIcon loads the image from the given path and renders it onto a 2D canvas; it then uses the resulting ​ImageData object for the icon.

In lib/icon.js we render the icons for notification animations. If we simply use the same code to render the regular icons for passing to chrome.browserAction.setIcon (which ​supports an imageData option), it would save some unnecessary re-rendering in Chrome's extensions framework.

Based on my experimental patch:

• Rendering the icons into ImageData objects once takes less than 0.5% of the extension's total startup time
• The ImageData objects cached in memory take up ~12 KB
• Overall savings in CPU usage for typical browsing can be ~5-10% at least

PS: I got this idea ​from uBlock Origin.

What to change

In lib/icon.js, render the non-whitelisted and whitelisted versions of the icons of the 16x16 and 32x32 sizes into ImageData objects, and pass these objects to BrowserAction.prototype.setIcon as an additional parameter.

In ext/background.js, if the imageData parameter is set, pass the value to chrome.browserAction.setIcon; otherwise pass path as usual.

Hints for testers

Try this:

1. Open two windows, load a site like nytimes.com in one and a site like msn.com in the other (but really any site where some ads are being blocked will do)
2. In one of the windows, disable ad blocking for the domain
3. Make sure the icon is gray after disabling ad blocking; also make sure it looks alright (quality is OK compared with previous version of Adblock Plus)
4. Switch between the two windows and see that the icon changes between red (enabled) and gray (disabled); also make sure that the quality of the red icon is alright

Try this on the oldest supported version of Chrome (49+) as well as the latest version of Chrome.

Also see #7256.

[abpbot]

A commit referencing this issue has landed:
​Issue 7253 - Pre-render icons for badge on Chromium