ui: Add a control to manipulate workspaces

Features:
- A dropdown to switch workspaces
- An option to create a new workspace
- A menu to:
  - Rename the current workspace
  - Delete the current workspace

Change-Id: Ie0784927d2ee78252d21e65c4b0f720526df5a89

test/data/ui-screenshots/aggregation.test.ts/frametimeline/frame-timeline-aggregation.png.sha256

@@ -1 +1 @@
-e2d1df01e89d7bb7b0d724a0d0596b54d2cf6cb8422674c30bc629acd86d643b
+719f251f7ef82f0e2e75d96c3cb087bae61c015808338fcc9279744e1789c1d6

test/data/ui-screenshots/aggregation.test.ts/gpu-counter/gpu-counter-aggregation.png.sha256

@@ -1 +1 @@
-80de4fee89fa66a69b1ef18a16311001337666ffe19c04871d6059f4005bbfa2
+08c7e607d7d8f80640a92d443f448d3baf0590e70bc63a73d63deae88bf9a457

test/data/ui-screenshots/aggregation.test.ts/sched/cpu-by-process.png.sha256

@@ -1 +1 @@
-6c04e308e424454b567b03f53158666a6d9894a701c49cffa4db16752b5dbf43
+f60d51ce27b9cad445b57bde8fc51e2430aa8e368c264759fba1f721963d8aa9

test/data/ui-screenshots/aggregation.test.ts/sched/cpu-by-thread.png.sha256

@@ -1 +1 @@
-4f2b5fcd5470141b9ee5d47596226e5a1c865c142d901aaaf50cf1e3ee4226ad
+b4548d575c5b4e74b2a1ffb6af6b49de55c97e2a2050e3618715a7f2b2872814

test/data/ui-screenshots/aggregation.test.ts/sched/sort-by-occurrences.png.sha256

@@ -1 +1 @@
-bed063235afa8a929095ed004a775223e960cb7569bea3d87d0fbe08bc300500
+c7af89adbdf745c835966e66540fa67b677fbdaf03fe346e9661689353cb4dcc

test/data/ui-screenshots/aggregation.test.ts/sched/sort-by-wall-duration-desc.png.sha256

@@ -1 +1 @@
-d143dfe3a7cecab0fc88f4ea43a54acc7354bc5f3913d0074d244704e719e0e9
+8132cb11f7658733988d0e170de76a2306c25d8d2871f6c6209f051f1db80fad

test/data/ui-screenshots/aggregation.test.ts/sched/sort-by-wall-duration.png.sha256

@@ -1 +1 @@
-50ad6b0e3ee4149056f09116069a2881b5b34255373f4bd06e654d033feea357
+18a0b97b61cf1266c9954646c11822bf6582cd07bc0530db4e5846b57a799eef

test/data/ui-screenshots/aggregation.test.ts/slices/slice-aggregation.png.sha256

@@ -1 +1 @@
-3ee6450cd50375fceb6d6c99a32baaa25bfc85da9043bc284b2ae8563cd87b87
+78bf1ad90eaeb54628b3fcde2684a842dac3b5241cc55f98b5d00cd05f0e2f1c

test/data/ui-screenshots/chrome_missing_track_names.test.ts/expand-all-tracks/all-tracks-expanded.png.sha256

@@ -1 +1 @@
-899445fc024fe924fba6afa5c2b47034b1bcc51f898d425ef6bdebc545cb7561
+23b835cf620a32bdbe2a8b7f57f3e0d08f4350f2b27c87780d8c9e20daa2eb09

test/data/ui-screenshots/chrome_missing_track_names.test.ts/trace-loaded/trace-loaded.png.sha256

@@ -1 +1 @@
-df92fe62b96d199b0fecb8728806af15bace6e86567c15b6b13f1fe1fab675aa
+d5d5bc1c15622b7490c46a39b95e7caf5ded84560403e9cb8a3f9ee91f6befa2

test/data/ui-screenshots/chrome_rendering_desktop.test.ts/expand-browser/browser-expanded.png.sha256

@@ -1 +1 @@
-59be4b1570f8a3e1a3ba26509c73b8540effeb6d48035d116e1157713178d6d9
+1fb4597938818a3dfc4af7fee836738f42bbf74cc70cc88c7412567ecb93e5ea

test/data/ui-screenshots/chrome_rendering_desktop.test.ts/load-trace/loaded.png.sha256

