diff --git a/playwright/e2e/audio-player/audio-player.spec.ts b/playwright/e2e/audio-player/audio-player.spec.ts index 3e5e2ce079..fbbc107ce3 100644 --- a/playwright/e2e/audio-player/audio-player.spec.ts +++ b/playwright/e2e/audio-player/audio-player.spec.ts @@ -92,7 +92,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => { css: ` /* The timestamp is of inconsistent width depending on the time the test runs at */ .mx_MessageTimestamp { - display: none !important; + visibility: hidden; } /* The MAB showing up on hover is not needed for the test */ .mx_MessageActionBar { diff --git a/playwright/e2e/chat-export/html-export.spec.ts b/playwright/e2e/chat-export/html-export.spec.ts index 760d3cc5f1..371111151e 100644 --- a/playwright/e2e/chat-export/html-export.spec.ts +++ b/playwright/e2e/chat-export/html-export.spec.ts @@ -124,11 +124,12 @@ test.describe("HTML Export", () => { const zip = await extractZipFileToPath(zipPath, dirPath); await page.goto(`file://${dirPath}/${Object.keys(zip.files)[0]}/messages.html`); await expect(page).toMatchScreenshot("html-export.png", { - mask: [ - // We need to mask the whole thing because the width of the time part changes - page.locator(".mx_TimelineSeparator"), - page.locator(".mx_MessageTimestamp"), - ], + mask: [page.locator(".mx_TimelineSeparator")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }); }, ); diff --git a/playwright/e2e/editing/editing.spec.ts b/playwright/e2e/editing/editing.spec.ts index 6f8e68bbc3..415bcd1845 100644 --- a/playwright/e2e/editing/editing.spec.ts +++ b/playwright/e2e/editing/editing.spec.ts @@ -138,7 +138,11 @@ test.describe("Editing", () => { // Take a snapshot of the dialog await expect(dialog).toMatchScreenshot("message-edit-history-dialog.png", { - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }); { diff --git a/playwright/e2e/messages/messages.spec.ts b/playwright/e2e/messages/messages.spec.ts index 1a36ac97e9..a5ea38482c 100644 --- a/playwright/e2e/messages/messages.spec.ts +++ b/playwright/e2e/messages/messages.spec.ts @@ -59,9 +59,11 @@ async function editMessage(page: Page, message: Locator, newMsg: string): Promis } const screenshotOptions = (page?: Page) => ({ - mask: page ? [page.locator(".mx_MessageTimestamp")] : undefined, // Hide the jump to bottom button in the timeline to avoid flakiness css: ` + .mx_MessageTimestamp { + visibility: hidden; + } .mx_JumpToBottomButton { display: none !important; } diff --git a/playwright/e2e/modules/custom-component.spec.ts b/playwright/e2e/modules/custom-component.spec.ts index f263ac8b9c..d8f4d4646d 100644 --- a/playwright/e2e/modules/custom-component.spec.ts +++ b/playwright/e2e/modules/custom-component.spec.ts @@ -11,10 +11,12 @@ import fs from "node:fs"; import { test, expect } from "../../element-web-test"; const screenshotOptions = (page: Page) => ({ - mask: [page.locator(".mx_MessageTimestamp")], // Hide the jump to bottom button in the timeline to avoid flakiness // Exclude timestamp and read marker from snapshot css: ` + .mx_MessageTimestamp { + visibility: hidden; + } .mx_JumpToBottomButton { display: none !important; } diff --git a/playwright/e2e/permalinks/permalinks.spec.ts b/playwright/e2e/permalinks/permalinks.spec.ts index 3f6fddbd0d..cd1aa5c42e 100644 --- a/playwright/e2e/permalinks/permalinks.spec.ts +++ b/playwright/e2e/permalinks/permalinks.spec.ts @@ -93,10 +93,12 @@ test.describe("permalinks", () => { getPill(timeline, danielleId); await expect(timeline).toMatchScreenshot("permalink-rendering.png", { - mask: [ - // Exclude timestamps from the snapshot, for consistency. - page.locator(".mx_MessageTimestamp"), - ], + // Exclude timestamps from the snapshot, for consistency. + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }); }); }); diff --git a/playwright/e2e/polls/polls.spec.ts b/playwright/e2e/polls/polls.spec.ts index fc49906b47..f10b46f209 100644 --- a/playwright/e2e/polls/polls.spec.ts +++ b/playwright/e2e/polls/polls.spec.ts @@ -121,7 +121,11 @@ test.describe("Polls", () => { .filter({ hasText: pollParams.title }) .getAttribute("data-scroll-tokens"); await expect(getPollTile(page, pollId)).toMatchScreenshot("Polls_Timeline_tile_no_votes.png", { - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }); // Bot votes 'Maybe' in the poll @@ -293,7 +297,11 @@ test.describe("Polls", () => { await expect(page.locator(".mx_ThreadView")).toMatchScreenshot( "ThreadView_with_a_poll_on_bubble_layout.png", { - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }, ); @@ -303,7 +311,11 @@ test.describe("Polls", () => { await expect(page.locator(".mx_ThreadView")).toMatchScreenshot( "ThreadView_with_a_poll_on_group_layout.png", { - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }, ); diff --git a/playwright/e2e/right-panel/file-panel.spec.ts b/playwright/e2e/right-panel/file-panel.spec.ts index 5a45beb095..5549b2d315 100644 --- a/playwright/e2e/right-panel/file-panel.spec.ts +++ b/playwright/e2e/right-panel/file-panel.spec.ts @@ -126,7 +126,12 @@ test.describe("FilePanel", () => { // Take a snapshot of file tiles list on FilePanel await expect(filePanelMessageList).toMatchScreenshot("file-tiles-list.png", { // Exclude timestamps & flaky seek bar from snapshot - mask: [page.locator(".mx_MessageTimestamp"), page.getByTestId("audio-player-seek")], + mask: [page.getByTestId("audio-player-seek")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }); }); diff --git a/playwright/e2e/sliding-sync/sliding-sync.spec.ts b/playwright/e2e/sliding-sync/sliding-sync.spec.ts index d7ef96dae9..e2669e0883 100644 --- a/playwright/e2e/sliding-sync/sliding-sync.spec.ts +++ b/playwright/e2e/sliding-sync/sliding-sync.spec.ts @@ -361,7 +361,9 @@ test.describe("Sliding Sync", () => { await expect(page.locator(".mx_ReplyPreview")).toBeVisible(); // now click on the permalink for Permalink me - await page.locator(".mx_EventTile").filter({ hasText: "Permalink me" }).locator("a").dispatchEvent("click"); + const tile = page.locator(".mx_EventTile").filter({ hasText: "Permalink me" }); + await tile.hover(); + await tile.locator("a").dispatchEvent("click"); // make sure it is now selected with the little green | await expect(page.locator(".mx_EventTile_selected").filter({ hasText: "Permalink me" })).toBeVisible(); diff --git a/playwright/e2e/threads/threads.spec.ts b/playwright/e2e/threads/threads.spec.ts index 79f6000751..73c4c254db 100644 --- a/playwright/e2e/threads/threads.spec.ts +++ b/playwright/e2e/threads/threads.spec.ts @@ -39,7 +39,12 @@ test.describe("Threads", () => { const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start // Exclude timestamp and read marker from snapshots - const mask = [page.locator(".mx_MessageTimestamp"), page.locator(".mx_MessagePanel_myReadMarker")]; + const mask = [page.locator(".mx_MessagePanel_myReadMarker")]; + const css = ` + .mx_MessageTimestamp { + visibility: hidden; + } + `; const roomViewLocator = page.locator(".mx_RoomView_body"); // User sends message @@ -74,13 +79,15 @@ test.describe("Threads", () => { // Take snapshots in group layout and bubble layout (IRC layout is not available on ThreadView) await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Initial_ThreadView_on_group_layout.png", { - mask: mask, + mask, + css, }); await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']")).toHaveCount(2); await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Initial_ThreadView_on_bubble_layout.png", { - mask: mask, + mask, + css, }); // Set the group layout @@ -154,7 +161,8 @@ test.describe("Threads", () => { await expect(page.locator(".mx_ThreadView")).toMatchScreenshot( "ThreadView_with_reaction_and_a_hidden_event_on_group_layout.png", { - mask: mask, + mask, + css, }, ); @@ -178,7 +186,8 @@ test.describe("Threads", () => { await expect(page.locator(".mx_ThreadView")).toMatchScreenshot( "ThreadView_with_reaction_and_a_hidden_event_on_bubble_layout.png", { - mask: mask, + mask, + css, }, ); @@ -214,7 +223,8 @@ test.describe("Threads", () => { await expect(page.locator(".mx_ThreadView")).toMatchScreenshot( "ThreadView_with_redacted_messages_on_group_layout.png", { - mask: mask, + mask, + css, }, ); await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); @@ -222,7 +232,8 @@ test.describe("Threads", () => { await expect(page.locator(".mx_ThreadView")).toMatchScreenshot( "ThreadView_with_redacted_messages_on_bubble_layout.png", { - mask: mask, + mask, + css, }, ); diff --git a/playwright/e2e/timeline/timeline.spec.ts b/playwright/e2e/timeline/timeline.spec.ts index c3104ad076..806e7e9038 100644 --- a/playwright/e2e/timeline/timeline.spec.ts +++ b/playwright/e2e/timeline/timeline.spec.ts @@ -181,8 +181,10 @@ test.describe("Timeline", () => { await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible(); await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-irc-layout.png", { - mask: [page.locator(".mx_MessageTimestamp")], css: ` + .mx_MessageTimestamp { + visibility: hidden; + } .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { display: none !important; } @@ -215,8 +217,10 @@ test.describe("Timeline", () => { await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible(); await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-modern-layout.png", { - mask: [page.locator(".mx_MessageTimestamp")], css: ` + .mx_MessageTimestamp { + visibility: hidden; + } .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { display: none !important; } @@ -255,7 +259,11 @@ test.describe("Timeline", () => { // Save snapshot of expanded generic event list summary on bubble layout await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-bubble-layout.png", { // Exclude timestamp from snapshot - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }); // Click "collapse" link button on the first hovered info event line @@ -271,7 +279,11 @@ test.describe("Timeline", () => { // Save snapshot of collapsed generic event list summary on bubble layout await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("collapsed-gels-bubble-layout.png", { - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }); }, ); @@ -312,12 +324,14 @@ test.describe("Timeline", () => { "event-line-inline-start-margin-irc-layout.png", { // Exclude timestamp and read marker from snapshot - mask: [page.locator(".mx_MessageTimestamp")], css: ` - .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { - display: none !important; - } - `, + .mx_MessageTimestamp { + visibility: hidden; + } + .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { + display: none !important; + } + `, }, ); await expect(axe).toHaveNoViolations(); @@ -409,7 +423,11 @@ test.describe("Timeline", () => { "collapsed-gels-and-messages-irc-layout.png", { // Exclude timestamp from snapshot of mx_MainSplit - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }, ); @@ -428,7 +446,11 @@ test.describe("Timeline", () => { "expanded-gels-and-messages-irc-layout.png", { // Exclude timestamp from snapshot of mx_MainSplit - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }, ); @@ -453,7 +475,11 @@ test.describe("Timeline", () => { "expanded-gels-redaction-placeholder.png", { // Exclude timestamp from snapshot of mx_MainSplit - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }, ); @@ -481,7 +507,11 @@ test.describe("Timeline", () => { // Record alignment of expanded GELS, placeholder of deleted message, and emote await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-emote-irc-layout.png", { // Exclude timestamp from snapshot of mx_MainSplit - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }); }, ); @@ -492,12 +522,14 @@ test.describe("Timeline", () => { async ({ page, app, room }) => { const screenshotOptions = { // Hide because flaky - See https://github.com/vector-im/element-web/issues/24957 - mask: [page.locator(".mx_MessageTimestamp")], css: ` - .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { - display: none !important; - } - `, + .mx_MessageTimestamp { + visibility: hidden; + } + .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { + display: none !important; + } + `, }; await sendEvent(app.client, room.roomId); @@ -605,12 +637,10 @@ test.describe("Timeline", () => { await messageEdit(page); // Click timestamp to highlight hidden event line - const timestamp = page.locator(".mx_RoomView_body .mx_EventTile_info a", { - has: page.locator(".mx_MessageTimestamp"), - }); + const timestamp = page.locator(".mx_RoomView_body .mx_EventTile_info a.mx_MessageTimestamp"); // wait for the remote echo otherwise we get an error modal due to a 404 on the /event/ API await expect(timestamp).not.toHaveAttribute("href", /~!/); - await timestamp.locator(".mx_MessageTimestamp").click(); + await timestamp.click(); // should not add inline start padding to a hidden event line on IRC layout await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -620,12 +650,14 @@ test.describe("Timeline", () => { // Exclude timestamp and read marker from snapshot const screenshotOptions = { - mask: [page.locator(".mx_MessageTimestamp")], css: ` - .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { - display: none !important; - } - `, + .mx_MessageTimestamp { + visibility: hidden; + } + .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { + display: none !important; + } + `, }; await expect(page.locator(".mx_MainSplit")).toMatchScreenshot( @@ -654,7 +686,11 @@ test.describe("Timeline", () => { // Exclude timestamp from snapshot const screenshotOptions = { - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }; await sendEvent(app.client, room.roomId); @@ -795,8 +831,10 @@ test.describe("Timeline", () => { await app.timeline.scrollToBottom(); await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot("url-preview.png", { // Exclude timestamp and read marker from snapshot - mask: [page.locator(".mx_MessageTimestamp")], css: ` + .mx_MessageTimestamp { + visibility: hidden; + } .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { display: none !important; } @@ -892,7 +930,13 @@ test.describe("Timeline", () => { const tile = page.locator(".mx_EventTile"); await expect(tile).toBeVisible(); - await expect(tile).toMatchScreenshot("code-block.png", { mask: [page.locator(".mx_MessageTimestamp")] }); + await expect(tile).toMatchScreenshot("code-block.png", { + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, + }); // Edit a code block and assert the edited code block has been correctly rendered await tile.hover(); @@ -904,7 +948,11 @@ test.describe("Timeline", () => { const newTile = page.locator(".mx_EventTile"); await expect(newTile).toMatchScreenshot("edited-code-block.png", { - mask: [page.locator(".mx_MessageTimestamp")], + css: ` + .mx_MessageTimestamp { + visibility: hidden; + } + `, }); }); @@ -1107,8 +1155,10 @@ test.describe("Timeline", () => { // Exclude timestamp and read marker from snapshot const screenshotOptions = { - mask: [page.locator(".mx_MessageTimestamp")], css: ` + .mx_MessageTimestamp { + visibility: hidden; + } .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { display: none !important; } @@ -1233,12 +1283,14 @@ test.describe("Timeline", () => { // Exclude timestamp and read marker from snapshot const screenshotOptions = { - mask: [page.locator(".mx_MessageTimestamp")], css: ` - .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { - display: none !important; - } - `, + .mx_MessageTimestamp { + visibility: hidden; + } + .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { + display: none !important; + } + `, }; // Make sure the strings do not overflow on IRC layout @@ -1297,8 +1349,10 @@ test.describe("Timeline", () => { // Exclude timestamp and read marker from snapshot const screenshotOptions = { - mask: [page.locator(".mx_MessageTimestamp")], css: ` + .mx_MessageTimestamp { + visibility: hidden; + } .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker { display: none !important; } diff --git a/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png b/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png index 26c506097a..ffe31b9b26 100644 Binary files a/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png and b/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png differ diff --git a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png index 81939514ff..f606955146 100644 Binary files a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png and b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png index 9a29c3994c..86c223b8a1 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png index 3fbe91e49a..fa441f9c85 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png index 680f5e2f28..91f0bcee47 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png index 8d1721a0af..caa8457a68 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-ltrdisplayname-linux.png index d93f7250f3..4d1634a2a1 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-ltrdisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png index cc50f3bdb0..83345b4ee7 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png index 7be9d08d55..30078ce86e 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png index 22ba802f89..7904ecde1c 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png index 3619ac320d..d37aa2d7cb 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png index decfcb190d..9c12073079 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png index fe644d923d..6478693586 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png index e6b787f147..154d678982 100644 Binary files a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png differ diff --git a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png index f2819d7479..c3d3a554ea 100644 Binary files a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png and b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png differ diff --git a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png index 7876849092..cea08c4734 100644 Binary files a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png and b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png differ diff --git a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png index 2d49d287f5..9ecc76e0f0 100644 Binary files a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png and b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png differ diff --git a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png index 56d2cea124..d99f1a2c01 100644 Binary files a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png and b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png differ diff --git a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png index 809199feb5..4caf85a534 100644 Binary files a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png and b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png differ diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png index 15eb9e0d1f..ad56ccbcca 100644 Binary files a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png and b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png b/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png index db3ae8eccb..2f799712b6 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png and b/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png index 39cee36ed7..8280d305f9 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png index 857047d319..8ffe05ad88 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png differ diff --git a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png index f9170b0cda..86bebf9f1c 100644 Binary files a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png and b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png index 020c4cd17c..3d727db365 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png index 88e30a9ef5..246d67de9a 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png index 73d7f4a53f..fd4e0b0011 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png index f8a651c958..05111f1822 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png index 9ba34dea00..1ec709e872 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png index e4ec380f87..07c1f19b63 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png index 01cca9c0d3..6321da3010 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png index 2ab0a03e8e..226d0a4bbd 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png index 15eaa51233..e59feb48bf 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png index 56eb5ff115..3ca41861b2 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png index b3df4da31f..8587967655 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png index 9a3d74e5a8..dce624b940 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png index 829a6bb47d..33ba54c4a8 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png index 3f274802f4..14e83f74ae 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png index 67e6c66903..0234856cb3 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png index 795e68ec5b..831a045a25 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png index b57939e6b3..7da36fecc2 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png index 1bd5ee24d8..c1b7ed9f12 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png index 335173ab0f..faa22eb94a 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png index 45ba93f347..05f189c924 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png index bc99948639..2f828535bf 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png index 728ec48a90..3ca41861b2 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png index 23c87f9660..79f9eb810e 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png index 41d3fcca28..228381ebee 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png index 0360a11893..ae6d560c54 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png index c2901d9f2e..618b61c50e 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/image-in-timeline-default-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/image-in-timeline-default-layout-linux.png index eccba9a912..d645569a46 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/image-in-timeline-default-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/image-in-timeline-default-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png index c63913bbc9..2d8687454f 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png index 5a38e0593f..2f2e95d1ce 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png index 479e80d6e6..7913f39ad5 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png index 5bbaf080d1..4dc03bc9ff 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png differ diff --git a/res/css/views/messages/_MessageTimestamp.pcss b/res/css/views/messages/_MessageTimestamp.pcss index 2cca6a3aaf..d5dda3272d 100644 --- a/res/css/views/messages/_MessageTimestamp.pcss +++ b/res/css/views/messages/_MessageTimestamp.pcss @@ -13,13 +13,14 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageTimestamp { - color: var(--MessageTimestamp-color); + color: var(--MessageTimestamp-color) !important; /* override anchor color */ font-size: $font-10px; font-variant-numeric: tabular-nums; display: block; /* enable the width setting below */ width: var(--MessageTimestamp-width); white-space: nowrap; user-select: none; + text-decoration: none; } .mx_MessageTimestamp_lateIcon { diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index b4172fc003..42229b547a 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -200,10 +200,6 @@ $left-gutter: 64px; Replaces margin-top: -6px. This interacts better with a read marker being in between. Content overflows. */ height: 1px; - - a { - text-decoration: none; - } } &.mx_EventTile_highlight, @@ -273,9 +269,9 @@ $left-gutter: 64px; align-items: flex-start; padding-top: 0; - > a { - text-decoration: none; /* timestamps are links which shouldn't be underlined */ + .mx_MessageTimestamp { min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */ + text-align: right; } > * { @@ -403,10 +399,6 @@ $left-gutter: 64px; margin: 0; } - .mx_MessageTimestamp { - text-align: right; - } - .mx_EditMessageComposer_buttons { position: relative; } diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss index 8d50fa25d3..24991f9583 100644 --- a/res/css/views/settings/_LayoutSwitcher.pcss +++ b/res/css/views/settings/_LayoutSwitcher.pcss @@ -72,6 +72,10 @@ Please see LICENSE files in the repository root for full details. flex-shrink: 1; } + &[data-layout="irc"] .mx_MessageTimestamp { + display: none; /* hide the container used for spacing consistency */ + } + .mx_EventTile_line { max-width: 100%; } diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 0ee15efa20..e88a1c066e 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -19,7 +19,6 @@ import MessageContextMenu from "../context_menus/MessageContextMenu"; import { aboveLeftOf } from "../../structures/ContextMenu"; import MessageTimestamp from "../messages/MessageTimestamp"; import SettingsStore from "../../../settings/SettingsStore"; -import { formatFullDate } from "../../../DateUtils"; import dis from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; @@ -457,18 +456,15 @@ export default class ImageView extends React.Component { const senderName = mxEvent.sender?.name ?? mxEvent.getSender(); const sender =
{senderName}
; const messageTimestamp = ( - - - + showFullDate={true} + showTwelveHour={showTwelveHour} + ts={mxEvent.getTs()} + showSeconds={false} + inhibitTooltip + /> ); const avatar = ( ; + /** + * Optional onContextMenu handler to attach to the DOM element + */ + onContextMenu?: React.MouseEventHandler; } export default class MessageTimestamp extends React.Component { @@ -52,12 +70,41 @@ export default class MessageTimestamp extends React.Component { icon = ; } - return ( - - + let content; + if (this.props.href) { + content = ( + + {icon} + {timestamp} + + ); + } else { + content = ( + {icon} {timestamp} + ); + } + + if (this.props.inhibitTooltip) return content; + + return ( + + {content} ); } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index edab5bc947..35b6a57ffd 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -40,7 +40,6 @@ import ReplyChain from "../elements/ReplyChain"; import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; import { Layout } from "../../../settings/enums/Layout"; -import { formatTime } from "../../../DateUtils"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { DecryptionFailureBody } from "../messages/DecryptionFailureBody"; import RoomAvatar from "../avatars/RoomAvatar"; @@ -253,6 +252,7 @@ interface IState { reactions?: Relations | null | undefined; hover: boolean; + focusWithin: boolean; // Position of the context menu contextMenu?: { @@ -299,6 +299,7 @@ export class UnwrappedEventTile extends React.Component declare public context: React.ContextType; private unmounted = false; + private readonly id = uniqueId(); public constructor(props: EventTileProps, context: React.ContextType) { super(props, context); @@ -316,6 +317,7 @@ export class UnwrappedEventTile extends React.Component reactions: this.getReactions(), hover: false, + focusWithin: false, thread, }; @@ -922,7 +924,6 @@ export class UnwrappedEventTile extends React.Component public render(): ReactNode { const msgtype = this.props.mxEvent.getContent().msgtype; const eventType = this.props.mxEvent.getType(); - const id = uniqueId(); const { hasRenderer, @@ -1122,6 +1123,7 @@ export class UnwrappedEventTile extends React.Component (this.props.alwaysShowTimestamps || this.props.last || this.state.hover || + this.state.focusWithin || this.state.actionBarFocused || Boolean(this.state.contextMenu)); @@ -1135,20 +1137,32 @@ export class UnwrappedEventTile extends React.Component ts = this.props.mxEvent.getTs(); } - const messageTimestamp = ( + const messageTimestampProps = { + showRelative: this.context.timelineRenderingType === TimelineRenderingType.ThreadsList, + showTwelveHour: this.props.isTwelveHour, + ts, + receivedTs: getLateEventInfo(this.props.mxEvent)?.received_ts, + }; + const messageTimestamp = ; + const linkedMessageTimestamp = ( ); - const timestamp = showTimestamp && ts ? messageTimestamp : null; + const useIRCLayout = this.props.layout === Layout.IRC; + // Used to simplify the UI layout where necessary by not conditionally rendering an element at the start + const dummyTimestamp = useIRCLayout ? : null; + const timestamp = showTimestamp && ts ? messageTimestamp : dummyTimestamp; + const linkedTimestamp = + timestamp !== dummyTimestamp && !this.props.hideTimestamp ? linkedMessageTimestamp : dummyTimestamp; let pinnedMessageBadge: JSX.Element | undefined; if (PinningUtils.isPinned(MatrixClientPeg.safeGet(), this.props.mxEvent)) { - pinnedMessageBadge = ; + pinnedMessageBadge = ; } let reactionsRow: JSX.Element | undefined; @@ -1165,21 +1179,8 @@ export class UnwrappedEventTile extends React.Component // If we have reactions or a pinned message badge, we need a footer const hasFooter = Boolean((reactionsRow && this.state.reactions) || pinnedMessageBadge); - const linkedTimestamp = !this.props.hideTimestamp ? ( - - {timestamp} - - ) : null; - - const useIRCLayout = this.props.layout === Layout.IRC; const groupTimestamp = !useIRCLayout ? linkedTimestamp : null; const ircTimestamp = useIRCLayout ? linkedTimestamp : null; - const bubbleTimestamp = this.props.layout === Layout.Bubble ? messageTimestamp : undefined; const groupPadlock = !useIRCLayout && !isBubbleMessage && this.renderE2EPadlock(); const ircPadlock = useIRCLayout && !isBubbleMessage && this.renderE2EPadlock(); @@ -1210,7 +1211,7 @@ export class UnwrappedEventTile extends React.Component forExport={this.props.forExport} permalinkCreator={this.props.permalinkCreator} layout={this.props.layout} - alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.hover} + alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.hover || this.state.focusWithin} isQuoteExpanded={isQuoteExpanded} setQuoteExpanded={this.setQuoteExpanded} getRelationsForEvent={this.props.getRelationsForEvent} @@ -1237,13 +1238,20 @@ export class UnwrappedEventTile extends React.Component "data-event-id": this.props.mxEvent.getId(), "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), + "onFocus": () => this.setState({ focusWithin: true }), + "onBlur": () => this.setState({ focusWithin: false }), }, [
{avatar} {sender}
, -
+
{this.renderContextMenu()} {replyChain} {renderTile(TimelineRenderingType.Thread, { @@ -1260,9 +1268,7 @@ export class UnwrappedEventTile extends React.Component showHiddenEvents: this.context.showHiddenEvents, })} {actionBar} - - {timestamp} - + {linkedTimestamp} {msgOption}
, hasFooter && ( @@ -1294,6 +1300,8 @@ export class UnwrappedEventTile extends React.Component "data-has-reply": !!replyChain, "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), + "onFocus": () => this.setState({ focusWithin: true }), + "onBlur": () => this.setState({ focusWithin: false }), "onClick": (ev: MouseEvent) => { const target = ev.currentTarget as HTMLElement; let index = -1; @@ -1425,13 +1433,20 @@ export class UnwrappedEventTile extends React.Component "data-has-reply": !!replyChain, "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), + "onFocus": () => this.setState({ focusWithin: true }), + "onBlur": () => this.setState({ focusWithin: false }), }, <> {ircTimestamp} {sender} {ircPadlock} {avatar} -
+
{this.renderContextMenu()} {groupTimestamp} {groupPadlock} @@ -1442,7 +1457,6 @@ export class UnwrappedEventTile extends React.Component // overrides ref: this.tile, isSeeingThroughMessageHiddenForModeration, - timestamp: bubbleTimestamp, // appease TS highlights: this.props.highlights, diff --git a/src/events/EventTileFactory.tsx b/src/events/EventTileFactory.tsx index e964325573..cc9f4c0a2c 100644 --- a/src/events/EventTileFactory.tsx +++ b/src/events/EventTileFactory.tsx @@ -64,7 +64,6 @@ export interface EventTileTypeProps | "inhibitInteraction" > { ref?: React.RefObject; // `any` because it's effectively impossible to convince TS of a reasonable type - timestamp?: JSX.Element; maxImageHeight?: number; // pixels overrideBodyTypes?: Record>; overrideEventTypes?: Record>; @@ -288,7 +287,6 @@ export function renderTile( callEventGrouper, getRelationsForEvent, isSeeingThroughMessageHiddenForModeration, - timestamp, inhibitInteraction, showHiddenEvents, } = props; @@ -336,7 +334,6 @@ export function renderTile( callEventGrouper, getRelationsForEvent, isSeeingThroughMessageHiddenForModeration, - timestamp, inhibitInteraction, showHiddenEvents, }), diff --git a/test/unit-tests/components/structures/RoomSearchView-test.tsx b/test/unit-tests/components/structures/RoomSearchView-test.tsx index ab939a026b..36c204ec13 100644 --- a/test/unit-tests/components/structures/RoomSearchView-test.tsx +++ b/test/unit-tests/components/structures/RoomSearchView-test.tsx @@ -25,6 +25,8 @@ import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { searchPagination, SearchScope } from "../../../../src/Searching"; import { SdkContextClass } from "../../../../src/contexts/SDKContext"; +import SettingsStore from "../../../../src/settings/SettingsStore.ts"; +import { SettingLevel } from "../../../../src/settings/SettingLevel.ts"; jest.mock("../../../../src/Searching", () => ({ searchPagination: jest.fn(), @@ -438,6 +440,7 @@ describe("", () => { }); it("should pass appropriate permalink creator for all rooms search", async () => { + await SettingsStore.setValue("alwaysShowTimestamps", null, SettingLevel.DEVICE, true); const room2 = new Room("!room2:server", client, client.getSafeUserId()); const room3 = new Room("!room3:server", client, client.getSafeUserId()); mocked(client.getRoom).mockImplementation( diff --git a/test/unit-tests/components/views/messages/MessageTimestamp-test.tsx b/test/unit-tests/components/views/messages/MessageTimestamp-test.tsx index 8840cad1db..ceaad8ea01 100644 --- a/test/unit-tests/components/views/messages/MessageTimestamp-test.tsx +++ b/test/unit-tests/components/views/messages/MessageTimestamp-test.tsx @@ -29,6 +29,7 @@ describe("MessageTimestamp", () => { aria-hidden="true" aria-live="off" class="mx_MessageTimestamp" + tabindex="0" > 08:09 diff --git a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap index 28883a52a8..71242ac1f7 100644 --- a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap +++ b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap @@ -97,7 +97,7 @@ exports[` should render 1`] = `
should render 1`] = `
should render 1`] = ` data-self="true" tabindex="-1" > +
@@ -351,7 +354,7 @@ exports[` should render 1`] = `
+
diff --git a/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap index 9a7c0cfbca..127a5f56a8 100644 --- a/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap +++ b/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap @@ -57,7 +57,7 @@ exports[`HTMLExport should export 1`] = `

-
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0
  • +
  • @user49:example.com
    00:00
    Message #49
  • @user48:example.com
    00:00
    Message #48
  • @user47:example.com
    00:00
    Message #47
  • @user46:example.com
    00:00
    Message #46
  • @user45:example.com
    00:00
    Message #45
  • @user44:example.com
    00:00
    Message #44
  • @user43:example.com
    00:00
    Message #43
  • @user42:example.com
    00:00
    Message #42
  • @user41:example.com
    00:00
    Message #41
  • @user40:example.com
    00:00
    Message #40
  • @user39:example.com
    00:00
    Message #39
  • @user38:example.com
    00:00
    Message #38
  • @user37:example.com
    00:00
    Message #37
  • @user36:example.com
    00:00
    Message #36
  • @user35:example.com
    00:00
    Message #35
  • @user34:example.com
    00:00
    Message #34
  • @user33:example.com
    00:00
    Message #33
  • @user32:example.com
    00:00
    Message #32
  • @user31:example.com
    00:00
    Message #31
  • @user30:example.com
    00:00
    Message #30
  • @user29:example.com
    00:00
    Message #29
  • @user28:example.com
    00:00
    Message #28
  • @user27:example.com
    00:00
    Message #27
  • @user26:example.com
    00:00
    Message #26
  • @user25:example.com
    00:00
    Message #25
  • @user24:example.com
    00:00
    Message #24
  • @user23:example.com
    00:00
    Message #23
  • @user22:example.com
    00:00
    Message #22
  • @user21:example.com
    00:00
    Message #21
  • @user20:example.com
    00:00
    Message #20
  • @user19:example.com
    00:00
    Message #19
  • @user18:example.com
    00:00
    Message #18
  • @user17:example.com
    00:00
    Message #17
  • @user16:example.com
    00:00
    Message #16
  • @user15:example.com
    00:00
    Message #15
  • @user14:example.com
    00:00
    Message #14
  • @user13:example.com
    00:00
    Message #13
  • @user12:example.com
    00:00
    Message #12
  • @user11:example.com
    00:00
    Message #11
  • @user10:example.com
    00:00
    Message #10
  • @user9:example.com
    00:00
    Message #9
  • @user8:example.com
    00:00
    Message #8
  • @user7:example.com
    00:00
    Message #7
  • @user6:example.com
    00:00
    Message #6
  • @user5:example.com
    00:00
    Message #5
  • @user4:example.com
    00:00
    Message #4
  • @user3:example.com
    00:00
    Message #3
  • @user2:example.com
    00:00
    Message #2
  • @user1:example.com
    00:00
    Message #1
  • @user0:example.com
    00:00
    Message #0