imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove green "verified" bar for e2e events (#11496)

Browse source 
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.
This commit is contained in:
Richard van der Hoff 2023-09-01 10:41:14 +01:00 • committed by GitHub
parent 6faad7aae3
commit 30d997e21c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 0 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/crypto/crypto.spec.ts
View file

@ -332,7 +332,6 @@ describe("Cryptography", function () {
cy.findByText("Hoo!"); cy.findByText("Hoo!");
}) })
.closest(".mx_EventTile") .closest(".mx_EventTile")
.should("have.class", "mx_EventTile_verified")
.should("not.have.descendants", ".mx_EventTile_e2eIcon_warning"); .should("not.have.descendants", ".mx_EventTile_e2eIcon_warning");
// bob sends an edit to the first message with his unverified device // bob sends an edit to the first message with his unverified device
@ -377,7 +376,6 @@ describe("Cryptography", function () {
cy.findByText("Hee!"); cy.findByText("Hee!");
}) })
.closest(".mx_EventTile") .closest(".mx_EventTile")
.should("have.class", "mx_EventTile_verified")
.should("not.have.descendants", ".mx_EventTile_e2eIcon_warning"); .should("not.have.descendants", ".mx_EventTile_e2eIcon_warning");
}); });
}); });

10
res/css/structures/_FilePanel.pcss
View file

@ -52,16 +52,6 @@ limitations under the License.
padding-inline-start: 0; padding-inline-start: 0;
} }
&:hover {
&.mx_EventTile_verified,
&.mx_EventTile_unverified,
&.mx_EventTile_unknown {
.mx_EventTile_line {
box-shadow: none;
}
}
}
.mx_MFileBody { .mx_MFileBody {
line-height: 2.4rem; line-height: 2.4rem;
} }

31
res/css/views/rooms/_EventTile.pcss
View file

@ -257,21 +257,6 @@ $left-gutter: 64px;
.mx_EventTile_line { .mx_EventTile_line {
background-color: $event-selected-color; 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); 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"] { &[data-layout="bubble"] {
@ -1327,14 +1304,6 @@ $left-gutter: 64px;
position: absolute; /* for IRC layout */ position: absolute; /* for IRC layout */
top: 2px; /* Align with mx_EventTile_content */ 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"] { &[data-layout="bubble"] {

2
res/themes/legacy-light/css/_legacy-light.pcss
View file

@ -241,8 +241,6 @@ $copy-button-url: "$(res)/img/element-icons/copy.svg";
/* e2e */ /* e2e */
$e2e-verified-color: #0dbd8b; $e2e-verified-color: #0dbd8b;
$e2e-unknown-color: #e8bf37;
$e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ff5b55; $e2e-warning-color: #ff5b55;
$e2e-verified-color-light: var(--cpd-color-green-300); $e2e-verified-color-light: var(--cpd-color-green-300);
$e2e-warning-color-light: var(--cpd-color-red-300); $e2e-warning-color-light: var(--cpd-color-red-300);

2
res/themes/light/css/_light.pcss
View file

@ -210,8 +210,6 @@ $roomtile-default-badge-bg-color: $muted-fg-color;
/* e2e */ /* e2e */
/* ******************** */ /* ******************** */
$e2e-verified-color: var(--cpd-color-green-900); $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-warning-color: var(--cpd-color-red-900);
$e2e-verified-color-light: var(--cpd-color-green-300); $e2e-verified-color-light: var(--cpd-color-green-300);
$e2e-warning-color-light: var(--cpd-color-red-300); $e2e-warning-color-light: var(--cpd-color-red-300);

3
src/components/views/rooms/EventTile.tsx
View file

@ -981,9 +981,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
mx_EventTile_lastInSection: this.props.lastInSection, mx_EventTile_lastInSection: this.props.lastInSection,
mx_EventTile_contextual: this.props.contextual, mx_EventTile_contextual: this.props.contextual,
mx_EventTile_actionBarFocused: this.state.actionBarFocused, 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_bad: isEncryptionFailure,
mx_EventTile_emote: msgtype === MsgType.Emote, mx_EventTile_emote: msgtype === MsgType.Emote,
mx_EventTile_noSender: this.props.hideSender, mx_EventTile_noSender: this.props.hideSender,

14
test/components/views/rooms/EventTile-test.tsx
View file

@ -245,9 +245,6 @@ describe("EventTile", () => {
const eventTiles = container.getElementsByClassName("mx_EventTile"); const eventTiles = container.getElementsByClassName("mx_EventTile");
expect(eventTiles).toHaveLength(1); expect(eventTiles).toHaveLength(1);
const eventTile = eventTiles[0];
expect(eventTile.classList).toContain("mx_EventTile_unverified");
// there should be a warning shield // there should be a warning shield
expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(1); expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(1);
@ -273,9 +270,6 @@ describe("EventTile", () => {
const eventTiles = container.getElementsByClassName("mx_EventTile"); const eventTiles = container.getElementsByClassName("mx_EventTile");
expect(eventTiles).toHaveLength(1); expect(eventTiles).toHaveLength(1);
const eventTile = eventTiles[0];
expect(eventTile.classList).toContain("mx_EventTile_verified");
// there should be no warning // there should be no warning
expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0); expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0);
@ -299,9 +293,6 @@ describe("EventTile", () => {
const eventTiles = container.getElementsByClassName("mx_EventTile"); const eventTiles = container.getElementsByClassName("mx_EventTile");
expect(eventTiles).toHaveLength(1); expect(eventTiles).toHaveLength(1);
const eventTile = eventTiles[0];
expect(eventTile.classList).toContain("mx_EventTile_verified");
// there should be no warning // there should be no warning
expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0); expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0);
@ -324,7 +315,6 @@ describe("EventTile", () => {
}); });
// check it was updated // 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")).toHaveLength(1);
expect(container.getElementsByClassName("mx_EventTile_e2eIcon")[0].classList).toContain( expect(container.getElementsByClassName("mx_EventTile_e2eIcon")[0].classList).toContain(
"mx_EventTile_e2eIcon_warning", "mx_EventTile_e2eIcon_warning",
@ -351,9 +341,6 @@ describe("EventTile", () => {
const eventTiles = container.getElementsByClassName("mx_EventTile"); const eventTiles = container.getElementsByClassName("mx_EventTile");
expect(eventTiles).toHaveLength(1); expect(eventTiles).toHaveLength(1);
const eventTile = eventTiles[0];
expect(eventTile.classList).toContain("mx_EventTile_verified");
// there should be no warning // there should be no warning
expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0); expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0);
@ -372,7 +359,6 @@ describe("EventTile", () => {
}); });
// check it was updated // 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")).toHaveLength(1);
expect(container.getElementsByClassName("mx_EventTile_e2eIcon")[0].classList).toContain( expect(container.getElementsByClassName("mx_EventTile_e2eIcon")[0].classList).toContain(
"mx_EventTile_e2eIcon_warning", "mx_EventTile_e2eIcon_warning",