Add a transform to filter samples by marker name

locales/en-US/app.ftl

@@ -383,6 +383,12 @@ MarkerContextMenu--copy-url = Copy URL
 MarkerContextMenu--copy-page-url = Copy page URL
 MarkerContextMenu--copy-as-json = Copy as JSON
 
+# This string is used on the marker context menu item when right clicked on any marker.
+# It drops the samples outside of given markers.
+# Variables:
+#   $markerName (String) - Name of the marker that is selected.
+MarkerContextMenu--drop-samples-outside-of-marker = Drop samples outside of “<strong>{ $markerName }</strong>” markers
+
 # This string is used on the marker context menu item when right clicked on an
 # IPC marker.
 # Variables:
@@ -950,6 +956,11 @@ TransformNavigator--collapse-direct-recursion-only = Collapse direct recursion o
 #   $item (String) - Name of the function that transform applied to.
 TransformNavigator--collapse-function-subtree = Collapse subtree: { $item }
 
+# "Drop samples outside of markers" transform.
+# Variables:
+#   $item (String) - Name of the markers that transform will filter to.
+TransformNavigator--drop-samples-outside-of-markers = Drop samples outside of markers: { $item }
+
 ## "Bottom box" - a view which contains the source view and the assembly view,
 ## at the bottom of the profiler UI
 ##

src/components/shared/CallNodeContextMenu.js

@@ -363,6 +363,10 @@ class CallNodeContextMenuImpl extends React.PureComponent<Props> {
         });
         break;
       }
+      case 'filter-samples':
+        throw new Error(
+          "Filter samples transform can't be applied from the call node context menu."
+        );
       default:
         assertExhaustiveCheck(type);
     }

src/components/shared/MarkerContextMenu.css

@@ -51,6 +51,10 @@
   background-image: url(firefox-profiler-res/img/svg/select-thread.svg);
 }
 
+.markerContextMenuIconFilterSamples {
+  background-image: url(firefox-profiler-res/img/svg/drop-icon.svg);
+}
+
 /* These icons don't look nice when selected, unless if we invert them. However
  * the other icons look better without the filter, so we don't change them in
  * this state. */
@@ -63,6 +67,7 @@
 .react-contextmenu-item--selected .markerContextMenuIconCopyPayload,
 .react-contextmenu-item:hover .markerContextMenuIconCopyPayload,
 .react-contextmenu-item--selected .markerContextMenuSelectThread,
-.react-contextmenu-item:hover .markerContextMenuSelectThread {
+.react-contextmenu-item:hover .markerContextMenuSelectThread,
+.react-contextmenu-item:hover .markerContextMenuIconFilterSamples {
   filter: invert(1);
 }

src/components/shared/MarkerContextMenu.js

@@ -15,7 +15,9 @@ import {
   setContextMenuVisibility,
   updatePreviewSelection,
   selectTrackFromTid,
+  addTransformToStack,
 } from 'firefox-profiler/actions/profile-view';
+import { changeSelectedTab } from 'firefox-profiler/actions/app';
 import {
   getPreviewSelection,
   getCommittedRange,
@@ -60,7 +62,7 @@ type StateProps = {|
   +markerIndex: MarkerIndex,
   +previewSelection: PreviewSelection,
   +committedRange: StartEndRange,
-  +thread: Thread | null,
+  +thread: Thread,
   +implementationFilter: ImplementationFilter,
   +getMarkerLabelToCopy: (MarkerIndex) => string,
   +profiledThreadIds: Set<Tid>,
@@ -71,6 +73,8 @@ type DispatchProps = {|
   +updatePreviewSelection: typeof updatePreviewSelection,
   +setContextMenuVisibility: typeof setContextMenuVisibility,
   +selectTrackFromTid: typeof selectTrackFromTid,
+  +addTransformToStack: typeof addTransformToStack,
+  +changeSelectedTab: typeof changeSelectedTab,
 |};
 
 type Props = ConnectedProps<OwnProps, StateProps, DispatchProps>;
@@ -182,6 +186,25 @@ class MarkerContextMenuImpl extends PureComponent<Props> {
     copy(getMarkerLabelToCopy(markerIndex));
   };
 
+  filterByMarkerName = () => {
+    const {
+      rightClickedMarkerInfo,
+      marker,
+      addTransformToStack,
+      changeSelectedTab,
+      thread,
+    } = this.props;
+    const { threadsKey } = rightClickedMarkerInfo;
+    addTransformToStack(threadsKey, {
+      type: 'filter-samples',
+      filterType: 'marker',
+      filter: thread.stringTable.indexForString(marker.name),
+    });
+
+    // Then change the selected tab to call tree.
+    changeSelectedTab('calltree');
+  };
+
   copyMarkerCause = () => {
     const { marker } = this.props;
 
@@ -479,7 +502,32 @@ class MarkerContextMenuImpl extends PureComponent<Props> {
           </>
         )}
 
+        {/* Only show this context menu item for interval markers */}
+        {marker.start !== null && marker.end !== null ? (
+          <>
+            <div className="react-contextmenu-separator" />
+
+            <MenuItem onClick={this.filterByMarkerName}>
+              <span className="react-contextmenu-icon markerContextMenuIconFilterSamples" />
+              <Localized
+                id="MarkerContextMenu--drop-samples-outside-of-marker"
+                vars={{
+                  markerName: marker.name,
+                }}
+                elems={{ strong: <strong /> }}
+              >
+                {/* Using a fragment here so we can have a  strong tag inside. */}
+                <>
+                  Drop samples outside of “<strong>{marker.name}</strong>”
+                  markers
+                </>
+              </Localized>
+            </MenuItem>
+          </>
+        ) : null}
+
         <div className="react-contextmenu-separator" />
+
         <MenuItem onClick={this.copyMarkerDescription}>
           <span className="react-contextmenu-icon markerContextMenuIconCopyDescription" />
           <Localized id="MarkerContextMenu--copy-description">
@@ -536,6 +584,8 @@ const MarkerContextMenu = explicitConnect<OwnProps, StateProps, DispatchProps>({
     updatePreviewSelection,
     setContextMenuVisibility,
     selectTrackFromTid,
+    addTransformToStack,
+    changeSelectedTab,
   },
   component: MarkerContextMenuImpl,
 });