diff --git a/playwright/e2e/create-room/create-room.spec.ts b/playwright/e2e/create-room/create-room.spec.ts deleted file mode 100644 index 087a89e68d..0000000000 --- a/playwright/e2e/create-room/create-room.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2022, 2023 The Matrix.org Foundation C.I.C. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -import { test, expect } from "../../element-web-test"; - -test.describe("Create Room", () => { - test.use({ displayName: "Jim" }); - - test("should allow us to create a public room with name, topic & address set", async ({ page, user, app }) => { - const name = "Test room 1"; - const topic = "This room is dedicated to this test and this test only!"; - - const dialog = await app.openCreateRoomDialog(); - // Fill name & topic - await dialog.getByRole("textbox", { name: "Name" }).fill(name); - await dialog.getByRole("textbox", { name: "Topic" }).fill(topic); - // Change room to public - await dialog.getByRole("button", { name: "Room visibility" }).click(); - await dialog.getByRole("option", { name: "Public room" }).click(); - // Fill room address - await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1"); - // Submit - await dialog.getByRole("button", { name: "Create room" }).click(); - - await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`)); - const header = page.locator(".mx_RoomHeader"); - await expect(header).toContainText(name); - }); -}); diff --git a/playwright/e2e/devtools/devtools.spec.ts b/playwright/e2e/devtools/devtools.spec.ts new file mode 100644 index 0000000000..051736e38b --- /dev/null +++ b/playwright/e2e/devtools/devtools.spec.ts @@ -0,0 +1,33 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { test, expect } from "../../element-web-test"; + +test.describe("Devtools", () => { + test.use({ + displayName: "Alice", + }); + + test("should render the devtools", { tag: "@screenshot" }, async ({ page, homeserver, user, app, axe }) => { + await app.client.createRoom({ name: "Test Room" }); + await app.viewRoomByName("Test Room"); + + const composer = app.getComposer().locator("[contenteditable]"); + await composer.fill("/devtools"); + await composer.press("Enter"); + const dialog = page.locator(".mx_Dialog"); + await dialog.getByLabel("Developer mode").check(); + + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + await expect(dialog).toMatchScreenshot("devtools-dialog.png", { + css: `.mx_CopyableText { + display: none; + }`, + }); + }); +}); diff --git a/playwright/e2e/devtools/upgraderoom.spec.ts b/playwright/e2e/devtools/upgraderoom.spec.ts new file mode 100644 index 0000000000..69de03b6ee --- /dev/null +++ b/playwright/e2e/devtools/upgraderoom.spec.ts @@ -0,0 +1,38 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { SettingLevel } from "../../../src/settings/SettingLevel"; +import { test, expect } from "../../element-web-test"; + +test.describe("Room upgrade dialog", () => { + test.use({ + displayName: "Alice", + }); + + test( + "should render the room upgrade dialog", + { tag: "@screenshot" }, + async ({ page, homeserver, user, app, axe }) => { + // Enable developer mode + await app.settings.setValue("developerMode", null, SettingLevel.ACCOUNT, true); + + await app.client.createRoom({ name: "Test Room" }); + await app.viewRoomByName("Test Room"); + + const composer = app.getComposer().locator("[contenteditable]"); + // Pick a room version that is likely to be supported by all our target homeservers. + await composer.fill("/upgraderoom 5"); + await composer.press("Enter"); + const dialog = page.locator(".mx_Dialog"); + await dialog.getByLabel("Automatically invite members from this room to the new one").check(); + + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + await expect(dialog).toMatchScreenshot("upgrade-room.png"); + }, + ); +}); diff --git a/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts b/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts new file mode 100644 index 0000000000..1dbacaac24 --- /dev/null +++ b/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts @@ -0,0 +1,28 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { test, expect } from "../../element-web-test"; + +test.describe("Decline and block invite dialog", function () { + test.use({ + displayName: "Hanako", + }); + + test( + "should show decline and block dialog for a room", + { tag: "@screenshot" }, + async ({ page, app, user, bot, axe }) => { + await bot.createRoom({ name: "Test Room", invite: [user.userId] }); + await app.viewRoomByName("Test Room"); + await page.getByRole("button", { name: "Decline and block" }).click(); + + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + await expect(page.locator(".mx_Dialog")).toMatchScreenshot("decline-and-block-invite-empty.png"); + }, + ); +}); diff --git a/playwright/e2e/location/location.spec.ts b/playwright/e2e/location/location.spec.ts index 52afd5e173..dda063364b 100644 --- a/playwright/e2e/location/location.spec.ts +++ b/playwright/e2e/location/location.spec.ts @@ -1,5 +1,5 @@ /* -Copyright 2024 New Vector Ltd. +Copyright 2024, 2025 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial @@ -57,4 +57,26 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => { await expect(page.locator(".mx_Marker")).toBeVisible(); }); + + test( + "is prompted for and can consent to live location sharing", + { tag: "@screenshot" }, + async ({ page, user, app, axe }) => { + await app.viewRoomById(await app.client.createRoom({})); + + const composerOptions = await app.openMessageComposerOptions(); + await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click(); + const menu = page.locator(".mx_LocationShareMenu"); + + await menu.getByRole("button", { name: "My live location" }).click(); + await menu.getByLabel("Enable live location sharing").check(); + + axe.disableRules([ + "color-contrast", // XXX: Inheriting colour contrast issues from room view. + "region", // XXX: ContextMenu managed=false does not provide a role. + ]); + await expect(axe).toHaveNoViolations(); + await expect(menu).toMatchScreenshot("location-live-share-dialog.png"); + }, + ); }); diff --git a/playwright/e2e/room/create-room.spec.ts b/playwright/e2e/room/create-room.spec.ts new file mode 100644 index 0000000000..e697ac97a9 --- /dev/null +++ b/playwright/e2e/room/create-room.spec.ts @@ -0,0 +1,68 @@ +/* +Copyright 2024 New Vector Ltd. +Copyright 2022, 2023 The Matrix.org Foundation C.I.C. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { SettingLevel } from "../../../src/settings/SettingLevel"; +import { test, expect } from "../../element-web-test"; + +const name = "Test room"; +const topic = "A decently explanatory topic for a test room."; + +test.describe("Create Room", () => { + test.use({ displayName: "Jim" }); + + test( + "should create a public room with name, topic & address set", + { tag: "@screenshot" }, + async ({ page, user, app, axe }) => { + const dialog = await app.openCreateRoomDialog(); + // Fill name & topic + await dialog.getByRole("textbox", { name: "Name" }).fill(name); + await dialog.getByRole("textbox", { name: "Topic" }).fill(topic); + // Change room to public + await dialog.getByRole("button", { name: "Room visibility" }).click(); + await dialog.getByRole("option", { name: "Public room" }).click(); + // Fill room address + await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-standard"); + + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + // Snapshot it + await expect(dialog).toMatchScreenshot("create-room.png"); + + // Submit + await dialog.getByRole("button", { name: "Create room" }).click(); + + await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-standard:${user.homeServer}`)); + const header = page.locator(".mx_RoomHeader"); + await expect(header).toContainText(name); + }, + ); + + test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => { + await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true); + + const dialog = await app.openCreateRoomDialog("New video room"); + // Fill name & topic + await dialog.getByRole("textbox", { name: "Name" }).fill(name); + await dialog.getByRole("textbox", { name: "Topic" }).fill(topic); + // Change room to public + await dialog.getByRole("button", { name: "Room visibility" }).click(); + await dialog.getByRole("option", { name: "Public room" }).click(); + // Fill room address + await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-video"); + // Snapshot it + await expect(dialog).toMatchScreenshot("create-video-room.png"); + + // Submit + await dialog.getByRole("button", { name: "Create video room" }).click(); + + await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-video:${user.homeServer}`)); + const header = page.locator(".mx_RoomHeader"); + await expect(header).toContainText(name); + }); +}); diff --git a/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts b/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts new file mode 100644 index 0000000000..48f03ecf0d --- /dev/null +++ b/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts @@ -0,0 +1,28 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { test, expect } from "../../../element-web-test"; +import { SettingLevel } from "../../../../src/settings/SettingLevel"; + +test.describe("Notifications 2 tab", () => { + test.use({ + displayName: "Alice", + }); + + test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => { + await app.settings.setValue("feature_notification_settings2", null, SettingLevel.DEVICE, true); + await page.setViewportSize({ width: 1024, height: 2000 }); + const settings = await app.settings.openUserSettings("Notifications"); + + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + await expect(settings).toMatchScreenshot("standard-notifications-2-settings.png", { + // Mask the mxid. + mask: [settings.locator("#mx_NotificationSettings2_MentionCheckbox span")], + }); + }); +}); diff --git a/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts b/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts new file mode 100644 index 0000000000..a63e730788 --- /dev/null +++ b/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts @@ -0,0 +1,25 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { test, expect } from "../../../element-web-test"; + +test.describe("Notifications tab", () => { + test.use({ + displayName: "Alice", + }); + + test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => { + await page.setViewportSize({ width: 1024, height: 1400 }); + const settings = await app.settings.openUserSettings("Notifications"); + await settings.getByLabel("Enable notifications for this account").check(); + await settings.getByLabel("Enable notifications for this device").check(); + + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + await expect(settings).toMatchScreenshot("standard-notification-settings.png"); + }); +}); diff --git a/playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts b/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts similarity index 97% rename from playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts rename to playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts index 06ee25e9cb..d287234af5 100644 --- a/playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts +++ b/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts @@ -8,7 +8,7 @@ import { type Locator } from "@playwright/test"; -import { test, expect } from "../../element-web-test"; +import { test, expect } from "../../../element-web-test"; test.describe("Roles & Permissions room settings tab", () => { const roomName = "Test room"; diff --git a/playwright/e2e/settings/room-settings/room-security-tab.spec.ts b/playwright/e2e/settings/room-settings/room-security-tab.spec.ts new file mode 100644 index 0000000000..01a861e86b --- /dev/null +++ b/playwright/e2e/settings/room-settings/room-security-tab.spec.ts @@ -0,0 +1,48 @@ +/* + * Copyright 2025 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial + * Please see LICENSE files in the repository root for full details. + */ + +import { type Locator } from "@playwright/test"; + +import { test, expect } from "../../../element-web-test"; + +test.describe("Roles & Permissions room settings tab", () => { + const roomName = "Test room"; + + test.use({ + displayName: "Alice", + }); + + let settings: Locator; + + test.beforeEach(async ({ user, app }) => { + await app.client.createRoom({ name: roomName }); + await app.viewRoomByName(roomName); + settings = await app.settings.openRoomSettings("Security & Privacy"); + }); + + test( + "should be able to toggle on encryption in a room", + { tag: "@screenshot" }, + async ({ page, app, user, axe }) => { + await page.setViewportSize({ width: 1024, height: 1400 }); + const encryptedToggle = settings.getByLabel("Encrypted"); + await encryptedToggle.click(); + + // Accept the dialog. + await page.getByRole("button", { name: "Ok " }).click(); + + await expect(encryptedToggle).toBeChecked(); + await expect(encryptedToggle).toBeDisabled(); + + await settings.getByLabel("Only send messages to verified users.").check(); + + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + await expect(settings).toMatchScreenshot("room-security-settings.png"); + }, + ); +}); diff --git a/playwright/e2e/settings/room-settings/room-video-tab.spec.ts b/playwright/e2e/settings/room-settings/room-video-tab.spec.ts new file mode 100644 index 0000000000..feff22a04e --- /dev/null +++ b/playwright/e2e/settings/room-settings/room-video-tab.spec.ts @@ -0,0 +1,42 @@ +/* + * Copyright 2025 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial + * Please see LICENSE files in the repository root for full details. + */ + +import { type Locator } from "@playwright/test"; + +import { test, expect } from "../../../element-web-test"; +import { SettingLevel } from "../../../../src/settings/SettingLevel"; + +test.describe("Voice & Video room settings tab", () => { + const roomName = "Test room"; + + test.use({ + displayName: "Alice", + }); + + let settings: Locator; + + test.beforeEach(async ({ user, app, page }) => { + // Execute client actions before setting, as the setting will force a reload. + await app.client.createRoom({ name: roomName }); + await app.settings.setValue("feature_group_calls", null, SettingLevel.DEVICE, true); + await app.viewRoomByName(roomName); + settings = await app.settings.openRoomSettings("Voice & Video"); + }); + + test( + "should be able to toggle on Element Call in the room", + { tag: "@screenshot" }, + async ({ page, app, user, axe }) => { + await page.setViewportSize({ width: 1024, height: 1400 }); + const callToggle = settings.getByLabel("Enable Element Call as an additional calling option in this room"); + await callToggle.check(); + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + await expect(settings).toMatchScreenshot("room-video-settings.png"); + }, + ); +}); diff --git a/playwright/e2e/settings/security-user-settings-tab.spec.ts b/playwright/e2e/settings/security-user-settings-tab.spec.ts index 25bf1a9dbe..377cae7495 100644 --- a/playwright/e2e/settings/security-user-settings-tab.spec.ts +++ b/playwright/e2e/settings/security-user-settings-tab.spec.ts @@ -41,6 +41,18 @@ test.describe("Security user settings tab", () => { }); }); + test("should render the security tab", { tag: "@screenshot" }, async ({ app, page, user }) => { + await page.setViewportSize({ width: 1024, height: 1400 }); + const tab = await app.settings.openUserSettings("Security"); + await expect(tab).toMatchScreenshot("security-settings-tab.png", { + mask: [ + // Contains IM name. + tab.locator("#mx_SetIntegrationManager_BodyText"), + tab.locator("#mx_SetIntegrationManager_ManagerName"), + ], + }); + }); + test("should be able to set an ID server", async ({ app, context, user, page }) => { const tab = await app.settings.openUserSettings("Security"); diff --git a/playwright/e2e/spaces/spaces.spec.ts b/playwright/e2e/spaces/spaces.spec.ts index b3f7ecb0c9..e1284a2c61 100644 --- a/playwright/e2e/spaces/spaces.spec.ts +++ b/playwright/e2e/spaces/spaces.spec.ts @@ -376,4 +376,19 @@ test.describe("Spaces", () => { await app.viewSpaceByName("Root Space"); await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png"); }); + + test("should render spaces visibility settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => { + await app.client.createSpace({ + name: "My Space", + }); + await app.viewSpaceByName("My space"); + await page.getByLabel("Settings", { exact: true }).click(); + await app.settings.switchTab("Visibility"); + + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + await expect(page.locator("#mx_tabpanel_SPACE_VISIBILITY_TAB")).toMatchScreenshot( + "space-visibility-settings.png", + ); + }); }); diff --git a/playwright/e2e/widgets/permissions-dialog.spec.ts b/playwright/e2e/widgets/permissions-dialog.spec.ts new file mode 100644 index 0000000000..bdaec30cd5 --- /dev/null +++ b/playwright/e2e/widgets/permissions-dialog.spec.ts @@ -0,0 +1,98 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { test, expect } from "../../element-web-test"; + +const DEMO_WIDGET_ID = "demo-widget-id"; +const DEMO_WIDGET_NAME = "Demo Widget"; +const DEMO_WIDGET_TYPE = "demo"; +const ROOM_NAME = "Demo"; + +const DEMO_WIDGET_HTML = ` + + + Demo Widget + + + +`; + +test.describe("Widger permissions dialog", () => { + test.use({ + displayName: "Mike", + }); + + let demoWidgetUrl: string; + test.beforeEach(async ({ webserver }) => { + demoWidgetUrl = webserver.start(DEMO_WIDGET_HTML); + }); + + test( + "should be updated if user is re-invited into the room with updated state event", + { tag: "@screenshot" }, + async ({ page, app, user, axe }) => { + const roomId = await app.client.createRoom({ + name: ROOM_NAME, + }); + + // setup widget via state event + await app.client.sendStateEvent( + roomId, + "im.vector.modular.widgets", + { + id: DEMO_WIDGET_ID, + creatorUserId: "somebody", + type: DEMO_WIDGET_TYPE, + name: DEMO_WIDGET_NAME, + url: demoWidgetUrl, + }, + DEMO_WIDGET_ID, + ); + + // set initial layout + await app.client.sendStateEvent( + roomId, + "io.element.widgets.layout", + { + widgets: { + [DEMO_WIDGET_ID]: { + container: "top", + index: 1, + width: 100, + height: 0, + }, + }, + }, + "", + ); + + // open the room + await app.viewRoomByName(ROOM_NAME); + + axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view. + await expect(axe).toHaveNoViolations(); + await expect(page.locator(".mx_WidgetCapabilitiesPromptDialog")).toMatchScreenshot( + "widget-capabilites-prompt.png", + ); + }, + ); +}); diff --git a/playwright/pages/ElementAppPage.ts b/playwright/pages/ElementAppPage.ts index abddc9c644..bba0ec5a21 100644 --- a/playwright/pages/ElementAppPage.ts +++ b/playwright/pages/ElementAppPage.ts @@ -51,9 +51,9 @@ export class ElementAppPage { /** * Open room creation dialog. */ - public async openCreateRoomDialog(): Promise { + public async openCreateRoomDialog(roomKindname: "New room" | "New video room" = "New room"): Promise { await this.page.getByRole("button", { name: "Add room", exact: true }).click(); - await this.page.getByRole("menuitem", { name: "New room", exact: true }).click(); + await this.page.getByRole("menuitem", { name: roomKindname, exact: true }).click(); return this.page.locator(".mx_CreateRoomDialog"); } diff --git a/playwright/pages/settings.ts b/playwright/pages/settings.ts index a08ca65f34..0ea8c50348 100644 --- a/playwright/pages/settings.ts +++ b/playwright/pages/settings.ts @@ -43,7 +43,7 @@ export class Settings { * @param {*} value The new value of the setting, may be null. * @return {Promise} Resolves when the setting has been changed. */ - public async setValue(settingName: string, roomId: string, level: SettingLevel, value: any): Promise { + public async setValue(settingName: string, roomId: string | null, level: SettingLevel, value: any): Promise { return this.page.evaluate< Promise, { diff --git a/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png b/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png new file mode 100644 index 0000000000..ad239ddc04 Binary files /dev/null and b/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png differ diff --git a/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png b/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png new file mode 100644 index 0000000000..94f0c9a599 Binary files /dev/null and b/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png differ diff --git a/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png b/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png new file mode 100644 index 0000000000..4726c446d3 Binary files /dev/null and b/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png differ diff --git a/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png b/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png new file mode 100644 index 0000000000..a2dce30b15 Binary files /dev/null and b/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png differ diff --git a/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png b/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png new file mode 100644 index 0000000000..a16373c8dc Binary files /dev/null and b/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png differ diff --git a/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png b/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png new file mode 100644 index 0000000000..628ae1159c Binary files /dev/null and b/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png differ diff --git a/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png b/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png new file mode 100644 index 0000000000..b3936c2a7b Binary files /dev/null and b/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png differ diff --git a/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png b/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png new file mode 100644 index 0000000000..6182c73b75 Binary files /dev/null and b/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png differ diff --git a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png new file mode 100644 index 0000000000..4f5f95c95e Binary files /dev/null and b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png differ diff --git a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png new file mode 100644 index 0000000000..2e46c528a3 Binary files /dev/null and b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png differ diff --git a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png new file mode 100644 index 0000000000..080bdd9ce1 Binary files /dev/null and b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png differ diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png new file mode 100644 index 0000000000..80f051c2d5 Binary files /dev/null and b/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png differ diff --git a/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png b/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png index 6331d373b3..7f621203e3 100644 Binary files a/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png and b/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png differ diff --git a/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png b/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png new file mode 100644 index 0000000000..ec021ebd75 Binary files /dev/null and b/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png differ diff --git a/res/css/views/dialogs/_DevtoolsDialog.pcss b/res/css/views/dialogs/_DevtoolsDialog.pcss index 3a706345c9..557345ff0e 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.pcss +++ b/res/css/views/dialogs/_DevtoolsDialog.pcss @@ -24,6 +24,12 @@ Please see LICENSE files in the repository root for full details. } } +.mx_DevTools_toolHeading { + color: var(--cpd-color-text-secondary); + font-weight: var(--cpd-font-weight-semibold); + font-size: var(--cpd-font-size-heading-sm); +} + .mx_DevTools_content { overflow-y: auto; } diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index e8baa1257b..1ee13c4b8d 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -208,7 +208,7 @@ Please see LICENSE files in the repository root for full details. margin-right: 12px; } - h3 { + h1 { font-size: inherit; margin: 0; } diff --git a/src/components/views/avatars/WidgetAvatar.tsx b/src/components/views/avatars/WidgetAvatar.tsx index c43cd98216..5baba7ca01 100644 --- a/src/components/views/avatars/WidgetAvatar.tsx +++ b/src/components/views/avatars/WidgetAvatar.tsx @@ -37,6 +37,8 @@ const WidgetAvatar: React.FC = ({ app, className, size = "20px", ...prop return ( = ({ roomId, threadRootId, onFinished }) {Object.entries(Tools).map(([category, tools]) => (
-

{_t(categoryLabels[category as unknown as Category])}

+

+ {_t(categoryLabels[category as unknown as Category])} +

{tools.map(([label, tool]) => { const onClick = (): void => { setTool([label, tool]); @@ -98,7 +100,7 @@ const DevtoolsDialog: React.FC = ({ roomId, threadRootId, onFinished })
))}
-

{_t("common|options")}

+

{_t("common|options")}

diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 027f25cc3a..65e393b6e4 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -572,7 +572,7 @@ export default class AppTile extends React.Component { return ( -

{name}

+

{name}

{title ? titleSpacer : ""} {title} diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index bc6b778e26..29a713fdd4 100644 --- a/src/components/views/right_panel/WidgetCard.tsx +++ b/src/components/views/right_panel/WidgetCard.tsx @@ -64,7 +64,7 @@ const WidgetCard: React.FC = ({ room, widgetId, onClose }) => { const header = (
- + {WidgetUtils.getWidgetName(app)}
- + {VectorStateToLabel[VectorState.Off]} {VectorStateToLabel[VectorState.On]} {VectorStateToLabel[VectorState.Loud]} diff --git a/src/components/views/settings/notifications/NotificationSettings2.tsx b/src/components/views/settings/notifications/NotificationSettings2.tsx index 405d789257..ae5aa46d31 100644 --- a/src/components/views/settings/notifications/NotificationSettings2.tsx +++ b/src/components/views/settings/notifications/NotificationSettings2.tsx @@ -34,6 +34,7 @@ import { SettingsSection } from "../shared/SettingsSection"; import { SettingsSubsection } from "../shared/SettingsSubsection"; import { NotificationPusherSettings } from "./NotificationPusherSettings"; import SettingsFlag from "../../elements/SettingsFlag"; +import { SettingsSubsectionHeading } from "../shared/SettingsSubsectionHeading"; enum NotificationDefaultLevels { AllMessages = "all_messages", @@ -151,7 +152,12 @@ export default function NotificationSettings2(): JSX.Element { />
+ } description={_t("settings|notifications|default_setting_description")} > + } description={_t("settings|notifications|play_sound_for_description")} > - + } + > + } description={_t( "settings|notifications|keywords", {}, diff --git a/src/components/views/settings/shared/SettingsSubsectionHeading.tsx b/src/components/views/settings/shared/SettingsSubsectionHeading.tsx index 63fb79c637..1be143504c 100644 --- a/src/components/views/settings/shared/SettingsSubsectionHeading.tsx +++ b/src/components/views/settings/shared/SettingsSubsectionHeading.tsx @@ -12,13 +12,19 @@ import Heading from "../../typography/Heading"; export interface SettingsSubsectionHeadingProps extends HTMLAttributes { heading: string; + as?: React.ComponentProps["as"]; children?: React.ReactNode; } -export const SettingsSubsectionHeading: React.FC = ({ heading, children, ...rest }) => { +export const SettingsSubsectionHeading: React.FC = ({ + heading, + as = "h3", + children, + ...rest +}) => { return (
- + {heading} {children} diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap index 7aa4d8e5d4..9913c2cd87 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap @@ -48,9 +48,11 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = ` class="mx_DevTools_content" >
-

+

Room -

+
-

+

Other -

+
-

+

Options -

+
diff --git a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 7bfaebd3a6..3310a24641 100644 --- a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -18,11 +18,11 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
-

Example 1 -

+