Image Widget memory leak when a lot of updates

[joseph2rs]

Description

Browser memory leak caused by Image Widget not revoking the ObjectURLs.

Reproduce

• Create an Image Widget from an array (not from a url)
• Perform a lot of updates of the image (for example in a loop)

Expected behavior

Context

• ipywidgets version 7.6.3
• Operating System and version: Ubuntu 20, Windows 10
• Browser and version: Firefox 86, Chomium 89

Bug is here: https://github.com/jupyter-widgets/ipywidgets/blob/master/packages/controls/src/widget_image.ts#L65

At each update, a URL.createObjectURL is performed. As a result, the browser is "storing" the blob in memory. But the memory is never cleaned, because URL.revokeObjectURL is never called

    // Clean up the old objectURL
    const oldurl = this.el.src;
    this.el.src = url;
    if (oldurl && typeof oldurl !== 'string') {
      URL.revokeObjectURL(oldurl);
    }

oldurl is always a string, so the revokeObjectURL is never called.

If using JupyterLab

• JupyterLab version: 3.0.10

[ianhi]

Fixed by #3171