@@ -1 +1 @@
-f116f98fd136d81e4dc62d33ae39cd9c8d05b5c3114b5d0c89f0d83c007e43e0
+71cc7fb0dd7cda16ac47573540e248b1841cf3ca6b08b3b2598f9fb9b0b4f32a

test/data/ui-screenshots/chrome_rendering_desktop.test.ts/slice-with-flows/slice-with-flows.png.sha256

@@ -1 +1 @@
-03889d9fd8ed595f8436213d17b20e4d3726c5d027cf5b42a73b483acc1bfcf7
+63d950ec621a011c196cbb2a063c43888b1bd8c64dded703423e8eaef8558490

test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-slice-clicked.png.sha256

@@ -1 +1 @@
-56be8e00b216d73c6f7cc2c438f3e3ae5519547657b823b59073a5ee1184f600
+e29d0987d3f465a84d2012a9311aabc09a526bf26807882ec69ade819c225fbe

test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-track-added.png.sha256

@@ -1 +1 @@
-8248f4ef857827b0072a3352111e8f843b6dcb94e328fd4ce3a143ccb3a578be
+5670772a88fab2ce938a68e3988719e018d30d7181fc7bb03717c4c5ef3b6747

test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-track-removed.png.sha256

@@ -1 +1 @@
-bd4766191d41a0b4921e9afd26bbccae4eaf21d3a6b5dbddc711383267fcb710
+114b74a739a82194181b8808ebc5bfc360d5d9b5588e6006cdfbdb098358f70a

test/data/ui-screenshots/ftrace_tracks_and_tab.test.ts/ftrace-tab/ftrace-tab.png.sha256

@@ -1 +1 @@
-15b3485f2156276352ce4f8263f8c2c53cb9cb4867815d6e2fe40baba9b86f12
+30e0c9efad715838a47e6e3813d6cb807a25c866baa01ad49505a25a21fb76f6

test/data/ui-screenshots/ftrace_tracks_and_tab.test.ts/ftrace-tracks/ftrace-events.png.sha256

@@ -1 +1 @@
-ab0432f1e3667de9fe23a6d4162b5610eaec360473a0c91be0292dcf78f2ee4d
+3ddd48fb3f3383ad0798315c670d57e24814d1e9e8cb4b9b31ac91c403b646c7

test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip-expanded.png.sha256

@@ -1 +1 @@
-6ad4e44b0562ec6942546b6ff0a04e25a94f75fbee1b2dcd5ed80c5c42edb523
+9e973862cbd9dc7ff9900504ea46644c79d324fc1a4690014b7851d55770f189

test/data/ui-screenshots/independent_features.test.ts/debuggable-chip/track-with-debuggable-chip.png.sha256

@@ -1 +1 @@
-275450d596f773b123e84d15ab489cea99168d24bb68a15ec8b234356d79010c
+9041123b56e604891f28286c24ce4e42dd7b9d253568163b0d24aba19cbf8292

test/data/ui-screenshots/load_and_tracks.test.ts/info-and-stats/back-to-timeline.png.sha256

@@ -1 +1 @@
-40a4d0654049be61be2a11e4c9efb1458dd21913696c71efa935740d033ae5bb
+b0552bbe60b6691c0761a1cb125fde45c205b81f71aa59825614803ca2b4c404

test/data/ui-screenshots/load_and_tracks.test.ts/load-trace/loaded.png.sha256

@@ -1 +1 @@
-40a4d0654049be61be2a11e4c9efb1458dd21913696c71efa935740d033ae5bb
+b0552bbe60b6691c0761a1cb125fde45c205b81f71aa59825614803ca2b4c404

test/data/ui-screenshots/load_and_tracks.test.ts/mark/mark-0.png.sha256

@@ -1 +1 @@
-707dac1473fcc54bd8dc6a308bb2f2f8e0fa2ea289b2e324043b3bf388c83a33
+44a410d14dcf3197ad29cc59623c8744717a517cf23d4ec85fd2b78926a343a7

test/data/ui-screenshots/load_and_tracks.test.ts/mark/mark-1.png.sha256

@@ -1 +1 @@
-707dac1473fcc54bd8dc6a308bb2f2f8e0fa2ea289b2e324043b3bf388c83a33
+44a410d14dcf3197ad29cc59623c8744717a517cf23d4ec85fd2b78926a343a7

test/data/ui-screenshots/load_and_tracks.test.ts/mark/mark-2.png.sha256

@@ -1 +1 @@
-a5d325fd501c92d6dfe89d02afe33fc4331ef27a0ee854c2dbed5d66f5f70ba8
+eeb4097bef65291e8741b016a327e2342eaca56a3265765288397b5c4349af78

