Add a 'filter' button next to the tooltip label of markers. (#5626)

Co-authored-by: Nazım Can Altınova <[email protected]>

Author: fqueze

locales/en-US/app.ftl

@@ -491,6 +491,16 @@ MarkerTable--duration = Duration
 MarkerTable--name = Name
 MarkerTable--details = Details
 
+## MarkerTooltip
+## This is the component for Marker Tooltip panel.
+
+# This is used as the tooltip for the filter button in marker tooltips.
+# Variables:
+#   $filter (String) - Search string that will be used to filter the markers.
+MarkerTooltip--filter-button-tooltip =
+    .title = Only show markers matching: “{ $filter }”
+    .aria-label = Only show markers matching: “{ $filter }”
+
 ## MenuButtons
 ## These strings are used for the buttons at the top of the profile viewer.
 

src/components/shared/IdleSearchField.tsx

@@ -91,6 +91,17 @@ export class IdleSearchField extends PureComponent<Props, State> {
   _onFormSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
   }
+
+  override componentDidUpdate(prevProps: Props) {
+    // When the defaultValue prop changes externally (e.g., from Redux),
+    // getDerivedStateFromProps will update the state value. We need to sync
+    // _previouslyNotifiedValue to match so that subsequent changes are detected
+    // correctly by _notifyIfChanged.
+    if (prevProps.defaultValue !== this.props.defaultValue) {
+      this._previouslyNotifiedValue = this.state.value;
+    }
+  }
+
   static getDerivedStateFromProps(props: Props, state: State) {
     if (props.defaultValue !== state.previousDefaultValue) {
       return {

src/components/tooltip/Marker.css

@@ -16,3 +16,20 @@
 .marker-table-value th {
   text-align: start;
 }
+
+.tooltipTitleFilterButton {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  background-image: url(../../../res/img/svg/filter.svg);
+  cursor: pointer;
+  margin-inline-start: 6px;
+  opacity: 0.6;
+}
+
+.tooltipTitleFilterButton:hover {
+  opacity: 1;
+}

src/components/tooltip/Marker.tsx

@@ -4,6 +4,7 @@
 
 import * as React from 'react';
 import classNames from 'classnames';
+import { Localized } from '@fluent/react';
 import {
   formatMilliseconds,
   formatTimestamp,
@@ -20,6 +21,7 @@ import {
   getProcessIdToNameMap,
   getThreadSelectorsFromThreadsKey,
 } from 'firefox-profiler/selectors';
+import { changeMarkersSearchString } from 'firefox-profiler/actions/profile-view';
 
 import {
   TooltipNetworkMarkerPhases,
@@ -96,10 +98,15 @@ type StateProps = {
   readonly processIdToNameMap: Map<Pid, string>;
   readonly markerSchemaByName: MarkerSchemaByName;
   readonly getMarkerLabel: (param: MarkerIndex) => string;
+  readonly getMarkerSearchTerm: (param: MarkerIndex) => string;
   readonly categories: CategoryList;
 };
 
-type Props = ConnectedProps<OwnProps, StateProps, {}>;
+type DispatchProps = {
+  readonly changeMarkersSearchString: typeof changeMarkersSearchString;
+};
+
+type Props = ConnectedProps<OwnProps, StateProps, DispatchProps>;
 
 // Maximum image size of a tooltip field.
 const MAXIMUM_IMAGE_SIZE = 350;
@@ -473,10 +480,12 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
     return null;
   }
 
-  _renderTitle(): string {
-    const { markerIndex, getMarkerLabel } = this.props;
-    return getMarkerLabel(markerIndex);
-  }
+  _onFilterButtonClick = () => {
+    const { markerIndex, getMarkerSearchTerm, changeMarkersSearchString } =
+      this.props;
+    const searchTerm = getMarkerSearchTerm(markerIndex);
+    changeMarkersSearchString(searchTerm);
+  };
 
   /**
    * Often-times component logic is split out into several different components. This
@@ -501,13 +510,31 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
    * a short list of rendering strategies, in the order they appear.
    */
   override render() {
-    const { className } = this.props;
+    const { className, markerIndex, getMarkerLabel, getMarkerSearchTerm } =
+      this.props;
+    const markerLabel = getMarkerLabel(markerIndex);
+    const searchTerm = getMarkerSearchTerm(markerIndex);
     return (
       <div className={classNames('tooltipMarker', className)}>
         <div className="tooltipHeader">
           <div className="tooltipOneLine">
             {this._maybeRenderMarkerDuration()}
-            <div className="tooltipTitle">{this._renderTitle()}</div>
+            <div className="tooltipTitle">
+              <span className="tooltipTitleText">{markerLabel}</span>
+              <Localized
+                id="MarkerTooltip--filter-button-tooltip"
+                vars={{ filter: searchTerm }}
+                attrs={{ title: true, 'aria-label': true }}
+              >
+                <button
+                  className="tooltipTitleFilterButton"
+                  type="button"
+                  title={`Only show markers matching: “${searchTerm}”`}
+                  aria-label={`Only show markers matching: “${searchTerm}”`}
+                  onClick={this._onFilterButtonClick}
+                />
+              </Localized>
+            </div>
           </div>
         </div>
         <TooltipDetails>
@@ -522,7 +549,11 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
   }
 }
 
-export const TooltipMarker = explicitConnect<OwnProps, StateProps, {}>({
+export const TooltipMarker = explicitConnect<
+  OwnProps,
+  StateProps,
+  DispatchProps
+>({
   mapStateToProps: (state, props) => {
     const selectors = getThreadSelectorsFromThreadsKey(props.threadsKey);
     return {
@@ -536,8 +567,10 @@ export const TooltipMarker = explicitConnect<OwnProps, StateProps, {}>({
       processIdToNameMap: getProcessIdToNameMap(state),
       markerSchemaByName: getMarkerSchemaByName(state),
       getMarkerLabel: selectors.getMarkerTooltipLabelGetter(state),
+      getMarkerSearchTerm: selectors.getMarkerSearchTermGetter(state),
       categories: getCategories(state),
     };
   },
+  mapDispatchToProps: { changeMarkersSearchString },
   component: MarkerTooltipContents,
 });

src/components/tooltip/Tooltip.css

@@ -33,11 +33,22 @@
 }
 
 .tooltipTitle {
+  display: flex;
   overflow: hidden;
+  min-width: 0;
   flex: 1;
+  align-items: center;
   text-overflow: ellipsis;
 }
 
+.tooltipTitleText {
+  overflow: hidden;
+  min-width: 0;
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .tooltipSwatch {
   display: inline-block;
   width: 10px;

src/profile-logic/marker-schema.tsx

@@ -20,6 +20,7 @@ import type {
   MarkerFormatType,
   MarkerSchema,
   MarkerSchemaByName,
+  MarkerSchemaField,
   Marker,
   MarkerIndex,
   MarkerPayload,
@@ -366,6 +367,111 @@ export function getLabelGetter(
   };
 }
 
+/**
+ * Extract the value of the first field from a marker's tooltipLabel schema.
+ * This is used for filtering markers by their primary identifying value.
+ * Falls back to the marker name if no tooltipLabel is defined in the schema.
+ *
+ * This function should only be used behind a selector.
+ */
+export function getSearchTermGetter(
+  getMarker: (markerIndex: MarkerIndex) => Marker,
+  markerSchemaByName: MarkerSchemaByName,
+  stringTable: StringTable
+): (markerIndex: MarkerIndex) => string {
+  // Cache the search terms as they are created.
+  const markerIndexToSearchTerm: Map<MarkerIndex, string> = new Map();
+
+  return (markerIndex: MarkerIndex) => {
+    let searchTerm: string | undefined | null =
+      markerIndexToSearchTerm.get(markerIndex);
+
+    if (searchTerm === undefined) {
+      const marker = getMarker(markerIndex);
+      const schemaName = marker.data ? marker.data.type : null;
+
+      if (schemaName) {
+        const schema = markerSchemaByName[schemaName];
+        if (schema?.tooltipLabel) {
+          // Extract the first field from the tooltipLabel
+          // e.g., "{marker.data.eventType} - DOMEvent" -> extract marker.data.eventType value
+          searchTerm = parseFirstField(
+            marker,
+            schema,
+            stringTable,
+            schema.tooltipLabel
+          );
+        }
+      }
+
+      // Fall back to the marker name if no schema, tooltipLabel, or extraction failed
+      if (!searchTerm) {
+        searchTerm = marker.name;
+      }
+
+      // Cache this result.
+      markerIndexToSearchTerm.set(markerIndex, searchTerm);
+    }
+
+    return searchTerm;
+  };
+}
+
+/**
+ * Parse the first field from a label string and extract its value from the marker.
+ * Returns null if no field is found or if the field is not a data field (marker.data.*).
+ *
+ * e.g., "{marker.data.eventType} - DOMEvent" extracts the value of marker.data.eventType
+ */
+function parseFirstField(
+  marker: Marker,
+  markerSchema: MarkerSchema,
+  stringTable: StringTable,
+  label: string
+): string | null {
+  // Split the label on the "{key}" capture groups.
+  const splits = label.split(/{([^}]+)}/);
+
+  if (splits.length < 2) {
+    // No fields in the label
+    return null;
+  }
+
+  // The first field is at index 1 (even indices are literal strings)
+  const firstField = splits[1].trim();
+  const keys = firstField.split('.');
+
+  // We only extract from marker.data.* fields (3 parts: marker, data, key)
+  if (keys.length !== 3) {
+    return null;
+  }
+
+  const [markerStr, markerKey, payloadKey] = keys;
+  if (markerStr !== 'marker' || markerKey !== 'data' || !payloadKey) {
+    return null;
+  }
+
+  // Access the payload data
+  const field = markerSchema.fields?.find(
+    (f: MarkerSchemaField) => f.key === payloadKey
+  );
+  if (!field) {
+    return null;
+  }
+
+  const payload = marker.data;
+  if (!payload) {
+    return null;
+  }
+
+  const value = (payload as any)[payloadKey];
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  return formatFromMarkerSchema(payload.type, field.format, value, stringTable);
+}
+
 /**
  * This function formats a string from a marker type and a value.
  * If you wish to get markup instead, have a look at

src/selectors/per-thread/markers.ts

@@ -9,7 +9,10 @@ import * as MarkerData from '../../profile-logic/marker-data';
 import * as MarkerTimingLogic from '../../profile-logic/marker-timing';
 import * as ProfileSelectors from '../profile';
 import { getRightClickedMarkerInfo } from '../right-clicked-marker';
-import { getLabelGetter } from '../../profile-logic/marker-schema';
+import {
+  getLabelGetter,
+  getSearchTermGetter,
+} from '../../profile-logic/marker-schema';
 import { getInclusiveSampleIndexRangeForSelection } from '../../profile-logic/profile-data';
 
 import type { BasicThreadSelectorsPerThread } from './thread';
@@ -445,6 +448,20 @@ export function getMarkerSelectorsPerThread(
     getLabelGetter
   );
 
+  /**
+   * This getter extracts the first field value from a marker's tooltipLabel schema
+   * to use as a search term for filtering. Falls back to the marker name if no
+   * tooltipLabel is defined.
+   */
+  const getMarkerSearchTermGetter: Selector<
+    (markerIndex: MarkerIndex) => string
+  > = createSelector(
+    getMarkerGetter,
+    ProfileSelectors.getMarkerSchemaByName,
+    ProfileSelectors.getStringTable,
+    getSearchTermGetter
+  );
+
   /**
    * This organizes the result of the previous selector in rows to be nicely
    * displayed in the marker chart.
@@ -750,6 +767,7 @@ export function getMarkerSelectorsPerThread(
     getMarkerTooltipLabelGetter,
     getMarkerTableLabelGetter,
     getMarkerLabelToCopyGetter,
+    getMarkerSearchTermGetter,
     getMarkerChartTimingAndBuckets,
     getCommittedRangeFilteredMarkerIndexes,
     getTimelineOverviewMarkerIndexes,