Make sure there's only one presence style sheet

2 files changed, 42 insertions, 11 deletions

diff --git a/taler-wallet-lib.js b/taler-wallet-lib.js
index 9193852..52936f0 100644
--- a/taler-wallet-lib.js
+++ b/taler-wallet-lib.js
@@ -334,17 +334,33 @@ var taler;
             // if not installed and first timeout not called,
             // we're still doing the detection ...
         }
+        function initStyle() {
+            var name = "taler-presence-stylesheet";
+            var content = "/* Taler stylesheet controlled by JS */";
+            var style = document.getElementById(name);
+            if (!style) {
+                style = document.createElement("style");
+                // Needed by WebKit
+                style.appendChild(document.createTextNode(content));
+                style.id = name;
+                document.head.appendChild(style);
+            }
+            else {
+                // We've taken over the stylesheet now,
+                // make it clear by clearing all the rules in it
+                // and making it obvious in the DOM.
+                style.innerText = content;
+            }
+            sheet = style.sheet;
+        }
         function onPageLoad() {
             pageLoaded = true;
-            var style = document.createElement("style");
-            // Needed by WebKit
-            style.appendChild(document.createTextNode("/* stylesheet controlled by JS */"));
-            document.head.appendChild(style);
-            sheet = style.sheet;
+            initStyle();
+            // We only start the timeout after the page is interactive.
+            window.setInterval(onProbeTimeout, 300);
             announce();
         }
         probeTaler();
-        window.setInterval(onProbeTimeout, 300);
         document.addEventListener("taler-probe-result", handleProbe, false);
         // Handle the case where the JavaScript is loaded after the page
         // has been loaded for the first time.
diff --git a/taler-wallet-lib.ts b/taler-wallet-lib.ts
index 3f475eb..21371e8 100644
--- a/taler-wallet-lib.ts
+++ b/taler-wallet-lib.ts
@@ -364,13 +364,28 @@ namespace taler {
       // we're still doing the detection ...
     }
 
+    function initStyle() {
+      const name = "taler-presence-stylesheet";
+      const content = "/* Taler stylesheet controlled by JS */";
+      let style = document.getElementById(name) as HTMLStyleElement|null; 
+      if (!style) {
+        style = document.createElement("style");
+        // Needed by WebKit
+        style.appendChild(document.createTextNode(content));
+        style.id = name;
+        document.head.appendChild(style);
+      } else {
+        // We've taken over the stylesheet now,
+        // make it clear by clearing all the rules in it
+        // and making it obvious in the DOM.
+        style.innerText = content;
+      }
+      sheet = style.sheet as CSSStyleSheet;
+    }
+
     function onPageLoad() {
       pageLoaded = true;
-      let style = document.createElement("style");
-      // Needed by WebKit
-      style.appendChild(document.createTextNode("/* stylesheet controlled by JS */"));
-      document.head.appendChild(style);
-      sheet = style.sheet as CSSStyleSheet;
+      initStyle();
 
       // We only start the timeout after the page is interactive.
       window.setInterval(onProbeTimeout, 300);