chore: allow resetting the time filter (#26920)

packages/trace-viewer/src/ui/actionList.css

@@ -71,3 +71,10 @@
   padding-left: 5px;
   color: var(--vscode-charts-blue);
 }
+
+.action-list-show-all {
+  display: flex;
+  cursor: pointer;
+  height: 28px;
+  align-items: center;
+}

packages/trace-viewer/src/ui/actionList.tsx

@@ -30,6 +30,7 @@ export interface ActionListProps {
   actions: ActionTraceEventInContext[],
   selectedAction: ActionTraceEventInContext | undefined,
   selectedTime: Boundaries | undefined,
+  setSelectedTime: (time: Boundaries | undefined) => void,
   sdkLanguage: Language | undefined;
   onSelected: (action: ActionTraceEventInContext) => void,
   onHighlighted: (action: ActionTraceEventInContext | undefined) => void,
@@ -43,6 +44,7 @@ export const ActionList: React.FC<ActionListProps> = ({
   actions,
   selectedAction,
   selectedTime,
+  setSelectedTime,
   sdkLanguage,
   onSelected,
   onHighlighted,
@@ -57,18 +59,22 @@ export const ActionList: React.FC<ActionListProps> = ({
     return { selectedItem };
   }, [itemMap, selectedAction]);
 
-  return <ActionTreeView
-    dataTestId='action-list'
-    rootItem={rootItem}
-    treeState={treeState}
-    setTreeState={setTreeState}
-    selectedItem={selectedItem}
-    onSelected={item => onSelected(item.action!)}
-    onHighlighted={item => onHighlighted(item?.action)}
-    isError={item => !!item.action?.error?.message}
-    isVisible={item => !selectedTime || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum)}
-    render={item => renderAction(item.action!, sdkLanguage, revealConsole, isLive || false)}
-  />;
+  return <div className='vbox'>
+    {selectedTime && <div className='action-list-show-all' onClick={() => setSelectedTime(undefined)}><span className='codicon codicon-triangle-left'></span>Show all</div>}
+    <ActionTreeView
+      dataTestId='action-list'
+      rootItem={rootItem}
+      treeState={treeState}
+      setTreeState={setTreeState}
+      selectedItem={selectedItem}
+      onSelected={item => onSelected(item.action!)}
+      onHighlighted={item => onHighlighted(item?.action)}
+      onAccepted={item => setSelectedTime({ minimum: item.action!.startTime, maximum: item.action!.endTime })}
+      isError={item => !!item.action?.error?.message}
+      isVisible={item => !selectedTime || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum)}
+      render={item => renderAction(item.action!, sdkLanguage, revealConsole, isLive || false)}
+    />
+  </div>;
 };
 
 export const renderAction = (

packages/trace-viewer/src/ui/timeline.css

@@ -83,22 +83,22 @@
 
 .timeline-bar.action {
   --action-color: var(--vscode-charts-orange);
-  --action-background-color: #d1861633;
+  --action-background-color: #d1861666;
 }
 
 .timeline-bar.action.error {
   --action-color: var(--vscode-charts-red);
-  --action-background-color: #e5140033;
+  --action-background-color: #e5140066;
 }
 
 .timeline-bar.network {
   --action-color: var(--vscode-charts-blue);
-  --action-background-color: #1a85ff33;
+  --action-background-color: #1a85ff66;
 }
 
 body.dark-mode .timeline-bar.action.error {
   --action-color: var(--vscode-errorForeground);
-  --action-background-color: #f4877133;
+  --action-background-color: #f4877166;
 }
 
 .timeline-label {

packages/trace-viewer/src/ui/workbench.tsx

@@ -235,6 +235,7 @@ export const Workbench: React.FunctionComponent<{
               actions={model?.actions || []}
               selectedAction={model ? selectedAction : undefined}
               selectedTime={selectedTime}
+              setSelectedTime={setSelectedTime}
               onSelected={onActionSelected}
               onHighlighted={setHighlightedAction}
               revealConsole={() => selectPropertiesTab('console')}