import React , { useEffect , useState , useRef } from 'react' ; import { selectFilterState } from '../state-management/slices/FilterSlice' ; import { useAppSelector , useAppDispatch } from '../state-management/hooks' ; import { setRenderIndex } from '../state-management/slices/SnapshotSlice' ; const SnapshotsContainer = ( ) => { const dispatch = useAppDispatch ( ) ; const snapshotHistory = useAppSelector ( state => state . snapshot . snapshotHistory ) ; const selected = useAppSelector ( state => state . selected . selectedData ) ; const renderIndex = useAppSelector ( state => state . snapshot . renderIndex ) ; const filterData = useAppSelector ( selectFilterState ) ; const snapshotEndRef = useRef < HTMLDivElement > ( null ) ; let snapshotHistoryLength = snapshotHistory . length ; useEffect ( ( ) => { scrollToBottom ( ) ; } , [ snapshotHistoryLength ] ) ; const scrollToBottom = ( ) : void => { snapshotEndRef . current . scrollIntoView ( { behavior : 'smooth' } ) ; } ; const snapshotDivs = [ ] ; for ( let i = 0 ; i < snapshotHistoryLength ; i ++ ) { const filterFunc = ( ) : boolean => { if ( i === 0 ) { return true ; } if ( filterData [ i ] ) { for ( let key in filterData [ i ] . filteredSnapshot ) { for ( let j = 0 ; j < selected . length ; j ++ ) { if ( key === selected [ j ] . name ) { return true ; } } } } return false ; } ; const x = filterFunc ( ) ; if ( x === false ) { continue ; } let renderTime ; if ( i === 0 ) { renderTime = snapshotHistory [ 0 ] . componentAtomTree . treeBaseDuration ; } else if ( Array . isArray ( filterData [ i ] . componentAtomTree . actualDuration ) ) { renderTime = ( filterData [ i ] . componentAtomTree . treeBaseDuration as number [ ] ) [ 1 ] ; } else { renderTime = filterData [ i ] . componentAtomTree . treeBaseDuration as number ; } snapshotDivs . push ( < div id = { `snapshot${ i }` } className = "individualSnapshot" key = { i } style = { renderIndex === i ? { color : '#E6E6E6' , backgroundColor : '#212121' } : { color : '#989898' } } onClick = { ( ) => { dispatch ( setRenderIndex ( i ) ) ; } } > { } < li > { `${ Math . round ( renderTime * 100 ) / 100 }ms` } < /li> < button className = "timeTravelButton" style = { renderIndex === i ? { color : '#E6E6E6' , backgroundColor : '#212121' } : { } } onClick = { ( ) => { timeTravelFunc ( i ) ; } } > Jump < /button> < /div>); } let indexDiff = 0 ; if ( filterData [ 0 ] && filterData [ 0 ] . indexDiff ) { indexDiff = filterData [ 0 ] . indexDiff ; } const timeTravelFunc = ( index ) => { const backgroundConnection = chrome . runtime . connect ( ) ; backgroundConnection . postMessage ( { action : 'snapshotTimeTravel' , tabId : chrome . devtools . inspectedWindow . tabId , payload : { snapshotIndex : index + indexDiff , } , } ) ; } ; function prevClr ( ) { const snapshotListArr = document . querySelectorAll ( '.individualSnapshot' ) ; for ( let i = 0 ; i < snapshotListArr . length ; i ++ ) { let index = parseInt ( snapshotListArr [ i ] . id . match ( /\d+/g ) [ 0 ] ) ; if ( index < renderIndex ) { snapshotListArr [ i ] . parentNode . removeChild ( snapshotListArr [ i ] ) ; } else break ; } } function fwrdClr ( ) { const snapshotListArr = document . querySelectorAll ( '.individualSnapshot' ) ; for ( let i = snapshotListArr . length - 1 ; i >= 0 ; i -- ) { let index = parseInt ( snapshotListArr [ i ] . id . match ( /\d+/g ) [ 0 ] ) ; if ( index > renderIndex ) { snapshotListArr [ i ] . parentNode . removeChild ( snapshotListArr [ i ] ) ; } else break ; } } return ( < div className = "SnapshotsContainer" > < div id = "clear-snapshots-title" > Clear Snapshots < /div> < div className = "clear-buttons" > < button onClick = { prevClr } id = "prevClr" > Previous < /button> < button onClick = { fwrdClr } id = "fwrdClr" > Forward < /button> < /div> < span style = { { fontSize : '14px' , fontWeight : 'bold' , marginTop : '10px' , marginBottom : '10px' , } } > Snapshots < /span> < div className = "SnapshotsList" > < div > { snapshotDivs } < /div> < div ref = { snapshotEndRef } / > < /div> < /div>); } ; export default SnapshotsContainer ;