Add a search filter to the timeline track context menu (Merge PR #3634)

locales/en-US/app.ftl

@@ -635,6 +635,17 @@ TrackContextMenu--hide-other-screenshots-tracks = Hide other Screenshots tracks
 TrackContextMenu--hide-track = Hide “{ $trackName }”
 TrackContextMenu--show-all-tracks = Show all tracks
 
+# This is used in the tracks context menu as a button to show all the tracks
+# below it.
+TrackContextMenu--show-all-tracks-below = Show all tracks below
+
+## TrackSearchField
+## The component that is used for the search input in the track context menu.
+
+TrackSearchField--search-input =
+    .placeholder = Enter filter terms
+    .title = Only display tracks that match a certain text
+
 ## TransformNavigator
 ## Navigator for the applied transforms in the Call Tree, Flame Graph, and Stack
 ## Chart components.

src/actions/profile-view.js

@@ -647,6 +647,28 @@ export function showAllTracks(): ThunkAction<void> {
   };
 }
 
+/**
+ * This action makes the tracks that are provided visible.
+ */
+export function showProvidedTracks(
+  globalTracksToShow: Set<TrackIndex>,
+  localTracksByPidToShow: Map<Pid, Set<TrackIndex>>
+): ThunkAction<void> {
+  return (dispatch) => {
+    sendAnalytics({
+      hitType: 'event',
+      eventCategory: 'timeline',
+      eventAction: 'show provided tracks',
+    });
+
+    dispatch({
+      type: 'SHOW_PROVIDED_TRACKS',
+      globalTracksToShow,
+      localTracksByPidToShow,
+    });
+  };
+}
+
 /**
  * This action shows a specific global track.
  */

src/components/shared/TrackSearchField.css

@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.trackSearchField {
+  position: relative; /* to properly position the button */
+  display: inline-flex;
+
+  /* If context menu has long items, we should make sure to take the 100% of the width. */
+  width: 100%;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+.photon-input.trackSearchFieldInput {
+  /* the chain class selectors are used here
+  to override the styling for the photon-input class */
+  width: calc(100% - 10px);
+  height: 25px;
+  padding: 0 18px 0 17px; /* right padding for the reset button, left padding for the search icon */
+  border: 0.5px solid #aaa;
+  margin: 0 5px;
+}
+
+.trackSearchFieldInput {
+  position: relative;
+  flex: 1;
+  margin: 0;
+  background: url(../../../res/img/svg/searchfield-icon.svg) 3px center
+    no-repeat white;
+  background-size: 11px 11px;
+}
+
+.trackSearchFieldButton {
+  position: absolute;
+
+  /* 5px is margin and the other 5px is the location inside the input */
+  right: 10px;
+  overflow: hidden;
+  width: 11px;
+  height: 11px;
+  padding: 0;
+  border: 0;
+  background: url(../../../res/img/svg/searchfield-cancel.svg) top left
+    no-repeat;
+  background-size: contain;
+  color: transparent;
+  -moz-user-focus: ignore;
+  vertical-align: middle;
+}
+
+.trackSearchFieldInput:invalid + .trackSearchFieldButton {
+  visibility: hidden;
+}

src/components/shared/TrackSearchField.js

@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+import { Localized } from '@fluent/react';
+
+import './TrackSearchField.css';
+
+type Props = {|
+  +className: string,
+  +currentSearchString: string,
+  +onSearch: (string) => void,
+|};
+
+export class TrackSearchField extends React.PureComponent<Props> {
+  searchFieldInput: {| current: HTMLInputElement | null |} = React.createRef();
+  _onSearchFieldChange = (e: SyntheticEvent<HTMLInputElement>) => {
+    this.props.onSearch(e.currentTarget.value);
+  };
+
+  focus = () => {
+    if (this.searchFieldInput.current) {
+      this.searchFieldInput.current.focus();
+    }
+  };
+
+  _onFormSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault();
+  }
+
+  _onClearButtonClick = () => {
+    if (this.searchFieldInput.current) {
+      this.searchFieldInput.current.focus();
+    }
+
+    this.props.onSearch('');
+  };
+
+  render() {
+    const { currentSearchString, className } = this.props;
+    return (
+      <form
+        className={classNames('trackSearchField', className)}
+        onSubmit={this._onFormSubmit}
+      >
+        <Localized
+          id="TrackSearchField--search-input"
+          attrs={{ placeholder: true, title: true }}
+        >
+          <input
+            type="search"
+            name="search"
+            placeholder="Enter filter terms"
+            className="trackSearchFieldInput photon-input"
+            required="required"
+            title="Only display tracks that match a certain text"
+            value={currentSearchString}
+            onChange={this._onSearchFieldChange}
+            ref={this.searchFieldInput}
+            autoComplete="off"
+          />
+        </Localized>
+        <input
+          type="reset"
+          className="trackSearchFieldButton"
+          onClick={this._onClearButtonClick}
+          tabIndex={-1}
+        />
+      </form>
+    );
+  }
+}