From 55450bc0a6b6f0a84ac550f8584c995fd6c6fcd4 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 28 Sep 2022 10:44:32 +0200
Subject: [PATCH] Use map instead of object for styleElements

---
 src/theme.ts | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/theme.ts b/src/theme.ts
index f932cfe872..a657807704 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -237,13 +237,13 @@ export async function setTheme(theme?: string): Promise<void> {
 
     // look for the stylesheet elements.
     // styleElements is a map from style name to HTMLLinkElement.
-    const styleElements: Record<string, HTMLLinkElement> = Object.create(null);
+    const styleElements = new Map<string, HTMLLinkElement>();
     const themes = Array.from(document.querySelectorAll<HTMLLinkElement>('[data-mx-theme]'));
     themes.forEach(theme => {
-        styleElements[theme.attributes['data-mx-theme'].value.toLowerCase()] = theme;
+        styleElements.set(theme.attributes['data-mx-theme'].value.toLowerCase(), theme);
     });
 
-    if (!(stylesheetName in styleElements)) {
+    if (!styleElements.has(stylesheetName)) {
         throw new Error("Unknown theme " + stylesheetName);
     }
 
@@ -258,7 +258,8 @@ export async function setTheme(theme?: string): Promise<void> {
     // having them interact badly... but this causes a flash of unstyled app
     // which is even uglier.  So we don't.
 
-    styleElements[stylesheetName].disabled = false;
+    const styleSheet = styleElements.get(stylesheetName);
+    styleSheet.disabled = false;
 
     return new Promise((resolve) => {
         const switchTheme = function() {
@@ -266,9 +267,9 @@ export async function setTheme(theme?: string): Promise<void> {
             // theme set request as per https://github.com/vector-im/element-web/issues/5601.
             // We could alternatively lock or similar to stop the race, but
             // this is probably good enough for now.
-            styleElements[stylesheetName].disabled = false;
-            Object.values(styleElements).forEach((a: HTMLStyleElement) => {
-                if (a == styleElements[stylesheetName]) return;
+            styleSheet.disabled = false;
+            styleElements.forEach(a => {
+                if (a == styleSheet) return;
                 a.disabled = true;
             });
             const bodyStyles = global.getComputedStyle(document.body);
@@ -281,7 +282,7 @@ export async function setTheme(theme?: string): Promise<void> {
 
         const isStyleSheetLoaded = () => Boolean(
             [...document.styleSheets]
-                .find(styleSheet => styleSheet?.href === styleElements[stylesheetName].href),
+                .find(_styleSheet => _styleSheet?.href === styleSheet.href),
         );
 
         function waitForStyleSheetLoading() {
@@ -299,8 +300,8 @@ export async function setTheme(theme?: string): Promise<void> {
             const intervalId = setInterval(() => {
                 if (isStyleSheetLoaded()) {
                     clearInterval(intervalId);
-                    styleElements[stylesheetName].onload = undefined;
-                    styleElements[stylesheetName].onerror = undefined;
+                    styleSheet.onload = undefined;
+                    styleSheet.onerror = undefined;
                     switchTheme();
                 }
 
@@ -311,12 +312,12 @@ export async function setTheme(theme?: string): Promise<void> {
                 }
             }, 100);
 
-            styleElements[stylesheetName].onload = () => {
+            styleSheet.onload = () => {
                 clearInterval(intervalId);
                 switchTheme();
             };
 
-            styleElements[stylesheetName].onerror = () => {
+            styleSheet.onerror = () => {
                 clearInterval(intervalId);
             };
         }