Refactor side panel UX and API

[ellisonbg]

Right now in Notebook v7 the left and right side panels extend from the top of the page to the bottom. From a UX perspective this is in contrast to how side panels are handled in other similar document oriented applications (Google Drive, Quip, Word, Figma, etc.) where the side panels are below the top bar, menu bar, etc. As we add more side panels that should work in notebook 7 (commenting, chat, etc.) I believe that if we adopt this style of UX, that we will have more ability to make these side panels usable, without degrading the nice document oriented experience. This UX is also consistent with how side panels have been handled in the notebook from the start (see the screenshot in the original launch notes here).

From looking at the implementation of the application shell in notebook 7, I can see why we made the current choice and how deeper API changes are needed in the application shell to make this possible. I have some idea on how we can do that by introducing a top-level toolbar area in shell.add that would allow us to decouple the document from its toolbar. We can follow up on this after the release of notebook 7, but I wanted to open this now while we are testing notebook 7.

[ellisonbg]

Ping @JasonWeill who may have time to work on this after the 7.0 release.

[jtpio]

From a UX perspective this is in contrast to how side panels are handled in other similar document oriented applications (Google Drive, Quip, Word, Figma, etc.)

Actually it was implemented like this because otherwise the panel would shift the notebook while the top area stayed at the same place. Which felt quite odd.

See the comments and screencasts in jupyterlab/retrolab#275 (comment) and #6487 (comment). This one in particular showing how Google Docs handles that:

[ellisonbg]

The advantage of using a document with a max width is that you can open side panels in the page margins and not have to shift the document or top area:

I realize that the side panels in JupyterLab shift the adjacent content over and have different styling, but there is no reason we can't improve the styling to overlap the L/R document margins to avoid the shift. The primary side panels (tables of content, comments, etc.) function this way in Google drive.

The usage case for shifting everything over (document and top area) would be when the left panel is "less related" to the document and primary function of the page, such as is the case for the map widget above. I think there are times when that makes sense, but for most of our usage cases (TOC, debugger), the side content is closely related to the document and would ideally shift as little of the page as possible.

We can follow up post Notebook 7 release with some designs for this and we can see how it works.