Reduce Scripts needed on start up to reduce critical requests aka speed up initial loading

public/index.html

@@ -595,8 +595,6 @@
 
     </svg>
     <!-- Scripts -->
-    <script src="scripts/theme.js"></script>
-    <script src="scripts/util-main.js"></script>
     <script src="scripts/localization.js"></script>
     <script src="scripts/persistent-storage.js"></script>
     <script src="scripts/ui-main.js"></script>

public/scripts/main.js

@@ -7,17 +7,19 @@ class PairDrop {
         this.$headerNotificationButton = $('notification');
         this.$editPairedDevicesHeaderBtn = $('edit-paired-devices');
         this.$footerInstructionsPairedDevices = $$('.discovery-wrapper .badge-room-secret');
-
         this.$head = $$('head');
-
         this.$installBtn = $('install');
 
         this.registerServiceWorker();
 
         Events.on('beforeinstallprompt', e => this.onPwaInstallable(e));
 
-        Events.on('initial-translation-loaded', _ => {
+        const persistentStorage = new PersistentStorage();
+        const themeUI = new ThemeUI();
         const backgroundCanvas = new BackgroundCanvas();
+
+        Events.on('initial-translation-loaded', _ => {
+            // FooterUI needs translations
             const footerUI = new FooterUI();
 
             Events.on('fade-in-ui', _ => this.fadeInUI())
@@ -29,6 +31,9 @@ class PairDrop {
             // Load deferred assets
             this.loadDeferredAssets();
         });
+
+        // Translate page -> fires 'initial-translation-loaded' on finish
+        const localization = new Localization();
     }
 
     registerServiceWorker() {
@@ -171,6 +176,4 @@ class PairDrop {
     }
 }
 
-const persistentStorage = new PersistentStorage();
 const pairDrop = new PairDrop();
-const localization = new Localization();

public/scripts/theme.js

@@ -1,83 +0,0 @@
-(function(){
-
-    const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
-
-    const $themeAuto = document.getElementById('theme-auto');
-    const $themeLight = document.getElementById('theme-light');
-    const $themeDark = document.getElementById('theme-dark');
-
-    let currentTheme = localStorage.getItem('theme');
-
-    if (currentTheme === 'dark') {
-        setModeToDark();
-    }
-    else if (currentTheme === 'light') {
-        setModeToLight();
-    }
-
-    $themeAuto.addEventListener('click', _ => {
-        if (currentTheme) {
-            setModeToAuto();
-        }
-        else {
-            setModeToDark();
-        }
-    });
-    $themeLight.addEventListener('click', _ => {
-        if (currentTheme !== 'light') {
-            setModeToLight();
-        }
-        else {
-            setModeToAuto();
-        }
-    });
-    $themeDark.addEventListener('click', _ => {
-        if (currentTheme !== 'dark') {
-            setModeToDark();
-        }
-        else {
-            setModeToLight();
-        }
-    });
-
-    function setModeToDark() {
-        document.body.classList.remove('light-theme');
-        document.body.classList.add('dark-theme');
-        localStorage.setItem('theme', 'dark');
-        currentTheme = 'dark';
-
-        $themeAuto.classList.remove("selected");
-        $themeLight.classList.remove("selected");
-        $themeDark.classList.add("selected");
-    }
-
-    function setModeToLight() {
-        document.body.classList.remove('dark-theme');
-        document.body.classList.add('light-theme');
-        localStorage.setItem('theme', 'light');
-        currentTheme = 'light';
-
-        $themeAuto.classList.remove("selected");
-        $themeLight.classList.add("selected");
-        $themeDark.classList.remove("selected");
-    }
-
-    function setModeToAuto() {
-        document.body.classList.remove('dark-theme');
-        document.body.classList.remove('light-theme');
-        if (prefersDarkTheme) {
-            document.body.classList.add('dark-theme');
-        }
-        else if (prefersLightTheme) {
-            document.body.classList.add('light-theme');
-        }
-        localStorage.removeItem('theme');
-        currentTheme = undefined;
-
-        $themeAuto.classList.add("selected");
-        $themeLight.classList.remove("selected");
-        $themeDark.classList.remove("selected");
-    }
-
-})();

public/scripts/ui-main.js

@@ -1,3 +1,116 @@
+// Selector shortcuts
+const $ = query => document.getElementById(query);
+const $$ = query => document.querySelector(query);
+
+// Event listener shortcuts
+class Events {
+    static fire(type, detail = {}) {
+        window.dispatchEvent(new CustomEvent(type, { detail: detail }));
+    }
+
+    static on(type, callback, options) {
+        return window.addEventListener(type, callback, options);
+    }
+
+    static off(type, callback, options) {
+        return window.removeEventListener(type, callback, options);
+    }
+}
+
+// UIs needed on start
+class ThemeUI {
+
+    constructor() {
+        this.prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        this.prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
+
+        this.$themeAutoBtn = document.getElementById('theme-auto');
+        this.$themeLightBtn = document.getElementById('theme-light');
+        this.$themeDarkBtn = document.getElementById('theme-dark');
+
+        let currentTheme = this.getCurrentTheme();
+        if (currentTheme === 'dark') {
+            this.setModeToDark();
+        } else if (currentTheme === 'light') {
+            this.setModeToLight();
+        }
+
+        this.$themeAutoBtn.addEventListener('click', _ => this.onClickAuto());
+        this.$themeLightBtn.addEventListener('click', _ => this.onClickLight());
+        this.$themeDarkBtn.addEventListener('click', _ => this.onClickDark());
+    }
+
+    getCurrentTheme() {
+        return localStorage.getItem('theme');
+    }
+
+    setCurrentTheme(theme) {
+        localStorage.setItem('theme', theme);
+    }
+
+    onClickAuto() {
+        if (this.getCurrentTheme()) {
+            this.setModeToAuto();
+        } else {
+            this.setModeToDark();
+        }
+    }
+
+    onClickLight() {
+        if (this.getCurrentTheme() !== 'light') {
+            this.setModeToLight();
+        } else {
+            this.setModeToAuto();
+        }
+    }
+
+    onClickDark() {
+        if (this.getCurrentTheme() !== 'dark') {
+            this.setModeToDark();
+        } else {
+            this.setModeToLight();
+        }
+    }
+
+    setModeToDark() {
+        document.body.classList.remove('light-theme');
+        document.body.classList.add('dark-theme');
+
+        this.setCurrentTheme('dark');
+
+        this.$themeAutoBtn.classList.remove("selected");
+        this.$themeLightBtn.classList.remove("selected");
+        this.$themeDarkBtn.classList.add("selected");
+    }
+
+    setModeToLight() {
+        document.body.classList.remove('dark-theme');
+        document.body.classList.add('light-theme');
+
+        this.setCurrentTheme('light');
+
+        this.$themeAutoBtn.classList.remove("selected");
+        this.$themeLightBtn.classList.add("selected");
+        this.$themeDarkBtn.classList.remove("selected");
+    }
+
+    setModeToAuto() {
+        document.body.classList.remove('dark-theme');
+        document.body.classList.remove('light-theme');
+        if (this.prefersDarkTheme) {
+            document.body.classList.add('dark-theme');
+        }
+        else if (this.prefersLightTheme) {
+            document.body.classList.add('light-theme');
+        }
+        localStorage.removeItem('theme');
+
+        this.$themeAutoBtn.classList.add("selected");
+        this.$themeLightBtn.classList.remove("selected");
+        this.$themeDarkBtn.classList.remove("selected");
+    }
+}
+
 class FooterUI {
 
     constructor() {

public/scripts/util-main.js

@@ -1,17 +0,0 @@
-// Selector shortcuts
-const $ = query => document.getElementById(query);
-const $$ = query => document.querySelector(query);
-
-class Events {
-    static fire(type, detail = {}) {
-        window.dispatchEvent(new CustomEvent(type, { detail: detail }));
-    }
-
-    static on(type, callback, options) {
-        return window.addEventListener(type, callback, options);
-    }
-
-    static off(type, callback, options) {
-        return window.removeEventListener(type, callback, options);
-    }
-}

public/service-worker.js

@@ -5,7 +5,7 @@ const relativePathsToCache = [
     './',
     'index.html',
     'manifest.json',
-    'styles/main-styles.css',
+    'styles/styles-main.css',
     'styles/deferred-styles.css',
     'scripts/localization.js',
     'scripts/main.js',
@@ -13,10 +13,9 @@ const relativePathsToCache = [
     'scripts/no-sleep.min.js',
     'scripts/persistent-storage.js',
     'scripts/qr-code.min.js',
-    'scripts/theme.js',
     'scripts/ui.js',
+    'scripts/ui-main.js',
     'scripts/util.js',
-    'scripts/util-main.js',
     'scripts/zip.min.js',
     'sounds/blop.mp3',
     'sounds/blop.ogg',