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.

Sign up for GitHub

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

Jump to bottom

Scheduling profiler UX changes #21990

Merged
merged 21 commits into from
Aug 2, 2021
Merged

Scheduling profiler UX changes #21990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
5971eb7
Refactored scheduling profiler colors and tooltip text/info
Jul 28, 2021
6dd1a62
Removed a console log statement from hook names Suspense cache
Jul 28, 2021
f587019
Separate suspense events into their own rows, and display as ranges
Jul 29, 2021
78be7e7
Refactored resizable view and made several views resizable
Jul 30, 2021
0f70583
Hide snapshot selector if Scheduling Profiler is active
Jul 30, 2021
f44c87f
Improved ResizeView and ResizeBar UX
Jul 30, 2021
0592a28
Show unresolved suspends as gray diamond marks
Jul 30, 2021
16088f2
Scroll view shows up/down caret overlay indicating content is above o…
Jul 30, 2021
216f4cd
Resize bars show labels now when collapsed
Jul 30, 2021
b7e66ec
Changed scroll wheel behavior
Jul 30, 2021
9c656f2
Clip Suspense diamonds so they don't overflow after being resized
Jul 30, 2021
1f476f3
Set default height for resizable views
Jul 31, 2021
1610784
Tweaked layout and passive colors to align more with commit phase color
Jul 31, 2021
1399595
Added Suspense event row-border lines
Jul 31, 2021
245d7c3
Updated profiler failing (snapshot) tests
Jul 31, 2021
a987428
Tweaked caret colors to be more visible
Jul 31, 2021
772b2c3
Profiler now remembers which (sub) tab was previously selected
Jul 31, 2021
a28ef99
Updated cursor styles
Aug 1, 2021
586aefa
Don't show tooltips for flamegraph nodes that are too small to be vis…
Aug 1, 2021
17e3832
Prevent hidden views from triggering cursor/tooltip interactions
Aug 2, 2021
89979f5
Fixed unrelated key warning in DevTools test shell
Aug 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
279 changes: 186 additions & 93 deletions packages/react-devtools-scheduling-profiler/src/CanvasPage.js
View file
Open in desktop

Large diffs are not rendered by default.

47 changes: 21 additions & 26 deletions packages/react-devtools-scheduling-profiler/src/EventTooltip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
.Tooltip {
position: fixed;
display: inline-block;
}

.TooltipSection,
.TooltipWarningSection {
display: block;
border-radius: 0.125rem;
max-width: 300px;
padding: 0.25rem;
Expand All @@ -12,11 +16,15 @@
color: var(--color-tooltip-text);
font-size: 11px;
}
.TooltipWarningSection {
margin-top: 0.25rem;
background-color: var(--color-warning-background);
}

.Divider {
height: 1px;
background-color: #aaa;
margin: 0.5rem 0;
margin: 0.25rem 0;
}

.DetailsGrid {
Expand All @@ -40,7 +48,6 @@

.FlamechartStackFrameName {
word-break: break-word;
margin-left: 0.4rem;
}

.ComponentName {
Expand All @@ -49,32 +56,20 @@
margin-right: 0.25rem;
}

.ComponentStack {
overflow: hidden;
max-width: 35em;
max-height: 10em;
margin: 0;
font-size: 0.9em;
line-height: 1.5;
-webkit-mask-image: linear-gradient(
180deg,
var(--color-tooltip-background),
var(--color-tooltip-background) 5em,
transparent
);
mask-image: linear-gradient(
180deg,
var(--color-tooltip-background),
var(--color-tooltip-background) 5em,
transparent
);
white-space: pre;
}

.ReactMeasureLabel {
margin-left: 0.4rem;
}

.UserTimingLabel {
word-break: break-word;
}

.NativeEventName {
font-weight: bold;
word-break: break-word;
margin-right: 0.25rem;
}

.InfoText,
.WarningText {
color: var(--color-warning-text-color);
}
Loading