workaround for a race condition between dojo.parse() and tt-rss loading proper day/night css on startup because of firefox async CSS loader

5 years ago · 07f4878d59
parent 0d6add5d7f
commit 07f4878d59
5 changed files with 97 additions and 57 deletions
--- a/index.php
+++ b/index.php
@ -48,8 +48,6 @@
 		$theme = get_pref("USER_CSS_THEME", false, false);
 		if ($theme && theme_exists("$theme")) {
 			echo stylesheet_tag(get_theme_path($theme), 'theme_css');
-		} else {
-			echo stylesheet_tag("css/default.css", 'theme_css');
 		}
 	}
 	?>
@ -116,11 +114,23 @@
 	?>
 	</script>

+	<style type="text/css">
+		@media (prefers-color-scheme: dark) {
+			body {
+				background : #303030;
+			}
+		}
+
+		body.css_loading * {
+			display : none;
+		}
+	</style>
+
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 	<meta name="referrer" content="no-referrer"/>
 </head>

-<body class="flat ttrss_main ttrss_index">
+<body class="flat ttrss_main ttrss_index css_loading">

 <div id="overlay" style="display : block">
 	<div id="overlay_inner">
--- a/js/AppBase.js
+++ b/js/AppBase.js
@ -9,7 +9,6 @@ define(["dojo/_base/declare"], function (declare) {
 		hotkey_prefix_timeout: 0,
 		constructor: function() {
 			window.onerror = this.Error.onWindowError;
-			this.setupNightModeDetection();
 		},
 		getInitParam: function(k) {
 			return this._initParams[k];
@ -17,30 +16,47 @@ define(["dojo/_base/declare"], function (declare) {
 		setInitParam: function(k, v) {
 			this._initParams[k] = v;
 		},
-		nightModeChanged: function(is_night) {
+		nightModeChanged: function(is_night, link) {
 			console.log("night mode changed to", is_night);

-			const link = $("theme_css");
-
 			if (link) {
-
-				if (link.getAttribute("data-orig-href").indexOf("css/default.css") !== -1) {
 				const css_override = is_night ? "themes/night.css" : "css/default.css";
 				link.setAttribute("href", css_override + "?" + Date.now());
 			}
-			}
 		},
-		setupNightModeDetection: function() {
-			if (window.matchMedia) {
+		setupNightModeDetection: function(callback) {
+			if (!$("theme_css")) {
 				const mql = window.matchMedia('(prefers-color-scheme: dark)');

 				try {
 					mql.addEventListener("change", () => {
-						this.nightModeChanged(mql.matches);
+						this.nightModeChanged(mql.matches, $("theme_auto_css"));
+					});
+				} catch (e) {
+					console.warn("exception while trying to set MQL event listener");
+				}
+
+				const link = new Element("link", {
+					rel: "stylesheet",
+					id: "theme_auto_css"
 				});
-				} catch (e) {}

-				this.nightModeChanged(mql.matches);
+				if (callback) {
+                    link.onload = function () {
+                        document.querySelector("body").removeClassName("css_loading");
+                        callback();
+                    };
+
+                    link.onerror = function(event) {
+                        alert("Fatal error while loading application stylesheet: " + link.getAttribute("href"));
+                    }
+                }
+
+				this.nightModeChanged(mql.matches, link);
+
+				document.querySelector("head").appendChild(link);
+			} else {
+				if (callback) callback();
 			}
 		},
 		enableCsrfSupport: function() {
--- a/js/prefs.js
+++ b/js/prefs.js
@ -63,6 +63,7 @@ require(["dojo/_base/kernel",
 		try {
 			const _App = declare("fox.App", AppBase, {
 				constructor: function() {
+					this.setupNightModeDetection(() => {
 						parser.parse();

 						this.setLoadingProgress(50);
@ -77,6 +78,7 @@ require(["dojo/_base/kernel",
 								this.Error.report(e);
 							}
 						});
+					});
 				},
 				initSecondStage: function() {
 					this.enableCsrfSupport();
--- a/js/tt-rss.js
+++ b/js/tt-rss.js
@ -67,6 +67,7 @@ require(["dojo/_base/kernel",
 				_widescreen_mode: false,
 				hotkey_actions: {},
 				constructor: function () {
+					this.setupNightModeDetection(() => {
 						parser.parse();

 						if (!this.checkBrowserFeatures())
@ -95,6 +96,7 @@ require(["dojo/_base/kernel",
 								App.Error.report(e);
 							}
 						});
+					});
 				},
 				checkBrowserFeatures: function() {
 					let errorMsg = "";
--- a/prefs.php
+++ b/prefs.php
@ -40,8 +40,6 @@
 		$theme = get_pref("USER_CSS_THEME", false, false);
 		if ($theme && theme_exists("$theme")) {
 			echo stylesheet_tag(get_theme_path($theme), 'theme_css');
-		} else {
-			echo stylesheet_tag("css/default.css", 'theme_css');
 		}
 	}
 	?>
@ -99,10 +97,22 @@
 	?>
 	</script>

+	<style type="text/css">
+		@media (prefers-color-scheme: dark) {
+			body {
+				background : #303030;
+			}
+		}
+
+		body.css_loading * {
+			display : none;
+		}
+	</style>
+
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>

-<body class="flat ttrss_main ttrss_prefs">
+<body class="flat ttrss_main ttrss_prefs css_loading">

 <div id="notify" class="notify"></div>
 <div id="cmdline" style="display : none"></div>