Skip to content

Commit

Permalink
Scheduling Profiler: Inline snapshots
Browse files Browse the repository at this point in the history
Iterated a little bit on the snapshot UI to add borders and improve the UX when scrolling (so the hovered tooltip image now updates)
  • Loading branch information
Brian Vaughn committed Aug 13, 2021
1 parent 54e170c commit 2da148c
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
user-select: none;
pointer-events: none;
background-color: var(--color-tooltip-background);
border: 1px solid var(border);
box-shadow: 1px 1px 2px var(--color-shadow);
color: var(--color-tooltip-text);
font-size: 11px;
Expand Down Expand Up @@ -72,4 +71,8 @@
.InfoText,
.WarningText {
color: var(--color-warning-text-color);
}

.Image {
border: 1px solid var(--color-border);
}
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,7 @@ const TooltipSnapshot = ({
return (
<div className={styles.Tooltip} ref={tooltipRef}>
<img
className={styles.Image}
src={snapshot.imageSource}
style={{width: snapshot.width / 2, height: snapshot.height / 2}}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import type {Snapshot, ReactProfilerData} from '../types';
import type {
Interaction,
MouseMoveInteraction,
Point,
Rect,
Size,
Surface,
Expand Down Expand Up @@ -67,6 +67,10 @@ export class SnapshotsView extends View {
// draw them at fixed intervals and just show the nearest one.
while (x < visibleArea.origin.x + visibleArea.size.width) {
const snapshot = this._findClosestSnapshot(x);
if (snapshot === null) {
// This shold never happen.
break;
}

const scaledHeight = SNAPSHOT_HEIGHT;
const scaledWidth = (snapshot.width * SNAPSHOT_HEIGHT) / snapshot.height;
Expand Down Expand Up @@ -97,7 +101,11 @@ export class SnapshotsView extends View {
handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
switch (interaction.type) {
case 'mousemove':
this._handleMouseMove(interaction, viewRefs);
case 'wheel-control':
case 'wheel-meta':
case 'wheel-plain':
case 'wheel-shift':
this._updateHover(interaction.payload.location, viewRefs);
break;
}
}
Expand Down Expand Up @@ -125,6 +133,14 @@ export class SnapshotsView extends View {
context.clip();
}

context.fillStyle = COLORS.REACT_RESIZE_BAR_BORDER;
context.fillRect(
imageRect.origin.x,
imageRect.origin.y,
imageRect.size.width,
imageRect.size.height,
);

// $FlowFixMe Flow doesn't know about the 9 argument variant of drawImage()
context.drawImage(
snapshot.image,
Expand All @@ -138,20 +154,20 @@ export class SnapshotsView extends View {
snapshot.height,

// Canvas coordinates
imageRect.origin.x,
imageRect.origin.y,
imageRect.origin.x + BORDER_SIZE,
imageRect.origin.y + BORDER_SIZE,

// Scaled image size
imageRect.size.width,
imageRect.size.height,
imageRect.size.width - BORDER_SIZE * 2,
imageRect.size.height - BORDER_SIZE * 2,
);

if (shouldClip) {
context.restore();
}
}

_findClosestSnapshot(x: number): Snapshot {
_findClosestSnapshot(x: number): Snapshot | null {
const frame = this.frame;
const scaleFactor = positioningScaleFactor(
this._intrinsicSize.width,
Expand All @@ -178,26 +194,25 @@ export class SnapshotsView extends View {
}
}

return snapshots[stopIndex];
return snapshots[stopIndex] || null;
}

/**
* @private
*/
_handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
_updateHover(location: Point, viewRefs: ViewRefs) {
const {onHover, visibleArea} = this;
if (!onHover) {
return;
}

const {location} = interaction.payload;
if (!rectContainsPoint(location, visibleArea)) {
onHover(null);
return;
}

const snapshot = this._findClosestSnapshot(location.x);
if (snapshot) {
if (snapshot !== null) {
this.currentCursor = 'context-menu';
viewRefs.hoveredView = this;
onHover(snapshot);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const REACT_MEASURE_HEIGHT = 14;
export const BORDER_SIZE = 1;
export const FLAMECHART_FRAME_HEIGHT = 14;
export const TEXT_PADDING = 3;
export const SNAPSHOT_HEIGHT = 50;
export const SNAPSHOT_HEIGHT = 35;

export const INTERVAL_TIMES = [
1,
Expand Down

0 comments on commit 2da148c

Please sign in to comment.