Fix the hidden view source toggle on IRC layout (#10266)

* Display view source toggle on IRC layout

Signed-off-by: Suguru Hirahara <[email protected]>

* Add a test

Signed-off-by: Suguru Hirahara <[email protected]>

* Merge tests

Signed-off-by: Suguru Hirahara <[email protected]>

* Collapse hidden event source before checking clickability of view source toggle on IRC layout

Signed-off-by: Suguru Hirahara <[email protected]>

* Select view source event under the edited line on the test

Signed-off-by: Suguru Hirahara <[email protected]>

* Fix the test

Signed-off-by: Suguru Hirahara <[email protected]>

* lint

Signed-off-by: Suguru Hirahara <[email protected]>

---------

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

cypress/e2e/timeline/timeline.spec.ts

@@ -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);
@@ -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", () => {

res/css/views/rooms/_IRCLayout.pcss

@@ -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 */