sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Global title bar on all screens, screen name in DEBUG banner
All checks were successful
check / check (push) Successful in 14s
Details

Browse Source 
Move "AutistMask by @sneak" to a global title bar that appears
on every screen. Per-view headings demoted to h2 sub-headings.
Settings button moved to bottom of main view alongside Add
wallet. In DEBUG mode, the red banner now shows the current
screen name in parentheses (e.g. "DEBUG / INSECURE (main)").
This commit is contained in:
Jeffrey Paul
2026-02-25 18:38:33 +07:00
parent 1c9d5a9f2d
commit 64bd541013
2 changed files with 38 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/popup/index.html
View File

@@ -8,12 +8,24 @@
</head> </head>
<body class="bg-bg text-fg font-mono text-sm"> <body class="bg-bg text-fg font-mono text-sm">
<div id="app" class="p-2"> <div id="app" class="p-2">
<!-- ============ GLOBAL TITLE BAR ============ -->
<div
class="flex justify-between items-center border-b border-border pb-1 mb-2"
>
<h1>
<span class="font-bold">AutistMask</span> by
<a
href="https://sneak.berlin"
target="_blank"
class="underline decoration-dashed"
>@sneak</a
>
</h1>
</div>
<!-- ============ WELCOME / FIRST USE ============ --> <!-- ============ WELCOME / FIRST USE ============ -->
<div id="view-welcome" class="view hidden"> <div id="view-welcome" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3"> <p class="mb-3">Welcome! To get started, add a wallet.</p>
Welcome to AutistMask
</h1>
<p class="mb-3">To get started, add a wallet.</p>
<button <button
id="btn-welcome-add" id="btn-welcome-add"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer" class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -24,9 +36,7 @@
<!-- ============ ADD WALLET (unified create/import) ============ --> <!-- ============ ADD WALLET (unified create/import) ============ -->
<div id="view-add-wallet" class="view hidden"> <div id="view-add-wallet" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3"> <h2 class="font-bold mb-2">Add Wallet</h2>
Add Wallet
</h1>
<p class="mb-2"> <p class="mb-2">
Enter your 12 or 24 word recovery phrase below, or click the Enter your 12 or 24 word recovery phrase below, or click the
button to roll the die for a new one. button to roll the die for a new one.
@@ -108,9 +118,7 @@
<!-- ============ IMPORT PRIVATE KEY ============ --> <!-- ============ IMPORT PRIVATE KEY ============ -->
<div id="view-import-key" class="view hidden"> <div id="view-import-key" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3"> <h2 class="font-bold mb-2">Import Private Key</h2>
Import Private Key
</h1>
<p class="mb-2"> <p class="mb-2">
Paste your private key below. This wallet will have a single Paste your private key below. This wallet will have a single
address. address.
@@ -165,38 +173,22 @@
<!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ --> <!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ -->
<div id="view-main" class="view hidden"> <div id="view-main" class="view hidden">
<div
class="flex justify-between items-center border-b border-border pb-1 mb-2"
>
<h1>
<span class="font-bold">AutistMask</span> by
<a
href="https://sneak.berlin"
target="_blank"
class="underline decoration-dashed"
>@sneak</a
>
</h1>
<button
id="btn-settings"
class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"
title="Settings"
>
Settings
</button>
</div>
<!-- wallet list --> <!-- wallet list -->
<div id="wallet-list"></div> <div id="wallet-list"></div>
<!-- add wallet button --> <div class="mt-3 border-t border-border pt-2 flex gap-2">
<div class="mt-3 border-t border-border pt-2">
<button <button
id="btn-main-add-wallet" id="btn-main-add-wallet"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer" class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
> >
+ Add wallet + Add wallet
</button> </button>
<button
id="btn-settings"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Settings
</button>
</div> </div>
</div> </div>
@@ -205,7 +197,7 @@
<div <div
class="flex justify-between items-center border-b border-border pb-1 mb-2" class="flex justify-between items-center border-b border-border pb-1 mb-2"
> >
<h1 class="font-bold" id="address-title">Address</h1> <h2 class="font-bold" id="address-title">Address</h2>
<button <button
id="btn-address-back" id="btn-address-back"
class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -275,7 +267,7 @@
<!-- ============ SEND ============ --> <!-- ============ SEND ============ -->
<div id="view-send" class="view hidden"> <div id="view-send" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3">Send</h1> <h2 class="font-bold mb-2">Send</h2>
<div class="mb-2"> <div class="mb-2">
<label class="block mb-1">What to send</label> <label class="block mb-1">What to send</label>
<select <select
@@ -340,9 +332,7 @@
<!-- ============ RECEIVE ============ --> <!-- ============ RECEIVE ============ -->
<div id="view-receive" class="view hidden"> <div id="view-receive" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3"> <h2 class="font-bold mb-2">Receive</h2>
Receive
</h1>
<p class="mb-2"> <p class="mb-2">
Share this address with the sender. Make sure you only use Share this address with the sender. Make sure you only use
this address to receive Ethereum tokens. this address to receive Ethereum tokens.
@@ -372,9 +362,7 @@
<!-- ============ ADD TOKEN ============ --> <!-- ============ ADD TOKEN ============ -->
<div id="view-add-token" class="view hidden"> <div id="view-add-token" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3"> <h2 class="font-bold mb-2">Add Token</h2>
Add Token
</h1>
<p class="mb-2"> <p class="mb-2">
Enter the contract address of the token you want to track. Enter the contract address of the token you want to track.
You can find this on the token's page on Etherscan. You can find this on the token's page on Etherscan.
@@ -423,9 +411,7 @@
<!-- ============ SETTINGS ============ --> <!-- ============ SETTINGS ============ -->
<div id="view-settings" class="view hidden"> <div id="view-settings" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3"> <h2 class="font-bold mb-2">Settings</h2>
Settings
</h1>
<h2 class="font-bold mb-1">Network</h2> <h2 class="font-bold mb-1">Network</h2>
<p class="text-xs text-muted mb-1"> <p class="text-xs text-muted mb-1">
@@ -458,9 +444,7 @@
<!-- ============ APPROVAL ============ --> <!-- ============ APPROVAL ============ -->
<div id="view-approve" class="view hidden"> <div id="view-approve" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3"> <h2 class="font-bold mb-2">A website is requesting access</h2>
A website is requesting access
</h1>
<div class="mb-2"> <div class="mb-2">
<div class="text-xs text-muted mb-1"> <div class="text-xs text-muted mb-1">
From: From:

7
src/popup/index.js
View File

@@ -37,6 +37,12 @@ function showView(name) {
el.classList.toggle("hidden", v !== name); el.classList.toggle("hidden", v !== name);
} }
} }
if (DEBUG) {
const banner = document.getElementById("debug-banner");
if (banner) {
banner.textContent = "DEBUG / INSECURE (" + name + ")";
}
}
} }
// Browser-agnostic storage API // Browser-agnostic storage API
@@ -373,6 +379,7 @@ function backFromWalletAdd() {
async function init() { async function init() {
if (DEBUG) { if (DEBUG) {
const banner = document.createElement("div"); const banner = document.createElement("div");
banner.id = "debug-banner";
banner.textContent = "DEBUG / INSECURE"; banner.textContent = "DEBUG / INSECURE";
banner.style.cssText = 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;"; "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";