Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Profiler tooltip tweaks #18082

Merged
merged 3 commits into from Feb 19, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Expand Up @@ -23,7 +23,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
import {scale} from './utils';
import {StoreContext} from '../context';
import {SettingsContext} from '../Settings/SettingsContext';
import Tooltip from '../Components/Tooltip';
import Tooltip from './Tooltip';

import styles from './CommitFlamegraph.css';

Expand Down
Expand Up @@ -17,7 +17,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
import {scale} from './utils';
import {StoreContext} from '../context';
import {SettingsContext} from '../Settings/SettingsContext';
import Tooltip from '../Components/Tooltip';
import Tooltip from './Tooltip';

import styles from './CommitRanked.css';

Expand Down
@@ -1,14 +1,13 @@
.Toolbar {
height: 2.25rem;
padding: 0 0.5rem;
padding: 0.25rem 0;
margin-bottom: 0.25rem;
flex: 0 0 auto;
display: flex;
align-items: center;
border-bottom: 1px solid var(--color-border);
}

.Content {
padding: 0.5rem;
user-select: none;
overflow-y: auto;
}
Expand All @@ -25,14 +24,13 @@

.Label {
font-weight: bold;
margin-bottom: 0.5rem;
}

.CurrentCommit {
margin-top: 0.25rem;
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.25rem 0.5rem;
}
Expand Up @@ -10,7 +10,7 @@
import React, {Fragment, useContext} from 'react';
import {ProfilerContext} from './ProfilerContext';
import {formatDuration, formatTime} from './utils';
import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
import WhatChanged from './WhatChanged';
import {StoreContext} from '../context';

import styles from './HoveredFiberInfo.css';
Expand Down Expand Up @@ -67,7 +67,7 @@ export default function HoveredFiberInfo({fiberData}: Props) {
<div className={styles.Component}>{name}</div>
</div>
<div className={styles.Content}>
<ProfilerWhatChanged fiberID={((id: any): number)} />
<WhatChanged fiberID={((id: any): number)} />
{renderDurationInfo || (
<div>Did not render during this profiling session.</div>
)}
Expand Down
Expand Up @@ -8,7 +8,7 @@
*/

import React, {Fragment, useContext} from 'react';
import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
import WhatChanged from './WhatChanged';
import {ProfilerContext} from './ProfilerContext';
import {formatDuration, formatTime} from './utils';
import {StoreContext} from '../context';
Expand Down Expand Up @@ -75,7 +75,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
</Button>
</div>
<div className={styles.Content}>
<ProfilerWhatChanged fiberID={((selectedFiberID: any): number)} />
<WhatChanged fiberID={((selectedFiberID: any): number)} />
{listItems.length > 0 && (
<Fragment>
<label className={styles.Label}>Rendered at</label>: {listItems}
Expand Down
Expand Up @@ -43,46 +43,32 @@ export default function Tooltip({children, label}: any) {
);
}

const TOOLTIP_OFFSET = 5;

// Method used to find the position of the tooltip based on current mouse position
function getTooltipPosition(element, mousePosition) {
const {height, mouseX, mouseY, width} = mousePosition;
const TOOLTIP_OFFSET_X = 5;
const TOOLTIP_OFFSET_Y = 15;
let top = 0;
let left = 0;

// Let's check the vertical position.
if (mouseY + TOOLTIP_OFFSET_Y + element.offsetHeight >= height) {
// The tooltip doesn't fit below the mouse cursor (which is our
// default strategy). Therefore we try to position it either above the
// mouse cursor or finally aligned with the window's top edge.
if (mouseY - TOOLTIP_OFFSET_Y - element.offsetHeight > 0) {
// We position the tooltip above the mouse cursor if it fits there.
top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET_Y}px`;
if (mouseY + TOOLTIP_OFFSET + element.offsetHeight >= height) {
if (mouseY - TOOLTIP_OFFSET - element.offsetHeight > 0) {
top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET}px`;
} else {
// Otherwise we align the tooltip with the window's top edge.
top = '0px';
}
} else {
top = `${mouseY + TOOLTIP_OFFSET_Y}px`;
top = `${mouseY + TOOLTIP_OFFSET}px`;
}

// Now let's check the horizontal position.
if (mouseX + TOOLTIP_OFFSET_X + element.offsetWidth >= width) {
// The tooltip doesn't fit at the right of the mouse cursor (which is
// our default strategy). Therefore we try to position it either at the
// left of the mouse cursor or finally aligned with the window's left
// edge.
if (mouseX - TOOLTIP_OFFSET_X - element.offsetWidth > 0) {
// We position the tooltip at the left of the mouse cursor if it fits
// there.
left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET_X}px`;
if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= width) {
if (mouseX - TOOLTIP_OFFSET - element.offsetWidth > 0) {
left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET}px`;
} else {
// Otherwise, align the tooltip with the window's left edge.
left = '0px';
}
} else {
left = `${mouseX + TOOLTIP_OFFSET_X * 2}px`;
left = `${mouseX + TOOLTIP_OFFSET * 2}px`;
}

return {left, top};
Expand All @@ -94,9 +80,19 @@ function getMousePosition(
mouseEvent: SyntheticMouseEvent<*>,
) {
if (relativeContainer !== null) {
const {height, top, width} = relativeContainer.getBoundingClientRect();
// Positon within the nearest position:relative container.
let targetContainer = relativeContainer;
while (targetContainer.parentElement != null) {
if (targetContainer.style.position === 'relative') {
break;
} else {
targetContainer = targetContainer.parentElement;
}
}

const {height, left, top, width} = targetContainer.getBoundingClientRect();

const mouseX = mouseEvent.clientX;
const mouseX = mouseEvent.clientX - left;
const mouseY = mouseEvent.clientY - top;

return {height, mouseX, mouseY, width};
Expand Down
@@ -1,5 +1,5 @@
.Component {
margin-bottom: 1rem;
margin-bottom: 0.5rem;
}

.Item {
Expand All @@ -26,5 +26,4 @@

.Label {
font-weight: bold;
margin-bottom: 0.5rem;
}
Expand Up @@ -11,15 +11,13 @@ import React, {useContext} from 'react';
import {ProfilerContext} from '../Profiler/ProfilerContext';
import {StoreContext} from '../context';

import styles from './ProfilerWhatChanged.css';
import styles from './WhatChanged.css';

type ProfilerWhatChangedProps = {|
type Props = {|
fiberID: number,
|};

export default function ProfilerWhatChanged({
fiberID,
}: ProfilerWhatChangedProps) {
export default function WhatChanged({fiberID}: Props) {
const {profilerStore} = useContext(StoreContext);
const {rootID, selectedCommitIndex} = useContext(ProfilerContext);

Expand Down