AUDIT - Main content area Zoom

[trallard]

• 200%
• 400%
• Change the default value of text size from 16 to 30 in the web browser
• Test with different screen sizes

References

• Theme scope checklist
• Audit spreadsheet

[steff456]

These are the results of the Zoom Audit,

Behavior with sidebars opened

Python File behavior

Notebook behavior

Launcher behavior

Dialog behavior

Multiple tabs opened

Notebook toolbar in small screens or high zoom

Cell options in small screens or high zoom

Notes

• The main content area is not visible or usable at 400% zoom if both sidebars are opened
• Files are wrapping lines instead of having a horizontal scrollbar, which allows to see all the code without any action
• If zoom is activated some filenames are not visible in the tabs, but hovering over them will give the complete information of the file
• Opening a lot of files in zoom may cause to just seeing the icon and not being able to even close it
• The notebook's toolbar is responsive and all the options are visible and usable
• Cell options layout breaks with 400% zoom
• Python logo in the launcher pixelates with zoom
• The tab size height is fixed in px and it is a flex container where each tab just defines a z-index higher than the previous
• Cell options height is fixed using the same value as the toolbar and it is a flex box
• Dialogs occupy the complete interface with 400% zoom - the dialog panel is fixed in both width and height in px
• The area in the container changes dynamically with the screen size and sidebars
• Changing the default text size doesn't do any effect in Jlab UI, but changing the minimum text size in the browser does create changes.
• The notebook view works with responsive layouts

Suggestions

• In small screens or high zoom we should automatically close the sidebars and if opened they should take all the space to avoid users trying to use both at the same time.
• A new UX/UI needs to be defined for the tabs in the main content area, especially the cases where too many of them are opened.
• The cell options layout needs to be responsive - this may include removing options when the space is smaller or adding ellipsis.
• Change the python logo to a new image that has better resolution
• Dialogs sizes need to be checked for high zoom or small screens

[isabela-pf]

I'm following up on our tab discussion! I agreed that we needed some way to handle navigating tabs and had proposed a combo of

1. Show only the current document's tab, the "+" for new launcher, and "…" to expand a list of all the tabs currently open. (Or something like that.)
2. Add some kind of "jump to tab" button to each item in the the left sidebar's Running section. I believe all open documents (even if they don't have an attached kernel) are listed here, but I could be wrong about that.

But when I reviewed again today, I think both of these options already exist in some form. I was wrong! The Tabs menu does list open tabs (at the bottom of the menu, though, so I don't find it particularly quick to get to). The Running section also does open the selected document when clicked.

There still might be a way to optimize or make this clearer, but there is some support for tab navigation I missed. In particular, the many tabs situation that @steff456 shared a screen shot of above. My JuptyerLab switches to "simple mode" by default when scaled to this size, so tabs disappear. Maybe there needs to be a way to handle these tabs even outside of "simple mode?" Thoughts?

For records, I found this with a combo of

• Operating System and version: MacOS Mojave
• Browser and version: Firefox 103.0.2
• JupyterLab version: 3.0.3

[steff456]

There's some interesting findings here, I think that the behavior depends also in the decision we make with the flow of the main content area. In the case the sidebars are collapsed, we may need to have some way to access the list of tabs and the navigation feature (?) or we expect the user to use open the sidebar for this case?