Avoid menu layout trashing by moving DOM queries

[krassowski]

This improves menu opening and switching performance as proposed in #329 (comment).

How to test

1. Link local copy of @lumino/virtualdom and @lumino/widget against JupyterLab HEAD
2. Download gh-9757-reproducer.ipynb, optionally change n=100_000 (this is what I am using)
3. Run all cells
4. Open menu in the menu bar over File and move to Edit and then View
5. (optionally) record performance profile and compare the Recalculate Style event duration

Switching Menu (menubar)

Chrome (x6 CPU slowdown)

Before ~1300ms	After ~1070ms (two layouts fewer)

Firefox (no throttling)

Before ~15ms	After ~14 ms (two style computations fewer)

Opening Context Menu

Chrome (x6 CPU slowdown)

Before ~530 ms	After ~360ms (one layout fewer)

[fcollonval]

Thanks a lot @krassowski
The impact is really impressive on Chrome.

I left a couple of questions.

[krassowski]

Green now. The test failure was actually just my mistake when porting the tests not an actual issue in the code 🤦

[fcollonval]

Thanks a lot @krassowski

[krassowski]

Thank you @fcollonval. Do you think that we can backport this on 1.x and include in JupyterLab 3.5? It includes a new public API member, so I am not sure here.

[fcollonval]

Thank you @fcollonval. Do you think that we can backport this on 1.x and include in JupyterLab 3.5? It includes a new public API member, so I am not sure here.

Sure thing

Extending or adding API is allowed as they do not break backward compatibility - especially in this case as they are not really meant to be used outside of Lumino.

[fcollonval]

@meeseeksdev please backport to 1.x

[lumberbot-app]

Owee, I'm MrMeeseeks, Look at me.

There seem to be a conflict, please backport manually. Here are approximate instructions:

1. Checkout backport branch and update it.

git checkout 1.x
git pull

2. Cherry pick the first parent branch of the this PR on top of the older branch:

git cherry-pick -x -m1 55e87caa277ac3ae3d15b8c5da75e78d54b069ff

3. You will likely have some merge/cherry-pick conflict here, fix them and commit:

git commit -am 'Backport PR #432: Avoid menu layout trashing by moving DOM queries'

4. Push to a named branch:

git push YOURFORK 1.x:auto-backport-of-pr-432-on-1.x

5. Create a PR against branch 1.x, I would have named this PR:

"Backport PR #432 on branch 1.x (Avoid menu layout trashing by moving DOM queries)"

And apply the correct labels and milestones.

Congratulations — you did some good work! Hopefully your backport PR will be tested by the continuous integration and merged soon!

Remember to remove the Still Needs Manual Backport label once the PR gets merged.

If these instructions are inaccurate, feel free to suggest an improvement.