[deploy preview] flow stuff

docs-developer/CHANGELOG-formats.md

@@ -6,6 +6,11 @@ Note that this is not an exhaustive list. Processed profile format upgraders can
 
 ## Processed profile format
 
+### Version 51
+
+Two new marker schema field format types have been added: `flow-id` and `terminating-flow-id`, with string index values (like `unique-string`).
+An optional `isStackBased` boolean field has been added to the marker schema.
+
 ### Version 50
 
 The serialized format can now optionally store sample and counter sample times as time deltas instead of absolute timestamps to reduce the JSON size. The unserialized version is unchanged.
@@ -78,6 +83,11 @@ Older versions are not documented in this changelog but can be found in [process
 
 ## Gecko profile format
 
+### Version 31
+
+Two new marker schema field format types have been added: `flow-id` and `terminating-flow-id`, with string index values (like `unique-string`).
+An optional `isStackBased` boolean field has been added to the marker schema.
+
 ### Version 30
 
 A new `sanitized-string` marker schema format type has been added, allowing markers to carry arbitrary strings containing PII that will be sanitized along with URLs and FilePaths.

src/actions/profile-view.js

@@ -25,6 +25,11 @@ import {
   getThreadSelectorsFromThreadsKey,
   selectedThreadSelectors,
 } from 'firefox-profiler/selectors/per-thread';
+import {
+  getProfileFlowInfo,
+  getStringTablePerThread,
+  getFullMarkerListPerThread,
+} from 'firefox-profiler/selectors/flow';
 import {
   getAllCommittedRanges,
   getImplementationFilter,
@@ -79,11 +84,13 @@ import type {
   TableViewOptions,
   SelectionContext,
   BottomBoxInfo,
+  IndexIntoFlowTable,
 } from 'firefox-profiler/types';
 import {
   funcHasDirectRecursiveCall,
   funcHasRecursiveCall,
 } from '../profile-logic/transforms';
+import { computeMarkerFlows } from '../profile-logic/marker-data';
 import { changeStoredProfileNameInDb } from 'firefox-profiler/app-logic/uploaded-profiles-db';
 import type { TabSlug } from '../app-logic/tabs-handling';
 import { intersectSets } from 'firefox-profiler/utils/set';
@@ -999,6 +1006,53 @@ export function showProvidedTracks(
   };
 }
 
+export function showProvidedThreads(
+  threadsToShow: Set<ThreadIndex>
+): ThunkAction<void> {
+  return (dispatch, getState) => {
+    const globalTracks = getGlobalTracks(getState());
+    const localTracksByPid = getLocalTracksByPid(getState());
+
+    const globalTracksToShow: Set<TrackIndex> = new Set();
+    const localTracksByPidToShow: Map<Pid, Set<TrackIndex>> = new Map();
+
+    for (const [globalTrackIndex, globalTrack] of globalTracks.entries()) {
+      if (globalTrack.type !== 'process') {
+        continue;
+      }
+      const { mainThreadIndex, pid } = globalTrack;
+      if (mainThreadIndex !== null && threadsToShow.has(mainThreadIndex)) {
+        globalTracksToShow.add(globalTrackIndex);
+      }
+      const localTracks = localTracksByPid.get(pid);
+      if (localTracks === undefined) {
+        continue;
+      }
+
+      for (const [localTrackIndex, localTrack] of localTracks.entries()) {
+        if (localTrack.type !== 'thread') {
+          continue;
+        }
+        if (threadsToShow.has(localTrack.threadIndex)) {
+          const localTracksToShow = localTracksByPidToShow.get(pid);
+          if (localTracksToShow === undefined) {
+            localTracksByPidToShow.set(pid, new Set([localTrackIndex]));
+          } else {
+            localTracksToShow.add(localTrackIndex);
+          }
+          globalTracksToShow.add(globalTrackIndex);
+        }
+      }
+    }
+
+    dispatch({
+      type: 'SHOW_PROVIDED_TRACKS',
+      globalTracksToShow,
+      localTracksByPidToShow,
+    });
+  };
+}
+
 /**
  * This action makes the tracks that are provided hidden.
  */
@@ -1680,6 +1734,37 @@ export function changeHoveredMarker(
   };
 }
 
