[WIP]: Fixing filter button in marker hover panel

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}

src/components/timeline/Markers.tsx

@@ -497,6 +497,7 @@ class TimelineMarkers extends React.PureComponent<Props, State> {
               marker={hoveredMarker}
               threadsKey={threadsKey}
               restrictHeightWidth={true}
+              hideFilterButton={true}
             />
           </Tooltip>
         ) : null}

src/components/timeline/TrackCustomMarkerGraph.tsx

@@ -471,6 +471,7 @@ class TrackCustomMarkerGraphImpl extends React.PureComponent<Props, State> {
           marker={marker}
           threadsKey={threadIndex}
           restrictHeightWidth={true}
+          hideFilterButton={true}
         />
       </Tooltip>
     );

src/components/timeline/TrackNetwork.tsx

@@ -409,6 +409,7 @@ class Network extends PureComponent<Props, State> {
                 marker={hoveredMarker}
                 threadsKey={threadIndex}
                 restrictHeightWidth={true}
+                hideFilterButton={true}
               />
             </Tooltip>
           ) : null}

src/components/tooltip/Marker.tsx

@@ -85,6 +85,7 @@ type OwnProps = {
   readonly marker: Marker;
   readonly threadsKey: ThreadsKey;
   readonly className?: string;
+  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.
@@ -521,8 +522,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,
+      hideFilterButton,
+    } = this.props;
     const markerLabel = getMarkerLabel(markerIndex);
     const searchTerm = getMarkerSearchTerm(markerIndex);
     return (
@@ -532,19 +538,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>
+              {!hideFilterButton ? (
+                <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>

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();

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([

src/test/components/__snapshots__/MenuButtons.test.tsx.snap

@@ -2305,7 +2305,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           class="menuButtonsDownloadSize"
         >
           (
-          1.56 kB
+          1.58 kB
           )
         </span>
       </a>

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>

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>