From ebd7cd6212905862912784add85fa936709a8b65 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 1 Jun 2021 11:21:59 +0100
Subject: [PATCH] Add CSS containement rules for shorter reflow operations

---
 res/css/_common.scss                            | 1 +
 res/css/structures/_ContextualMenu.scss         | 1 +
 res/css/structures/_LeftPanel.scss              | 2 ++
 res/css/structures/_RightPanel.scss             | 1 +
 res/css/structures/_RoomView.scss               | 2 ++
 res/css/structures/_ScrollPanel.scss            | 3 +++
 res/css/views/avatars/_DecoratedRoomAvatar.scss | 1 +
 res/css/views/rooms/_RoomSublist.scss           | 1 +
 res/css/views/rooms/_RoomTile.scss              | 4 ++++
 9 files changed, 16 insertions(+)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index a05ec7eadd..b128a82442 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -291,6 +291,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_staticWrapper .mx_Dialog {
     z-index: 4010;
+    contain: content;
 }
 
 .mx_Dialog_background {
diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss
index 4b33427a87..d7f2cb76e8 100644
--- a/res/css/structures/_ContextualMenu.scss
+++ b/res/css/structures/_ContextualMenu.scss
@@ -38,6 +38,7 @@ limitations under the License.
     position: absolute;
     font-size: $font-14px;
     z-index: 5001;
+    contain: content;
 }
 
 .mx_ContextualMenu_right {
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 7c3cd1c513..c7dd678c07 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -25,6 +25,7 @@ $roomListCollapsedWidth: 68px;
 
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
+    contain: content;
 
     .mx_LeftPanel_GroupFilterPanelContainer {
         flex-grow: 0;
@@ -70,6 +71,7 @@ $roomListCollapsedWidth: 68px;
             // aligned correctly. This is also a row-based flexbox.
             display: flex;
             align-items: center;
+            contain: content;
 
             &.mx_IndicatorScrollbar_leftOverflow {
                 mask-image: linear-gradient(90deg, transparent, black 5%);
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 5515fe4060..48f19c1cd5 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -25,6 +25,7 @@ limitations under the License.
     padding: 4px 0;
     box-sizing: border-box;
     height: 100%;
+    contain: strict;
 
     .mx_RoomView_MessageList {
         padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index cdbe47178d..b019fe7e01 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -152,6 +152,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
+    contain: content;
 }
 
 .mx_RoomView_statusArea {
@@ -221,6 +222,7 @@ limitations under the License.
 
 .mx_RoomView_MessageList li {
     clear: both;
+    contain: content;
 }
 
 li.mx_RoomView_myReadMarker_container {
diff --git a/res/css/structures/_ScrollPanel.scss b/res/css/structures/_ScrollPanel.scss
index a4e501b339..7b75c69e86 100644
--- a/res/css/structures/_ScrollPanel.scss
+++ b/res/css/structures/_ScrollPanel.scss
@@ -21,5 +21,8 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
+
+        content-visibility: auto;
+        contain-intrinsic-size: 50px;
     }
 }
diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss
index 2631cbfb40..257b512579 100644
--- a/res/css/views/avatars/_DecoratedRoomAvatar.scss
+++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss
@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_DecoratedRoomAvatar, .mx_ExtraTile {
     position: relative;
+    contain: content;
 
     &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
         mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');
diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss
index bae469ab87..146b3edf71 100644
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/res/css/views/rooms/_RoomSublist.scss
@@ -198,6 +198,7 @@ limitations under the License.
             // as the box model should be top aligned. Happens in both FF and Chromium
             display: flex;
             flex-direction: column;
+            align-self: stretch;
 
             mask-image: linear-gradient(0deg, transparent, black 4px);
         }
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 72d29dfd4c..421fbfe39b 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -19,6 +19,10 @@ limitations under the License.
     margin-bottom: 4px;
     padding: 4px;
 
+    contain: strict;
+    height: 40px;
+    box-sizing: border-box;
+
     // The tile is also a flexbox row itself
     display: flex;