[WIP]: Fixing filter button in marker hover panel

Author: KaranPradhan266

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}
       />
     );

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}

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

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}

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>

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>

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>