Enable interactive figure resizing for webagg and nbagg backends

[zhizheng1]

PR Summary

This PR adds support for interactively resizing figures when using WebAgg or NbAgg backends. It essentially backports the logic used in ipympl which supports the same manner of resizing (i.e. dragging the bottom right corner).

Note the same logic applies to both webagg and nbagg (via mpl.js).

Fixes #24075

PR Checklist

Tests and Styling

• [N/A] Has pytest style unit tests (and pytest passes).
• [N/A] Is Flake 8 compliant (install flake8-docstrings and run flake8 --docstring-convention=all).

Documentation

• [N/A] New features are documented, with examples if plot related.
• [N/A] New features have an entry in doc/users/next_whats_new/ (follow instructions in README.rst there).
• [N/A] API changes documented in doc/api/next_api_changes/ (follow instructions in README.rst there).
• [N/A] Documentation is sphinx and numpydoc compliant (the docs should build without error).

193451951-c07869c9-cb53-4e48-91d0-1fb03650d04e.mov

Screen.Recording.2022-10-03.at.3.05.19.PM.mov

[tacaswell]

Can you address the style issues?

This seems reasonable to me, thank you!

[QuLogic]

I am confused; resizing already works in both webagg and nbagg.

[QuLogic]

I don't mean to discourage you, but I don't know why this needs to be done.

[tacaswell]

Sorry, I was also confused as I trusted that resizing did not currently work in webagg.

[zhizheng1]

Could you confirm if it works? At least on Safari it's never worked for me - the div is resizable but the canvas at front is opaque and completely overlaps the div, making it unable to resize by dragging the corner. @QuLogic

I have made the changes.

[zhizheng1]

I see.. WebAgg resizing works on Chrome, but not on Safari, which I use most of the time.

Screen.Recording.2022-10-04.at.11.20.21.AM.mov

Screen.Recording.2022-10-04.at.11.21.26.AM.mov

[tacaswell]

@zhizheng1 Did you mean to close this? If it fixes webagg in safari that is something we should take.

[zhizheng1]

@tacaswell I think we have a better solution @QuLogic that leverages browser's built-in resizing capability instead of implementing our own. Just FYI, I also updated our patch script per this new idea (a one-liner only now!), which is shorter and more performant:

sed -i.0 -e 's/this.rubberband_canvas.ad/canvas_div.ad/g' -e 's/rubberband_canvas.ad/canvas_div.ad/g' -e 's/z-index: 1;/& pointer-events: none;/g' -e "s/+ height + 'px;'/& + 'pointer-events: none;'/g" -e 's/rubberband_canvas.st/canvas_div.st/g' ./$VENV/lib/*/*/matplotlib/*/*/*/mpl.js

Applying the above one-liner to current production MPL 3.6.0 will enable resizing in safari.

At the very least, I don't think this PR is necessary any more..

[tacaswell]

Sorry, I now see @QuLogic already did. 🐑 I'm still catching up on my notifications!

This is replaced by #24083.