From bbf90c57f337c1df37a48bedecfcdc72dbb72aee Mon Sep 17 00:00:00 2001 From: Nicolas Brichet <32258950+brichet@users.noreply.github.com> Date: Wed, 10 Apr 2024 23:02:47 +0200 Subject: [PATCH] Move the cell toolbar widget from the cell to the cell input (#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 7e964e48e543ba8e5f75dc0cfc2783163c04fa70. * Revert "Update snapshots" This reverts commit cf1fad0d8218f900dde93f85df42133f4d044828. * Add a note in the extension migration guide --- docs/source/extension/extension_migration.rst | 3 +++ .../jupyterlab/collapsible-headings.test.ts | 24 ++++++++++++++----- galata/test/jupyterlab/debugger.test.ts | 3 +++ .../cell-toolbar/src/celltoolbartracker.ts | 13 +++++++--- packages/cell-toolbar/style/base.css | 2 +- 5 files changed, 35 insertions(+), 10 deletions(-) diff --git a/docs/source/extension/extension_migration.rst b/docs/source/extension/extension_migration.rst index d5bca93cdacc..695ff5c1ce78 100644 --- 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 index dd989f2ff4d4..c55cab42c8ea 100644 --- a/galata/test/jupyterlab/collapsible-headings.test.ts +++ b/galata/test/jupyterlab/collapsible-headings.test.ts @@ -40,7 +40,9 @@ 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'); @@ -48,8 +50,12 @@ test.describe('Collapsible Headings; showHCB', () => { 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,7 +95,9 @@ 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'); @@ -97,8 +105,12 @@ test.describe('Collapsible Headings; no_showHCB', () => { 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 index 51b00b119039..c4d142e5bd09 100644 --- 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 index 4a11549e710a..764acd1f111a 100644 --- 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): 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 index 66d79e3d7284..20c4e10f1465 100644 --- 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;