Steve Golton

This commit delivers a **bug fix** addressing **WebGL rendering artifacts** within the **UI's counter visualization**. It resolves visual glitches, specifically "double-blend artifacts," that occurred when overlapping counter elements were rendered, by changing the WebGL blend equation from `ADD` to `MAX` in `ui/src/base/gl/step_area.ts`. This ensures that **counter tracks** and other graphical elements are displayed correctly without over-brightening or incorrect blending. The change significantly improves the visual fidelity and user experience of the tracing UI, as evidenced by the numerous updated screenshot hashes.

This commit delivers a **bug fix** for the **UI**, specifically resolving an issue where the **bulk track settings menu** was not appearing in the area select menu. The problem was caused by an incorrect usage of `MenuDivider` components, which has been rectified by replacing them with `MenuTitle` components within the `renderToolbar` function in `timeline_toolbar.ts`. This ensures that both the 'Workspace' and 'Bulk track settings' options are correctly displayed and accessible in the **timeline toolbar**. Additionally, minor styling adjustments were made to `menu.scss` to refine the menu title's appearance, restoring full functionality for users interacting with these settings.

This commit **enhances the user interface** by re-enabling **bouncy overscroll effects** across the application. It modifies the `overscroll-behavior` CSS property in `ui/src/assets/common.scss` from `none` to `contain`, allowing for a more natural scrolling feel. This **UI enhancement** specifically addresses previous user experience issues where custom horizontal panning, such as in the timeline, could inadvertently trigger unwanted browser navigation gestures like back/forward or pull-to-refresh. As a result, users will now experience **smoother scrolling** without losing application state or encountering disruptive browser actions.

This commit **re-introduces an empty state widget** to the **Query Page** within the **UI**, providing crucial visual feedback to users before any query is run. This **new capability**, which was previously lost in a refactor, enhances the initial user experience by clearly indicating that no results are available yet. The primary change involves integrating the `EmptyState` widget into `ui/src/plugins/dev.perfetto.QueryPage/query_page.ts`. Additionally, styling adjustments were made to `ui/src/assets/widgets/empty_state.scss` and the `NoData` semantic icon in `ui/src/base/semantic_icons.ts` was updated to `inbox` for improved consistency.

This commit introduces a **new feature** enabling users to **collapse slice tracks** in the UI, significantly enhancing **track visualization** and screen space management. When collapsed, only the first row of slices remains at full height, while subsequent rows are compacted to 3 pixels. This required a substantial **refactoring** of the **UI rendering pipeline**, introducing new `RowLayout` and `Transform1D` primitives in `ui/src/base/renderer.ts` and `ui/src/base/geom.ts` to manage vertical positioning and transformations. Consequently, core rendering components like `canvas2d_renderer.ts` and `webgl_renderer.ts`, along with specific track implementations such as `slice_track.ts` and `group_summary_track.ts`, were updated to leverage these new layout capabilities. This **maintenance** and **feature** work improves the overall usability of the trace viewer by providing more control over complex track displays.

This commit undertakes a significant **refactoring** of the **UI codebase** by migrating the entire **timeline page** into a new **core plugin**, `dev.perfetto.Timeline`. This change centralizes all timeline-related components, including the minimap, track views, and navigation handlers, within the plugin's dedicated directory, greatly improving **code organization** and self-containment. Additionally, common utilities like `resolution.ts` and `wasd_key_mapping.ts` are extracted to the `ui/src/base` directory for broader reuse across the application. The main frontend entry point (`ui/src/frontend/index.ts`) is updated to dynamically load the timeline via the plugin system, enhancing **modularity** and preparing the **viewer** for future extensibility.

This commit introduces a **new feature** to the **UI build system**, adding a `--typecheck` option to the `ui/build.js` script. This enhancement allows developers and automated agents to perform **TypeScript type checking** by running `tsc --noEmit` independently, without triggering a full build or emitting any output. The implementation modifies the `ui/build.js` script, specifically impacting functions like `main`, `transpileTsProject`, and `prepareBuildLock`, to integrate this new validation flow. This capability is particularly useful for development agents to validate types without interfering with ongoing build processes. Additionally, **documentation** for this new option has been added to `docs/AGENTS-ui.md`, explaining its usage and benefits.

This commit delivers a **bug fix** for the **UI build system**, resolving an issue where the initial TypeScript compilation in **watch mode** would prematurely fail due to errors. It modifies the `ui/build.js` script, specifically within the `transpileTsProject` function, to pass a `noErrCheck` option to the TypeScript compiler. This ensures that the initial build in watch mode completes successfully, preventing disruptions for **UI developers** and improving the overall development workflow. This patch correctly implements a fix that was previously attempted but unsuccessful, providing a more robust **maintenance** solution for the build process.

This commit **fixes an inconsistency** in the **UI build process** by preventing `build.js` from terminating due to initial TypeScript compilation errors when in **watch mode**. Previously, `tsc` errors would halt the initial build but not subsequent ones, which is now aligned to allow continuous development. Additionally, this **maintenance improvement** ensures that **server startup failures** now correctly return non-zero exit codes, enhancing error reporting for the `startServer` function within `ui/build.js`.

This commit introduces a **new feature** to the **UI development server**, specifically enhancing the `startServer` function within `ui/build.js`. It enables automatic port selection, allowing the server to find an available port if the default port 10000 is already in use when running with `--serve` or `run-dev-server`. The system will now automatically increment the port number (e.g., 10001, 10002) until an open port is found. This significantly improves the developer experience by preventing common port conflicts and ensuring the server starts reliably, unless a specific port is explicitly provided via `--server-port`.

