Chromium bug

kloverde · kloverde · commit fac2a4df2e19 · 2018-05-13T11:29:30.000-04:00
Demo.js includes a workaround for Chromium's incorrect initialization of alternate stylesheets.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# Release 1.1.1 (May 13, 2018)
+
+* Updated the demo to handle a Chromium bug that affects the proper operation of themes.  See README.MD and demo.js for more information.
+
+
 # Release 1.1 (May 9, 2018)
 
 This release improves theme support.
diff --git a/README.MD b/README.MD
@@ -1,5 +1,5 @@
-RealtimeMonitor v1.1
-====================
+RealtimeMonitor v1.1.1
+======================
 
 See LICENSE for this software's licensing terms.  At first glance, it resembles the BSD-3 license, but it contains a significant difference which prohibits certain use.  Read it carefully.  Licenses for third-party components used by RealtimeMonitor are in THIRD_PARTY_LICENSES.MD.
 
@@ -173,7 +173,7 @@ Chrome only displays notifications if the page is loaded over HTTPS - or so I've
 
 The application includes several alternate color schemes, or themes.  Themes are implemented by alternate stylesheets which override portions of the base stylesheet.  Some browsers, such as Firefox and IE, place alternate stylesheets in a menu that the user can then select from to switch to a different theme.  Chrome does not have built-in support for this functionality.  I've read that there are third-party Chrome addons that add this capability, but I haven't looked into it any further than that.
 
-Several different aspects of the panels are changed by theming, but of particular note are the colors used to represent statuses of normal, warning and danger.  Some themes use green/yellow/red while others use green/orange/red, depending on the panel's background color.
+Chromium (and by extension, all Chromium-based browsers) has a bug where alternate stylesheets aren't correctly initialized upon page load.  Chromium initializes the 'disabled' property of every alternate stylesheet to `false`, which is wrong.  The workaround for this needs to be made at the page level, not within RealtimeMonitor.  If you plan on using themes, you need to forcibly set this property to `true` on all alternate stylesheets before instantiating RealtimeMonitor.  See the `fixBrokenBrowsers` function in `demo.js` for code which does this.
 
 
 ## Third-party Attribution
diff --git a/css/realtimeMonitor.css b/css/realtimeMonitor.css
@@ -1,5 +1,5 @@
 /*
- * RealtimeMonitor v1.1
+ * RealtimeMonitor v1.1.1
  * https://www.github.com/kloverde/js-RealtimeMonitor
  *
  * Copyright (c) 2018, Kurtis LoVerde
diff --git a/css/themes/burlywood.css b/css/themes/burlywood.css
@@ -1,5 +1,5 @@
       /*
- * RealtimeMonitor v1.1
+ * RealtimeMonitor v1.1.1
  * https://www.github.com/kloverde/js-RealtimeMonitor
  *
  * Copyright (c) 2018, Kurtis LoVerde
diff --git a/css/themes/dark.css b/css/themes/dark.css
@@ -1,5 +1,5 @@
 /*
- * RealtimeMonitor v1.1
+ * RealtimeMonitor v1.1.1
  * https://www.github.com/kloverde/js-RealtimeMonitor
  *
  * Copyright (c) 2018, Kurtis LoVerde
diff --git a/css/themes/darkslategray.css b/css/themes/darkslategray.css
@@ -1,5 +1,5 @@
 /*
- * RealtimeMonitor v1.1
+ * RealtimeMonitor v1.1.1
  * https://www.github.com/kloverde/js-RealtimeMonitor
  *
  * Copyright (c) 2018, Kurtis LoVerde
diff --git a/css/themes/deeppurple.css b/css/themes/deeppurple.css
@@ -1,5 +1,5 @@
 /*
- * RealtimeMonitor v1.1
+ * RealtimeMonitor v1.1.1
  * https://www.github.com/kloverde/js-RealtimeMonitor
  *
  * Copyright (c) 2018, Kurtis LoVerde
diff --git a/css/themes/dimgray.css b/css/themes/dimgray.css
@@ -1,5 +1,5 @@
 /*
- * RealtimeMonitor v1.1
+ * RealtimeMonitor v1.1.1
  * https://www.github.com/kloverde/js-RealtimeMonitor
  *
  * Copyright (c) 2018, Kurtis LoVerde
diff --git a/css/themes/lightslategray.css b/css/themes/lightslategray.css
@@ -1,5 +1,5 @@
 /*
- * RealtimeMonitor v1.1
+ * RealtimeMonitor v1.1.1
  * https://www.github.com/kloverde/js-RealtimeMonitor
  *
  * Copyright (c) 2018, Kurtis LoVerde
diff --git a/css/themes/lightsteelblue.css b/css/themes/lightsteelblue.css
@@ -1,5 +1,5 @@
 /*
- * RealtimeMonitor v1.1
+ * RealtimeMonitor v1.1.1
  * https://www.github.com/kloverde/js-RealtimeMonitor
  *
  * Copyright (c) 2018, Kurtis LoVerde
diff --git a/demo/demo.js b/demo/demo.js
@@ -36,6 +36,8 @@
 "use strict";
 
 document.addEventListener( "DOMContentLoaded", function() {
+   fixBrokenBrowsers();  // You should read the documentation in this function.
+
    const rtm = new RealtimeMonitor();
 
    const panel1 = rtm.newPanel( {
@@ -127,4 +129,17 @@ document.addEventListener( "DOMContentLoaded", function() {
          rtm.loadTheme( theme );
       }
    }
+
+   function fixBrokenBrowsers() {
+      // Forcibly set all alternate stylesheets to disabled.  You MUST do this if you're using RealtimeMonitor's themes in your project.
+      // There's a bug in Chromium where all alternate stylesheets are initialized with their 'disabled' property set to false, even
+      // though they all start out disabled.  This is incorrect behavior, and it interferes with how RealtimeMonitor detects the active
+      // theme.  This affects all Chromium browsers, so Chrome, Brave, etc. will not function correctly unless you do this.
+
+      const sheets = document.querySelectorAll( "link[rel='alternate stylesheet']" );
+
+      for( let i = 0; i < sheets.length; i++ ) {
+         sheets[i].disabled = true;
+      }
+   }
 } );
diff --git a/js/realtimeMonitor.js b/js/realtimeMonitor.js
@@ -1,5 +1,5 @@
 /*
- * RealtimeMonitor v1.1
+ * RealtimeMonitor v1.1.1
  * https://www.github.com/kloverde/js-RealtimeMonitor
  *
  * Copyright (c) 2018, Kurtis LoVerde
diff --git a/js/realtimeMonitor.min.js b/js/realtimeMonitor.min.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`/*`
`2`		`- * RealtimeMonitor v1.1`
	`2`	`+ * RealtimeMonitor v1.1.1`
`3`	`3`	`* https://www.github.com/kloverde/js-RealtimeMonitor`
`4`	`4`	`*`
`5`	`5`	`* Copyright (c) 2018, Kurtis LoVerde`