Scheduling Profiler: Inline snapshots (#22091)
Brian Vaughn committed
Aug 14, 2021 at 11:10 UTC
89910635f7832382a9431615855cedfd2ba70396
4 files changed
+32
-15
packages/react-devtools-scheduling-profiler/src/EventTooltip.css
+4
-1
@@ -11,7 +11,6 @@
11
user-select: none;
12
pointer-events: none;
13
background-color: var(--color-tooltip-background);
14
- border: 1px solid var(border);
14
box-shadow: 1px 1px 2px var(--color-shadow);
15
color: var(--color-tooltip-text);
16
font-size: 11px;
@@ -72,4 +71,8 @@
71
.InfoText,
72
.WarningText {
73
color: var(--color-warning-text-color);
74
+}
75
+
76
+.Image {
77
+ border: 1px solid var(--color-border);
78
}
\ No newline at end of file
packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+1
@@ -315,6 +315,7 @@ const TooltipSnapshot = ({
315
return (
316
<div className={styles.Tooltip} ref={tooltipRef}>
317
<img
318
+ className={styles.Image}
319
src={snapshot.imageSource}
320
style={{width: snapshot.width / 2, height: snapshot.height / 2}}
321
/>
packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
+26
-13
@@ -10,7 +10,7 @@
10
import type {Snapshot, ReactProfilerData} from '../types';
11
import type {
12
Interaction,
13
- MouseMoveInteraction,
13
+ Point,
14
Rect,
15
Size,
16
Surface,
@@ -67,6 +67,10 @@ export class SnapshotsView extends View {
67
// draw them at fixed intervals and just show the nearest one.
68
while (x < visibleArea.origin.x + visibleArea.size.width) {
69
const snapshot = this._findClosestSnapshot(x);
70
+ if (snapshot === null) {
71
+ // This shold never happen.
72
+ break;
73
+ }
74
75
const scaledHeight = SNAPSHOT_HEIGHT;
76
const scaledWidth = (snapshot.width * SNAPSHOT_HEIGHT) / snapshot.height;
@@ -97,7 +101,11 @@ export class SnapshotsView extends View {
101
handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
102
switch (interaction.type) {
103
case 'mousemove':
100
- this._handleMouseMove(interaction, viewRefs);
104
+ case 'wheel-control':
105
+ case 'wheel-meta':
106
+ case 'wheel-plain':
107
+ case 'wheel-shift':
108
+ this._updateHover(interaction.payload.location, viewRefs);
109
break;
110
}
111
}
@@ -125,6 +133,14 @@ export class SnapshotsView extends View {
133
context.clip();
134
}
135
136
+ context.fillStyle = COLORS.REACT_RESIZE_BAR_BORDER;
137
+ context.fillRect(
138
+ imageRect.origin.x,
139
+ imageRect.origin.y,
140
+ imageRect.size.width,
141
+ imageRect.size.height,
142
+ );
143
+
144
// $FlowFixMe Flow doesn't know about the 9 argument variant of drawImage()
145
context.drawImage(
146
snapshot.image,
@@ -138,12 +154,12 @@ export class SnapshotsView extends View {
154
snapshot.height,
155
156
// Canvas coordinates
141
- imageRect.origin.x,
142
- imageRect.origin.y,
157
+ imageRect.origin.x + BORDER_SIZE,
158
+ imageRect.origin.y + BORDER_SIZE,
159
160
// Scaled image size
145
- imageRect.size.width,
146
- imageRect.size.height,
161
+ imageRect.size.width - BORDER_SIZE * 2,
162
+ imageRect.size.height - BORDER_SIZE * 2,
163
);
164
165
if (shouldClip) {
@@ -151,7 +167,7 @@ export class SnapshotsView extends View {
167
}
168
}
169
154
- _findClosestSnapshot(x: number): Snapshot {
170
+ _findClosestSnapshot(x: number): Snapshot | null {
171
const frame = this.frame;
172
const scaleFactor = positioningScaleFactor(
173
this._intrinsicSize.width,
@@ -178,28 +194,25 @@ export class SnapshotsView extends View {
194
}
195
}
196
181
- return snapshots[stopIndex];
197
+ return snapshots[stopIndex] || null;
198
}
199
200
/**
201
* @private
202
*/
187
- _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
203
+ _updateHover(location: Point, viewRefs: ViewRefs) {
204
const {onHover, visibleArea} = this;
205
if (!onHover) {
206
return;
207
}
208
193
- const {location} = interaction.payload;
209
if (!rectContainsPoint(location, visibleArea)) {
210
onHover(null);
211
return;
212
}
213
214
const snapshot = this._findClosestSnapshot(location.x);
200
- if (snapshot) {
201
- this.currentCursor = 'context-menu';
202
- viewRefs.hoveredView = this;
215
+ if (snapshot !== null) {
216
onHover(snapshot);
217
} else {
218
onHover(null);
packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+1
-1
@@ -23,7 +23,7 @@ export const REACT_MEASURE_HEIGHT = 14;
23
export const BORDER_SIZE = 1;
24
export const FLAMECHART_FRAME_HEIGHT = 14;
25
export const TEXT_PADDING = 3;
26
-export const SNAPSHOT_HEIGHT = 50;
26
+export const SNAPSHOT_HEIGHT = 35;
27
28
export const INTERVAL_TIMES = [
29
1,