From 939cedd1f5cbaceb00c9899ae07d1ea3e375f8a3 Mon Sep 17 00:00:00 2001
From: KaranPradhan266 <karanpradhan266@gmail.com>
Date: Sat, 13 Dec 2025 14:06:47 -0800
Subject: [PATCH 1/2] [WIP]: Fixing filter button in marker hover panel

---
 src/components/marker-chart/Canvas.tsx        |  1 +
 src/components/timeline/Markers.tsx           |  1 +
 .../timeline/TrackCustomMarkerGraph.tsx       |  1 +
 src/components/timeline/TrackNetwork.tsx      |  1 +
 src/components/tooltip/Marker.tsx             | 38 +++++++++++--------
 .../__snapshots__/MenuButtons.test.tsx.snap   |  6 +--
 .../TrackCustomMarker.test.tsx.snap           |  6 ---
 .../__snapshots__/TrackNetwork.test.tsx.snap  |  6 ---
 8 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/components/marker-chart/Canvas.tsx b/src/components/marker-chart/Canvas.tsx
index ec6544ad32..abdbb60f24 100644
--- a/src/components/marker-chart/Canvas.tsx
+++ b/src/components/marker-chart/Canvas.tsx
@@ -915,6 +915,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
         marker={marker}
         threadsKey={this.props.threadsKey}
         restrictHeightWidth={true}
+        showFilterButton={true}
         onStackFrameClick={this._onStackFrameClick}
       />
     );
diff --git a/src/components/timeline/Markers.tsx b/src/components/timeline/Markers.tsx
index f75f72db74..8dade17a3f 100644
--- a/src/components/timeline/Markers.tsx
+++ b/src/components/timeline/Markers.tsx
@@ -497,6 +497,7 @@ class TimelineMarkers extends React.PureComponent<Props, State> {
               marker={hoveredMarker}
               threadsKey={threadsKey}
               restrictHeightWidth={true}
+              showFilterButton={false}
             />
           </Tooltip>
         ) : null}
diff --git a/src/components/timeline/TrackCustomMarkerGraph.tsx b/src/components/timeline/TrackCustomMarkerGraph.tsx
index db5d254e00..66392abac5 100644
--- a/src/components/timeline/TrackCustomMarkerGraph.tsx
+++ b/src/components/timeline/TrackCustomMarkerGraph.tsx
@@ -471,6 +471,7 @@ class TrackCustomMarkerGraphImpl extends React.PureComponent<Props, State> {
           marker={marker}
           threadsKey={threadIndex}
           restrictHeightWidth={true}
+          showFilterButton={false}
         />
       </Tooltip>
     );
diff --git a/src/components/timeline/TrackNetwork.tsx b/src/components/timeline/TrackNetwork.tsx
index 04f6ffb664..a591d79266 100644
--- a/src/components/timeline/TrackNetwork.tsx
+++ b/src/components/timeline/TrackNetwork.tsx
@@ -409,6 +409,7 @@ class Network extends PureComponent<Props, State> {
                 marker={hoveredMarker}
                 threadsKey={threadIndex}
                 restrictHeightWidth={true}
+                showFilterButton={false}
               />
             </Tooltip>
           ) : null}
