Clean up interface switcher plugin in preparation for release (#6766)

* Clean up interface switcher plugin in preparation for release

* Use caret down icon to be consistent with the "New" dropdown in the tree page

* Update Playwright Snapshots

* Update Playwright Snapshots

* Fix button height of interface switcher

* Update packages/lab-extension/style/base.css

Co-authored-by: Jeremy Tuloup <jeremy.tuloup@gmail.com>

* Update Playwright Snapshots

* Update Playwright Snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Jeremy Tuloup <jeremy.tuloup@gmail.com>

packages/lab-extension/package.json

@@ -50,6 +50,7 @@
     "@jupyterlab/docregistry": "^4.0.0-alpha.20",
     "@jupyterlab/notebook": "^4.0.0-alpha.20",
     "@jupyterlab/translation": "^4.0.0-alpha.20",
+    "@jupyterlab/ui-components": "^4.0.0-alpha.35",
     "@lumino/commands": "^2.0.0-rc.1",
     "@lumino/disposable": "^2.0.0-rc.1"
   },

packages/lab-extension/src/index.ts

@@ -19,6 +19,8 @@ import { Menu, MenuBar } from '@lumino/widgets';
 
 import { INotebookShell } from '@jupyter-notebook/application';
 
+import { caretDownIcon } from '@jupyterlab/ui-components';
+
 /**
  * The command IDs used by the application plugin.
  */
@@ -49,12 +51,11 @@ interface ISwitcherChoice {
 /**
  * A plugin to add custom toolbar items to the notebook page
  */
-const launchButtons: JupyterFrontEndPlugin<void> = {
+const interfaceSwitcher: JupyterFrontEndPlugin<void> = {
   id: '@jupyter-notebook/lab-extension:interface-switcher',
   autoStart: true,
-  requires: [ITranslator],
+  requires: [ITranslator, INotebookTracker],
   optional: [
-    INotebookTracker,
     ICommandPalette,
     INotebookShell,
     ILabShell,
@@ -63,17 +64,12 @@ const launchButtons: JupyterFrontEndPlugin<void> = {
   activate: (
     app: JupyterFrontEnd,
     translator: ITranslator,
-    notebookTracker: INotebookTracker | null,
+    notebookTracker: INotebookTracker,
     palette: ICommandPalette | null,
     notebookShell: INotebookShell | null,
     labShell: ILabShell | null,
     toolbarRegistry: IToolbarWidgetRegistry | null
   ) => {
-    if (!notebookTracker) {
-      // to prevent showing the toolbar button in non-notebook pages
-      return;
-    }
-
     const { commands, shell } = app;
     const baseUrl = PageConfig.getBaseUrl();
     const trans = translator.load('notebook');
@@ -83,6 +79,7 @@ const launchButtons: JupyterFrontEndPlugin<void> = {
     const menubar = new MenuBar(overflowOptions);
     const switcher = new Menu({ commands });
     switcher.title.label = trans.__('Interface');
+    switcher.title.icon = caretDownIcon;
     menubar.addMenu(switcher);
 
     const isEnabled = () => {
@@ -182,7 +179,7 @@ const launchNotebookTree: JupyterFrontEndPlugin<void> = {
  */
 const plugins: JupyterFrontEndPlugin<any>[] = [
   launchNotebookTree,
-  launchButtons
+  interfaceSwitcher
 ];
 
 export default plugins;

packages/lab-extension/style/base.css

@@ -9,3 +9,7 @@
   align-items: center;
   justify-content: center;
 }
+
+.jp-InterfaceSwitcher .lm-MenuBar-itemIcon svg {
+  vertical-align: sub;
+}

packages/tree-extension/style/base.css

@@ -13,7 +13,7 @@
 }
 
 .jp-FileBrowser-toolbar button.jp-ToolbarButtonComponent {
-  height: 100%;
+  height: var(--jp-flat-button-height);
 }
 
 .jp-FileBrowser-filterBox {