Backport PR jupyterlab#11291 on branch 3.2.x (Fix for terminal theme style) (jupyterlab#11360)

* Backport PR jupyterlab#11291: Fix for terminal theme style

* [skip ci] Remove export debugger helpers

* Remove import debugger helper

Co-authored-by: Piyush Jain <[email protected]>
Co-authored-by: Frédéric Collonval <[email protected]>

Author: 3 people

galata/test/jupyterlab/menus.test.ts-snapshots/opened-menu-settings-jupyterlab-theme-jupyterlab-linux.png renamed to galata/test/jupyterlab/menus.test.ts-snapshots/opened-menu-settings-theme-jupyterlab-linux.png

@@ -0,0 +1,59 @@
+import { test } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+
+test.describe('Terminal Tests', () => {
+  test.describe('Open Terminal', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.menu.clickMenuItem('File>New>Terminal');
+      await page.sidebar.openTab('jp-running-sessions');
+      await page.sidebar.getTab('jp-running-sessions');
+      const content = await page.sidebar.getContentPanel('left');
+      await page.waitForSelector(
+        'span.jp-RunningSessions-itemLabel:has-text("terminals")'
+      );
+      await (
+        await content.$(
+          'span.jp-RunningSessions-itemLabel:has-text("terminals")'
+        )
+      ).click();
+
+      await page.waitForSelector('div.xterm-viewport');
+    });
+
+    test('Light theme terminal inherit', async ({ page }) => {
+      expect(await page.screenshot()).toMatchSnapshot('light-term-inherit.png');
+    });
+
+    test('Light theme terminal light', async ({ page }) => {
+      await page.menu.clickMenuItem('Settings>Terminal Theme>Light');
+      await page.menu.closeAll();
+      expect(await page.screenshot()).toMatchSnapshot('light-term-light.png');
+    });
+
+    test('Light theme terminal dark', async ({ page }) => {
+      await page.menu.clickMenuItem('Settings>Terminal Theme>Dark');
+      await page.menu.closeAll();
+      expect(await page.screenshot()).toMatchSnapshot('light-term-dark.png');
+    });
+
+    test('Dark theme terminal inherit', async ({ page }) => {
+      await page.theme.setDarkTheme();
+      await page.menu.closeAll();
+      expect(await page.screenshot()).toMatchSnapshot('dark-term-inherit.png');
+    });
+
+    test('Dark theme terminal light', async ({ page }) => {
+      await page.theme.setDarkTheme();
+      await page.menu.clickMenuItem('Settings>Terminal Theme>Light');
+      await page.menu.closeAll();
+      expect(await page.screenshot()).toMatchSnapshot('dark-term-light.png');
+    });
+
+    test('Dark theme terminal dark', async ({ page }) => {
+      await page.theme.setDarkTheme();
+      await page.menu.clickMenuItem('Settings>Terminal Theme>Dark');
+      await page.menu.closeAll();
+      expect(await page.screenshot()).toMatchSnapshot('dark-term-dark.png');
+    });
+  });
+});

galata/test/jupyterlab/terminal.test.ts

@@ -58,6 +58,8 @@ export class Terminal extends Widget implements ITerminal.ITerminal {
 
     this.addClass(TERMINAL_CLASS);
 
+    this._setThemeAttribute(theme);
+
     // Create the xterm.
     this._term = new Xterm(xtermOptions);
     this._fitAddon = new FitAddon();
@@ -78,6 +80,17 @@ export class Terminal extends Widget implements ITerminal.ITerminal {
     }
   }
 
+  private _setThemeAttribute(theme: string | null | undefined) {
+    if (this.isDisposed) {
+      return;
+    }
+
+    this.node.setAttribute(
+      'data-term-theme',
+      theme ? theme.toLowerCase() : 'inherit'
+    );
+  }
+
   private _initialConnection() {
     if (this.isDisposed) {
       return;
@@ -141,6 +154,7 @@ export class Terminal extends Widget implements ITerminal.ITerminal {
           'theme',
           Private.getXTermTheme(value as ITerminal.Theme)
         );
+        this._setThemeAttribute(value as ITerminal.Theme);
         break;
       default:
         this._term.setOption(option, value);

galata/test/jupyterlab/terminal.test.ts-snapshots/dark-term-dark-jupyterlab-linux.png

@@ -11,3 +11,15 @@
 .jp-Terminal-body {
   padding: 8px;
 }
+
+[data-term-theme='inherit'] .xterm .xterm-screen canvas {
+  border: 1px solid var(--jp-layout-color0);
+}
+
+[data-term-theme='light'] .xterm .xterm-screen canvas {
+  border: 1px solid #fff;
+}
+
+[data-term-theme='dark'] .xterm .xterm-screen canvas {
+  border: 1px solid #000;
+}