diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx index ee4a4b78b..0d59f6648 100644 --- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx +++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx @@ -86,13 +86,14 @@ function ConsolePanel() { const onFilterChange = ({ target: { value } }: any) => devTools.update(INDEX_KEY, { filter: value }) // AutoScroll - const autoScrollIndex = logListNow.length + exceptionsListNow.length - const { + const countNow = logListNow.length + exceptionsListNow.length + const [ timeoutStartAutoscroll, stopAutoscroll, - } = useAutoscroll( + ] = useAutoscroll( + filteredList, + list[countNow].time, activeIndex, - autoScrollIndex, index => devTools.update(INDEX_KEY, { index }) ) const onMouseEnter = stopAutoscroll @@ -101,7 +102,7 @@ function ConsolePanel() { timeoutStartAutoscroll() } - const _list = useRef(); + const _list = useRef(); // TODO: fix react-virtualized types & incapsulate scrollToRow logic useEffect(() => { if (_list.current) { // @ts-ignore diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 1eef37f87..7b0c01230 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -152,16 +152,20 @@ function NetworkPanel() { const activeTab = devTools[INDEX_KEY].activeTab; const activeIndex = devTools[INDEX_KEY].index; - const list = useMemo(() => - resourceList.filter(res => !fetchList.some(ft => { + const { list, intersectedCount } = useMemo(() => { + let intersectedCount = 0 + const list = resourceList.filter(res => !fetchList.some(ft => { if (res.url !== ft.url) { return false } if (Math.abs(res.time - ft.time) > 200) { return false } // TODO: find good epsilons if (Math.abs(res.duration - ft.duration) > 100) { return false } + intersectedCount++ return true })) .concat(fetchList) .sort((a, b) => a.time - b.time) - , [ resourceList.length, fetchList.length ]) + return { list, intersectedCount } + }, [ resourceList.length, fetchList.length ]) + let filteredList = useMemo(() => { if (!showOnlyErrors) { return list } return list.filter(it => parseInt(it.status) >= 400 || !it.success) @@ -174,14 +178,16 @@ function NetworkPanel() { const onTabClick = (activeTab: typeof TAP_KEYS[number]) => devTools.update(INDEX_KEY, { activeTab }) const onFilterChange = ({ target: { value } }: React.ChangeEvent) => devTools.update(INDEX_KEY, { filter: value }) + // AutoScroll - const autoScrollIndex = fetchListNow.length + resourceListNow.length - const { + const countNow = fetchListNow.length + resourceListNow.length - intersectedCount + const [ timeoutStartAutoscroll, stopAutoscroll, - } = useAutoscroll( + ] = useAutoscroll( + filteredList, + list[countNow].time, activeIndex, - autoScrollIndex, index => devTools.update(INDEX_KEY, { index }) ) const onMouseEnter = stopAutoscroll diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx index 90dcdb218..70916bcb5 100644 --- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx +++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx @@ -44,12 +44,13 @@ function StackEventPanel() { [ list.length ], ) - const { + const [ timeoutStartAutoscroll, stopAutoscroll, - } = useAutoscroll( + ] = useAutoscroll( + filteredList, + listNow[listNow.length-1].time, activeIndex, - listNow.length, index => devTools.update(INDEX_KEY, { index }) ) const onMouseEnter = stopAutoscroll diff --git a/frontend/app/components/shared/DevTools/useAutoscroll.ts b/frontend/app/components/shared/DevTools/useAutoscroll.ts index 64883beec..5414edf42 100644 --- a/frontend/app/components/shared/DevTools/useAutoscroll.ts +++ b/frontend/app/components/shared/DevTools/useAutoscroll.ts @@ -1,42 +1,61 @@ -import { useEffect, useState, useRef } from 'react' +import { useEffect, useState, useRef, useMemo } from 'react' +import { Timed } from 'Player' import useLatestRef from 'App/hooks/useLatestRef' import useCancelableTimeout from 'App/hooks/useCancelableTimeout' const TIMEOUT_DURATION = 5000; -export default function useAutoscroll( - savedIndex: number, - autoscrollIndex: number, - updadteIndex: (index: number) => void, + +function useAutoupdate( + savedValue: T, + actualValue: T, + resetValue: T, + updadteValue: (value: T) => void, ) { - const [ autoscroll, setAutoscroll ] = useState(savedIndex === 0) + const [ autoupdate, setAutoupdate ] = useState(savedValue === resetValue) - const [ timeoutStartAutoscroll, stopAutoscroll ] = useCancelableTimeout( - () => setAutoscroll(true), - () => setAutoscroll(false), + const [ timeoutStartAutoupdate, stopAutoupdate ] = useCancelableTimeout( + () => setAutoupdate(true), + () => setAutoupdate(false), TIMEOUT_DURATION, ) useEffect(() => { - if (autoscroll && autoscrollIndex !== savedIndex) { - updadteIndex(autoscrollIndex) + if (autoupdate && actualValue !== savedValue) { + updadteValue(actualValue) } - }, [ autoscroll, autoscrollIndex ]) + }, [ autoupdate, actualValue ]) - const autoScrollRef = useLatestRef(autoscroll) + const autoScrollRef = useLatestRef(autoupdate) useEffect(() => { - if (!autoscroll) { - timeoutStartAutoscroll() + if (!autoupdate) { + timeoutStartAutoupdate() } return () => { if (autoScrollRef.current) { - updadteIndex(0) // index:0 means autoscroll is active + updadteValue(resetValue) } } }, []) - return { - autoscrollIndex, - timeoutStartAutoscroll, - stopAutoscroll, - } + return [ timeoutStartAutoupdate, stopAutoupdate ] +} + +// That might be simplified by removing index from devTools[INDEX_KEY] store... +export default function useAutoscroll( + filteredList: Timed[], + time: number, + savedIndex: number, + updadteIndex: (index: number) => void, +) { + const filteredIndexNow = useMemo(() => { + // Should use findLastIndex here + for (let i=0; i < filteredList.length; i++) { + if (filteredList[i].time > time) { + return i-1 + } + } + return filteredList.length + }, [ time, filteredList ]) + + return useAutoupdate(savedIndex, filteredIndexNow, 0, updadteIndex) } \ No newline at end of file diff --git a/frontend/app/player/index.ts b/frontend/app/player/index.ts index 55c67fb0b..cf7fe3244 100644 --- a/frontend/app/player/index.ts +++ b/frontend/app/player/index.ts @@ -2,6 +2,7 @@ export * from './web/assist/AssistManager'; export * from './web/assist/LocalStream'; export * from './web/WebPlayer'; export * from './web/types'; +export * from './common/types'; export * from './create'; export type { MarkedTarget } from './web/TargetMarker'