Move the cell toolbar widget from the cell to the cell input (jupyter…

…lab#15422) * Move the cell toolbar widget from the cell to the cell input * Fix collapsing-headings test * After rebase: check the correct parent to dispose toolbar * Update snapshots * Fix debbuger test, it was not able to properly click in cell editor * Fix the logic to hide the toolbar * Revert snapshots * Revert "Revert snapshots" This reverts commit 7e964e4. * Revert "Update snapshots" This reverts commit cf1fad0. * Add a note in the extension migration guide
krassowski · Apr 10, 2024 · bbf90c5 · bbf90c5
1 parent 5cfcae1
commit bbf90c5
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/docs/source/extension/extension_migration.rst b/docs/source/extension/extension_migration.rst
@@ -27,6 +27,9 @@ API updates
   The ``@jupyterlab/apputils-extension:workspaces`` plugin now only defines the
   workspace MIME type renderer used to open files with ``.jupyterlab-workspace``
   extension as JupyterLab workspaces.
+- The cell toolbar node has been moved from the cell node to the cell input node.
+  Therefore the parent of the cell toolbar has changed and can not be used directly to
+  retrieve the corresponding cell node anymore.
 
 Shortcuts extension rework
 ^^^^^^^^^^^^^^^^^^^^^^^^^^

diff --git a/galata/test/jupyterlab/collapsible-headings.test.ts b/galata/test/jupyterlab/collapsible-headings.test.ts
@@ -40,16 +40,22 @@ test.describe('Collapsible Headings; showHCB', () => {
 
   test('Collapse Heading; showHCB', async ({ page }) => {
     await page.notebook.selectCells(0);
-    await page.click('text=# Heading 1Heading 1¶ >> button');
+    await page.click(
+      'text=# Heading 1Heading 1¶ >> button.jp-collapseHeadingButton'
+    );
     expect(
       await (await page.notebook.getNotebookInPanelLocator())!.screenshot()
     ).toMatchSnapshot('showHCB_collapse_heading.png');
   });
 
   test('Expand Heading via Collapser Button; showHCB', async ({ page }) => {
     await page.notebook.selectCells(0);
-    await page.click('text=# Heading 1Heading 1¶ >> button');
-    await page.click('text=# Heading 1Heading 1¶ >> button');
+    await page.click(
+      'text=# Heading 1Heading 1¶ >> button.jp-collapseHeadingButton'
+    );
+    await page.click(
+      'text=# Heading 1Heading 1¶ >> button.jp-collapseHeadingButton'
+    );
     expect(
       await (await page.notebook.getNotebookInPanelLocator())!.screenshot()
     ).toMatchSnapshot('showHCB_expand_heading_via_collapser.png');
@@ -89,16 +95,22 @@ test.describe('Collapsible Headings; no_showHCB', () => {
 
   test('Collapse Heading; no_showHCB', async ({ page }) => {
     await page.notebook.selectCells(0);
-    await page.click('text=# Heading 1Heading 1¶ >> button');
+    await page.click(
+      'text=# Heading 1Heading 1¶ >> button.jp-collapseHeadingButton'
+    );
     expect(
       await (await page.notebook.getNotebookInPanelLocator())!.screenshot()
     ).toMatchSnapshot('no_showHCB_collapse_heading.png');
   });
 
   test('Expand Heading via Collapser Button; no_showHCB', async ({ page }) => {
     await page.notebook.selectCells(0);
-    await page.click('text=# Heading 1Heading 1¶ >> button');
-    await page.click('text=# Heading 1Heading 1¶ >> button');
+    await page.click(
+      'text=# Heading 1Heading 1¶ >> button.jp-collapseHeadingButton'
+    );
+    await page.click(
+      'text=# Heading 1Heading 1¶ >> button.jp-collapseHeadingButton'
+    );
     expect(
       await (await page.notebook.getNotebookInPanelLocator())!.screenshot()
     ).toMatchSnapshot('no_showHCB_expand_heading_via_collapser.png');

diff --git a/galata/test/jupyterlab/debugger.test.ts b/galata/test/jupyterlab/debugger.test.ts
@@ -319,6 +319,9 @@ async function createNotebook(page: IJupyterLabPageFixture) {
 }
 
 async function setBreakpoint(page: IJupyterLabPageFixture) {
+  // Close left side panel to avoid side effect when entering the cell editor.
+  await page.sidebar.close('left');
+
   await page.notebook.setCell(
     0,
     'code',

diff --git a/packages/cell-toolbar/src/celltoolbartracker.ts b/packages/cell-toolbar/src/celltoolbartracker.ts
@@ -193,6 +193,7 @@ export class CellToolbarTracker implements IDisposable {
           }
         }
       }
+      promises.push(cell.ready);
 
       // Wait for all the buttons to be rendered before attaching the toolbar.
       Promise.all(promises)
@@ -202,7 +203,10 @@ export class CellToolbarTracker implements IDisposable {
             return;
           }
 
-          (cell.layout as PanelLayout).insertWidget(0, toolbarWidget);
+          (cell.inputArea!.layout as PanelLayout).insertWidget(
+            0,
+            toolbarWidget
+          );
 
           // For rendered markdown, watch for resize events.
           cell.displayChanged.connect(this._resizeEventCallback, this);
@@ -230,7 +234,10 @@ export class CellToolbarTracker implements IDisposable {
       cell.displayChanged.disconnect(this._resizeEventCallback, this);
     }
     model.contentChanged.disconnect(this._changedEventCallback, this);
-    if (this._toolbar?.parent === cell && this._toolbar?.isDisposed === false) {
+    if (
+      this._toolbar?.parent === cell?.inputArea &&
+      this._toolbar?.isDisposed === false
+    ) {
       this._toolbar.dispose();
     }
   }
@@ -414,7 +421,7 @@ export class CellToolbarTracker implements IDisposable {
   }
 
   private _cellToolbarRect(activeCell: Cell<ICellModel>): DOMRect | null {
-    if (this._toolbar?.parent !== activeCell) {
+    if (this._toolbar?.parent !== activeCell.inputArea) {
       return null;
     }
     const activeCellToolbar = this._toolbar.node;

diff --git a/packages/cell-toolbar/style/base.css b/packages/cell-toolbar/style/base.css
@@ -22,7 +22,7 @@
   min-height: 25px;
   z-index: 6;
   position: absolute;
-  right: 8px;
+  right: 3px;
 
   /* Override .jp-Toolbar */
   background-color: transparent;