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.