Merge pull request #6262 from matrix-org/gsouquet/fix-backdrop-filter

Move backdrop filter to a canvas based solution

package.json

@@ -64,6 +64,7 @@
     "cheerio": "^1.0.0-rc.9",
     "classnames": "^2.2.6",
     "commonmark": "^0.29.3",
+    "context-filter-polyfill": "^0.2.4",
     "counterpart": "^0.18.6",
     "diff-dom": "^4.2.2",
     "diff-match-patch": "^1.0.5",
@@ -195,6 +196,7 @@
       "decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
       "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
       "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
+      "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
       "workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
       "RecorderWorklet": "<rootDir>/__mocks__/empty.js"
     },

res/css/_common.scss

@@ -168,7 +168,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 // it has the appearance of a text box so the controls
 // appear to be part of the input
 
-.mx_Dialog, .mx_MatrixChat {
+.mx_Dialog, .mx_MatrixChat_wrapper {
     .mx_textinput > input[type=text],
     .mx_textinput > input[type=search] {
         border: none;

res/css/_components.scss

@@ -17,6 +17,7 @@
 @import "./structures/_LeftPanelWidget.scss";
 @import "./structures/_MainSplit.scss";
 @import "./structures/_MatrixChat.scss";
+@import "./structures/_BackdropPanel.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NonUrgentToastContainer.scss";
 @import "./structures/_NotificationPanel.scss";

res/css/structures/_BackdropPanel.scss

@@ -0,0 +1,51 @@
+/*
+Copyright 2021 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BackdropPanel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 100%;
+    overflow: hidden;
+
+    &::before {
+        content: " ";
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100vh;
+        width: 100%;
+        background-color: var(--lp-background-overlay);
+    }
+}
+
+.mx_BackdropPanel--canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+
+    &:nth-of-type(2n-1) {
+        opacity: 0.2;
+    }
+    &:nth-of-type(2n) {
+        opacity: 0.1;
+    }
+}

res/css/structures/_GroupFilterPanel.scss

@@ -14,10 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_MatrixChat--with-avatar {
+    .mx_GroupFilterPanel {
+        background-color: transparent;
+    }
+}
+
 .mx_GroupFilterPanel {
-    flex: 1;
     background-color: $groupFilterPanel-bg-color;
+    flex: 1;
     cursor: pointer;
+    position: relative;
 
     display: flex;
     flex-direction: column;

res/css/structures/_LeftPanel.scss

@@ -17,15 +17,22 @@ limitations under the License.
 $groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
 $roomListCollapsedWidth: 68px;
 
+.mx_MatrixChat--with-avatar {
+    .mx_LeftPanel,
+    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
+        background-color: transparent;
+    }
+}
+
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
     min-width: 206px;
-    max-width: 50%;
 
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
     contain: content;
+    position: relative;
 
     .mx_LeftPanel_GroupFilterPanelContainer {
         flex-grow: 0;

res/css/structures/_MatrixChat.scss

@@ -29,8 +29,6 @@ limitations under the License.
 .mx_MatrixChat_wrapper {
     display: flex;
 
-    flex-direction: column;
-
     width: 100%;
     height: 100%;
 }
@@ -42,15 +40,16 @@ limitations under the License.
 }
 
 .mx_MatrixChat {
+    position: relative;
     width: 100%;
     height: 100%;
 
     display: flex;
 
-    order: 2;
-
     flex: 1;
+    flex-grow: 0;
     min-height: 0;
+    max-width: 50%;
 }
 
 .mx_MatrixChat_syncError {

res/css/structures/_RoomView.scss

@@ -18,6 +18,8 @@ limitations under the License.
     word-wrap: break-word;
     display: flex;
     flex-direction: column;
+    flex: 1;
+    position: relative;
 }
 
 

res/css/structures/_SpacePanel.scss

@@ -22,11 +22,18 @@ $activeBorderTransparentGap: 1px;
 $activeBackgroundColor: $roomtile-selected-bg-color;
 $activeBorderColor: $secondary-fg-color;
 
+.mx_MatrixChat--with-avatar {
+    .mx_SpacePanel {
+        background-color: transparent;
+    }
+}
+
 .mx_SpacePanel {
-    flex: 0 0 auto;
     background-color: $groupFilterPanel-bg-color;
+    flex: 0 0 auto;
     padding: 0;
     margin: 0;
+    position: relative;
 
     // Create another flexbox so the Panel fills the container
     display: flex;

res/themes/dark/css/_dark.scss

@@ -238,9 +238,12 @@ $voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
 
-// blur amounts for left left panel (only for element theme, used in _mods.scss)
-$roomlist-background-blur-amount: 60px;
-$groupFilterPanel-background-blur-amount: 30px;
+// blur amounts for left left panel (only for element theme)
+:root {
+    --llp-background-blur: 160px;
+    --lp-background-blur: 90px;
+    --lp-background-overlay: rgba(255, 255, 255, 0.055);
+}
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 

res/themes/dark/css/dark.scss

@@ -2,10 +2,6 @@
 @import "../../light/css/_paths.scss";
 @import "../../light/css/_fonts.scss";
 @import "../../light/css/_light.scss";
-// important this goes before _mods,
-// as $groupFilterPanel-background-blur-amount and
-// $roomlist-background-blur-amount
-// are overridden in _dark.scss
 @import "_dark.scss";
 @import "../../light/css/_mods.scss";
 @import "../../../../res/css/_components.scss";

res/themes/light/css/_light.scss

@@ -361,10 +361,12 @@ $voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
 
-// blur amounts for left left panel (only for element theme, used in _mods.scss)
-$roomlist-background-blur-amount: 40px;
-$groupFilterPanel-background-blur-amount: 20px;
-
+// blur amounts for left left panel (only for element theme)
+:root {
+    --llp-background-blur: 120px;
+    --lp-background-blur: 60px;
+    --lp-background-overlay: rgba(0, 0, 0, 0.055);
+}
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 
 // Bubble tiles

res/themes/light/css/_mods.scss

@@ -4,27 +4,6 @@
 // set the user avatar (if any) as a background so
 // it can be blurred by the tag panel and room list
 
-@supports (backdrop-filter: none) {
-    .mx_LeftPanel {
-        background-image: var(--avatar-url, unset);
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: left top;
-    }
-
-    .mx_GroupFilterPanel {
-        backdrop-filter: blur($groupFilterPanel-background-blur-amount);
-    }
-
-    .mx_SpacePanel {
-        backdrop-filter: blur($groupFilterPanel-background-blur-amount);
-    }
-
-    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
-        backdrop-filter: blur($roomlist-background-blur-amount);
-    }
-}
-
 .mx_RoomSublist_showNButton {
     background-color: transparent !important;
 }