ui: Improve track shell/button layout (#4750)
- Since we the track shell is now resizable, the user can simply resize
the shell to see long track names:
- Remove middle ellipsis track titles - just use normal CSS 'end'
ellipsis
- Remove full track title tooltips on hover
- Make track shell buttons display: none when not hovered to avoid
taking up any space at all, leaving more room for the track titles. The
end ellipsis (as opposed to the middle ellipsis) works very nicely with
this approach and avoids unpleasant jumping around.
- This is how various panels in vscode behave - it's a common UX.
- Note: The permanent (i.e. not appear-on-hover) buttons (e.g. pin,
checkbox) have been moved to the end so that they don't shift around
when hovered which would be very annoying!
[a50f6458-1cf9-4c98-88ef-1a9d4dad5bd2.webm](https://github.com/user-attachments/assets/37c0e437-6000-4179-a6b7-c7c5c9a2a5da)
diff --git a/test/data/ui-screenshots/aggregation.test.ts/frametimeline/frame-timeline-aggregation.png.sha256 b/test/data/ui-screenshots/aggregation.test.ts/frametimeline/frame-timeline-aggregation.png.sha256
index 6100453..4df54cb 100644
--- a/test/data/ui-screenshots/aggregation.test.ts/frametimeline/frame-timeline-aggregation.png.sha256
+++ b/test/data/ui-screenshots/aggregation.test.ts/frametimeline/frame-timeline-aggregation.png.sha256
@@ -1 +1 @@
-7ac224d99c70d83287f3a0ed7f06ff73f53ecc17367bf79a7172bd1b700c9a9d
\ No newline at end of file
+5673c1369e9d6e826897d9f5fde82afd8052cb880ca41c744be1aa56efb67a06
\ No newline at end of file
diff --git a/test/data/ui-screenshots/aggregation.test.ts/gpu-counter/gpu-counter-aggregation.png.sha256 b/test/data/ui-screenshots/aggregation.test.ts/gpu-counter/gpu-counter-aggregation.png.sha256
index 218ab43..54f68d7 100644
--- a/test/data/ui-screenshots/aggregation.test.ts/gpu-counter/gpu-counter-aggregation.png.sha256
+++ b/test/data/ui-screenshots/aggregation.test.ts/gpu-counter/gpu-counter-aggregation.png.sha256
@@ -1 +1 @@
-b535fc285f4ba24e01bfce15d890e89975022a2613c7b55c8ae405a0562e8f9e
\ No newline at end of file
+e91a6ec62fac8460d81ce527f53bd59289929416ff76e338d7c90ca1ffef08f5
\ No newline at end of file
diff --git a/test/data/ui-screenshots/chrome_rendering_desktop.test.ts/expand-browser/browser-expanded.png.sha256 b/test/data/ui-screenshots/chrome_rendering_desktop.test.ts/expand-browser/browser-expanded.png.sha256
index 9700b3f..ae71576 100644
--- a/test/data/ui-screenshots/chrome_rendering_desktop.test.ts/expand-browser/browser-expanded.png.sha256
+++ b/test/data/ui-screenshots/chrome_rendering_desktop.test.ts/expand-browser/browser-expanded.png.sha256
@@ -1 +1 @@
-bf11cbef93df97695a579c3dad65d16dcab631091cd0f25685ee926a09ccbfa7
\ No newline at end of file
+fda55a296bfc11fdf71ec6336ed96d3db4494aa01c9d7bbd3bdc4e4d92a457cd
\ No newline at end of file
diff --git a/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks-pivot/debug-track-pivot.png.sha256 b/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks-pivot/debug-track-pivot.png.sha256
index 705a8cf..5742127 100644
--- a/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks-pivot/debug-track-pivot.png.sha256
+++ b/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks-pivot/debug-track-pivot.png.sha256
@@ -1 +1 @@
-78a68921d60e0db108fab4e39679019ddab6edf7b94801eaf2708be4d747c5d0
\ No newline at end of file
+5bd001662488050501a3ee4cbd68dc65e618cabbb53e6b0d9fda495cbb88b1c9
\ No newline at end of file
diff --git a/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-slice-clicked.png.sha256 b/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-slice-clicked.png.sha256
index 215d4d1..6104227 100644
--- a/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-slice-clicked.png.sha256
+++ b/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-slice-clicked.png.sha256
@@ -1 +1 @@
-6efb44334febe2a1c3f9b3513559272f1a08aa965a0fb9504f6f3ed6a3d45fa1
\ No newline at end of file
+24a4828d9d336bbbf40c39411bbb0acbb59316c178bcf9b4b93ee8c591462b8d
\ No newline at end of file
diff --git a/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-track-added.png.sha256 b/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-track-added.png.sha256
index bd05336..62cb7e9 100644
--- a/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-track-added.png.sha256
+++ b/test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-track-added.png.sha256
@@ -1 +1 @@
-be1da671093628eea31c2887b96135acf1e555e62763d67d472657af446819ae
\ No newline at end of file
+e7af4f8f5ad8250323172a63ed110d578e656291be6bfbd91b0ce4fdd434e22a
\ No newline at end of file
diff --git a/test/data/ui-screenshots/funcgraph_trace.test.ts/thread-funcgraph/thread-funcgraph.png.sha256 b/test/data/ui-screenshots/funcgraph_trace.test.ts/thread-funcgraph/thread-funcgraph.png.sha256
index fcf6aa7..7ac31f2 100644
--- a/test/data/ui-screenshots/funcgraph_trace.test.ts/thread-funcgraph/thread-funcgraph.png.sha256
+++ b/test/data/ui-screenshots/funcgraph_trace.test.ts/thread-funcgraph/thread-funcgraph.png.sha256
@@ -1 +1 @@
-4c0f070d59f55ccb2a7e2d5db3dec4c60516210f5723e8df94cffa98082b910e
\ No newline at end of file
+e23b9d2b05507b212903d5cda9f0c3b0791702a61041993d4e46c46df8c8875c
\ No newline at end of file
diff --git a/test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip-expanded.png.sha256 b/test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip-expanded.png.sha256
index 41c8bf0..2b7624f 100644
--- a/test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip-expanded.png.sha256
+++ b/test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip-expanded.png.sha256
@@ -1 +1 @@
-c5045dbdddaa795d8b248dfb6b81639f314ea0a4135c2d5ff7637f0ce16c86a6
\ No newline at end of file
+f43878b4d48c69cfa295a725e90d141cb1e50a35a7b79122b35b2a4d01c9e232
\ No newline at end of file
diff --git a/test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip.png.sha256 b/test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip.png.sha256
index 7e1b1bf..e184210 100644
--- a/test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip.png.sha256
+++ b/test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip.png.sha256
@@ -1 +1 @@
-48575c05f0c31ae18aed55ebabaa7b8f06f4dcc63f136d26b5bbf82fe52d9411
\ No newline at end of file
+48b1b56c630746418bb501aad1f53c29b1307befd71846c2c93a2bc05f35995f
\ No newline at end of file
diff --git a/test/data/ui-screenshots/kernel_trackevent.test.ts/kernel-trackevent-tracks/ftrace-kernel-trackevent.png.sha256 b/test/data/ui-screenshots/kernel_trackevent.test.ts/kernel-trackevent-tracks/ftrace-kernel-trackevent.png.sha256
index 81a8f10..1153309 100644
--- a/test/data/ui-screenshots/kernel_trackevent.test.ts/kernel-trackevent-tracks/ftrace-kernel-trackevent.png.sha256
+++ b/test/data/ui-screenshots/kernel_trackevent.test.ts/kernel-trackevent-tracks/ftrace-kernel-trackevent.png.sha256
@@ -1 +1 @@
-83a9bfe6d7dc2976e5635e325e2be50ce23c9fc11735677d67638a8ee27ae1a4
\ No newline at end of file
+1f6b4646c786f5a201588c6e5ab5dcb148435c6b620df6f47eec2e184745eead
\ No newline at end of file
diff --git a/test/data/ui-screenshots/load_and_tracks.test.ts/info-and-stats/back-to-timeline.png.sha256 b/test/data/ui-screenshots/load_and_tracks.test.ts/info-and-stats/back-to-timeline.png.sha256
index 6b462a6..4948ed2 100644
--- a/test/data/ui-screenshots/load_and_tracks.test.ts/info-and-stats/back-to-timeline.png.sha256
+++ b/test/data/ui-screenshots/load_and_tracks.test.ts/info-and-stats/back-to-timeline.png.sha256
@@ -1 +1 @@
-db4bb49597619ca4c2588aeb20b1f76b2aa01f6db800481472153a0760091370
\ No newline at end of file
+51896e4ef803adc91b3a04c914435b46fa6fb6c5ae031838605325e4f024a9ea
\ No newline at end of file
diff --git a/test/data/ui-screenshots/load_and_tracks.test.ts/load-trace/loaded.png.sha256 b/test/data/ui-screenshots/load_and_tracks.test.ts/load-trace/loaded.png.sha256
index 6b462a6..4948ed2 100644
--- a/test/data/ui-screenshots/load_and_tracks.test.ts/load-trace/loaded.png.sha256
+++ b/test/data/ui-screenshots/load_and_tracks.test.ts/load-trace/loaded.png.sha256
@@ -1 +1 @@
-db4bb49597619ca4c2588aeb20b1f76b2aa01f6db800481472153a0760091370
\ No newline at end of file
+51896e4ef803adc91b3a04c914435b46fa6fb6c5ae031838605325e4f024a9ea
\ No newline at end of file
diff --git a/test/data/ui-screenshots/load_and_tracks.test.ts/mark/mark.png.sha256 b/test/data/ui-screenshots/load_and_tracks.test.ts/mark/mark.png.sha256
index 4c643c3..803328e 100644
--- a/test/data/ui-screenshots/load_and_tracks.test.ts/mark/mark.png.sha256
+++ b/test/data/ui-screenshots/load_and_tracks.test.ts/mark/mark.png.sha256
@@ -1 +1 @@
-f2bc865c9c7044b49e4af79bb859653ab856b4ee554b9ba0df649094c7131ec3
\ No newline at end of file
+0666e44cf8b28d9bd6db3aecaffe353ff4ca6a53ad421311bdd0ecd44a308d6a
\ No newline at end of file
diff --git a/test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/process-details.png.sha256 b/test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/process-details.png.sha256
index 0554249..bd95b61 100644
--- a/test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/process-details.png.sha256
+++ b/test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/process-details.png.sha256
@@ -1 +1 @@
-30bf689a7758edbbbe5e0cb32b603243882f401deb01858ef0cd05dcc54c740e
\ No newline at end of file
+29a163134f4856947d7bef2d0f342bdf34a50bdc8597a3367393bbdddcd0f256
\ No newline at end of file
diff --git a/test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/search-slice.png.sha256 b/test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/search-slice.png.sha256
index fdc9042..20f8f3e 100644
--- a/test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/search-slice.png.sha256
+++ b/test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/search-slice.png.sha256
@@ -1 +1 @@
-02c6ec76c670e341b619b572ff740b358e384e23ea3ac78bacf3e85f3ddc53cf
\ No newline at end of file
+ed2ead228233832e5a541247e42537e4e3c45f1e7303d73a36d6891221c0f914
\ No newline at end of file
diff --git a/test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/one-track-pinned.png.sha256 b/test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/one-track-pinned.png.sha256
index b803a26..00b0d59 100644
--- a/test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/one-track-pinned.png.sha256
+++ b/test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/one-track-pinned.png.sha256
@@ -1 +1 @@
-c03f83c4d3736c9bddd83d49d422e32ad9608d733bf25d0b14bfac81b2a61ae7
\ No newline at end of file
+89d2ed6e21a216a619f75197c3dded928ffc156461549f4b0afc0f4471492b9c
\ No newline at end of file
diff --git a/test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/two-tracks-pinned.png.sha256 b/test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/two-tracks-pinned.png.sha256
index 551e73f..7b29a4d 100644
--- a/test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/two-tracks-pinned.png.sha256
+++ b/test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/two-tracks-pinned.png.sha256
@@ -1 +1 @@
-79727e2c24a0ca897fa47c4c0fc4235d4b941fb753651f78fcde039becef4e0f
\ No newline at end of file
+ba40f3f515b49b403858c2fabbd6d702b2a46e7c4422c0e4fcb1104f908fa293
\ No newline at end of file
diff --git a/test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-compressed.png.sha256 b/test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-compressed.png.sha256
index b824095..a365067 100644
--- a/test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-compressed.png.sha256
+++ b/test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-compressed.png.sha256
@@ -1 +1 @@
-c58412a4766af6f422f21d7ed33c54c275b769aaa5dc1ccfe605ea356f672ab4
\ No newline at end of file
+5a612b53b252cbda544261bc82c4d5e3b06a8bb00505e37c0baf80df093248f5
\ No newline at end of file
diff --git a/test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-expanded.png.sha256 b/test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-expanded.png.sha256
index 0630183..6b07cc9 100644
--- a/test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-expanded.png.sha256
+++ b/test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-expanded.png.sha256
@@ -1 +1 @@
-f916285844ed5aa6adb27952b681ad3fedca63ca3a17ec9706d57ed84f86f47b
\ No newline at end of file
+395e889e6fc8692ed29131c4c0a4614b6aabcae5b84d923747e9fb6d9ecff0a1
\ No newline at end of file
diff --git a/test/data/ui-screenshots/perf_event.test.ts/multiple-callstack-tracks/perf-event-sf-expanded.png.sha256 b/test/data/ui-screenshots/perf_event.test.ts/multiple-callstack-tracks/perf-event-sf-expanded.png.sha256
index ef94af0..765eab3 100644
--- a/test/data/ui-screenshots/perf_event.test.ts/multiple-callstack-tracks/perf-event-sf-expanded.png.sha256
+++ b/test/data/ui-screenshots/perf_event.test.ts/multiple-callstack-tracks/perf-event-sf-expanded.png.sha256
@@ -1 +1 @@
-04c3fe6526d8e4e9de0238cb4c5fe6a8b44b570c80811c01ac20f8e5bf9e93ed
\ No newline at end of file
+ef6f96f65ed38b74b9d0aa66e70eb6fb81032338b5dafd9efb9f1529ffb908e5
\ No newline at end of file
diff --git a/test/data/ui-screenshots/perf_event.test.ts/multiple-callstack-tracks/perf-event-sf.png.sha256 b/test/data/ui-screenshots/perf_event.test.ts/multiple-callstack-tracks/perf-event-sf.png.sha256
index 692465c..18be11c 100644
--- a/test/data/ui-screenshots/perf_event.test.ts/multiple-callstack-tracks/perf-event-sf.png.sha256
+++ b/test/data/ui-screenshots/perf_event.test.ts/multiple-callstack-tracks/perf-event-sf.png.sha256
@@ -1 +1 @@
-c5ecc281f12dd925c17cd6bec5c3542160351032907d474ad7af7c9b7070365f
\ No newline at end of file
+41d829a42cfd7962ac53bc5e42e7a1cea496d26ecf42219897367266522181c8
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrack-command-test/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrack-command-test/after.png.sha256
index 0a277d2..a6045af 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrack-command-test/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrack-command-test/after.png.sha256
@@ -1 +1 @@
-c51eb6e7bf732745711b1a292c88e1ac3663d283097181caedfae43aacb7e63d
\ No newline at end of file
+f94aef5ab99da9cc332fcb47f6f8a5545b1cd6158070bb11d82d8ed5c59f0f70
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrackWithPivot-command-test/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrackWithPivot-command-test/after.png.sha256
index 4aeaa46..e1ff89e 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrackWithPivot-command-test/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrackWithPivot-command-test/after.png.sha256
@@ -1 +1 @@
-26bf85c35c93241ac8754454feae0498e59d7e018649cf72fd0d4ac38a377179
\ No newline at end of file
+db265f80d8c7ff337b254d977d49dd5510aaf3bdc988c42e35db6d140ac6eb6c
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrack-command-test/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrack-command-test/after.png.sha256
index 1b20237..a2014b1 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrack-command-test/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrack-command-test/after.png.sha256
@@ -1 +1 @@
-5e4c1672afa7ae271ba4c22174ff109fe7a3062ea2e72dcdc0ccad0a87fb6b49
\ No newline at end of file
+4973f32b934b4d9158bc311cc29406059f0d833c90b85648a157beeb88b82d45
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrackWithPivot-command-test/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrackWithPivot-command-test/after.png.sha256
index 6ed522c..fc2eac3 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrackWithPivot-command-test/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrackWithPivot-command-test/after.png.sha256
@@ -1 +1 @@
-7212876d11da6f7420e55c9bfb55c4a18334015caa9b86c03f83ab166f30890e
\ No newline at end of file
+daa128b86db08005ba95f4161b95d39effc95010084739629eaa2f6691fc4095
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-command-test/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-command-test/after.png.sha256
index d509b3c..e255737 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-command-test/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-command-test/after.png.sha256
@@ -1 +1 @@
-456b45f583f69f89663cb0892e4d71f890d8e645f7c1adfc31936af5fc98fcbe
\ No newline at end of file
+efa5a8f4b393e2321203d548271b4ae7ff3b30aab434daffffe7b4226e84b676
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-with-explicit-name-filtering/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-with-explicit-name-filtering/after.png.sha256
index d509b3c..e255737 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-with-explicit-name-filtering/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-with-explicit-name-filtering/after.png.sha256
@@ -1 +1 @@
-456b45f583f69f89663cb0892e4d71f890d8e645f7c1adfc31936af5fc98fcbe
\ No newline at end of file
+efa5a8f4b393e2321203d548271b4ae7ff3b30aab434daffffe7b4226e84b676
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-with-path-filtering/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-with-path-filtering/after.png.sha256
index 50ac5d6..e78f327 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-with-path-filtering/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CollapseTracksByRegex-with-path-filtering/after.png.sha256
@@ -1 +1 @@
-47ad5c986e43d7f392f8dba371c18ed7b8374ae0e5cfb60fa5efb2efa8a04a89
\ No newline at end of file
+67fa771d473f20a73fdadaf0536e18d232c9fe8b1993e2d96f4500516c343c0f
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegex-command-test/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegex-command-test/after.png.sha256
index ad47367..ad8ebc2 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegex-command-test/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegex-command-test/after.png.sha256
@@ -1 +1 @@
-5653371cf1c35a53dccab75789c609318d0afd8e717e1d3edbde907b90dfe241
\ No newline at end of file
+ec70bd22d8121008dcc088677d8af40b20fa5d5e28e0b13091c9c4e578c61459
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegex-with-path-filtering/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegex-with-path-filtering/after.png.sha256
index 935fef7..4ade671 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegex-with-path-filtering/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegex-with-path-filtering/after.png.sha256
@@ -1 +1 @@
-0d43ed49f3d92eec02bfcd3861c5cfca9db00fa6b5cc6bbfb5fea54b43a0717c
\ No newline at end of file
+85e84265cd1d2c6209fdee9008e18165039e8dbf363ac3ee84e69e841dae60f4
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegexWithAncestors-command-test/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegexWithAncestors-command-test/after.png.sha256
index 09f13ca..25e6dd1 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegexWithAncestors-command-test/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegexWithAncestors-command-test/after.png.sha256
@@ -1 +1 @@
-7e91ed504742957cf0f0885f3ec84006c05f1e03b08fe82da68ccced027fc23e
\ No newline at end of file
+cfbb6ab416d939cebab4d8287749ce9061cfcab7f0cbbd2b8199a552851392e3
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegexWithAncestors-with-path-filtering/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegexWithAncestors-with-path-filtering/after.png.sha256
index 0c25780..b052627 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegexWithAncestors-with-path-filtering/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-CopyTracksToWorkspaceByRegexWithAncestors-with-path-filtering/after.png.sha256
@@ -1 +1 @@
-159015a8e8a077198155bf0a3029653d781b55bfccf2f8f2f3cb6e2782f8d14d
\ No newline at end of file
+b86b637cc217e15c9a76c8642ae0009ad2ded4db80a975c1209ae61ff25a7527
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-command-test/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-command-test/after.png.sha256
index 6304cf1..87a01d1 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-command-test/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-command-test/after.png.sha256
@@ -1 +1 @@
-a9972bf9b61f79e894e8d6b49380c74be31d5b7969590aea6492ccf981ba16de
\ No newline at end of file
+cfff16800b9883c3ae88e91d4b8a2c907f9d0b1e6bf7ab42e93d70208bcae73b
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-with-explicit-name-filtering/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-with-explicit-name-filtering/after.png.sha256
index 6304cf1..87a01d1 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-with-explicit-name-filtering/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-with-explicit-name-filtering/after.png.sha256
@@ -1 +1 @@
-a9972bf9b61f79e894e8d6b49380c74be31d5b7969590aea6492ccf981ba16de
\ No newline at end of file
+cfff16800b9883c3ae88e91d4b8a2c907f9d0b1e6bf7ab42e93d70208bcae73b
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-with-path-filtering/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-with-path-filtering/after.png.sha256
index 6304cf1..87a01d1 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-with-path-filtering/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-ExpandTracksByRegex-with-path-filtering/after.png.sha256
@@ -1 +1 @@
-a9972bf9b61f79e894e8d6b49380c74be31d5b7969590aea6492ccf981ba16de
\ No newline at end of file
+cfff16800b9883c3ae88e91d4b8a2c907f9d0b1e6bf7ab42e93d70208bcae73b
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-command-test/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-command-test/after.png.sha256
index aa51520..d870ad5 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-command-test/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-command-test/after.png.sha256
@@ -1 +1 @@
-f4970dc0226ae8d422ab8a5309a64665d90a2fc29a39348d9a6ce514ce7fa469
\ No newline at end of file
+35f19102393f5659866713734005b45c4628d778af222c7047741f421c7795fe
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-explicit-name-filtering/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-explicit-name-filtering/after.png.sha256
index aa51520..d870ad5 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-explicit-name-filtering/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-explicit-name-filtering/after.png.sha256
@@ -1 +1 @@
-f4970dc0226ae8d422ab8a5309a64665d90a2fc29a39348d9a6ce514ce7fa469
\ No newline at end of file
+35f19102393f5659866713734005b45c4628d778af222c7047741f421c7795fe
\ No newline at end of file
diff --git a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-path-filtering/after.png.sha256 b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-path-filtering/after.png.sha256
index 29681fa..3084aac 100644
--- a/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-path-filtering/after.png.sha256
+++ b/test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-path-filtering/after.png.sha256
@@ -1 +1 @@
-91e83051bd36052926f440bb7faf9367b7cf382190cdca23fa4eba081cd5e0b7
\ No newline at end of file
+cbe31ce47492e70a435a59bda61bcb8c0e8b6dc9e0d9c9888cd05bde5f279f31
\ No newline at end of file
diff --git a/test/data/ui-screenshots/table_viewer.test.ts/Go-to-slice/current-selection.png.sha256 b/test/data/ui-screenshots/table_viewer.test.ts/Go-to-slice/current-selection.png.sha256
index 3202d17..8c49728 100644
--- a/test/data/ui-screenshots/table_viewer.test.ts/Go-to-slice/current-selection.png.sha256
+++ b/test/data/ui-screenshots/table_viewer.test.ts/Go-to-slice/current-selection.png.sha256
@@ -1 +1 @@
-1b232d3697b8ba8d54a8f10afa8787d369e3bea0ba94fd188b098a4c48366868
\ No newline at end of file
+2031c2331a84871b63c6645bfe477664119d84d9abec416f170ea99c75eb7687
\ No newline at end of file
diff --git a/test/data/ui-screenshots/table_viewer.test.ts/Go-to-slice/go-to.png.sha256 b/test/data/ui-screenshots/table_viewer.test.ts/Go-to-slice/go-to.png.sha256
index 15e1dcc..4b0a5dd 100644
--- a/test/data/ui-screenshots/table_viewer.test.ts/Go-to-slice/go-to.png.sha256
+++ b/test/data/ui-screenshots/table_viewer.test.ts/Go-to-slice/go-to.png.sha256
@@ -1 +1 @@
-13d1a27974d961a5fab6c352ecb9c280bad170e95c4d7d3c5cacc017c739e0e1
\ No newline at end of file
+be1d5fdf7df922fa6c5afa405d7033413fa6f23556571c6f11c0040673cd4bb8
\ No newline at end of file
diff --git a/test/data/ui-screenshots/track_event_description.test.ts/Cpu-thread-scheduling-description/cpu-scheduling-description.png.sha256 b/test/data/ui-screenshots/track_event_description.test.ts/Cpu-thread-scheduling-description/cpu-scheduling-description.png.sha256
index e30a0c0..fd9724d 100644
--- a/test/data/ui-screenshots/track_event_description.test.ts/Cpu-thread-scheduling-description/cpu-scheduling-description.png.sha256
+++ b/test/data/ui-screenshots/track_event_description.test.ts/Cpu-thread-scheduling-description/cpu-scheduling-description.png.sha256
@@ -1 +1 @@
-a626d8ae2090239ff7545593b44a1024709f16623b991621f79aaec3051e60fa
\ No newline at end of file
+fb57221d2f6695d5fdec6f3cb289ea9d7669949b32bd63c2649b8e664cee708f
\ No newline at end of file
diff --git a/test/data/ui-screenshots/track_event_description.test.ts/Ftrace-track-description/ftrace-description.png.sha256 b/test/data/ui-screenshots/track_event_description.test.ts/Ftrace-track-description/ftrace-description.png.sha256
index b9bee65..858ee1d 100644
--- a/test/data/ui-screenshots/track_event_description.test.ts/Ftrace-track-description/ftrace-description.png.sha256
+++ b/test/data/ui-screenshots/track_event_description.test.ts/Ftrace-track-description/ftrace-description.png.sha256
@@ -1 +1 @@
-71f7a365f0b463d129a7b54cbc84f3fa04caafac40556060f450b23d274f3cfc
\ No newline at end of file
+966af67d047f5b044ecd4f01c42eb5fa8967d60928984ba90212c5f17d9d4bff
\ No newline at end of file
diff --git a/test/data/ui-screenshots/track_event_description.test.ts/Thread-state-description/thread-state-description.png.sha256 b/test/data/ui-screenshots/track_event_description.test.ts/Thread-state-description/thread-state-description.png.sha256
index 3ffa1fb..8049123 100644
--- a/test/data/ui-screenshots/track_event_description.test.ts/Thread-state-description/thread-state-description.png.sha256
+++ b/test/data/ui-screenshots/track_event_description.test.ts/Thread-state-description/thread-state-description.png.sha256
@@ -1 +1 @@
-38d1d7a94e7bb81f02d816ce63be88e58851b320acafef701a724cfc2f965cd3
\ No newline at end of file
+989f54edf28439ae88b13229e14cf5128add19a1d0757b769424f166cb836b05
\ No newline at end of file
diff --git a/test/data/ui-screenshots/track_event_description.test.ts/TrackDescriptor-description/track-descriptor-description.png.sha256 b/test/data/ui-screenshots/track_event_description.test.ts/TrackDescriptor-description/track-descriptor-description.png.sha256
index f58e94d..e8e9a4d 100644
--- a/test/data/ui-screenshots/track_event_description.test.ts/TrackDescriptor-description/track-descriptor-description.png.sha256
+++ b/test/data/ui-screenshots/track_event_description.test.ts/TrackDescriptor-description/track-descriptor-description.png.sha256
@@ -1 +1 @@
-b620d6fb0234c07c43d55c5b25bf489281433a59887f954c3adc359d7620437d
\ No newline at end of file
+c9a8fdc4c38e52db6696a3cf1f06c743fa9d475c7120f96466ae306d742037b7
\ No newline at end of file
diff --git a/test/data/ui-screenshots/zoom.test.ts/zoom-out/zoomed-out.png.sha256 b/test/data/ui-screenshots/zoom.test.ts/zoom-out/zoomed-out.png.sha256
index e519bd4..df05425 100644
--- a/test/data/ui-screenshots/zoom.test.ts/zoom-out/zoomed-out.png.sha256
+++ b/test/data/ui-screenshots/zoom.test.ts/zoom-out/zoomed-out.png.sha256
@@ -1 +1 @@
-72d12281e1e5ca56511d22547dcd5ce583f388a1dd979791fd59d94df34b8183
\ No newline at end of file
+cf1eca4379f80f0fd9737661e294d5bbb8285cdf55917e43a48cc77aba36e9a1
\ No newline at end of file
diff --git a/ui/src/assets/widgets/track_shell.scss b/ui/src/assets/widgets/track_shell.scss
index 001c307..3a73cdd 100644
--- a/ui/src/assets/widgets/track_shell.scss
+++ b/ui/src/assets/widgets/track_shell.scss
@@ -104,16 +104,17 @@
}
.pf-visible-on-hover {
- visibility: hidden;
+ display: none;
&.pf-active {
- visibility: unset;
+ display: unset;
}
}
- &:hover {
+ &:hover,
+ &:has(.pf-active) {
.pf-visible-on-hover {
- visibility: unset;
+ display: unset;
}
}
}
@@ -169,6 +170,9 @@
&__title {
grid-area: title;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
&-popup {
position: absolute;
@@ -198,6 +202,9 @@
&__subtitle {
grid-area: subtitle;
font-size: 11px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
&__buttons {
diff --git a/ui/src/components/tracks/base_counter_track.ts b/ui/src/components/tracks/base_counter_track.ts
index b583d4e..1805b29 100644
--- a/ui/src/components/tracks/base_counter_track.ts
+++ b/ui/src/components/tracks/base_counter_track.ts
@@ -707,7 +707,11 @@
return m(
PopupMenu,
{
- trigger: m(Button, {icon: 'show_chart', compact: true}),
+ trigger: m(Button, {
+ className: 'pf-visible-on-hover',
+ icon: 'show_chart',
+ compact: true,
+ }),
},
this.getCounterContextMenuItems(),
);
diff --git a/ui/src/frontend/timeline_page/track_view.ts b/ui/src/frontend/timeline_page/track_view.ts
index 5a92384..d83cd65 100644
--- a/ui/src/frontend/timeline_page/track_view.ts
+++ b/ui/src/frontend/timeline_page/track_view.ts
@@ -136,6 +136,7 @@
const buttons = attrs.lite
? []
: [
+ // Hover-only buttons first
renderer?.track.getTrackShellButtons?.(),
description !== undefined &&
this.renderHelpButton(
@@ -144,10 +145,13 @@
: linkify(description),
),
(removable || node.removable) && this.renderCloseButton(),
+ this.renderTrackMenuButton(),
+ // Always-visible buttons last (pin button is visible when pinned)
// We don't want summary tracks to be pinned as they rarely have
// useful information.
!node.isSummary && this.renderPinButton(),
- this.renderTrackMenuButton(),
+ // Area seletion (when in area selection mode is always visible so put
+ // it at the end)
this.renderAreaSelectionCheckbox(),
];
@@ -346,6 +350,7 @@
onclick: () => {
this.node.remove();
},
+ className: 'pf-visible-on-hover',
icon: Icons.Close,
title: 'Remove track',
compact: true,
diff --git a/ui/src/test/arcvm_trace.test.ts b/ui/src/test/arcvm_trace.test.ts
index 7734d42..63449ff 100644
--- a/ui/src/test/arcvm_trace.test.ts
+++ b/ui/src/test/arcvm_trace.test.ts
@@ -33,9 +33,6 @@
test('ftrace_events', async () => {
// Tests CPU number and machine labels of ftrace tracks.
- await page
- .locator('.pf-middle-ellipsis-left')
- .getByText('Ftrace Events')
- .click();
+ await page.locator('.pf-track__title').getByText('Ftrace Events').click();
await pth.waitForIdleAndScreenshot('ftrace_events.png');
});
diff --git a/ui/src/test/debug_tracks.test.ts b/ui/src/test/debug_tracks.test.ts
index 207aeef..b78c81a 100644
--- a/ui/src/test/debug_tracks.test.ts
+++ b/ui/src/test/debug_tracks.test.ts
@@ -57,7 +57,9 @@
});
// Close the debug track.
- await pth.locateTrack('debug track').getByText('close').first().click();
+ const track = pth.locateTrack('debug track');
+ await track.locator('.pf-track__shell').hover();
+ await track.getByText('close').first().click();
await pth.waitForPerfettoIdle();
await pth.waitForIdleAndScreenshot('debug track removed.png', {
mask: [page.locator('.pf-query-table .pf-header-bar')],
diff --git a/ui/src/test/perfetto_ui_test_helper.ts b/ui/src/test/perfetto_ui_test_helper.ts
index 229bef6..1277974 100644
--- a/ui/src/test/perfetto_ui_test_helper.ts
+++ b/ui/src/test/perfetto_ui_test_helper.ts
@@ -128,8 +128,9 @@
return (trackGroup ?? this.page).locator(`.pf-track[ref="${name}"]`);
}
- pinTrackUsingShellBtn(track: Locator) {
- track.locator('button[title="Pin to top"]').click({force: true});
+ async pinTrackUsingShellBtn(track: Locator) {
+ await track.locator('.pf-track__shell').hover();
+ await track.locator('button[title="Pin to top"]').click();
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/ui/src/test/track_event_description.test.ts b/ui/src/test/track_event_description.test.ts
index 807889a..86f9381 100644
--- a/ui/src/test/track_event_description.test.ts
+++ b/ui/src/test/track_event_description.test.ts
@@ -32,10 +32,9 @@
): Promise<Locator> {
const track = pth.locateTrack(trackName, groupTrack);
await track.scrollIntoViewIfNeeded();
- const trackButtons = track.locator('.pf-track__buttons');
- // To make sure the help button is visible.
- await trackButtons.hover();
- return trackButtons.locator('button i.pf-icon:has-text("help")');
+ // Hover on the track shell to make the help button visible.
+ await track.locator('.pf-track__shell').hover();
+ return track.locator('.pf-track__buttons button i.pf-icon:has-text("help")');
}
[
diff --git a/ui/src/widgets/track_shell.ts b/ui/src/widgets/track_shell.ts
index b92b85a..afaacdc 100644
--- a/ui/src/widgets/track_shell.ts
+++ b/ui/src/widgets/track_shell.ts
@@ -14,17 +14,14 @@
import m from 'mithril';
import {classNames} from '../base/classnames';
-import {DisposableStack} from '../base/disposable_stack';
import {currentTargetOffset} from '../base/dom_utils';
import {Bounds2D, Point2D, Vector2D} from '../base/geom';
-import {assertExists} from '../base/logging';
import {clamp} from '../base/math_utils';
import {hasChildren, MithrilEvent} from '../base/mithril_utils';
import {Icons} from '../base/semantic_icons';
import {Button, ButtonBar, ButtonVariant} from './button';
import {Chip} from './chip';
import {HTMLAttrs, Intent} from './common';
-import {MiddleEllipsis} from './middle_ellipsis';
import {Popup} from './popup';
import {Stack} from './stack';
@@ -353,10 +350,7 @@
),
attrs.subtitle &&
!showSubtitleInContent(attrs) &&
- m(
- '.pf-track__subtitle',
- m(MiddleEllipsis, {text: attrs.subtitle}),
- ),
+ m('.pf-track__subtitle', attrs.subtitle),
),
);
}
@@ -417,7 +411,7 @@
},
attrs.subtitle &&
showSubtitleInContent(attrs) &&
- m(MiddleEllipsis, {text: attrs.subtitle}),
+ m('.pf-track__subtitle', attrs.subtitle),
);
}
}
@@ -465,39 +459,7 @@
}
class TrackTitle implements m.ClassComponent<TrackTitleAttrs> {
- private readonly trash = new DisposableStack();
-
view({attrs}: m.Vnode<TrackTitleAttrs>) {
- return m(
- MiddleEllipsis,
- {
- className: 'pf-track__title',
- text: attrs.title,
- },
- m('.pf-track__title-popup', attrs.title),
- );
- }
-
- oncreate({dom}: m.VnodeDOM<TrackTitleAttrs>) {
- const title = dom;
- const popup = assertExists(dom.querySelector('.pf-track__title-popup'));
-
- const resizeObserver = new ResizeObserver(() => {
- // Determine whether to display a title popup based on ellipsization
- if (popup.clientWidth > title.clientWidth) {
- popup.classList.add('pf-track__title-popup--visible');
- } else {
- popup.classList.remove('pf-track__title-popup--visible');
- }
- });
-
- resizeObserver.observe(title);
- resizeObserver.observe(popup);
-
- this.trash.defer(() => resizeObserver.disconnect());
- }
-
- onremove() {
- this.trash.dispose();
+ return m('.pf-track__title', attrs.title);
}
}
