Scroll to next search result (Enter)
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index 4084fa4eeb860..577de5ec7d3b9 100644
--- 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,32 @@ function AutoSizedCanvas({
[],
);
+ const {searchIndex, searchRegExp, searchResults} = useContext(
+ TimelineSearchContext,
+ );
+
+ useLayoutEffect(() => {
+ viewState.updateSearchRegExpState(searchRegExp);
+
+ const componentMeasure =
+ searchResults.length > 0 ? searchResults[searchIndex] : null;
+ if (componentMeasure != null) {
+ const scrollState = moveStateToRange({
+ state: viewState.horizontalScrollState,
+ rangeStart: componentMeasure.timestamp,
+ rangeEnd: componentMeasure.timestamp + componentMeasure.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 +361,7 @@ function AutoSizedCanvas({
surface,
defaultFrame,
data,
+ viewState,
);
componentMeasuresViewRef.current = componentMeasuresView;
componentMeasuresViewWrapper = createViewHelper(
diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
index 33459fc4543ef..290830840356e 100644
--- a/packages/react-devtools-timeline/src/Timeline.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -7,7 +7,6 @@
* @flow
*/
-import type {DataResource} from './createDataResourceFromImportedFile';
import type {ViewState} from './types';
import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
@@ -25,13 +24,14 @@ import {updateColorsToMatchTheme} from './content-views/constants';
import {TimelineContext} from './TimelineContext';
import ImportButton from './ImportButton';
import CanvasPage from './CanvasPage';
+import {importFile} from './timelineCache';
+import TimelineSearchInput from './TimelineSearchInput';
+import {TimelineSearchContextController} from './TimelineSearchContext';
import styles from './Timeline.css';
export function Timeline(_: {||}) {
- const {importTimelineData, timelineData, viewState} = useContext(
- TimelineContext,
- );
+ const {file, setFile, viewState} = useContext(TimelineContext);
const ref = useRef(null);
@@ -62,17 +62,17 @@ export function Timeline(_: {||}) {
return (
- {timelineData ? (
+ {file ? (
}>
-
) : (
-
+
)}
);
@@ -143,20 +143,32 @@ const CouldNotLoadProfile = ({error, onFileSelect}) => (
);
-const DataResourceComponent = ({
- dataResource,
+const FileLoader = ({
+ file,
onFileSelect,
viewState,
}: {|
- dataResource: DataResource,
+ file: File | null,
onFileSelect: (file: File) => void,
viewState: ViewState,
|}) => {
- const dataOrError = dataResource.read();
+ if (file === null) {
+ return null;
+ }
+
+ const dataOrError = importFile(file);
if (dataOrError instanceof Error) {
return (
);
}
- return ;
+
+ return (
+
+
+
+
+ );
};
diff --git a/packages/react-devtools-timeline/src/TimelineContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
index ebfac421e2c3e..cbf57a275c0c5 100644
--- a/packages/react-devtools-timeline/src/TimelineContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -8,16 +8,19 @@
*/
import * as React from 'react';
-import {createContext, useCallback, useMemo, useState} from 'react';
-import createDataResourceFromImportedFile from './createDataResourceFromImportedFile';
+import {createContext, useMemo, useRef, useState} from 'react';
-import type {HorizontalScrollStateChangeCallback, ViewState} from './types';
-import type {DataResource} from './createDataResourceFromImportedFile';
+import type {
+ HorizontalScrollStateChangeCallback,
+ SearchRegExpStateChangeCallback,
+ ViewState,
+} from './types';
+import type {RefObject} from 'shared/ReactTypes';
export type Context = {|
- clearTimelineData: () => void,
- importTimelineData: (file: File) => void,
- timelineData: DataResource | null,
+ file: File | null,
+ searchInputContainerRef: RefObject,
+ setFile: (file: File | null) => void,
viewState: ViewState,
|};
@@ -29,30 +32,28 @@ type Props = {|
|};
function TimelineContextController({children}: Props) {
- const [timelineData, setTimelineData] = useState(null);
-
- const clearTimelineData = useCallback(() => {
- setTimelineData(null);
- }, []);
-
- const importTimelineData = useCallback((file: File) => {
- setTimelineData(createDataResourceFromImportedFile(file));
- }, []);
+ const searchInputContainerRef = useRef(null);
+ const [file, setFile] = useState(null);
// Recreate view state any time new profiling data is imported.
const viewState = useMemo(() => {
const horizontalScrollStateChangeCallbacks: Set = new Set();
+ const searchRegExpStateChangeCallbacks: Set = new Set();
const horizontalScrollState = {
offset: 0,
length: 0,
};
- return {
+ const state: ViewState = {
horizontalScrollState,
onHorizontalScrollStateChange: callback => {
horizontalScrollStateChangeCallbacks.add(callback);
},
+ onSearchRegExpStateChange: callback => {
+ searchRegExpStateChangeCallbacks.add(callback);
+ },
+ searchRegExp: null,
updateHorizontalScrollState: scrollState => {
if (
horizontalScrollState.offset === scrollState.offset &&
@@ -68,18 +69,27 @@ function TimelineContextController({children}: Props) {
callback(scrollState);
});
},
+ updateSearchRegExpState: (searchRegExp: RegExp | null) => {
+ state.searchRegExp = searchRegExp;
+
+ searchRegExpStateChangeCallbacks.forEach(callback => {
+ callback(searchRegExp);
+ });
+ },
viewToMutableViewStateMap: new Map(),
};
- }, [timelineData]);
+
+ return state;
+ }, [file]);
const value = useMemo(
() => ({
- clearTimelineData,
- importTimelineData,
- timelineData,
+ file,
+ searchInputContainerRef,
+ setFile,
viewState,
}),
- [clearTimelineData, importTimelineData, timelineData, viewState],
+ [file, setFile, viewState],
);
return (
diff --git a/packages/react-devtools-timeline/src/TimelineSearchContext.js b/packages/react-devtools-timeline/src/TimelineSearchContext.js
new file mode 100644
index 0000000000000..46d05710ac091
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineSearchContext.js
@@ -0,0 +1,166 @@
+/**
+ * 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 {createContext, useMemo, useReducer} from 'react';
+
+import type {
+ ReactComponentMeasure,
+ ReactProfilerData,
+ ViewState,
+} from './types';
+
+type State = {|
+ profilerData: ReactProfilerData,
+ searchIndex: number,
+ searchRegExp: RegExp | null,
+ searchResults: Array,
+ searchText: string,
+|};
+
+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|
+ type: 'GO_TO_NEXT_SEARCH_RESULT',
+|};
+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
+ type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
+|};
+type ACTION_SET_SEARCH_TEXT = {|
+ type: 'SET_SEARCH_TEXT',
+ payload: string,
+|};
+
+type Action =
+ | ACTION_GO_TO_NEXT_SEARCH_RESULT
+ | ACTION_GO_TO_PREVIOUS_SEARCH_RESULT
+ | ACTION_SET_SEARCH_TEXT;
+
+type Dispatch = (action: Action) => void;
+
+const EMPTY_ARRAY = [];
+
+function reducer(state: State, action: Action): State {
+ let {searchIndex, searchRegExp, searchResults, searchText} = state;
+
+ switch (action.type) {
+ case 'GO_TO_NEXT_SEARCH_RESULT':
+ if (searchResults.length > 0) {
+ if (searchIndex === -1 || searchIndex + 1 === searchResults.length) {
+ searchIndex = 0;
+ } else {
+ searchIndex++;
+ }
+ }
+ break;
+ case 'GO_TO_PREVIOUS_SEARCH_RESULT':
+ if (searchResults.length > 0) {
+ if (searchIndex === -1 || searchIndex === 0) {
+ searchIndex = searchResults.length - 1;
+ } else {
+ searchIndex--;
+ }
+ }
+ break;
+ case 'SET_SEARCH_TEXT':
+ searchText = action.payload;
+ searchRegExp = null;
+ searchResults = [];
+
+ if (searchText !== '') {
+ const safeSearchText = searchText.replace(
+ /[.*+?^${}()|[\]\\]/g,
+ '\\$&',
+ );
+ searchRegExp = new RegExp(`^${safeSearchText}`, 'i');
+
+ // If something is zoomed in on already, and the new search still contains it,
+ // don't change the selection (even if overall search results set changes).
+ let prevSelectedMeasure = null;
+ if (searchIndex >= 0 && searchResults.length > searchIndex) {
+ prevSelectedMeasure = searchResults[searchIndex];
+ }
+
+ const componentMeasures = state.profilerData.componentMeasures;
+
+ let prevSelectedMeasureIndex = -1;
+
+ for (let i = 0; i < componentMeasures.length; i++) {
+ const componentMeasure = componentMeasures[i];
+ if (componentMeasure.componentName.match(searchRegExp)) {
+ searchResults.push(componentMeasure);
+
+ if (componentMeasure === prevSelectedMeasure) {
+ prevSelectedMeasureIndex = searchResults.length - 1;
+ }
+ }
+ }
+
+ searchIndex =
+ prevSelectedMeasureIndex >= 0 ? prevSelectedMeasureIndex : 0;
+ }
+ break;
+ }
+
+ return {
+ profilerData: state.profilerData,
+ searchIndex,
+ searchRegExp,
+ searchResults,
+ searchText,
+ };
+}
+
+export type Context = {|
+ profilerData: ReactProfilerData,
+
+ // Search state
+ dispatch: Dispatch,
+ searchIndex: number,
+ searchRegExp: null,
+ searchResults: Array,
+ searchText: string,
+|};
+
+const TimelineSearchContext = createContext(((null: any): Context));
+TimelineSearchContext.displayName = 'TimelineSearchContext';
+
+type Props = {|
+ children: React$Node,
+ profilerData: ReactProfilerData,
+ viewState: ViewState,
+|};
+
+function TimelineSearchContextController({
+ children,
+ profilerData,
+ viewState,
+}: Props) {
+ const [state, dispatch] = useReducer(reducer, {
+ profilerData,
+ searchIndex: -1,
+ searchRegExp: null,
+ searchResults: EMPTY_ARRAY,
+ searchText: '',
+ });
+
+ const value = useMemo(
+ () => ({
+ ...state,
+ dispatch,
+ }),
+ [state],
+ );
+
+ return (
+
+ {children}
+
+ );
+}
+
+export {TimelineSearchContext, TimelineSearchContextController};
diff --git a/packages/react-devtools-timeline/src/TimelineSearchInput.js b/packages/react-devtools-timeline/src/TimelineSearchInput.js
new file mode 100644
index 0000000000000..5a4515d1b826c
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineSearchInput.js
@@ -0,0 +1,46 @@
+/**
+ * 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 {createPortal} from 'react-dom';
+import SearchInput from 'react-devtools-shared/src/devtools/views/SearchInput';
+import {TimelineContext} from './TimelineContext';
+import {TimelineSearchContext} from './TimelineSearchContext';
+
+type Props = {||};
+
+export default function TimelineSearchInput(props: Props) {
+ const {searchInputContainerRef} = useContext(TimelineContext);
+ const {dispatch, searchIndex, searchResults, searchText} = useContext(
+ TimelineSearchContext,
+ );
+
+ if (searchInputContainerRef.current === null) {
+ return null;
+ }
+
+ 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 createPortal(
+ ,
+ searchInputContainerRef.current,
+ );
+}
diff --git a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
index a241498a05a05..923d483b5f768 100644
--- a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
@@ -7,7 +7,11 @@
* @flow
*/
-import type {ReactComponentMeasure, ReactProfilerData} from '../types';
+import type {
+ ReactComponentMeasure,
+ ReactProfilerData,
+ ViewState,
+} from '../types';
import type {
Interaction,
IntrinsicSize,
@@ -31,7 +35,7 @@ import {
rectIntersectsRect,
intersectionOfRects,
} from '../view-base';
-import {COLORS, NATIVE_EVENT_HEIGHT, BORDER_SIZE} from './constants';
+import {BORDER_SIZE, COLORS, NATIVE_EVENT_HEIGHT} from './constants';
const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;
@@ -39,13 +43,24 @@ export class ComponentMeasuresView extends View {
_hoveredComponentMeasure: ReactComponentMeasure | null = null;
_intrinsicSize: IntrinsicSize;
_profilerData: ReactProfilerData;
+ _viewState: ViewState;
onHover: ((event: ReactComponentMeasure | null) => void) | null = null;
- constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+ constructor(
+ surface: Surface,
+ frame: Rect,
+ profilerData: ReactProfilerData,
+ viewState: ViewState,
+ ) {
super(surface, frame);
this._profilerData = profilerData;
+ this._viewState = viewState;
+
+ viewState.onSearchRegExpStateChange(() => {
+ this.setNeedsDisplay();
+ });
this._intrinsicSize = {
width: profilerData.duration,
@@ -150,6 +165,15 @@ export class ComponentMeasuresView extends View {
break;
}
}
+
+ const searchRegExp = this._viewState.searchRegExp;
+ const isSearchMatch =
+ searchRegExp !== null &&
+ componentMeasure.componentName.match(searchRegExp);
+ if (isSearchMatch) {
+ context.fillStyle = COLORS.SEARCH_RESULT_FILL;
+ }
+
context.fillRect(
drawableRect.origin.x,
drawableRect.origin.y,
diff --git a/packages/react-devtools-timeline/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
index f2920ac19b516..bf60a1fbf9a7a 100644
--- a/packages/react-devtools-timeline/src/content-views/constants.js
+++ b/packages/react-devtools-timeline/src/content-views/constants.js
@@ -91,6 +91,7 @@ export let COLORS = {
SCROLL_CARET: '',
SCRUBBER_BACKGROUND: '',
SCRUBBER_BORDER: '',
+ SEARCH_RESULT_FILL: '',
TEXT_COLOR: '',
TEXT_DIM_COLOR: '',
TIME_MARKER_LABEL: '',
@@ -235,6 +236,9 @@ export function updateColorsToMatchTheme(element: Element): boolean {
SCRUBBER_BACKGROUND: computedStyle.getPropertyValue(
'--color-timeline-react-suspense-rejected',
),
+ SEARCH_RESULT_FILL: computedStyle.getPropertyValue(
+ '--color-timeline-react-suspense-rejected',
+ ),
SCRUBBER_BORDER: computedStyle.getPropertyValue(
'--color-timeline-text-color',
),
diff --git a/packages/react-devtools-timeline/src/timelineCache.js b/packages/react-devtools-timeline/src/timelineCache.js
new file mode 100644
index 0000000000000..4e0948a48193c
--- /dev/null
+++ b/packages/react-devtools-timeline/src/timelineCache.js
@@ -0,0 +1,105 @@
+/**
+ * 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 type {Wakeable} from 'shared/ReactTypes';
+import type {ReactProfilerData} from './types';
+
+import {importFile as importFileWorker} from './import-worker';
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingRecord = {|
+ status: 0,
+ value: Wakeable,
+|};
+
+type ResolvedRecord = {|
+ status: 1,
+ value: T,
+|};
+
+type RejectedRecord = {|
+ status: 2,
+ value: Error,
+|};
+
+type Record = PendingRecord | ResolvedRecord | RejectedRecord;
+
+// This is intentionally a module-level Map, rather than a React-managed one.
+// Otherwise, refreshing the inspected element cache would also clear this cache.
+// Profiler file contents are static anyway.
+const fileNameToProfilerDataMap: Map<
+ string,
+ Record,
+> = new Map();
+
+function readRecord(record: Record): ResolvedRecord | RejectedRecord {
+ if (record.status === Resolved) {
+ // This is just a type refinement.
+ return record;
+ } else if (record.status === Rejected) {
+ // This is just a type refinement.
+ return record;
+ } else {
+ throw record.value;
+ }
+}
+
+export function importFile(file: File): ReactProfilerData | Error {
+ const fileName = file.name;
+ let record = fileNameToProfilerDataMap.get(fileName);
+
+ if (!record) {
+ const callbacks = new Set();
+ const wakeable: Wakeable = {
+ then(callback) {
+ callbacks.add(callback);
+ },
+
+ // Optional property used by Timeline:
+ displayName: `Importing file "${fileName}"`,
+ };
+
+ const wake = () => {
+ // This assumes they won't throw.
+ callbacks.forEach(callback => callback());
+ callbacks.clear();
+ };
+
+ const newRecord: Record = (record = {
+ status: Pending,
+ value: wakeable,
+ });
+
+ importFileWorker(file).then(data => {
+ switch (data.status) {
+ case 'SUCCESS':
+ const resolvedRecord = ((newRecord: any): ResolvedRecord);
+ resolvedRecord.status = Resolved;
+ resolvedRecord.value = data.processedData;
+ break;
+ case 'INVALID_PROFILE_ERROR':
+ case 'UNEXPECTED_ERROR':
+ const thrownRecord = ((newRecord: any): RejectedRecord);
+ thrownRecord.status = Rejected;
+ thrownRecord.value = data.error;
+ break;
+ }
+
+ wake();
+ });
+
+ fileNameToProfilerDataMap.set(fileName, record);
+ }
+
+ const response = readRecord(record).value;
+ return response;
+}
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index 5a532495187ee..3e9867c8b8c65 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -170,6 +170,9 @@ export type Flamechart = FlamechartStackLayer[];
export type HorizontalScrollStateChangeCallback = (
scrollState: ScrollState,
) => void;
+export type SearchRegExpStateChangeCallback = (
+ searchRegExp: RegExp | null,
+) => void;
// Imperative view state that corresponds to profiler data.
// This state lives outside of React's lifecycle
@@ -179,7 +182,12 @@ export type ViewState = {|
onHorizontalScrollStateChange: (
callback: HorizontalScrollStateChangeCallback,
) => void,
+ onSearchRegExpStateChange: (
+ callback: SearchRegExpStateChangeCallback,
+ ) => void,
+ searchRegExp: RegExp | null,
updateHorizontalScrollState: (scrollState: ScrollState) => void,
+ updateSearchRegExpState: (searchRegExp: RegExp | null) => void,
viewToMutableViewStateMap: Map,
|};