diff --git a/src/components/tooltip/Marker.tsx b/src/components/tooltip/Marker.tsx
index 6e4f824bb1..ab81602c4c 100644
--- a/src/components/tooltip/Marker.tsx
+++ b/src/components/tooltip/Marker.tsx
@@ -83,6 +83,7 @@ type OwnProps = {
   readonly marker: Marker;
   readonly threadsKey: ThreadsKey;
   readonly className?: string;
+  readonly showFilterButton?: boolean;
   // In tooltips it can be awkward for really long and tall things to force
   // the layout to be huge. This option when set to true will restrict the
   // height of things like stacks, and the width of long things like URLs.
@@ -519,8 +520,13 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
    * a short list of rendering strategies, in the order they appear.
    */
   override render() {
-    const { className, markerIndex, getMarkerLabel, getMarkerSearchTerm } =
-      this.props;
+    const {
+      className,
+      markerIndex,
+      getMarkerLabel,
+      getMarkerSearchTerm,
+      showFilterButton = true,
+    } = this.props;
     const markerLabel = getMarkerLabel(markerIndex);
     const searchTerm = getMarkerSearchTerm(markerIndex);
     return (
@@ -530,19 +536,21 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
             {this._maybeRenderMarkerDuration()}
             <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>
+              {showFilterButton ? (
+                <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>
+              ) : null}
             </div>
           </div>
         </div>
diff --git a/src/test/components/__snapshots__/MenuButtons.test.tsx.snap b/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
index 944baae3a4..1a03b0ef76 100644
--- a/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
+++ b/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
@@ -2187,7 +2187,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the menu buttons and
           class="menuButtonsDownloadSize"
         >
           (
-          1.58 kB
+          1.59 kB
           )
         </span>
       </a>
@@ -2305,7 +2305,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           class="menuButtonsDownloadSize"
         >
           (
-          1.56 kB
+          1.57 kB
           )
         </span>
       </a>
@@ -2418,7 +2418,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           class="menuButtonsDownloadSize"
         >
           (
-          1.58 kB
+          1.59 kB
           )
         </span>
       </a>
diff --git a/src/test/components/__snapshots__/TrackCustomMarker.test.tsx.snap b/src/test/components/__snapshots__/TrackCustomMarker.test.tsx.snap
index ab6fc687f2..3234f9c988 100644
--- a/src/test/components/__snapshots__/TrackCustomMarker.test.tsx.snap
+++ b/src/test/components/__snapshots__/TrackCustomMarker.test.tsx.snap
@@ -30,12 +30,6 @@ exports[`TrackCustomMarker has a tooltip that matches the snapshot 1`] = `
         >
           Marker
         </span>
-        <button
-          aria-label="Only show markers matching: “⁨Marker⁩”"
-          class="tooltipTitleFilterButton"
-          title="Only show markers matching: “⁨Marker⁩”"
-          type="button"
-        />
       </div>
     </div>
   </div>
diff --git a/src/test/components/__snapshots__/TrackNetwork.test.tsx.snap b/src/test/components/__snapshots__/TrackNetwork.test.tsx.snap
index 80f9a8118f..654cfcd788 100644
--- a/src/test/components/__snapshots__/TrackNetwork.test.tsx.snap
+++ b/src/test/components/__snapshots__/TrackNetwork.test.tsx.snap
@@ -61,12 +61,6 @@ exports[`timeline/TrackNetwork draws differently a request and displays a toolti
           >
             Load 0: https://mozilla.org
           </span>
-          <button
-            aria-label="Only show markers matching: “⁨Load 0: https://mozilla.org⁩”"
-            class="tooltipTitleFilterButton"
-            title="Only show markers matching: “⁨Load 0: https://mozilla.org⁩”"
-            type="button"
-          />
         </div>
       </div>
     </div>

From a8f25cc9c05e964eca592895fde629b42076628e Mon Sep 17 00:00:00 2001
From: KaranPradhan266 <karanpradhan266@gmail.com>
Date: Thu, 25 Dec 2025 15:32:14 -0800
Subject: [PATCH 2/2] Hide tooltip filter button in non-sticky tooltips and add
 hideFilterButton tests

---
 src/components/marker-chart/Canvas.tsx        |  1 -
 .../network-chart/NetworkChartRow.tsx         |  3 ++
 src/components/timeline/Markers.tsx           |  2 +-
 .../timeline/TrackCustomMarkerGraph.tsx       |  2 +-
 src/components/timeline/TrackNetwork.tsx      |  2 +-
 src/components/tooltip/Marker.tsx             |  6 +--
 src/test/components/MenuButtons.test.tsx      |  7 +++
 src/test/components/TooltipMarker.test.tsx    | 43 +++++++++++++++++++
 .../__snapshots__/MenuButtons.test.tsx.snap   |  6 +--
 9 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/src/components/marker-chart/Canvas.tsx b/src/components/marker-chart/Canvas.tsx
index abdbb60f24..ec6544ad32 100644
--- a/src/components/marker-chart/Canvas.tsx
+++ b/src/components/marker-chart/Canvas.tsx
@@ -915,7 +915,6 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
         marker={marker}
         threadsKey={this.props.threadsKey}
         restrictHeightWidth={true}
-        showFilterButton={true}
         onStackFrameClick={this._onStackFrameClick}
       />
     );
diff --git a/src/components/network-chart/NetworkChartRow.tsx b/src/components/network-chart/NetworkChartRow.tsx
index e1bb62e180..6d844477ee 100644
--- a/src/components/network-chart/NetworkChartRow.tsx
+++ b/src/components/network-chart/NetworkChartRow.tsx
@@ -498,6 +498,9 @@ export class NetworkChartRow extends React.PureComponent<
               marker={marker}
               threadsKey={this.props.threadsKey}
               restrictHeightWidth={true}
+              // Network Chart doesn't have sticky tooltips yet. But we should convert it
+              // to false once we implement sticky tooltips for the network chart.
+              hideFilterButton={true}
             />
           </Tooltip>
         ) : null}
