Pinpoint webui contributor

Skia Buildbot Pinpoint Web UI Contributor Guidelines

Use this skill when making changes under buildbot/pinpoint/webui.

Guidelines

• Separate Component Templates: Always place component HTML templates in a

standalone .html file. Do not inline HTML strings within the component's

TypeScript (.ts) file using the template property.

• Separate Stylesheets: If a component requires custom styling, always

create a dedicated .css (or .scss) file. Never inline style declarations

inside the component's TypeScript file using the styles property.

• Minimize Inline Styles: Avoid using the inline HTML style attribute

for complex styling. Simple, single-purpose styling adjustments that are unique

to the element (e.g., adding a margin-top to a spacer or divider) are

acceptable inline. However, if an element requires multiple style declarations

or reusable rules, define them as a class in the component's stylesheet instead.

• Utilize Angular Material Theming: Leverage the official Angular Material

system, color palettes, utility variables (var(--mat-...)), and standard

paddings/densities. Avoid introducing custom hardcoded colors or bespoke layout

metrics. This ensures seamless light and dark mode support.

• Prefer Standard Angular Material Components: Before building any custom

UI element, check if a suitable component exists in the Angular Material library

(e.g., mat-table, mat-select, mat-dialog). Reusing standard elements

provides built-in accessibility (a11y) and keyboard navigation.

• Adhere to the Single Responsibility Principle: Design each component to

serve a single, clear purpose. If a component handles too many unrelated UI

elements, complex operations, or distinct workflows, split it into smaller,

specialized sub-components.

• Extract Complex Business Logic to Services: Keep Angular components lean

by delegating complex business logic, state management, and API data-fetching

operations to dedicated Angular services. Components should primarily focus on

managing the view presentation and user interactions.

• Promote Reusable Components: Move common, highly reusable UI elements,

pipes, and directives into shared or common directories. This prevents code

duplication and enables seamless sharing across different feature components.

• Prefer Enums Over String Literals: Avoid hardcoding raw string literals

for states, types, categories, or configuration values throughout the codebase.

Define and use strongly-typed TypeScript enums or union types to improve

readability, auto-completion, and refactoring safety.