Add content-visibility hide mode

[krassowski]

See #496 (comment).

Once support for content-visibility is better across browsers we should make it the default as we have exactly the use case that it was intended for (see point two in specification).

Performance-wise, I re-run the benchmark for three tabs (as in the issue: two test notebooks and launcher) after full integration and it works as expected:

Google Chrome 108

hidden mode	IQM [Q1 - Q3]	mean	min
display	3043.3 [2944.3 – 3193.1] ms	3051.3 ms	2390.9 ms
content-visibility	631.6 [606.4 – 694.6] ms	687.7 ms	566.5 ms
scale	548.6 [531 – 561.3] ms	566.2 ms	506.6 ms

but differently to scale, it does not cause unintended issues in Chromium browsers where performance issues in presence of big notebooks are most pronounced, nor does it degrade in performance once there are too many tabs open.

Note: the benchmarks above were run with latest dev versions of JupyterLab (4.0alpha) and lumino from this PR, so these account for any potential changes to due windowed notebooks feature (full windowing mode).

Notes on current state in Firefox below. TLDR, we are good to merge IMO.

For anyone trying this out in Firefox: it may appear that it already "works" in Firefox 108 but it does not support content-visibility yet (although some basic support was already merged in 3 months ago, possibly pending bug fixes like this one). It "works" because in absence of content-visibility support it reduces to leaving the tab visible but hidden under the others due to z-index change. It means that we can confidently ship because it is in a way safer than existing scale mode (if user chooses to enable it in a browser which does not support content-visibility, their workspace will still work; scale breaks things in Chromium browsers). The performance in this case is fine for few tabs (the three test notebooks scenario):

hidden mode	IQM [Q1 - Q3]	mean	min
display	1288.7 [1222.8 – 1351.8] ms	1304.6 ms	1132.1 ms
z-index	960.6 [928.8 – 1004.9] ms	1019.5 ms	871.2 ms
scale	925 [896.3 – 947.9] ms	933.2 ms	811.2 ms

But it is worse when there are many notebooks (each 20 code cells):

hidden mode	10 notebooks	30 notebooks
display	1982.4 [1833.4 – 2145.6]	12061.3 [11591.2 – 12455.9]
z-index	2517.6 [2435.2 – 2603.1]	21574.9 [21158.4 – 22010.4]
scale	2007.3 [1912 – 2113.4]	17439.5 [16916 – 18083.8]

Interestingly, scale in Firefox is only better for heavy notebooks, not for many small notebooks.

[fcollonval]

Thanks a lot @krassowski

[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 fa048e1680cce138af24ee1aa964f2f02b5e61f6

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

git commit -am 'Backport PR #497: Add content-visibility hide mode'

4. Push to a named branch:

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

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

"Backport PR #497 on branch 1.x (Add content-visibility hide mode)"

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.