Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix the hidden view source toggle on IRC layout #10266

Merged
merged 7 commits into from
Mar 1, 2023
Merged

Fix the hidden view source toggle on IRC layout #10266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6e63015
Display view source toggle on IRC layout
luixxiul Mar 1, 2023
d474eb6
Add a test
luixxiul Mar 1, 2023
21d1664
Merge tests
luixxiul Mar 1, 2023
98f5520
Collapse hidden event source before checking clickability of view sou…
luixxiul Mar 1, 2023
80d7a33
Select view source event under the edited line on the test
luixxiul Mar 1, 2023
0c669e4
Fix the test
luixxiul Mar 1, 2023
cd755dc
lint
luixxiul Mar 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 43 additions & 3 deletions cypress/e2e/timeline/timeline.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,11 @@ describe("Timeline", () => {
});
});

it("should click top left of view source event toggle", () => {
it("should click view source event toggle", () => {
// This test checks:
// 1. clickability of top left of view source event toggle
// 2. clickability of view source toggle on IRC layout

sendEvent(roomId);
cy.visit("/#/room/" + roomId);
cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
Expand All @@ -254,16 +258,52 @@ describe("Timeline", () => {
});
cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist");

// 1. clickability of top left of view source event toggle

// Click top left of the event toggle, which should not be covered by MessageActionBar's safe area
cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent")
cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent")
.should("exist")
.realHover()
.within(() => {
cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false });
});

// Make sure the expand toggle worked
cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("be.visible");

// Click again to collapse the source
cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent")
.should("exist")
.realHover()
.within(() => {
cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false });
});
cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("not.exist");

// 2. clickability of view source toggle on IRC layout

// Enable IRC layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);

// Exclude timestamp from snapshot
const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";

// Hover the view source toggle on IRC layout
cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent")
.should("exist")
.realHover()
.percySnapshotElement("Hovered hidden event line on IRC layout", { percyCSS });

// Click view source event toggle
cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent")
.should("exist")
.realHover()
.within(() => {
cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false });
});

// Make sure the expand toggle worked
cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible");
cy.get(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded").should("be.visible");
});

it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => {
Expand Down
7 changes: 6 additions & 1 deletion res/css/views/rooms/_IRCLayout.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,12 +130,17 @@ $irc-line-height: $font-18px;
.mx_TextualEvent,
.mx_ViewSourceEvent,
.mx_MTextBody {
display: inline-block;
/* add a 1px padding top and bottom because our larger
emoji font otherwise gets cropped by anti-zalgo */
padding: var(--EventTile_irc_line-padding-block) 0;
}

.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_MTextBody {
display: inline-block;
}

.mx_ReplyTile {
.mx_MTextBody {
display: -webkit-box; /* Enable -webkit-line-clamp */
Expand Down