Files

T

Pete Miller c5cde404d4 Docs updates - introduce Running Tests, introduce Web UI Frontend, small fixes (#35231 )

* Docs updates

- New test suites doc (how to run tests)
- New WebUI Frontend doc (basic introduction to Brave's different stack)
- Patches points to best practices
- bug fix in claude code skills doc
- Adjust docs/README.md to prioritize the index
- Preflight skill addition of missing test suites

2026-04-20 22:35:18 -07:00

1.6 KiB

Raw Blame History

Web UI Frontend

For most brave-specific WebUI, a different stack to Chromium is used for the frontend.

TypeScript/React components often in components/*/resources/ or components/*_ui or browser/ui/webui/resources/*
Webpack configuration in components/webpack/
Uses Storybook for component development and user, designer, and reviewer verification
Tests via jest in sibling *.test.ts(x) files

Storybook

All WebUI should have a Storybook. This allows:

Rapid realtime iteration with hot-reload
Links to be generated by CI during PRs and shared with other team members

This needs UIs to be:

Built with a componentized mindset - data has to be mocked for tests, for storybook, or provided by the real WebUI communications layer (usually mojom).

State

Consider using createInterfaceApi to wrap mojom interfaces and generate React hooks as well as create a layer that is easily mocked.

For local UI-only state, keep it as simple and local as possible whilst avoiding both prop-drilling and unneccessary re-renders. Consider using small Contexts for components that all need all of the same state properties or computed values, or an external store, with individual property-level subscription, only when disparate components need access to some of the same state or computed values.

Testing

See WebUI Testing

Strings

See WebUI Strings

Chromium

See WebUI Overriding for dealing with modifying existing Chromium WebUI frontend (Lit / Polymer).

1.6 KiB Raw Blame History