From 7e770dae93e1a934b905d8678c7ce368ed86ef0b Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 19 Feb 2020 10:58:45 -0800 Subject: [PATCH] Profiler tooltip tweaks (#18082) * Moved Profiler views into Profiler folder * Tweaked Profiler tooltip CSS styles * Tweaked Tooltip positioning code --- .../views/Profiler/CommitFlamegraph.js | 2 +- .../devtools/views/Profiler/CommitRanked.js | 2 +- .../views/Profiler/HoveredFiberInfo.css | 8 ++-- .../views/Profiler/HoveredFiberInfo.js | 4 +- .../Profiler/SidebarSelectedFiberInfo.js | 4 +- .../{Components => Profiler}/Tooltip.css | 0 .../views/{Components => Profiler}/Tooltip.js | 48 +++++++++---------- .../WhatChanged.css} | 3 +- .../WhatChanged.js} | 8 ++-- 9 files changed, 35 insertions(+), 44 deletions(-) rename packages/react-devtools-shared/src/devtools/views/{Components => Profiler}/Tooltip.css (100%) rename packages/react-devtools-shared/src/devtools/views/{Components => Profiler}/Tooltip.js (56%) rename packages/react-devtools-shared/src/devtools/views/{Components/ProfilerWhatChanged.css => Profiler/WhatChanged.css} (93%) rename packages/react-devtools-shared/src/devtools/views/{Components/ProfilerWhatChanged.js => Profiler/WhatChanged.js} (94%) diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js index e4daf92bf7662..d7a894914db37 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js @@ -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'; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js index 89bd0d8e82198..878f245c62f61 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js @@ -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'; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css index 14afb8d719e05..d50e36935f20c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css @@ -1,6 +1,6 @@ .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; @@ -8,7 +8,6 @@ } .Content { - padding: 0.5rem; user-select: none; overflow-y: auto; } @@ -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; } diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js index d6b102cd5f2de..c6e33a28ce02b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js @@ -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'; @@ -67,7 +67,7 @@ export default function HoveredFiberInfo({fiberData}: Props) {
{name}
- + {renderDurationInfo || (
Did not render during this profiling session.
)} diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js index 0cef165762a1e..71bba3f41249f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js @@ -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'; @@ -75,7 +75,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
- + {listItems.length > 0 && ( : {listItems} diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css similarity index 100% rename from packages/react-devtools-shared/src/devtools/views/Components/Tooltip.css rename to packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js similarity index 56% rename from packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js rename to packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js index 5be379ee668da..87caa444a09ac 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js @@ -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}; @@ -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}; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css similarity index 93% rename from packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css rename to packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css index 1e0dd8e597015..246dbfe9bac17 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css @@ -1,5 +1,5 @@ .Component { - margin-bottom: 1rem; + margin-bottom: 0.5rem; } .Item { @@ -26,5 +26,4 @@ .Label { font-weight: bold; - margin-bottom: 0.5rem; } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js similarity index 94% rename from packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js rename to packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js index 75846da1d11e6..54ca15e19b81a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js @@ -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);