Does this need a re-base now that the other PRs are merged?

Yes, I'll rebase it. I'm also looking into a bug with resize on the notebook version.

Okay, I think the problem is that in jQuery UI we had start/stop resize events in which we disabled mouse events, but we don't have those any more and get into some kind of loop between our resize and the user resize. I'll need to figure out a way to do that using the newer API.

I've fixed webagg, but nbagg is broken and I'm not sure what's wrong.

When opening a new figure, in webagg, it looks like:

1. Python sends a resize message of 640x480 with forward=True.
2. Both canvas and its surrounding div are resized to 640x480.
3. The ResizeObserver is triggered and requests Python to resize to 640x480.
4. Python sends a resize message of 640x480, but with forward=False.
5. Only the canvas is resized to 640x480, and the div is left alone.

In nbagg though, something else happens before all that, and it works like:

1. ResizeObserver requests Python to resize to 600x606.5
2. Python sends a resize message of 640x480 with forward=True.
3. Both canvas and its surrounding div are resized to 640x480.
4. The ResizeObserver is triggered and requests Python to resize to 640x486.5.
5. Python sends a resize message of 600x606 (from message 1), but with forward=False.
6. Only the canvas is resized to 600x606, and the div is left alone.
7. The ResizeObserver is triggered and requests Python to resize to 600x612.5.
8. Python sends a resize message of 640x486 (from message 4), but with forward=False.
9. Only the canvas is resized to 640x486, and the div is left alone.
10. The ResizeObserver is triggered again, and loops, alternating from the original initial JavaScript and the initial Python size + 6.5.

The height of the figure just grows and grows and grows after that, unless you grab the resizer with the mouse and shrink it a little. Then the loop stops and everything eventually syncs up together. 600x600 is the initial value given in the JavaScript, though it's strange that webagg ignores it. It's also strange that the height is 6.5 pixels taller than it should be.

Initially, I thought the problem was that the notebook's CSS set all elements to box-sizing:border-box, which would add an extra 2 pixels to the canvas_div due to the 1px border. But setting it back to box-sizing:content-size and/or specifying the box model in the ResizeObserver does not fix anything, and it doesn't really explain the extra 4.5 pixels.

I guess there's something in the notebook JavaScript that's resizing the canvas_div, but I don't know what.

Also, if I take out the initial sizing on the JavaScript side entirely, then something on the notebook resizes the div to 0x0, and then resizes it again to 300x156.5. I don't even know where those numbers come from.

Pushing this to 3.4.

Success! For me this now works in WebAgg, the embedding example, and the notebook. Maybe we can get it into 3.3 now.

The save button does not work in nbagg, but works in the embedded webagg example and via plt.show()

It doesn't fail for me; is it popup-blocked or something?

It appears to be browser dependent (works in firefox, does not work in brave).

power-cycled to pick up the new commits on master (to fix CI)