From 94950c698724340f4ccff1a291e8cfb78437c70b Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 6 Mar 2023 10:01:18 +0000
Subject: [PATCH] Reduce height of toggle on expanded view source event
 (#10283)

* Reduce height of toggle on expanded view source event

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add a test to check size and position of toggle on expanded view source event

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 cypress/e2e/timeline/timeline.spec.ts        | 28 ++++++++++++--------
 res/css/views/messages/_ViewSourceEvent.pcss | 24 +++++++++--------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts
index 8d6aa93101..3876e457b5 100644
--- a/cypress/e2e/timeline/timeline.spec.ts
+++ b/cypress/e2e/timeline/timeline.spec.ts
@@ -351,6 +351,9 @@ describe("Timeline", () => {
             // 1. clickability of top left of view source event toggle
             // 2. clickability of view source toggle on IRC layout
 
+            // Exclude timestamp from snapshot
+            const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
+
             sendEvent(roomId);
             cy.visit("/#/room/" + roomId);
             cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
@@ -376,26 +379,29 @@ describe("Timeline", () => {
                     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")
+            // Make sure the expand toggle works
+            cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent_expanded")
+                .should("be.visible")
                 .realHover()
                 .within(() => {
-                    cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false });
+                    cy.get(".mx_ViewSourceEvent_toggle")
+                        // Check size and position of toggle on expanded view source event
+                        // See: _ViewSourceEvent.pcss
+                        .should("have.css", "height", "12px") // --ViewSourceEvent_toggle-size
+                        .should("have.css", "align-self", "flex-end")
+
+                        // Click again to collapse the source
+                        .click("topLeft", { force: false });
                 });
-            cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("not.exist");
+
+            // Make sure the collapse toggle works
+            cy.get(".mx_EventTile_last[data-layout=group] .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")
diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss
index 63698a1371..725c834188 100644
--- a/res/css/views/messages/_ViewSourceEvent.pcss
+++ b/res/css/views/messages/_ViewSourceEvent.pcss
@@ -29,32 +29,34 @@ limitations under the License.
 
     pre {
         line-height: 1.2;
-        margin: 3.5px 0;
+        margin: 3.5px 0; /* TODO: use a variable */
     }
 
     .mx_ViewSourceEvent_toggle {
+        --ViewSourceEvent_toggle-size: 12px;
+
         visibility: hidden;
         /* override styles from AccessibleButton */
         border-radius: 0;
         /* icon */
         mask-repeat: no-repeat;
         mask-position: 0 center;
-        mask-size: auto 12px;
-        width: 12px;
-        min-width: 12px;
+        mask-size: auto var(--ViewSourceEvent_toggle-size);
+        width: var(--ViewSourceEvent_toggle-size);
+        min-width: var(--ViewSourceEvent_toggle-size);
         background-color: $accent;
         mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
+
+        .mx_EventTile:hover & {
+            visibility: visible;
+        }
     }
 
     &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
+        align-self: flex-end;
+        height: var(--ViewSourceEvent_toggle-size);
         mask-position: 0 bottom;
-        margin-bottom: 5px;
+        margin-bottom: 5px; /* TODO: use a variable */
         mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
     }
 }
-
-.mx_EventTile:hover {
-    .mx_ViewSourceEvent_toggle {
-        visibility: visible;
-    }
-}