Profiler tooltip tweaks (#18082)
* Moved Profiler views into Profiler folder * Tweaked Profiler tooltip CSS styles * Tweaked Tooltip positioning code
Brian Vaughn committed
Feb 19, 2020 at 10:58 UTC
7e770dae93e1a934b905d8678c7ce368ed86ef0b
9 files changed
+35
-44
packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+1
-1
@@ -23,7 +23,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
23
import {scale} from './utils';
24
import {StoreContext} from '../context';
25
import {SettingsContext} from '../Settings/SettingsContext';
26
-import Tooltip from '../Components/Tooltip';
26
+import Tooltip from './Tooltip';
27
28
import styles from './CommitFlamegraph.css';
29
packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+1
-1
@@ -17,7 +17,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
17
import {scale} from './utils';
18
import {StoreContext} from '../context';
19
import {SettingsContext} from '../Settings/SettingsContext';
20
-import Tooltip from '../Components/Tooltip';
20
+import Tooltip from './Tooltip';
21
22
import styles from './CommitRanked.css';
23
packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
+3
-5
@@ -1,6 +1,6 @@
1
.Toolbar {
2
- height: 2.25rem;
3
- padding: 0 0.5rem;
2
+ padding: 0.25rem 0;
3
+ margin-bottom: 0.25rem;
4
flex: 0 0 auto;
5
display: flex;
6
align-items: center;
@@ -8,7 +8,6 @@
8
}
9
10
.Content {
11
- padding: 0.5rem;
11
user-select: none;
12
overflow-y: auto;
13
}
@@ -25,14 +24,13 @@
24
25
.Label {
26
font-weight: bold;
28
- margin-bottom: 0.5rem;
27
}
28
29
.CurrentCommit {
30
+ margin-top: 0.25rem;
31
display: block;
32
width: 100%;
33
text-align: left;
34
background: none;
35
border: none;
37
- padding: 0.25rem 0.5rem;
36
}
packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
+2
-2
@@ -10,7 +10,7 @@
10
import React, {Fragment, useContext} from 'react';
11
import {ProfilerContext} from './ProfilerContext';
12
import {formatDuration, formatTime} from './utils';
13
-import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
13
+import WhatChanged from './WhatChanged';
14
import {StoreContext} from '../context';
15
16
import styles from './HoveredFiberInfo.css';
@@ -67,7 +67,7 @@ export default function HoveredFiberInfo({fiberData}: Props) {
67
<div className={styles.Component}>{name}</div>
68
</div>
69
<div className={styles.Content}>
70
- <ProfilerWhatChanged fiberID={((id: any): number)} />
70
+ <WhatChanged fiberID={((id: any): number)} />
71
{renderDurationInfo || (
72
<div>Did not render during this profiling session.</div>
73
)}
packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+2
-2
@@ -8,7 +8,7 @@
8
*/
9
10
import React, {Fragment, useContext} from 'react';
11
-import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
11
+import WhatChanged from './WhatChanged';
12
import {ProfilerContext} from './ProfilerContext';
13
import {formatDuration, formatTime} from './utils';
14
import {StoreContext} from '../context';
@@ -75,7 +75,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
75
</Button>
76
</div>
77
<div className={styles.Content}>
78
- <ProfilerWhatChanged fiberID={((selectedFiberID: any): number)} />
78
+ <WhatChanged fiberID={((selectedFiberID: any): number)} />
79
{listItems.length > 0 && (
80
<Fragment>
81
<label className={styles.Label}>Rendered at</label>: {listItems}
packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css
renamed
packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
renamed
+22
-26
@@ -43,46 +43,32 @@ export default function Tooltip({children, label}: any) {
43
);
44
}
45
46
+const TOOLTIP_OFFSET = 5;
47
+
48
// Method used to find the position of the tooltip based on current mouse position
49
function getTooltipPosition(element, mousePosition) {
50
const {height, mouseX, mouseY, width} = mousePosition;
49
- const TOOLTIP_OFFSET_X = 5;
50
- const TOOLTIP_OFFSET_Y = 15;
51
let top = 0;
52
let left = 0;
53
54
- // Let's check the vertical position.
55
- if (mouseY + TOOLTIP_OFFSET_Y + element.offsetHeight >= height) {
56
- // The tooltip doesn't fit below the mouse cursor (which is our
57
- // default strategy). Therefore we try to position it either above the
58
- // mouse cursor or finally aligned with the window's top edge.
59
- if (mouseY - TOOLTIP_OFFSET_Y - element.offsetHeight > 0) {
60
- // We position the tooltip above the mouse cursor if it fits there.
61
- top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET_Y}px`;
54
+ if (mouseY + TOOLTIP_OFFSET + element.offsetHeight >= height) {
55
+ if (mouseY - TOOLTIP_OFFSET - element.offsetHeight > 0) {
56
+ top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET}px`;
57
} else {
63
- // Otherwise we align the tooltip with the window's top edge.
58
top = '0px';
59
}
60
} else {
67
- top = `${mouseY + TOOLTIP_OFFSET_Y}px`;
61
+ top = `${mouseY + TOOLTIP_OFFSET}px`;
62
}
63
70
- // Now let's check the horizontal position.
71
- if (mouseX + TOOLTIP_OFFSET_X + element.offsetWidth >= width) {
72
- // The tooltip doesn't fit at the right of the mouse cursor (which is
73
- // our default strategy). Therefore we try to position it either at the
74
- // left of the mouse cursor or finally aligned with the window's left
75
- // edge.
76
- if (mouseX - TOOLTIP_OFFSET_X - element.offsetWidth > 0) {
77
- // We position the tooltip at the left of the mouse cursor if it fits
78
- // there.
79
- left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET_X}px`;
64
+ if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= width) {
65
+ if (mouseX - TOOLTIP_OFFSET - element.offsetWidth > 0) {
66
+ left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET}px`;
67
} else {
81
- // Otherwise, align the tooltip with the window's left edge.
68
left = '0px';
69
}
70
} else {
85
- left = `${mouseX + TOOLTIP_OFFSET_X * 2}px`;
71
+ left = `${mouseX + TOOLTIP_OFFSET * 2}px`;
72
}
73
74
return {left, top};
@@ -94,9 +80,19 @@ function getMousePosition(
80
mouseEvent: SyntheticMouseEvent<*>,
81
) {
82
if (relativeContainer !== null) {
97
- const {height, top, width} = relativeContainer.getBoundingClientRect();
83
+ // Positon within the nearest position:relative container.
84
+ let targetContainer = relativeContainer;
85
+ while (targetContainer.parentElement != null) {
86
+ if (targetContainer.style.position === 'relative') {
87
+ break;
88
+ } else {
89
+ targetContainer = targetContainer.parentElement;
90
+ }
91
+ }
92
+
93
+ const {height, left, top, width} = targetContainer.getBoundingClientRect();
94
99
- const mouseX = mouseEvent.clientX;
95
+ const mouseX = mouseEvent.clientX - left;
96
const mouseY = mouseEvent.clientY - top;
97
98
return {height, mouseX, mouseY, width};
packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css
renamed
+1
-2
@@ -1,5 +1,5 @@
1
.Component {
2
- margin-bottom: 1rem;
2
+ margin-bottom: 0.5rem;
3
}
4
5
.Item {
@@ -26,5 +26,4 @@
26
27
.Label {
28
font-weight: bold;
29
- margin-bottom: 0.5rem;
29
}
packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
renamed
+3
-5
@@ -11,15 +11,13 @@ import React, {useContext} from 'react';
11
import {ProfilerContext} from '../Profiler/ProfilerContext';
12
import {StoreContext} from '../context';
13
14
-import styles from './ProfilerWhatChanged.css';
14
+import styles from './WhatChanged.css';
15
16
-type ProfilerWhatChangedProps = {|
16
+type Props = {|
17
fiberID: number,
18
|};
19
20
-export default function ProfilerWhatChanged({
21
- fiberID,
22
-}: ProfilerWhatChangedProps) {
20
+export default function WhatChanged({fiberID}: Props) {
21
const {profilerStore} = useContext(StoreContext);
22
const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
23