nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix e2e warning icon should be white (#30539)

Browse Source 
* fix: e2e warning icon should be white

* tests: add e2e warning screenshot test
This commit is contained in:
Florian Duros
2025-08-12 20:26:56 +02:00
committed by GitHub
parent 713f524948
commit 31506ef864
3 changed files with 88 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
playwright/e2e/crypto/event-shields.spec.ts
View File

@@ -58,108 +58,108 @@ test.describe("Cryptography", function () {
await app.client.network.setupRoute(); await app.client.network.setupRoute();
}); });
test("should show the correct shield on e2e events", async ({ test(
page, "should show the correct shield on e2e events",
app, { tag: "@screenshot" },
bot: bob, async ({ page, app, bot: bob, homeserver }, workerInfo) => {
homeserver, // Bob has a second, not cross-signed, device
}, workerInfo) => { const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
// Bob has a second, not cross-signed, device
const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
// Dismiss the toasts nagging us, otherwise they get in the way of clicking the room list // Dismiss the toasts nagging us, otherwise they get in the way of clicking the room list
await page.getByRole("button", { name: "Dismiss" }).click(); await page.getByRole("button", { name: "Dismiss" }).click();
await page.getByRole("button", { name: "Yes, dismiss" }).click(); await page.getByRole("button", { name: "Yes, dismiss" }).click();
await bob.sendEvent(testRoomId, null, "m.room.encrypted", { await bob.sendEvent(testRoomId, null, "m.room.encrypted", {
algorithm: "m.megolm.v1.aes-sha2", algorithm: "m.megolm.v1.aes-sha2",
ciphertext: "the bird is in the hand", ciphertext: "the bird is in the hand",
}); });
const last = page.locator(".mx_EventTile_last"); const last = page.locator(".mx_EventTile_last");
await expect(last).toContainText("Unable to decrypt message"); await expect(last).toContainText("Unable to decrypt message");
const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon"); const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/); await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/);
await lastE2eIcon.focus(); await lastE2eIcon.focus();
await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText( await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
"This message could not be decrypted", "This message could not be decrypted",
); );
/* Should show a red padlock for an unencrypted message in an e2e room */ /* Should show a red padlock for an unencrypted message in an e2e room */
await bob.evaluate( await bob.evaluate(
(cli, testRoomId) => (cli, testRoomId) =>
cli.http.authedRequest( cli.http.authedRequest(
window.matrixcs.Method.Put, window.matrixcs.Method.Put,
`/rooms/${encodeURIComponent(testRoomId)}/send/m.room.message/test_txn_1`, `/rooms/${encodeURIComponent(testRoomId)}/send/m.room.message/test_txn_1`,
undefined, undefined,
{ {
msgtype: "m.text", msgtype: "m.text",
body: "test unencrypted", body: "test unencrypted",
}, },
), ),
testRoomId, testRoomId,
); );
await expect(last).toContainText("test unencrypted"); await expect(last).toContainText("test unencrypted");
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/); await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
await lastE2eIcon.focus(); await expect(lastE2eIcon).toMatchScreenshot("event-shield-warning.png");
await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted"); await lastE2eIcon.focus();
await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted");
/* Should show no padlock for an unverified user */ /* Should show no padlock for an unverified user */
// bob sends a valid event // bob sends a valid event
await bob.sendMessage(testRoomId, "test encrypted 1"); await bob.sendMessage(testRoomId, "test encrypted 1");
// the message should appear, decrypted, with no warning, but also no "verified" // the message should appear, decrypted, with no warning, but also no "verified"
const lastTile = page.locator(".mx_EventTile_last"); const lastTile = page.locator(".mx_EventTile_last");
const lastTileE2eIcon = lastTile.locator(".mx_EventTile_e2eIcon"); const lastTileE2eIcon = lastTile.locator(".mx_EventTile_e2eIcon");
await expect(lastTile).toContainText("test encrypted 1"); await expect(lastTile).toContainText("test encrypted 1");
// no e2e icon // no e2e icon
await expect(lastTileE2eIcon).not.toBeVisible(); await expect(lastTileE2eIcon).not.toBeVisible();
/* Now verify Bob */ /* Now verify Bob */
await verify(app, bob); await verify(app, bob);
/* Existing message should be updated when user is verified. */ /* Existing message should be updated when user is verified. */
await expect(last).toContainText("test encrypted 1"); await expect(last).toContainText("test encrypted 1");
// still no e2e icon // still no e2e icon
await expect(last.locator(".mx_EventTile_e2eIcon")).not.toBeVisible(); await expect(last.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
/* should show no padlock, and be verified, for a message from a verified device */ /* should show no padlock, and be verified, for a message from a verified device */
await bob.sendMessage(testRoomId, "test encrypted 2"); await bob.sendMessage(testRoomId, "test encrypted 2");
await expect(lastTile).toContainText("test encrypted 2"); await expect(lastTile).toContainText("test encrypted 2");
// no e2e icon // no e2e icon
await expect(lastTileE2eIcon).not.toBeVisible(); await expect(lastTileE2eIcon).not.toBeVisible();
/* should show red padlock for a message from an unverified device */ /* should show red padlock for a message from an unverified device */
await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified"); await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified");
await expect(lastTile).toContainText("test encrypted from unverified"); await expect(lastTile).toContainText("test encrypted from unverified");
await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/); await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
await lastTileE2eIcon.focus(); await lastTileE2eIcon.focus();
await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText( await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
"Encrypted by a device not verified by its owner.", "Encrypted by a device not verified by its owner.",
); );
/* Should show a red padlock for a message from an unverified device. /* Should show a red padlock for a message from an unverified device.
* Rust crypto remembers the verification state of the sending device, so it will know that the device was * Rust crypto remembers the verification state of the sending device, so it will know that the device was
* unverified, even if it gets deleted. */ * unverified, even if it gets deleted. */
// bob deletes his second device // bob deletes his second device
await bobSecondDevice.evaluate((cli) => cli.logout(true)); await bobSecondDevice.evaluate((cli) => cli.logout(true));
// wait for the logout to propagate. // wait for the logout to propagate.
await waitForDevices(app, bob.credentials.userId, 1); await waitForDevices(app, bob.credentials.userId, 1);
// close and reopen the room, to get the shield to update. // close and reopen the room, to get the shield to update.
await app.viewRoomByName("Bob"); await app.viewRoomByName("Bob");
await app.viewRoomByName("TestRoom"); await app.viewRoomByName("TestRoom");
await expect(last).toContainText("test encrypted from unverified"); await expect(last).toContainText("test encrypted from unverified");
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/); await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
await lastE2eIcon.focus(); await lastE2eIcon.focus();
await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText( await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
"Encrypted by a device not verified by its owner.", "Encrypted by a device not verified by its owner.",
); );
}); },
);
test("Should show a grey padlock for a key restored from backup", async ({ test("Should show a grey padlock for a key restored from backup", async ({
page, page,

BIN
playwright/snapshots/crypto/event-shields.spec.ts/event-shield-warning-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 B

3
res/css/views/rooms/_E2EIcon.pcss
View File

@@ -55,7 +55,8 @@ Please see LICENSE files in the repository root for full details.
background-color: var(--cpd-color-icon-tertiary); background-color: var(--cpd-color-icon-tertiary);
} }
.mx_E2EIcon_verified { .mx_E2EIcon_verified,
.mx_E2EIcon_warning {
.mx_E2EIcon_normal::after { .mx_E2EIcon_normal::after {
background-color: white; background-color: white;
} }