ipywidgets icon indicating copy to clipboard operation
ipywidgets copied to clipboard

Use ResizeObserver to trigger resize events in html manager and classic notebook

Open jasongrout opened this issue 4 years ago • 1 comments
trafficstars

In https://github.com/jupyter-widgets/ipywidgets/pull/3124, @ibdafna listened for window resize events as a proxy for if a root widget view needed to have a resize event triggered. This is a coarse proxy, since changing a browsers window size may or may not mean that the root widget size changed, and something else on the page may also change the root widget size and we wouldn't know if the browser window size didn't change.

@blois pointed out in https://github.com/jupyter-widgets/ipywidgets/issues/2605#issuecomment-920117962 that the standardized ResizeObserver is now pretty well supported (at least since early 2020).

That means that we can now use a ResizeObserver on each root widget DOM element instead of listening to the window resize event to give more precise triggering of this event. I'd suggest checking for the existence of ResizeObserver, and falling back to the window resize event if it doesn't exist.

The relevant code to change from #3124 is https://github.com/jupyter-widgets/ipywidgets/blob/master/packages/html-manager/src/htmlmanager.ts#L38-L45 and https://github.com/jupyter-widgets/ipywidgets/blob/master/widgetsnbextension/src/extension.js#L78-L85

jasongrout avatar Sep 17 '21 21:09 jasongrout

That means that we can now use a ResizeObserver on each root widget DOM element

Actually, https://github.com/WICG/resize-observer/issues/59 suggests having a single resize observer observing all root widget DOM elements would be much better.

jasongrout avatar Sep 17 '21 21:09 jasongrout

@mariobuikhuizen implemented this for bqplot in https://github.com/bqplot/bqplot/pull/1531

maartenbreddels avatar Dec 06 '22 18:12 maartenbreddels