Skip to content

Commit 36c63d4

Browse files
eps1loneps1lon
authored
[DevTools] Layout for Suspense tab (#34042)
1 parent 88b40f6 commit 36c63d4

File tree

3 files changed

+620
-4
lines changed

3 files changed

+620
-4
lines changed

‎packages/react-devtools-shared/src/devtools/views/ButtonIcon.js

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,12 @@ export type IconType =
3434
| 'save'
3535
| 'search'
3636
| 'settings'
37+
| 'panel-left-close'
38+
| 'panel-left-open'
39+
| 'panel-right-close'
40+
| 'panel-right-open'
41+
| 'panel-bottom-open'
42+
| 'panel-bottom-close'
3743
| 'error'
3844
| 'suspend'
3945
| 'undo'
@@ -46,8 +52,10 @@ type Props = {
4652
type: IconType,
4753
};
4854

55+
const materialIconsViewBox = '0 -960 960 960';
4956
export default function ButtonIcon({className = '', type}: Props): React.Node {
5057
let pathData = null;
58+
let viewBox = '0 0 24 24';
5159
switch (type) {
5260
case 'add':
5361
pathData = PATH_ADD;
@@ -121,6 +129,30 @@ export default function ButtonIcon({className = '', type}: Props): React.Node {
121129
case 'error':
122130
pathData = PATH_ERROR;
123131
break;
132+
case 'panel-left-close':
133+
pathData = PATH_MATERIAL_PANEL_LEFT_CLOSE;
134+
viewBox = materialIconsViewBox;
135+
break;
136+
case 'panel-left-open':
137+
pathData = PATH_MATERIAL_PANEL_LEFT_OPEN;
138+
viewBox = materialIconsViewBox;
139+
break;
140+
case 'panel-right-close':
141+
pathData = PATH_MATERIAL_PANEL_RIGHT_CLOSE;
142+
viewBox = materialIconsViewBox;
143+
break;
144+
case 'panel-right-open':
145+
pathData = PATH_MATERIAL_PANEL_RIGHT_OPEN;
146+
viewBox = materialIconsViewBox;
147+
break;
148+
case 'panel-bottom-open':
149+
pathData = PATH_MATERIAL_PANEL_BOTTOM_OPEN;
150+
viewBox = materialIconsViewBox;
151+
break;
152+
case 'panel-bottom-close':
153+
pathData = PATH_MATERIAL_PANEL_BOTTOM_CLOSE;
154+
viewBox = materialIconsViewBox;
155+
break;
124156
case 'suspend':
125157
pathData = PATH_SUSPEND;
126158
break;
@@ -147,7 +179,7 @@ export default function ButtonIcon({className = '', type}: Props): React.Node {
147179
className={`${styles.ButtonIcon} ${className}`}
148180
width="24"
149181
height="24"
150-
viewBox="0 0 24 24">
182+
viewBox={viewBox}>
151183
<path d="M0 0h24v24H0z" fill="none" />
152184
{typeof pathData === 'string' ? (
153185
<path fill="currentColor" d={pathData} />
@@ -276,3 +308,33 @@ const PATH_VIEW_SOURCE = `
276308
const PATH_EDITOR = `
277309
M7 5h10v2h2V3c0-1.1-.9-1.99-2-1.99L7 1c-1.1 0-2 .9-2 2v4h2V5zm8.41 11.59L20 12l-4.59-4.59L14 8.83 17.17 12 14 15.17l1.41 1.42zM10 15.17L6.83 12 10 8.83 8.59 7.41 4 12l4.59 4.59L10 15.17zM17 19H7v-2H5v4c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-4h-2v2z
278310
`;
311+
312+
// Source: Material Design Icons left_panel_close
313+
const PATH_MATERIAL_PANEL_LEFT_CLOSE = `
314+
M648-324v-312L480-480l168 156ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm125-72v-528H216v528h120Zm72 0h336v-528H408v528Zm-72 0H216h120Z
315+
`;
316+
317+
// Source: Material Design Icons left_panel_open
318+
const PATH_MATERIAL_PANEL_LEFT_OPEN = `
319+
M504-595v230q0 12.25 10.5 16.62Q525-344 534-352l110-102q11-11.18 11-26.09T644-506L534-608q-8.82-8-19.41-3.5T504-595ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm125-72v-528H216v528h120Zm72 0h336v-528H408v528Zm-72 0H216h120Z
320+
`;
321+
322+
// Source: Material Design Icons right_panel_close
323+
const PATH_MATERIAL_PANEL_RIGHT_CLOSE = `
324+
M312-365q0 12.25 10.5 16.62Q333-344 342-352l110-102q11-11.18 11-26.09T452-506L342-608q-8.82-8-19.41-3.5T312-595v230ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm413-72h120v-528H624v528Zm-72 0v-528H216v528h336Zm72 0h120-120Z
325+
`;
326+
327+
// Source: Material Design Icons right_panel_open
328+
const PATH_MATERIAL_PANEL_RIGHT_OPEN = `
329+
M456-365v-230q0-12.25-10.5-16.63Q435-616 426-608L316-506q-11 11.18-11 26.09T316-454l110 102q8.82 8 19.41 3.5T456-365ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm413-72h120v-528H624v528Zm-72 0v-528H216v528h336Zm72 0h120-120Z
330+
`;
331+
332+
// Source: Material Design Icons bottom_panel_open
333+
const PATH_MATERIAL_PANEL_BOTTOM_OPEN = `
334+
M365-504h230q12.25 0 16.63-10.5Q616-525 608-534L506-644q-11.18-11-26.09-11T454-644L352-534q-8 8.82-3.5 19.41T365-504ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm5-192v120h528v-120H216Zm0-72h528v-336H216v336Zm0 72v120-120Z
335+
`;
336+
337+
// Source: Material Design Icons bottom_panel_close
338+
const PATH_MATERIAL_PANEL_BOTTOM_CLOSE = `
339+
m506-508 102-110q8-8.82 3.5-19.41T595-648H365q-12.25 0-16.62 10.5Q344-627 352-618l102 110q11.18 11 26.09 11T506-508Zm243-308q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538ZM216-336v120h528v-120H216Zm528-72v-336H216v336h528Zm-528 72v120-120Z
340+
`;

‎packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
.SuspenseTab {
2+
position: relative;
3+
width: 100%;
4+
height: 100%;
5+
display: flex;
6+
flex-direction: row;
7+
background-color: var(--color-background);
8+
color: var(--color-text);
9+
font-family: var(--font-family-sans);
10+
}
11+
12+
.SuspenseTab, .SuspenseTab * {
13+
box-sizing: border-box;
14+
-webkit-font-smoothing: var(--font-smoothing);
15+
}
16+
17+
.TreeWrapper {
18+
flex: 1 1 var(--horizontal-resize-tree-percentage);
19+
display: flex;
20+
flex-direction: row;
21+
overflow: auto;
22+
border-top: 1px solid var(--color-border);
23+
}
24+
25+
.InspectedElementWrapper {
26+
flex: 1 1 calc(100% - var(--horizontal-resize-tree-percentage));
27+
overflow-x: hidden;
28+
overflow-y: auto;
29+
}
30+
31+
.ResizeBarWrapper {
32+
flex: 0 0 0px;
33+
position: relative;
34+
}
35+
36+
.ResizeBar {
37+
position: absolute;
38+
/*
39+
* moving the bar out of its bounding box might cause its hitbox to overlap
40+
* with another scrollbar creating disorienting UX where you both resize and scroll
41+
* at the same time.
42+
* If you adjust this value, double check that starting resize right on this edge
43+
* doesn't also cause scroll
44+
*/
45+
left: 1px;
46+
width: 5px;
47+
height: 100%;
48+
cursor: ew-resize;
49+
}
50+
51+
.TreeView footer {
52+
display: none;
53+
}
54+
55+
56+
57+
@container devtools (width < 600px) {
58+
.SuspenseTab {
59+
flex-direction: column;
60+
}
61+
62+
.TreeWrapper {
63+
border-top: 1px solid var(--color-border);
64+
flex: 1 0 var(--vertical-resize-tree-percentage);
65+
}
66+
67+
.InspectedElementWrapper {
68+
flex: 1 1 50%;
69+
}
70+
71+
.TreeWrapper + .ResizeBarWrapper .ResizeBar {
72+
top: 1px;
73+
left: 0;
74+
width: 100%;
75+
height: 5px;
76+
cursor: ns-resize;
77+
}
78+
79+
.TreeView footer {
80+
display: flex;
81+
justify-content: end;
82+
}
83+
84+
.ToggleInspectedElement[data-orientation="horizontal"] {
85+
display: none;
86+
}
87+
}
88+
89+
.TreeList {
90+
flex: 0 0 var(--horizontal-resize-tree-list-percentage);
91+
border-right: 1px solid var(--color-border);
92+
padding: 0.25rem
93+
}
94+
95+
.TreeView {
96+
flex: 1 1 35%;
97+
display: flex;
98+
flex-direction: column;
99+
}
100+
101+
102+
103+
.Rects {
104+
border-top: 1px solid var(--color-border);
105+
padding: 0.25rem;
106+
flex-grow: 1;
107+
}
108+
109+
.TimelineWrapper {
110+
padding: 0.25rem;
111+
display: flex;
112+
flex-direction: row;
113+
}
114+
115+
.Timeline {
116+
flex-grow: 1;
117+
}

0 commit comments

Comments
 (0)