Timeline search (facebook#22799)

Refactor SearchInput component (used in Components tree) to be generic DevTools component with two uses: ComponentSearchInput and TimelineSearchInput. Refactored Timeline Suspense to more closely match other, newer Suspense patterns (e.g. inspect component, named hooks) and colocated Susepnse code in timelineCache file. Add search by component name functionality to the Timeline. For now, searching zooms in to the component measure and you can step through each time it rendered using the next/previous arrows.
zhengjitf · Apr 15, 2022 · ebd1c15 · ebd1c15
1 parent dd03915
commit ebd1c15
Show file tree

Hide file tree

Showing 18 changed files with 573 additions and 91 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {useContext} from 'react';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+
+import SearchInput from '../SearchInput';
+
+type Props = {||};
+
+export default function ComponentSearchInput(props: Props) {
+  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const search = text => dispatch({type: 'SET_SEARCH_TEXT', payload: text});
+  const goToNextResult = () => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
+  const goToPreviousResult = () =>
+    dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});
+
+  return (
+    <SearchInput
+      goToNextResult={goToNextResult}
+      goToPreviousResult={goToPreviousResult}
+      placeholder="Search (text or /regex/)"
+      search={search}
+      searchIndex={searchIndex}
+      searchResultsCount={searchResults.length}
+      searchText={searchText}
+    />
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -27,7 +27,7 @@ import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
-import SearchInput from './SearchInput';
+import ComponentSearchInput from './ComponentSearchInput';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
@@ -343,7 +343,7 @@ export default function Tree(props: Props) {
             </Fragment>
           )}
           <Suspense fallback={<Loading />}>
