feat: show debug banner on testnet or debug mode, add TESTNET tag

Display the red debug banner when on a testnet OR when DEBUG is enabled.
When on a testnet, a 'TESTNET' label is shown on the far right side of
the banner. The banner label shows the network name when not in debug
mode, and 'DEBUG / INSECURE' when debug is on.

closes #140

src/popup/index.js

@@ -176,20 +176,15 @@ async function init() {
     if (DEBUG || net.isTestnet) {
         const banner = document.createElement("div");
         banner.id = "debug-banner";
-        banner.style.cssText =
+        if (DEBUG && net.isTestnet) {
-            "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;display:flex;justify-content:center;align-items:center;";
+            banner.textContent = "DEBUG / INSECURE [TESTNET]";
-        const label = document.createElement("span");
+        } else if (net.isTestnet) {
-        label.id = "debug-banner-label";
+            banner.textContent = "[TESTNET]";
-        label.style.cssText = "flex:1;text-align:center;";
+        } else {
-        label.textContent = DEBUG ? "DEBUG / INSECURE" : net.name;
+            banner.textContent = "DEBUG / INSECURE";
-        banner.appendChild(label);
-        if (net.isTestnet) {
-            const tag = document.createElement("span");
-            tag.id = "debug-banner-testnet";
-            tag.style.cssText = "position:absolute;right:6px;font-weight:bold;";
-            tag.textContent = "TESTNET";
-            banner.appendChild(tag);
         }
+        banner.style.cssText =
+            "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
         document.body.prepend(banner);
     }
 

src/popup/views/helpers.js

@@ -61,11 +61,16 @@ function showView(name) {
     saveState();
     const net = currentNetwork();
     if (DEBUG || net.isTestnet) {
-        const label = document.getElementById("debug-banner-label");
+        const banner = document.getElementById("debug-banner");
-        if (label) {
+        if (banner) {
-            label.textContent = DEBUG
+            if (DEBUG && net.isTestnet) {
-                ? "DEBUG / INSECURE (" + name + ")"
+                banner.textContent =
-                : net.name + " (" + name + ")";
+                    "DEBUG / INSECURE [TESTNET] (" + name + ")";
+            } else if (net.isTestnet) {
+                banner.textContent = "[TESTNET]";
+            } else {
+                banner.textContent = "DEBUG / INSECURE (" + name + ")";
+            }
         }
     }
 }