Files
LEDMatrix/test/web_interface/test_gzip_fallback.py
ChuckandClaude Opus 5 d1e821c625 fix(web): harden, polish and optimize the web UI per the Sept 2026 audit (#568)
* fix(web): harden, polish and optimize the web UI per the September 2026 audit

Works through docs/archive/WEB_UI_AUDIT_2026-09.md (health 8/20).

Implementation integrity (P0)
- app.css now defines every utility class the templates and JS use,
  including .hidden, so the ~145 JS show/hide toggles work. Button reset,
  and base component rules (.btn, .form-control) wrapped in :where() so
  utility classes on the same element win. New static-audit test fails
  when a used utility class has no rule.

Accessibility
- Focus rings render (the old ring rule referenced undefined variables);
  one :focus-visible outline everywhere; skip link; labelled nav landmarks.
- Shared dialog helper (js/utils/dialog.js): role/aria-modal, focus trap,
  Escape, focus return, applied to every modal.
- Named icon-only buttons and labelled ~70 form fields.
- Toasts announced once; errors persist >= 10s; one showNotification.
- Captive WiFi page: live region, timeouts, dark mode, 16px inputs.

Performance (Pi Zero 2 W)
- SSE streams and tab timers pause when hidden or off-tab; the display
  stream only runs while a preview is visible. app-shell.js deferred.
- Widget scripts served as one versioned bundle (/assets/widgets.js):
  52 -> 21 script tags, 66 -> 35 requests on first load.
- Stdlib gzip fallback when flask-compress is missing: first-load JS/CSS
  1358 KB -> 291 KB on the wire. SSE untouched.

Theming and responsive
- File managers, form fields and Fonts upload on theme tokens; bare
  inputs themed in dark mode; no more white surfaces.
- No horizontal overflow at 375px on any tab; 44px touch targets on
  coarse pointers; reduced-motion respected; header title truncates.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): clear Codacy findings on #568

- json-file-manager: focus-trap releases kept in a Map (no dynamic
  property access or delete; no value-returning forEach callback)
- notification / schedule-picker: style and day-label lookups via Map
- app.js: move the pending-queue assignment out of the expression
- diff_viewer / error_handler: named function declarations instead of
  arrow consts

No behavior change.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* test: check the OAuth widget ships in the widget bundle

base.html no longer tags widget scripts one by one; they load through
/assets/widgets.js. Assert the page requests the bundle and the bundle
contains google-oauth.js, which is what the test was protecting.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): address review feedback on #568

- widget bundle version fingerprints every file (name, mtime_ns, size)
- gzip fallback appends Accept-Encoding to an existing Vary header
- dialog helper: releasing a non-top dialog no longer moves focus out of
  the dialog the user is in
- labels: file-upload targets its file input; fallback config fields get
  label for/id pairs; native color input has a fallback name
- utility audit also reads class names inside bound :class expressions

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): give the native color-picker input an accessible name

CodeRabbit flagged this on PR #568 as an outside-diff finding (never
posted inline, so it was missed in the round of fixes that addressed
the other 6 review comments). The <input type="color"> only carried a
title attribute; screen readers don't reliably announce title, and
there's no other label naming the control when showHexInput is false.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): clear Codacy findings in app-shell.js

- drop the unused catch binding on the SSE JSON parse
- move the pending-notification queue assignment out of the expression

No behavior change.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): contain plugin widgets/ dir and bound style-editor retries

From CodeRabbit review on #568 (code that arrived with the main merge):
- serve_plugin_widget resolves widgets/ with resolve_under before
  resolving the manifest script under it, so a symlinked widgets
  directory can't become the containment base (CWE-22). New test.
- style-editor init stops polling after ~10s when the widget never
  registers and leaves the plain fallback fields in place.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-14 09:42:24 -04:00

69 lines
2.7 KiB
Python

"""The stdlib gzip fallback must compress the UI's text assets.
flask-compress is optional (app.py tolerates its absence). Without a fallback a
Pi missing it ships ~1.2 MB of uncompressed JavaScript to a phone over WiFi on
every first load and every update. These pin the fallback's contract: text
assets compress and round-trip byte-for-byte, clients that don't ask for gzip
get the original bytes, and small or non-text responses are left alone.
"""
import gzip
from pathlib import Path
import pytest
STATIC = Path(__file__).resolve().parents[2] / "web_interface" / "static"
@pytest.fixture
def client(monkeypatch):
import web_interface.app as web_app
# Exercise the fallback even on machines that do have flask-compress.
monkeypatch.setattr(web_app, "_HAVE_FLASK_COMPRESS", False)
web_app.app.config["TESTING"] = True
with web_app.app.test_client() as c:
yield c
@pytest.mark.parametrize("url,path", [
("/static/v3/plugins_manager.js", "v3/plugins_manager.js"),
("/static/v3/app.css", "v3/app.css"),
])
def test_static_text_asset_is_gzipped_and_round_trips(client, url, path):
resp = client.get(url, headers={"Accept-Encoding": "gzip, deflate"})
assert resp.status_code == 200
assert resp.headers.get("Content-Encoding") == "gzip"
assert "Accept-Encoding" in resp.headers.get("Vary", "")
original = (STATIC / path).read_bytes()
assert gzip.decompress(resp.data) == original
assert len(resp.data) < len(original) / 2
assert int(resp.headers["Content-Length"]) == len(resp.data)
def test_repeat_request_serves_identical_compressed_bytes(client):
headers = {"Accept-Encoding": "gzip"}
first = client.get("/static/v3/js/app-shell.js", headers=headers).data
second = client.get("/static/v3/js/app-shell.js", headers=headers).data
assert first == second
def test_client_without_gzip_gets_the_original_bytes(client):
resp = client.get("/static/v3/app.css", headers={"Accept-Encoding": "identity"})
assert resp.status_code == 200
assert "Content-Encoding" not in resp.headers
assert resp.data == (STATIC / "v3/app.css").read_bytes()
def test_binary_assets_are_not_recompressed(client):
resp = client.get("/static/v3/icons/icon-192.png", headers={"Accept-Encoding": "gzip"})
assert resp.status_code == 200
assert "Content-Encoding" not in resp.headers
def test_widget_bundle_is_gzipped_and_immutable(client):
resp = client.get("/assets/widgets.js", headers={"Accept-Encoding": "gzip"})
assert resp.status_code == 200
assert resp.headers.get("Content-Encoding") == "gzip"
assert "immutable" in resp.headers.get("Cache-Control", "")
assert b"/* registry.js */" in gzip.decompress(resp.data)