feat: show call participants in room list (Discord-style)

apps/web/playwright/e2e/devtools/devtools.spec.ts

@@ -0,0 +1,40 @@
+/*
+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;
+            }`,
+        });
+
+        // Try entering a value for the Developer.elementCallUrl setting
+        const input = page.getByRole("textbox", { name: "Element Call URL" });
+        await input.fill("https://example.com");
+        await input.press("Enter");
+        // expect EW NOT to reload
+        await expect(page.getByText("Saved")).toBeVisible();
+    });
+});

apps/web/playwright/e2e/devtools/lowbandwidth.spec.ts

@@ -0,0 +1,62 @@
+/*
+Copyright 2026 Element Creations 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 { getSampleFilePath } from "../../sample-files";
+
+test.describe("Devtools", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should allow enabling low bandwidth mode", async ({ page, homeserver, user, app }) => {
+        // Upload a picture
+        const userSettings = await app.settings.openUserSettings("Account");
+        const profileSettings = userSettings.locator(".mx_UserProfileSettings");
+        await profileSettings.getByAltText("Upload").setInputFiles(getSampleFilePath("riot.png"));
+        await app.closeDialog();
+        await app.closeVerifyToast();
+
+        // Create an initial room.
+        const createRoomDialog = await app.openCreateRoomDialog();
+        await createRoomDialog.getByRole("textbox", { name: "Name" }).fill("Test Room");
+        await createRoomDialog.getByRole("button", { name: "Create room" }).click();
+
+        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();
+        await dialog.getByLabel("Disable bandwidth-heavy features").click();
+        // Wait for refresh.
+        await page.waitForEvent("domcontentloaded");
+        await app.viewRoomByName("Test Room");
+
+        // This only appears when encryption has been disabled in the client.
+        await expect(page.getByText("The encryption used by this room isn't supported.")).toBeVisible();
+
+        // None of these should be requested.
+        let hasSentTyping = false;
+        let hasRequestedThumbnail = false;
+        await page.route("**/_matrix/client/v3/rooms/*/typing/*", async (route) => {
+            hasSentTyping = true;
+            await route.fulfill({ json: {} });
+        });
+        await page.route("**/_matrix/media/v3/thumbnail/**", async (route) => {
+            hasRequestedThumbnail = true;
+            await route.fulfill({ json: {} });
+        });
+        await page.route("**/_matrix/client/v1/media/thumbnail/**", async (route) => {
+            hasRequestedThumbnail = true;
+            await route.fulfill({ json: {} });
+        });
+
+        await composer.pressSequentially("Provoke typing request", { delay: 5 });
+        expect(hasSentTyping).toEqual(false);
+        expect(hasRequestedThumbnail).toEqual(false);
+    });
+});

apps/web/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");
+        },
+    );
+});