xtralab 0.15.3 → 0.15.4

package/lib/git/diffScrollbar.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Horizontal scrollbars for the diff panes, shown in a bar the host pins to
+ * the bottom of the view. A pane is as tall as the whole diff, so its own
+ * scrollbar sits below the last line.
+ */
+export declare class DiffScrollbar {
+    constructor(bar: HTMLElement);
+    /**
+     * Match the tracks to the panes rendered in the `diffs-container`.
+     */
+    sync(container: Element | null): void;
+    /**
+     * Remove the tracks and stop observing the panes.
+     */
+    dispose(): void;
+    private _createTrack;
+    private _clear;
+    private _measure;
+    private _bar;
+    private _resizeObserver;
+    private _tracks;
+}

package/lib/git/diffScrollbar.js

@@ -0,0 +1,82 @@
+/**
+ * Copy the horizontal scroll position; the 1px tolerance stops the echo
+ * between a pane and its track.
+ */
+function mirrorScroll(from, to) {
+    if (Math.abs(to.scrollLeft - from.scrollLeft) >= 1) {
+        to.scrollLeft = from.scrollLeft;
+    }
+}
+/**
+ * Horizontal scrollbars for the diff panes, shown in a bar the host pins to
+ * the bottom of the view. A pane is as tall as the whole diff, so its own
+ * scrollbar sits below the last line.
+ */
+export class DiffScrollbar {
+    constructor(bar) {
+        this._tracks = [];
+        this._bar = bar;
+        this._resizeObserver = new ResizeObserver(() => this._measure());
+    }
+    /**
+     * Match the tracks to the panes rendered in the `diffs-container`.
+     */
+    sync(container) {
+        var _a, _b;
+        const panes = Array.from((_b = (_a = container === null || container === void 0 ? void 0 : container.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-code]')) !== null && _b !== void 0 ? _b : []);
+        const unchanged = panes.length === this._tracks.length &&
+            panes.every((pane, index) => pane === this._tracks[index].pane);
+        if (!unchanged) {
+            this._clear();
+            this._tracks = panes.map(pane => this._createTrack(pane));
+        }
+        // The Pierre themes give the diff its own background color.
+        this._bar.style.backgroundColor =
+            container === null ? '' : getComputedStyle(container).backgroundColor;
+        this._measure();
+    }
+    /**
+     * Remove the tracks and stop observing the panes.
+     */
+    dispose() {
+        this._clear();
+    }
+    _createTrack(pane) {
+        const track = document.createElement('div');
+        track.className = 'jp-xtralab-DiffWidget-scrollbarTrack';
+        track.tabIndex = -1;
+        const spacer = document.createElement('div');
+        track.appendChild(spacer);
+        const onPaneScroll = () => mirrorScroll(pane, track);
+        pane.addEventListener('scroll', onPaneScroll, { passive: true });
+        track.addEventListener('scroll', () => mirrorScroll(track, pane), {
+            passive: true
+        });
+        this._resizeObserver.observe(pane);
+        this._bar.appendChild(track);
+        return { pane, track, spacer, onPaneScroll };
+    }
+    _clear() {
+        this._resizeObserver.disconnect();
+        for (const { pane, onPaneScroll } of this._tracks) {
+            pane.removeEventListener('scroll', onPaneScroll);
+        }
+        this._tracks = [];
+        this._bar.replaceChildren();
+    }
+    _measure() {
+        const sizes = this._tracks.map(({ pane }) => ({
+            width: pane.getBoundingClientRect().width,
+            range: Math.max(0, pane.scrollWidth - pane.clientWidth)
+        }));
+        this._tracks.forEach(({ track, spacer }, index) => {
+            const { width, range } = sizes[index];
+            track.style.width = `${width}px`;
+            spacer.style.width = `${width + range}px`;
+        });
+        this._bar.hidden = !sizes.some(({ range }) => range > 0);
+        for (const { pane, track } of this._tracks) {
+            mirrorScroll(pane, track);
+        }
+    }
+}

package/lib/git/diffSurface.js

@@ -6,7 +6,8 @@ import { diffAcceptRejectHunk, parseDiffFromFile } from '@pierre/diffs';
 import { ImageDiffView, imageDataType } from './imageDiff';
 import { buildNotebookDiff, NotebookDiffView } from './notebookDiff';
 import { DEFAULT_SPLIT_RATIO, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO } from './diffPreferences';
-import { DIFF_SCROLLBAR_CSS, resolveDiffTheme } from './diffTheme';
+import { DiffScrollbar } from './diffScrollbar';
+import { DIFF_HIDDEN_SCROLLBAR_CSS, resolveDiffTheme } from './diffTheme';
 export const DIFF_WIDGET_CSS_CLASS = 'jp-xtralab-DiffWidget';
 /**
  * Injected via the `unsafeCSS` option into the shadow root's `@layer
@@ -17,7 +18,7 @@ export const DIFF_WIDGET_CSS_CLASS = 'jp-xtralab-DiffWidget';
 const SPLIT_RESIZE_CSS = `pre[data-diff-type="split"][data-overflow="scroll"] {
   grid-template-columns: var(--xtralab-split-cols, 1fr 1fr);
 }`;
-const DIFF_SURFACE_CSS = `${SPLIT_RESIZE_CSS}\n${DIFF_SCROLLBAR_CSS}`;
+const DIFF_SURFACE_CSS = `${SPLIT_RESIZE_CSS}\n${DIFF_HIDDEN_SCROLLBAR_CSS}`;
 /**
  * Extension-only check; a false positive is harmless because
  * {@link buildNotebookDiff} validates the JSON and the file diff is the fallback.
@@ -97,6 +98,27 @@ export function DiffSurface(props) {
     React.useEffect(() => {
         leftRatioRef.current = leftRatio;
     }, [leftRatio]);
+    const scrollbarNodeRef = React.useRef(null);
+    const scrollbarRef = React.useRef(null);
+    React.useEffect(() => {
+        var _a, _b;
+        const node = scrollbarNodeRef.current;
+        if (node === null) {
+            return;
+        }
+        const scrollbar = new DiffScrollbar(node);
+        scrollbarRef.current = scrollbar;
+        // The library's first render ran before this effect.
+        scrollbar.sync((_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('diffs-container')) !== null && _b !== void 0 ? _b : null);
+        return () => {
+            scrollbarRef.current = null;
+            scrollbar.dispose();
+        };
+    }, [showFileDiff]);
+    const handlePostRender = React.useCallback((container) => {
+        var _a;
+        (_a = scrollbarRef.current) === null || _a === void 0 ? void 0 : _a.sync(container);
+    }, []);
     const canDiscardHunk = (hunkDiscard === null || hunkDiscard === void 0 ? void 0 : hunkDiscard.enabled) === true;
     const lineAnnotations = React.useMemo(() => {
         if (!canDiscardHunk || metadata === null) {
@@ -231,25 +253,28 @@ export function DiffSurface(props) {
     };
     return (React.createElement("div", { className: "jp-xtralab-DiffWidget-content" },
         React.createElement("div", { ref: wrapperRef, className: "jp-xtralab-DiffWidget-body" },
-            React.createElement("div", { className: "jp-xtralab-DiffWidget-scroll" }, showNotebookView && notebookDiff !== null ? (React.createElement(NotebookDiffView, { diff: notebookDiff, dark: dark, pierreTheme: pierreTheme, rendermime: rendermime, trans: trans })) : showFileDiff && metadata !== null ? (React.createElement(FileDiff, { fileDiff: metadata, lineAnnotations: lineAnnotations, renderAnnotation: renderAnnotation, style: hostStyle, 
-                // JupyterLab's federation pipeline can't serve the worker bundle
-                // at a resolvable URL, so the pool crashes; run on the main thread.
-                disableWorkerPool: true, options: {
-                    diffStyle,
-                    overflow: lineWrap ? 'wrap' : 'scroll',
-                    disableFileHeader: true,
-                    theme: resolveDiffTheme(dark, pierreTheme),
-                    themeType: dark ? 'dark' : 'light',
-                    // Constant string lets the library skip its unsafeCSS re-render path.
-                    unsafeCSS: DIFF_SURFACE_CSS,
-                    ...(onLineAsk !== undefined
-                        ? {
-                            enableLineSelection: true,
-                            enableGutterUtility: true,
-                            onGutterUtilityClick: handleGutterUtilityClick
-                        }
-                        : {})
-                } })) : null),
+            React.createElement("div", { className: "jp-xtralab-DiffWidget-scroll" },
+                showNotebookView && notebookDiff !== null ? (React.createElement(NotebookDiffView, { diff: notebookDiff, dark: dark, pierreTheme: pierreTheme, rendermime: rendermime, trans: trans })) : showFileDiff && metadata !== null ? (React.createElement(FileDiff, { fileDiff: metadata, lineAnnotations: lineAnnotations, renderAnnotation: renderAnnotation, style: hostStyle, 
+                    // JupyterLab's federation pipeline can't serve the worker bundle
+                    // at a resolvable URL, so the pool crashes; run on the main thread.
+                    disableWorkerPool: true, options: {
+                        diffStyle,
+                        overflow: lineWrap ? 'wrap' : 'scroll',
+                        disableFileHeader: true,
+                        theme: resolveDiffTheme(dark, pierreTheme),
+                        themeType: dark ? 'dark' : 'light',
+                        // Constant string lets the library skip its unsafeCSS re-render path.
+                        unsafeCSS: DIFF_SURFACE_CSS,
+                        onPostRender: handlePostRender,
+                        ...(onLineAsk !== undefined
+                            ? {
+                                enableLineSelection: true,
+                                enableGutterUtility: true,
+                                onGutterUtilityClick: handleGutterUtilityClick
+                            }
+                            : {})
+                    } })) : null,
+                showFileDiff ? (React.createElement("div", { ref: scrollbarNodeRef, className: "jp-xtralab-DiffWidget-scrollbar", "aria-hidden": "true" })) : null),
             showResizer ? (React.createElement("div", { className: "jp-xtralab-DiffWidget-resizer", style: { left: `${leftPercent}%` }, role: "separator", "aria-orientation": "vertical", "aria-valuenow": Math.round(leftPercent), "aria-valuemin": Math.round(MIN_SPLIT_RATIO * 100), "aria-valuemax": Math.round(MAX_SPLIT_RATIO * 100), "aria-label": trans.__('Resize the diff panes'), tabIndex: 0, title: trans.__('Drag to resize the diff panes (double-click to reset)'), onPointerDown: handleResizerPointerDown, onDoubleClick: handleResizerDoubleClick, onKeyDown: handleResizerKeyDown })) : null)));
 }
 /**

package/lib/git/diffTheme.d.ts

@@ -6,6 +6,11 @@ import { type DiffsThemeNames } from '@pierre/diffs';
  * app scrollbars in chrome.css.
  */
 export declare const DIFF_SCROLLBAR_CSS = ":host {\n  --diffs-scrollbar-gutter-override: 10px;\n  --xtralab-diff-scrollbar-thumb: color-mix(in srgb, var(--jp-ui-font-color1) 28%, transparent);\n}\n[data-code]::-webkit-scrollbar-thumb {\n  background-color: var(--xtralab-diff-scrollbar-thumb);\n  border-width: 2px;\n  border-radius: 999px;\n}\n[data-code]::-webkit-scrollbar-thumb:hover {\n  background-color: color-mix(in srgb, var(--jp-ui-font-color1) 45%, transparent);\n}\n@supports (-moz-appearance: none) {\n  [data-code] {\n    scrollbar-color: var(--xtralab-diff-scrollbar-thumb) transparent;\n  }\n}";
+/**
+ * `unsafeCSS` that hides the pane scrollbars, for hosts that show a
+ * `DiffScrollbar` instead.
+ */
+export declare const DIFF_HIDDEN_SCROLLBAR_CSS = ":host {\n  --diffs-scrollbar-gutter-override: 0px;\n}\n[data-code] {\n  scrollbar-width: none;\n}";
 /**
  * Choose Pierre's palette or the JupyterLab CSS-variable theme.
  */

package/lib/git/diffTheme.js

@@ -43,6 +43,16 @@ export const DIFF_SCROLLBAR_CSS = `:host {
     scrollbar-color: var(--xtralab-diff-scrollbar-thumb) transparent;
   }
 }`;
+/**
+ * `unsafeCSS` that hides the pane scrollbars, for hosts that show a
+ * `DiffScrollbar` instead.
+ */
+export const DIFF_HIDDEN_SCROLLBAR_CSS = `:host {
+  --diffs-scrollbar-gutter-override: 0px;
+}
+[data-code] {
+  scrollbar-width: none;
+}`;
 /**
  * Choose Pierre's palette or the JupyterLab CSS-variable theme.
  */

package/lib/terminalNotifications/index.d.ts

@@ -3,7 +3,8 @@ import { JupyterFrontEndPlugin } from '@jupyterlab/application';
  * Turns the OSC 9 / OSC 777 / bell sequences agents emit into desktop
  * notifications via `window.xtralab.notify` (desktop) or the web Notifications
  * API — JupyterLab's xterm renders them but never forwards them to the OS.
- * The desktop shell advertises `TERM_PROGRAM=iTerm.app` so agents emit OSC 9.
+ * The server extension sets `TERM_PROGRAM=iTerm.app` in terminals so agents
+ * emit OSC 9.
  */
 declare const plugin: JupyterFrontEndPlugin<void>;
 export default plugin;

package/lib/terminalNotifications/index.js

@@ -1,3 +1,4 @@
+import { Notification as LabNotification } from '@jupyterlab/apputils';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ITerminalTracker } from '@jupyterlab/terminal';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
@@ -15,7 +16,8 @@ const MAX_TEXT_LENGTH = 256;
  * Turns the OSC 9 / OSC 777 / bell sequences agents emit into desktop
  * notifications via `window.xtralab.notify` (desktop) or the web Notifications
  * API — JupyterLab's xterm renders them but never forwards them to the OS.
- * The desktop shell advertises `TERM_PROGRAM=iTerm.app` so agents emit OSC 9.
+ * The server extension sets `TERM_PROGRAM=iTerm.app` in terminals so agents
+ * emit OSC 9.
  */
 const plugin = {
     id: PLUGIN_ID,
@@ -31,6 +33,52 @@ const plugin = {
         const lastNotified = new WeakMap();
         const hooks = new WeakMap();
         const isActivelyViewing = (widget) => document.hasFocus() && app.shell.currentWidget === widget;
+        // `terminal:open` activates the session's tab or reopens the session.
+        const focusTerminal = (session) => {
+            if (session) {
+                void app.commands.execute('terminal:open', { name: session });
+            }
+        };
+        const showWebNotification = (title, body, session) => {
+            // The constructor throws where only service workers may notify (Chrome
+            // on Android).
+            try {
+                const notification = new Notification(title, { body });
+                notification.onclick = () => {
+                    window.focus();
+                    focusTerminal(session);
+                    notification.close();
+                };
+            }
+            catch (reason) {
+                console.warn('xtralab: web notification failed', reason);
+            }
+        };
+        // Browsers only show the permission prompt from a user gesture (Firefox
+        // and Safari drop the request otherwise), which a terminal sequence is
+        // not: offer it once per page in a toast, whose button click is one.
+        let permissionOffered = false;
+        const offerWebNotifications = (title, body, session) => {
+            if (permissionOffered) {
+                return;
+            }
+            permissionOffered = true;
+            LabNotification.info(trans.__('A terminal sent a notification. Allow notifications in the browser to see them outside of this tab.'), {
+                autoClose: false,
+                actions: [
+                    {
+                        label: trans.__('Allow notifications'),
+                        callback: () => {
+                            void Notification.requestPermission().then(permission => {
+                                if (permission === 'granted') {
+                                    showWebNotification(title, body, session);
+                                }
+                            });
+                        }
+                    }
+                ]
+            });
+        };
         const deliver = (title, body, session) => {
             const bridge = window.xtralab;
             if (bridge && typeof bridge.notify === 'function') {
@@ -43,14 +91,10 @@ const plugin = {
                 return;
             }
             if (Notification.permission === 'granted') {
-                new Notification(title, { body });
+                showWebNotification(title, body, session);
             }
             else if (Notification.permission !== 'denied') {
-                void Notification.requestPermission().then(permission => {
-                    if (permission === 'granted') {
-                        new Notification(title, { body });
-                    }
-                });
+                offerWebNotifications(title, body, session);
             }
         };
         const notify = (widget, title, body) => {
@@ -137,14 +181,10 @@ const plugin = {
         tracker.forEach(hookWidget);
         tracker.widgetAdded.connect((_, widget) => hookWidget(widget));
         // Focus the terminal that fired a notification when the desktop shell
-        // reports a click. `terminal:open` activates its tab or reopens the session.
+        // reports a click.
         const desktopBridge = window
             .xtralab;
-        (_a = desktopBridge === null || desktopBridge === void 0 ? void 0 : desktopBridge.onFocusTerminal) === null || _a === void 0 ? void 0 : _a.call(desktopBridge, session => {
-            if (session) {
-                void app.commands.execute('terminal:open', { name: session });
-            }
-        });
+        (_a = desktopBridge === null || desktopBridge === void 0 ? void 0 : desktopBridge.onFocusTerminal) === null || _a === void 0 ? void 0 : _a.call(desktopBridge, focusTerminal);
         if (settingRegistry) {
             try {
                 const settings = await settingRegistry.load(PLUGIN_ID);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xtralab",
-    "version": "0.15.3",
+    "version": "0.15.4",
     "description": "An opinionated JupyterLab meta-package that bundles a curated set of extensions, ships a path-first file browser, renders jupyterlab-git's text, notebook and image diffs with its own viewers, and applies a quieter default workspace configuration.",
     "keywords": [
         "jupyter",

package/src/git/diffScrollbar.ts

@@ -0,0 +1,103 @@
+/**
+ * One mirrored diff pane: the library's scroller and its track in the bar.
+ */
+interface IPaneTrack {
+  pane: HTMLElement;
+  track: HTMLElement;
+  spacer: HTMLElement;
+  onPaneScroll: () => void;
+}
+
+/**
+ * Copy the horizontal scroll position; the 1px tolerance stops the echo
+ * between a pane and its track.
+ */
+function mirrorScroll(from: HTMLElement, to: HTMLElement): void {
+  if (Math.abs(to.scrollLeft - from.scrollLeft) >= 1) {
+    to.scrollLeft = from.scrollLeft;
+  }
+}
+
+/**
+ * Horizontal scrollbars for the diff panes, shown in a bar the host pins to
+ * the bottom of the view. A pane is as tall as the whole diff, so its own
+ * scrollbar sits below the last line.
+ */
+export class DiffScrollbar {
+  constructor(bar: HTMLElement) {
+    this._bar = bar;
+    this._resizeObserver = new ResizeObserver(() => this._measure());
+  }
+
+  /**
+   * Match the tracks to the panes rendered in the `diffs-container`.
+   */
+  sync(container: Element | null): void {
+    const panes = Array.from(
+      container?.shadowRoot?.querySelectorAll<HTMLElement>('[data-code]') ?? []
+    );
+    const unchanged =
+      panes.length === this._tracks.length &&
+      panes.every((pane, index) => pane === this._tracks[index].pane);
+    if (!unchanged) {
+      this._clear();
+      this._tracks = panes.map(pane => this._createTrack(pane));
+    }
+    // The Pierre themes give the diff its own background color.
+    this._bar.style.backgroundColor =
+      container === null ? '' : getComputedStyle(container).backgroundColor;
+    this._measure();
+  }
+
+  /**
+   * Remove the tracks and stop observing the panes.
+   */
+  dispose(): void {
+    this._clear();
+  }
+
+  private _createTrack(pane: HTMLElement): IPaneTrack {
+    const track = document.createElement('div');
+    track.className = 'jp-xtralab-DiffWidget-scrollbarTrack';
+    track.tabIndex = -1;
+    const spacer = document.createElement('div');
+    track.appendChild(spacer);
+    const onPaneScroll = (): void => mirrorScroll(pane, track);
+    pane.addEventListener('scroll', onPaneScroll, { passive: true });
+    track.addEventListener('scroll', () => mirrorScroll(track, pane), {
+      passive: true
+    });
+    this._resizeObserver.observe(pane);
+    this._bar.appendChild(track);
+    return { pane, track, spacer, onPaneScroll };
+  }
+
+  private _clear(): void {
+    this._resizeObserver.disconnect();
+    for (const { pane, onPaneScroll } of this._tracks) {
+      pane.removeEventListener('scroll', onPaneScroll);
+    }
+    this._tracks = [];
+    this._bar.replaceChildren();
+  }
+
+  private _measure(): void {
+    const sizes = this._tracks.map(({ pane }) => ({
+      width: pane.getBoundingClientRect().width,
+      range: Math.max(0, pane.scrollWidth - pane.clientWidth)
+    }));
+    this._tracks.forEach(({ track, spacer }, index) => {
+      const { width, range } = sizes[index];
+      track.style.width = `${width}px`;
+      spacer.style.width = `${width + range}px`;
+    });
+    this._bar.hidden = !sizes.some(({ range }) => range > 0);
+    for (const { pane, track } of this._tracks) {
+      mirrorScroll(pane, track);
+    }
+  }
+
+  private _bar: HTMLElement;
+  private _resizeObserver: ResizeObserver;
+  private _tracks: IPaneTrack[] = [];
+}

package/src/git/diffSurface.tsx

@@ -30,7 +30,8 @@ import {
   type ImageDiffViewMode,
   type NotebookDiffViewMode
 } from './diffPreferences';
-import { DIFF_SCROLLBAR_CSS, resolveDiffTheme } from './diffTheme';
+import { DiffScrollbar } from './diffScrollbar';
+import { DIFF_HIDDEN_SCROLLBAR_CSS, resolveDiffTheme } from './diffTheme';
 
 export const DIFF_WIDGET_CSS_CLASS = 'jp-xtralab-DiffWidget';
 
@@ -44,7 +45,7 @@ const SPLIT_RESIZE_CSS = `pre[data-diff-type="split"][data-overflow="scroll"] {
   grid-template-columns: var(--xtralab-split-cols, 1fr 1fr);
 }`;
 
-const DIFF_SURFACE_CSS = `${SPLIT_RESIZE_CSS}\n${DIFF_SCROLLBAR_CSS}`;
+const DIFF_SURFACE_CSS = `${SPLIT_RESIZE_CSS}\n${DIFF_HIDDEN_SCROLLBAR_CSS}`;
 
 /**
  * Annotation payload threaded back into `renderAnnotation`; carries the target hunk index.
@@ -290,6 +291,29 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
     leftRatioRef.current = leftRatio;
   }, [leftRatio]);
 
+  const scrollbarNodeRef = React.useRef<HTMLDivElement | null>(null);
+  const scrollbarRef = React.useRef<DiffScrollbar | null>(null);
+  React.useEffect(() => {
+    const node = scrollbarNodeRef.current;
+    if (node === null) {
+      return;
+    }
+    const scrollbar = new DiffScrollbar(node);
+    scrollbarRef.current = scrollbar;
+    // The library's first render ran before this effect.
+    scrollbar.sync(
+      wrapperRef.current?.querySelector('diffs-container') ?? null
+    );
+    return () => {
+      scrollbarRef.current = null;
+      scrollbar.dispose();
+    };
+  }, [showFileDiff]);
+
+  const handlePostRender = React.useCallback((container: HTMLElement) => {
+    scrollbarRef.current?.sync(container);
+  }, []);
+
   const canDiscardHunk = hunkDiscard?.enabled === true;
 
   const lineAnnotations = React.useMemo<
@@ -530,6 +554,7 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
                 themeType: dark ? 'dark' : 'light',
                 // Constant string lets the library skip its unsafeCSS re-render path.
                 unsafeCSS: DIFF_SURFACE_CSS,
+                onPostRender: handlePostRender,
                 ...(onLineAsk !== undefined
                   ? {
                       enableLineSelection: true,
@@ -540,6 +565,13 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
               }}
             />
           ) : null}
+          {showFileDiff ? (
+            <div
+              ref={scrollbarNodeRef}
+              className="jp-xtralab-DiffWidget-scrollbar"
+              aria-hidden="true"
+            />
+          ) : null}
         </div>
         {showResizer ? (
           <div

package/src/git/diffTheme.ts

@@ -50,6 +50,17 @@ export const DIFF_SCROLLBAR_CSS = `:host {
   }
 }`;
 
+/**
+ * `unsafeCSS` that hides the pane scrollbars, for hosts that show a
+ * `DiffScrollbar` instead.
+ */
+export const DIFF_HIDDEN_SCROLLBAR_CSS = `:host {
+  --diffs-scrollbar-gutter-override: 0px;
+}
+[data-code] {
+  scrollbar-width: none;
+}`;
+
 /**
  * Choose Pierre's palette or the JupyterLab CSS-variable theme.
  */

package/src/terminalNotifications/index.ts

@@ -2,6 +2,7 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
+import { Notification as LabNotification } from '@jupyterlab/apputils';
 import type { MainAreaWidget } from '@jupyterlab/apputils';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ITerminal, ITerminalTracker } from '@jupyterlab/terminal';
@@ -92,7 +93,8 @@ interface IDesktopBridge {
  * Turns the OSC 9 / OSC 777 / bell sequences agents emit into desktop
  * notifications via `window.xtralab.notify` (desktop) or the web Notifications
  * API — JupyterLab's xterm renders them but never forwards them to the OS.
- * The desktop shell advertises `TERM_PROGRAM=iTerm.app` so agents emit OSC 9.
+ * The server extension sets `TERM_PROGRAM=iTerm.app` in terminals so agents
+ * emit OSC 9.
  */
 const plugin: JupyterFrontEndPlugin<void> = {
   id: PLUGIN_ID,
@@ -118,6 +120,67 @@ const plugin: JupyterFrontEndPlugin<void> = {
     const isActivelyViewing = (widget: TerminalWidget): boolean =>
       document.hasFocus() && app.shell.currentWidget === widget;
 
+    // `terminal:open` activates the session's tab or reopens the session.
+    const focusTerminal = (session?: string): void => {
+      if (session) {
+        void app.commands.execute('terminal:open', { name: session });
+      }
+    };
+
+    const showWebNotification = (
+      title: string,
+      body: string,
+      session?: string
+    ): void => {
+      // The constructor throws where only service workers may notify (Chrome
+      // on Android).
+      try {
+        const notification = new Notification(title, { body });
+        notification.onclick = () => {
+          window.focus();
+          focusTerminal(session);
+          notification.close();
+        };
+      } catch (reason) {
+        console.warn('xtralab: web notification failed', reason);
+      }
+    };
+
+    // Browsers only show the permission prompt from a user gesture (Firefox
+    // and Safari drop the request otherwise), which a terminal sequence is
+    // not: offer it once per page in a toast, whose button click is one.
+    let permissionOffered = false;
+    const offerWebNotifications = (
+      title: string,
+      body: string,
+      session?: string
+    ): void => {
+      if (permissionOffered) {
+        return;
+      }
+      permissionOffered = true;
+      LabNotification.info(
+        trans.__(
+          'A terminal sent a notification. Allow notifications in the browser to see them outside of this tab.'
+        ),
+        {
+          autoClose: false,
+          actions: [
+            {
+              label: trans.__('Allow notifications'),
+              callback: () => {
+                void Notification.requestPermission().then(permission => {
+                  if (permission === 'granted') {
+                    showWebNotification(title, body, session);
+                  }
+                });
+              }
+            }
+          ]
+        }
+      );
+    };
+
     const deliver = (title: string, body: string, session?: string): void => {
       const bridge = (window as Window & { xtralab?: IDesktopBridge }).xtralab;
       if (bridge && typeof bridge.notify === 'function') {
@@ -132,13 +195,9 @@ const plugin: JupyterFrontEndPlugin<void> = {
         return;
       }
       if (Notification.permission === 'granted') {
-        new Notification(title, { body });
+        showWebNotification(title, body, session);
       } else if (Notification.permission !== 'denied') {
-        void Notification.requestPermission().then(permission => {
-          if (permission === 'granted') {
-            new Notification(title, { body });
-          }
-        });
+        offerWebNotifications(title, body, session);
       }
     };
 
@@ -245,14 +304,10 @@ const plugin: JupyterFrontEndPlugin<void> = {
     tracker.widgetAdded.connect((_, widget) => hookWidget(widget));
 
     // Focus the terminal that fired a notification when the desktop shell
-    // reports a click. `terminal:open` activates its tab or reopens the session.
+    // reports a click.
     const desktopBridge = (window as Window & { xtralab?: IDesktopBridge })
       .xtralab;
-    desktopBridge?.onFocusTerminal?.(session => {
-      if (session) {
-        void app.commands.execute('terminal:open', { name: session });
-      }
-    });
+    desktopBridge?.onFocusTerminal?.(focusTerminal);
 
     if (settingRegistry) {
       try {

package/style/git.css

@@ -49,6 +49,75 @@
   overflow: auto;
 }
 
+/*
+ * Stays at the bottom of the view while the diff scrolls under it.
+ */
+.jp-xtralab-DiffWidget-scrollbar {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+}
+
+.jp-xtralab-DiffWidget-scrollbar[hidden] {
+  display: none;
+}
+
+/*
+ * `auto` opts out of the thin app scrollbars in chrome.css, which hide
+ * themselves where the system uses overlay scrollbars.
+ */
+body[data-jp-theme-light] .jp-xtralab-DiffWidget-scrollbarTrack {
+  flex: none;
+  height: 10px;
+  overflow: auto hidden;
+  overscroll-behavior-x: none;
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+}
+
+.jp-xtralab-DiffWidget-scrollbarTrack > div {
+  height: 1px;
+}
+
+.jp-xtralab-DiffWidget-scrollbarTrack::-webkit-scrollbar {
+  height: 10px;
+}
+
+.jp-xtralab-DiffWidget-scrollbarTrack::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.jp-xtralab-DiffWidget-scrollbarTrack::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-color: color-mix(
+    in srgb,
+    var(--jp-ui-font-color1) 28%,
+    transparent
+  );
+  background-clip: content-box;
+}
+
+.jp-xtralab-DiffWidget-scrollbarTrack::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-ui-font-color1) 45%,
+    transparent
+  );
+}
+
+@supports (-moz-appearance: none) {
+  body[data-jp-theme-light] .jp-xtralab-DiffWidget-scrollbarTrack {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(
+        in srgb,
+        var(--jp-ui-font-color1) 28%,
+        transparent
+      )
+      transparent;
+  }
+}
+
 .jp-xtralab-DiffWidget-viewModeToolbarItem,
 .jp-xtralab-DiffWidget-diffStyleToolbarItem,
 .jp-xtralab-DiffWidget-lineWrapToolbarItem {