From a05ca97409139afb7187a645c8d42c52440eba0b Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 10 Jul 2025 15:50:18 +0200 Subject: [PATCH] Fix e2e icon colour (#30299) * fix: remove white background on e2e verification icon and put white on the checkmark * test(e2e): add non regression tests * chore: remove unused CSS mask --- playwright/e2e/crypto/crypto.spec.ts | 1 + .../e2e/crypto/device-verification.spec.ts | 45 ++++++++++-------- .../composer-e2e-icon-linux.png | Bin 0 -> 367 bytes .../device-verified-e2eIcon-linux.png | Bin 0 -> 3051 bytes res/css/views/rooms/_E2EIcon.pcss | 9 +--- 5 files changed, 28 insertions(+), 27 deletions(-) create mode 100644 playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png create mode 100644 playwright/snapshots/crypto/device-verification.spec.ts/device-verified-e2eIcon-linux.png diff --git a/playwright/e2e/crypto/crypto.spec.ts b/playwright/e2e/crypto/crypto.spec.ts index bad9072f0c..d69af46a72 100644 --- a/playwright/e2e/crypto/crypto.spec.ts +++ b/playwright/e2e/crypto/crypto.spec.ts @@ -168,6 +168,7 @@ test.describe("Cryptography", function () { // Take a snapshot of RoomSummaryCard with a verified E2EE icon await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png"); + await expect(page.locator(".mx_MessageComposer_e2eIcon")).toMatchScreenshot("composer-e2e-icon.png"); }, ); diff --git a/playwright/e2e/crypto/device-verification.spec.ts b/playwright/e2e/crypto/device-verification.spec.ts index 5ae53f649e..f325754326 100644 --- a/playwright/e2e/crypto/device-verification.spec.ts +++ b/playwright/e2e/crypto/device-verification.spec.ts @@ -48,31 +48,38 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => { return promiseVerificationRequest; } - test("Verify device with SAS during login", async ({ page, app, credentials, homeserver }) => { - await logIntoElement(page, credentials); + test( + "Verify device with SAS during login", + { tag: "@screenshot" }, + async ({ page, app, credentials, homeserver }) => { + await logIntoElement(page, credentials); - // Launch the verification request between alice and the bot - const verificationRequest = await initiateAliceVerificationRequest(page); + // Launch the verification request between alice and the bot + const verificationRequest = await initiateAliceVerificationRequest(page); - // Handle emoji SAS verification - const infoDialog = page.locator(".mx_InfoDialog"); - // the bot chooses to do an emoji verification - const verifier = await verificationRequest.evaluateHandle((request) => request.startVerification("m.sas.v1")); + // Handle emoji SAS verification + const infoDialog = page.locator(".mx_InfoDialog"); + // the bot chooses to do an emoji verification + const verifier = await verificationRequest.evaluateHandle((request) => + request.startVerification("m.sas.v1"), + ); - // Handle emoji request and check that emojis are matching - await doTwoWaySasVerification(page, verifier); + // Handle emoji request and check that emojis are matching + await doTwoWaySasVerification(page, verifier); - await infoDialog.getByRole("button", { name: "They match" }).click(); - await infoDialog.getByRole("button", { name: "Got it" }).click(); + await infoDialog.getByRole("button", { name: "They match" }).click(); + await expect(page.locator(".mx_E2EIcon_verified")).toMatchScreenshot("device-verified-e2eIcon.png"); + await infoDialog.getByRole("button", { name: "Got it" }).click(); - // Check that our device is now cross-signed - await checkDeviceIsCrossSigned(app); + // Check that our device is now cross-signed + await checkDeviceIsCrossSigned(app); - // Check that the current device is connected to key backup - // For now we don't check that the backup key is in cache because it's a bit flaky, - // as we need to wait for the secret gossiping to happen. - await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false); - }); + // Check that the current device is connected to key backup + // For now we don't check that the backup key is in cache because it's a bit flaky, + // as we need to wait for the secret gossiping to happen. + await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false); + }, + ); // Regression test for https://github.com/element-hq/element-web/issues/29110 test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => { diff --git a/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png b/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..05f5af8507acdf18c34e31a07a88c8baf8485546 GIT binary patch literal 367 zcmV-#0g(QQP)Px$DM>^@R49>S{Qv(y10leK#((_r-Q$n%&;(f+7#KeP{IU1$wLN#Q?Y?vE)|(d$ z3=HZb5-uuQt}5Ej%33^Z?2P~a{|{Y0ZOxT4SSbS=ksE z7?>HEb|;nm{`;qT_qrnwZ$qTHSlOV8lmtZ?7#L1GzU#HH-$PYr`pNxpGgO7e85kHC z|NsC0_~SdZzRDkeexo^`i3|IZFgkl^KqngkJAcGV*-(4M2@?!zkZ&1`hba%(M(2(orMK14gfkgW-=AtJvaaW N002ovPDHLkV1iMhq1yle literal 0 HcmV?d00001 diff --git a/playwright/snapshots/crypto/device-verification.spec.ts/device-verified-e2eIcon-linux.png b/playwright/snapshots/crypto/device-verification.spec.ts/device-verified-e2eIcon-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..479a8c17bb70531768665522a85f17f720ce81ac GIT binary patch literal 3051 zcmai0WmFX0)}9#{7#b1j80i=g0qL%xqy|Zek9{_;rgPxYUc|h)N9?A+~$%gd?A(@i~OR&&L00T&*&fG-Z1sBVn zzZ&l7)4NpR#GF^Y+tM)Q!@B$I4$dl>+($Z|=gu@w;S&ldSs6?`A_1y7@4TNl`j13P zWYC^p%JUTmr6Kv1i+3HrHgbb9MmD#%HJ`2aM&|WAk6{9^+5nuN0h0>AYSI4>rjdf! zsJ-Q7#RuyewYow~cOg8_SE)G8yJjE1DmnbCdOz(M^t7t;(P6<#8SHOo(ccLFlLw6? za$^jvIty({FGzJLNMpC`AtTxvwVS;o750qtlC0EpBR+Q@cVS0<=h&L1@cJ>DtHJ&K zPwOQMS~lGR4{#;^nQK;TEK$$xNNKC2Jo2Px?i`>itw3AZIfRR2OJbBodP`?zYR}*T zj0R&12fpRr+H_Uv!}biyh26`quC88nNjHHpWZ<-3-4lA2?CmAIdI+Wsro;JAlSPCx ztpgsa89ar%YS)^;hCd1gE-p~>lRGWl>V3>iO!aL1+qa3x6p|TG1^f2BbY-S^ZGU&s zHZ;1-!-f|2;DLj?7vwwtC@TExpsBgc!zgUn(&=!ttg~#)?JHB)6sokuMrAMw6$5y1 zze!Yu%w_?|@syZWW1}ZL0GPkz_XRFllN2oWcof2AMbC>Z^J@R;gmUB~mbE1q6Hdm| zLYnm5(=zy_6;;ZDDBOE=z6!TqEI>ATZpu%^nJ3ncy%f)wHQFM0WdfLf@=OR z5a04RMW1-`Y=EKcjMQMLg`b>iPEw{}l3p!R%&|P@EDP+D(yhs9cj21h!&)jlhCH_q zpG9AuU@jS+2woW0`}A{dL|daznq<=?`d|U`33xXR(ABw;utb#Sj5EiMqy_M89TE1$Qn!RaI4Sa zC+hh+%IoDxuFRM8dmFdX@2omYDhPVz#8q{D1a*dlAfM7%%FZHkzQ>f6VB?%V)?0c! zn4U^TxVpQ#8Kr0T6&DwUgMvTqO1<@*N^jpi_Am{7V$T$%H>5Q~N;-ceSvWhiqI8UR zIf=)W3K{BiiSR??_p=(HMug?5wvCb`?rub`*l-1}W8=VaQGL<+KE2!i7PU$$#NDaO z++3^YeMxk%vO6K^3lAcZc}BUEkGG*L93bEPmi*9VEPccnCo}{BtTXjEN*ImViEp1C zs)?(LEu0+j>!*N760mc6DugB@H|mYQ%;QxV%$C#L{Y<}0W6vSWzwYAFI|5tJ`_9rh z4GPI#^pTPRn=SY7jZJT_ImdieSvXpEFQZ8Ot0Veb+g>_Je0Ldq@@Dr_!BC8iqM`&p z4h;QfK2EVuV>NN}=d4~;LP^vWSGxyEQzyP{VqGVLFCpQh@1@#qkYl`J5iuxNi{wPFw=`F;yKe)4s`U%=JgEsXtdx98^ixnHBDIlyc%wb(DP{uTAcBd{3+a2e5LdH?3KRXcl)VaCk zctz{iHPh1*%w+V?-&53DQ)?Za&D90Mtj^=2i{~>NiJ%uhn~GGWVTaeXrQX~4^;jy; z46@5UdQvE)?#LB=nW`bp|M29vn0HvsDR znxJcVF<9L7iGTIDITEH{=I%xLkg#~QC(d)&hXW6igP{N+aeWc?9ez5`Dx_FK(rRkmcI2uc&x-tPVldE$&0PVI zst33-tqK=_GzS_A2`Ayc@B-DFRT4GsY>)uf_;_fDB>APG>2kZbhc}I`!koqrX{!Gd zE9`It#d&P3vd4=uZ}+UILZ^jqi;9XD^k2Tggt8iG$ZBKT!aNsMOpdEdVUnKf|ZG2 z#n=kcE`By2U-fkNjTh?v)2X2vw|20w~$aj}rRMT%)kX+3j z=ny`gIeIa6Tiu<8oX0NOo=1iS=G({JZv4f>pb;s-QYm0OU~&rwAZp#jkLcmsTdVQA zKxY<9?VU`v*PjY2>Rj{zP4O&X*h@db{f)Az`}2MMPbbg@X^xCN&JunXUwbVqPvqzs z!&=2pqpT;Z?Ef`&&8)1X4qf9QzbC6hSC#IAp|Qf2wz=VH5-^w!(1yZ8d=t+Zp)9=q z^H=tln^(Yq@6lWguzptcz)2)(hsr8e3StkuJz#}Vc!-sXO?eUE$4DqGx?Q7yZpLKB ztjk^dq~ThPZclj7axj2M%cQcHc`VtVq1Na=z~*Wns>t~=N`2m;tC4hehP7 zig-fU;XVaNX`;7Cb>$uf$o|mR53&?Ye^dB*sz-=d1h{Sr(^79FZqZ-qut`IA9Dfy! zUraZa8~@9V94YTErBcT_hy5Y6XJJ}jS>N(I%}$h%yDuw1x^!V1Ndm`4X7^tjd)r@^ zw*V|?(QMhaA)sa>iZslGba@XWw4iM7V#ED+x$0nW-uKtzrQJf#IB)oyA%M<%q?H6qoZEV>@9p3JACH}U2yecw`2H40I zHbRKRzK;H6NMTdh^SKhA)L_d%!*AcsTjJcc87GY0h9VGA{`Dg79V@G<%Q<(q?nwCz z^SQO3stGj!C>n22au!LcJj0mz>DapAwA$SCJ;XnOd!$^F+6?;8{PzPl6%R3H0bMQm zTT8a(V36Dx?&2MYT;-BvBfrQHblG}#-Ml!n?roccFyOLctqF8xTDI^D<9I6d@Ah;V oTo_!&@XvABSUkyp&rBG=zyYKOe;v?DoZbO?+D2Mc8jj)r0U&6jr2qf` literal 0 HcmV?d00001 diff --git a/res/css/views/rooms/_E2EIcon.pcss b/res/css/views/rooms/_E2EIcon.pcss index a8e3a34095..aea1b942d1 100644 --- a/res/css/views/rooms/_E2EIcon.pcss +++ b/res/css/views/rooms/_E2EIcon.pcss @@ -52,17 +52,10 @@ Please see LICENSE files in the repository root for full details. .mx_E2EIcon_normal::after { mask-image: url("$(res)/img/e2e/normal.svg"); - background-color: var(--cpd-color-icon-tertiary); + background-color: white; } .mx_E2EIcon_verified::after { mask-image: url("$(res)/img/e2e/verified.svg"); background-color: $e2e-verified-color; } - -// When using the "normal" icon as a background for verified or warning icon, -// it should be slightly smaller than the foreground icon -.mx_E2EIcon_verified, .mx_E2EIcon_warning .mx_E2EIcon_normal::after { - mask-size: 90%; - background-color: white; -}