{"commit":{"revision":"7e770dae93e1a934b905d8678c7ce368ed86ef0b","authorEmail":"bvaughn@fb.com","authoredAt":"2020-02-19T10:58:45-08:00","subject":"Profiler tooltip tweaks (#18082)","authorName":"Brian Vaughn","shortRevision":"7e770dae93"},"body":"* Moved Profiler views into Profiler folder\r\n\r\n* Tweaked Profiler tooltip CSS styles\r\n\r\n* Tweaked Tooltip positioning code","parents":["b6c94d636cb33a265671b864b97870da38d97207"],"files":[{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitRanked.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js"},{"status":"R100","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.css","previousPath":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tooltip.css"},{"status":"R056","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.js","previousPath":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tooltip.js"},{"status":"R093","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.css","previousPath":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ProfilerWhatChanged.css"},{"status":"R094","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.js","previousPath":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ProfilerWhatChanged.js"}],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex e4daf92bf7..d7a894914d 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -23,7 +23,7 @@ import HoveredFiberInfo from '.\/HoveredFiberInfo';\n import {scale} from '.\/utils';\n import {StoreContext} from '..\/context';\n import {SettingsContext} from '..\/Settings\/SettingsContext';\n-import Tooltip from '..\/Components\/Tooltip';\n+import Tooltip from '.\/Tooltip';\n \n import styles from '.\/CommitFlamegraph.css';\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitRanked.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitRanked.js\nindex 89bd0d8e82..878f245c62 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitRanked.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitRanked.js\n@@ -17,7 +17,7 @@ import HoveredFiberInfo from '.\/HoveredFiberInfo';\n import {scale} from '.\/utils';\n import {StoreContext} from '..\/context';\n import {SettingsContext} from '..\/Settings\/SettingsContext';\n-import Tooltip from '..\/Components\/Tooltip';\n+import Tooltip from '.\/Tooltip';\n \n import styles from '.\/CommitRanked.css';\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.css\nindex 14afb8d719..d50e36935f 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.css\n@@ -1,6 +1,6 @@\n .Toolbar {\n- height: 2.25rem;\n- padding: 0 0.5rem;\n+ padding: 0.25rem 0;\n+ margin-bottom: 0.25rem;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n@@ -8,7 +8,6 @@\n }\n \n .Content {\n- padding: 0.5rem;\n user-select: none;\n overflow-y: auto;\n }\n@@ -25,14 +24,13 @@\n \n .Label {\n font-weight: bold;\n- margin-bottom: 0.5rem;\n }\n \n .CurrentCommit {\n+ margin-top: 0.25rem;\n display: block;\n width: 100%;\n text-align: left;\n background: none;\n border: none;\n- padding: 0.25rem 0.5rem;\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.js\nindex d6b102cd5f..c6e33a28ce 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/HoveredFiberInfo.js\n@@ -10,7 +10,7 @@\n import React, {Fragment, useContext} from 'react';\n import {ProfilerContext} from '.\/ProfilerContext';\n import {formatDuration, formatTime} from '.\/utils';\n-import ProfilerWhatChanged from '..\/Components\/ProfilerWhatChanged';\n+import WhatChanged from '.\/WhatChanged';\n import {StoreContext} from '..\/context';\n \n import styles from '.\/HoveredFiberInfo.css';\n@@ -67,7 +67,7 @@ export default function HoveredFiberInfo({fiberData}: Props) {\n

{name}<\/div>\n <\/div>\n

\n- \n+ \n {renderDurationInfo || (\n

Did not render during this profiling session.<\/div>\n )}\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\nindex 0cef165762..71bba3f412 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\n@@ -8,7 +8,7 @@\n *\/\n \n import React, {Fragment, useContext} from 'react';\n-import ProfilerWhatChanged from '..\/Components\/ProfilerWhatChanged';\n+import WhatChanged from '.\/WhatChanged';\n import {ProfilerContext} from '.\/ProfilerContext';\n import {formatDuration, formatTime} from '.\/utils';\n import {StoreContext} from '..\/context';\n@@ -75,7 +75,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {\n <\/Button>\n <\/div>\n

\n- \n+ \n {listItems.length > 0 && (\n \n Rendered at<\/label>: {listItems}\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tooltip.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.css\nsimilarity index 100%\nrename from packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tooltip.css\nrename to packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.css\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tooltip.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.js\nsimilarity index 56%\nrename from packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tooltip.js\nrename to packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.js\nindex 5be379ee66..87caa444a0 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tooltip.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.js\n@@ -43,46 +43,32 @@ export default function Tooltip({children, label}: any) {\n );\n }\n \n+const TOOLTIP_OFFSET = 5;\n+\n \/\/ Method used to find the position of the tooltip based on current mouse position\n function getTooltipPosition(element, mousePosition) {\n const {height, mouseX, mouseY, width} = mousePosition;\n- const TOOLTIP_OFFSET_X = 5;\n- const TOOLTIP_OFFSET_Y = 15;\n let top = 0;\n let left = 0;\n \n- \/\/ Let's check the vertical position.\n- if (mouseY + TOOLTIP_OFFSET_Y + element.offsetHeight >= height) {\n- \/\/ The tooltip doesn't fit below the mouse cursor (which is our\n- \/\/ default strategy). Therefore we try to position it either above the\n- \/\/ mouse cursor or finally aligned with the window's top edge.\n- if (mouseY - TOOLTIP_OFFSET_Y - element.offsetHeight > 0) {\n- \/\/ We position the tooltip above the mouse cursor if it fits there.\n- top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET_Y}px`;\n+ if (mouseY + TOOLTIP_OFFSET + element.offsetHeight >= height) {\n+ if (mouseY - TOOLTIP_OFFSET - element.offsetHeight > 0) {\n+ top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET}px`;\n } else {\n- \/\/ Otherwise we align the tooltip with the window's top edge.\n top = '0px';\n }\n } else {\n- top = `${mouseY + TOOLTIP_OFFSET_Y}px`;\n+ top = `${mouseY + TOOLTIP_OFFSET}px`;\n }\n \n- \/\/ Now let's check the horizontal position.\n- if (mouseX + TOOLTIP_OFFSET_X + element.offsetWidth >= width) {\n- \/\/ The tooltip doesn't fit at the right of the mouse cursor (which is\n- \/\/ our default strategy). Therefore we try to position it either at the\n- \/\/ left of the mouse cursor or finally aligned with the window's left\n- \/\/ edge.\n- if (mouseX - TOOLTIP_OFFSET_X - element.offsetWidth > 0) {\n- \/\/ We position the tooltip at the left of the mouse cursor if it fits\n- \/\/ there.\n- left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET_X}px`;\n+ if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= width) {\n+ if (mouseX - TOOLTIP_OFFSET - element.offsetWidth > 0) {\n+ left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET}px`;\n } else {\n- \/\/ Otherwise, align the tooltip with the window's left edge.\n left = '0px';\n }\n } else {\n- left = `${mouseX + TOOLTIP_OFFSET_X * 2}px`;\n+ left = `${mouseX + TOOLTIP_OFFSET * 2}px`;\n }\n \n return {left, top};\n@@ -94,9 +80,19 @@ function getMousePosition(\n mouseEvent: SyntheticMouseEvent<*>,\n ) {\n if (relativeContainer !== null) {\n- const {height, top, width} = relativeContainer.getBoundingClientRect();\n+ \/\/ Positon within the nearest position:relative container.\n+ let targetContainer = relativeContainer;\n+ while (targetContainer.parentElement != null) {\n+ if (targetContainer.style.position === 'relative') {\n+ break;\n+ } else {\n+ targetContainer = targetContainer.parentElement;\n+ }\n+ }\n+\n+ const {height, left, top, width} = targetContainer.getBoundingClientRect();\n \n- const mouseX = mouseEvent.clientX;\n+ const mouseX = mouseEvent.clientX - left;\n const mouseY = mouseEvent.clientY - top;\n \n return {height, mouseX, mouseY, width};\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ProfilerWhatChanged.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.css\nsimilarity index 93%\nrename from packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ProfilerWhatChanged.css\nrename to packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.css\nindex 1e0dd8e597..246dbfe9ba 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ProfilerWhatChanged.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.css\n@@ -1,5 +1,5 @@\n .Component {\n- margin-bottom: 1rem;\n+ margin-bottom: 0.5rem;\n }\n \n .Item {\n@@ -26,5 +26,4 @@\n \n .Label {\n font-weight: bold;\n- margin-bottom: 0.5rem;\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ProfilerWhatChanged.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.js\nsimilarity index 94%\nrename from packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ProfilerWhatChanged.js\nrename to packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.js\nindex 75846da1d1..54ca15e19b 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ProfilerWhatChanged.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.js\n@@ -11,15 +11,13 @@ import React, {useContext} from 'react';\n import {ProfilerContext} from '..\/Profiler\/ProfilerContext';\n import {StoreContext} from '..\/context';\n \n-import styles from '.\/ProfilerWhatChanged.css';\n+import styles from '.\/WhatChanged.css';\n \n-type ProfilerWhatChangedProps = {|\n+type Props = {|\n fiberID: number,\n |};\n \n-export default function ProfilerWhatChanged({\n- fiberID,\n-}: ProfilerWhatChangedProps) {\n+export default function WhatChanged({fiberID}: Props) {\n const {profilerStore} = useContext(StoreContext);\n const {rootID, selectedCommitIndex} = useContext(ProfilerContext);\n \n"}

dillon1000/react

Files changed