diff --git a/src/chrome/src/ui/apocalypse-kit.css b/src/chrome/src/ui/apocalypse-kit.css index f7e6bd4d9..02d4fa4ce 100644 --- a/src/chrome/src/ui/apocalypse-kit.css +++ b/src/chrome/src/ui/apocalypse-kit.css @@ -291,6 +291,34 @@ button:active:not(:disabled), box-shadow:inset 0 -2px 0 var(--accent); } +/* WebBrain signature above the page title. The page keeps its own mark (a nuclear + trefoil, W, PDF); this eyebrow only says which product that mark belongs to, so + it stays unboxed — a chip here would read as a third button beside Back. */ +.kit-brand { + display:inline-flex; + align-items:center; + gap:6px; + align-self:start; + margin-bottom:3px; + color:var(--muted); + text-decoration:none; + font:760 9px/1 var(--font-mono); + letter-spacing:.08em; + text-transform:uppercase; + transition:color .16s ease; +} + +/* The PDF reader colors every link in its heading; the signature is not one. */ +a.kit-brand, +a.kit-brand:hover .kit-brand-logo { text-decoration:none; } +.document-heading a.kit-brand { color:var(--muted);font-size:9px; } +.document-heading a.kit-brand:hover { color:var(--accent);text-decoration:none; } + +.kit-brand-logo { width:15px;height:15px;flex:0 0 15px;display:block; } +.kit-brand-sep { opacity:.5; } + +a.kit-brand:hover { color:var(--accent); } + .topbar .apocalypse-icon, .ap-page .apocalypse-icon { width:64px; @@ -1060,6 +1088,9 @@ button:active:not(:disabled), } @media (max-width:700px) { + /* The eyebrow sheds the mode name before the page's own title gives up room. */ + .kit-brand-sep, + .kit-brand-mode { display:none; } .ap-page > header { min-height:0;overflow:visible; } .ap-page .header-right { margin-inline-start:0; } .ap-page .hero-overview { padding:22px 18px; } diff --git a/src/chrome/src/ui/apocalypse-mode.html b/src/chrome/src/ui/apocalypse-mode.html index eb1d6c870..aa9e14d59 100644 --- a/src/chrome/src/ui/apocalypse-mode.html +++ b/src/chrome/src/ui/apocalypse-mode.html @@ -119,7 +119,7 @@ -

00 B
+
WebBrain

00 B
diff --git a/src/chrome/src/ui/emergency-box.html b/src/chrome/src/ui/emergency-box.html index 1d97c5e31..cc1951653 100644 --- a/src/chrome/src/ui/emergency-box.html +++ b/src/chrome/src/ui/emergency-box.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/src/chrome/src/ui/emergency-communication.html b/src/chrome/src/ui/emergency-communication.html index 4295139cf..f95f19390 100644 --- a/src/chrome/src/ui/emergency-communication.html +++ b/src/chrome/src/ui/emergency-communication.html @@ -15,6 +15,7 @@ ←
+ WebBrain

Emergency Communication

A basic word board that works without the internet

diff --git a/src/chrome/src/ui/emergency-pdf.html b/src/chrome/src/ui/emergency-pdf.html index c67c0b56b..16c6a4524 100644 --- a/src/chrome/src/ui/emergency-pdf.html +++ b/src/chrome/src/ui/emergency-pdf.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/src/chrome/src/ui/emergency-text.html b/src/chrome/src/ui/emergency-text.html index c511c4df8..64aa517a8 100644 --- a/src/chrome/src/ui/emergency-text.html +++ b/src/chrome/src/ui/emergency-text.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/src/chrome/src/ui/wikipedia-library.html b/src/chrome/src/ui/wikipedia-library.html index 3abb3baf6..8c4759196 100644 --- a/src/chrome/src/ui/wikipedia-library.html +++ b/src/chrome/src/ui/wikipedia-library.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/src/chrome/src/ui/wikipedia-reader.html b/src/chrome/src/ui/wikipedia-reader.html index b133ece95..9e2f5e7ad 100644 --- a/src/chrome/src/ui/wikipedia-reader.html +++ b/src/chrome/src/ui/wikipedia-reader.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/src/firefox/src/ui/apocalypse-kit.css b/src/firefox/src/ui/apocalypse-kit.css index f7e6bd4d9..02d4fa4ce 100644 --- a/src/firefox/src/ui/apocalypse-kit.css +++ b/src/firefox/src/ui/apocalypse-kit.css @@ -291,6 +291,34 @@ button:active:not(:disabled), box-shadow:inset 0 -2px 0 var(--accent); } +/* WebBrain signature above the page title. The page keeps its own mark (a nuclear + trefoil, W, PDF); this eyebrow only says which product that mark belongs to, so + it stays unboxed — a chip here would read as a third button beside Back. */ +.kit-brand { + display:inline-flex; + align-items:center; + gap:6px; + align-self:start; + margin-bottom:3px; + color:var(--muted); + text-decoration:none; + font:760 9px/1 var(--font-mono); + letter-spacing:.08em; + text-transform:uppercase; + transition:color .16s ease; +} + +/* The PDF reader colors every link in its heading; the signature is not one. */ +a.kit-brand, +a.kit-brand:hover .kit-brand-logo { text-decoration:none; } +.document-heading a.kit-brand { color:var(--muted);font-size:9px; } +.document-heading a.kit-brand:hover { color:var(--accent);text-decoration:none; } + +.kit-brand-logo { width:15px;height:15px;flex:0 0 15px;display:block; } +.kit-brand-sep { opacity:.5; } + +a.kit-brand:hover { color:var(--accent); } + .topbar .apocalypse-icon, .ap-page .apocalypse-icon { width:64px; @@ -1060,6 +1088,9 @@ button:active:not(:disabled), } @media (max-width:700px) { + /* The eyebrow sheds the mode name before the page's own title gives up room. */ + .kit-brand-sep, + .kit-brand-mode { display:none; } .ap-page > header { min-height:0;overflow:visible; } .ap-page .header-right { margin-inline-start:0; } .ap-page .hero-overview { padding:22px 18px; } diff --git a/src/firefox/src/ui/apocalypse-mode.html b/src/firefox/src/ui/apocalypse-mode.html index 666bc7544..f3c4fb8b0 100644 --- a/src/firefox/src/ui/apocalypse-mode.html +++ b/src/firefox/src/ui/apocalypse-mode.html @@ -46,7 +46,7 @@ -

00 B
+
WebBrain

00 B

diff --git a/src/firefox/src/ui/emergency-box.html b/src/firefox/src/ui/emergency-box.html index 1d97c5e31..cc1951653 100644 --- a/src/firefox/src/ui/emergency-box.html +++ b/src/firefox/src/ui/emergency-box.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/src/firefox/src/ui/emergency-communication.html b/src/firefox/src/ui/emergency-communication.html index 4295139cf..f95f19390 100644 --- a/src/firefox/src/ui/emergency-communication.html +++ b/src/firefox/src/ui/emergency-communication.html @@ -15,6 +15,7 @@ ←
+ WebBrain

Emergency Communication

A basic word board that works without the internet

diff --git a/src/firefox/src/ui/emergency-pdf.html b/src/firefox/src/ui/emergency-pdf.html index c67c0b56b..16c6a4524 100644 --- a/src/firefox/src/ui/emergency-pdf.html +++ b/src/firefox/src/ui/emergency-pdf.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/src/firefox/src/ui/emergency-text.html b/src/firefox/src/ui/emergency-text.html index c511c4df8..64aa517a8 100644 --- a/src/firefox/src/ui/emergency-text.html +++ b/src/firefox/src/ui/emergency-text.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/src/firefox/src/ui/wikipedia-library.html b/src/firefox/src/ui/wikipedia-library.html index 3abb3baf6..8c4759196 100644 --- a/src/firefox/src/ui/wikipedia-library.html +++ b/src/firefox/src/ui/wikipedia-library.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/src/firefox/src/ui/wikipedia-reader.html b/src/firefox/src/ui/wikipedia-reader.html index b133ece95..9e2f5e7ad 100644 --- a/src/firefox/src/ui/wikipedia-reader.html +++ b/src/firefox/src/ui/wikipedia-reader.html @@ -15,6 +15,7 @@ ←
+ WebBrain

diff --git a/test/run.js b/test/run.js index 4bdb1e3dc..2b0b0019a 100644 --- a/test/run.js +++ b/test/run.js @@ -25510,6 +25510,64 @@ test('Emergency Box UI and PDF reader stay in Chrome and Firefox parity', () => } }); +test('every WebBrain page signs its header with the extension logo', () => { + // The suite pages carry their own marks (a nuclear trefoil, W, PDF, TXT), so the + // WebBrain lockup is what tells a reader whose product those marks belong to. + const apocalypsePages = [ + 'emergency-box.html', + 'wikipedia-library.html', + 'wikipedia-reader.html', + 'emergency-communication.html', + 'emergency-pdf.html', + 'emergency-text.html', + ]; + for (const browser of ['chrome', 'firefox']) { + const uiDir = path.join(ROOT, `src/${browser}/src/ui`); + + const kit = fs.readFileSync(path.join(uiDir, 'apocalypse-kit.css'), 'utf8'); + assert.match(kit, /\.kit-brand \{[\s\S]*?font:[^;]*var\(--font-mono\)/, + `${browser}: the Apocalypse Kit does not style the shared WebBrain eyebrow`); + assert.doesNotMatch(kit, /\.kit-brand \{[^}]*border:/, + `${browser}: a boxed signature reads as a third button beside Back`); + assert.match(kit, /@media \(max-width:700px\) \{[\s\S]*?\.kit-brand-mode \{ display:none; \}/, + `${browser}: the eyebrow does not shed the mode name on a narrow topbar`); + assert.match(kit, /\.document-heading a\.kit-brand \{ color:var\(--muted\)/, + `${browser}: the PDF reader paints the signature like one of its heading links`); + + for (const page of apocalypsePages) { + const html = fs.readFileSync(path.join(uiDir, page), 'utf8'); + assert.match(html, //, + `${browser}: ${page} does not carry the WebBrain lockup back to Apocalypse Mode`); + assert.match(html, /
\s*]*>WebBrain<\/span><\/span>

/, + `${browser}: Apocalypse Mode does not sign the title it already names`); + assert.doesNotMatch(hub, / sibling inside the same node. + for (const [page, key] of [['history.html', 'hist.title'], ['traces.html', 'tr.title']]) { + const html = fs.readFileSync(path.join(uiDir, page), 'utf8'); + assert.match(html, new RegExp(`

]*>

`), + `${browser}: ${page} does not show the WebBrain logo beside a separately translated title`); + } + const settings = fs.readFileSync(path.join(uiDir, 'settings.html'), 'utf8'); + assert.match(settings, /

]*>]*data-i18n="st\.title"><\/a><\/h1>/, + `${browser}: Settings does not show the WebBrain logo beside its title link`); + for (const page of ['settings.html', 'history.html', 'traces.html']) { + const html = fs.readFileSync(path.join(uiDir, page), 'utf8'); + assert.match(html, /\.brand-mark \{[\s\S]*?width: \d+px;/, + `${browser}: ${page} ships the title logo without sizing it`); + } + } +}); + test('Apocalypse download tracker follows every offline transfer from its pages and Settings', () => { const pages = [ 'apocalypse-mode.html',