-            {ownerID !== null ? <OwnersStack /> : <SearchInput />}
+            {ownerID !== null ? <OwnersStack /> : <ComponentSearchInput />}
           </Suspense>
           {showInlineWarningsAndErrors &&
             ownerID === null &&

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -829,7 +829,7 @@ type Props = {|
   defaultSelectedElementIndex?: ?number,
 |};
 
-// TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
+// TODO Remove TreeContextController wrapper element once global Context.write API exists.
 function TreeContextController({
   children,
   defaultInspectedElementID,

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -20,19 +20,19 @@ export default function ClearProfilingDataButton() {
   const {didRecordCommits, isProfiling, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {clearTimelineData, timelineData} = useContext(TimelineContext);
+  const {file, setFile} = useContext(TimelineContext);
   const {profilerStore} = store;
 
   let doesHaveData = false;
   if (selectedTabID === 'timeline') {
-    doesHaveData = timelineData !== null;
+    doesHaveData = file !== null;
   } else {
     doesHaveData = didRecordCommits;
   }
 
   const clear = () => {
     if (selectedTabID === 'timeline') {
-      clearTimelineData();
+      setFile(null);
     } else {
       profilerStore.clear();
     }

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
@@ -115,3 +115,9 @@
 .Link {
   color: var(--color-button);
 }
+
+.TimlineSearchInputContainer {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -28,6 +28,7 @@ import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views
 import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
 import portaledContent from '../portaledContent';
 import {StoreContext} from '../context';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 
 import styles from './Profiler.css';
 
@@ -43,19 +44,19 @@ function Profiler(_: {||}) {
     supportsProfiling,
   } = useContext(ProfilerContext);
 
+  const {searchInputContainerRef} = useContext(TimelineContext);
+
   const {supportsTimeline} = useContext(StoreContext);
 
-  let isLegacyProfilerSelected = false;
+  const isLegacyProfilerSelected = selectedTabID !== 'timeline';
 
   let view = null;
   if (didRecordCommits || selectedTabID === 'timeline') {
     switch (selectedTabID) {
       case 'flame-chart':
-        isLegacyProfilerSelected = true;
         view = <CommitFlamegraph />;
         break;
       case 'ranked-chart':
-        isLegacyProfilerSelected = true;
         view = <CommitRanked />;
         break;
       case 'timeline':
@@ -121,6 +122,12 @@ function Profiler(_: {||}) {
             />
             <RootSelector />
             <div className={styles.Spacer} />
+            {!isLegacyProfilerSelected && (
+              <div
+                ref={searchInputContainerRef}
+                className={styles.TimlineSearchInputContainer}
+              />
+            )}
             <SettingsModalContextToggle />
             {isLegacyProfilerSelected && didRecordCommits && (
               <Fragment>

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -29,7 +29,7 @@ export default function ProfilingImportExportButtons() {
   const {isProfiling, profilingData, rootID, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {importTimelineData} = useContext(TimelineContext);
+  const {setFile} = useContext(TimelineContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
 
@@ -111,7 +111,8 @@ export default function ProfilingImportExportButtons() {
   const importTimelineDataWrapper = event => {
     const input = inputRef.current;
     if (input !== null && input.files.length > 0) {
-      importTimelineData(input.files[0]);
+      const file = input.files[0];
+      setFile(file);
     }
   };
 

diff --git a/...devtools/views/Components/SearchInput.css → ...shared/src/devtools/views/SearchInput.css b/...devtools/views/Components/SearchInput.css → ...shared/src/devtools/views/SearchInput.css
diff --git a/.../devtools/views/Components/SearchInput.js → ...-shared/src/devtools/views/SearchInput.js b/.../devtools/views/Components/SearchInput.js → ...-shared/src/devtools/views/SearchInput.js
@@ -8,52 +8,56 @@
  */
 
 import * as React from 'react';
-import {useCallback, useContext, useEffect, useRef} from 'react';
-import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
-import Icon from '../Icon';
+import {useEffect, useRef} from 'react';
+import Button from './Button';
+import ButtonIcon from './ButtonIcon';
+import Icon from './Icon';
 
 import styles from './SearchInput.css';
 
-type Props = {||};
-
-export default function SearchInput(props: Props) {
-  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
-  const dispatch = useContext(TreeDispatcherContext);
+type Props = {|
+  goToNextResult: () => void,
+  goToPreviousResult: () => void,
+  placeholder: string,
+  search: (text: string) => void,
+  searchIndex: number,
+  searchResultsCount: number,
+  searchText: string,
+|};
 
+export default function SearchInput({
+  goToNextResult,
+  goToPreviousResult,
+  placeholder,
+  search,
+  searchIndex,
+  searchResultsCount,
+  searchText,
+}: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const handleTextChange = useCallback(
-    ({currentTarget}) =>
-      dispatch({type: 'SET_SEARCH_TEXT', payload: currentTarget.value}),
-    [dispatch],
-  );
-  const resetSearch = useCallback(
-    () => dispatch({type: 'SET_SEARCH_TEXT', payload: ''}),
-    [dispatch],
-  );
+  const resetSearch = () => search('');
 
-  const handleInputKeyPress = useCallback(
-    ({key, shiftKey}) => {
-      if (key === 'Enter') {
-        if (shiftKey) {
-          dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});
-        } else {
-          dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
-        }
+  const handleChange = ({currentTarget}) => {
+    search(currentTarget.value);
+  };
+  const handleKeyPress = ({key, shiftKey}) => {
+    if (key === 'Enter') {
+      if (shiftKey) {
+        goToPreviousResult();
+      } else {
+        goToNextResult();
       }
-    },
-    [dispatch],
-  );
+    }
+  };
 
   // Auto-focus search input
   useEffect(() => {
     if (inputRef.current === null) {
       return () => {};
     }
 
-    const handleWindowKey = (event: KeyboardEvent) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
       const {key, metaKey} = event;
       if (key === 'f' && metaKey) {
         if (inputRef.current !== null) {
@@ -68,33 +72,33 @@ export default function SearchInput(props: Props) {
     // Here we use portals to render individual tabs (e.g. Profiler),
     // and the root document might belong to a different window.
     const ownerDocument = inputRef.current.ownerDocument;
-    ownerDocument.addEventListener('keydown', handleWindowKey);
+    ownerDocument.addEventListener('keydown', handleKeyDown);
 
-    return () => ownerDocument.removeEventListener('keydown', handleWindowKey);
-  }, [inputRef]);
+    return () => ownerDocument.removeEventListener('keydown', handleKeyDown);
+  }, []);
 
   return (
     <div className={styles.SearchInput}>
       <Icon className={styles.InputIcon} type="search" />
       <input
         className={styles.Input}
-        onChange={handleTextChange}
-        onKeyPress={handleInputKeyPress}
-        placeholder="Search (text or /regex/)"
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+        placeholder={placeholder}
         ref={inputRef}
         value={searchText}
       />
       {!!searchText && (
         <React.Fragment>
           <span className={styles.IndexLabel}>
-            {Math.min(searchIndex + 1, searchResults.length)} |{' '}
-            {searchResults.length}
+            {Math.min(searchIndex + 1, searchResultsCount)} |{' '}
+            {searchResultsCount}
           </span>
           <div className={styles.LeftVRule} />
           <Button
             className={styles.IconButton}
             disabled={!searchText}
-            onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
+            onClick={goToPreviousResult}
             title={
               <React.Fragment>
                 Scroll to previous search result (<kbd>Shift</kbd> +{' '}
@@ -106,7 +110,7 @@ export default function SearchInput(props: Props) {
           <Button
             className={styles.IconButton}
             disabled={!searchText}
-            onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
+            onClick={goToNextResult}
             title={
               <React.Fragment>
                 Scroll to next search result (<kbd>Enter</kbd>)

diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -62,6 +62,7 @@ import ContextMenuItem from 'react-devtools-shared/src/devtools/ContextMenu/Cont
 import useContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/useContextMenu';
 import {getBatchRange} from './utils/getBatchRange';
 import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';
+import {TimelineSearchContext} from './TimelineSearchContext';
 
 import styles from './CanvasPage.css';
 
@@ -170,6 +171,35 @@ function AutoSizedCanvas({
     [],
   );
 
+  const {searchIndex, searchRegExp, searchResults} = useContext(
+    TimelineSearchContext,
+  );
+
+  // This effect searches timeline data and scrolls to the next match wen search criteria change.
+  useLayoutEffect(() => {
+    viewState.updateSearchRegExpState(searchRegExp);
+
+    const componentMeasureSearchResult =
+      searchResults.length > 0 ? searchResults[searchIndex] : null;
+    if (componentMeasureSearchResult != null) {
+      const scrollState = moveStateToRange({
+        state: viewState.horizontalScrollState,
+        rangeStart: componentMeasureSearchResult.timestamp,
+        rangeEnd:
+          componentMeasureSearchResult.timestamp +
+          componentMeasureSearchResult.duration,
+        contentLength: data.duration,
+        minContentLength: data.duration * MIN_ZOOM_LEVEL,
+        maxContentLength: data.duration * MAX_ZOOM_LEVEL,
+        containerLength: width,
+      });
+
+      viewState.updateHorizontalScrollState(scrollState);
+    }
+
+    surfaceRef.current.displayIfNeeded();
+  }, [searchIndex, searchRegExp, searchResults, viewState]);
+
   const surfaceRef = useRef(new Surface(resetHoveredEvent));
   const userTimingMarksViewRef = useRef(null);
   const nativeEventsViewRef = useRef(null);
@@ -334,6 +364,7 @@ function AutoSizedCanvas({
         surface,
         defaultFrame,
         data,
+        viewState,
       );
       componentMeasuresViewRef.current = componentMeasuresView;
       componentMeasuresViewWrapper = createViewHelper(