feat: add About well to settings with build info and debug easter egg (#145)
All checks were successful
check / check (push) Successful in 22s
All checks were successful
check / check (push) Successful in 22s
## Summary Add a new well at the bottom of the settings view displaying application info (license, author, version, build date, git commit hash linked to Gitea), and an easter egg that reveals a debug mode toggle after clicking the version number 10 times. ## Changes - **`src/popup/index.html`**: Added About well with license, author, version, build date, and linked commit hash. Added hidden debug well with debug mode toggle. - **`src/popup/views/settings.js`**: Populate About well from build-time constants. Implement version click counter (10 clicks reveals debug well). Wire up debug mode toggle to state and runtime logger. - **`src/shared/buildInfo.js`** (new): Module exporting build-time constants (`BUILD_VERSION`, `BUILD_LICENSE`, `BUILD_AUTHOR`, `BUILD_COMMIT`, `BUILD_DATE`, `GITEA_COMMIT_URL`) injected by esbuild define. - **`build.js`**: Read git commit hash (short + full) and version from package.json, pass as esbuild `define` constants. Also reads `GIT_COMMIT_SHORT`/`GIT_COMMIT_FULL` env vars for Docker builds. - **`Dockerfile`**: Accept `GIT_COMMIT_SHORT` and `GIT_COMMIT_FULL` build args, set as env vars for the build step. - **`Makefile`**: Pass git commit hashes as Docker build args. - **`src/shared/state.js`**: Add `debugMode` boolean to state (persisted). - **`src/shared/log.js`**: Add runtime debug flag that supplements the compile-time `DEBUG` constant. Debug mode toggle updates this flag immediately. closes #144 Co-authored-by: clawbot <clawbot@noreply.git.eeqj.de> Co-authored-by: clawbot <clawbot@sneak.cloud> Co-authored-by: user <user@Mac.lan guest wan> Co-authored-by: clawbot <clawbot@eeqj.de> Co-authored-by: sneak <sneak@sneak.berlin> Reviewed-on: #145 Co-authored-by: clawbot <clawbot@noreply.example.org> Co-committed-by: clawbot <clawbot@noreply.example.org>
This commit was merged in pull request #145.
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
const {
|
||||
$,
|
||||
showView,
|
||||
updateDebugBanner,
|
||||
showFlash,
|
||||
escapeHtml,
|
||||
flashCopyFeedback,
|
||||
goBack,
|
||||
pushCurrentView,
|
||||
} = require("./helpers");
|
||||
@@ -10,12 +12,23 @@ const { applyTheme } = require("../theme");
|
||||
const { state, saveState, currentNetwork } = require("../../shared/state");
|
||||
const { NETWORKS, SUPPORTED_CHAIN_IDS } = require("../../shared/networks");
|
||||
const { onChainSwitch } = require("../../shared/chainSwitch");
|
||||
const { log, debugFetch } = require("../../shared/log");
|
||||
const { log, debugFetch, setRuntimeDebug } = require("../../shared/log");
|
||||
const deleteWallet = require("./deleteWallet");
|
||||
const {
|
||||
BUILD_VERSION,
|
||||
BUILD_LICENSE,
|
||||
BUILD_AUTHOR,
|
||||
BUILD_COMMIT,
|
||||
BUILD_DATE,
|
||||
GITEA_COMMIT_URL,
|
||||
} = require("../../shared/buildInfo");
|
||||
|
||||
const runtime =
|
||||
typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
|
||||
|
||||
let versionClickCount = 0;
|
||||
let versionClickTimer = null;
|
||||
|
||||
function renderSiteList(containerId, siteMap, stateKey) {
|
||||
const container = $(containerId);
|
||||
const hostnames = [...new Set(Object.values(siteMap).flat())];
|
||||
@@ -142,6 +155,28 @@ function show() {
|
||||
renderSiteLists();
|
||||
renderWalletListSettings();
|
||||
|
||||
// Populate About well
|
||||
$("about-license").textContent = BUILD_LICENSE;
|
||||
// Show only the name part of the author field (strip email)
|
||||
const authorName = BUILD_AUTHOR.replace(/\s*<[^>]+>/, "");
|
||||
$("about-author").textContent = authorName;
|
||||
$("about-version").textContent = BUILD_VERSION;
|
||||
$("about-release-date").textContent = BUILD_DATE;
|
||||
$("about-commit-link").textContent = BUILD_COMMIT;
|
||||
$("about-commit-link").href = GITEA_COMMIT_URL;
|
||||
|
||||
// Reset version click counter each time settings opens
|
||||
versionClickCount = 0;
|
||||
|
||||
// Show debug well if debug mode is already enabled
|
||||
const debugWell = $("settings-debug-well");
|
||||
if (state.debugMode) {
|
||||
debugWell.style.display = "";
|
||||
} else {
|
||||
debugWell.style.display = "none";
|
||||
}
|
||||
$("settings-debug-mode").checked = state.debugMode;
|
||||
|
||||
showView("settings");
|
||||
}
|
||||
|
||||
@@ -289,6 +324,66 @@ function init(ctx) {
|
||||
ctx.showSettingsAddTokenView,
|
||||
);
|
||||
|
||||
// Bright saturated colors for easter egg flashes (clicks 6–10)
|
||||
const easterEggColors = [
|
||||
"#ff0055", // hot pink
|
||||
"#00cc44", // vivid green
|
||||
"#3366ff", // electric blue
|
||||
"#ff9900", // bright orange
|
||||
"#aa00ff", // vivid purple
|
||||
];
|
||||
|
||||
// Easter egg: click version 10 times to reveal the debug well.
|
||||
// Each click does a copy-flash animation. After 5 clicks, each
|
||||
// additional click flashes a different bright saturated color.
|
||||
$("about-version").addEventListener("click", () => {
|
||||
versionClickCount++;
|
||||
clearTimeout(versionClickTimer);
|
||||
// Reset counter if user stops clicking for 3 seconds
|
||||
versionClickTimer = setTimeout(() => {
|
||||
versionClickCount = 0;
|
||||
}, 3000);
|
||||
|
||||
const el = $("about-version");
|
||||
|
||||
if (versionClickCount > 5) {
|
||||
// Colored flash for clicks 6–10
|
||||
const colorIdx = versionClickCount - 6;
|
||||
const color = easterEggColors[colorIdx % easterEggColors.length];
|
||||
el.classList.remove("copy-flash-fade");
|
||||
el.style.backgroundColor = color;
|
||||
el.style.color = "#ffffff";
|
||||
setTimeout(() => {
|
||||
el.style.backgroundColor = "";
|
||||
el.style.color = "";
|
||||
el.classList.add("copy-flash-fade");
|
||||
setTimeout(() => {
|
||||
el.classList.remove("copy-flash-fade");
|
||||
}, 275);
|
||||
}, 75);
|
||||
} else {
|
||||
// Standard copy-flash for clicks 1–5
|
||||
flashCopyFeedback(el);
|
||||
}
|
||||
|
||||
if (versionClickCount >= 10) {
|
||||
versionClickCount = 0;
|
||||
clearTimeout(versionClickTimer);
|
||||
$("settings-debug-well").style.display = "";
|
||||
}
|
||||
});
|
||||
|
||||
// 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
|
||||
setRuntimeDebug(state.debugMode);
|
||||
|
||||
$("btn-settings-back").addEventListener("click", () => {
|
||||
goBack();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user