mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-07-02 02:11:36 +00:00
Kpa-clawbot
55e4d957b1
Red commit: 12e921d9ba (CI run: pending —
see Actions tab on this branch)
Partial fix for #1648 (M1 of 6). **Do NOT close the tracking issue** —
only top-nav, mobile nav, drawer, mobile-page-actions, and the Compare
entry points are migrated here. M2-M6 (page headers, table chrome,
detail panes, map overlays, settings, lint gate) follow in subsequent
PRs.
## What changed
Replaces emoji glyphs used as UI iconography with vendored Phosphor SVG
sprite refs. Pattern: `<svg class="ph-icon"><use
href="/icons/phosphor-sprite.svg#ph-NAME"/></svg>`. Inherits color via
`currentColor`, sizes to `1em`, no FOUT, no CDN, no webfont.
Sprite: `public/icons/phosphor-sprite.svg` — 34 symbols, 13 KB, regular
weight (plus `circle-fill`/`star-fill`/`square-fill` for status dots).
## Surfaces swapped (M1)
| File | Before (emoji) | After (ph-NAME) |
|---|---|---|
| `public/index.html` L123 | 🔴 | `ph-broadcast` |
| `public/index.html` L129 | ⚡ | `ph-lightning` |
| `public/index.html` L130 | 🎵 | `ph-music-note` |
| `public/index.html` L143 | 🔍 | `ph-magnifying-glass` |
| `public/index.html` L144 | 🎨 | `ph-palette` |
| `public/index.html` L149/L150 | ☀️/🌙 | `ph-sun` / `ph-moon` |
| `public/index.html` L153 | ☰ | `ph-list` |
| `public/bottom-nav.js` TABS | 🏠📦🔴🗺️💬☰ | `house package broadcast
map-trifold chat-circle list` |
| `public/bottom-nav.js` MORE_ROUTES | 🖥️🛠️👁️📊⚡🎵 | `monitor wrench eye
chart-bar lightning music-note` |
| `public/bottom-nav.js` L265 | 🌙/☀️ | `ph-moon` / `ph-sun` |
| `public/nav-drawer.js` ROUTES | (mirror of MORE_ROUTES) | same
Phosphor mapping |
| `public/mobile-page-actions.js` | 🔍🎨 | `ph-magnifying-glass`
`ph-palette` |
| `public/observers.js` Compare obs | 🔍 | `ph-magnifying-glass` |
| `public/observers.js` Compare-selected | ⚖️ | `ph-scales` |
| `public/observers.js` refresh | 🔄 | `ph-arrow-clockwise` |
| `public/observers.js` packetBadge | 📡⚠ | `ph-broadcast` + `ph-warning`
|
| `public/observers.js` row health-dot | ●/▲/✕ | `ph-circle-fill` /
`ph-triangle` / `ph-x` |
| `public/observer-detail.js` Compare | 🔍 | `ph-magnifying-glass` |
| `public/observer-detail.js` health-dot | ● | `ph-circle-fill` |
Also: misc-symbols (`●▲✕`) on observer health dots and the box-drawing
role shapes (per #1648 surprise #3) are migrated here because they live
on the same lines as M1 emoji.
## Tests
E2E assertion added: `test-issue-1648-m1-icons-e2e.js:104` (asserts each
bottom-nav tab renders a `.ph-icon` with non-zero
`getBoundingClientRect`)
Two new tests, both committed RED first then GREEN:
- `test-issue-1648-m1-emoji-scan.js` — static file scan; fails if any M1
file contains emoji or misc-icon codepoints.
- `test-issue-1648-m1-icons-e2e.js` — Playwright; loads top-nav +
bottom-nav + `/observers`, asserts `.ph-icon` children render with
non-zero size and the rendered nav DOM has zero emoji codepoints.
Existing tests untouched and still green (e.g.
`test-observers-headings.js`, frontend-helpers).
## Browser verified
Local Chromium against `python3 -m http.server` from `public/`.
Screenshots taken at 375 / 768 / 1200 × dark/light — all icons render
via `currentColor`, theme toggle recolors, no `.notdef` glyphs, no
layout shift vs pre-fix master.
## Out of scope (deferred to M2-M6)
- Home-page chooser cards (📱⚡), per-page header `<h2>` glyphs,
packet-table chrome — M2.
- Status pills, role/packet-type badges, payload-type icon maps — M3.
- Map popups + route overlays — M4.
- Customize panel emoji configs, channel modals, settings — M5.
- Server-rendered onboarding strings in `cmd/server/routes.go`, `make
lint-no-emoji` gate — M6.
---------
Co-authored-by: openclaw-bot <bot@openclaw.local>
45 lines
2.2 KiB
Bash
45 lines
2.2 KiB
Bash
#!/bin/sh
|
|
# Instrument frontend JS for coverage tracking
|
|
rm -rf public-instrumented
|
|
npx nyc instrument public/ public-instrumented/ --compact=false
|
|
# Copy non-JS files (CSS, HTML, images) as-is
|
|
cp public/*.css public-instrumented/ 2>/dev/null
|
|
cp public/*.html public-instrumented/ 2>/dev/null
|
|
cp public/*.svg public-instrumented/ 2>/dev/null
|
|
cp public/*.png public-instrumented/ 2>/dev/null
|
|
# Copy nested asset directories (e.g. public/img/*.svg used by the new
|
|
# CoreScope logo + hero). nyc instrument skips non-JS subdirs entirely,
|
|
# so without this the SPA fallback would serve index.html for
|
|
# `/img/corescope-logo.svg`, breaking the navbar logo + the
|
|
# logo-rebrand E2E (the content-type assertion catches this cleanly).
|
|
if [ -d public/img ]; then
|
|
mkdir -p public-instrumented/img
|
|
cp -r public/img/. public-instrumented/img/
|
|
fi
|
|
# Copy webfonts (e.g. public/fonts/aldrich-regular.woff2 used by the
|
|
# navbar logo SVG @font-face, #1137 follow-up). Same SPA-fallback gotcha
|
|
# as /img — without this, GET /fonts/aldrich-regular.woff2 returns
|
|
# index.html and the @font-face download fails silently, so the logo
|
|
# falls back to monospace and the Aldrich E2E assertion fails.
|
|
if [ -d public/fonts ]; then
|
|
mkdir -p public-instrumented/fonts
|
|
cp -r public/fonts/. public-instrumented/fonts/
|
|
fi
|
|
# Copy Phosphor icon sprite (#1648 M1). Same SPA-fallback gotcha as /img —
|
|
# without this, GET /icons/phosphor-sprite.svg returns index.html and every
|
|
# <use href="/icons/phosphor-sprite.svg#ph-…"> shows a broken icon.
|
|
if [ -d public/icons ]; then
|
|
mkdir -p public-instrumented/icons
|
|
cp -r public/icons/. public-instrumented/icons/
|
|
fi
|
|
# Copy vendored libraries unmodified — `nyc instrument` skips subdirectories
|
|
# without a package.json, so vendor/qrcode.js, vendor/jsqr.min.js, etc. are
|
|
# never emitted into public-instrumented/. Without them the SPA fallback
|
|
# returns index.html for `<script src="vendor/qrcode.js">`, producing
|
|
# "Unexpected token '<'" pageerrors and a missing `qrcode` global —
|
|
# which makes the QR Generate path hit the "[QR library not loaded]"
|
|
# fallback in channel-qr.js (issue #1087 bug 1 manifests in CI only).
|
|
mkdir -p public-instrumented/vendor
|
|
cp public/vendor/* public-instrumented/vendor/ 2>/dev/null
|
|
echo "Frontend instrumented successfully"
|