Improve clickability of view source event toggle button (#9068)

* Improve clickability of view source event toggle button

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

* Fix compression

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

* Make it easy to select subsequent events

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

Author: luixxiul

cypress/e2e/14-timeline/timeline.spec.ts

@@ -151,6 +151,28 @@ describe("Timeline", () => {
             cy.percySnapshot("Configured room on IRC layout");
         });
 
+        it("should click top left of view source event toggle", () => {
+            sendEvent(roomId);
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
+            cy.contains(".mx_RoomView_body .mx_GenericEventListSummary " +
+                ".mx_GenericEventListSummary_summary", "created and configured the room.");
+
+            // Edit message
+            cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile_line", "Message").within(() => {
+                cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover
+                cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}");
+            });
+            cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "MessageEdit");
+
+            // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area
+            cy.get(".mx_EventTile .mx_ViewSourceEvent").realHover()
+                .get(".mx_EventTile .mx_ViewSourceEvent .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");
+        });
+
         it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => {
             cy.visit("/#/room/" + roomId);
             cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);

res/css/views/messages/_MessageActionBar.pcss

@@ -66,6 +66,14 @@ limitations under the License.
             top: 0;
             left: 0;
         }
+
+        .mx_EventTile_info .mx_ViewSourceEvent ~ & {
+            // improve clickability of view source event toggle button by removing vertical safe area
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
     }
 
     >* {

res/css/views/messages/_ViewSourceEvent.pcss

@@ -41,6 +41,7 @@ limitations under the License.
         mask-position: 0 center;
         mask-size: auto 12px;
         width: 12px;
+        min-width: 12px;
         background-color: $accent;
         mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
     }