test/data/ui-screenshots/load_and_tracks.test.ts/mark/mark-3.png.sha256

@@ -1 +1 @@
-7004506060a2d8b51196e211bd42854a2998513de3ff9220b15d8563eb45e9d2
+5fce62f177042f1f16eea2fb83123ef01a53d9320a332a86df99855ea18d7e58

test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/process-details.png.sha256

@@ -1 +1 @@
-e18cb45f5b2b27823ec32be6627cd7ab3317c576d8e8d01e89b790eab85b75e0
+857425fb3db4d9750d0acfe59348cddb7c250b87e3b0d3ebadfccb1c79fb5213

test/data/ui-screenshots/load_and_tracks.test.ts/omnibox-search/search-slice.png.sha256

@@ -1 +1 @@
-3ee6fa78f540d85996badbcda0c4f732cf650a935911e9aebee045ce968a374d
+7c0a51d65fa7b2bdb488bc0fa684dfb15aab22cef0da69356b479df91a5d0547

test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/one-track-pinned.png.sha256

@@ -1 +1 @@
-2472849b80b746e951da38860bf49d06d5235072ce8b3de2e99ee4d6f7488b88
+3b91270aa69f39e9772bb52fdc963ab0fee5101d0a3d951a86965825aa702493

test/data/ui-screenshots/load_and_tracks.test.ts/pin-tracks/two-tracks-pinned.png.sha256

@@ -1 +1 @@
-27c78749dddc29c69a6ddc2062efa10aee2ab8d3613cfee79b4fb43f8ed8ab6a
+b85d0e2d8550e5a11829ef7684646bad04bea637196b3752c6e2244bfcd65bfc

test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-compressed.png.sha256

@@ -1 +1 @@
-7b02b88c468bc8d7a77eb3d96028e8e75fdfdb1567568e6362a32419dd2ba76d
+570d8645aaface498d676c3a25d20667d37e2666ac9deae6b620b8e50042ca51

test/data/ui-screenshots/load_and_tracks.test.ts/track-expand-and-collapse/traced-probes-expanded.png.sha256

@@ -1 +1 @@
-c53e207ab2365874ad7b41ff35e55058ca3cf97cdf322158e1cb721967913739
+fe6c4190f556e95c5cba64e0fde701790227b9bea873a9f3a8e91028c576f768

test/data/ui-screenshots/local_cache_key.test.ts/multiple-traces-via-url-and-local-cache-key/back-to-trace-1.png.sha256

@@ -1 +1 @@
-623533f6505744aa0350a5b5939c1b55354117cd437ef586a0f9caed195aef60
+49366656c6bc4e4d4971196e21ef1cd6001b9efeb9c1bf0fcac79bea7c9d07d4

test/data/ui-screenshots/local_cache_key.test.ts/multiple-traces-via-url-and-local-cache-key/trace-1.png.sha256

@@ -1 +1 @@
-623533f6505744aa0350a5b5939c1b55354117cd437ef586a0f9caed195aef60
+49366656c6bc4e4d4971196e21ef1cd6001b9efeb9c1bf0fcac79bea7c9d07d4

test/data/ui-screenshots/local_cache_key.test.ts/multiple-traces-via-url-and-local-cache-key/trace-2.png.sha256

@@ -1 +1 @@
-369e648805e93b24767011a9311f7d56a4177095019b5b1c22f197af6d69a42f
+afd50e2132446e616267ac176a1860e3d9e6b2de1077507ecd42f41054949eac

test/data/ui-screenshots/queries.test.ts/omnibox-query/query-mode.png.sha256

@@ -1 +1 @@
-2c1307aef3394b6bc5578ed978b6ea309dbdf704962f715cf5cde5ee2c210e34
+d5d90213205f592b428c98617f83b87474526f0cbf3c02646f2c3238ebda45fe

test/data/ui-screenshots/queries.test.ts/omnibox-query/row-1-clicked.png.sha256

@@ -1 +1 @@
-3d72e47eded0ea93df6c90c75806ae6c74aa0ef8f82102d56eb9922bcf149982
+4d1f51ba24c9508de37a6479b22d3d5e11b3aa821068ed9c2f7273ac3479bf25

test/data/ui-screenshots/queries.test.ts/omnibox-query/row-2-clicked.png.sha256

@@ -1 +1 @@
-e029bc3f7fac66fac4ba26b1447d75ec3e432a59833c949060e9c87adc74005f
+ee3feaa5cc3eaac12cd42a357e1ae96db27dfefd2798ecee5b09687427778168

test/data/ui-screenshots/sql_table_tab.test.ts/ShowTable-command/slices-table.png.sha256

@@ -1 +1 @@
-54a13287830de5bb2a3d2b41e27333b78d70470048ff098bfcaac39943c67342
+cde0007f0edcde99f7f202db3ef21d8079c709b9183506ed4c7dfa5c88b3e63f

test/data/ui-screenshots/sql_table_tab.test.ts/slices-with-same-name/slices-with-same-name.png.sha256

@@ -1 +1 @@
-64d45d39ef2c3ec2429facf14d52726b975bdeb51e2aa08ac6e6a20c578f3528
+17529a07363d7a0d68e8a1003e6850e187ac8f943d5eb8939fceee7099c2f1c9

test/data/ui-screenshots/track_event_ordered_tracks.test.ts/chronological-order/chronological.png.sha256

@@ -1 +1 @@
-1dd9a741615322d9be1be1274548e0486ae89c76bb90c68d25338ea8650dadcf
+da1138f86e00fb61c2c1e3fc4747df3ced88b568a096b25187e1333b026c33c5

test/data/ui-screenshots/track_event_ordered_tracks.test.ts/explicit-order/explicit.png.sha256

@@ -1 +1 @@
-3cb8e4e7ec845651e1eececc269af24b85780f512cbc3e30e324e4245221ff8e
+f13ce874f56d7a7377617c23f848b67368a52b08dbe0941962f43c64ed874034

test/data/ui-screenshots/track_event_ordered_tracks.test.ts/lexicographic-tracks/lexicographic.png.sha256

@@ -1 +1 @@
-cdc4b649fd9b513e8040bbaa84e96351c96b0505c0cd85b8cd404dd770b0e1ce
+77061abe6a7c2c2267f5e035731c07757a1d77974ecce3f850063296a107a641

test/data/ui-screenshots/track_event_ordered_tracks.test.ts/load-trace/loaded.png.sha256

@@ -1 +1 @@
-bb8b39c8902ab4894ca9c0a49e552ec2aea334c0deaf38e72652c3515333fe5e
+6e40ead02935f5523ef67cd7559036964d1788cb5f716c7923ec659e22edf975

test/data/ui-screenshots/zoom.test.ts/zoom-in/zoomed-in.png.sha256

@@ -1 +1 @@
-5ebf3b95129018f61f0b8926279007e98ff067a2b8800615182990857510957d
+f7aaef8d41d81ee1b034b8788fd2f39abaa057a303769327eeb9c3c6883e4965

test/data/ui-screenshots/zoom.test.ts/zoom-out/zoomed-out.png.sha256

@@ -1 +1 @@
-5286a76c7355b100d883e80d4d11b9c1356566608b5408795b6e6145ff1703b3
+2853e70d06e1e9e33a8e705a0d4dfbb72f707ed4bc33c64c02942e19681f00d4

ui/src/assets/viewer_page.scss

@@ -55,10 +55,16 @@
   }
 }
 
