Display labels when a track is expanded
Catapult UI displays process labels in track headers, which helps, e.g.
to find the right renderer process (labels contain title of the page).
This CL adds labels to the Perfetto UI as well. Since labels can be
extremely long, they are not displayed together with the process name,
but are put directly on a track when it's expanded.
This, together with "Expand all" button added recently, would allow one
to find a process corresponding to a particular tab relatively easy.
Bug: 204851423
Change-Id: Id6b7bbd355771e7adbfa247d2b4017677f96de58
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index 084342b..2828b45 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -182,47 +182,53 @@
private mouseDownY?: number;
private selectionOccurred = false;
- view({attrs}: m.CVnode<TrackContentAttrs>) {
- return m('.track-content', {
- onmousemove: (e: PerfettoMouseEvent) => {
- attrs.track.onMouseMove({x: e.layerX - TRACK_SHELL_WIDTH, y: e.layerY});
- globals.rafScheduler.scheduleRedraw();
- },
- onmouseout: () => {
- attrs.track.onMouseOut();
- globals.rafScheduler.scheduleRedraw();
- },
- onmousedown: (e: PerfettoMouseEvent) => {
- this.mouseDownX = e.layerX;
- this.mouseDownY = e.layerY;
- },
- onmouseup: (e: PerfettoMouseEvent) => {
- if (this.mouseDownX === undefined || this.mouseDownY === undefined) {
- return;
- }
- if (Math.abs(e.layerX - this.mouseDownX) > 1 ||
- Math.abs(e.layerY - this.mouseDownY) > 1) {
- this.selectionOccurred = true;
- }
- this.mouseDownX = undefined;
- this.mouseDownY = undefined;
- },
- onclick: (e: PerfettoMouseEvent) => {
- // This click event occurs after any selection mouse up/drag events
- // so we have to look if the mouse moved during this click to know
- // if a selection occurred.
- if (this.selectionOccurred) {
- this.selectionOccurred = false;
- return;
- }
- // Returns true if something was selected, so stop propagation.
- if (attrs.track.onMouseClick(
- {x: e.layerX - TRACK_SHELL_WIDTH, y: e.layerY})) {
- e.stopPropagation();
- }
- globals.rafScheduler.scheduleRedraw();
- }
- });
+ view(node: m.CVnode<TrackContentAttrs>) {
+ const attrs = node.attrs;
+ return m(
+ '.track-content',
+ {
+ onmousemove: (e: PerfettoMouseEvent) => {
+ attrs.track.onMouseMove(
+ {x: e.layerX - TRACK_SHELL_WIDTH, y: e.layerY});
+ globals.rafScheduler.scheduleRedraw();
+ },
+ onmouseout: () => {
+ attrs.track.onMouseOut();
+ globals.rafScheduler.scheduleRedraw();
+ },
+ onmousedown: (e: PerfettoMouseEvent) => {
+ this.mouseDownX = e.layerX;
+ this.mouseDownY = e.layerY;
+ },
+ onmouseup: (e: PerfettoMouseEvent) => {
+ if (this.mouseDownX === undefined ||
+ this.mouseDownY === undefined) {
+ return;
+ }
+ if (Math.abs(e.layerX - this.mouseDownX) > 1 ||
+ Math.abs(e.layerY - this.mouseDownY) > 1) {
+ this.selectionOccurred = true;
+ }
+ this.mouseDownX = undefined;
+ this.mouseDownY = undefined;
+ },
+ onclick: (e: PerfettoMouseEvent) => {
+ // This click event occurs after any selection mouse up/drag events
+ // so we have to look if the mouse moved during this click to know
+ // if a selection occurred.
+ if (this.selectionOccurred) {
+ this.selectionOccurred = false;
+ return;
+ }
+ // Returns true if something was selected, so stop propagation.
+ if (attrs.track.onMouseClick(
+ {x: e.layerX - TRACK_SHELL_WIDTH, y: e.layerY})) {
+ e.stopPropagation();
+ }
+ globals.rafScheduler.scheduleRedraw();
+ }
+ },
+ node.children);
}
}
