Fix flaky test on mobile

[brichet]

Wait for the opener button to be visible in notebook toolbar.

Fixes #7370

[github-actions]

👈 Launch a Binder on branch brichet/notebook/fix-test-mobile

[jtpio]

Thanks @brichet for looking into this 👍

According to the Playwright test report, the toolbar button does not seem to be visible:

responsive-opener.webm

[brichet]

Yes, I saw that.
But I'm not able to reproduce it locally, the button always shows up when I test it...

[brichet]

But I'm not able to reproduce it locally, the button always shows up when I test it...

I finally managed to reproduce it locally, it seems there is again an issue with the toolbar, in this very specific case...

[jtpio]

Is it also reproducible in JupyterLab?

[brichet]

Not that I know, but probably, it seems to be a computation issue related to the width.
I managed to reproduce it with a window width between 521px and 526px on first load.
Probably some other width ranges can be affected too, and it depends on the items displayed in the toolbar. For example, it works well with the same range if the interface-switcher is disabled.

[brichet]

After some more tests, it may be related to the debugger icon.
When the popup-opener doesn't show up, the debugger icon take its place in the DOM, with a width of 0px.

[jtpio]

Ah so maybe it's related to #6731.

The motivation behind that change was to free some space in the notebook toolbar on mobile, also since the debugger is unlikely to be used on a small screen (although it can still be opened via the menu if needed).

[brichet]

Ah so maybe it's related to #6731.

Thanks for the link, I was confused about the behavior of this button, which only appeared when the window was wide... 😄

Indeed, I can't reproduce this issue without the rule added in #6731.
Let's close this PR and find another way to hide the button.