Add output prompt overlay for toggling scroll mode (jupyterlab#14072)

* Implement output scroll overlay

* Add snapshots for scrolling outputs

* Update Playwright Snapshots

* Update Playwright Snapshots

* Add missing await

* Revert snapshots incorrectly updated by bot

---------

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

galata/test/documentation/commands.test.ts-snapshots/commandsList-documentation-linux.json

@@ -853,20 +853,20 @@
     "shortcuts": []
   },
   {
-    "id": "filebrowser:toggle-hidden-files",
-    "label": "Show Hidden Files",
+    "id": "filebrowser:toggle-file-size",
+    "label": "Show File Size Column",
     "caption": "",
     "shortcuts": []
   },
   {
-    "id": "filebrowser:toggle-last-modified",
-    "label": "Show Last Modified Column",
+    "id": "filebrowser:toggle-hidden-files",
+    "label": "Show Hidden Files",
     "caption": "",
     "shortcuts": []
   },
   {
-    "id": "filebrowser:toggle-file-size",
-    "label": "Show File Size Column",
+    "id": "filebrowser:toggle-last-modified",
+    "label": "Show Last Modified Column",
     "caption": "",
     "shortcuts": []
   },

galata/test/jupyterlab/notebooks/output_scrolling.ipynb

@@ -0,0 +1,96 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "4315a064-fc29-4183-81b6-fdea37c02102",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "line\n",
+      "\n"
+     ]
+    }
+   ],
+   "source": [
+    "print('line\\n' * 20)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "1782c124-9e18-4864-b457-acb7a4186105",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "multiple\n"
+     ]
+    },
+    {
+     "data": {
+      "text/plain": [
+       "'outputs'"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "print('multiple')\n",
+    "'outputs'"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.8.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

galata/test/jupyterlab/output-scrolling.test.ts

@@ -0,0 +1,78 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { test } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+import * as path from 'path';
+
+const fileName = 'output_scrolling.ipynb';
+
+const cellSelector = '[role="main"] >> .jp-NotebookPanel >> .jp-Cell';
+
+test.describe('Output Scrolling', () => {
+  test.beforeEach(async ({ page, tmpPath }) => {
+    await page.contents.uploadFile(
+      path.resolve(__dirname, `./notebooks/${fileName}`),
+      `${tmpPath}/${fileName}`
+    );
+
+    await page.notebook.openByPath(`${tmpPath}/${fileName}`);
+    await page.notebook.activate(fileName);
+  });
+
+  test.afterEach(async ({ page, tmpPath }) => {
+    await page.contents.deleteDirectory(tmpPath);
+  });
+
+  test('Scrolling mode', async ({ page }) => {
+    await page.evaluate(() => {
+      return window.jupyterapp.commands.execute(
+        'notebook:enable-output-scrolling'
+      );
+    });
+    await page.notebook.selectCells(0);
+    await expect(page.locator(`${cellSelector} >> nth=0`)).toHaveClass(
+      /jp-mod-outputsScrolled/
+    );
+
+    const cell = await page.notebook.getCell(0);
+
+    expect(await (await cell.$('.jp-OutputArea')).screenshot()).toMatchSnapshot(
+      'cell-output-area-scrolling-mode.png'
+    );
+
+    await page.evaluate(() => {
+      return window.jupyterapp.commands.execute(
+        'notebook:disable-output-scrolling'
+      );
+    });
+    await expect(page.locator(`${cellSelector} >> nth=0`)).not.toHaveClass(
+      /jp-mod-outputsScrolled/
+    );
+  });
+
+  test('Switching with prompt overlay', async ({ page }) => {
+    await page
+      .locator(`${cellSelector} >> nth=1 >> .jp-OutputArea-promptOverlay`)
+      .hover();
+    const cell = await page.notebook.getCell(1);
+    expect(await cell.screenshot()).toMatchSnapshot(
+      'prompt-overlay-hover-normal.png'
+    );
+    await page.click(
+      `${cellSelector} >> nth=1 >> .jp-OutputArea-promptOverlay`
+    );
+    await expect(page.locator(`${cellSelector} >> nth=1`)).toHaveClass(
+      /jp-mod-outputsScrolled/
+    );
+    expect(await cell.screenshot()).toMatchSnapshot(
+      'prompt-overlay-hover-scroll.png'
+    );
+    await page.click(
+      `${cellSelector} >> nth=1 >> .jp-OutputArea-promptOverlay`
+    );
+    await expect(page.locator(`${cellSelector} >> nth=1`)).not.toHaveClass(
+      /jp-mod-outputsScrolled/
+    );
+  });
+});

packages/cells/src/widget.ts

@@ -980,9 +980,13 @@ export class CodeCell extends Cell<ICodeCellModel> {
       rendermime,
       contentFactory: contentFactory,
       maxNumberOutputs: this.maxNumberOutputs,
-      translator: this.translator
+      translator: this.translator,
+      promptOverlay: true
     }));
     output.addClass(CELL_OUTPUT_AREA_CLASS);
+    output.toggleScrolling.connect(() => {
+      this.outputsScrolled = !this.outputsScrolled;
+    });
 
     // Defer setting placeholder as OutputArea must be instantiated before initializing the DOM
     this.placeholder = options.placeholder ?? true;

packages/outputarea/src/widget.ts

@@ -74,6 +74,11 @@ const STDIN_PROMPT_CLASS = 'jp-Stdin-prompt';
  */
 const STDIN_INPUT_CLASS = 'jp-Stdin-input';
 
+/**
+ * The overlay tha can be clicked to switch between output scrolling modes.
+ */
+const OUTPUT_PROMPT_OVERLAY = 'jp-OutputArea-promptOverlay';
+
 /** ****************************************************************************
  * OutputArea
  ******************************************************************************/
@@ -112,6 +117,9 @@ export class OutputArea extends Widget {
     }
     model.changed.connect(this.onModelChanged, this);
     model.stateChanged.connect(this.onStateChanged, this);
+    if (options.promptOverlay) {
+      this._addPromptOverlay();
+    }
   }
 
   /**
@@ -294,6 +302,27 @@ export class OutputArea extends Widget {
     );
   }
 
+  /**
+   * Emitted when user requests toggling of the output scrolling mode.
+   */
+  get toggleScrolling(): ISignal<OutputArea, void> {
+    return this._toggleScrolling;
+  }
+
+  /**
+   * Add overlay allowing to toggle scrolling.
+   */
+  private _addPromptOverlay() {
+    const overlay = document.createElement('div');
+    overlay.className = OUTPUT_PROMPT_OVERLAY;
+    const trans = this._translator.load('jupyterlab');
+    overlay.title = trans.__('Toggle output scrolling');
+    overlay.addEventListener('click', () => {
+      this._toggleScrolling.emit();
+    });
+    this.node.appendChild(overlay);
+  }
+
   /**
    * Update indices in _displayIdMap in response to element remove from model items
    *
@@ -693,6 +722,7 @@ export class OutputArea extends Widget {
   private _maxNumberOutputs: number;
   private _minHeightTimeout: number | null = null;
   private _inputRequested = new Signal<OutputArea, void>(this);
+  private _toggleScrolling = new Signal<OutputArea, void>(this);
   private _outputTracker = new WidgetTracker<Widget>({
     namespace: UUID.uuid4()
   });
@@ -750,6 +780,11 @@ export namespace OutputArea {
      */
     maxNumberOutputs?: number;
 
+    /**
+     * Whether to show prompt overlay emitting `toggleScrolling` signal.
+     */
+    promptOverlay?: boolean;
+
     /**
      * Translator
      */

packages/outputarea/style/base.css

@@ -59,6 +59,23 @@
   -ms-user-select: text;
 }
 
+/**
+ * Prompt overlay.
+ */
+
+.jp-OutputArea-promptOverlay {
+  position: absolute;
+  top: 0;
+  width: var(--jp-cell-prompt-width);
+  height: 100%;
+  opacity: 0.5;
+}
+
+.jp-OutputArea-promptOverlay:hover {
+  background: var(--jp-layout-color2);
+  box-shadow: inset 0 0 1px var(--jp-inverse-layout-color0);
+}
+
 /**
  * Isolated output.
  */