+export function changeActiveFlows(activeFlows: IndexIntoFlowTable[]): Action {
+  return {
+    type: 'CHANGE_ACTIVE_FLOWS',
+    activeFlows,
+  };
+}
+
+export function activateFlowsForMarker(
+  threadIndex: ThreadIndex,
+  markerIndex: MarkerIndex
+): ThunkAction<void> {
+  console.log('yo');
+  return (dispatch, getState) => {
+    console.log('aha');
+    const profileFlowInfo = getProfileFlowInfo(getState());
+    const stringTablePerThread = getStringTablePerThread(getState());
+    const fullMarkerListPerThread = getFullMarkerListPerThread(getState());
+    console.log('aha2');
+    const flows =
+      computeMarkerFlows(
+        threadIndex,
+        markerIndex,
+        profileFlowInfo,
+        stringTablePerThread,
+        fullMarkerListPerThread
+      ) ?? [];
+    console.log({ flows });
+    dispatch(changeActiveFlows(flows));
+  };
+}
+
 /**
  * This action is used when the user right clicks a marker, and is especially
  * used to display its context menu.

src/app-logic/constants.js

@@ -9,12 +9,12 @@ import type { MarkerPhase } from 'firefox-profiler/types';
 // The current version of the Gecko profile format.
 // Please don't forget to update the gecko profile format changelog in
 // `docs-developer/CHANGELOG-formats.md`.
-export const GECKO_PROFILE_VERSION = 30;
+export const GECKO_PROFILE_VERSION = 31;
 
 // The current version of the "processed" profile format.
 // Please don't forget to update the processed profile format changelog in
 // `docs-developer/CHANGELOG-formats.md`.
-export const PROCESSED_PROFILE_VERSION = 50;
+export const PROCESSED_PROFILE_VERSION = 51;
 
 // The following are the margin sizes for the left and right of the timeline. Independent
 // components need to share these values.

src/app-logic/url-handling.js

@@ -186,6 +186,7 @@ type BaseQuery = {|
   timelineType: string,
   sourceView: string,
   assemblyView: string,
+  activeFlows: string,
   ...FullProfileSpecificBaseQuery,
   ...ActiveTabProfileSpecificBaseQuery,
   ...OriginsProfileSpecificBaseQuery,
@@ -436,6 +437,9 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
       query = (baseQuery: MarkersQueryShape);
       query.markerSearch =
         urlState.profileSpecific.markersSearchString || undefined;
+      query.activeFlows =
+        encodeUintArrayForUrlComponent(urlState.profileSpecific.activeFlows) ||
+        undefined;
       break;
     case 'network-chart':
       query = (baseQuery: NetworkQueryShape);
@@ -578,6 +582,8 @@ export function stateFromLocation(
     implementation = query.implementation;
   }
 
+  const activeFlows = decodeUintArrayFromUrlComponent(query.activeFlows ?? '');
+
   const transforms = {};
   if (selectedThreadsKey !== null) {
     transforms[selectedThreadsKey] = parseTransforms(query.transforms);
@@ -658,6 +664,7 @@ export function stateFromLocation(
       transforms,
       sourceView,
       assemblyView,
+      activeFlows,
       isBottomBoxOpenPerPanel,
       timelineType: validateTimelineType(query.timelineType),
       full: {

src/components/app/Details.js

@@ -14,7 +14,7 @@ import { LocalizedErrorBoundary } from './ErrorBoundary';
 import { ProfileCallTreeView } from 'firefox-profiler/components/calltree/ProfileCallTreeView';
 import { MarkerTable } from 'firefox-profiler/components/marker-table';
 import { StackChart } from 'firefox-profiler/components/stack-chart/';
-import { MarkerChart } from 'firefox-profiler/components/marker-chart/';
+import { MarkerChartTab } from 'firefox-profiler/components/marker-chart-tab';
 import { NetworkChart } from 'firefox-profiler/components/network-chart/';
 import { FlameGraph } from 'firefox-profiler/components/flame-graph/';
 import { JsTracer } from 'firefox-profiler/components/js-tracer/';
@@ -115,7 +115,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
                 calltree: <ProfileCallTreeView />,
                 'flame-graph': <FlameGraph />,
                 'stack-chart': <StackChart />,
-                'marker-chart': <MarkerChart />,
+                'marker-chart': <MarkerChartTab />,
                 'marker-table': <MarkerTable />,
                 'network-chart': <NetworkChart />,
                 'js-tracer': <JsTracer />,

src/components/app/DetailsContainer.css

@@ -1,10 +1,10 @@
-.DetailsContainer .layout-pane > * {
+.DetailsContainer > .layout-pane > * {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
 }
 
-.DetailsContainer .layout-pane:not(.layout-pane-primary) {
+.DetailsContainer > .layout-pane:not(.layout-pane-primary) {
   max-width: 600px;
 }
 
@@ -15,12 +15,12 @@
   position: unset;
 }
 
-.DetailsContainer .layout-splitter {
+.DetailsContainer > .layout-splitter {
   border-top: 1px solid var(--grey-30);
   border-left: 1px solid var(--grey-30);
   background: var(--grey-10); /* Same background as sidebars */
 }
 
-.DetailsContainer .layout-splitter:hover {
+.DetailsContainer > .layout-splitter:hover {
   background: var(--grey-30); /* same as the border above */
 }