From ce7352fb41d20deaff690b0fec90df4caaff206d Mon Sep 17 00:00:00 2001 From: Luna Date: Wed, 29 Jun 2022 19:53:40 -0400 Subject: [PATCH] Resign sidebar --- .../src/devtools/views/Button.css | 1 + .../views/Profiler/SidebarEventInfo.css | 48 ++++----- .../views/Profiler/SidebarEventInfo.js | 102 +++++++++++------- .../src/EventTooltip.js | 20 ++-- .../src/utils/formatting.js | 15 +++ 5 files changed, 106 insertions(+), 80 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Button.css b/packages/react-devtools-shared/src/devtools/views/Button.css index d3885372b485e..182b1b2526d3e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Button.css +++ b/packages/react-devtools-shared/src/devtools/views/Button.css @@ -5,6 +5,7 @@ padding: 0; border-radius: 0.25rem; flex: 0 0 auto; + cursor: pointer; } .ButtonContent { display: inline-flex; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css index b16e8b97847fd..98b0dad5325d5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css @@ -20,18 +20,15 @@ } .ListItem { - margin: 0; + flex: 1 1; + margin: 0 0 0.5rem; } .Label { - display: flex; - justify-content: space-between; - + overflow: hidden; + text-overflow: ellipsis; font-weight: bold; -} - -[data-source="true"]:hover .Label > .Button { - background-color: var(--color-background-hover); + flex: 1 1; } .Value { @@ -39,32 +36,31 @@ font-size: var(--font-size-monospace-normal); } -.NothingSelected { - display: flex; +.Row { + display: flex; + flex-direction: row; align-items: center; - justify-content: center; - height: 100%; - color: var(--color-dim); -} - -.Button { - display: flex; - flex: 1; + border-top: 1px solid var(--color-border); +} - max-width: 95%; +.UnclickableSource, +.ClickableSource { + width: 100%; overflow: hidden; text-overflow: ellipsis; + font-family: var(--font-family-sans); + font-size: var(--font-size-sans-normal); } -[data-source="true"] .Button { - cursor: pointer; +.UnclickableSource { + color: var(--color-dim); } - -.Button > span { - display: block; - text-align: left; +.ClickableSource { + color: var(--color-text); } -.Source { +.ClickableSource:focus, +.ClickableSource:hover { + background-color: var(--color-background-hover); } diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js index c26f2c2faec7a..18bd77443eb9c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js @@ -15,18 +15,25 @@ import ButtonIcon from '../ButtonIcon'; import ViewSourceContext from '../Components/ViewSourceContext'; import {useContext} from 'react'; import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext'; +import { + formatTimestamp, + getSchedulingEventLabel, +} from 'react-devtools-timeline/src/utils/formatting'; import {stackToComponentSources} from 'react-devtools-shared/src/devtools/utils'; +import {copy} from 'clipboard-js'; import styles from './SidebarEventInfo.css'; export type Props = {||}; -function SchedulingEventInfo({eventInfo}: {eventInfo: SchedulingEvent}) { - const {viewUrlSourceFunction} = useContext(ViewSourceContext); +type SchedulingEventProps = {| + eventInfo: SchedulingEvent, +|}; - const componentStack = eventInfo.componentStack - ? stackToComponentSources(eventInfo.componentStack) - : null; +function SchedulingEventInfo({eventInfo}: SchedulingEventProps) { + const {viewUrlSourceFunction} = useContext(ViewSourceContext); + const {componentName, timestamp} = eventInfo; + const componentStack = eventInfo.componentStack || null; const viewSource = source => { if (viewUrlSourceFunction != null && source != null) { @@ -35,45 +42,60 @@ function SchedulingEventInfo({eventInfo}: {eventInfo: SchedulingEvent}) { }; return ( -
- {componentStack ? ( -
    - {componentStack.map(([displayName, source], index) => { - const hasSource = source != null; - - return ( -
  1. - -
    2. - ); - })} -
- ) : null} -
+ <> +
+ {componentName} {getSchedulingEventLabel(eventInfo)} +
+
+ +
+ ); } export default function SidebarEventInfo(_: Props) { const {selectedEvent} = useContext(TimelineContext); // (TODO) Refactor in next PR so this supports multiple types of events - return selectedEvent ? ( - <> -
Event Component Tree
- {selectedEvent.schedulingEvent ? ( - - ) : null} - - ) : null; + if (selectedEvent && selectedEvent.schedulingEvent) { + return ; + } + + return null; } diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js index 13c25444213f9..de607ddd5b19f 100644 --- a/packages/react-devtools-timeline/src/EventTooltip.js +++ b/packages/react-devtools-timeline/src/EventTooltip.js @@ -24,7 +24,12 @@ import type { } from './types'; import * as React from 'react'; -import {formatDuration, formatTimestamp, trimString} from './utils/formatting'; +import { + formatDuration, + formatTimestamp, + trimString, + getSchedulingEventLabel, +} from './utils/formatting'; import {getBatchRange} from './utils/getBatchRange'; import useSmartTooltip from './utils/useSmartTooltip'; import styles from './EventTooltip.css'; @@ -40,19 +45,6 @@ type Props = {| width: number, |}; -function getSchedulingEventLabel(event: SchedulingEvent): string | null { - switch (event.type) { - case 'schedule-render': - return 'render scheduled'; - case 'schedule-state-update': - return 'state update scheduled'; - case 'schedule-force-update': - return 'force update scheduled'; - default: - return null; - } -} - function getReactMeasureLabel(type): string | null { switch (type) { case 'commit': diff --git a/packages/react-devtools-timeline/src/utils/formatting.js b/packages/react-devtools-timeline/src/utils/formatting.js index f5e589444236c..83354afe96f19 100644 --- a/packages/react-devtools-timeline/src/utils/formatting.js +++ b/packages/react-devtools-timeline/src/utils/formatting.js @@ -7,6 +7,8 @@ * @flow */ +import type {SchedulingEvent} from '../types'; + import prettyMilliseconds from 'pretty-ms'; export function formatTimestamp(ms: number) { @@ -28,3 +30,16 @@ export function trimString(string: string, length: number): string { } return string; } + +export function getSchedulingEventLabel(event: SchedulingEvent): string | null { + switch (event.type) { + case 'schedule-render': + return 'render scheduled'; + case 'schedule-state-update': + return 'state update scheduled'; + case 'schedule-force-update': + return 'force update scheduled'; + default: + return null; + } +}