From 30d997e21c2e23521a8cce6d4c01d1f2377d3bb2 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Date: Fri, 1 Sep 2023 10:41:14 +0100 Subject: [PATCH] Remove green "verified" bar for e2e events (#11496) There is a little-known feature where, if you have verified a user (eg, via the emoji game), then when you mouse-over a message that they sent, it gets a green highlight. We also show a brown bar sometimes, and according to the CSS there may be a yellow bar too? Very few people seem to know this exists, and even if you do know it exists nobody seems to understand what exactly the various colours are supposed to be. So, rather than porting this magic mystery feature to Rust Crypto, let's rip it out. --- cypress/e2e/crypto/crypto.spec.ts | 2 -- res/css/structures/_FilePanel.pcss | 10 ------ res/css/views/rooms/_EventTile.pcss | 31 ------------------- .../legacy-light/css/_legacy-light.pcss | 2 -- res/themes/light/css/_light.pcss | 2 -- src/components/views/rooms/EventTile.tsx | 3 -- .../components/views/rooms/EventTile-test.tsx | 14 --------- 7 files changed, 64 deletions(-) diff --git a/cypress/e2e/crypto/crypto.spec.ts b/cypress/e2e/crypto/crypto.spec.ts index 61995db9f8..3c815ab408 100644 --- a/cypress/e2e/crypto/crypto.spec.ts +++ b/cypress/e2e/crypto/crypto.spec.ts @@ -332,7 +332,6 @@ describe("Cryptography", function () { cy.findByText("Hoo!"); }) .closest(".mx_EventTile") - .should("have.class", "mx_EventTile_verified") .should("not.have.descendants", ".mx_EventTile_e2eIcon_warning"); // bob sends an edit to the first message with his unverified device @@ -377,7 +376,6 @@ describe("Cryptography", function () { cy.findByText("Hee!"); }) .closest(".mx_EventTile") - .should("have.class", "mx_EventTile_verified") .should("not.have.descendants", ".mx_EventTile_e2eIcon_warning"); }); }); diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss index 4ba4ddbcf0..1c80cde901 100644 --- a/res/css/structures/_FilePanel.pcss +++ b/res/css/structures/_FilePanel.pcss @@ -52,16 +52,6 @@ limitations under the License. padding-inline-start: 0; } - &:hover { - &.mx_EventTile_verified, - &.mx_EventTile_unverified, - &.mx_EventTile_unknown { - .mx_EventTile_line { - box-shadow: none; - } - } - } - .mx_MFileBody { line-height: 2.4rem; } diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 8b8d370ac7..cbd35c914d 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -257,21 +257,6 @@ $left-gutter: 64px; .mx_EventTile_line { background-color: $event-selected-color; } - - &.mx_EventTile_verified .mx_EventTile_line { - box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) - $e2e-verified-color; - } - - &.mx_EventTile_unverified .mx_EventTile_line { - box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) - $e2e-unverified-color; - } - - &.mx_EventTile_unknown .mx_EventTile_line { - box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) - $e2e-unknown-color; - } } } @@ -596,14 +581,6 @@ $left-gutter: 64px; padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); } } - - &:hover { - &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, - &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, - &.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { - padding-inline-start: calc($left-gutter + 18px + var(--selected-message-border-width)); - } - } } &[data-layout="bubble"] { @@ -1327,14 +1304,6 @@ $left-gutter: 64px; position: absolute; /* for IRC layout */ top: 2px; /* Align with mx_EventTile_content */ } - - &:hover { - &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, - &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, - &.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { - padding-inline-start: 0; - } - } } &[data-layout="bubble"] { diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index a48301009c..2ece9e6a84 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -241,8 +241,6 @@ $copy-button-url: "$(res)/img/element-icons/copy.svg"; /* e2e */ $e2e-verified-color: #0dbd8b; -$e2e-unknown-color: #e8bf37; -$e2e-unverified-color: #e8bf37; $e2e-warning-color: #ff5b55; $e2e-verified-color-light: var(--cpd-color-green-300); $e2e-warning-color-light: var(--cpd-color-red-300); diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index e4428ac181..c257a064e8 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -210,8 +210,6 @@ $roomtile-default-badge-bg-color: $muted-fg-color; /* e2e */ /* ******************** */ $e2e-verified-color: var(--cpd-color-green-900); -$e2e-unknown-color: var(--cpd-color-yellow-900); -$e2e-unverified-color: var(--cpd-color-green-900); $e2e-warning-color: var(--cpd-color-red-900); $e2e-verified-color-light: var(--cpd-color-green-300); $e2e-warning-color-light: var(--cpd-color-red-300); diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 4ca9ca73fc..986eafcca9 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -981,9 +981,6 @@ export class UnwrappedEventTile extends React.Component mx_EventTile_lastInSection: this.props.lastInSection, mx_EventTile_contextual: this.props.contextual, mx_EventTile_actionBarFocused: this.state.actionBarFocused, - mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2EState.Verified, - mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2EState.Warning, - mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2EState.Unknown, mx_EventTile_bad: isEncryptionFailure, mx_EventTile_emote: msgtype === MsgType.Emote, mx_EventTile_noSender: this.props.hideSender, diff --git a/test/components/views/rooms/EventTile-test.tsx b/test/components/views/rooms/EventTile-test.tsx index 80d8804fb7..6ce54db760 100644 --- a/test/components/views/rooms/EventTile-test.tsx +++ b/test/components/views/rooms/EventTile-test.tsx @@ -245,9 +245,6 @@ describe("EventTile", () => { const eventTiles = container.getElementsByClassName("mx_EventTile"); expect(eventTiles).toHaveLength(1); - const eventTile = eventTiles[0]; - - expect(eventTile.classList).toContain("mx_EventTile_unverified"); // there should be a warning shield expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(1); @@ -273,9 +270,6 @@ describe("EventTile", () => { const eventTiles = container.getElementsByClassName("mx_EventTile"); expect(eventTiles).toHaveLength(1); - const eventTile = eventTiles[0]; - - expect(eventTile.classList).toContain("mx_EventTile_verified"); // there should be no warning expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0); @@ -299,9 +293,6 @@ describe("EventTile", () => { const eventTiles = container.getElementsByClassName("mx_EventTile"); expect(eventTiles).toHaveLength(1); - const eventTile = eventTiles[0]; - - expect(eventTile.classList).toContain("mx_EventTile_verified"); // there should be no warning expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0); @@ -324,7 +315,6 @@ describe("EventTile", () => { }); // check it was updated - expect(eventTile.classList).toContain("mx_EventTile_unverified"); expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(1); expect(container.getElementsByClassName("mx_EventTile_e2eIcon")[0].classList).toContain( "mx_EventTile_e2eIcon_warning", @@ -351,9 +341,6 @@ describe("EventTile", () => { const eventTiles = container.getElementsByClassName("mx_EventTile"); expect(eventTiles).toHaveLength(1); - const eventTile = eventTiles[0]; - - expect(eventTile.classList).toContain("mx_EventTile_verified"); // there should be no warning expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0); @@ -372,7 +359,6 @@ describe("EventTile", () => { }); // check it was updated - expect(eventTile.classList).not.toContain("mx_EventTile_verified"); expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(1); expect(container.getElementsByClassName("mx_EventTile_e2eIcon")[0].classList).toContain( "mx_EventTile_e2eIcon_warning",