This commit introduces a **bug fix** and **maintenance** improvement to the **UI build process** by ensuring all child processes are properly terminated. It refactors the `process.exit()` and signal handling within `ui/build.js` to prevent orphaned processes that could result from script errors (e.g., port conflicts) or termination signals. This change specifically addresses the issue of lingering sub-processes, improving the reliability and resource management of the build environment. The `terminateChildProcesses` logic is now robustly applied upon script exit or signal reception.

This commit delivers **UI enhancements** to the **logs panel** within the `com.android.AndroidLog` plugin. It introduces a **new `leftIcon` property** to the generic `TagInput` component, enabling an optional icon to be displayed on the left side of the input field, which is then leveraged in the logs panel's search bar. Additionally, the commit updates button tooltips and adjusts filter button properties in the logs panel, improving user experience and clarity. The styling for `tag_input.scss` was updated to support these visual changes, and the `TagInput` demo was extended to showcase the new `leftIcon` functionality.

This commit **refactors the UI styling** for core **input widgets** such as `TextInput`, `Select`, `MultiselectInput`, and `TagInput`, transitioning from a subtle material-inspired theme to a more distinct "simple box" appearance. This **style update** improves **user experience** by making input fields more visually obvious and resolves a **critical rendering bug** on Gnome/Linux where `Select` popups appeared white-on-white due to missing backgrounds. The changes involve updating global theme variables in `ui/src/assets/theme_provider.scss` and refactoring individual widget styles to use solid borders and backgrounds, necessitating updates to **visual regression test baselines**.

This commit **refactors the styling** of the **UI switch widget** to significantly improve its **scalability and visual consistency**. It transitions the rendering of the switch thumb's border from margins to borders, leveraging browser rendering for more reliable visibility and width during scaling. Additionally, the switch's height is now made proportional to the font size (`1em`), allowing it to scale harmoniously with other UI elements like the checkbox. This **enhancement** ensures a more robust and adaptable user interface across various display configurations.

This commit **refactors** the UI's track rendering system by moving the `subtitle` and `chips` properties directly into the **`TrackNode`** object, centralizing these display elements for improved **consistency**. Previously, these properties were managed by track renderers or assigned during track registration, but now they reside alongside the track title within `TrackNode`. This **architectural change** impacts core **UI components** like `track_view.ts` and several **plugins** including `ProcessSummary`, `Sched`, and `TraceProcessorTrack`, which are updated to retrieve these properties directly from the `TrackNode`. The overall goal is to simplify the data model and enhance the **maintainability** of how track metadata is handled across the application.

This commit delivers significant **UI/UX improvements** by **revamping the visual styling of segmented buttons** and introducing new **`FormGrid` and `FormRow` components** to enable more flexible and modern form layouts. These enhancements are immediately applied to the **`AddDebugTrackMenu`**, which is refactored to utilize segmented buttons for track type selection and a form grid for column mapping, thereby improving its layout and interaction. The work also includes general **styling adjustments** for elements like the flamegraph filter bar, **refactoring of various UI demos** to showcase new capabilities, and a **bug fix** to ensure `Button` components default to `type="button"` to prevent unintentional form submissions. Overall, this is a **maintenance and feature addition** commit that modernizes the UI, improves component reusability, and enhances the user experience across several key **UI components** and **form interactions**.

This commit delivers a comprehensive **UI refactoring and aesthetic overhaul**, primarily targeting the **sidebar component** and broader application styling. It modernizes the sidebar's appearance with a unified color scheme, refined item spacing, rounded corners, and consistent spinner styles for asynchronous actions, while also introducing an always-visible footer and external link icons. The work includes significant **internal cleanup** of DOM structure and CSS, extracting trace-related actions into a new `trace_actions.ts` module for better organization. Furthermore, subtle color adjustments, such as more muted borders and darker dark-mode backgrounds, are applied across the entire UI, replacing shadows with cleaner borders. This results in a **refreshed and more consistent visual design** for users, improving overall readability and user experience.

This commit introduces significant **UI enhancements** and **new features** to the **Nodegraph widget**. It adds **CSS transitions** for node position, making node movements more visually trackable, and implements support for **optional icons in node title bars** to convey additional information. The **nodegraph toolbar** is also refactored to include grouped, icon-only zoom controls (zoom in/out, fit to screen, reset), alongside a new `resetZoom` API for programmatic control. These **improvements** enhance the overall user experience and provide more robust interaction capabilities, with the **nodegraph demo** also gaining features like cycle detection in its SQL builder.

This commit introduces **new features** to the **UI's line chart component**, specifically enabling **data stacking for multi-series charts** and **interactive series hovering**. Users can now visualize cumulative data more effectively and easily distinguish individual series by highlighting a hovered series while dimming others. The core implementation in `line_chart.ts` updates chart options and axis configurations, with `chart_option_builder.ts` now supporting `time` as an axis type. A dedicated **charts demo** in `charts_demo.ts` has been updated to showcase these enhancements, significantly improving the **interactivity and readability of multi-series line charts** within the application.

This commit introduces a **new Sankey chart type** to the UI, significantly expanding the application's data visualization capabilities for flow analysis. It involves implementing the core `Sankey` chart component and integrating it into the existing ECharts view infrastructure by registering it in `ui/src/components/widgets/charts/echart_view.ts`. A dedicated `SQLSankeyLoader` in `ui/src/components/widgets/charts/sankey_loader.ts` was added to support **SQL-backed data fetching** for these charts, allowing dynamic data presentation. This **new capability** provides users with a powerful tool for visualizing relationships and flows, complete with demonstration examples in `charts_demo.ts` for both static and dynamic data sources.