diff --git a/src/components/timeline/Markers.tsx b/src/components/timeline/Markers.tsx
index 8dade17a3f..2e0e917079 100644
--- a/src/components/timeline/Markers.tsx
+++ b/src/components/timeline/Markers.tsx
@@ -497,7 +497,7 @@ class TimelineMarkers extends React.PureComponent<Props, State> {
               marker={hoveredMarker}
               threadsKey={threadsKey}
               restrictHeightWidth={true}
-              showFilterButton={false}
+              hideFilterButton={true}
             />
           </Tooltip>
         ) : null}
diff --git a/src/components/timeline/TrackCustomMarkerGraph.tsx b/src/components/timeline/TrackCustomMarkerGraph.tsx
index 66392abac5..dcdb40b26d 100644
--- a/src/components/timeline/TrackCustomMarkerGraph.tsx
+++ b/src/components/timeline/TrackCustomMarkerGraph.tsx
@@ -471,7 +471,7 @@ class TrackCustomMarkerGraphImpl extends React.PureComponent<Props, State> {
           marker={marker}
           threadsKey={threadIndex}
           restrictHeightWidth={true}
-          showFilterButton={false}
+          hideFilterButton={true}
         />
       </Tooltip>
     );
diff --git a/src/components/timeline/TrackNetwork.tsx b/src/components/timeline/TrackNetwork.tsx
index a591d79266..5740489f7a 100644
--- a/src/components/timeline/TrackNetwork.tsx
+++ b/src/components/timeline/TrackNetwork.tsx
@@ -409,7 +409,7 @@ class Network extends PureComponent<Props, State> {
                 marker={hoveredMarker}
                 threadsKey={threadIndex}
                 restrictHeightWidth={true}
-                showFilterButton={false}
+                hideFilterButton={true}
               />
             </Tooltip>
           ) : null}
diff --git a/src/components/tooltip/Marker.tsx b/src/components/tooltip/Marker.tsx
index e232a94022..9d8ea59bf0 100644
--- a/src/components/tooltip/Marker.tsx
+++ b/src/components/tooltip/Marker.tsx
@@ -85,7 +85,7 @@ type OwnProps = {
   readonly marker: Marker;
   readonly threadsKey: ThreadsKey;
   readonly className?: string;
-  readonly showFilterButton?: boolean;
+  readonly hideFilterButton?: boolean;
   // In tooltips it can be awkward for really long and tall things to force
   // the layout to be huge. This option when set to true will restrict the
   // height of things like stacks, and the width of long things like URLs.
@@ -527,7 +527,7 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
       markerIndex,
       getMarkerLabel,
       getMarkerSearchTerm,
-      showFilterButton = true,
+      hideFilterButton,
     } = this.props;
     const markerLabel = getMarkerLabel(markerIndex);
     const searchTerm = getMarkerSearchTerm(markerIndex);
@@ -538,7 +538,7 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
             {this._maybeRenderMarkerDuration()}
             <div className="tooltipTitle">
               <span className="tooltipTitleText">{markerLabel}</span>
