How to toggle the toolbar?

[Yura52]

Hi! I am looking for the same view option that is presented in Jupyter Notebook, namely "Toggle Toolbar". Is there such an option in JupyterLab?

[jasongrout]

There is no such option in JupyterLab yet.

To develop such an option, you could maybe add an option in the MainAreaWidget class to hide a toolbar widget (https://github.com/jupyterlab/jupyterlab/blob/65b59627eefc6eb2a2216666124516048d028e9e/packages/apputils/src/toolbar.tsx), or perhaps the logic in

jupyterlab/packages/apputils/src/toolbar.tsx

Lines 71 to 81 in 65b5962

	protected onFitRequest(msg: Message): void {
	super.onFitRequest(msg);
	if (this.parent!.isAttached) {
	// If there are any widgets not explicitly hidden, expand the toolbar to
	// accommodate them.
	if (some(this.widgets, w => !w.isHidden)) {
	this.parent!.node.style.minHeight = 'var(--jp-private-toolbar-height)';
	} else {
	this.parent!.node.style.minHeight = '';
	}
	}

would take care of things if it looked to see if a widget was visible, rather than just hidden?

[jasongrout]

Perhaps there could be a View menu item that would be enabled anytime you were focused on a MainAreaWidget which could hide the toolbar?

[vidartf]

I think it would probably be good to add a "Presentation-presentation mode" that:

• Enables "Presentation mode" (larger fonts).
• Enables "Single document mode" (current tab fills entire main area).
• Hides menu bar, toolbar, etc.
• Collapses sidebar on activation ?

[jasongrout]

That sounds great too. Though I can imagine having a separate control for hiding toolbars may make sense.

[bollwyvl]

All good ideas! There's some things you just can't change with css variables and duct tape, and i'll confess to having done some pretty terrible things.

For presentations, it's discourteous to leave visible the... OS menu, clock, browser title, tab bar, url bar, bookmark bar... and then the lab menu, lab tabs, notebook buttons, dock... the speaker and audience just lost 20% of a 1080p screen (and their attention). Also, when giving a talk in a less-than-ideal room, 80% of the audience can't see the bottom 20% of the screen, because of the front 20%'s heads.... and that's where the Next Most Important Output appears when running cells.

Enumerating the toolbox of core UI sub-elements, and being able to make any of them disappear (or hidden when not hovered, or whatever) in a specific configuration, would answer many concerns folks have about lab being too busy/distracting, especially for this-is-my-first-time-using-a-computer learners. Offering extension authors a general way to opt in to such a system would let an extension just throw in ever bell and whistle, but have sensible defaults (minimal, basic, advanced, debug), and let the user discover, customize, save, and share them through one consistent UI.

Another magic thing would be be the ability to tear, let's say, any dockpanel widget off into another browser tab, and full-screen just that on a second screen/projector. I've played with it a few times, and there are just enough references to document and window to make it hard.

Endless possibilities!

[vidartf]

@bollwyvl For proper presentations, I would recommend people to use RISE 😉

In terms of implementation and configuration, maybe:

• Ensure all the points above have a command (menu/palette/etc not strictly needed). This would resolve the original issue.
• Make a macro extension that allow users to specify:
  • New command (id [optional, autogen], name, icon class / label, caption, etc)
  • Allow to add to command palette/menu
  • Allow to specify execution body as a series of other commands to execute (a command-navigator component would need to be made). Drag and drop would be a nice bonus.
  • Bonus: A way for users to share macros with each other.

While I like this idea, I don't think I have the time available to write something like this in the short-term.

[jasongrout]

* Make a macro extension that allow users to specify:

This is tracked at #7138

[jasongrout]

The basic functionality of having a command that executes other commands is at #7138. That issue doesn't include a full UX for a macro editor.

[bollwyvl]

I would recommend people to use RISE

I love RISE and would love to see a RISE extension land in Lab. That being said, I really, really don't want revealjs near my DOM or my messages to audiences.

Make a macro extension...

I think for something like How My Lab Looks, we need something discoverable. A longer command palette just means more scrolling.

That being said, the ability to drag a command from the palette onto... something (say a menu, toolbar, status bar, or just some random spot on the dock) is a very good idea.

But macros do sound great.

Bonus: A way for users to share macros with each other.

Notebook metadata? Clippy says, "It looks like this notebook has a macro in it, would you like to [run it] [view it] [save it]" and/or a mimetype, which has come up a number of times, as then a notebook could contain a particular interaction format, and become a clickable activity. So basically a JSON schema for lab commands. Seems nice. Slam react-json-schema-form on it, and away you go.

I don't think I have the time available to write something like this in the short-term.

Nor I, just now! But I do I think it's important for people to know that there is even the hope that some of these features might come to pass.

[tfiers]

Apologies for the bump.

There's a lot I can customize with custom browser CSS¹²

..but getting rid of the notebook toolbar isn't one of those.
(You can hide it, but then there's just a gray empty space: the other elements on the page have fixed positioning.
And removing the top: from the notebook element makes its height not correct -- which seems to calculated dynamically).

Related, and with the same problem when hiding with CSS:
it would be nice to be able to hide the top-bar in Simple mode
(containing the notebook name -- which is already in the status bar, URL, tab title, window title, and TOC header)

Illustration: jupyterlab in Simple mode, with the following browser extension CSS to try and hide the title bar and toolbar:

#jp-top-panel {
    visibility: hidden !important;
    height: 0px !important;
}
.jp-Toolbar {
    visibility: hidden !important;
    height: 0px !important;
}

So, do any modern-web-dev wizz's have an idea how to accomplish this?

Footnotes

1. Using the Stylus browser extension. With a stylesheet full of !importants and overriding the --jp- variables. ↩

2. I haven't got the heart to learn how to write a proper extension for JupyterLab. ↩