Source view for marker stacks (#5633)

Author: fqueze

src/actions/profile-view.ts

@@ -1917,7 +1917,7 @@ export function changeTableViewOptions(
 
 export function updateBottomBoxContentsAndMaybeOpen(
   currentTab: TabSlug,
-  { libIndex, sourceIndex, nativeSymbols }: BottomBoxInfo
+  { libIndex, sourceIndex, nativeSymbols, lineNumber }: BottomBoxInfo
 ): Action {
   // TODO: If the set has more than one element, pick the native symbol with
   // the highest total sample count
@@ -1932,6 +1932,7 @@ export function updateBottomBoxContentsAndMaybeOpen(
     currentTab,
     shouldOpenBottomBox: sourceIndex !== null || nativeSymbol !== null,
     shouldOpenAssemblyView: sourceIndex === null && nativeSymbol !== null,
+    lineNumber,
   };
 }
 

src/components/app/AssemblyViewToggleButton.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { getAssemblyViewIsOpen } from 'firefox-profiler/selectors/url-state';
+import { getIsAssemblyViewAvailable } from 'firefox-profiler/selectors/code';
 import {
   openAssemblyView,
   closeAssemblyView,
@@ -18,6 +19,7 @@ import { Localized } from '@fluent/react';
 
 type StateProps = {
   readonly assemblyViewIsOpen: boolean;
+  readonly isAssemblyViewAvailable: boolean;
 };
 
 type DispatchProps = {
@@ -37,7 +39,7 @@ class AssemblyViewToggleButtonImpl extends React.PureComponent<Props> {
   };
 
   override render() {
-    const { assemblyViewIsOpen } = this.props;
+    const { assemblyViewIsOpen, isAssemblyViewAvailable } = this.props;
 
     return assemblyViewIsOpen ? (
       <Localized id="AssemblyView--hide-button" attrs={{ title: true }}>
@@ -51,6 +53,7 @@ class AssemblyViewToggleButtonImpl extends React.PureComponent<Props> {
           title="Hide the assembly view"
           type="button"
           onClick={this._onClick}
+          disabled={!isAssemblyViewAvailable}
         />
       </Localized>
     ) : (
@@ -64,6 +67,7 @@ class AssemblyViewToggleButtonImpl extends React.PureComponent<Props> {
           title="Show the assembly view"
           type="button"
           onClick={this._onClick}
+          disabled={!isAssemblyViewAvailable}
         />
       </Localized>
     );
@@ -77,6 +81,7 @@ export const AssemblyViewToggleButton = explicitConnect<
 >({
   mapStateToProps: (state) => ({
     assemblyViewIsOpen: getAssemblyViewIsOpen(state),
+    isAssemblyViewAvailable: getIsAssemblyViewAvailable(state),
   }),
   mapDispatchToProps: {
     openAssemblyView,

src/components/app/BottomBox.tsx

@@ -14,6 +14,7 @@ import { CodeLoadingOverlay } from './CodeLoadingOverlay';
 import { CodeErrorOverlay } from './CodeErrorOverlay';
 import {
   getSourceViewScrollGeneration,
+  getSourceViewLineNumber,
   getAssemblyViewIsOpen,
   getAssemblyViewNativeSymbol,
   getAssemblyViewScrollGeneration,
@@ -54,6 +55,7 @@ type StateProps = {
   readonly sourceViewFile: string | null;
   readonly sourceViewCode: SourceCodeStatus | void;
   readonly sourceViewScrollGeneration: number;
+  readonly sourceViewLineNumber?: number;
   readonly globalLineTimings: LineTimings;
   readonly selectedCallNodeLineTimings: LineTimings;
   readonly assemblyViewIsOpen: boolean;
@@ -160,6 +162,7 @@ class BottomBoxImpl extends React.PureComponent<Props> {
       globalLineTimings,
       disableOverscan,
       sourceViewScrollGeneration,
+      sourceViewLineNumber,
       selectedCallNodeLineTimings,
       assemblyViewIsOpen,
       assemblyViewScrollGeneration,
@@ -231,7 +234,9 @@ class BottomBoxImpl extends React.PureComponent<Props> {
                   sourceCode={sourceCode}
                   filePath={path}
                   scrollToHotSpotGeneration={sourceViewScrollGeneration}
+                  scrollToLineNumber={sourceViewLineNumber}
                   hotSpotTimings={selectedCallNodeLineTimings}
+                  highlightedLine={sourceViewLineNumber}
                   ref={this._sourceView}
                 />
               ) : null}
@@ -300,6 +305,7 @@ export const BottomBox = explicitConnect<{}, StateProps, DispatchProps>({
     selectedCallNodeLineTimings:
       selectedNodeSelectors.getSourceViewLineTimings(state),
     sourceViewScrollGeneration: getSourceViewScrollGeneration(state),
+    sourceViewLineNumber: getSourceViewLineNumber(state),
     assemblyViewNativeSymbol: getAssemblyViewNativeSymbol(state),
     assemblyViewCode: getAssemblyViewCode(state),
     globalAddressTimings:

src/components/marker-chart/Canvas.tsx

@@ -17,6 +17,7 @@ import type {
   changeRightClickedMarker,
   changeMouseTimePosition,
   changeSelectedMarker,
+  updateBottomBoxContentsAndMaybeOpen,
 } from 'firefox-profiler/actions/profile-view';
 
 type UpdatePreviewSelection = typeof updatePreviewSelection;
@@ -35,7 +36,10 @@ import type {
   MarkerIndex,
   MarkerSchemaByName,
   GraphColor,
+  Thread,
+  IndexIntoStackTable,
 } from 'firefox-profiler/types';
+import type { TabSlug } from 'firefox-profiler/app-logic/tabs-handling';
 import { getStartEndRangeForMarker } from 'firefox-profiler/utils';
 import {
   getStrokeColor,
@@ -45,6 +49,7 @@ import {
   isValidGraphColor,
 } from 'firefox-profiler/profile-logic/graph-color';
 import { getSchemaFromMarker } from 'firefox-profiler/profile-logic/marker-schema';
+import { getBottomBoxInfoForStackFrame } from 'firefox-profiler/profile-logic/profile-data';
 
 import type {
   ChartCanvasScale,
@@ -81,6 +86,9 @@ type OwnProps = {
   readonly selectedMarkerIndex: MarkerIndex | null;
   readonly rightClickedMarkerIndex: MarkerIndex | null;
   readonly shouldDisplayTooltips: () => boolean;
+  readonly thread: Thread;
+  readonly updateBottomBoxContentsAndMaybeOpen: typeof updateBottomBoxContentsAndMaybeOpen;
+  readonly selectedTab: TabSlug;
 };
 
 type Props = OwnProps & {
@@ -869,18 +877,45 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
     changeRightClickedMarker(threadsKey, markerIndex);
   };
 
+  _onStackFrameClick = (stackIndex: IndexIntoStackTable) => {
+    const { thread, selectedTab, updateBottomBoxContentsAndMaybeOpen } =
+      this.props;
+    const bottomBoxInfo = getBottomBoxInfoForStackFrame(stackIndex, thread);
+    updateBottomBoxContentsAndMaybeOpen(selectedTab, bottomBoxInfo);
+  };
+
+  isMarkerVisible = (markerIndex: MarkerIndex): boolean => {
+    const { markerTimingAndBuckets } = this.props;
+    // Check if the marker appears in the visible marker timing data
+    for (const markerTiming of markerTimingAndBuckets) {
+      if (typeof markerTiming === 'string') {
+        continue;
+      }
+      if (markerTiming.index.includes(markerIndex)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
   getHoveredMarkerInfo = (markerIndex: MarkerIndex): React.ReactNode => {
     if (!this.props.shouldDisplayTooltips() || markerIndex === null) {
       return null;
     }
 
+    // Check if the marker is visible (not filtered out)
+    if (!this.isMarkerVisible(markerIndex)) {
+      return null;
+    }
+
     const marker = this.props.getMarker(markerIndex);
     return (
       <TooltipMarker
         markerIndex={markerIndex}
         marker={marker}
         threadsKey={this.props.threadsKey}
         restrictHeightWidth={true}
+        onStackFrameClick={this._onStackFrameClick}
       />
     );
   };

src/components/marker-chart/index.tsx

@@ -17,12 +17,16 @@ import {
   getMarkerSchemaByName,
 } from 'firefox-profiler/selectors/profile';
 import { selectedThreadSelectors } from 'firefox-profiler/selectors/per-thread';
-import { getSelectedThreadsKey } from 'firefox-profiler/selectors/url-state';
+import {
+  getSelectedThreadsKey,
+  getSelectedTab,
+} from 'firefox-profiler/selectors/url-state';
 import {
   updatePreviewSelection,
   changeRightClickedMarker,
   changeMouseTimePosition,
   changeSelectedMarker,
+  updateBottomBoxContentsAndMaybeOpen,
 } from 'firefox-profiler/actions/profile-view';
 import { ContextMenuTrigger } from 'firefox-profiler/components/shared/ContextMenuTrigger';
 
@@ -35,7 +39,9 @@ import type {
   StartEndRange,
   PreviewSelection,
   ThreadsKey,
+  Thread,
 } from 'firefox-profiler/types';
+import type { TabSlug } from 'firefox-profiler/app-logic/tabs-handling';
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 
@@ -48,6 +54,7 @@ type DispatchProps = {
   readonly changeRightClickedMarker: typeof changeRightClickedMarker;
   readonly changeMouseTimePosition: typeof changeMouseTimePosition;
   readonly changeSelectedMarker: typeof changeSelectedMarker;
+  readonly updateBottomBoxContentsAndMaybeOpen: typeof updateBottomBoxContentsAndMaybeOpen;
 };
 
 type StateProps = {
@@ -62,6 +69,8 @@ type StateProps = {
   readonly previewSelection: PreviewSelection | null;
   readonly rightClickedMarkerIndex: MarkerIndex | null;
   readonly selectedMarkerIndex: MarkerIndex | null;
+  readonly thread: Thread;
+  readonly selectedTab: TabSlug;
 };
 
 type Props = ConnectedProps<{}, StateProps, DispatchProps>;
@@ -171,6 +180,10 @@ class MarkerChartImpl extends React.PureComponent<Props> {
                 selectedMarkerIndex,
                 rightClickedMarkerIndex,
                 shouldDisplayTooltips: this._shouldDisplayTooltips,
+                thread: this.props.thread,
+                updateBottomBoxContentsAndMaybeOpen:
+                  this.props.updateBottomBoxContentsAndMaybeOpen,
+                selectedTab: this.props.selectedTab,
               }}
             />
           </ContextMenuTrigger>
@@ -206,13 +219,16 @@ export const MarkerChart = explicitConnect<{}, StateProps, DispatchProps>({
         selectedThreadSelectors.getRightClickedMarkerIndex(state),
       selectedMarkerIndex:
         selectedThreadSelectors.getSelectedMarkerIndex(state),
+      thread: selectedThreadSelectors.getThread(state),
+      selectedTab: getSelectedTab(state),
     };
   },
   mapDispatchToProps: {
     updatePreviewSelection,
     changeMouseTimePosition,
     changeRightClickedMarker,
     changeSelectedMarker,
+    updateBottomBoxContentsAndMaybeOpen,
   },
   component: MarkerChartImpl,
 });

src/components/shared/Backtrace.css

@@ -30,3 +30,13 @@
 .backtraceStackFrame_isFrameLabel {
   color: rgb(0 0 0 / 0.6);
 }
+
+.backtraceStackFrame_link {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.backtraceStackFrame_link:hover {
+  background-color: rgb(0 0 0 / 0.05);
+}