This somehow works

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/rooms/_EventTile.scss

@@ -521,16 +521,60 @@ $left-gutter: 64px;
     display: inline-block;
     visibility: hidden;
     cursor: pointer;
-    top: 6px;
+    top: 31px;
     right: 6px;
     width: 19px;
     height: 19px;
     mask-image: url($copy-button-url);
     background-color: $message-action-bar-fg-color;
 }
+.mx_EventTile_collapseButton {
+    position: absolute;
+    display: inline-block;
+    visibility: hidden;
+    cursor: pointer;
+    top: 6px;
+    right: 6px;
+    width: 19px;
+    height: 19px;
+    mask-image: url($collapse-button-url);
+    background-color: $message-action-bar-fg-color;
+}
+.mx_EventTile_expandButton {
+    position: absolute;
+    display: inline-block;
+    visibility: hidden;
+    cursor: pointer;
+    top: 6px;
+    right: 6px;
+    width: 19px;
+    height: 19px;
+    mask-image: url($expand-button-url);
+    background-color: $message-action-bar-fg-color;
+}
+
+/*.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
+    visibility: visible;
+}
+
+.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton {
+    visibility: visible;
+}
+
+.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
+    visibility: visible;
+}*/
+
 
 .mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton, 
+.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton, 
+.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
     visibility: visible;
 }
 

res/img/feather-customised/maximize.svg

@@ -0,0 +1,24 @@
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2">
+  <polyline
+     points="15 3 21 3 21 9"
+     id="polyline2"
+     transform="matrix(0.60029695,0,0,0.59437231,1.7964367,1.8097068)" />
+  <polyline
+     points="9 21 3 21 3 15"
+     id="polyline4"
+     transform="matrix(0.60029695,0,0,0.59437231,1.7964367,1.8097068)" />
+  <line
+     x1="14.402673"
+     y1="3.5928237"
+     x2="10.200594"
+     y2="7.7534299"
+     id="line6"
+     style="stroke-width:1.19465" />
+  <line
+     x1="3.5973275"
+     y1="14.291526"
+     x2="7.7994061"
+     y2="10.130919"
+     id="line8"
+     style="stroke-width:1.19465" />
+</svg>

res/img/feather-customised/minimize.svg

@@ -0,0 +1,24 @@
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2">
+  <polyline
+     points="4 14 10 14 10 20"
+     id="polyline2"
+     transform="matrix(0.60000002,0,0,0.6,1.8000002,1.8000004)" />
+  <polyline
+     points="20 10 14 10 14 4"
+     id="polyline4"
+     transform="matrix(0.60000002,0,0,0.6,1.8000002,1.8000004)" />
+  <line
+     x1="10.200001"
+     y1="7.8000002"
+     x2="14.4"
+     y2="3.6000004"
+     id="line6"
+     style="stroke-width:1.2" />
+  <line
+     x1="3.6000001"
+     y1="14.4"
+     x2="7.8000007"
+     y2="10.2"
+     id="line8"
+     style="stroke-width:1.2" />
+</svg>

res/themes/legacy-light/css/_legacy-light.scss

@@ -237,7 +237,8 @@ $event-redacted-border-color: #cccccc;
 $event-timestamp-color: #acacac;
 
 $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
-
+$collapse-button-url: "$(res)/img/feather-customised/minimize.svg";
+$expand-button-url: "$(res)/img/feather-customised/maximize.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

res/themes/light/css/_light.scss

@@ -237,6 +237,8 @@ $event-redacted-border-color: #cccccc;
 $event-timestamp-color: #acacac;
 
 $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
+$collapse-button-url: "$(res)/img/feather-customised/minimize.svg";
+$expand-button-url: "$(res)/img/feather-customised/maximize.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

src/components/views/messages/TextualBody.js

@@ -97,8 +97,9 @@ export default class TextualBody extends React.Component {
                     // Wrap a div around <pre> so that the copy button can be correctly positioned
                     // when the <pre> overflows and is scrolled horizontally.
                     const div = this._wrapInDiv(blocks[i]);
-                    this._handleCodeBlockExpansion(div);
+                    this._handleCodeBlockExpansion(div.firstChild);
                     this._addCodeCopyButton(div);
+                    this._addCodeExpansionButton(div);
                 }
                 // Do this asynchronously: parsing code takes time and we don't
                 // need to block the DOM update on it.
@@ -112,6 +113,30 @@ export default class TextualBody extends React.Component {
         }
     }
 
+    _addCodeExpansionButton(codeBlock) {
+        // TODO: What if the block is small and the we don't need the icon?
+
+        const pre = codeBlock.getElementsByTagName("pre")[0];
+        const button = document.createElement("span");
+        if (pre.className == "mx_EventTile_collapsedCodeBlock") {
+            button.className = "mx_EventTile_expandButton";
+        } else {
+            button.className = "mx_EventTile_collapseButton";
+        }
+
+        button.onclick = async () => {
+            if (pre.className == "mx_EventTile_collapsedCodeBlock") {
+                pre.className = "";
+                button.className = "mx_EventTile_expandButton";
+            } else {
+                pre.className = "mx_EventTile_collapsedCodeBlock";
+                button.className = "mx_EventTile_collapseButton";
+            }
+        };
+
+        codeBlock.appendChild(button);
+    }
+
     _addCodeCopyButton(codeBlock) {
         const button = document.createElement("span");
         button.className = "mx_EventTile_copyButton";