Enable full notebook windowing mode by default (jupyterlab#15964)

* Enable `full` windowing mode by default

* Use `none` mode for mermaid snapshots tests

* Account for the windowed scrollbar button

* Do not capture the full main area in galata notebook tests

it does not make much sense, especially for cells; instead,
capture the notebook itself. Add a new test for saving,
because that was implicitly tested by `Run Cells` test
(and is not anymore). Of note, one of the tests,
`Open and run cell by cell` is still taking a snapshot
of the entire panel; this is intentional - we do want
one snapshot to be more encompassing (but not all of them!).

* Update the debugger button sizing

* Only capture notebook content in custom CSS test of headings

as the toolbar is irrelevant for the snapshot of headings!

* Only capture the main area for altair and html docs snapshots

The rest of the UI does not really matter on these snapshots
and it only makes the content small and hard to read in the docs.

* Update Playwright Snapshots

* Update Playwright Snapshots

* Fix toolbar test (account for the scrollbar button)

* Revert spurious snapshot updates

* Fix missing dot in selector

* Use `none` for collapsible headings test

* Add notebook-tab-saved snapshot

* Fix misplaced config

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

galata/test/documentation/custom_css.test.ts

@@ -46,9 +46,10 @@ test.describe('Use custom CSS layout', () => {
 
     await page.notebook.openByPath(`${tmpPath}/${fileName}`);
     await page.notebook.activate(fileName);
+    const panel = (await page.activity.getPanelLocator())!;
 
-    expect(
-      await (await page.activity.getPanelLocator())?.screenshot()
-    ).toMatchSnapshot('custom-css-notebook-markdown.png');
+    expect(await panel.locator('.jp-Notebook').screenshot()).toMatchSnapshot(
+      'custom-css-notebook-markdown.png'
+    );
   });
 });

galata/test/documentation/debugger.test.ts

@@ -31,7 +31,7 @@ test.describe('Debugger', () => {
 
     expect(
       await page.screenshot({
-        clip: { x: 1030, y: 62, width: 210, height: 32 }
+        clip: { x: 1015, y: 62, width: 225, height: 32 }
       })
     ).toMatchSnapshot('debugger_kernel.png');
   });
@@ -46,7 +46,7 @@ test.describe('Debugger', () => {
     await page.sidebar.setWidth(251, 'right');
 
     expect(
-      await page.screenshot({ clip: { y: 62, x: 780, width: 210, height: 32 } })
+      await page.screenshot({ clip: { y: 62, x: 765, width: 225, height: 32 } })
     ).toMatchSnapshot('debugger_activate.png');
   });
 

galata/test/documentation/general.test.ts

