Align info EventTile and normal EventTile on IRC layout (#10197)

* fixes alignment issue in IRC layout
* adds cypress test for alignment

---------

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

Author: luixxiul

cypress/e2e/timeline/timeline.spec.ts

@@ -179,10 +179,11 @@ describe("Timeline", () => {
             // Check the event line has margin instead of inset property
             // cf. _EventTile.pcss
             //  --EventTile_irc_line_info-margin-inline-start
-            //  = calc(var(--name-width) + 10px + var(--icon-width))
-            //  = 80 + 10 + 14 = 104px
+            //  = calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding))
+            //  = 80 + 14 + 5 = 99px
+
             cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line")
-                .should("have.css", "margin-inline-start", "104px")
+                .should("have.css", "margin-inline-start", "99px")
                 .should("have.css", "inset-inline-start", "0px");
 
             // Exclude timestamp and read marker from snapshot
@@ -193,6 +194,113 @@ describe("Timeline", () => {
             cy.checkA11y();
         });
 
+        it("should align generic event list summary with messages and emote on IRC layout", () => {
+            // This test aims to check:
+            // 1. Alignment of collapsed GELS (generic event list summary) and messages
+            // 2. Alignment of expanded GELS and messages
+            // 3. Alignment of expanded GELS and placeholder of deleted message
+            // 4. Alignment of expanded GELS, placeholder of deleted message, and emote
+
+            // Exclude timestamp from snapshot of mx_MainSplit
+            const percyCSS = ".mx_MainSplit .mx_MessageTimestamp { visibility: hidden !important; }";
+
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+
+            // Wait until configuration is finished
+            cy.contains(
+                ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
+                "created and configured the room.",
+            ).should("exist");
+
+            // Send messages
+            cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
+            cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello again, Mr. Bot{enter}");
+            // Make sure the second message was sent
+            cy.get(".mx_RoomView_MessageList > .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible");
+
+            // 1. Alignment of collapsed GELS (generic event list summary) and messages
+            // Check inline start spacing of collapsed GELS
+            // See: _EventTile.pcss
+            // .mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line
+            //  = var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding)
+            //  = 80 + 14 + 46 + 2 * 5
+            //  = 150px
+            cy.get(".mx_GenericEventListSummary[data-layout=irc] > .mx_EventTile_line").should(
+                "have.css",
+                "padding-inline-start",
+                "150px",
+            );
+            // Check width and spacing values of elements in .mx_EventTile, which should be equal to 150px
+            // --right-padding should be applied
+            cy.get(".mx_EventTile > *").should("have.css", "margin-right", "5px");
+            // --name-width width zero inline end margin should be applied
+            cy.get(".mx_EventTile .mx_DisambiguatedProfile")
+                .should("have.css", "width", "80px")
+                .should("have.css", "margin-inline-end", "0px");
+            // --icon-width should be applied
+            cy.get(".mx_EventTile .mx_EventTile_avatar > .mx_BaseAvatar").should("have.css", "width", "14px");
+            // $MessageTimestamp_width should be applied
+            cy.get(".mx_EventTile > a").should("have.css", "min-width", "46px");
+            // Record alignment of collapsed GELS and messages on messagePanel
+            cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS and messages on IRC layout", { percyCSS });
+
+            // 2. Alignment of expanded GELS and messages
+            // Click "expand" link button
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
+            // Check inline start spacing of info line on expanded GELS
+            cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line")
+                // See: _EventTile.pcss
+                // --EventTile_irc_line_info-margin-inline-start
+                // = 80 + 14 + 1 * 5
+                .should("have.css", "margin-inline-start", "99px");
+            // Record alignment of expanded GELS and messages on messagePanel
+            cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS and messages on IRC layout", { percyCSS });
+
+            // 3. Alignment of expanded GELS and placeholder of deleted message
+            // Delete the second (last) message
+            cy.get(".mx_RoomView_MessageList > .mx_EventTile_last").realHover();
+            cy.get(".mx_RoomView_MessageList > .mx_EventTile_last .mx_MessageActionBar_optionsButton", {
+                timeout: 1000,
+            })
+                .should("exist")
+                .realHover()
+                .click({ force: false });
+            cy.get(".mx_IconizedContextMenu_item[aria-label=Remove]").should("be.visible").click({ force: false });
+            // Confirm deletion
+            cy.get(".mx_Dialog_buttons button[data-testid=dialog-primary-button]")
+                .should("have.text", "Remove")
+                .click({ force: false });
+            // Make sure the dialog was closed and the second (last) message was redacted
+            cy.get(".mx_Dialog").should("not.exist");
+            cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_RedactedBody").should("be.visible");
+            cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible");
+            // Record alignment of expanded GELS and placeholder of deleted message on messagePanel
+            cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS and with placeholder of deleted message", {
+                percyCSS,
+            });
+
+            // 4. Alignment of expanded GELS, placeholder of deleted message, and emote
+            // Send a emote
+            cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("/me says hello to Mr. Bot{enter}");
+            // Check inline start margin of its avatar
+            // Here --right-padding is for the avatar on the message line
+            // See: _IRCLayout.pcss
+            // .mx_IRCLayout .mx_EventTile_emote .mx_EventTile_avatar
+            // = calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding))
+            // = 80 + 14 + 1 * 5
+            cy.get(".mx_EventTile_emote .mx_EventTile_avatar").should("have.css", "margin-left", "99px");
+            // Make sure emote was sent
+            cy.get(".mx_EventTile_last.mx_EventTile_emote .mx_EventTile_receiptSent").should("be.visible");
+            // Record alignment of expanded GELS, placeholder of deleted message, and emote
+            cy.get(".mx_MainSplit").percySnapshotElement(
+                "Expanded GELS and with emote and placeholder of deleted message",
+                {
+                    percyCSS,
+                },
+            );
+        });
+
         it("should set inline start padding to a hidden event line", () => {
             sendEvent(roomId);
             cy.visit("/#/room/" + roomId);

res/css/views/rooms/_EventTile.pcss

@@ -270,7 +270,11 @@ $left-gutter: 64px;
     }
 
     &[data-layout="irc"] {
-        --EventTile_irc_line_info-margin-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
+        /* add --right-padding value of MessageTimestamp only */
+        /* stylelint-disable-next-line declaration-colon-space-after */
+        --EventTile_irc_line_info-margin-inline-start: calc(
+            var(--name-width) + var(--icon-width) + 1 * var(--right-padding)
+        );
 
         .mx_EventTile_msgOption {
             .mx_ReadReceiptGroup {
@@ -483,20 +487,12 @@ $left-gutter: 64px;
     }
 
     &[data-layout="irc"] {
-        .mx_EventTile_line .mx_RedactedBody {
-            padding-left: 24px; /* 25px - 1px */
-
-            &::before {
-                left: var(--right-padding);
-            }
-        }
-
         /* Apply only collapsed events block */
         > .mx_EventTile_line {
-            /* 15 px of padding */
+            /* add --right-padding value of MessageTimestamp and avatar only */
             /* stylelint-disable-next-line declaration-colon-space-after */
             padding-left: calc(
-                var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)
+                var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding)
             );
         }
     }

res/css/views/rooms/_IRCLayout.pcss

@@ -159,7 +159,8 @@ $irc-line-height: $font-18px;
 
     .mx_EventTile_emote {
         .mx_EventTile_avatar {
-            margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding));
+            /* add --right-padding value of MessageTimestamp only */
+            margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
         }
     }