{"body":"Lots of TODOs and unfinished views here.","files":[{"path":"OVERVIEW.md","status":"M"},{"path":"src\/backend\/agent.js","status":"M"},{"path":"src\/backend\/renderer.js","status":"M"},{"path":"src\/backend\/types.js","status":"M"},{"path":"src\/backend\/utils.js","status":"M"},{"path":"src\/devtools\/store.js","status":"M"},{"path":"src\/devtools\/types.js","status":"M"},{"path":"src\/devtools\/views\/ButtonIcon.js","status":"M"},{"path":"src\/devtools\/views\/DevTools.css","status":"M"},{"path":"src\/devtools\/views\/DevTools.js","status":"M"},{"path":"src\/devtools\/views\/Elements\/Element.js","status":"M"},{"path":"src\/devtools\/views\/Elements\/OwnersStack.js","status":"M"},{"path":"src\/devtools\/views\/Elements\/SelectedElement.js","status":"M"},{"path":"src\/devtools\/views\/Elements\/TreeContext.js","status":"M"},{"path":"src\/devtools\/views\/Elements\/types.js","status":"A"},{"path":"src\/devtools\/views\/Icon.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/Profiler.css","status":"M"},{"path":"src\/devtools\/views\/Profiler\/Profiler.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/ProfilerContext.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/RecordToggle.css","status":"A"},{"path":"src\/devtools\/views\/Profiler\/RecordToggle.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/reducer.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/types.js","status":"A"},{"path":"src\/devtools\/views\/ReactLogo.css","status":"M"},{"path":"src\/devtools\/views\/Settings\/SettingsContext.js","status":"M"},{"path":"src\/devtools\/views\/TabBar.css","status":"M"},{"path":"src\/devtools\/views\/TabBar.js","status":"M"},{"path":"src\/devtools\/views\/root.css","status":"M"}],"parents":["2606d119be12c52e8a18a7a4de1810926bf914b6"],"patch":"diff --git a\/OVERVIEW.md b\/OVERVIEW.md\nindex 35e218e000..29a5345c46 100644\n--- a\/OVERVIEW.md\n+++ b\/OVERVIEW.md\n@@ -175,7 +175,7 @@ Profiling information is stored on the backend. The backend push-notifies the fr\n \n When profiling begins, the frontend takes a snapshot\/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the \"_operations_\" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored \"_operations_\" messages to reconstruct the tree for each of the profiled commits.\n \n-While profiling is in progress, the backend also stores some information ^{1<\/sup> about each commit:\n+When profiling begins, the backend records the base durations of each fiber currently in the tree. While profiling is in progress, the backend also stores some information ^{1<\/sup> about each commit:\n * Commit time and duration\n * Which elements were rendered during that commit.\n * Which interactions (if any) were part of the commit.\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex 6e472e7d3f..59169d0643 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -40,11 +40,13 @@ type SetInParams = {|\n \n export default class Agent extends EventEmitter {\n _bridge: Bridge = ((null: any): Bridge);\n+ _isProfiling: boolean = false;\n _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};\n \n addBridge(bridge: Bridge) {\n this._bridge = bridge;\n \n+ bridge.addListener('getProfilingStatus', this.getProfilingStatus);\n bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);\n bridge.addListener('inspectElement', this.inspectElement);\n bridge.addListener('overrideContext', this.overrideContext);\n@@ -53,7 +55,9 @@ export default class Agent extends EventEmitter {\n bridge.addListener('overrideState', this.overrideState);\n bridge.addListener('selectElement', this.selectElement);\n bridge.addListener('startInspectingDOM', this.startInspectingDOM);\n+ bridge.addListener('startProfiling', this.startProfiling);\n bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);\n+ bridge.addListener('stopProfiling', this.stopProfiling);\n bridge.addListener('shutdown', this.shutdown);\n bridge.addListener('viewElementSource', this.viewElementSource);\n }\n@@ -62,14 +66,19 @@ export default class Agent extends EventEmitter {\n for (let rendererID in this._rendererInterfaces) {\n \/\/ A renderer will throw if it can't find a fiber for the specified node.\n try {\n- \/\/ $FlowFixMe\n- const renderer = this._rendererInterfaces[rendererID];\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n return renderer.getFiberIDFromNative(node, true);\n } catch (e) {}\n }\n return null;\n }\n \n+ getProfilingStatus = () => {\n+ this._bridge.send('profilingStatus', this._isProfiling);\n+ };\n+\n highlightElementInDOM = ({\n displayName,\n id,\n@@ -182,6 +191,17 @@ export default class Agent extends EventEmitter {\n window.addEventListener('mouseover', this._onMouseOver, true);\n };\n \n+ startProfiling = () => {\n+ this._isProfiling = true;\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.startProfiling();\n+ }\n+ this._bridge.send('profilingStatus', this._isProfiling);\n+ };\n+\n stopInspectingDOM = () => {\n hideOverlay();\n \n@@ -190,6 +210,17 @@ export default class Agent extends EventEmitter {\n window.removeEventListener('mouseover', this._onMouseOver, true);\n };\n \n+ stopProfiling = () => {\n+ this._isProfiling = false;\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.startProfiling();\n+ }\n+ this._bridge.send('profilingStatus', this._isProfiling);\n+ };\n+\n viewElementSource = ({ id, rendererID }: InspectSelectParams) => {\n const renderer = this._rendererInterfaces[rendererID];\n if (renderer == null) {\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex f9d3af2bfc..7c63a79b7d 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -26,11 +26,12 @@ import { inspectHooksOfFiber } from '.\/ReactDebugHooks';\n import type {\n DevToolsHook,\n Fiber,\n+ Interaction,\n ReactRenderer,\n FiberData,\n RendererInterface,\n } from '.\/types';\n-import type { InspectedElement } from 'src\/devtools\/types';\n+import type { InspectedElement } from 'src\/devtools\/views\/elements\/types';\n \n function getInternalReactConstants(version) {\n const ReactSymbols = {\n@@ -459,6 +460,12 @@ export function attach(\n const idToFiberMap: Map = new Map();\n const primaryFibers: Set = new Set();\n \n+ \/\/ When profiling is supported, we store the latest tree base durations for each Fiber.\n+ \/\/ This is so that we can quickly capture a snapshot of those values if profiling starts.\n+ \/\/ If we didn't store these values, we'd have to crawl the tree when profiling started,\n+ \/\/ and use a slow path to find each of the current Fibers.\n+ const idToTreeBaseDurationMap: Map = new Map();\n+\n function getFiberID(primaryFiber: Fiber): number {\n if (!fiberToIDMap.has(primaryFiber)) {\n const id = getUID();\n@@ -525,7 +532,12 @@ export function attach(\n \n function flushPendingEvents(root: Object): void {\n if (pendingOperations.length === 0) {\n- return;\n+ \/\/ If we're currently profiling, send an \"operations\" method even if there are no mutations to the tree.\n+ \/\/ The frontend needs this no-op info to know how to reconstruct the tree for each commit,\n+ \/\/ even if a particular commit didn't change the shape of the tree.\n+ if (!isProfiling) {\n+ return;\n+ }\n }\n \n \/\/ Identify which renderer this update is coming from.\n@@ -546,11 +558,17 @@ export function attach(\n const isRoot = fiber.tag === HostRoot;\n const id = getFiberID(getPrimaryFiber(fiber));\n \n+ const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');\n+ if (isProfilingSupported) {\n+ idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);\n+ }\n+\n if (isRoot) {\n- const operation = new Uint32Array(3);\n+ const operation = new Uint32Array(4);\n operation[0] = TREE_OPERATION_ADD;\n operation[1] = id;\n operation[2] = ElementTypeRoot;\n+ operation[3] = isProfilingSupported ? 1 : 0;\n addOperation(operation);\n } else {\n const { displayName, key, type } = getDataForFiber(fiber);\n@@ -616,8 +634,9 @@ export function attach(\n operation[1] = id;\n addOperation(operation, true);\n }\n- idToFiberMap.delete(id);\n fiberToIDMap.delete(primaryFiber);\n+ idToFiberMap.delete(id);\n+ idToTreeBaseDurationMap.delete(primaryFiber);\n primaryFibers.delete(primaryFiber);\n }\n \n@@ -645,6 +664,26 @@ export function attach(\n ) {\n debug('enqueueUpdateIfNecessary()', fiber);\n \n+ if (isProfiling) {\n+ if (haveProfilerTimesChanged(fiber.alternate, fiber)) {\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+\n+ idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);\n+\n+ if (fiber.actualDuration > 0) {\n+ \/\/ If profiling is active, store durations for elements that were rendered during the commit.\n+ ((currentCommitProfilingMetadata: any): CommitProfilingData).committedFibers.push(\n+ {\n+ id,\n+ actualDuration: fiber.actualDuration,\n+ selfDuration: fiber.selfDuration,\n+ treeBaseDuration: fiber.treeBaseDuration,\n+ }\n+ );\n+ }\n+ }\n+ }\n+\n \/\/ The frontend only really cares about the displayName, key, and children.\n \/\/ The first two don't really change, so we are only concerned with the order of children here.\n \/\/ This is trickier than a simple comparison though, since certain types of fibers are filtered.\n@@ -667,8 +706,6 @@ export function attach(\n operation.set(nextChildren, 3);\n addOperation(operation);\n }\n-\n- \/\/ TODO (profiling) If we're profiling, also check to see if that data has changed.\n }\n \n function findReorderedChildren(fiber: Fiber, nextChildren: Array) {\n@@ -798,6 +835,21 @@ export function attach(\n const current = root.current;\n const alternate = current.alternate;\n \n+ if (isProfiling) {\n+ \/\/ If profiling is active, store commit time and duration, and the current interactions.\n+ \/\/ The frontend may request this information after profiling has stopped.\n+ currentCommitProfilingMetadata = {\n+ committedFibers: [],\n+ commitTime: performance.now() - profilingStartTime,\n+ interactions: Array.from(root.memoizedInteractions).map(\n+ ({ name, timestamp }: Interaction) => ({\n+ name,\n+ timestamp: timestamp - profilingStartTime,\n+ })\n+ ),\n+ };\n+ }\n+\n if (alternate) {\n \/\/ TODO: relying on this seems a bit fishy.\n const wasMounted =\n@@ -819,6 +871,13 @@ export function attach(\n \/\/ Mount a new root.\n mountFiber(current, null);\n }\n+\n+ if (isProfiling) {\n+ ((commitProfilingMetadata: any): Array).push(\n+ ((currentCommitProfilingMetadata: any): CommitProfilingData)\n+ );\n+ }\n+\n \/\/ We're done here.\n flushPendingEvents(root);\n }\n@@ -1263,6 +1322,41 @@ export function attach(\n }\n }\n \n+ type CommittedFiber = {|\n+ actualDuration: number,\n+ id: number,\n+ selfDuration: number,\n+ treeBaseDuration: number,\n+ |};\n+\n+ type CommitProfilingData = {|\n+ committedFibers: Array,\n+ commitTime: number,\n+ interactions: Array,\n+ |};\n+\n+ let commitProfilingMetadata: Array | null = null;\n+ let currentCommitProfilingMetadata: CommitProfilingData | null = null;\n+ let initialTreeBaseDurations: Array | null = null;\n+ let isProfiling: boolean = false;\n+ let profilingStartTime: number = 0;\n+\n+ function startProfiling() {\n+ commitProfilingMetadata = [];\n+ initialTreeBaseDurations = [];\n+ isProfiling = true;\n+ profilingStartTime = performance.now();\n+\n+ \/\/ Save initial treeBaseDurations; we'll need to send them later.\n+ idToTreeBaseDurationMap.forEach((treeBaseDuration: number, id: number) => {\n+ initialTreeBaseDurations = [id, treeBaseDuration];\n+ });\n+ }\n+\n+ function stopProfiling() {\n+ isProfiling = false;\n+ }\n+\n return {\n cleanup,\n getFiberIDFromNative,\n@@ -1277,6 +1371,8 @@ export function attach(\n setInHook,\n setInProps,\n setInState,\n+ startProfiling,\n+ stopProfiling,\n walkTree,\n };\n }\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex d736d7cd59..0b3521b2cd 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -1,6 +1,7 @@\n \/\/ @flow\n \n-import type { ElementType, InspectedElement } from 'src\/devtools\/types';\n+import type { ElementType } from 'src\/devtools\/types';\n+import type { InspectedElement } from 'src\/devtools\/views\/elements\/types';\n \n type BundleType =\n | 0 \/\/ PROD\n@@ -75,6 +76,8 @@ export type RendererInterface = {\n ) => void,\n setInProps: (id: number, path: Array, value: any) => void,\n setInState: (id: number, path: Array, value: any) => void,\n+ startProfiling: () => void,\n+ stopProfiling: () => void,\n walkTree: () => void,\n };\n \ndiff --git a\/src\/backend\/utils.js b\/src\/backend\/utils.js\nindex ddb11eca12..980565e223 100644\n--- a\/src\/backend\/utils.js\n+++ b\/src\/backend\/utils.js\n@@ -2,7 +2,7 @@\n \n import { dehydrate } from '..\/hydration';\n \n-import type { DehydratedData } from 'src\/devtools\/types';\n+import type { DehydratedData } from 'src\/devtools\/views\/elements\/types';\n \n export function cleanForBridge(data: Object | null): DehydratedData | null {\n if (data !== null) {\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex d59242b4d1..c9004475d2 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -10,7 +10,8 @@ import { ElementTypeRoot } from '.\/types';\n import { utfDecodeString } from '..\/utils';\n import { __DEBUG__ } from '..\/constants';\n \n-import type { Element, ElementType } from '.\/types';\n+import type { ElementType } from '.\/types';\n+import type { Element } from '.\/views\/elements\/types';\n import type { Bridge } from '..\/types';\n \n const debug = (methodName, ...args) => {\n@@ -24,6 +25,10 @@ const debug = (methodName, ...args) => {\n }\n };\n \n+export type Capabilities = {|\n+ supportsProfiling: boolean,\n+|};\n+\n \/**\n * The store is the single source of truth for updates from the backend.\n * ContextProviders can subscribe to the Store for specific things they want to provide.\n@@ -47,9 +52,13 @@ export default class Store extends EventEmitter {\n \/\/ Passive effects will check it for changes between render and mount.\n _roots: $ReadOnlyArray = [];\n \n+ _rootIDToCapabilities: Map = new Map();\n+\n \/\/ Renderer ID is needed to support inspection fiber props, state, and hooks.\n _rootIDToRendererID: Map = new Map();\n \n+ _supportsProfiling: boolean = false;\n+\n constructor(bridge: Bridge) {\n super();\n \n@@ -72,6 +81,10 @@ export default class Store extends EventEmitter {\n return this._roots;\n }\n \n+ get supportsProfiling(): boolean {\n+ return this._supportsProfiling;\n+ }\n+\n getElementAtIndex(index: number): Element | null {\n if (index < 0 || index >= this.numElements) {\n console.warn(\n@@ -245,8 +258,12 @@ export default class Store extends EventEmitter {\n \/\/ For now, we avoid adding it to the tree twice by checking if it's already been mounted.\n \/\/ Maybe in the future we'll revisit this.\n } else {\n+ const supportsProfiling = operations[i] > 0;\n+ i++;\n+\n this._roots = this._roots.concat(id);\n this._rootIDToRendererID.set(id, rendererID);\n+ this._rootIDToCapabilities.set(id, { supportsProfiling });\n \n this._idToElement.set(id, {\n children: [],\n@@ -341,6 +358,9 @@ export default class Store extends EventEmitter {\n \n this._roots = this._roots.filter(rootID => rootID !== id);\n this._rootIDToRendererID.delete(id);\n+ this._rootIDToCapabilities.delete(id);\n+\n+ haveRootsChanged = true;\n } else {\n debug('Remove', `fiber ${id} from parent ${parentID}`);\n \n@@ -399,6 +419,13 @@ export default class Store extends EventEmitter {\n this._revision++;\n \n if (haveRootsChanged) {\n+ this._supportsProfiling = false;\n+ this._rootIDToCapabilities.forEach(({ supportsProfiling }) => {\n+ if (supportsProfiling) {\n+ this._supportsProfiling = true;\n+ }\n+ });\n+\n this.emit('roots');\n }\n \ndiff --git a\/src\/devtools\/types.js b\/src\/devtools\/types.js\nindex 41c1aa8d05..de9b1529c3 100644\n--- a\/src\/devtools\/types.js\n+++ b\/src\/devtools\/types.js\n@@ -14,65 +14,3 @@ export const ElementTypeSuspense = 9;\n \/\/ These types may be used to visually distinguish types,\n \/\/ or to enable\/disable certain functionality.\n export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;\n-\n-\/\/ Each element on the frontend corresponds to a Fiber on the backend.\n-\/\/ Some of its information (e.g. id, type, displayName) come from the backend.\n-\/\/ Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.\n-\/\/ Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.\n-export type Element = {|\n- id: number,\n- parentID: number,\n- children: Array,\n- type: ElementType,\n- displayName: string | null,\n- key: number | string | null,\n-\n- \/\/ Owner (if available)\n- ownerID: number,\n-\n- \/\/ How many levels deep within the tree is this element?\n- \/\/ This determines how much indentation (left padding) should be used in the Elements tree.\n- depth: number,\n-\n- \/\/ How many nodes (including itself) are below this Element within the tree.\n- \/\/ This property is used to quickly determine the total number of Elements,\n- \/\/ and the Element at any given index (for windowing purposes).\n- weight: number,\n-|};\n-\n-export type Owner = {|\n- displayName: string,\n- id: number,\n-|};\n-\n-export type InspectedElement = {|\n- id: number,\n-\n- \/\/ Does the current renderer support editable hooks?\n- canEditHooks: boolean,\n-\n- \/\/ Does the current renderer support editable function props?\n- canEditFunctionProps: boolean,\n-\n- \/\/ Can view component source location.\n- canViewSource: boolean,\n-\n- \/\/ Inspectable properties.\n- context: Object | null,\n- hooks: Object | null,\n- props: Object | null,\n- state: Object | null,\n-\n- \/\/ List of owners\n- owners: Array | null,\n-\n- \/\/ Location of component in source coude.\n- source: Object | null,\n-|};\n-\n-\/\/ TODO: Add profiling type\n-\n-export type DehydratedData = {|\n- cleaned: Array>,\n- data: Object,\n-|};\ndiff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nindex 031905d49e..d97b31bb1a 100644\n--- a\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -3,18 +3,23 @@\n import React from 'react';\n import styles from '.\/ButtonIcon.css';\n \n+export type IconType =\n+ | 'back'\n+ | 'close'\n+ | 'copy'\n+ | 'down'\n+ | 'filter'\n+ | 'more'\n+ | 'record'\n+ | 'reload'\n+ | 'search'\n+ | 'undo'\n+ | 'up'\n+ | 'view-dom'\n+ | 'view-source';\n+\n type Props = {|\n- type:\n- | 'back'\n- | 'close'\n- | 'copy'\n- | 'down'\n- | 'more'\n- | 'search'\n- | 'undo'\n- | 'up'\n- | 'view-dom'\n- | 'view-source',\n+ type: IconType,\n |};\n \n export default function ButtonIcon({ type }: Props) {\n@@ -32,9 +37,18 @@ export default function ButtonIcon({ type }: Props) {\n case 'down':\n pathData = PATH_DOWN;\n break;\n+ case 'filter':\n+ pathData = PATH_FILTER;\n+ break;\n case 'more':\n pathData = PATH_MORE;\n break;\n+ case 'record':\n+ pathData = PATH_RECORD;\n+ break;\n+ case 'reload':\n+ pathData = PATH_RELOAD;\n+ break;\n case 'search':\n pathData = PATH_SEARCH;\n break;\n@@ -85,6 +99,8 @@ const PATH_COPY = `\n \n const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';\n \n+const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';\n+\n const PATH_MORE = `\n M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9\n 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83\n@@ -92,6 +108,14 @@ const PATH_MORE = `\n 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z\n `;\n \n+const PATH_RECORD = 'M4,12a8,8 0 1,0 16,0a8,8 0 1,0 -16,0';\n+\n+const PATH_RELOAD = `\n+ M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0\n+ 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0\n+ 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\n+`;\n+\n const PATH_SEARCH = `\n M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46\n 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87\ndiff --git a\/src\/devtools\/views\/DevTools.css b\/src\/devtools\/views\/DevTools.css\nindex 953bc9bc1f..4001db68eb 100644\n--- a\/src\/devtools\/views\/DevTools.css\n+++ b\/src\/devtools\/views\/DevTools.css\n@@ -9,9 +9,30 @@\n \n .TabBar {\n flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ padding: 0 0.5rem;\n+ background-color: var(--color-background);\n+ border-top: 1px solid var(--color-border);\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-large);\n+}\n+\n+.Spacer {\n+ flex: 1;\n }\n \n .TabContent {\n flex: 1 1 100%;\n overflow: auto;\n }\n+\n+.DevToolsVersion:before {\n+ content: 'DevTools ';\n+}\n+\n+@media screen and (max-width: 350px) {\n+ .DevToolsVersion:before {\n+ content: '';\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nindex 4ed6ec74cf..d2d9cb8474 100644\n--- a\/src\/devtools\/views\/DevTools.js\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -1,6 +1,6 @@\n \/\/ @flow\n \n-import React, { useState } from 'react';\n+import React, { useEffect, useState } from 'react';\n import Store from '..\/store';\n import { BridgeContext, StoreContext } from '.\/context';\n import Elements from '.\/Elements\/Elements';\n@@ -9,6 +9,7 @@ import Settings from '.\/Settings\/Settings';\n import TabBar from '.\/TabBar';\n import { SettingsContextController } from '.\/Settings\/SettingsContext';\n import { TreeContextController } from '.\/Elements\/TreeContext';\n+import ReactLogo from '.\/ReactLogo';\n \n import styles from '.\/DevTools.css';\n \n@@ -30,6 +31,28 @@ export type Props = {|\n viewElementSource?: ?Function,\n |};\n \n+const elementTab = {\n+ id: ('elements': TabID),\n+ icon: 'elements',\n+ label: 'Elements',\n+ title: 'React Elements',\n+};\n+const profilerTab = {\n+ id: ('profiler': TabID),\n+ icon: 'profiler',\n+ label: 'Profiler',\n+ title: 'React Profiler',\n+};\n+const settingsTab = {\n+ id: ('settings': TabID),\n+ icon: 'settings',\n+ label: 'Settings',\n+ title: 'React Settings',\n+};\n+\n+const tabsWithProfiler = [elementTab, profilerTab, settingsTab];\n+const tabsWithoutProfiler = [elementTab, settingsTab];\n+\n export default function DevTools({\n bridge,\n browserName,\n@@ -40,6 +63,27 @@ export default function DevTools({\n viewElementSource = null,\n }: Props) {\n const [tab, setTab] = useState(defaultTab);\n+ const [supportsProfiling, setSupportsProfiling] = useState(\n+ store.supportsProfiling\n+ );\n+\n+ \/\/ Show\/hide the \"Profiler\" button depending on if profiling is supported.\n+ useEffect(() => {\n+ if (supportsProfiling !== store.supportsProfiling) {\n+ setSupportsProfiling(store.supportsProfiling);\n+ }\n+\n+ const handleRoots = () => {\n+ if (supportsProfiling !== store.supportsProfiling) {\n+ setSupportsProfiling(store.supportsProfiling);\n+ }\n+ };\n+\n+ store.addListener('roots', handleRoots);\n+ return () => {\n+ store.removeListener('roots', handleRoots);\n+ };\n+ }, [store, supportsProfiling]);\n \n let tabElement;\n switch (tab) {\n@@ -63,7 +107,20 @@ export default function DevTools({\n \n {showTabBar && (\n \n- \n+ \n+ \n+ {process.env.DEVTOOLS_VERSION}\n+ <\/span>\n+ \n+ \n <\/div>\n )}\n {tabElement}<\/div>\ndiff --git a\/src\/devtools\/views\/Elements\/Element.js b\/src\/devtools\/views\/Elements\/Element.js\nindex 610360586f..eef967d931 100644\n--- a\/src\/devtools\/views\/Elements\/Element.js\n+++ b\/src\/devtools\/views\/Elements\/Element.js\n@@ -12,7 +12,7 @@ import { ElementTypeClass, ElementTypeFunction } from 'src\/devtools\/types';\n import { createRegExp } from '..\/utils';\n import { TreeContext } from '.\/TreeContext';\n \n-import type { Element } from '..\/..\/types';\n+import type { Element } from '.\/types';\n \n import styles from '.\/Element.css';\n \ndiff --git a\/src\/devtools\/views\/Elements\/OwnersStack.js b\/src\/devtools\/views\/Elements\/OwnersStack.js\nindex 716f55a05d..4340c148bb 100644\n--- a\/src\/devtools\/views\/Elements\/OwnersStack.js\n+++ b\/src\/devtools\/views\/Elements\/OwnersStack.js\n@@ -6,7 +6,7 @@ import ButtonIcon from '..\/ButtonIcon';\n import { TreeContext } from '.\/TreeContext';\n import { StoreContext } from '..\/context';\n \n-import type { Element } from '..\/..\/types';\n+import type { Element } from '.\/types';\n \n import styles from '.\/OwnersStack.css';\n \ndiff --git a\/src\/devtools\/views\/Elements\/SelectedElement.js b\/src\/devtools\/views\/Elements\/SelectedElement.js\nindex 6b6074a81d..2cec5677ba 100644\n--- a\/src\/devtools\/views\/Elements\/SelectedElement.js\n+++ b\/src\/devtools\/views\/Elements\/SelectedElement.js\n@@ -17,8 +17,8 @@ import { hydrate } from 'src\/hydration';\n import styles from '.\/SelectedElement.css';\n import { ElementTypeClass, ElementTypeFunction } from '..\/..\/types';\n \n-import type { InspectedElement } from '..\/..\/types';\n-import type { DehydratedData, Element } from 'src\/devtools\/types';\n+import type { InspectedElement } from '.\/types';\n+import type { DehydratedData, Element } from '.\/types';\n \n export type Props = {||};\n \ndiff --git a\/src\/devtools\/views\/Elements\/TreeContext.js b\/src\/devtools\/views\/Elements\/TreeContext.js\nindex 616f6409cf..1b3fa5c291 100644\n--- a\/src\/devtools\/views\/Elements\/TreeContext.js\n+++ b\/src\/devtools\/views\/Elements\/TreeContext.js\n@@ -29,7 +29,7 @@ import { createRegExp } from '..\/utils';\n import { BridgeContext, StoreContext } from '..\/context';\n import Store from '..\/..\/store';\n \n-import type { Element } from 'src\/devtools\/types';\n+import type { Element } from '.\/types';\n \n type Context = {|\n \/\/ Tree\ndiff --git a\/src\/devtools\/views\/Elements\/types.js b\/src\/devtools\/views\/Elements\/types.js\nnew file mode 100644\nindex 0000000000..43dd38fa95\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Elements\/types.js\n@@ -0,0 +1,65 @@\n+\/\/ @flow\n+\n+import type { ElementType } from '..\/..\/types';\n+\n+\/\/ Each element on the frontend corresponds to a Fiber on the backend.\n+\/\/ Some of its information (e.g. id, type, displayName) come from the backend.\n+\/\/ Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.\n+\/\/ Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.\n+export type Element = {|\n+ id: number,\n+ parentID: number,\n+ children: Array,\n+ type: ElementType,\n+ displayName: string | null,\n+ key: number | string | null,\n+\n+ \/\/ Owner (if available)\n+ ownerID: number,\n+\n+ \/\/ How many levels deep within the tree is this element?\n+ \/\/ This determines how much indentation (left padding) should be used in the Elements tree.\n+ depth: number,\n+\n+ \/\/ How many nodes (including itself) are below this Element within the tree.\n+ \/\/ This property is used to quickly determine the total number of Elements,\n+ \/\/ and the Element at any given index (for windowing purposes).\n+ weight: number,\n+|};\n+\n+export type Owner = {|\n+ displayName: string,\n+ id: number,\n+|};\n+\n+export type InspectedElement = {|\n+ id: number,\n+\n+ \/\/ Does the current renderer support editable hooks?\n+ canEditHooks: boolean,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: boolean,\n+\n+ \/\/ Can view component source location.\n+ canViewSource: boolean,\n+\n+ \/\/ Inspectable properties.\n+ context: Object | null,\n+ hooks: Object | null,\n+ props: Object | null,\n+ state: Object | null,\n+\n+ \/\/ List of owners\n+ owners: Array | null,\n+\n+ \/\/ Location of component in source coude.\n+ source: Object | null,\n+|};\n+\n+\/\/ TODO: Add profiling type\n+\n+export type DehydratedData = {|\n+ cleaned: Array>,\n+ data: Object,\n+|};\ndiff --git a\/src\/devtools\/views\/Icon.js b\/src\/devtools\/views\/Icon.js\nindex e7b6a3d211..4b93b8d03c 100644\n--- a\/src\/devtools\/views\/Icon.js\n+++ b\/src\/devtools\/views\/Icon.js\n@@ -3,9 +3,19 @@\n import React from 'react';\n import styles from '.\/Icon.css';\n \n+export type IconType =\n+ | 'arrow'\n+ | 'elements'\n+ | 'flame-chart'\n+ | 'interactions'\n+ | 'profiler'\n+ | 'ranked-chart'\n+ | 'search'\n+ | 'settings';\n+\n type Props = {|\n className?: string,\n- type: 'arrow' | 'elements' | 'profiler' | 'search' | 'settings',\n+ type: IconType,\n |};\n \n export default function Icon({ className = '', type }: Props) {\n@@ -17,9 +27,18 @@ export default function Icon({ className = '', type }: Props) {\n case 'elements':\n pathData = PATH_ELEMENTS;\n break;\n+ case 'flame-chart':\n+ pathData = PATH_FLAME_CHART;\n+ break;\n+ case 'interactions':\n+ pathData = PATH_INTERACTIONS;\n+ break;\n case 'profiler':\n pathData = PATH_PROFILER;\n break;\n+ case 'ranked-chart':\n+ pathData = PATH_RANKED_CHART;\n+ break;\n case 'search':\n pathData = PATH_SEARCH;\n break;\n@@ -46,14 +65,41 @@ export default function Icon({ className = '', type }: Props) {\n }\n \n const PATH_ARROW = 'M8 5v14l11-7z';\n+\n const PATH_ELEMENTS =\n 'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z';\n+\n+const PATH_FLAME_CHART = `\n+ M10.0650893,21.5040462 C7.14020814,20.6850349 5,18.0558698 5,14.9390244 C5,14.017627\n+ 5,9.81707317 7.83333333,7.37804878 C7.83333333,7.37804878 7.58333333,11.199187 10,\n+ 10.6300813 C11.125,10.326087 13.0062497,7.63043487 8.91666667,2.5 C14.1666667,3.06910569\n+ 19,9.32926829 19,14.9390244 C19,18.0558698 16.8597919,20.6850349 13.9349107,21.5040462\n+ C14.454014,21.0118505 14.7765152,20.3233394 14.7765152,19.5613412 C14.7765152,17.2826087\n+ 12,15.0875871 12,15.0875871 C12,15.0875871 9.22348485,17.2826087 9.22348485,19.5613412\n+ C9.22348485,20.3233394 9.54598603,21.0118505 10.0650893,21.5040462 Z M12.0833333,20.6514763\n+ C11.3814715,20.6514763 10.8125,20.1226027 10.8125,19.4702042 C10.8125,18.6069669\n+ 12.0833333,16.9347829 12.0833333,16.9347829 C12.0833333,16.9347829 13.3541667,18.6069669\n+ 13.3541667,19.4702042 C13.3541667,20.1226027 12.7851952,20.6514763 12.0833333,20.6514763 Z\n+`;\n+\n+const PATH_INTERACTIONS = `\n+ M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2\n+ 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55\n+ 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02\n+ 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55\n+ 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z\n+`;\n+\n const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';\n+\n const PATH_SEARCH = `\n M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91\n 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99\n 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\n `;\n+\n+const PATH_RANKED_CHART = 'M3 5h18v3H3zM3 10.5h13v3H3zM3 16h8v3H3z';\n+\n const PATH_SETTINGS = `\n M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12\n 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.css b\/src\/devtools\/views\/Profiler\/Profiler.css\nindex 440c241c03..e72ed4eb76 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.css\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.css\n@@ -2,11 +2,62 @@\n width: 100%;\n height: 100%;\n display: flex;\n- align-items: center;\n- justify-content: center;\n- border-top: 1px solid var(--color-border);\n+ flex-direction: column;\n font-family: var(--font-family-sans);\n font-size: var(--font-size-sans-normal);\n background-color: var(--color-background);\n color: var(--color-text-color);\n }\n+\n+.Content {\n+ flex: 1 1 auto;\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Column {\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Row {\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.Toolbar {\n+ padding: 0 0.5rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n+ border-top: 1px solid var(--color-border);\n+ color: var(--color-button);\n+}\n+\n+.VRule {\n+ height: 20px;\n+ width: 1px;\n+ background-color: var(--color-border);\n+ margin: 0 0.25rem;\n+}\n+\n+.Spacer {\n+ flex: 1;\n+}\n+\n+.StopRecordingButton {\n+ font-size: var(--font-size-sans-large);\n+ padding: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nindex bd89d54cbb..fff247ba7a 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -1,11 +1,89 @@\n \/\/ @flow\n \n-import React from 'react';\n+import React, { useContext, useState } from 'react';\n+import { ProfilerContext, ProfilerContextController } from '.\/ProfilerContext';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import TabBar from '..\/TabBar';\n+import RecordToggle from '.\/RecordToggle';\n \n import styles from '.\/Profiler.css';\n \n export type Props = {||};\n \n-export default function Profiler(_: Props) {\n- return Under development...<\/div>;\n+export default function ProfilerOuter(_: Props) {\n+ return (\n+ \n+ \n+ <\/ProfilerContextController>\n+ );\n }\n+\n+function ProfilerInner(_: Props) {\n+ const { hasProfilingData, isProfiling } = useContext(ProfilerContext);\n+ const [tab, setTab] = useState('flame-chart');\n+\n+ let view = null;\n+ if (isProfiling) {\n+ view = ;\n+ } else if (!hasProfilingData) {\n+ view = ;\n+ } else {\n+ \/\/ TODO (profiling) Differentiate between no data and no data for the current root\n+ \/\/ TODO (profiling) Show selected \"tab\" view\n+ view = Coming soon...<\/div>;\n+ }\n+\n+ return (\n+ \n+ \n+ \n+}}

dillon1000/react

Files changed