@jupyter-notebook/application-extension 7.0.0-alpha.1 → 7.0.0-alpha.11

package/lib/index.js

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import { ILabStatus, IRouter, ITreePathUpdater, JupyterFrontEnd, Router } from '@jupyterlab/application';
-import { sessionContextDialogs, ISessionContextDialogs, DOMUtils, ICommandPalette } from '@jupyterlab/apputils';
+import { ILabStatus, IRouter, ITreePathUpdater, JupyterFrontEnd } from '@jupyterlab/application';
+import { sessionContextDialogs, ISessionContextDialogs, DOMUtils, ICommandPalette, IToolbarWidgetRegistry } from '@jupyterlab/apputils';
 import { ConsolePanel } from '@jupyterlab/console';
 import { PageConfig, PathExt, URLExt } from '@jupyterlab/coreutils';
 import { IDocumentManager, renameDialog } from '@jupyterlab/docmanager';
@@ -9,19 +9,11 @@ import { DocumentWidget } from '@jupyterlab/docregistry';
 import { IMainMenu } from '@jupyterlab/mainmenu';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ITranslator } from '@jupyterlab/translation';
-import { NotebookApp, NotebookShell, INotebookShell } from '@jupyter-notebook/application';
+import { NotebookApp, NotebookShell, INotebookShell, SidePanelPalette } from '@jupyter-notebook/application';
 import { jupyterIcon } from '@jupyter-notebook/ui-components';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { DisposableDelegate, DisposableSet } from '@lumino/disposable';
-import { Widget } from '@lumino/widgets';
-/**
- * The default notebook factory.
- */
-const NOTEBOOK_FACTORY = 'Notebook';
-/**
- * The editor factory.
- */
-const EDITOR_FACTORY = 'Editor';
+import { Menu, Widget } from '@lumino/widgets';
 /**
  * A regular expression to match path to notebooks and documents
  */
@@ -39,6 +31,10 @@ var CommandIDs;
      * Toggle Top Bar visibility
      */
     CommandIDs.toggleTop = 'application:toggle-top';
+    /**
+     * Toggle side panel visibility
+     */
+    CommandIDs.togglePanel = 'application:toggle-panel';
     /**
      * Toggle the Zen mode
      */
@@ -98,7 +94,8 @@ const logo = {
             elementPosition: 'center',
             padding: '2px 2px 2px 8px',
             height: '28px',
-            width: 'auto'
+            width: 'auto',
+            cursor: 'pointer'
         });
         logo.id = 'jp-NotebookLogo';
         app.shell.add(logo, 'top', { rank: 0 });
