Skip to content

feat(frontend): the device test diagnoses more and says how to fix what fails - #2055

Merged
rpgmem merged 4 commits into
developfrom
claude/device-check-id-theme
Oct 24, 2026
Merged

rpgmem merged 4 commits into
developfrom
claude/device-check-id-theme

Conversation

@rpgmem

@rpgmem rpgmem commented Oct 24, 2026

Copy link
Copy Markdown
Owner

Closes #2054. Stacked on #2053 (the browser name): its commit shows here until that one merges.

Problem

The "Test my device" mode (#2047) checked what a form needs, but not what support is asked about most:

  • the device limit;
  • odd colours;
  • a wrong clock;
  • a private window;
  • the ALTCHA captcha's requirements;
  • data saver.

A failing row did not say what to do, and a hanging check left its row without an answer.

Change

New rows, all in assets/js/ffc-device-check.js; each row is drawn by Frontend\DeviceCheck with its icon:

Row What it shows
Local storage Allowed / blocked (a probe key written and removed at once)
Captcha Supported / missing Web Crypto or Web Workers
Device ID Short code (8 hex), signals read of the site's total, stable or "changes on each read: canvas, audio"
Device clock Correct / ahead / behind, against the Date header of a HEAD request for the page itself (no endpoint; a skew over 60 s warns)
Time zone and language America/Sao_Paulo · UTC-3 · pt-BR
Screen Window, screen, zoom
Connection Online · 4G / data saver on / offline (Network Information API where the browser has it)
Theme Dark (site: follows the system; system: dark)

Device ID

  • ffc-device-signals.js exposes FFCDeviceSignals.collect(): the same signals the forms send, in a read-only mode that never creates the persistent ffc_device_id.
  • The device test reads them twice. Where the device limit is off, the row says so; where the collector cannot run (no HTTPS, library blocked), it says that instead.
  • DeviceCheck::enqueue_assets() now runs after the collector and declares it as a dependency when it is on the page.

How to fix it

  • A row in warn or fail gets an icon-only family button (ffc-icon-info, aria-expanded, aria-controls) that reveals the fix under the result.
  • There is one fix per check. The blocked-location fix depends on the platform (iOS, Android, desktop).

Countdown

  • Device ID, clock, location permission and precision show "… (20 s)" while they run.
  • At zero the row says "No answer after 20 s: reload the page to test again."
  • 20 s covers every check's own limit: the precision read gives up at 15 s, the denied confirmation at 11 s.

Docs and catalogues

  • Documentation (Certificates & Forms topic), pt_BR catalogue, CHANGELOG (Added).

Tests

  • New device-check-id-theme.test.js (22 tests):
    • device ID: off, unavailable, stable with a repeatable code, changing signals named, failed read;
    • theme across settings × system preference;
    • storage allowed / blocked, with no probe left behind;
    • captcha supported / missing;
    • clock correct / ahead / behind, the exact HEAD request, unknown;
    • locale and screen;
    • connection: type, data saver, offline;
    • the information button (aria, toggle, nothing on passing rows);
    • the countdown and its timeout, and that it stops on an answer;
    • the read-only collector never creating ffc_device_id.
  • DeviceCheckTest: 14 rows; every string the script reads (help keys included) is in strings(); the collector dependency.
  • FrontendTest: wp_script_is stubbed.
  • Run locally:
    • the full Vitest suite (2,557 tests);
    • the PHP translation, comment-language, documentation, CSS, icon, button, wiring and asset guards (238 tests);
    • PHPStan, PHPCS, ESLint, Stylelint.

Risk

  • Display only, on the device test page. One HEAD request to the page itself for the clock.
  • ffc-device-signals.js gains an exported read-only collector; the forms' path is unchanged.

Checklist


Generated by Claude Code

"Ordinary browser" becomes the browser's name and version: Chrome,
Chromium, Brave, Edge, Opera and Samsung Internet from the brands a
Chromium browser declares (with the full version from fullVersionList
when it answers), and Firefox, Safari and every iOS browser from the user
agent. A derivative shows its engine ("Brave / Chromium (v. ...)"), and
Opera and Samsung Internet their own number too. An app's own browser
names the app. An unknown browser keeps the generic wording. It stays out
of FFC.Platform: no decision reads the name.

The PDF row now says what it checked: "Supported: this browser can
build and save the PDF."

Closes #2052

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018srx5hc431EYmG4MHUr2KA
…at fails

New rows on the "Test my device" mode of the verification page:
- local storage (a probe key written and removed at once);
- what the ALTCHA captcha needs (Web Crypto, Web Workers);
- the device ID the device limit reads: the same signals the forms send,
  through a read-only collector that never creates the persistent id,
  read twice, shown as a short code, the count of signals read and
  whether they hold (naming the ones that change);
- the device clock against the server's, from the Date header of a HEAD
  request for the page itself (no endpoint);
- time zone, UTC offset and language;
- window, screen and zoom;
- connection (online, type, data saver) where the browser says it;
- theme applied, site setting and system preference.

A failing row carries an information button ("How to fix it") that
reveals the fix, platform-aware for a blocked location. A check still
running counts down from 20 seconds and says when no answer came.

Closes #2054

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018srx5hc431EYmG4MHUr2KA
@rpgmem rpgmem added enhancement New feature or request area:certificates labels Oct 24, 2026 — with Claude
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018srx5hc431EYmG4MHUr2KA
…k-id-theme

# Conflicts:
#	CHANGELOG.md
#	assets/js/ffc-device-check.js
#	assets/js/ffc-device-check.min.js
#	includes/frontend/class-ffc-device-check.php
#	includes/settings/views/documentation/feature-certificates.php
#	languages/ffcertificate-pt_BR.l10n.php
#	languages/ffcertificate-pt_BR.mo
#	languages/ffcertificate-pt_BR.po
#	languages/ffcertificate.pot
@rpgmem
rpgmem marked this pull request as ready for review October 24, 2026 11:56
@rpgmem
rpgmem enabled auto-merge (squash) October 24, 2026 11:56
@rpgmem
rpgmem merged commit 3b64f06 into develop Oct 24, 2026
21 checks passed
@rpgmem
rpgmem deleted the claude/device-check-id-theme branch October 24, 2026 12:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:certificates enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants