[Design] Show timeline behind expanded track groups (#122)

* Remove background for expanded track groups

* Fix selection on expanded track groups

* Recursively add selections when track group time selction

* Make checkbox track selection less wonky

* Don't select tracks twice when dragging over them and their parent group

ui/src/assets/common.scss

@@ -723,17 +723,11 @@ button.query-ctrl {
     opacity: 1;
   }
   &[collapsed="true"] {
-    .shell {
-      border-right: 1px solid var(--main-foreground-color);
-      background-color: var(--collapsed-background);
-    }
     .track-button {
       color: rgb(60, 86, 136);
     }
   }
   &[collapsed="false"] {
-    background-color: var(--collapsed-background);
-    color: var(--main-foreground-color);
     font-weight: bold;
     span.chip {
       color: #121212;
@@ -746,8 +740,11 @@ button.query-ctrl {
     grid-template-columns: 28px 1fr auto;
     align-items: baseline;
     line-height: 1;
+    border-right: 1px solid var(--main-foreground-color);
     width: var(--track-shell-width);
     transition: background-color 0.4s;
+    background-color: var(--collapsed-background);
+    color: var(--main-foreground-color);
     overflow: hidden;
     &.selected {
       background-color: var(--track-highlight-background);

ui/src/common/actions.ts

@@ -1252,23 +1252,48 @@ export const StateActions = {
     const areaId = selection.areaId;
     const index = state.areas[areaId].tracks.indexOf(args.id);
     if (index > -1) {
-      state.areas[areaId].tracks.splice(index, 1);
-      if (args.isTrackGroup) {  // Also remove all child tracks.
-        for (const childTrack of state.trackGroups[args.id].tracks) {
+      const removeTrackGroup = (id:string)=> {
+        const groupIndex = state.areas[areaId].tracks.indexOf(id);
+        // remove group
+        state.areas[areaId].tracks.splice(groupIndex, 1);
+        // Also remove all child tracks.
+        for (const childTrack of state.trackGroups[id].tracks) {
           const childIndex = state.areas[areaId].tracks.indexOf(childTrack);
           if (childIndex > -1) {
             state.areas[areaId].tracks.splice(childIndex, 1);
           }
         }
+        // Also remove all child track groups.
+        for (const childTrack of state.trackGroups[id].subgroups) {
+          removeTrackGroup(childTrack);
+        }
+      };
+      if (args.isTrackGroup) {
+        removeTrackGroup(args.id);
+      } else {
+        state.areas[areaId].tracks.splice(index, 1);
       }
     } else {
-      state.areas[areaId].tracks.push(args.id);
-      if (args.isTrackGroup) {  // Also add all child tracks.
-        for (const childTrack of state.trackGroups[args.id].tracks) {
+      const addTrackGroup = (id:string)=> {
+        // add group
+        state.areas[areaId].tracks.push(id);
+        // Also add all child tracks.
+        for (const childTrack of state.trackGroups[id].tracks) {
           if (!state.areas[areaId].tracks.includes(childTrack)) {
             state.areas[areaId].tracks.push(childTrack);
           }
         }
+        // Also add all child track groups.
+        for (const childTrack of state.trackGroups[id].subgroups) {
+          if (!state.areas[areaId].tracks.includes(childTrack)) {
+            addTrackGroup(childTrack);
+          }
+        }
+      };
+      if (args.isTrackGroup) {
+        addTrackGroup(args.id);
+      } else {
+        state.areas[areaId].tracks.push(args.id);
       }
     }
     // It's super unexpected that |toggleTrackSelection| does not cause

ui/src/frontend/panel_container.ts

@@ -158,24 +158,30 @@ export class PanelContainer implements m.ClassComponent<Attrs> {
         startY,
         endY);
     // Get the track ids from the panels.
-    const tracks = [];
+    const tracks = new Set<string>();
     for (const panel of panels) {
       if (panel.attrs.id !== undefined) {
-        tracks.push(panel.attrs.id);
+        tracks.add(panel.attrs.id);
         continue;
       }
       if (panel.attrs.trackGroupId !== undefined) {
-        const trackGroup = globals.state.trackGroups[panel.attrs.trackGroupId];
-        // Only select a track group and all child tracks if it is closed.
-        if (trackGroup.collapsed) {
-          tracks.push(panel.attrs.trackGroupId);
+        const addTracks = (trackGroupId: string)=>{
+          const trackGroup =
+            globals.state.trackGroups[trackGroupId];
+          // Only select a track group and all child tracks if it is closed.
+          tracks.add(trackGroupId);
           for (const track of trackGroup.tracks) {
-            tracks.push(track);
+            tracks.add(track);
           }
-        }
+          for (const group of trackGroup.subgroups) {
+            addTracks(group);
+          }
+        };
+        addTracks(panel.attrs.trackGroupId);
       }
     }
-    globals.frontendLocalState.selectArea(area.start, area.end, tracks);
+    globals.frontendLocalState.selectArea(
+      area.start, area.end, Array.from(tracks.values()));
   }
 
   constructor(vnode: m.CVnode<Attrs>) {

ui/src/frontend/track_group_panel.ts

@@ -50,7 +50,6 @@ interface Attrs {
 export class TrackGroupPanel extends Panel<Attrs> {
   private readonly trackGroupId: string;
   private shellWidth = 0;
-  private backgroundColor = '#ffffff';  // Updated from CSS later.
   private summaryTrack: Track|undefined;
   private dragging = false;
   private dropping: 'before'|'after'|undefined = undefined;
@@ -338,12 +337,7 @@ export class TrackGroupPanel extends Panel<Attrs> {
 
   onupdate({dom}: m.CVnodeDOM<Attrs>) {
     const shell = assertExists(dom.querySelector('.shell'));
-    // const trackTitle = dom.querySelector('.track-title')!;
-    // this.overFlown =  trackTitle.scrollHeight >= trackTitle.clientHeight;
     this.shellWidth = shell.getBoundingClientRect().width;
-    // TODO(andrewbb): move this to css_constants
-    this.backgroundColor =
-          getComputedStyle(dom).getPropertyValue('--collapsed-background');
     if (this.summaryTrack !== undefined) {
       this.summaryTrack.onFullRedraw();
     }
@@ -424,7 +418,8 @@ export class TrackGroupPanel extends Panel<Attrs> {
     if (!selection || selection.kind !== 'AREA') return;
     const selectedArea = globals.state.areas[selection.areaId];
     const selectedAreaDuration = selectedArea.end - selectedArea.start;
-    if (selectedArea.tracks.includes(this.trackGroupId)) {
+    if (selectedArea.tracks.includes(this.trackGroupId) ||
+      selectedArea.tracks.includes(this.summaryTrackState.id)) {
       ctx.fillStyle = getCssStr('--selection-fill-color');
       ctx.fillRect(
           visibleTimeScale.tpTimeToPx(selectedArea.start) + this.shellWidth,
@@ -435,13 +430,6 @@ export class TrackGroupPanel extends Panel<Attrs> {
   }
 
   renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
-    const collapsed = this.trackGroupState.collapsed;
-
-    ctx.fillStyle = this.backgroundColor;
-    ctx.fillRect(0, 0, size.width, size.height);
-
-    if (!collapsed) return;
-
     // If we have vsync data, render columns under the track group
     const vsync = getActiveVsyncData();
     if (vsync) {