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.
matrix-org · Sep 1, 2023 · 30d997e · 30d997e
1 parent 6faad7a
commit 30d997e
Show file tree

Hide file tree

Showing 7 changed files with 0 additions and 64 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -981,9 +981,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             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
@@ -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",