-              {showFilterButton ? (
+              {!hideFilterButton ? (
                 <Localized
                   id="MarkerTooltip--filter-button-tooltip"
                   vars={{ filter: searchTerm }}
diff --git a/src/test/components/MenuButtons.test.tsx b/src/test/components/MenuButtons.test.tsx
index 9d38bc26ca..18b0d562ca 100644
--- a/src/test/components/MenuButtons.test.tsx
+++ b/src/test/components/MenuButtons.test.tsx
@@ -81,6 +81,7 @@ beforeEach(() => {
 import { shortenUrl } from '../../utils/shorten-url';
 jest.mock('../../utils/shorten-url');
 
+import { compress } from 'firefox-profiler/utils/gz';
 import { symbolicateProfile } from 'firefox-profiler/profile-logic/symbolication';
 jest.mock('firefox-profiler/profile-logic/symbolication');
 
@@ -161,6 +162,12 @@ describe('app/MenuButtons', function () {
   }
 
   describe('<Publish>', function () {
+    const FIXED_GZIP_BYTES = 1580;
+
+    beforeEach(() => {
+      (compress as any).mockResolvedValue(new Uint8Array(FIXED_GZIP_BYTES));
+    });
+
     function mockUpload() {
       // Create a promise with the resolve function outside of it.
       // const { promise, resolve: resolveUpload, reject: rejectUpload } = Promise.withResolvers();
diff --git a/src/test/components/TooltipMarker.test.tsx b/src/test/components/TooltipMarker.test.tsx
index 2bb92521f0..938a5bc361 100644
--- a/src/test/components/TooltipMarker.test.tsx
+++ b/src/test/components/TooltipMarker.test.tsx
@@ -1333,6 +1333,49 @@ describe('TooltipMarker', function () {
   });
 
   describe('filter button', () => {
+    function setupFilterButton(hideFilterButton: boolean) {
+      const profile = getProfileWithMarkers([
+        ['Reflow', 1, 2, { type: 'tracing', category: 'Paint' }],
+      ]);
+      const store = storeWithProfile(profile);
+      const state = store.getState();
+      const getMarker = selectedThreadSelectors.getMarkerGetter(state);
+      const markerIndexes =
+        selectedThreadSelectors.getFullMarkerListIndexes(state);
+
+      render(
+        <Provider store={store}>
+          <TooltipMarker
+            markerIndex={markerIndexes[0]}
+            marker={getMarker(markerIndexes[0])}
+            threadsKey={0}
+            restrictHeightWidth={true}
+            hideFilterButton={hideFilterButton}
+          />
+        </Provider>
+      );
+    }
+
+    it('hides the filter button when hideFilterButton is true', () => {
+      setupFilterButton(true);
+
+      expect(
+        screen.queryByRole('button', {
+          name: /only show markers matching:/i,
+        })
+      ).not.toBeInTheDocument();
+    });
+
+    it('shows the filter button when hideFilterButton is false', () => {
+      setupFilterButton(false);
+
+      expect(
+        screen.getByRole('button', {
+          name: /only show markers matching:/i,
+        })
+      ).toBeInTheDocument();
+    });
+
     it('shows the filter button for markers without spaces in the label', () => {
       // Tooltip label: "Reflow"
       const profile = getProfileWithMarkers([
diff --git a/src/test/components/__snapshots__/MenuButtons.test.tsx.snap b/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
index 1a03b0ef76..9e5db3c636 100644
--- a/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
+++ b/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
@@ -2187,7 +2187,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the menu buttons and
           class="menuButtonsDownloadSize"
         >
           (
-          1.59 kB
+          1.58 kB
           )
         </span>
       </a>
@@ -2305,7 +2305,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           class="menuButtonsDownloadSize"
         >
           (
-          1.57 kB
+          1.58 kB
           )
         </span>
       </a>
@@ -2418,7 +2418,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           class="menuButtonsDownloadSize"
         >
           (
-          1.59 kB
+          1.58 kB
           )
         </span>
       </a>