@@ -650,11 +650,6 @@ test.describe('General', () => {
 
   test('HTML Display', async ({ page, tmpPath }) => {
     await page.goto(`tree/${tmpPath}`);
-    await page.addStyleTag({
-      content: `.jp-LabShell.jp-mod-devMode {
-        border-top: none;
-      }`
-    });
 
     // Hide file browser
     await page.click('[title^="File Browser"]');
@@ -675,22 +670,21 @@ test.describe('General', () => {
 
     await page.click('.jp-CodeConsole-input >> .cm-content');
     await page.keyboard.type(
-      "from IPython.display import display, HTML\ndisplay(HTML('<h1>Hello World</h1>'))"
+      "from IPython.display import display, HTML\ndisplay(HTML('<h1>Hello World</h1>'))",
+      {
+        delay: 0
+      }
     );
     await page.keyboard.press('Shift+Enter');
 
-    expect(await page.screenshot()).toMatchSnapshot(
+    const main = page.getByRole('main');
+    expect(await main.screenshot()).toMatchSnapshot(
       'file_formats_html_display.png'
     );
   });
 
   test('Altair', async ({ page, tmpPath }) => {
     await page.goto(`tree/${tmpPath}`);
-    await page.addStyleTag({
-      content: `.jp-LabShell.jp-mod-devMode {
-        border-top: none;
-      }`
-    });
 
     // Hide file browser
     await page.click('[title^="File Browser"]');
@@ -707,8 +701,10 @@ test.describe('General', () => {
     // Need to wait for altair to update the canvas
     await page.locator('summary').waitFor();
 
+    const main = page.getByRole('main');
+
     // The menu button '...' color of Altair is flaky increase threshold tolerance
-    expect(await page.screenshot()).toMatchSnapshot('file_formats_altair.png', {
+    expect(await main.screenshot()).toMatchSnapshot('file_formats_altair.png', {
       threshold: 0.3
     });
   });

galata/test/galata/notebook.spec.ts

@@ -29,10 +29,7 @@ test.describe('Notebook Tests', () => {
       '## This is a markdown cell'
     );
 
-    // Wait for kernel to be idle
-    await page.locator('#jp-main-statusbar').getByText('Idle').waitFor();
-
-    expect(await page.getByRole('main').screenshot()).toMatchSnapshot(
+    expect(await page.locator('.jp-Notebook').screenshot()).toMatchSnapshot(
       'markdown-cell.png'
     );
   });
@@ -45,13 +42,7 @@ test.describe('Notebook Tests', () => {
     expect(await page.notebook.getCellType(1)).toBe('raw');
     expect(await page.notebook.getCellTextInput(1)).toBe('This is a raw cell');
 
-    // Wait for kernel to be idle and the debug switch to appear
-    await Promise.all([
-      page.locator('#jp-main-statusbar').getByText('Idle').waitFor(),
-      page.locator('.jp-DebuggerBugButton').waitFor()
-    ]);
-
-    expect(await page.getByRole('main').screenshot()).toMatchSnapshot(
+    expect(await page.locator('.jp-Notebook').screenshot()).toMatchSnapshot(
       'raw-cell.png'
     );
   });
@@ -64,10 +55,7 @@ test.describe('Notebook Tests', () => {
     expect(await page.notebook.getCellType(1)).toBe('code');
     expect(await page.notebook.getCellTextInput(1)).toBe('2 + 2');
 
-    // Wait for kernel to be idle
-    await page.locator('#jp-main-statusbar').getByText('Idle').waitFor();
-
-    expect(await page.getByRole('main').screenshot()).toMatchSnapshot(
+    expect(await page.locator('.jp-Notebook').screenshot()).toMatchSnapshot(
       'code-cell.png'
     );
   });
@@ -87,15 +75,31 @@ test.describe('Notebook Tests', () => {
     await page.notebook.addCell('code', '2 + 2');
 
     await page.notebook.run();
-    await page.notebook.save();
 
     expect((await page.notebook.getCellTextOutput(2))![0]).toBe('4');
 
-    expect(await page.getByRole('main').screenshot()).toMatchSnapshot(
+    expect(await page.locator('.jp-Notebook').screenshot()).toMatchSnapshot(
       'run-cells.png'
     );
   });
 
+  test('Save', async ({ page }) => {
+    await page.notebook.createNew();
+
+    await page.notebook.setCell(0, 'markdown', '## This is a markdown cell');
+
+    const tabList = page.getByRole('main').getByRole('tablist');
+    const notSavedIndicator = tabList.locator('.jp-mod-dirty');
+    await expect(notSavedIndicator).toHaveCount(1);
+
+    await page.notebook.save();
+    await expect(notSavedIndicator).toHaveCount(0);
+
+    expect(await tabList.screenshot()).toMatchSnapshot(
+      'notebook-tab-saved.png'
+    );
+  });
+
   test('Open and run cell by cell', async ({ page, tmpPath }) => {
     await page.contents.uploadDirectory(
       path.resolve(__dirname, './notebooks'),
@@ -123,6 +127,11 @@ test.describe('Notebook Tests', () => {
 
     const panel = await page.activity.getPanelLocator();
 
+    // Note: this should be the only test taking the screenshot
+    // of the full panel; all other tests should take snapshots
+    // of individual notebook parts to avoid the need to review
+    // multiple snapshots when some minor change is introduced
+    // in the UI (e.g. in the toolbar).
     expect(await panel!.screenshot()).toMatchSnapshot('example-run.png');
   });
 

galata/test/jupyterlab/collapsible-headings.test.ts

@@ -124,6 +124,17 @@ test.describe('Collapsible Headings; keyboard navigation', () => {
     await page.notebook.run();
   });
 
+  // use non-standard showHiddenCellsButton=false
+  test.use({
+    mockSettings: {
+      ...galata.DEFAULT_SETTINGS,
+      '@jupyterlab/notebook-extension:tracker': {
+        // `ReExpand Headers 01` is flaky in full windowing mode
+        windowingMode: 'none'
+      }
+    }
+  });
+
   test('Jump to Previous Header', async ({ page }) => {
     await page.notebook.selectCells(6);
     await page.keyboard.press('ArrowLeft');

galata/test/jupyterlab/notebook-mermaid-diagrams.test.ts

@@ -7,6 +7,18 @@ import { Locator } from '@playwright/test';
 
 const fileName = 'mermaid_diagrams.ipynb';
 
+test.use({
+  mockSettings: {
+    ...galata.DEFAULT_SETTINGS,
+    '@jupyterlab/notebook-extension:tracker': {
+      ...galata.DEFAULT_SETTINGS['@jupyterlab/notebook-extension:tracker'],
+      // Do not use windowing as it simplifies the test as we do not
+      // need to scroll the notebook before calling `output.waitFor()`.
+      windowingMode: 'none'
+    }
+  }
+});
+
 const EXPECTED_MERMAID_ORDER = [
   'flowchart',
   'sequence',

galata/test/jupyterlab/notebook-toolbar.test.ts

@@ -206,7 +206,7 @@ test.describe('Reactive toolbar', () => {
     page
   }) => {
     const toolbar = page.locator('.jp-NotebookPanel-toolbar');
-    await expect(toolbar.locator('.jp-Toolbar-item:visible')).toHaveCount(14);
+    await expect(toolbar.locator('.jp-Toolbar-item:visible')).toHaveCount(15);
     await expect(
       toolbar.locator('.jp-Toolbar-responsive-opener')
     ).not.toBeVisible();
@@ -236,12 +236,13 @@ test.describe('Reactive toolbar', () => {
       'body > .jp-Toolbar-responsive-popup:visible'
     );
     const popupToolbarItems = popupToolbar.locator('.jp-Toolbar-item:visible');
-    await expect(popupToolbarItems).toHaveCount(3);
+    await expect(popupToolbarItems).toHaveCount(4);
 
     const itemChildClasses = [
       '.jp-DebuggerBugButton',
       '.jp-Toolbar-kernelName',
-      '.jp-Notebook-ExecutionIndicator'
+      '.jp-Notebook-ExecutionIndicator',
+      '[data-command="notebook:toggle-virtual-scrollbar"]'
     ];
 
     for (let i = 0; i < (await popupToolbarItems.count()); i++) {

packages/notebook-extension/schema/tracker.json

@@ -817,7 +817,7 @@
       "title": "Windowing mode",
       "description": "'defer': Improve loading time - Wait for idle CPU cycles to attach out of viewport cells - 'full': Best performance with side effects - Attach to the DOM only cells in viewport - 'none': Worst performance without side effects - Attach all cells to the viewport",
       "enum": ["defer", "full", "none"],
-      "default": "defer"
+      "default": "full"
     },
     "accessKernelHistory": {
       "title": "Kernel history access",