Steve Golton

ui: Memscope - Live dashboard page (#5785) This patch adds a new `dev.perfetto.Memscope` UI plugin: a live memory dashboard that connects to an Android (ADB / WDP) or Linux (websocket) target, starts a lightweight trace, and renders periodically refreshed snapshots across four tabs (Processes, System, File Cache, Pressure & Swap). NOTE: In order to keep the PRs as small as possible, this is just the first part of the memscope plugin which only features the dashboard - no profiling mode is implemented yet. ## Key bits - Live tracing session (sessions/live_session.ts): low-overhead monitoring config (process_stats, sys_stats, ftrace). Polls snapshots on an interval, parsing and extracting key counter information. - Connection view (views/connection.ts): Landing page when no session is currently running. Allows the user to select a device protocol, and, if relevant, presents a device list to allow device selection. - Dashboard view: (views/dashboard.ts): Shows up when the user connects to a device and starts recording a live tracing session. Displays a toolbar showing the status of the live session and buttons to control the session, and the four tabs with a tab switcher (SegmentedButton). - Tabs: - Processes tab (views/tabs/processes.ts): Shows a few header cards showing high level system memory usage, a chart showing the sum of all processes grouped by category (arbitrary list defined in process_categories.ts), and a table of all processes with various stats spread across various columns. - System tab (views/tabs/system.ts): Shows various system level memory stats across billboards and a chart. - Page cache tab (views/tabs/page_cache.ts): Show page cache stats including usage and activity charts. - Pressure, swap and LMK tab (views/tabs/pressure_swap.ts): Displays swap usage, memory pressure and LMK events. - Process categorization (process_categories.ts): maps Android process names → high-level categories (Framework, HAL, System UI, …). Colors are assigned positionally from the chart palette so adding categories doesn't require picking hex. ## Usage / testing: - Enable the dev.perfetto.Memscope plugin & restart the page. - Click the memscope sidebar entry. - Connect to your Android/Linux device of choice. - Verify stats look correct. Press pause and play again to ensure the snapshots stop updating when paused. - Switching tabs should stop the periodic updates (and period redraws). - Stop & Open Trace produces a working trace in the main UI. - Verify category chips and OOM-bucket chips read well in both light and dark themes

ui: Fix several issues with counter tracks (#5449) - Fix bug where `min-max` and `log` modes renders the bottom of the graph offscreen. - Print a label on the top and bottom of the graph showing the values at those points. If the top or the bottom of the graph are 0, the label is omitted for clarity. - Remove the zero axis dashed line. The line graph includes a fill down to (or up to) the 0 axis anyway. - Improved number formatting for labels and y-axis ticks + added a ton of unit tests. - Massive internal refactor and simplification of `BaseCounterTrack` (& rename to `CounterTrack` to mirror SliceTrack). - Remove `createQueryCounterTrack` as `CounterTrack` now does everything it used to do.

ui: Add custom SVG-based line chart component (#5783) Adds LineChartSvg - a Mithril+SVG drop-in replacement for the ECharts backed LineChart. Adds features such as series hover & tooltip emphasis, and handles updates much more cleanly without losing state compared to the echarts approach. Also, add to the widget demo page, and add features to CursorTooltip (popup position and offset).

ui: Allow slice tracks to be collapsed (#5306) Make all slices at depth > 0 have a height of 3px when collapsed. The first row is full height. Expanded: <img width="583" height="219" alt="image" src="https://github.com/user-attachments/assets/4f772d97-c933-463b-8e6e-b2f7dca9d38a" /> Collapsed: <img width="583" height="70" alt="image" src="https://github.com/user-attachments/assets/6bf3645e-3269-4152-9077-53dc5739e393" />

ui: Memscope - Profiling support (#5786) This patch adds profiling support to the memscope dashboard. - Addition of a new profile 'action' button along side each debuggable process in the process table. - Profile session (sessions/profile_session.ts): Starts a new Java + native heap tracing session with an opinionated configuration recording into ring buffers. - Profiling page (views/profile_page.ts): Displays the current status of the profiling session as well as some process stats taken from the live session data pertinent to the process being profiled. Features a cancel and stop & open button which stops and opens the trace in perfetto, switching back to the main timeline. <img width="2046" height="720" alt="image" src="https://github.com/user-attachments/assets/4cc648fb-bba3-4bc6-9e35-61a88f0b9511" /> <img width="1032" height="708" alt="image" src="https://github.com/user-attachments/assets/079030dc-e5c5-48da-ab08-98b54e94d623" />

ui: Tweak sidebar styles (#5036) - Internal cleanup: - DOM structure - CSS styles (reduce magic numbers, reuse theme colors, font sizes, etc). - Update sidebar aesthetics: - Single color - Smaller and muted headers - more prominent items - Items styling (rounded corners and better spacing) - Use the same spinner style for async sidebar items (Share, Open in old UI, Convert trace, etc) - Add 'external link' icon to external links - Always-visible footer - Additional changes: - Tweak colors slightly across the entire page (more muted borders, darker BG colors in dark mode). - Remove shadows and replace with subtle borders.

ui: Replace ZonedInteractionHandler on the minimap with DOM elements and native pointer events (#5067) Replace canvas hit-testing (ZonedInteractionHandler) with DOM elements and native pointer events for minimap interactions (brush handles, drag handle, selection area), and render the brushes and shaded occlusion overlays as DOM elements instead of drawing them on the canvas. DOM-based interaction is simpler to maintain and gives us cursors, pointer capture, and CSS containment (contain: strict) for free, while allowing visual tweaks purely in CSS. This PR is functionally and visually a no-op — it's a pure refactor.

ui: Move query tab & omnibox SQL mode into QueryPage plugin (#5040) - Create a new registration system to allow plugins to register omnibox modes. - Use this registration to move the query mode into the QueryPage plugin. - Move everything related to query tabs into the QueryPage plugin. - Remove addQueryResultsTab() from extensions (extensions are a hack and are slowly being removed). - Create new 'Slice Statistics' section in the generic slice details panel 'ThreadSliceDetailsPanel' to show the average duration of all slices with the same name, rather than having this open up in a new query results tab. - This change is to solve a dependency issue, but I believe it to be a much more elegant and useful solution. - In the future, we could replace this with a histogram, but this is out of scope for this PR. <img width="704" height="508" alt="image" src="https://github.com/user-attachments/assets/7d39dc67-67ae-4217-b71e-3ae64e12683e" />

ui: Refactor sidebar (#5606) Refactored sidebar by extracting a number of components into their own classes, and also moved the timeline menu item out into the timeline plugin. This patch is a pure refactor - no functional changes.

ui: Add SVG based histogram chart component (#5802) This patch introduces a new SVG based histogram implementation (not using echarts), similar to the newly introduced SVG based line chart component, which (compared to the echart impl): - Is stable in screenshot tests. - Looks better (no sub-pixel gaps between bars). - Gives us a lot more control to do simple yet custom things like highlighting the background of a bar, which echarts makes it difficult to do. - Fits with the UI's theme and and existing widgets much more closely. This patch contains the following changes: - New chart implementation `HistogramSVG`. - Refactor out some common reusable chart logic into common modules shared with `LineChartSvg`. - Refactor `LineChartSVG` a little to use the new common code and remove a previous hack based on keying. - Use the new svg based histogram in the slice distribution panels.

ui: Consolidate fonts by using Roboto Flex for condensed text (#4908) We are already using Roboto Flex for the normal Roboto fonts but a separate RobotoCondensed font file for compact fonts. With the modern Roboto Flex font we no longer need two font files, and we can just use the single file with a different width. This saves space, and also looks a lot nicer especially on standard DPI displays. Before Font|Size|Notes ---|---|--- RobotoCondensed.woff2|50K| Roboto.woff2|30K|No width axis After Font|Size|Notes ---|---|--- Roboto|56K|Variable width axis

ui: Fix floating point precision issues in slice renderer (#4977) Tracks currently store slice geometry based on start time and duration (ts & dur) which is pushed (almost) verbatim into the WebGL shaders as float32s to be scaled and offset by the timescale. This is a problem when we are really zoomed into the end of a slice, as we are adding a large negative float32 to a large positive float32. This patch changes how this works so that slices are stored using their start time and **end** time instead, which resolves the problem entirely. Fixes: https://b.corp.google.com/issues/487365284

ui: Add new side panel extension point (#5960) Gives plugins a place to surface their own UI alongside the main page. Plugins can register tabs against a new SidePanelManager (exposed on both App and Trace) and call showTab() open them; tabs registered via Trace are automatically torn down with the trace. The panel itself lives to the right of the page content in a resizable split, with a tab strip across registered tabs so multiple plugins can coexist without fighting over the space. Also add com.example.SidePanel example plugin which demonstrates using this panel extension point. <img width="1106" height="682" alt="image" src="https://github.com/user-attachments/assets/99a5d40b-684e-4f73-8528-7dc1c0d60306" />

ui: Fix query table issues (#5091) Fix a handful of issues in the general query results table tables (query page, tabs, etc): - Consolidate the two query table implementations into one component - `ResultsTable`. - Fix broken slice links in the 'tab' version of the results table. - Fix bug where the user can only open up a single pinned query tabs (each new one overwrites the existing one). - Add better integration tests to test the slice linking.

ui: Tidy up chart theming (#4905) - Centralize theming in EchartView to avoid duplication. - Avoid depending on `pf-theme-provider` and remove fallback to documentElement as this won't have the CSS variables set. - Fixes reactivity in scroll position chart in chrome scroll plugin - Use themes rather than options to specify colors, which avoids having to fiddle around with injecting theme colors into options.

ui: Narrow scope of screenshot tests (#5090) Change playwright screenshot tests to only screenshot the relevant element - be it the relevant page (minus the chrome), the timeline, or the details panel. This will reduce the number of test failures which are a result of changing something unrelated to what the test is actually intending to test., reducing overhead required to maintain screenshots after changes, and to reduce screenshot churn.

ui: Tweak form & segmented button styles (#4045) A few improvements to forms and segmented buttons: - Modern segmented button styling - Add FormGrid widget which can be used to lay out sections of forms in a grid rather than stacked - Improve 'AddDebugTrackMenu' styling - Tweak some demo code <img width="368" height="393" alt="image" src="https://github.com/user-attachments/assets/245c5c6d-3388-4e9c-aa07-827851449677" />

ui: Overhaul SegmentedButtons widget (#5672) - Make usage more natural and by making use of compound components and createContext. This is the classic React-style compound components pattern (see https://www.epicreact.dev/soul-crushing-components). - Update usage in all call-sites. - Don't depend on `Button` any more - avoids bugs when button styles change. - Add intent for coloring the active button. The new API look like this: ```ts m(SegmentedButtons, { selectedId: this.view, onOptionSelected: (value) => (this.view = value), }, [ m(SegmentedButton, {value: 'day'}, 'Day'), m(SegmentedButton, {value: 'week'}, 'Week'), m(SegmentedButton, {value: 'month'}, 'Month'), ]); ``` Example of the 'primary' intent applied. <img width="186" height="61" alt="image" src="https://github.com/user-attachments/assets/7510b4e4-8618-4aaa-b787-4479f1a51b7c" />

ui: Remove genai and modelcontextprotocol dependencies (#5889) The @google/genai and @modelcontextprotocol/sdk packages depend on ajv which uses problematic imports that vite/esbuild struggles wth. These packages are only used only by the PerfettoMCP plugin, which is not a default enabled plugin. This patch removes these dependencies, swapping it out for a much simpler fetch-style approach to query the gemini API endpoints manually. The rationale for this is the following: - The PerfettoMCP plugin is not enabled by default and thus is low risk. - The libraries were pulling sizable and problematic dependencies (reduces bundle size by ~2MB uncompressed) - The libraries were not really doing anything all that complex anyway (just fetching an API and handling SSE streaming). Testing: - Check perfetto MCP still works with a valid API keys and model. - Check tool calls still work: e.g. perfetto-execute-query

ui: Move the timeline page into a (core) plugin (#5311) Helps to organise the codebase and keep timeline related registration self contained.