{title}<\/title>\n+ <rect\n+ width={width}\n+ height={height}\n+ fill={color}\n+ onClick={onClick}\n+ onDoubleClick={onDoubleClick}\n+ className={styles.Rect}\n+ style={{\n+ opacity: isDimmed ? 0.5 : 1,\n+ }}\n+ \/>\n+ {width >= minWidthToDisplay && (\n+ <foreignObject\n+ width={width}\n+ height={height}\n+ className={styles.ForeignObject}\n+ style={{\n+ paddingLeft: x < 0 ? -x : 0,\n+ opacity: isDimmed ? 0.75 : 1,\n+ display: width < minWidthToDisplay ? 'none' : 'block',\n+ }}\n+ y={height < textHeight ? -textHeight : 0}\n+ >\n+ <div className={styles.Div}>{label}<\/div>\n+ <\/foreignObject>\n+ )}\n+ <\/g>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex fe820621d6..7e5c533ce3 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -24,7 +24,7 @@ export default function CommitFlamegraph(_: {||}) {\n rootID: ((rootID: any): number),\n });\n \n- const commitTree = profilingCache.CommitTree.read({\n+ const commitTree = profilingCache.getCommitTree({\n commitIndex: ((selectedCommitIndex: any): number),\n profilingSummary,\n rendererID: ((rendererID: any): number),\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.css b\/src\/devtools\/views\/Profiler\/CommitRanked.css\nindex e69de29bb2..bc441e485e 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRanked.css\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.css\n@@ -0,0 +1,5 @@\n+.Container {\n+ width: 100%;\n+ height: 100%;\n+ padding: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.js b\/src\/devtools\/views\/Profiler\/CommitRanked.js\nindex 4e856656a4..1fb4ded3ee 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRanked.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.js\n@@ -1,18 +1,55 @@\n \/\/ @flow\n \n-import React, { useContext } from 'react';\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n import { ProfilerContext } from '.\/ProfilerContext';\n-import { calculateSelfDuration } from '.\/utils';\n+import NoCommitData from '.\/NoCommitData';\n+import CommitRankedListItem from '.\/CommitRankedListItem';\n+import { barHeight } from '.\/constants';\n+import { scale } from '.\/utils';\n import { StoreContext } from '..\/context';\n \n import styles from '.\/CommitRanked.css';\n \n-import type { CommitDetails, CommitTree, Node } from '.\/types';\n+import type { ChartData } from '.\/RankedChartBuilder';\n \n-export default function CommitRanked(_: {||}) {\n- const { rendererID, rootID, selectedCommitIndex } = useContext(\n- ProfilerContext\n+export type ItemData = {|\n+ chartData: ChartData,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedFiberID: number | null,\n+ selectedFiberIndex: number,\n+ selectFiber: (id: number | null) => void,\n+ width: number,\n+|};\n+\n+export default function CommitRankedAutoSizer(_: {||}) {\n+ const { selectFiber } = useContext(ProfilerContext);\n+ const deselectCurrentFiber = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(null);\n+ },\n+ [selectFiber]\n+ );\n+\n+ return (\n+ <div className={styles.Container} onClick={deselectCurrentFiber}>\n+ <AutoSizer>\n+ {({ height, width }) => <CommitRanked height={height} width={width} \/>}\n+ <\/AutoSizer>\n+ <\/div>\n );\n+}\n+\n+function CommitRanked({ height, width }: {| height: number, width: number |}) {\n+ const {\n+ rendererID,\n+ rootID,\n+ selectedCommitIndex,\n+ selectedFiberID,\n+ selectFiber,\n+ } = useContext(ProfilerContext);\n \n const { profilingCache } = useContext(StoreContext);\n \n@@ -27,64 +64,66 @@ export default function CommitRanked(_: {||}) {\n rootID: ((rootID: any): number),\n });\n \n- const commitTree = profilingCache.CommitTree.read({\n+ const commitTree = profilingCache.getCommitTree({\n commitIndex: ((selectedCommitIndex: any): number),\n profilingSummary,\n rendererID: ((rendererID: any): number),\n rootID: ((rootID: any): number),\n });\n \n- const chartData = generateChartData(commitTree, commitDetails);\n-\n- return 'Coming soon: Ranked';\n-}\n-\n-type ChartNode = {|\n- id: number,\n- label: string,\n- name: string,\n- title: string,\n- value: number,\n-|};\n-\n-type ChartData = {|\n- maxValue: number,\n- nodes: Array<ChartNode>,\n-|};\n+ const chartData = profilingCache.getRankedChartData({\n+ commitDetails,\n+ commitIndex: ((selectedCommitIndex: any): number),\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n \n-const generateChartData = (\n- commitTree: CommitTree,\n- commitDetails: CommitDetails\n-): ChartData => {\n- const { nodes } = commitTree;\n+ const selectedFiberIndex = useMemo(\n+ () => getNodeIndex(chartData, selectedFiberID),\n+ [chartData, selectedFiberID]\n+ );\n \n- let maxSelfDuration = 0;\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ chartData,\n+ scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),\n+ selectedFiberID,\n+ selectedFiberIndex,\n+ selectFiber,\n+ width,\n+ }),\n+ [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width]\n+ );\n \n- const chartNodes: Array<ChartNode> = [];\n- commitDetails.actualDurations.forEach((actualDuration, id) => {\n- const node = ((nodes.get(id): any): Node);\n+ \/\/ If a commit contains no fibers with an actualDuration > 0,\n+ \/\/ Display a fallback message.\n+ if (chartData.nodes.length === 0) {\n+ return <NoCommitData \/>;\n+ }\n+\n+ return (\n+ <FixedSizeList\n+ height={height}\n+ innerTagName=\"svg\"\n+ itemCount={chartData.nodes.length}\n+ itemData={itemData}\n+ itemSize={barHeight}\n+ width={width}\n+ >\n+ {CommitRankedListItem}\n+ <\/FixedSizeList>\n+ );\n+}\n \n- \/\/ Don't show the root node in this chart.\n- if (node.parentID === 0) {\n- return;\n+const getNodeIndex = (chartData: ChartData, id: number | null): number => {\n+ if (id === null) {\n+ return 0;\n+ }\n+ const { nodes } = chartData;\n+ for (let index = 0; index < nodes.length; index++) {\n+ if (nodes[index].id === id) {\n+ return index;\n }\n-\n- const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);\n- maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n-\n- const name = node.displayName || 'Unknown';\n- const label = `${name} (${selfDuration.toFixed(1)}ms)`;\n- chartNodes.push({\n- id,\n- label,\n- name,\n- title: label,\n- value: selfDuration,\n- });\n- });\n-\n- return {\n- maxValue: maxSelfDuration,\n- nodes: chartNodes.sort((a, b) => b.value - a.value),\n- };\n+ }\n+ return 0;\n };\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\nnew file mode 100644\nindex 0000000000..d47ff5059a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n@@ -0,0 +1,51 @@\n+\/\/ @flow\n+\n+import React, { useCallback } from 'react';\n+import { barHeight, minBarWidth } from '.\/constants';\n+import { getGradientColor } from '.\/utils';\n+import ChartNode from '.\/ChartNode';\n+\n+import type { ItemData } from '.\/CommitRanked';\n+\n+export default function CommitRankedListItem({\n+ data,\n+ index,\n+ style,\n+}: {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+}) {\n+ const { chartData, scaleX, selectedFiberIndex, selectFiber, width } = data;\n+\n+ const node = chartData.nodes[index];\n+\n+ const handleClick = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(node.id);\n+ },\n+ [node, selectFiber]\n+ );\n+\n+ \/\/ List items are absolutely positioned using the CSS \"top\" attribute.\n+ \/\/ The \"left\" value will always be 0.\n+ \/\/ Since height is fixed, and width is based on the node's duration,\n+ \/\/ We can ignore those values as well.\n+ const top = parseInt(style.top, 10);\n+\n+ return (\n+ <ChartNode\n+ color={getGradientColor(node.value \/ chartData.maxValue)}\n+ height={barHeight}\n+ isDimmed={index < selectedFiberIndex}\n+ key={node.id}\n+ label={node.label}\n+ onClick={handleClick}\n+ title={node.title}\n+ width={Math.max(minBarWidth, scaleX(node.value, width))}\n+ x={0}\n+ y={top}\n+ \/>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.css b\/src\/devtools\/views\/Profiler\/NoCommitData.css\nnew file mode 100644\nindex 0000000000..0f66490ee9\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.css\n@@ -0,0 +1,11 @@\n+.NoCommitData {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.js b\/src\/devtools\/views\/Profiler\/NoCommitData.js\nnew file mode 100644\nindex 0000000000..8cd316aa93\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.js\n@@ -0,0 +1,20 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/NoCommitData.css';\n+\n+export default function NoCommitData() {\n+ return (\n+ <div className={styles.NoCommitData}>\n+ <p className={styles.Header}>\n+ There is no timing data to display for the currently selected commit.\n+ <\/p>\n+ <p>\n+ This can indicate that a render occurred too quickly for the timing API\n+ to measure. Try selecting another commit in the upper, right-hand\n+ corner.\n+ <\/p>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nindex d30c638504..490db544c8 100644\n--- a\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -44,6 +44,10 @@ type Context = {|\n \/\/ It impacts the flame graph and ranked charts.\n selectedCommitIndex: number | null,\n setSelectedCommitIndex: (value: number | null) => void,\n+\n+ \/\/ Which fiber is currently selected in the Ranked or Flamegraph charts?\n+ selectedFiberID: number | null,\n+ selectFiber: (id: number | null) => void,\n |};\n \n const ProfilerContext = createContext<Context>(((null: any): Context));\n@@ -118,6 +122,8 @@ function ProfilerContextController({ children }: Props) {\n null\n );\n \n+ const [selectedFiberID, selectFiber] = useState<number | null>(null);\n+\n const value = useMemo(\n () => ({\n hasProfilingData,\n@@ -136,6 +142,9 @@ function ProfilerContextController({ children }: Props) {\n \n selectedCommitIndex,\n setSelectedCommitIndex,\n+\n+ selectedFiberID,\n+ selectFiber,\n }),\n [\n hasProfilingData,\n@@ -154,6 +163,9 @@ function ProfilerContextController({ children }: Props) {\n \n selectedCommitIndex,\n setSelectedCommitIndex,\n+\n+ selectedFiberID,\n+ selectFiber,\n ]\n );\n \ndiff --git a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\nnew file mode 100644\nindex 0000000000..0b3115b023\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n@@ -0,0 +1,78 @@\n+\/\/ @flow\n+\n+import { calculateSelfDuration } from '.\/utils';\n+\n+import type { CommitDetails, CommitTree, Node } from '.\/types';\n+\n+export type ChartNode = {|\n+ id: number,\n+ label: string,\n+ name: string,\n+ title: string,\n+ value: number,\n+|};\n+\n+export type ChartData = {|\n+ maxValue: number,\n+ nodes: Array<ChartNode>,\n+|};\n+\n+const cachedChartData: Map<string, ChartData> = new Map();\n+\n+export function getChartData({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+}: {|\n+ commitDetails: CommitDetails,\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ rootID: number,\n+|}): ChartData {\n+ const key = `${rootID}-${commitIndex}`;\n+\n+ if (cachedChartData.has(key)) {\n+ return ((cachedChartData.get(key): any): ChartData);\n+ }\n+\n+ const { nodes } = commitTree;\n+\n+ let maxSelfDuration = 0;\n+\n+ const chartNodes: Array<ChartNode> = [];\n+ commitDetails.actualDurations.forEach((actualDuration, id) => {\n+ const node = ((nodes.get(id): any): Node);\n+\n+ \/\/ Don't show the root node in this chart.\n+ if (node.parentID === 0) {\n+ return;\n+ }\n+\n+ const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);\n+ maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n+\n+ const name = node.displayName || 'Unknown';\n+ const label = `${name} (${selfDuration.toFixed(1)}ms)`;\n+ chartNodes.push({\n+ id,\n+ label,\n+ name,\n+ title: label,\n+ value: selfDuration,\n+ });\n+ });\n+\n+ const chartData = {\n+ maxValue: maxSelfDuration,\n+ nodes: chartNodes.sort((a, b) => b.value - a.value),\n+ };\n+\n+ cachedChartData.set(key, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotSelector.css b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\nindex 0589bfa63a..8d4fa32d1b 100644\n--- a\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\n@@ -21,6 +21,7 @@\n flex: 0 0 auto;\n white-space: nowrap;\n font-family: var(--font-family-monospace);\n+ margin-left: 0.25rem;\n }\n \n .NoCommits {\ndiff --git a\/src\/devtools\/views\/Profiler\/constants.js b\/src\/devtools\/views\/Profiler\/constants.js\nindex ef3a21c270..61162f61c5 100644\n--- a\/src\/devtools\/views\/Profiler\/constants.js\n+++ b\/src\/devtools\/views\/Profiler\/constants.js\n@@ -1,5 +1,6 @@\n \/\/ @flow\n \n+export const barHeight = 20;\n export const maxBarWidth = 30;\n export const minBarHeight = 5;\n export const minBarWidth = 5;\ndiff --git a\/src\/devtools\/views\/Profiler\/utils.js b\/src\/devtools\/views\/Profiler\/utils.js\nindex d94c2ecd4e..c8e439ce73 100644\n--- a\/src\/devtools\/views\/Profiler\/utils.js\n+++ b\/src\/devtools\/views\/Profiler\/utils.js\n@@ -58,3 +58,13 @@ export const formatPercentage = (percentage: number) =>\n Math.round(percentage * 100);\n export const formatTime = (timestamp: number) =>\n Math.round(Math.round(timestamp) \/ 100) \/ 10;\n+\n+export const scale = (\n+ minValue: number,\n+ maxValue: number,\n+ minRange: number,\n+ maxRange: number\n+) => (value: number, fallbackValue: number) =>\n+ maxValue - minValue === 0\n+ ? fallbackValue\n+ : ((value - minValue) \/ (maxValue - minValue)) * (maxRange - minRange);\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsContext.js b\/src\/devtools\/views\/Settings\/SettingsContext.js\nindex 9c4e36be8c..0c5458cbad 100644\n--- a\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -145,6 +145,7 @@ function updateThemeVariables(theme: Theme): void {\n updateStyleHelper(theme, 'color-commit-gradient-7');\n updateStyleHelper(theme, 'color-commit-gradient-8');\n updateStyleHelper(theme, 'color-commit-gradient-9');\n+ updateStyleHelper(theme, 'color-commit-gradient-text');\n updateStyleHelper(theme, 'color-component-name');\n updateStyleHelper(theme, 'color-component-name-inverted');\n updateStyleHelper(theme, 'color-dim');\ndiff --git a\/src\/devtools\/views\/root.css b\/src\/devtools\/views\/root.css\nindex 1d4ac95cea..65eb630d24 100644\n--- a\/src\/devtools\/views\/root.css\n+++ b\/src\/devtools\/views\/root.css\n@@ -27,6 +27,7 @@\n --light-color-commit-gradient-7: #dfba57;\n --light-color-commit-gradient-8: #efbb49;\n --light-color-commit-gradient-9: #febc38;\n+ --light-color-commit-gradient-text: #000000;\n --light-color-component-name: #8155cb;\n --light-color-component-name-inverted: #ffffff;\n --light-color-dim: #777d88;\n@@ -68,6 +69,7 @@\n --dark-color-commit-gradient-7: #dfba57;\n --dark-color-commit-gradient-8: #efbb49;\n --dark-color-commit-gradient-9: #febc38;\n+ --dark-color-commit-gradient-text: #000000;\n --dark-color-component-name: #61dafb;\n --dark-color-component-name-inverted: ##282828;\n --dark-color-dim: #8f949d;\n","files":[{"path":"src\/devtools\/ProfilingCache.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/ChartNode.css","status":"A"},{"path":"src\/devtools\/views\/Profiler\/ChartNode.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/CommitRanked.css","status":"M"},{"path":"src\/devtools\/views\/Profiler\/CommitRanked.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/CommitRankedListItem.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/NoCommitData.css","status":"A"},{"path":"src\/devtools\/views\/Profiler\/NoCommitData.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/ProfilerContext.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/RankedChartBuilder.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/SnapshotSelector.css","status":"M"},{"path":"src\/devtools\/views\/Profiler\/constants.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/utils.js","status":"M"},{"path":"src\/devtools\/views\/Settings\/SettingsContext.js","status":"M"},{"path":"src\/devtools\/views\/root.css","status":"M"}],"commit":{"shortRevision":"01ad9f1da6","revision":"01ad9f1da6d6db997b1b2c865b2eb36de577538d","authorName":"Brian Vaughn","authoredAt":"2019-03-16T14:06:41-07:00","authorEmail":"bvaughn@fb.com","subject":"Implemented ranked chart"}}</article></body></html>

{"body":"","parents":["734e4146e7bbfdaebdfaf3762aaf79c22f93e328"],"patch":"diff --git a\/src\/devtools\/ProfilingCache.js b\/src\/devtools\/ProfilingCache.js\nindex 7c76d0421d..bed859d665 100644\n--- a\/src\/devtools\/ProfilingCache.js\n+++ b\/src\/devtools\/ProfilingCache.js\n@@ -6,6 +6,10 @@ import {\n getCommitTree,\n invalidateCommitTrees,\n } from 'src\/devtools\/views\/Profiler\/CommitTreeBuilder';\n+import {\n+ getChartData as getRankedChartData,\n+ invalidateChartData as invalidateRankedChartData,\n+} from 'src\/devtools\/views\/Profiler\/RankedChartBuilder';\n \n import type { Resource } from '.\/cache';\n import type { Bridge } from '..\/types';\n@@ -15,9 +19,10 @@ import type {\n } from 'src\/backend\/types';\n import type {\n CommitDetails as CommitDetailsFrontend,\n- CommitTree,\n+ CommitTree as CommitTreeFrontend,\n ProfilingSummary as ProfilingSummaryFrontend,\n } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ChartData as RankedChartData } from 'src\/devtools\/views\/Profiler\/RankedChartBuilder';\n \n type CommitDetailsParams = {|\n commitIndex: number,\n@@ -25,7 +30,7 @@ type CommitDetailsParams = {|\n rendererID: number,\n |};\n \n-type CommitTreeParams = {|\n+type GetCommitTreeParams = {|\n commitIndex: number,\n profilingSummary: ProfilingSummaryFrontend,\n rendererID: number,\n@@ -38,6 +43,9 @@ type ProfilingSummaryParams = {|\n |};\n \n export default class ProfilingCache {\n+ _bridge: Bridge;\n+ _store: Store;\n+\n _pendingCommitDetailsMap: Map<\n string,\n (commitDetails: CommitDetailsFrontend) => void\n@@ -48,90 +56,105 @@ export default class ProfilingCache {\n (profilingSummary: ProfilingSummaryFrontend) => void\n > = new Map();\n \n- CommitDetails: Resource;\n- CommitTree: Resource;\n- ProfilingSummary: Resource;\n+ CommitDetails: Resource<\n+ CommitDetailsParams,\n+ CommitDetailsFrontend\n+ > = createResource(\n+ ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {\n+ return new Promise(resolve => {\n+ if (!this._store.profilingOperations.has(rootID)) {\n+ \/\/ If no profiling data was recorded for this root, skip the round trip.\n+ resolve({\n+ actualDurations: new Map(),\n+ interactions: [],\n+ });\n+ } else {\n+ this._pendingCommitDetailsMap.set(\n+ `${rootID}-${commitIndex}`,\n+ resolve\n+ );\n+ this._bridge.send('getCommitDetails', {\n+ commitIndex,\n+ rendererID,\n+ rootID,\n+ });\n+ }\n+ });\n+ },\n+ ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>\n+ `${rootID}-${commitIndex}`\n+ );\n+\n+ ProfilingSummary: Resource<\n+ ProfilingSummaryParams,\n+ ProfilingSummaryFrontend\n+ > = createResource(\n+ ({ rendererID, rootID }: ProfilingSummaryParams) => {\n+ return new Promise(resolve => {\n+ if (!this._store.profilingOperations.has(rootID)) {\n+ \/\/ If no profiling data was recorded for this root, skip the round trip.\n+ resolve({\n+ commitDurations: [],\n+ commitTimes: [],\n+ initialTreeBaseDurations: new Map(),\n+ interactionCount: 0,\n+ });\n+ } else {\n+ this._pendingProfileSummaryMap.set(rootID, resolve);\n+ this._bridge.send('getProfilingSummary', { rendererID, rootID });\n+ }\n+ });\n+ },\n+ ({ rendererID, rootID }: ProfilingSummaryParams) => rootID\n+ );\n \n constructor(bridge: Bridge, store: Store) {\n- this.CommitDetails = createResource(\n- ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {\n- return new Promise(resolve => {\n- if (!store.profilingOperations.has(rootID)) {\n- \/\/ If no profiling data was recorded for this root, skip the round trip.\n- resolve({\n- actualDurations: new Map(),\n- interactions: [],\n- });\n- } else {\n- this._pendingCommitDetailsMap.set(\n- `${rootID}-${commitIndex}`,\n- resolve\n- );\n- bridge.send('getCommitDetails', {\n- commitIndex,\n- rendererID,\n- rootID,\n- });\n- }\n- });\n- },\n- ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>\n- `${rootID}-${commitIndex}`\n- );\n-\n- this.CommitTree = createResource(\n- ({\n- commitIndex,\n- profilingSummary,\n- rendererID,\n- rootID,\n- }: CommitTreeParams) =>\n- new Promise(resolve =>\n- resolve(\n- getCommitTree({\n- commitIndex,\n- profilingSummary,\n- rendererID,\n- rootID,\n- store,\n- })\n- )\n- ),\n- ({\n- commitIndex,\n- profilingSummary,\n- rendererID,\n- rootID,\n- }: CommitTreeParams) => `${rootID}-${commitIndex}`\n- );\n-\n- this.ProfilingSummary = createResource(\n- ({ rendererID, rootID }: ProfilingSummaryParams) => {\n- return new Promise(resolve => {\n- if (!store.profilingOperations.has(rootID)) {\n- \/\/ If no profiling data was recorded for this root, skip the round trip.\n- resolve({\n- commitDurations: [],\n- commitTimes: [],\n- initialTreeBaseDurations: new Map(),\n- interactionCount: 0,\n- });\n- } else {\n- this._pendingProfileSummaryMap.set(rootID, resolve);\n- bridge.send('getProfilingSummary', { rendererID, rootID });\n- }\n- });\n- },\n- ({ rendererID, rootID }: ProfilingSummaryParams) => rootID\n- );\n+ this._bridge = bridge;\n+ this._store = store;\n \n bridge.addListener('commitDetails', this.onCommitDetails);\n bridge.addListener('profilingSummary', this.onProfileSummary);\n }\n \n+ getCommitTree = ({\n+ commitIndex,\n+ profilingSummary,\n+ rendererID,\n+ rootID,\n+ }: GetCommitTreeParams) =>\n+ getCommitTree({\n+ commitIndex,\n+ profilingSummary,\n+ rendererID,\n+ rootID,\n+ store: this._store,\n+ });\n+\n+ getRankedChartData = ({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }: {|\n+ commitDetails: CommitDetailsFrontend,\n+ commitIndex: number,\n+ commitTree: CommitTreeFrontend,\n+ rootID: number,\n+ |}): RankedChartData =>\n+ getRankedChartData({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ });\n+\n invalidate() {\n+ \/\/ Invalidate Susepnse caches.\n invalidateResources();\n+\n+ \/\/ Invalidate non-Suspense caches too.\n invalidateCommitTrees();\n+ invalidateRankedChartData();\n \n this._pendingCommitDetailsMap.clear();\n this._pendingProfileSummaryMap.clear();\ndiff --git a\/src\/devtools\/views\/Profiler\/ChartNode.css b\/src\/devtools\/views\/Profiler\/ChartNode.css\nnew file mode 100644\nindex 0000000000..e9ebea1a7a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ChartNode.css\n@@ -0,0 +1,31 @@\n+.Group {\n+ transition: all ease-in-out 250ms;\n+}\n+\n+.Rect {\n+ cursor: pointer;\n+ stroke: var(--color-background);\n+ transition: all ease-in-out 250ms;\n+}\n+\n+.ForeignObject {\n+ pointer-events: none;\n+ transition: all ease-in-out 250ms;\n+}\n+\n+.Div {\n+ pointer-events: none;\n+ white-space: nowrap;\n+ text-overflow: ellipsis;\n+ overflow: hidden;\n+ font-size: var(--font-family-sans);\n+ font-family: var(--font-size-sans-normal);\n+ margin-left: 4px;\n+ margin-right: 4px;\n+ line-height: 1.5;\n+ padding: 0 0 0;\n+ font-weight: 400;\n+ color: var(--color-commit-gradient-text);\n+ text-align: left;\n+ transition: all ease-in-out 250ms;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ChartNode.js b\/src\/devtools\/views\/Profiler\/ChartNode.js\nnew file mode 100644\nindex 0000000000..085228502d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ChartNode.js\n@@ -0,0 +1,67 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import { textHeight } from '.\/constants';\n+\n+import styles from '.\/ChartNode.css';\n+\n+type Props = {|\n+ color: string,\n+ height: number,\n+ isDimmed?: boolean,\n+ label: string,\n+ onClick: Function,\n+ onDoubleClick?: Function,\n+ placeLabelAboveNode?: boolean,\n+ title: string,\n+ width: number,\n+ x: number,\n+ y: number,\n+|};\n+\n+const minWidthToDisplay = 35;\n+\n+export default function ChartNode({\n+ color,\n+ height,\n+ isDimmed = false,\n+ label,\n+ onClick,\n+ onDoubleClick,\n+ title,\n+ width,\n+ x,\n+ y,\n+}: Props) {\n+ return (\n+ \n+ {title}<\/title>\n+ <rect\n+ width={width}\n+ height={height}\n+ fill={color}\n+ onClick={onClick}\n+ onDoubleClick={onDoubleClick}\n+ className={styles.Rect}\n+ style={{\n+ opacity: isDimmed ? 0.5 : 1,\n+ }}\n+ \/>\n+ {width >= minWidthToDisplay && (\n+ <foreignObject\n+ width={width}\n+ height={height}\n+ className={styles.ForeignObject}\n+ style={{\n+ paddingLeft: x < 0 ? -x : 0,\n+ opacity: isDimmed ? 0.75 : 1,\n+ display: width < minWidthToDisplay ? 'none' : 'block',\n+ }}\n+ y={height < textHeight ? -textHeight : 0}\n+ >\n+ <div className={styles.Div}>{label}<\/div>\n+ <\/foreignObject>\n+ )}\n+ <\/g>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex fe820621d6..7e5c533ce3 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -24,7 +24,7 @@ export default function CommitFlamegraph(_: {||}) {\n rootID: ((rootID: any): number),\n });\n \n- const commitTree = profilingCache.CommitTree.read({\n+ const commitTree = profilingCache.getCommitTree({\n commitIndex: ((selectedCommitIndex: any): number),\n profilingSummary,\n rendererID: ((rendererID: any): number),\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.css b\/src\/devtools\/views\/Profiler\/CommitRanked.css\nindex e69de29bb2..bc441e485e 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRanked.css\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.css\n@@ -0,0 +1,5 @@\n+.Container {\n+ width: 100%;\n+ height: 100%;\n+ padding: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.js b\/src\/devtools\/views\/Profiler\/CommitRanked.js\nindex 4e856656a4..1fb4ded3ee 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRanked.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.js\n@@ -1,18 +1,55 @@\n \/\/ @flow\n \n-import React, { useContext } from 'react';\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n import { ProfilerContext } from '.\/ProfilerContext';\n-import { calculateSelfDuration } from '.\/utils';\n+import NoCommitData from '.\/NoCommitData';\n+import CommitRankedListItem from '.\/CommitRankedListItem';\n+import { barHeight } from '.\/constants';\n+import { scale } from '.\/utils';\n import { StoreContext } from '..\/context';\n \n import styles from '.\/CommitRanked.css';\n \n-import type { CommitDetails, CommitTree, Node } from '.\/types';\n+import type { ChartData } from '.\/RankedChartBuilder';\n \n-export default function CommitRanked(_: {||}) {\n- const { rendererID, rootID, selectedCommitIndex } = useContext(\n- ProfilerContext\n+export type ItemData = {|\n+ chartData: ChartData,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedFiberID: number | null,\n+ selectedFiberIndex: number,\n+ selectFiber: (id: number | null) => void,\n+ width: number,\n+|};\n+\n+export default function CommitRankedAutoSizer(_: {||}) {\n+ const { selectFiber } = useContext(ProfilerContext);\n+ const deselectCurrentFiber = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(null);\n+ },\n+ [selectFiber]\n+ );\n+\n+ return (\n+ <div className={styles.Container} onClick={deselectCurrentFiber}>\n+ <AutoSizer>\n+ {({ height, width }) => <CommitRanked height={height} width={width} \/>}\n+ <\/AutoSizer>\n+ <\/div>\n );\n+}\n+\n+function CommitRanked({ height, width }: {| height: number, width: number |}) {\n+ const {\n+ rendererID,\n+ rootID,\n+ selectedCommitIndex,\n+ selectedFiberID,\n+ selectFiber,\n+ } = useContext(ProfilerContext);\n \n const { profilingCache } = useContext(StoreContext);\n \n@@ -27,64 +64,66 @@ export default function CommitRanked(_: {||}) {\n rootID: ((rootID: any): number),\n });\n \n- const commitTree = profilingCache.CommitTree.read({\n+ const commitTree = profilingCache.getCommitTree({\n commitIndex: ((selectedCommitIndex: any): number),\n profilingSummary,\n rendererID: ((rendererID: any): number),\n rootID: ((rootID: any): number),\n });\n \n- const chartData = generateChartData(commitTree, commitDetails);\n-\n- return 'Coming soon: Ranked';\n-}\n-\n-type ChartNode = {|\n- id: number,\n- label: string,\n- name: string,\n- title: string,\n- value: number,\n-|};\n-\n-type ChartData = {|\n- maxValue: number,\n- nodes: Array<ChartNode>,\n-|};\n+ const chartData = profilingCache.getRankedChartData({\n+ commitDetails,\n+ commitIndex: ((selectedCommitIndex: any): number),\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n \n-const generateChartData = (\n- commitTree: CommitTree,\n- commitDetails: CommitDetails\n-): ChartData => {\n- const { nodes } = commitTree;\n+ const selectedFiberIndex = useMemo(\n+ () => getNodeIndex(chartData, selectedFiberID),\n+ [chartData, selectedFiberID]\n+ );\n \n- let maxSelfDuration = 0;\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ chartData,\n+ scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),\n+ selectedFiberID,\n+ selectedFiberIndex,\n+ selectFiber,\n+ width,\n+ }),\n+ [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width]\n+ );\n \n- const chartNodes: Array<ChartNode> = [];\n- commitDetails.actualDurations.forEach((actualDuration, id) => {\n- const node = ((nodes.get(id): any): Node);\n+ \/\/ If a commit contains no fibers with an actualDuration > 0,\n+ \/\/ Display a fallback message.\n+ if (chartData.nodes.length === 0) {\n+ return <NoCommitData \/>;\n+ }\n+\n+ return (\n+ <FixedSizeList\n+ height={height}\n+ innerTagName=\"svg\"\n+ itemCount={chartData.nodes.length}\n+ itemData={itemData}\n+ itemSize={barHeight}\n+ width={width}\n+ >\n+ {CommitRankedListItem}\n+ <\/FixedSizeList>\n+ );\n+}\n \n- \/\/ Don't show the root node in this chart.\n- if (node.parentID === 0) {\n- return;\n+const getNodeIndex = (chartData: ChartData, id: number | null): number => {\n+ if (id === null) {\n+ return 0;\n+ }\n+ const { nodes } = chartData;\n+ for (let index = 0; index < nodes.length; index++) {\n+ if (nodes[index].id === id) {\n+ return index;\n }\n-\n- const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);\n- maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n-\n- const name = node.displayName || 'Unknown';\n- const label = `${name} (${selfDuration.toFixed(1)}ms)`;\n- chartNodes.push({\n- id,\n- label,\n- name,\n- title: label,\n- value: selfDuration,\n- });\n- });\n-\n- return {\n- maxValue: maxSelfDuration,\n- nodes: chartNodes.sort((a, b) => b.value - a.value),\n- };\n+ }\n+ return 0;\n };\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\nnew file mode 100644\nindex 0000000000..d47ff5059a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n@@ -0,0 +1,51 @@\n+\/\/ @flow\n+\n+import React, { useCallback } from 'react';\n+import { barHeight, minBarWidth } from '.\/constants';\n+import { getGradientColor } from '.\/utils';\n+import ChartNode from '.\/ChartNode';\n+\n+import type { ItemData } from '.\/CommitRanked';\n+\n+export default function CommitRankedListItem({\n+ data,\n+ index,\n+ style,\n+}: {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+}) {\n+ const { chartData, scaleX, selectedFiberIndex, selectFiber, width } = data;\n+\n+ const node = chartData.nodes[index];\n+\n+ const handleClick = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(node.id);\n+ },\n+ [node, selectFiber]\n+ );\n+\n+ \/\/ List items are absolutely positioned using the CSS \"top\" attribute.\n+ \/\/ The \"left\" value will always be 0.\n+ \/\/ Since height is fixed, and width is based on the node's duration,\n+ \/\/ We can ignore those values as well.\n+ const top = parseInt(style.top, 10);\n+\n+ return (\n+ <ChartNode\n+ color={getGradientColor(node.value \/ chartData.maxValue)}\n+ height={barHeight}\n+ isDimmed={index < selectedFiberIndex}\n+ key={node.id}\n+ label={node.label}\n+ onClick={handleClick}\n+ title={node.title}\n+ width={Math.max(minBarWidth, scaleX(node.value, width))}\n+ x={0}\n+ y={top}\n+ \/>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.css b\/src\/devtools\/views\/Profiler\/NoCommitData.css\nnew file mode 100644\nindex 0000000000..0f66490ee9\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.css\n@@ -0,0 +1,11 @@\n+.NoCommitData {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.js b\/src\/devtools\/views\/Profiler\/NoCommitData.js\nnew file mode 100644\nindex 0000000000..8cd316aa93\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.js\n@@ -0,0 +1,20 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/NoCommitData.css';\n+\n+export default function NoCommitData() {\n+ return (\n+ <div className={styles.NoCommitData}>\n+ <p className={styles.Header}>\n+ There is no timing data to display for the currently selected commit.\n+ <\/p>\n+ <p>\n+ This can indicate that a render occurred too quickly for the timing API\n+ to measure. Try selecting another commit in the upper, right-hand\n+ corner.\n+ <\/p>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nindex d30c638504..490db544c8 100644\n--- a\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -44,6 +44,10 @@ type Context = {|\n \/\/ It impacts the flame graph and ranked charts.\n selectedCommitIndex: number | null,\n setSelectedCommitIndex: (value: number | null) => void,\n+\n+ \/\/ Which fiber is currently selected in the Ranked or Flamegraph charts?\n+ selectedFiberID: number | null,\n+ selectFiber: (id: number | null) => void,\n |};\n \n const ProfilerContext = createContext<Context>(((null: any): Context));\n@@ -118,6 +122,8 @@ function ProfilerContextController({ children }: Props) {\n null\n );\n \n+ const [selectedFiberID, selectFiber] = useState<number | null>(null);\n+\n const value = useMemo(\n () => ({\n hasProfilingData,\n@@ -136,6 +142,9 @@ function ProfilerContextController({ children }: Props) {\n \n selectedCommitIndex,\n setSelectedCommitIndex,\n+\n+ selectedFiberID,\n+ selectFiber,\n }),\n [\n hasProfilingData,\n@@ -154,6 +163,9 @@ function ProfilerContextController({ children }: Props) {\n \n selectedCommitIndex,\n setSelectedCommitIndex,\n+\n+ selectedFiberID,\n+ selectFiber,\n ]\n );\n \ndiff --git a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\nnew file mode 100644\nindex 0000000000..0b3115b023\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n@@ -0,0 +1,78 @@\n+\/\/ @flow\n+\n+import { calculateSelfDuration } from '.\/utils';\n+\n+import type { CommitDetails, CommitTree, Node } from '.\/types';\n+\n+export type ChartNode = {|\n+ id: number,\n+ label: string,\n+ name: string,\n+ title: string,\n+ value: number,\n+|};\n+\n+export type ChartData = {|\n+ maxValue: number,\n+ nodes: Array<ChartNode>,\n+|};\n+\n+const cachedChartData: Map<string, ChartData> = new Map();\n+\n+export function getChartData({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+}: {|\n+ commitDetails: CommitDetails,\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ rootID: number,\n+|}): ChartData {\n+ const key = `${rootID}-${commitIndex}`;\n+\n+ if (cachedChartData.has(key)) {\n+ return ((cachedChartData.get(key): any): ChartData);\n+ }\n+\n+ const { nodes } = commitTree;\n+\n+ let maxSelfDuration = 0;\n+\n+ const chartNodes: Array<ChartNode> = [];\n+ commitDetails.actualDurations.forEach((actualDuration, id) => {\n+ const node = ((nodes.get(id): any): Node);\n+\n+ \/\/ Don't show the root node in this chart.\n+ if (node.parentID === 0) {\n+ return;\n+ }\n+\n+ const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);\n+ maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n+\n+ const name = node.displayName || 'Unknown';\n+ const label = `${name} (${selfDuration.toFixed(1)}ms)`;\n+ chartNodes.push({\n+ id,\n+ label,\n+ name,\n+ title: label,\n+ value: selfDuration,\n+ });\n+ });\n+\n+ const chartData = {\n+ maxValue: maxSelfDuration,\n+ nodes: chartNodes.sort((a, b) => b.value - a.value),\n+ };\n+\n+ cachedChartData.set(key, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotSelector.css b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\nindex 0589bfa63a..8d4fa32d1b 100644\n--- a\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\n@@ -21,6 +21,7 @@\n flex: 0 0 auto;\n white-space: nowrap;\n font-family: var(--font-family-monospace);\n+ margin-left: 0.25rem;\n }\n \n .NoCommits {\ndiff --git a\/src\/devtools\/views\/Profiler\/constants.js b\/src\/devtools\/views\/Profiler\/constants.js\nindex ef3a21c270..61162f61c5 100644\n--- a\/src\/devtools\/views\/Profiler\/constants.js\n+++ b\/src\/devtools\/views\/Profiler\/constants.js\n@@ -1,5 +1,6 @@\n \/\/ @flow\n \n+export const barHeight = 20;\n export const maxBarWidth = 30;\n export const minBarHeight = 5;\n export const minBarWidth = 5;\ndiff --git a\/src\/devtools\/views\/Profiler\/utils.js b\/src\/devtools\/views\/Profiler\/utils.js\nindex d94c2ecd4e..c8e439ce73 100644\n--- a\/src\/devtools\/views\/Profiler\/utils.js\n+++ b\/src\/devtools\/views\/Profiler\/utils.js\n@@ -58,3 +58,13 @@ export const formatPercentage = (percentage: number) =>\n Math.round(percentage * 100);\n export const formatTime = (timestamp: number) =>\n Math.round(Math.round(timestamp) \/ 100) \/ 10;\n+\n+export const scale = (\n+ minValue: number,\n+ maxValue: number,\n+ minRange: number,\n+ maxRange: number\n+) => (value: number, fallbackValue: number) =>\n+ maxValue - minValue === 0\n+ ? fallbackValue\n+ : ((value - minValue) \/ (maxValue - minValue)) * (maxRange - minRange);\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsContext.js b\/src\/devtools\/views\/Settings\/SettingsContext.js\nindex 9c4e36be8c..0c5458cbad 100644\n--- a\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -145,6 +145,7 @@ function updateThemeVariables(theme: Theme): void {\n updateStyleHelper(theme, 'color-commit-gradient-7');\n updateStyleHelper(theme, 'color-commit-gradient-8');\n updateStyleHelper(theme, 'color-commit-gradient-9');\n+ updateStyleHelper(theme, 'color-commit-gradient-text');\n updateStyleHelper(theme, 'color-component-name');\n updateStyleHelper(theme, 'color-component-name-inverted');\n updateStyleHelper(theme, 'color-dim');\ndiff --git a\/src\/devtools\/views\/root.css b\/src\/devtools\/views\/root.css\nindex 1d4ac95cea..65eb630d24 100644\n--- a\/src\/devtools\/views\/root.css\n+++ b\/src\/devtools\/views\/root.css\n@@ -27,6 +27,7 @@\n --light-color-commit-gradient-7: #dfba57;\n --light-color-commit-gradient-8: #efbb49;\n --light-color-commit-gradient-9: #febc38;\n+ --light-color-commit-gradient-text: #000000;\n --light-color-component-name: #8155cb;\n --light-color-component-name-inverted: #ffffff;\n --light-color-dim: #777d88;\n@@ -68,6 +69,7 @@\n --dark-color-commit-gradient-7: #dfba57;\n --dark-color-commit-gradient-8: #efbb49;\n --dark-color-commit-gradient-9: #febc38;\n+ --dark-color-commit-gradient-text: #000000;\n --dark-color-component-name: #61dafb;\n --dark-color-component-name-inverted: ##282828;\n --dark-color-dim: #8f949d;\n","files":[{"path":"src\/devtools\/ProfilingCache.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/ChartNode.css","status":"A"},{"path":"src\/devtools\/views\/Profiler\/ChartNode.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/CommitRanked.css","status":"M"},{"path":"src\/devtools\/views\/Profiler\/CommitRanked.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/CommitRankedListItem.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/NoCommitData.css","status":"A"},{"path":"src\/devtools\/views\/Profiler\/NoCommitData.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/ProfilerContext.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/RankedChartBuilder.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/SnapshotSelector.css","status":"M"},{"path":"src\/devtools\/views\/Profiler\/constants.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/utils.js","status":"M"},{"path":"src\/devtools\/views\/Settings\/SettingsContext.js","status":"M"},{"path":"src\/devtools\/views\/root.css","status":"M"}],"commit":{"shortRevision":"01ad9f1da6","revision":"01ad9f1da6d6db997b1b2c865b2eb36de577538d","authorName":"Brian Vaughn","authoredAt":"2019-03-16T14:06:41-07:00","authorEmail":"bvaughn@fb.com","subject":"Implemented ranked chart"}}</article></body></html>

dillon1000/react

Files changed