Skip to content

Commit d954340

Browse files
author
Brian Vaughn
authored
Scheduling profiler: UX tweaks (#21971)
1 parent 8723932 commit d954340

File tree

10 files changed

+75
-156
lines changed

10 files changed

+75
-156
lines changed

‎packages/react-devtools-scheduling-profiler/src/CanvasPage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -507,7 +507,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
507507
);
508508
}}
509509
</ContextMenu>
510-
{!isContextMenuShown && (
510+
{!isContextMenuShown && !surfaceRef.current.hasActiveView() && (
511511
<EventTooltip
512512
data={data}
513513
hoveredEvent={hoveredEvent}

‎packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import type {
1717
MouseMoveInteraction,
1818
Rect,
1919
Size,
20-
ViewRef,
20+
ViewRefs,
2121
} from '../view-base';
2222

2323
import {
@@ -246,11 +246,7 @@ class FlamechartStackLayerView extends View {
246246
/**
247247
* @private
248248
*/
249-
_handleMouseMove(
250-
interaction: MouseMoveInteraction,
251-
activeViewRef: ViewRef,
252-
hoveredViewRef: ViewRef,
253-
) {
249+
_handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
254250
const {_stackLayer, frame, _intrinsicSize, _onHover, visibleArea} = this;
255251
const {location} = interaction.payload;
256252
if (!_onHover || !rectContainsPoint(location, visibleArea)) {
@@ -270,7 +266,7 @@ class FlamechartStackLayerView extends View {
270266
const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
271267
if (x <= location.x && x + width >= location.x) {
272268
this.currentCursor = 'pointer';
273-
hoveredViewRef.current = this;
269+
viewRefs.hoveredView = this;
274270
_onHover(flamechartStackFrame);
275271
return;
276272
}
@@ -287,14 +283,10 @@ class FlamechartStackLayerView extends View {
287283

288284
_didGrab: boolean = false;
289285

290-
handleInteraction(
291-
interaction: Interaction,
292-
activeViewRef: ViewRef,
293-
hoveredViewRef: ViewRef,
294-
) {
286+
handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
295287
switch (interaction.type) {
296288
case 'mousemove':
297-
this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
289+
this._handleMouseMove(interaction, viewRefs);
298290
break;
299291
}
300292
}

‎packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import type {
1313
MouseMoveInteraction,
1414
Rect,
1515
Size,
16-
ViewRef,
16+
ViewRefs,
1717
} from '../view-base';
1818

1919
import {
@@ -255,11 +255,7 @@ export class NativeEventsView extends View {
255255
/**
256256
* @private
257257
*/
258-
_handleMouseMove(
259-
interaction: MouseMoveInteraction,
260-
activeViewRef: ViewRef,
261-
hoveredViewRef: ViewRef,
262-
) {
258+
_handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
263259
const {frame, _intrinsicSize, onHover, visibleArea} = this;
264260
if (!onHover) {
265261
return;
@@ -290,7 +286,7 @@ export class NativeEventsView extends View {
290286
) {
291287
this.currentCursor = 'pointer';
292288

293-
hoveredViewRef.current = this;
289+
viewRefs.hoveredView = this;
294290

295291
onHover(nativeEvent);
296292
return;
@@ -301,14 +297,10 @@ export class NativeEventsView extends View {
301297
onHover(null);
302298
}
303299

304-
handleInteraction(
305-
interaction: Interaction,
306-
activeViewRef: ViewRef,
307-
hoveredViewRef: ViewRef,
308-
) {
300+
handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
309301
switch (interaction.type) {
310302
case 'mousemove':
311-
this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
303+
this._handleMouseMove(interaction, viewRefs);
312304
break;
313305
}
314306
}

‎packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import type {
1313
MouseMoveInteraction,
1414
Rect,
1515
Size,
16-
ViewRef,
16+
ViewRefs,
1717
} from '../view-base';
1818

1919
import {
@@ -231,11 +231,7 @@ export class ReactEventsView extends View {
231231
/**
232232
* @private
233233
*/
234-
_handleMouseMove(
235-
interaction: MouseMoveInteraction,
236-
activeViewRef: ViewRef,
237-
hoveredViewRef: ViewRef,
238-
) {
234+
_handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
239235
const {frame, onHover, visibleArea} = this;
240236
if (!onHover) {
241237
return;
@@ -271,7 +267,7 @@ export class ReactEventsView extends View {
271267
hoverTimestamp <= timestamp + eventTimestampAllowance
272268
) {
273269
this.currentCursor = 'pointer';
274-
hoveredViewRef.current = this;
270+
viewRefs.hoveredView = this;
275271
onHover(event);
276272
return;
277273
}
@@ -280,14 +276,10 @@ export class ReactEventsView extends View {
280276
onHover(null);
281277
}
282278

283-
handleInteraction(
284-
interaction: Interaction,
285-
activeViewRef: ViewRef,
286-
hoveredViewRef: ViewRef,
287-
) {
279+
handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
288280
switch (interaction.type) {
289281
case 'mousemove':
290-
this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
282+
this._handleMouseMove(interaction, viewRefs);
291283
break;
292284
}
293285
}

‎packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import type {
1313
MouseMoveInteraction,
1414
Rect,
1515
Size,
16-
ViewRef,
16+
ViewRefs,
1717
} from '../view-base';
1818

1919
import {
@@ -256,11 +256,7 @@ export class ReactMeasuresView extends View {
256256
/**
257257
* @private
258258
*/
259-
_handleMouseMove(
260-
interaction: MouseMoveInteraction,
261-
activeViewRef: ViewRef,
262-
hoveredViewRef: ViewRef,
263-
) {
259+
_handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
264260
const {
265261
frame,
266262
_intrinsicSize,
@@ -311,7 +307,7 @@ export class ReactMeasuresView extends View {
311307
hoverTimestamp <= timestamp + duration
312308
) {
313309
this.currentCursor = 'pointer';
314-
hoveredViewRef.current = this;
310+
viewRefs.hoveredView = this;
315311
onHover(measure);
316312
return;
317313
}
@@ -320,14 +316,10 @@ export class ReactMeasuresView extends View {
320316
onHover(null);
321317
}
322318

323-
handleInteraction(
324-
interaction: Interaction,
325-
activeViewRef: ViewRef,
326-
hoveredViewRef: ViewRef,
327-
) {
319+
handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
328320
switch (interaction.type) {
329321
case 'mousemove':
330-
this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
322+
this._handleMouseMove(interaction, viewRefs);
331323
break;
332324
}
333325
}

‎packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import type {
1313
MouseMoveInteraction,
1414
Rect,
1515
Size,
16-
ViewRef,
16+
ViewRefs,
1717
} from '../view-base';
1818

1919
import {
@@ -191,11 +191,7 @@ export class UserTimingMarksView extends View {
191191
/**
192192
* @private
193193
*/
194-
_handleMouseMove(
195-
interaction: MouseMoveInteraction,
196-
activeViewRef: ViewRef,
197-
hoveredViewRef: ViewRef,
198-
) {
194+
_handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
199195
const {frame, onHover, visibleArea} = this;
200196
if (!onHover) {
201197
return;
@@ -229,7 +225,7 @@ export class UserTimingMarksView extends View {
229225
hoverTimestamp <= timestamp + markTimestampAllowance
230226
) {
231227
this.currentCursor = 'pointer';
232-
hoveredViewRef.current = this;
228+
viewRefs.hoveredView = this;
233229
onHover(mark);
234230
return;
235231
}
@@ -238,14 +234,10 @@ export class UserTimingMarksView extends View {
238234
onHover(null);
239235
}
240236

241-
handleInteraction(
242-
interaction: Interaction,
243-
activeViewRef: ViewRef,
244-
hoveredViewRef: ViewRef,
245-
) {
237+
handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
246238
switch (interaction.type) {
247239
case 'mousemove':
248-
this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
240+
this._handleMouseMove(interaction, viewRefs);
249241
break;
250242
}
251243
}

‎packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type {
1919
} from './useCanvasInteraction';
2020
import type {Rect} from './geometry';
2121
import type {ScrollState} from './utils/scrollState';
22-
import type {ViewRef} from './Surface';
22+
import type {ViewRefs} from './Surface';
2323

2424
import {Surface} from './Surface';
2525
import {View} from './View';
@@ -156,34 +156,26 @@ export class HorizontalPanAndZoomView extends View {
156156
this._setScrollState(newState);
157157
}
158158

159-
_handleMouseDown(
160-
interaction: MouseDownInteraction,
161-
activeViewRef: ViewRef,
162-
hoveredViewRef: ViewRef,
163-
) {
159+
_handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {
164160
if (rectContainsPoint(interaction.payload.location, this.frame)) {
165161
this._isPanning = true;
166162

167-
activeViewRef.current = this;
163+
viewRefs.activeView = this;
168164

169165
this.currentCursor = 'grabbing';
170166
}
171167
}
172168

173-
_handleMouseMove(
174-
interaction: MouseMoveInteraction,
175-
activeViewRef: ViewRef,
176-
hoveredViewRef: ViewRef,
177-
) {
169+
_handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
178170
const isHovered = rectContainsPoint(
179171
interaction.payload.location,
180172
this.frame,
181173
);
182174
if (isHovered) {
183-
hoveredViewRef.current = this;
175+
viewRefs.hoveredView = this;
184176
}
185177

186-
if (activeViewRef.current === this) {
178+
if (viewRefs.activeView === this) {
187179
this.currentCursor = 'grabbing';
188180
} else if (isHovered) {
189181
this.currentCursor = 'grab';
@@ -200,17 +192,13 @@ export class HorizontalPanAndZoomView extends View {
200192
this._setStateAndInformCallbacksIfChanged(newState);
201193
}
202194

203-
_handleMouseUp(
204-
interaction: MouseUpInteraction,
205-
activeViewRef: ViewRef,
206-
hoveredViewRef: ViewRef,
207-
) {
195+
_handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {
208196
if (this._isPanning) {
209197
this._isPanning = false;
210198
}
211199

212-
if (activeViewRef.current === this) {
213-
activeViewRef.current = null;
200+
if (viewRefs.activeView === this) {
201+
viewRefs.activeView = null;
214202
}
215203
}
216204

@@ -273,20 +261,16 @@ export class HorizontalPanAndZoomView extends View {
273261
this._setStateAndInformCallbacksIfChanged(newState);
274262
}
275263

276-
handleInteraction(
277-
interaction: Interaction,
278-
activeViewRef: ViewRef,
279-
hoveredViewRef: ViewRef,
280-
) {
264+
handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
281265
switch (interaction.type) {
282266
case 'mousedown':
283-
this._handleMouseDown(interaction, activeViewRef, hoveredViewRef);
267+
this._handleMouseDown(interaction, viewRefs);
284268
break;
285269
case 'mousemove':
286-
this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
270+
this._handleMouseMove(interaction, viewRefs);
287271
break;
288272
case 'mouseup':
289-
this._handleMouseUp(interaction, activeViewRef, hoveredViewRef);
273+
this._handleMouseUp(interaction, viewRefs);
290274
break;
291275
case 'wheel-plain':
292276
this._handleWheelPlain(interaction);

0 commit comments

Comments
 (0)