Add a flow panel.

Author: mstange

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';
@@ -1727,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/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 */
 }