-.pf-timeline-header__toolbar {
+.pf-timeline-toolbar {
+  width: var(--track-shell-width);
+  border-right: solid 1px transparent;
   padding-inline: 2px;
+
+  &__workspace-selector {
+    flex: 1;
+  }
 }
 
-.pf-track-details-dropdown {
+.pf-track__track-details-popup {
   min-width: 350px;
 }

ui/src/core/workspace_manager.ts

@@ -19,13 +19,13 @@ import {raf} from './raf_scheduler';
 const DEFAULT_WORKSPACE_NAME = 'Default Workspace';
 
 export class WorkspaceManagerImpl implements WorkspaceManager {
+  readonly defaultWorkspace = new Workspace();
   private _workspaces: Workspace[] = [];
   private _currentWorkspace: Workspace;
 
   constructor() {
-    // TS compiler cannot see that we are indirectly initializing
-    // _currentWorkspace via resetWorkspaces(), hence the re-assignment.
-    this._currentWorkspace = this.createEmptyWorkspace(DEFAULT_WORKSPACE_NAME);
+    this.defaultWorkspace.title = DEFAULT_WORKSPACE_NAME;
+    this._currentWorkspace = this.defaultWorkspace;
   }
 
   createEmptyWorkspace(title: string): Workspace {
@@ -36,14 +36,24 @@ export class WorkspaceManagerImpl implements WorkspaceManager {
     return workspace;
   }
 
+  removeWorkspace(ws: Workspace) {
+    if (ws === this.currentWorkspace) {
+      this._currentWorkspace = this.defaultWorkspace;
+    }
+    this._workspaces = this._workspaces.filter((w) => w !== ws);
+  }
+
   switchWorkspace(workspace: Workspace): void {
     // If this fails the workspace doesn't come from createEmptyWorkspace().
-    assertTrue(this._workspaces.includes(workspace));
+    assertTrue(
+      this._workspaces.includes(workspace) ||
+        workspace === this.defaultWorkspace,
+    );
     this._currentWorkspace = workspace;
   }
 
   get all(): ReadonlyArray<Workspace> {
-    return this._workspaces;
+    return [this.defaultWorkspace].concat(this._workspaces);
   }
 
   get currentWorkspace() {

ui/src/frontend/viewer_page/notes_panel.ts

@@ -17,12 +17,15 @@ import {canvasClip} from '../../base/canvas_utils';
 import {currentTargetOffset} from '../../base/dom_utils';
 import {Size2D} from '../../base/geom';
 import {assertUnreachable} from '../../base/logging';
+import {Icons} from '../../base/semantic_icons';
 import {TimeScale} from '../../base/time_scale';
 import {randomColor} from '../../components/colorizer';
 import {raf} from '../../core/raf_scheduler';
 import {TraceImpl} from '../../core/trace_impl';
 import {Note, SpanNote} from '../../public/note';
 import {Button, ButtonBar} from '../../widgets/button';
+import {MenuItem, PopupMenu2} from '../../widgets/menu';
+import {Select} from '../../widgets/select';
 import {TRACK_SHELL_WIDTH} from '../css_constants';
 import {generateTicks, getMaxMajorTicks, TickType} from './gridline_helper';
 
@@ -63,6 +66,8 @@ export class NotesPanel {
       (n) => n.collapsed,
     );
 
+    const workspaces = this.trace.workspaces;
+
     return m(
       '',
       {
@@ -97,7 +102,7 @@ export class NotesPanel {
       },
       m(
         ButtonBar,
-        {className: 'pf-timeline-header__toolbar'},
+        {className: 'pf-timeline-toolbar'},
         m(Button, {
           onclick: (e: Event) => {
             e.preventDefault();
@@ -127,6 +132,72 @@ export class NotesPanel {
           icon: 'clear_all',
           compact: true,
         }),
+        m(
+          Select,
+          {
+            className: 'pf-timeline-toolbar__workspace-selector',
+            onchange: async (e) => {
+              const value = (e.target as HTMLSelectElement).value;
+              if (value === 'new-workspace') {
+                const ws =
+                  workspaces.createEmptyWorkspace('Untitled Workspace');
+                workspaces.switchWorkspace(ws);
+              } else {
+                const ws = workspaces.all.find(({id}) => id === value);
+                ws && this.trace?.workspaces.switchWorkspace(ws);
+              }
+            },
+          },
+          workspaces.all
+            .map((ws) => {
+              return m('option', {
+                value: `${ws.id}`,
+                label: ws.title,
+                selected: ws === this.trace?.workspace,
+              });
+            })
+            .concat([
+              m('option', {
+                value: 'new-workspace',
+                label: 'New workspace...',
+              }),
+            ]),
+        ),
+        m(
+          PopupMenu2,
+          {
+            trigger: m(Button, {
+              icon: 'more_vert',
+              title: 'Workspace options',
+              compact: true,
+            }),
+          },
+          m(MenuItem, {
+            icon: Icons.Delete,
+            label: 'Delete current workspace',
+            disabled:
+              workspaces.currentWorkspace === workspaces.defaultWorkspace,
+            onclick: () => {
+              workspaces.removeWorkspace(workspaces.currentWorkspace);
+              raf.scheduleFullRedraw();
+            },
+          }),
+          m(MenuItem, {
+            icon: 'edit',
+            label: 'Rename current workspace',
+            disabled:
+              workspaces.currentWorkspace === workspaces.defaultWorkspace,
+            onclick: async () => {
+              const newName = await this.trace.omnibox.prompt(
+                'Enter a new name...',
+              );
+              if (newName) {
+                workspaces.currentWorkspace.title = newName;
+              }
+              raf.scheduleFullRedraw();
+            },
+          }),
+        ),
         // TODO(stevegolton): Re-introduce this when we fix track filtering
         // m(TextInput, {
         //   placeholder: 'Filter tracks...',