diff --git a/galata/test/documentation/commands.test.ts-snapshots/commandsList-documentation-linux.json b/galata/test/documentation/commands.test.ts-snapshots/commandsList-documentation-linux.json index 505aee20c919..b8e78db5ce8c 100644 --- a/galata/test/documentation/commands.test.ts-snapshots/commandsList-documentation-linux.json +++ b/galata/test/documentation/commands.test.ts-snapshots/commandsList-documentation-linux.json @@ -109,15 +109,15 @@ "id": "application:toggle-side-tabbar", "label": "Show Left Activity Bar", "caption": "", - "shortcuts": [ - "Alt 1" - ] + "shortcuts": [] }, { "id": "application:toggle-sidebar-widget", "label": "Toggle Sidebar Element", "caption": "", - "shortcuts": [] + "shortcuts": [ + "Alt 1" + ] }, { "id": "apputils:activate-command-palette", @@ -367,6 +367,12 @@ "caption": "", "shortcuts": [] }, + { + "id": "console:redo", + "label": "Redo", + "caption": "", + "shortcuts": [] + }, { "id": "console:replace-selection", "label": "Replace Selection in Console", @@ -413,6 +419,12 @@ "caption": "", "shortcuts": [] }, + { + "id": "console:undo", + "label": "Undo", + "caption": "", + "shortcuts": [] + }, { "id": "csv:go-to-line", "label": "Go to Line", diff --git a/galata/test/documentation/custom_css.test.ts-snapshots/custom-css-main-documentation-linux.png b/galata/test/documentation/custom_css.test.ts-snapshots/custom-css-main-documentation-linux.png index 7462910c79a0..458246c5aa9e 100644 Binary files a/galata/test/documentation/custom_css.test.ts-snapshots/custom-css-main-documentation-linux.png and b/galata/test/documentation/custom_css.test.ts-snapshots/custom-css-main-documentation-linux.png differ diff --git a/galata/test/documentation/customization.test.ts-snapshots/customized-menu-bar-documentation-linux.png b/galata/test/documentation/customization.test.ts-snapshots/customized-menu-bar-documentation-linux.png index 74757be7bfed..f5393a27506c 100644 Binary files a/galata/test/documentation/customization.test.ts-snapshots/customized-menu-bar-documentation-linux.png and b/galata/test/documentation/customization.test.ts-snapshots/customized-menu-bar-documentation-linux.png differ diff --git a/galata/test/documentation/customization.test.ts-snapshots/customized-terminal-position-single-documentation-linux.png b/galata/test/documentation/customization.test.ts-snapshots/customized-terminal-position-single-documentation-linux.png index 9802e71cc01d..aa8ea2b0faee 100644 Binary files a/galata/test/documentation/customization.test.ts-snapshots/customized-terminal-position-single-documentation-linux.png and b/galata/test/documentation/customization.test.ts-snapshots/customized-terminal-position-single-documentation-linux.png differ diff --git a/galata/test/documentation/customization.test.ts-snapshots/default-menu-bar-documentation-linux.png b/galata/test/documentation/customization.test.ts-snapshots/default-menu-bar-documentation-linux.png index 56724ca682a0..38dbc82568b4 100644 Binary files a/galata/test/documentation/customization.test.ts-snapshots/default-menu-bar-documentation-linux.png and b/galata/test/documentation/customization.test.ts-snapshots/default-menu-bar-documentation-linux.png differ diff --git a/galata/test/documentation/customization.test.ts-snapshots/default-terminal-position-single-documentation-linux.png b/galata/test/documentation/customization.test.ts-snapshots/default-terminal-position-single-documentation-linux.png index b2fa65aa0553..436fe73e80b6 100644 Binary files a/galata/test/documentation/customization.test.ts-snapshots/default-terminal-position-single-documentation-linux.png and b/galata/test/documentation/customization.test.ts-snapshots/default-terminal-position-single-documentation-linux.png differ diff --git a/galata/test/documentation/general.test.ts-snapshots/file-editor-settings-documentation-linux.png b/galata/test/documentation/general.test.ts-snapshots/file-editor-settings-documentation-linux.png index 22cbcd405b22..ce9f6b2e9041 100644 Binary files a/galata/test/documentation/general.test.ts-snapshots/file-editor-settings-documentation-linux.png and b/galata/test/documentation/general.test.ts-snapshots/file-editor-settings-documentation-linux.png differ diff --git a/galata/test/documentation/general.test.ts-snapshots/interface-left-documentation-linux.png b/galata/test/documentation/general.test.ts-snapshots/interface-left-documentation-linux.png index a1caca96293a..2d10e646f7c6 100644 Binary files a/galata/test/documentation/general.test.ts-snapshots/interface-left-documentation-linux.png and b/galata/test/documentation/general.test.ts-snapshots/interface-left-documentation-linux.png differ diff --git a/galata/test/documentation/general.test.ts-snapshots/jupyterlab-documentation-linux.png b/galata/test/documentation/general.test.ts-snapshots/jupyterlab-documentation-linux.png index 87154cafe5eb..6df46045c0c3 100644 Binary files a/galata/test/documentation/general.test.ts-snapshots/jupyterlab-documentation-linux.png and b/galata/test/documentation/general.test.ts-snapshots/jupyterlab-documentation-linux.png differ diff --git a/galata/test/documentation/general.test.ts-snapshots/terminal-layout-documentation-linux.png b/galata/test/documentation/general.test.ts-snapshots/terminal-layout-documentation-linux.png index 5bdab0d63245..e12eeeca926e 100644 Binary files a/galata/test/documentation/general.test.ts-snapshots/terminal-layout-documentation-linux.png and b/galata/test/documentation/general.test.ts-snapshots/terminal-layout-documentation-linux.png differ diff --git a/galata/test/documentation/internationalization.test.ts-snapshots/language-chinese-documentation-linux.png b/galata/test/documentation/internationalization.test.ts-snapshots/language-chinese-documentation-linux.png index 03542ba99af0..954b7d9f100d 100644 Binary files a/galata/test/documentation/internationalization.test.ts-snapshots/language-chinese-documentation-linux.png and b/galata/test/documentation/internationalization.test.ts-snapshots/language-chinese-documentation-linux.png differ diff --git a/galata/test/documentation/internationalization.test.ts-snapshots/language-settings-documentation-linux.png b/galata/test/documentation/internationalization.test.ts-snapshots/language-settings-documentation-linux.png index 713e443e161e..2ee66a43f5c1 100644 Binary files a/galata/test/documentation/internationalization.test.ts-snapshots/language-settings-documentation-linux.png and b/galata/test/documentation/internationalization.test.ts-snapshots/language-settings-documentation-linux.png differ diff --git a/galata/test/documentation/overview.test.ts-snapshots/interface-jupyterlab-documentation-linux.png b/galata/test/documentation/overview.test.ts-snapshots/interface-jupyterlab-documentation-linux.png index 90fdecd90f92..b0f4af7d4882 100644 Binary files a/galata/test/documentation/overview.test.ts-snapshots/interface-jupyterlab-documentation-linux.png and b/galata/test/documentation/overview.test.ts-snapshots/interface-jupyterlab-documentation-linux.png differ diff --git a/galata/test/documentation/overview.test.ts-snapshots/interface-tabs-menu-documentation-linux.png b/galata/test/documentation/overview.test.ts-snapshots/interface-tabs-menu-documentation-linux.png index 2ea87fc4f735..dab3321a4a5a 100644 Binary files a/galata/test/documentation/overview.test.ts-snapshots/interface-tabs-menu-documentation-linux.png and b/galata/test/documentation/overview.test.ts-snapshots/interface-tabs-menu-documentation-linux.png differ diff --git a/galata/test/galata/notebook.spec.ts-snapshots/example-run-galata-linux.png b/galata/test/galata/notebook.spec.ts-snapshots/example-run-galata-linux.png index 74c9ea0c43db..e9ed7fa08624 100644 Binary files a/galata/test/galata/notebook.spec.ts-snapshots/example-run-galata-linux.png and b/galata/test/galata/notebook.spec.ts-snapshots/example-run-galata-linux.png differ diff --git a/galata/test/jupyterlab/general.test.ts-snapshots/dark-theme-jupyterlab-linux.png b/galata/test/jupyterlab/general.test.ts-snapshots/dark-theme-jupyterlab-linux.png index 04d8416c230f..05e5c7096689 100644 Binary files a/galata/test/jupyterlab/general.test.ts-snapshots/dark-theme-jupyterlab-linux.png and b/galata/test/jupyterlab/general.test.ts-snapshots/dark-theme-jupyterlab-linux.png differ diff --git a/galata/test/jupyterlab/general.test.ts-snapshots/launch-jupyterlab-linux.png b/galata/test/jupyterlab/general.test.ts-snapshots/launch-jupyterlab-linux.png index 4085a129b53d..733630215648 100644 Binary files a/galata/test/jupyterlab/general.test.ts-snapshots/launch-jupyterlab-linux.png and b/galata/test/jupyterlab/general.test.ts-snapshots/launch-jupyterlab-linux.png differ diff --git a/galata/test/jupyterlab/general.test.ts-snapshots/simple-mode-jupyterlab-linux.png b/galata/test/jupyterlab/general.test.ts-snapshots/simple-mode-jupyterlab-linux.png index d3dc1c84fddf..394cc88ed602 100644 Binary files a/galata/test/jupyterlab/general.test.ts-snapshots/simple-mode-jupyterlab-linux.png and b/galata/test/jupyterlab/general.test.ts-snapshots/simple-mode-jupyterlab-linux.png differ diff --git a/galata/test/jupyterlab/sidebars.test.ts b/galata/test/jupyterlab/sidebars.test.ts index 5220d82fdcac..18df486b249c 100644 --- a/galata/test/jupyterlab/sidebars.test.ts +++ b/galata/test/jupyterlab/sidebars.test.ts @@ -1,9 +1,12 @@ // Copyright (c) Jupyter Development Team. // Distributed under the terms of the Modified BSD License. -import { expect, galata, Handle, test } from '@jupyterlab/galata'; +import { expect, galata, test } from '@jupyterlab/galata'; + import { Locator } from '@playwright/test'; +import * as path from 'path'; + const sidebarIds: galata.SidebarTabId[] = [ 'filebrowser', 'jp-property-inspector', @@ -12,6 +15,16 @@ const sidebarIds: galata.SidebarTabId[] = [ 'extensionmanager.main-view' ]; +const testFileName = 'simple.md'; +const testNotebook = 'simple_notebook.ipynb'; +const testFolderName = 'test-folder'; + +const sidebarWidths = { + small: 226, + medium: 308, + large: 371 +}; + /** * Add provided text as label on first tab in given tabbar. * By default we only have icons, but we should test for the @@ -26,6 +39,10 @@ async function mockLabelOnFirstTab(tabbar: Locator, text: string) { }, text); } +test.use({ + tmpPath: 'test-sidebars' +}); + test.describe('Sidebars', () => { sidebarIds.forEach(sidebarId => { test(`Open Sidebar tab ${sidebarId}`, async ({ page }) => { @@ -61,7 +78,6 @@ test.describe('Sidebars', () => { await page.notebook.createNew('notebook.ipynb'); const unusedRules = await page.style.findUnusedStyleRules({ - page, fragments: ['jp-DirListing', 'jp-FileBrowser'], exclude: [ // active during renaming @@ -199,3 +215,46 @@ test.describe('Sidebars', () => { expect(tableOfContentsElementRole).toEqual('region'); }); }); + +test.describe('Sidebar filebrowser', () => { + test.beforeEach(async ({ page, request, tmpPath }) => { + const contents = galata.newContentsHelper(request); + // Make each of these files a day old, so they show as 1 day old in the browser. + await galata.Mock.freezeContentLastModified(page); + + // Create some dummy content + await contents.uploadFile( + path.resolve(__dirname, `./notebooks/${testNotebook}`), + `${tmpPath}/${testNotebook}` + ); + await contents.uploadFile( + path.resolve(__dirname, `./notebooks/${testFileName}`), + `${tmpPath}/${testFileName}` + ); + // Create a dummy folder + await contents.createDirectory(`${tmpPath}/${testFolderName}`); + }); + + test.afterEach(async ({ request, tmpPath }) => { + // Clean up the test files + const contents = galata.newContentsHelper(request); + await contents.deleteDirectory(tmpPath); + }); + + // Additional test cases for resized widths of the file browser + for (const [sizeName, size] of Object.entries(sidebarWidths)) { + test(`size ${sizeName}`, async ({ page }) => { + await page.sidebar.openTab('filebrowser'); + // Resize the sidebar to the desired width. + await page.sidebar.setWidth(size, 'left'); + const imageName = `opened-sidebar-filebrowser-${sizeName}.png`; + const position = await page.sidebar.getTabPosition('filebrowser'); + const sidebar = page.sidebar.getContentPanelLocator( + position ?? undefined + ); + expect(await sidebar.screenshot()).toMatchSnapshot( + imageName.toLowerCase() + ); + }); + } +}); diff --git a/galata/test/jupyterlab/sidebars.test.ts-snapshots/filebrowser-right-jupyterlab-linux.png b/galata/test/jupyterlab/sidebars.test.ts-snapshots/filebrowser-right-jupyterlab-linux.png index 1a6749018238..707ea6afcef3 100644 Binary files a/galata/test/jupyterlab/sidebars.test.ts-snapshots/filebrowser-right-jupyterlab-linux.png and b/galata/test/jupyterlab/sidebars.test.ts-snapshots/filebrowser-right-jupyterlab-linux.png differ diff --git a/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-jupyterlab-linux.png b/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-jupyterlab-linux.png index 8a15efe768b1..a0d46a379b86 100644 Binary files a/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-jupyterlab-linux.png and b/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-jupyterlab-linux.png differ diff --git a/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-large-jupyterlab-linux.png b/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-large-jupyterlab-linux.png new file mode 100644 index 000000000000..c499e95808fa Binary files /dev/null and b/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-large-jupyterlab-linux.png differ diff --git a/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-medium-jupyterlab-linux.png b/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-medium-jupyterlab-linux.png new file mode 100644 index 000000000000..c93dc37fb0ec Binary files /dev/null and b/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-medium-jupyterlab-linux.png differ diff --git a/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-small-jupyterlab-linux.png b/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-small-jupyterlab-linux.png new file mode 100644 index 000000000000..1290d60c2405 Binary files /dev/null and b/galata/test/jupyterlab/sidebars.test.ts-snapshots/opened-sidebar-filebrowser-small-jupyterlab-linux.png differ diff --git a/packages/coreutils/src/time.ts b/packages/coreutils/src/time.ts index acb1ae49a33a..30d11897e438 100644 --- a/packages/coreutils/src/time.ts +++ b/packages/coreutils/src/time.ts @@ -17,6 +17,9 @@ const UNITS: { name: Intl.RelativeTimeFormatUnit; milliseconds: number }[] = [ * The namespace for date functions. */ export namespace Time { + // Intl.RelativeTimeFormatStyle contains these, but we can't compile with it yet + export type HumanStyle = 'long' | 'short' | 'narrow'; + /** * Convert a timestring to a human readable string (e.g. 'two minutes ago'). * @@ -24,9 +27,15 @@ export namespace Time { * * @returns A formatted date. */ - export function formatHuman(value: string | Date): string { + export function formatHuman( + value: string | Date, + format: HumanStyle = 'long' + ): string { const lang = document.documentElement.lang || 'en'; - const formatter = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' }); + const formatter = new Intl.RelativeTimeFormat(lang, { + numeric: 'auto', + style: format + }); const delta = new Date(value).getTime() - Date.now(); for (let unit of UNITS) { const amount = Math.ceil(delta / unit.milliseconds); diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index 050a4094e02a..9055d3a82284 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -2297,7 +2297,7 @@ export namespace DirListing { const trans = translator.load('jupyterlab'); const name = this.createHeaderItemNode(trans.__('Name')); const narrow = document.createElement('div'); - const modified = this.createHeaderItemNode(trans.__('Last Modified')); + const modified = this.createHeaderItemNode(trans.__('Modified')); const fileSize = this.createHeaderItemNode(trans.__('File Size')); name.classList.add(NAME_ID_CLASS); name.classList.add(SELECTED_CLASS); @@ -2656,13 +2656,24 @@ export namespace DirListing { checkbox.checked = selected ?? false; } - let modText = ''; + let modHTML = ''; let modTitle = ''; if (model.last_modified) { - modText = Time.formatHuman(new Date(model.last_modified)); + // Provide multiple formats, with container queries used to display exactly one + modHTML = ['narrow', 'short', 'long'] + .map( + style => + `
` + + Time.formatHuman( + new Date(model.last_modified), + style as Time.HumanStyle + ) + + '
' + ) + .join(''); modTitle = Time.format(new Date(model.last_modified)); } - modified.textContent = modText; + modified.innerHTML = modHTML; modified.title = modTitle; } @@ -2732,7 +2743,7 @@ export namespace DirListing { /** * Create a node for a header item. */ - protected createHeaderItemNode(label: string): HTMLElement { + protected createHeaderItemNode(label: string, title?: string): HTMLElement { const node = document.createElement('div'); const text = document.createElement('span'); const icon = document.createElement('span'); @@ -2740,6 +2751,9 @@ export namespace DirListing { text.className = HEADER_ITEM_TEXT_CLASS; icon.className = HEADER_ITEM_ICON_CLASS; text.textContent = label; + if (title) { + text.title = title; + } node.appendChild(text); node.appendChild(icon); return node; diff --git a/packages/filebrowser/style/base.css b/packages/filebrowser/style/base.css index 9247008308ae..ef1f21d5fb6c 100644 --- a/packages/filebrowser/style/base.css +++ b/packages/filebrowser/style/base.css @@ -137,11 +137,11 @@ } .jp-DirListing-headerItem.jp-id-name { - flex: 1 0 84px; + flex: 1 1 126px; } .jp-DirListing-headerItem.jp-id-modified { - flex: 0 0 112px; + flex: 1 0 70px; border-left: var(--jp-border-width) solid var(--jp-border-color2); text-align: right; } @@ -269,7 +269,7 @@ } .jp-DirListing-itemText { - flex: 1 0 64px; + flex: 1 1 106px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -293,9 +293,65 @@ outline: 0; } +/* This file uses container queries, which are supported by all the + * browsers that JupyterLab works with, but which stylelint cannot + * validate. + */ + .jp-DirListing-itemModified { - flex: 0 0 125px; + flex: 1 0 83px; text-align: right; + /* stylelint-disable */ + container-type: inline-size; + /* stylelint-enable */ +} + +/* stylelint-disable */ +@container (width < 90px) { + /* stylelint-enable */ + .jp-DirListing-itemModified-narrow { + display: block; + } + + .jp-DirListing-itemModified-short { + display: none; + } + + .jp-DirListing-itemModified-long { + display: none; + } +} + +/* stylelint-disable */ +@container (width >= 90px) and (width <= 110px) { + /* stylelint-enable */ + .jp-DirListing-itemModified-narrow { + display: none; + } + + .jp-DirListing-itemModified-short { + display: block; + } + + .jp-DirListing-itemModified-long { + display: none; + } +} + +/* stylelint-disable */ +@container (width > 110px) { + /* stylelint-enable */ + .jp-DirListing-itemModified-narrow { + display: none; + } + + .jp-DirListing-itemModified-short { + display: none; + } + + .jp-DirListing-itemModified-long { + display: block; + } } .jp-DirListing-itemFileSize {