@@ -116,7 +113,7 @@ const opener = {
         const command = 'router:tree';
         commands.addCommand(command, {
             execute: (args) => {
-                var _a;
+                var _a, _b;
                 const parsed = args;
                 const matches = (_a = parsed.path.match(TREE_PATTERN)) !== null && _a !== void 0 ? _a : [];
                 const [, , path] = matches;
@@ -124,19 +121,12 @@ const opener = {
                     return;
                 }
                 const file = decodeURIComponent(path);
-                const ext = PathExt.extname(file);
-                app.restored.then(async () => {
-                    // TODO: get factory from file type instead?
-                    if (ext === '.ipynb') {
-                        docManager.open(file, NOTEBOOK_FACTORY, undefined, {
-                            ref: '_noref'
-                        });
-                    }
-                    else {
-                        docManager.open(file, EDITOR_FACTORY, undefined, {
-                            ref: '_noref'
-                        });
-                    }
+                const urlParams = new URLSearchParams(parsed.search);
+                const factory = (_b = urlParams.get('factory')) !== null && _b !== void 0 ? _b : 'default';
+                app.started.then(async () => {
+                    docManager.open(file, factory, undefined, {
+                        ref: '_noref'
+                    });
                 });
             }
         });
@@ -145,8 +135,6 @@ const opener = {
 };
 /**
  * A plugin to customize menus
- *
- * TODO: use this plugin to customize the menu items and their order
  */
 const menus = {
     id: '@jupyter-notebook/application-extension:menus',
@@ -173,6 +161,19 @@ const menus = {
         }
     }
 };
+/**
+ * A plugin to provide a spacer at rank 900 in the menu area
+ */
+const menuSpacer = {
+    id: '@jupyter-notebook/application-extension:menu-spacer',
+    autoStart: true,
+    activate: (app) => {
+        const menu = new Widget();
+        menu.id = DOMUtils.createDomID();
+        menu.addClass('jp-NotebookSpacer');
+        app.shell.add(menu, 'menu', { rank: 900 });
+    }
+};
 /**
  * Add commands to open the tree and running pages.
  */
@@ -180,8 +181,8 @@ const pages = {
     id: '@jupyter-notebook/application-extension:pages',
     autoStart: true,
     requires: [ITranslator],
-    optional: [ICommandPalette, IMainMenu],
-    activate: (app, translator, palette, menu) => {
+    optional: [ICommandPalette],
+    activate: (app, translator, palette) => {
         const trans = translator.load('notebook');
         const baseUrl = PageConfig.getBaseUrl();
         app.commands.addCommand(CommandIDs.openLab, {
@@ -190,19 +191,21 @@ const pages = {
                 window.open(`${baseUrl}lab`);
             }
         });
+        const page = PageConfig.getOption('notebookPage');
         app.commands.addCommand(CommandIDs.openTree, {
-            label: trans.__('Open Files'),
+            label: trans.__('File Browser'),
             execute: () => {
-                window.open(`${baseUrl}tree`);
+                if (page === 'tree') {
+                    app.commands.execute('filebrowser:activate');
+                }
+                else {
+                    window.open(`${baseUrl}tree`);
+                }
             }
         });
         if (palette) {
-            [CommandIDs.openLab, CommandIDs.openTree].forEach(command => {
-                palette.addItem({ command, category: 'View' });
-            });
-        }
-        if (menu) {
-            menu.viewMenu.addGroup([{ command: CommandIDs.openLab }, { command: CommandIDs.openTree }], 0);
+            palette.addItem({ command: CommandIDs.openLab, category: 'View' });
+            palette.addItem({ command: CommandIDs.openTree, category: 'View' });
         }
     }
 };
@@ -220,29 +223,6 @@ const paths = {
         return app.paths;
     }
 };
-/**
- * The default URL router provider.
- */
-const router = {
-    id: '@jupyter-notebook/application-extension:router',
-    autoStart: true,
-    provides: IRouter,
-    requires: [JupyterFrontEnd.IPaths],
-    activate: (app, paths) => {
-        const { commands } = app;
-        const base = paths.urls.base;
-        const router = new Router({ base, commands });
-        void app.started.then(() => {
-            // Route the very first request on load.
-            void router.route();
-            // Route all pop state events.
-            window.addEventListener('popstate', () => {
-                void router.route();
-            });
-        });
-        return router;
-    }
-};
 /**
  * The default session dialogs plugin
  */
@@ -266,25 +246,6 @@ const shell = {
     autoStart: true,
     provides: INotebookShell
 };
-/**
- * A plugin to provide a spacer at rank 900 for flex panels
- * TODO: reuse upstream @jupyterlab/application-extension:top-spacer plugin when fixed
- * in https://github.com/jupyterlab/jupyterlab/pull/11900
- */
-const spacer = {
-    id: '@jupyter-notebook/application-extension:spacer',
-    autoStart: true,
-    activate: (app) => {
-        const top = new Widget();
-        top.id = DOMUtils.createDomID();
-        top.addClass('jp-NotebookSpacer');
-        app.shell.add(top, 'top', { rank: 900 });
-        const menu = new Widget();
-        menu.id = DOMUtils.createDomID();
-        menu.addClass('jp-NotebookSpacer');
-        app.shell.add(menu, 'menu', { rank: 900 });
-    }
-};
 /**
  * The default JupyterLab application status provider.
  */
@@ -340,25 +301,30 @@ const title = {
     id: '@jupyter-notebook/application-extension:title',
     autoStart: true,
     requires: [INotebookShell, ITranslator],
-    optional: [IDocumentManager, IRouter],
-    activate: (app, shell, translator, docManager, router) => {
+    optional: [IDocumentManager, IRouter, IToolbarWidgetRegistry],
+    activate: (app, shell, translator, docManager, router, toolbarRegistry) => {
         const { commands } = app;
         const trans = translator.load('notebook');
-        const widget = new Widget();
-        widget.id = 'jp-title';
-        app.shell.add(widget, 'top', { rank: 10 });
+        const node = document.createElement('div');
+        if (toolbarRegistry) {
+            toolbarRegistry.addFactory('TopBar', 'widgetTitle', toolbar => {
+                const widget = new Widget({ node });
+                widget.id = 'jp-title';
+                return widget;
+            });
+        }
         const addTitle = async () => {
             const current = shell.currentWidget;
             if (!current || !(current instanceof DocumentWidget)) {
                 return;
             }
-            if (widget.node.children.length > 0) {
+            if (node.children.length > 0) {
                 return;
             }
             const h = document.createElement('h1');
             h.textContent = current.title.label.replace(STRIP_IPYNB, '');
-            widget.node.appendChild(h);
-            widget.node.style.marginLeft = '10px';
+            node.appendChild(h);
+            node.style.marginLeft = '10px';
             if (!docManager) {
                 return;
             }
@@ -370,11 +336,11 @@ const title = {
                 label: () => trans.__('Rename…'),
                 isEnabled,
                 execute: async () => {
-                    var _a, _b;
+                    var _a;
                     if (!isEnabled()) {
                         return;
                     }
-                    const result = await renameDialog(docManager, current.context.path);
+                    const result = await renameDialog(docManager, current.context);
                     // activate the current widget to bring the focus
                     if (current) {
                         current.activate();
@@ -382,13 +348,13 @@ const title = {
                     if (result === null) {
                         return;
                     }
-                    const newPath = (_a = current.context.path) !== null && _a !== void 0 ? _a : result.path;
+                    const newPath = current.context.path;
                     const basename = PathExt.basename(newPath);
                     h.textContent = basename.replace(STRIP_IPYNB, '');
                     if (!router) {
                         return;
                     }
-                    const matches = (_b = router.current.path.match(TREE_PATTERN)) !== null && _b !== void 0 ? _b : [];
+                    const matches = (_a = router.current.path.match(TREE_PATTERN)) !== null && _a !== void 0 ? _a : [];
                     const [, route, path] = matches;
                     if (!route || !path) {
                         return;
@@ -399,7 +365,7 @@ const title = {
                     });
                 }
             });
-            widget.node.onclick = async () => {
+            node.onclick = async () => {
                 void commands.execute(CommandIDs.rename);
             };
         };
@@ -413,8 +379,8 @@ const title = {
 const topVisibility = {
     id: '@jupyter-notebook/application-extension:top',
     requires: [INotebookShell, ITranslator],
-    optional: [IMainMenu, ISettingRegistry],
-    activate: (app, notebookShell, translator, menu, settingRegistry) => {
+    optional: [ISettingRegistry, ICommandPalette],
+    activate: (app, notebookShell, translator, settingRegistry, palette) => {
         const trans = translator.load('notebook');
         const top = notebookShell.top;
         const pluginId = topVisibility.id;
@@ -428,9 +394,6 @@ const topVisibility = {
             },
             isToggled: () => top.isVisible
         });
-        if (menu) {
-            menu.viewMenu.addGroup([{ command: CommandIDs.toggleTop }], 2);
-        }
         let settingsOverride = false;
         if (settingRegistry) {
             const loadSettings = settingRegistry.load(pluginId);
@@ -452,6 +415,9 @@ const topVisibility = {
                 console.error(reason.message);
             });
         }
+        if (palette) {
+            palette.addItem({ command: CommandIDs.toggleTop, category: 'View' });
+        }
         const onChanged = () => {
             if (settingsOverride) {
                 return;
@@ -468,6 +434,190 @@ const topVisibility = {
     },
     autoStart: true
 };
+/**
+ * Plugin to toggle the left or right side panel's visibility.
+ */
+const sidePanelVisibility = {
+    id: '@jupyter-notebook/application-extension:sidepanel',
+    requires: [INotebookShell, ITranslator],
+    optional: [IMainMenu, ICommandPalette],
+    autoStart: true,
+    activate: (app, notebookShell, translator, menu, palette) => {
+        const trans = translator.load('notebook');
+        /* Arguments for togglePanel command:
+         * side, left or right area
+         * title, widget title to show in the menu
+         * id, widget ID to activate in the side panel
+         */
+        app.commands.addCommand(CommandIDs.togglePanel, {
+            label: args => args['title'],
+            caption: args => {
+                // We do not substitute the parameter into the string because the parameter is not
+                // localized (e.g., it is always 'left') even though the string is localized.
+                if (args['side'] === 'left') {
+                    return trans.__('Show %1 in the left sidebar', args['title']);
+                }
+                else if (args['side'] === 'right') {
+                    return trans.__('Show %1 in the right sidebar', args['title']);
+                }
+                return trans.__('Show %1 in the sidebar', args['title']);
+            },
+            execute: args => {
+                var _a, _b;
+                switch (args['side']) {
+                    case 'left':
+                        if (notebookShell.leftCollapsed) {
+                            notebookShell.expandLeft(args.id);
+                        }
+                        else if (((_a = notebookShell.leftHandler.currentWidget) === null || _a === void 0 ? void 0 : _a.id) !== args.id) {
+                            notebookShell.expandLeft(args.id);
+                        }
+                        else {
+                            notebookShell.collapseLeft();
+                            if (notebookShell.currentWidget) {
+                                notebookShell.activateById(notebookShell.currentWidget.id);
+                            }
+                        }
+                        break;
+                    case 'right':
+                        if (notebookShell.rightCollapsed) {
+                            notebookShell.expandRight(args.id);
+                        }
+                        else if (((_b = notebookShell.rightHandler.currentWidget) === null || _b === void 0 ? void 0 : _b.id) !== args.id) {
+                            notebookShell.expandRight(args.id);
+                        }
+                        else {
+                            notebookShell.collapseRight();
+                            if (notebookShell.currentWidget) {
+                                notebookShell.activateById(notebookShell.currentWidget.id);
+                            }
+                        }
+                        break;
+                }
+            },
+            isToggled: args => {
+                switch (args['side']) {
+                    case 'left': {
+                        if (notebookShell.leftCollapsed) {
+                            return false;
+                        }
+                        const currentWidget = notebookShell.leftHandler.currentWidget;
+                        if (!currentWidget) {
+                            return false;
+                        }
+                        return currentWidget.id === args['id'];
+                    }
+                    case 'right': {
+                        if (notebookShell.rightCollapsed) {
+                            return false;
+                        }
+                        const currentWidget = notebookShell.rightHandler.currentWidget;
+                        if (!currentWidget) {
+                            return false;
+                        }
+                        return currentWidget.id === args['id'];
+                    }
+                }
+                return false;
+            }
+        });
+        const sidePanelMenu = {
+            left: null,
+            right: null
+        };
+        /**
+         * The function which adds entries to the View menu for each widget of a side panel.
+         *
+         * @param area - 'left' or 'right', the area of the side panel.
+         * @param entryLabel - the name of the main entry in the View menu for that side panel.
+         * @returns - The disposable menu added to the View menu or null.
+         */
+        const updateMenu = (area, entryLabel) => {
+            var _a;
+            if (menu === null) {
+                return null;
+            }
+            // Remove the previous menu entry for this side panel.
+            (_a = sidePanelMenu[area]) === null || _a === void 0 ? void 0 : _a.dispose();
+            // Creates a new menu entry and populates it with side panel widgets.
+            const newMenu = new Menu({ commands: app.commands });
+            newMenu.title.label = entryLabel;
+            const widgets = notebookShell.widgets(area);
+            let menuToAdd = false;
+            for (const widget of widgets) {
+                newMenu.addItem({
+                    command: CommandIDs.togglePanel,
+                    args: {
+                        side: area,
+                        title: `Show ${widget.title.caption}`,
+                        id: widget.id
+                    }
+                });
+                menuToAdd = true;
+            }
+            // If there are widgets, add the menu to the main menu entry.
+            if (menuToAdd) {
+                sidePanelMenu[area] = menu.viewMenu.addItem({
+                    type: 'submenu',
+                    submenu: newMenu
+                });
+            }
+        };
+        app.restored.then(() => {
+            // Create menu entries for the left and right panel.
+            if (menu) {
+                const getSidePanelLabel = (area) => {
+                    if (area === 'left') {
+                        return trans.__('Left Sidebar');
+                    }
+                    else {
+                        return trans.__('Right Sidebar');
+                    }
+                };
+                const leftArea = notebookShell.leftHandler.area;
+                const leftLabel = getSidePanelLabel(leftArea);
+                updateMenu(leftArea, leftLabel);
+                const rightArea = notebookShell.rightHandler.area;
+                const rightLabel = getSidePanelLabel(rightArea);
+                updateMenu(rightArea, rightLabel);
+                const handleSidePanelChange = (sidePanel, widget) => {
+                    const label = getSidePanelLabel(sidePanel.area);
+                    updateMenu(sidePanel.area, label);
+                };
+                notebookShell.leftHandler.widgetAdded.connect(handleSidePanelChange);
+                notebookShell.leftHandler.widgetRemoved.connect(handleSidePanelChange);
+                notebookShell.rightHandler.widgetAdded.connect(handleSidePanelChange);
+                notebookShell.rightHandler.widgetRemoved.connect(handleSidePanelChange);
+            }
+            // Add palette entries for side panels.
+            if (palette) {
+                const sidePanelPalette = new SidePanelPalette({
+                    commandPalette: palette,
+                    command: CommandIDs.togglePanel
+                });
+                notebookShell.leftHandler.widgets.forEach(widget => {
+                    sidePanelPalette.addItem(widget, notebookShell.leftHandler.area);
+                });
+                notebookShell.rightHandler.widgets.forEach(widget => {
+                    sidePanelPalette.addItem(widget, notebookShell.rightHandler.area);
+                });
+                // Update menu and palette when widgets are added or removed from side panels.
+                notebookShell.leftHandler.widgetAdded.connect((sidePanel, widget) => {
+                    sidePanelPalette.addItem(widget, sidePanel.area);
+                });
+                notebookShell.leftHandler.widgetRemoved.connect((sidePanel, widget) => {
+                    sidePanelPalette.removeItem(widget, sidePanel.area);
+                });
+                notebookShell.rightHandler.widgetAdded.connect((sidePanel, widget) => {
+                    sidePanelPalette.addItem(widget, sidePanel.area);
+                });
+                notebookShell.rightHandler.widgetRemoved.connect((sidePanel, widget) => {
+                    sidePanelPalette.removeItem(widget, sidePanel.area);
+                });
+            }
+        });
+    }
+};
 /**
  * The default tree route resolver plugin.
  */
@@ -537,8 +687,8 @@ const zen = {
     id: '@jupyter-notebook/application-extension:zen',
     autoStart: true,
     requires: [ITranslator],
-    optional: [ICommandPalette, INotebookShell, IMainMenu],
-    activate: (app, translator, palette, notebookShell, menu) => {
+    optional: [ICommandPalette, INotebookShell],
+    activate: (app, translator, palette, notebookShell) => {
         const { commands } = app;
         const elem = document.documentElement;
         const trans = translator.load('notebook');
@@ -574,9 +724,6 @@ const zen = {
         if (palette) {
             palette.addItem({ command: CommandIDs.toggleZen, category: 'Mode' });
         }
-        if (menu) {
-            menu.viewMenu.addGroup([{ command: CommandIDs.toggleZen }], 3);
-        }
     }
 };
 /**
@@ -586,13 +733,13 @@ const plugins = [
     dirty,
     logo,
     menus,
+    menuSpacer,
     opener,
     pages,
     paths,
-    router,
     sessionDialogs,
     shell,
-    spacer,
+    sidePanelVisibility,
     status,
     tabTitle,
     title,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter-notebook/application-extension",
-  "version": "7.0.0-alpha.1",
+  "version": "7.0.0-alpha.11",
   "description": "Jupyter Notebook - Application Extension",
   "homepage": "https://github.com/jupyter/notebook",
   "bugs": {
@@ -39,27 +39,26 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyter-notebook/application": "^7.0.0-alpha.1",
-    "@jupyter-notebook/ui-components": "^7.0.0-alpha.1",
-    "@jupyterlab/application": "^4.0.0-alpha.5",
-    "@jupyterlab/apputils": "^4.0.0-alpha.5",
-    "@jupyterlab/celltags": "^4.0.0-alpha.5",
-    "@jupyterlab/codeeditor": "^4.0.0-alpha.5",
-    "@jupyterlab/codemirror": "^4.0.0-alpha.5",
-    "@jupyterlab/console": "^4.0.0-alpha.5",
-    "@jupyterlab/coreutils": "^6.0.0-alpha.5",
-    "@jupyterlab/docmanager": "^4.0.0-alpha.5",
-    "@jupyterlab/docregistry": "^4.0.0-alpha.5",
-    "@jupyterlab/mainmenu": "^4.0.0-alpha.5",
-    "@jupyterlab/settingregistry": "^4.0.0-alpha.5",
-    "@jupyterlab/translation": "^4.0.0-alpha.4",
-    "@lumino/coreutils": "^1.12.0",
-    "@lumino/disposable": "^1.10.1",
-    "@lumino/widgets": "^1.31.1"
+    "@jupyter-notebook/application": "^7.0.0-alpha.11",
+    "@jupyter-notebook/ui-components": "^7.0.0-alpha.11",
+    "@jupyterlab/application": "^4.0.0-alpha.17",
+    "@jupyterlab/apputils": "^4.0.0-alpha.17",
+    "@jupyterlab/celltags": "^4.0.0-alpha.17",
+    "@jupyterlab/codeeditor": "^4.0.0-alpha.17",
+    "@jupyterlab/console": "^4.0.0-alpha.17",
+    "@jupyterlab/coreutils": "^6.0.0-alpha.17",
+    "@jupyterlab/docmanager": "^4.0.0-alpha.17",
+    "@jupyterlab/docregistry": "^4.0.0-alpha.17",
+    "@jupyterlab/mainmenu": "^4.0.0-alpha.17",
+    "@jupyterlab/settingregistry": "^4.0.0-alpha.17",
+    "@jupyterlab/translation": "^4.0.0-alpha.17",
+    "@lumino/coreutils": "^2.0.0-alpha.7",
+    "@lumino/disposable": "^2.0.0-alpha.7",
+    "@lumino/widgets": "^2.0.0-alpha.7"
   },
   "devDependencies": {
-    "rimraf": "~3.0.0",
-    "typescript": "~4.1.3"
+    "rimraf": "^3.0.2",
+    "typescript": "~4.9.3"
   },
   "publishConfig": {
     "access": "public"

package/schema/menus.json

@@ -8,13 +8,56 @@
         "items": [
           {
             "command": "application:rename",
-            "rank": 4
+            "rank": 4.5
           },
           {
             "command": "notebook:trust",
             "rank": 20
           }
         ]
+      },
+      {
+        "id": "jp-mainmenu-view",
+        "items": [
+          {
+            "type": "submenu",
+            "disabled": true,
+            "submenu": {
+              "id": "jp-mainmenu-view-appearance"
+            }
+          }
+        ]
+      },
+      {
+        "id": "jp-mainmenu-run",
+        "items": [
+          {
+            "type": "separator",
+            "rank": 1000
+          },
+          {
+            "type": "submenu",
+            "rank": 1010,
+            "submenu": {
+              "id": "jp-runmenu-change-cell-type",
+              "label": "Cell Type",
+              "items": [
+                {
+                  "command": "notebook:change-cell-to-code",
+                  "rank": 0
+                },
+                {
+                  "command": "notebook:change-cell-to-markdown",
+                  "rank": 0
+                },
+                {
+                  "command": "notebook:change-cell-to-raw",
+                  "rank": 0
+                }
+              ]
+            }
+          }
+        ]
       }
     ]
   },

package/schema/pages.json

@@ -0,0 +1,24 @@
+{
+  "title": "Jupyter Notebook Pages",
+  "description": "Jupyter Notebook Pages",
+  "jupyter.lab.menus": {
+    "main": [
+      {
+        "id": "jp-mainmenu-view",
+        "items": [
+          {
+            "command": "application:open-lab",
+            "rank": 2
+          },
+          {
+            "command": "application:open-tree",
+            "rank": 2
+          }
+        ]
+      }
+    ]
+  },
+  "properties": {},
+  "additionalProperties": false,
+  "type": "object"
+}

package/schema/title.json

@@ -0,0 +1,10 @@
+{
+  "title": "Title widget",
+  "description": "Title widget",
+  "jupyter.lab.toolbars": {
+    "TopBar": [{ "name": "widgetTitle", "rank": 10 }]
+  },
+  "properties": {},
+  "additionalProperties": false,
+  "type": "object"
+}

package/schema/top.json

@@ -3,6 +3,19 @@
   "jupyter.lab.setting-icon-label": "Jupyter Notebook Top Area",
   "title": "Jupyter Notebook Top Area",
   "description": "Jupyter Notebook Top Area settings",
+  "jupyter.lab.menus": {
+    "main": [
+      {
+        "id": "jp-mainmenu-view",
+        "items": [
+          {
+            "command": "application:toggle-top",
+            "rank": 2
+          }
+        ]
+      }
+    ]
+  },
   "properties": {
     "visible": {
       "type": "boolean",

package/schema/zen.json

@@ -0,0 +1,20 @@
+{
+  "title": "Jupyter Notebook Zen Mode",
+  "description": "Jupyter Notebook Zen Mode",
+  "jupyter.lab.menus": {
+    "main": [
+      {
+        "id": "jp-mainmenu-view",
+        "items": [
+          {
+            "command": "application:toggle-zen",
+            "rank": 3
+          }
+        ]
+      }
+    ]
+  },
+  "properties": {},
+  "additionalProperties": false,
+  "type": "object"
+}

package/style/base.css

@@ -12,3 +12,18 @@
 .jp-MainAreaWidget {
   height: 100%;
 }
+
+.jp-Toolbar > .jp-Toolbar-item {
+  height: unset;
+}
+
+#jp-UserMenu {
+  flex: 0 0 auto;
+  display: flex;
+  text-align: center;
+  margin-top: 8px;
+}
+
+.jp-MimeDocument .jp-RenderedJSON {
+  background: var(--jp-layout-color0);
+}