From d6a6e24c4ee968b8c5bd0544385ef8250b34e165 Mon Sep 17 00:00:00 2001 From: clawbot Date: Sun, 1 Mar 2026 15:21:51 -0800 Subject: [PATCH] fix: make debug mode toggle work at runtime MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The debug/insecure warning banner was only controlled by the compile-time DEBUG constant. The settings easter egg checkbox toggled state.debugMode and the runtime log flag, but neither index.js nor helpers.js checked these runtime values — the banner was created/updated based solely on the compile-time constant. Changes: - Extract banner logic into updateDebugBanner() in helpers.js that checks isDebug() (combines compile-time DEBUG and runtime debugMode) - Banner is dynamically created/removed: appears when debug is enabled, removed when disabled (no stale banners) - index.js init() syncs runtime debug flag from persisted state before first render, then delegates to updateDebugBanner() - settings.js calls updateDebugBanner() after the checkbox change so the banner immediately reflects the new state - Debug mode persists across popup close/reopen via state.debugMode Fixes the bug where the settings debug toggle had no visible effect. --- src/popup/index.js | 23 +++++++------------- src/popup/views/helpers.js | 42 +++++++++++++++++++++++++++---------- src/popup/views/settings.js | 4 +++- 3 files changed, 41 insertions(+), 28 deletions(-) diff --git a/src/popup/index.js b/src/popup/index.js index 6f8f6d2..8b72d05 100644 --- a/src/popup/index.js +++ b/src/popup/index.js @@ -1,18 +1,19 @@ // AutistMask popup entry point. // Loads state, initializes views, triggers first render. -const { DEBUG } = require("../shared/constants"); const { state, saveState, loadState, currentNetwork, } = require("../shared/state"); +const { isDebug, setRuntimeDebug } = require("../shared/log"); const { refreshPrices } = require("../shared/prices"); const { refreshBalances } = require("../shared/balances"); const { $, showView, + updateDebugBanner, setRenderMain, pushCurrentView, goBack, @@ -209,21 +210,11 @@ async function init() { await loadState(); applyTheme(state.theme); - const net = currentNetwork(); - if (DEBUG || net.isTestnet) { - const banner = document.createElement("div"); - banner.id = "debug-banner"; - if (DEBUG && net.isTestnet) { - banner.textContent = "DEBUG / INSECURE [TESTNET]"; - } else if (net.isTestnet) { - banner.textContent = "[TESTNET]"; - } else { - banner.textContent = "DEBUG / INSECURE"; - } - 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); - } + // Sync runtime debug flag from persisted state before first render + setRuntimeDebug(state.debugMode); + + // Create the debug/testnet banner if needed (uses runtime debug state) + updateDebugBanner(); // Auto-default active address if ( diff --git a/src/popup/views/helpers.js b/src/popup/views/helpers.js index e4744ef..fc9f2f9 100644 --- a/src/popup/views/helpers.js +++ b/src/popup/views/helpers.js @@ -1,6 +1,7 @@ // Shared DOM helpers used by all views. const { DEBUG } = require("../../shared/constants"); +const { isDebug } = require("../../shared/log"); const { formatUsd, getPrice, @@ -59,19 +60,37 @@ function showView(name) { clearFlash(); state.currentView = name; saveState(); + updateDebugBanner(name); +} + +// Create or update the debug/insecure warning banner. +// Called on every view switch and after the settings debug toggle changes. +// The banner is shown when the compile-time DEBUG constant is true OR when +// the user has enabled runtime debug mode via the settings easter egg, OR +// when the active network is a testnet. +function updateDebugBanner(viewName) { + const debug = isDebug(); const net = currentNetwork(); - if (DEBUG || net.isTestnet) { - const banner = document.getElementById("debug-banner"); - if (banner) { - if (DEBUG && net.isTestnet) { - banner.textContent = - "DEBUG / INSECURE [TESTNET] (" + name + ")"; - } else if (net.isTestnet) { - banner.textContent = "[TESTNET]"; - } else { - banner.textContent = "DEBUG / INSECURE (" + name + ")"; - } + const show = debug || net.isTestnet; + let banner = document.getElementById("debug-banner"); + if (show) { + if (!banner) { + banner = document.createElement("div"); + banner.id = "debug-banner"; + 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); } + const suffix = viewName ? " (" + viewName + ")" : ""; + if (debug && net.isTestnet) { + banner.textContent = "DEBUG / INSECURE [TESTNET]" + suffix; + } else if (net.isTestnet) { + banner.textContent = "[TESTNET]" + suffix; + } else { + banner.textContent = "DEBUG / INSECURE" + suffix; + } + } else if (banner) { + banner.remove(); } } @@ -417,6 +436,7 @@ module.exports = { showError, hideError, showView, + updateDebugBanner, setRenderMain, pushCurrentView, goBack, diff --git a/src/popup/views/settings.js b/src/popup/views/settings.js index db5b824..576c251 100644 --- a/src/popup/views/settings.js +++ b/src/popup/views/settings.js @@ -1,6 +1,7 @@ const { $, showView, + updateDebugBanner, showFlash, escapeHtml, flashCopyFeedback, @@ -372,11 +373,12 @@ function init(ctx) { } }); - // Debug mode toggle + // Debug mode toggle — update runtime flag, persist, and re-render banner $("settings-debug-mode").addEventListener("change", async () => { state.debugMode = $("settings-debug-mode").checked; setRuntimeDebug(state.debugMode); await saveState(); + updateDebugBanner(state.currentView); }); // Sync runtime debug flag on init