diff --git a/packages/application-extension/src/index.ts b/packages/application-extension/src/index.ts index 9fd0bb3f..d85a7911 100644 --- a/packages/application-extension/src/index.ts +++ b/packages/application-extension/src/index.ts @@ -527,11 +527,16 @@ const topVisibility: JupyterFrontEndPlugin = { menu.viewMenu.addGroup([{ command: CommandIDs.toggleTop }], 2); } + let settingsOverride = false; + if (settingRegistry) { const loadSettings = settingRegistry.load(pluginId); const updateSettings = (settings: ISettingRegistry.ISettings): void => { - const visible = settings.get('visible').composite as boolean; - top.setHidden(!visible); + const visible = settings.get('visible').composite; + if (settings.user.visible !== undefined) { + settingsOverride = true; + top.setHidden(!visible); + } }; Promise.all([loadSettings, app.restored]) @@ -547,6 +552,9 @@ const topVisibility: JupyterFrontEndPlugin = { } const onChanged = (): void => { + if (settingsOverride) { + return; + } if (app.format === 'desktop') { retroShell.expandTop(); } else { @@ -556,7 +564,6 @@ const topVisibility: JupyterFrontEndPlugin = { // listen on format change (mobile and desktop) to make the view more compact app.formatChanged.connect(onChanged); - onChanged(); }, autoStart: true }; diff --git a/packages/application/src/app.ts b/packages/application/src/app.ts index 7bba90ce..25a3d4e9 100644 --- a/packages/application/src/app.ts +++ b/packages/application/src/app.ts @@ -37,7 +37,7 @@ export class RetroApp extends JupyterFrontEnd { this.registerPlugin(plugin); } } - void this._formatter.invoke(); + this.restored.then(() => this._formatter.invoke()); } /** diff --git a/packages/notebook-extension/src/index.ts b/packages/notebook-extension/src/index.ts index b08f4c87..5ea0e39c 100644 --- a/packages/notebook-extension/src/index.ts +++ b/packages/notebook-extension/src/index.ts @@ -158,8 +158,13 @@ const kernelLogo: JupyterFrontEndPlugin = { const kernelStatus: JupyterFrontEndPlugin = { id: '@retrolab/notebook-extension:kernel-status', autoStart: true, - requires: [IRetroShell], - activate: (app: JupyterFrontEnd, shell: IRetroShell) => { + requires: [IRetroShell, ITranslator], + activate: ( + app: JupyterFrontEnd, + shell: IRetroShell, + translator: ITranslator + ) => { + const trans = translator.load('retrolab'); const widget = new Widget(); widget.addClass('jp-RetroKernelStatus'); app.shell.add(widget, 'menu', { rank: 10_010 }); @@ -193,7 +198,7 @@ const kernelStatus: JupyterFrontEndPlugin = { widget.addClass(KERNEL_STATUS_FADE_OUT_CLASS); break; } - widget.node.textContent = text; + widget.node.textContent = trans.__(text); }; const onChange = async () => { diff --git a/ui-tests/test/jupyter_server_config.py b/ui-tests/test/jupyter_server_config.py index f124c6c6..c73e22bd 100644 --- a/ui-tests/test/jupyter_server_config.py +++ b/ui-tests/test/jupyter_server_config.py @@ -1,6 +1,11 @@ +from tempfile import mkdtemp + c.ServerApp.port = 8888 +c.ServerApp.port_retries = 0 +c.ServerApp.open_browser = False + +c.ServerApp.root_dir = mkdtemp(prefix="galata-test-") c.ServerApp.token = "" c.ServerApp.password = "" c.ServerApp.disable_check_xsrf = True -c.ServerApp.open_browser = False c.RetroApp.expose_app_in_browser = True diff --git a/ui-tests/test/mobile.spec.ts b/ui-tests/test/mobile.spec.ts new file mode 100644 index 00000000..d7bdaff9 --- /dev/null +++ b/ui-tests/test/mobile.spec.ts @@ -0,0 +1,54 @@ +// Copyright (c) Jupyter Development Team. +// Distributed under the terms of the Modified BSD License. + +import path from 'path'; + +import { expect } from '@playwright/test'; + +import { test } from './fixtures'; + +test.use({ autoGoto: false, viewport: { width: 512, height: 768 } }); + +test.describe('Mobile', () => { + test('The layout should be more compact on the file browser page', async ({ + page, + tmpPath + }) => { + await page.goto(`tree/${tmpPath}`); + await page.waitForSelector('#top-panel-wrapper', { state: 'hidden' }); + expect(await page.screenshot()).toMatchSnapshot('tree.png'); + }); + + test('The layout should be more compact on the notebook page', async ({ + page, + tmpPath + }) => { + const notebook = 'empty.ipynb'; + await page.contents.uploadFile( + path.resolve(__dirname, `./notebooks/${notebook}`), + `${tmpPath}/${notebook}` + ); + await page.goto(`notebooks/${tmpPath}/${notebook}`); + // TODO: investigate why this does not run the cells in RetroLab + // await page.notebook.run(); + + // wait for the kernel status animations to be finished + await page.waitForSelector('.jp-RetroKernelStatus-fade'); + await page.waitForFunction(() => { + const status = window.document.getElementsByClassName( + 'jp-RetroKernelStatus' + )[0]; + + if (!status) { + return false; + } + + const finished = status?.getAnimations().reduce((prev, curr) => { + return prev && curr.playState === 'finished'; + }, true); + return finished; + }); + + expect(await page.screenshot()).toMatchSnapshot('notebook.png'); + }); +}); diff --git a/ui-tests/test/mobile.spec.ts-snapshots/notebook-chromium-linux.png b/ui-tests/test/mobile.spec.ts-snapshots/notebook-chromium-linux.png new file mode 100644 index 00000000..607e9330 Binary files /dev/null and b/ui-tests/test/mobile.spec.ts-snapshots/notebook-chromium-linux.png differ diff --git a/ui-tests/test/mobile.spec.ts-snapshots/notebook-firefox-linux.png b/ui-tests/test/mobile.spec.ts-snapshots/notebook-firefox-linux.png new file mode 100644 index 00000000..82338d6f Binary files /dev/null and b/ui-tests/test/mobile.spec.ts-snapshots/notebook-firefox-linux.png differ diff --git a/ui-tests/test/mobile.spec.ts-snapshots/tree-chromium-linux.png b/ui-tests/test/mobile.spec.ts-snapshots/tree-chromium-linux.png new file mode 100644 index 00000000..80430721 Binary files /dev/null and b/ui-tests/test/mobile.spec.ts-snapshots/tree-chromium-linux.png differ diff --git a/ui-tests/test/mobile.spec.ts-snapshots/tree-firefox-linux.png b/ui-tests/test/mobile.spec.ts-snapshots/tree-firefox-linux.png new file mode 100644 index 00000000..0a50ac81 Binary files /dev/null and b/ui-tests/test/mobile.spec.ts-snapshots/tree-firefox-linux.png differ diff --git a/ui-tests/test/settings.spec.ts b/ui-tests/test/settings.spec.ts index ff811b8e..20569608 100644 --- a/ui-tests/test/settings.spec.ts +++ b/ui-tests/test/settings.spec.ts @@ -16,15 +16,17 @@ test.describe('Settings', () => { await page.goto(`tree/${tmpPath}`); + await page.waitForSelector('#top-panel', { state: 'visible' }); await page.menu.clickMenuItem(showHeaderPath); + await page.waitForSelector('#top-panel', { state: 'hidden' }); await page.reload({ waitUntil: 'networkidle' }); - await page.menu.getMenuItem(showHeaderPath); expect(await page.screenshot()).toMatchSnapshot('top-hidden.png'); + await page.waitForSelector('#top-panel', { state: 'hidden' }); await page.menu.clickMenuItem(showHeaderPath); + await page.waitForSelector('#top-panel', { state: 'visible' }); await page.reload({ waitUntil: 'networkidle' }); - await page.menu.getMenuItem(showHeaderPath); expect(await page.screenshot()).toMatchSnapshot('top-visible.png'); });