Merge pull request #187 from preactjs/profiler-refactor2

Author: marvinhagemeister

package.json

@@ -29,6 +29,7 @@
 	"devDependencies": {
 		"@babel/core": "^7.9.0",
 		"@babel/plugin-transform-react-jsx": "^7.9.4",
+		"@rollup/plugin-alias": "^3.1.0",
 		"@rollup/plugin-replace": "^2.3.2",
 		"@testing-library/preact": "^1.0.2",
 		"@types/archiver": "^3.1.0",

rollup.config.js

@@ -5,6 +5,7 @@ import resolve from "rollup-plugin-node-resolve";
 import postcss from "rollup-plugin-postcss";
 import commonjs from "rollup-plugin-commonjs";
 import replace from "@rollup/plugin-replace";
+import alias from "@rollup/plugin-alias";
 import path from "path";
 
 const BROWSERS = ["chrome", "edge", "firefox", "inline"].filter(x => {
@@ -112,6 +113,16 @@ export default entries.map(data => ({
 				return comment + code;
 			},
 		},
+		process.env.DEBUG === "true" &&
+			alias({
+				entries: [
+					{
+						find: "preact/hooks",
+						replacement: "./node_modules/preact/hooks/src/index.js",
+					},
+					{ find: "preact", replacement: "./node_modules/preact/src/index.js" },
+				],
+			}),
 		resolve(),
 		commonjs(),
 		replace({

src/adapter/events/operations.ts

@@ -55,9 +55,14 @@ export function ops2Tree(oldTree: Tree, ops: number[]) {
 				const id = ops[i + 1];
 				if (!pending.has(id)) {
 					const node = oldTree.get(id)!;
-					pending.set(id, deepClone(node));
+					try {
+						pending.set(id, deepClone(node));
+					} catch (err) {
+						// eslint-disable-next-line no-console
+						console.error(`Missing node ${id} detected.`);
+						throw err;
+					}
 				}
-
 				const x = pending.get(id)!;
 				x.startTime = ops[i + 2] / 1000;
 				x.endTime = ops[i + 3] / 1000;

src/shells/shared/panel/panel.ts

@@ -35,6 +35,10 @@ async function initDevtools() {
 	store.theme.on(v => storeTheme(v));
 	store.profiler.captureRenderReasons.on(v => storeCaptureRenderReasons(v));
 
+	if (process.env.DEBUG) {
+		(window as any).store = store;
+	}
+
 	// Render our application
 	const root = window.document.getElementById("root")!;
 	render(h(DevTools, { store, window }), root);
@@ -52,14 +56,13 @@ port.onDisconnect.addListener(() => {
 
 // Subscribe to messages from content script
 port.onMessage.addListener(async message => {
-	debug("> message", message);
-
 	if (!initialized) {
 		debug("initialize devtools panel");
 		await initDevtools();
 	}
 
 	if (message.type === "init") {
+		debug("> message", message);
 		port.postMessage({
 			type: "init",
 			tabId: chrome.devtools.inspectedWindow.tabId,

src/view/components/profiler/components/CommitTimeline/CommitTimeline.tsx

@@ -91,32 +91,30 @@ export function CommitTimeline(props: CommitTimelineProps) {
 	const paneContainerRef = useRef<HTMLDivElement>();
 
 	useEffect(() => {
-		const sizes = calcSize(
-			container,
-			inner,
-			pane,
-			paneContainerRef,
-			items.length,
-			selected,
-		);
-		setPaneWidth(sizes.pane);
-		setViewportWidth(sizes.viewport);
-		setOffset(sizes.offset);
-	}, [pane, inner, pane, paneContainerRef, items.length, selected]);
-
-	useResize(() => {
-		const sizes = calcSize(
-			container,
-			inner,
-			pane,
-			paneContainerRef,
-			items.length,
-			selected,
-		);
-		setPaneWidth(sizes.pane);
-		setViewportWidth(sizes.viewport);
-		setOffset(sizes.offset);
-	}, [pane, container, paneContainerRef, inner, items.length, selected]);
+		if (pane.current) {
+			const active = pane.current.querySelector("[data-selected]");
+			// JSDOM doesn't support scrollIntoView
+			if (active && active.scrollIntoView) active.scrollIntoView();
+		}
+	}, [selected]);
+
+	useResize(
+		() => {
+			const sizes = calcSize(
+				container,
+				inner,
+				pane,
+				paneContainerRef,
+				items.length,
+				selected,
+			);
+			setPaneWidth(sizes.pane);
+			setViewportWidth(sizes.viewport);
+			setOffset(sizes.offset);
+		},
+		[pane, container, paneContainerRef, inner, items.length, selected],
+		true,
+	);
 
 	const onPrev = useCallback(() => {
 		const next = selected - 1;

src/view/components/profiler/components/RenderedAt/RenderedAt.tsx

@@ -3,30 +3,28 @@ import { useStore, useObserver } from "../../../../store/react-bindings";
 import { SidebarPanel, Empty } from "../../../sidebar/SidebarPanel";
 import s from "./RenderedAt.css";
 import { formatTime } from "../../util";
-import { mapParents } from "../../flamegraph/transform/util";
 
 export function RenderedAt() {
 	const store = useStore();
 	const data = useObserver(() => {
 		const id = store.profiler.selectedNodeId.$;
 
-		return store.profiler.commits.$.filter(x => x.nodes.has(id))
-			.filter(x => {
-				if (id === x.commitRootId) return true;
-				let keep = false;
-				mapParents(x.nodes, id, node => {
-					if (node.id === x.commitRootId) keep = true;
-				});
-				return keep;
-			})
-			.map((commit, commitIdx) => {
-				const node = commit.nodes.get(id)!;
-				return {
-					id: commitIdx,
-					startTime: node.startTime,
-					selfDuration: node.selfDuration,
-				};
-			});
+		return store.profiler.commits.$.filter(x => {
+			if (x.nodes.has(id)) {
+				const node = x.nodes.get(id)!;
+				const root = x.nodes.get(x.commitRootId)!;
+				return node.startTime >= root.startTime && node.endTime <= root.endTime;
+			}
+
+			return false;
+		}).map(commit => {
+			const node = commit.nodes.get(id)!;
+			return {
+				index: store.profiler.commits.$.findIndex(x => x === commit),
+				startTime: node.startTime,
+				selfDuration: node.selfDuration,
+			};
+		});
 	});
 
 	const commitIdx = useObserver(() => store.profiler.activeCommitIdx.$);
@@ -38,14 +36,14 @@ export function RenderedAt() {
 			{data.length <= 0 ? (
 				<Empty>Did not render during this profiling session</Empty>
 			) : (
-				<nav>
+				<nav data-testid="rendered-at">
 					{data.map(node => {
 						return (
 							<button
-								key={node.id}
+								key={node.index}
 								class={s.item}
-								data-active={commitIdx === node.id}
-								onClick={() => (store.profiler.activeCommitIdx.$ = node.id)}
+								data-active={commitIdx === node.index}
+								onClick={() => (store.profiler.activeCommitIdx.$ = node.index)}
 							>
 								<span>
 									{formatTime(node.startTime)} for{" "}

src/view/components/profiler/components/TimelineBar/TimelineBar.tsx

@@ -21,7 +21,13 @@ export function TimelineBar() {
 
 	const onCommitChange = useCallback(
 		(n: number) => {
-			store.profiler.activeCommitIdx.$ = n;
+			const { activeCommitIdx, selectedNodeId, activeCommit } = store.profiler;
+
+			activeCommitIdx.$ = n;
+
+			if (activeCommit.$ && !activeCommit.$.nodes.has(selectedNodeId.$)) {
+				selectedNodeId.$ = activeCommit.$.rootId;
+			}
 		},
 		[store],
 	);

src/view/components/profiler/data/commits.ts

@@ -6,6 +6,7 @@ import {
 	RenderReasonMap,
 	RenderReasonData,
 } from "../../../../adapter/10/renderer/renderReasons";
+import { flattenNodeTree } from "../flamegraph/placeNodes";
 
 export interface ProfilerNode extends DevNode {
 	selfDuration: number;
@@ -164,7 +165,7 @@ export function resetProfiler(state: ProfilerState) {
 export function recordProfilerCommit(
 	tree: Map<ID, DevNode>,
 	profiler: ProfilerState,
-	rootId: number,
+	commitRootId: number,
 ) {
 	const nodes = new Map<ID, ProfilerNode>();
 
@@ -174,8 +175,13 @@ export function recordProfilerCommit(
 	// The time of the node that took the longest to render
 	let maxSelfDuration = 0;
 
+	const rootId = getRoot(tree, commitRootId);
+	const items = new Set(flattenNodeTree(tree, rootId).map(x => x.id));
+
 	// Make shallow copies of each node
 	tree.forEach((node, id) => {
+		if (!items.has(id)) return;
+
 		nodes.set(id, {
 			// deep clone
 			...JSON.parse(JSON.stringify(node)),
@@ -216,15 +222,15 @@ export function recordProfilerCommit(
 
 	// Total commit duration
 	let duration = 0;
-	const root = nodes.get(rootId);
+	const root = nodes.get(commitRootId);
 	if (root) {
 		duration = root.treeEndTime - root.treeStartTime;
 	}
 
 	profiler.commits.update(arr => {
 		arr.push({
-			rootId: getRoot(tree, rootId),
-			commitRootId: rootId,
+			rootId: getRoot(tree, commitRootId),
+			commitRootId: commitRootId,
 			nodes,
 			maxDepth,
 			maxSelfDuration,

src/view/components/profiler/data/gradient.ts

@@ -10,5 +10,5 @@ export function getGradient(max: number, n: number) {
 		}
 	}
 
-	return i;
+	return Math.max(i, 0);
 }

src/view/components/profiler/flamegraph/FlameGraph.css

@@ -2,23 +2,29 @@
 	width: 100%;
 	max-width: 100%;
 	height: 100%;
-	overflow: hidden;
 	position: relative;
+	overflow-x: hidden;
 }
 
 .node {
 	position: absolute;
 	cursor: pointer;
 	color: black;
 	font-size: 0.8rem;
-	padding: 0 0.2rem;
+	padding: 0;
 	height: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
 	transition-property: all;
 	transition-duration: 0.3s;
 	padding-bottom: 1px;
+	display: flex;
+	align-items: center;
+}
+
+.text {
+	padding: 0 0.2rem;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
 .node::after {
@@ -36,24 +42,40 @@
 	display: none;
 }
 
-.node[data-weight="-1"]:not([data-overflow]) {
+.node[data-visible] {
+	transition-property: all;
+}
+.node:not([data-visible]) {
+	transition-property: opacity;
+	transition-duration: 0.2s;
+	opacity: 0;
+	pointer-events: none;
+}
+.node[data-visible]:not([data-maximized]) {
+	opacity: 1;
+}
+
+.node[data-weight="-2"]:not([data-overflow]) {
 	color: var(--color-bystander-text);
 }
-.node[data-weight="-1"]::after {
+.node[data-weight="-2"]::after {
 	/* inline-pattern */
 	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0IDQiPgo8ZGVmcz4KICA8cGF0dGVybgogICAgaWQ9ImRpYWdvbmFsLWhhdGNoIgogICAgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgIHdpZHRoPSI0IgogICAgaGVpZ2h0PSI0IgogID4KICAgIDxwYXRoCiAgICAgIGQ9Ik0tMSwxIGwyLC0yCk0wLDQgbDQsLTQKTTMsNSBsMiwtMiIKc3Ryb2tlPSIjZGVkZWRlIgpzdHJva2Utd2lkdGg9IjEiCiAgICAvPgogIDwvcGF0dGVybj4KICA8L2RlZnM+CiAgPHJlY3QKICAgIHg9IjAiCiAgICB5PSIwIgogICAgd2lkdGg9IjQiCiAgICBoZWlnaHQ9IjQiCiAgICBmaWxsPSJ1cmwoI2RpYWdvbmFsLWhhdGNoKSIKICA+PC9yZWN0Pgo8L3N2Zz4=");
 	background-repeat: repeat;
 	background-color: transparent;
 	background-size: 0.25rem 0.25rem;
 }
-:global(.dark) .node[data-weight="-1"]::after {
+:global(.dark) .node[data-weight="-2"]::after {
 	opacity: 0.5;
 }
 
 .node[data-maximized]:not([data-selected]) {
 	opacity: 0.5;
 }
 
+.node[data-weight="-1"]::after {
+	background: var(--color-profiler-old);
+}
 .node[data-weight="0"]::after {
 	background: var(--color-profiler-gradient-0);
 }