Flickering notebook toolbar items when resizing the window

[jtpio]

Resizing the browser changes the position of the notebook toolbar items:

resize-notebook-toolbar.webm

However this does not seem to be an issue with JupyterLab:

resize-jupyterlab-notebook.webm

[jtpio]

cc @brichet who may have an idea about what might be causing this behavior

[brichet]

Thanks @jtpio for the ping.
I can't reproduce it locally, but can you try resizing using a sidebar instead of the development tools of the browser ?
I'm asking that to know if this can be due to the computation of the items widths.

Computing the size of the toolbar items is quite long because it requires them to be displayed.
To avoid this computation, this widths are stored on first computation, and reused to set the position of the items https://github.com/jupyterlab/jupyterlab/blob/634cc3a8ccedf5ea79987f5bf9faa0bede83935f/packages/ui-components/src/components/toolbar.tsx#L701
The idea is to compute the widths only when the zoom change, but the only way I found to know if the zoom has changed is by using the ratio between the window.outerWidth and window.innerWidth https://github.com/jupyterlab/jupyterlab/blob/634cc3a8ccedf5ea79987f5bf9faa0bede83935f/packages/ui-components/src/components/toolbar.tsx#L517.
But this ratio also changes when using the dev tools.

[jtpio]

I can't reproduce it locally

It was found while testing #7301 on Binder with Firefox 124.

[brichet]

Thanks for the link, I was about to open an issue about notebook width 😄

It also happens with the sidebar, so it is not related to the computation of the item widths.

[brichet]

It seems that only the widgets on the right of the toolbar are affected.
Wondering if they are supposed to be there, and if this is not related to the issue.

[jtpio]

I think these items come from this extension: https://github.com/manics/jupyter-offlinenotebook

Last time I checked they were added via the toolbar API directly, and not using the settings system (which could be the reason?)

[jtpio]

#7128 might be related.

[brichet]

Yes, it might be related, if the flickering is due to some kind of floating position of items.
I can reproduce the wrong positions with the first release of Notebook 7, 7.0.0, but it didn't flicker.

[brichet]

The flickering is due to (1) the wrong position of the items because of order insertion (see #7128 (comment)) and (2) the storage of the expected position in a map instead of the real position after insertion here.

The second problem should be easy to fix in Jupyterlab, I'll open a PR.