Skip to content

Commit d058937

Browse files
mstangemstange
authored
Move paddings inside the tree header cells. (#6002)
[Main](https://main--perf-html.netlify.app/public/3t89gzy0pk5ndt09g12rxcm8za1t2624dfym900/calltree/?ctSummary=js-allocations&globalTrackOrder=504213&hiddenGlobalTracks=3&hiddenLocalTracksByPid=5405-0wxoxrwy3~5829-0wlnwq~5516-0wpswx0~5549-0woqwu~5582-0wvx1wx4&invertCallstack&localTrackOrderByPid=5582-x0wx27x3x4452ca0ed91fwn63ourtpqvs8b&range=m2720&symbolServer=http%3A%2F%2F127.0.0.1%3A3001%2F3clk8kpswhprpn1na0qf4dy839qc3119z37pa28&thread=A6&v=16) | [Deploy preview](https://deploy-preview-6002--perf-html.netlify.app/public/3t89gzy0pk5ndt09g12rxcm8za1t2624dfym900/calltree/?ctSummary=js-allocations&globalTrackOrder=504213&hiddenGlobalTracks=3&hiddenLocalTracksByPid=5405-0wxoxrwy3~5829-0wlnwq~5516-0wpswx0~5549-0woqwu~5582-0wvx1wx4&invertCallstack&localTrackOrderByPid=5582-x0wx27x3x4452ca0ed91fwn63ourtpqvs8b&range=m2720&symbolServer=http%3A%2F%2F127.0.0.1%3A3001%2F3clk8kpswhprpn1na0qf4dy839qc3119z37pa28&thread=A6&v=16) When we make columns sortable, this will offer a bigger click target and mousedown feedback area.
2 parents 0d3c35c + 2fd6ce9 commit d058937

9 files changed

Lines changed: 904 additions & 885 deletions

File tree

‎res/css/global.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
--z-copy-table-warning: 4;
1616
--z-tree-view: 0;
1717
--z-tree-view-inner: 2;
18+
--z-tree-view-header-divider: 1;
1819
--z-overflow-edge-indicator: 3;
1920
--z-chart-viewport-expanded: 1;
2021
--z-timeline-selection: 1;

‎src/components/calltree/CallTree.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ class CallTreeImpl extends PureComponent<Props> {
111111
{
112112
propName: 'totalPercent',
113113
titleL10nId: '',
114-
initialWidth: 50,
114+
initialWidth: 55,
115115
hideDividerAfter: true,
116116
},
117117
{
@@ -120,28 +120,28 @@ class CallTreeImpl extends PureComponent<Props> {
120120
minWidth: 30,
121121
initialWidth: 70,
122122
resizable: true,
123-
headerWidthAdjustment: 50,
123+
headerWidthAdjustment: 55 /* totalPercent initialWidth */,
124124
},
125125
{
126126
propName: 'self',
127127
titleL10nId: 'CallTree--tracing-ms-self',
128-
minWidth: 30,
129-
initialWidth: 70,
128+
minWidth: 40,
129+
initialWidth: 80,
130130
resizable: true,
131131
},
132132
{
133133
propName: 'icon',
134134
titleL10nId: '',
135135
component: Icon as any,
136-
initialWidth: 10,
136+
initialWidth: 20,
137137
},
138138
];
139139
case 'samples':
140140
return [
141141
{
142142
propName: 'totalPercent',
143143
titleL10nId: '',
144-
initialWidth: 50,
144+
initialWidth: 55,
145145
hideDividerAfter: true,
146146
},
147147
{
@@ -150,28 +150,28 @@ class CallTreeImpl extends PureComponent<Props> {
150150
minWidth: 30,
151151
initialWidth: 70,
152152
resizable: true,
153-
headerWidthAdjustment: 50,
153+
headerWidthAdjustment: 55 /* totalPercent initialWidth */,
154154
},
155155
{
156156
propName: 'self',
157157
titleL10nId: 'CallTree--samples-self',
158-
minWidth: 30,
159-
initialWidth: 70,
158+
minWidth: 40,
159+
initialWidth: 80,
160160
resizable: true,
161161
},
162162
{
163163
propName: 'icon',
164164
titleL10nId: '',
165165
component: Icon as any,
166-
initialWidth: 10,
166+
initialWidth: 20,
167167
},
168168
];
169169
case 'bytes':
170170
return [
171171
{
172172
propName: 'totalPercent',
173173
titleL10nId: '',
174-
initialWidth: 50,
174+
initialWidth: 55,
175175
hideDividerAfter: true,
176176
},
177177
{
@@ -180,20 +180,20 @@ class CallTreeImpl extends PureComponent<Props> {
180180
minWidth: 30,
181181
initialWidth: 140,
182182
resizable: true,
183-
headerWidthAdjustment: 50,
183+
headerWidthAdjustment: 55 /* totalPercent initialWidth */,
184184
},
185185
{
186186
propName: 'self',
187187
titleL10nId: 'CallTree--bytes-self',
188-
minWidth: 30,
189-
initialWidth: 90,
188+
minWidth: 40,
189+
initialWidth: 100,
190190
resizable: true,
191191
},
192192
{
193193
propName: 'icon',
194194
titleL10nId: '',
195195
component: Icon as any,
196-
initialWidth: 10,
196+
initialWidth: 20,
197197
},
198198
];
199199
default:

‎src/components/marker-table/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -253,22 +253,22 @@ class MarkerTableImpl extends PureComponent<Props> {
253253
{
254254
propName: 'start',
255255
titleL10nId: 'MarkerTable--start',
256-
minWidth: 30,
257-
initialWidth: 90,
256+
minWidth: 35,
257+
initialWidth: 95,
258258
resizable: true,
259259
},
260260
{
261261
propName: 'duration',
262262
titleL10nId: 'MarkerTable--duration',
263-
minWidth: 30,
264-
initialWidth: 80,
263+
minWidth: 40,
264+
initialWidth: 90,
265265
resizable: true,
266266
},
267267
{
268268
propName: 'name',
269269
titleL10nId: 'MarkerTable--name',
270-
minWidth: 30,
271-
initialWidth: 150,
270+
minWidth: 40,
271+
initialWidth: 160,
272272
resizable: true,
273273
},
274274
];

‎src/components/shared/TreeView.css‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,7 @@
5858
}
5959

6060
.treeViewHeader {
61-
height: 15px;
62-
padding: 4px 0;
61+
height: 23px;
6362
border-bottom: 1px solid var(--base-border-color);
6463
background: var(--raised-background-color);
6564
color: var(--raised-foreground-color);
@@ -118,33 +117,57 @@
118117
white-space: nowrap;
119118
}
120119

120+
.treeViewHeaderColumn,
121+
.treeViewRowColumn,
122+
.treeViewRowScrolledColumns {
123+
box-sizing: border-box;
124+
padding-right: 5px;
125+
padding-left: 5px;
126+
}
127+
121128
.treeViewFixedColumn {
122129
overflow: hidden;
123130
text-overflow: ellipsis;
124131
}
125132

126-
.treeViewColumnDivider {
133+
.treeViewHeaderColumnDivider,
134+
.treeViewRowColumnDivider {
127135
display: flex;
128-
width: 20px;
136+
width: 1px;
129137
flex: none;
130138
align-items: stretch;
131139
justify-content: center;
140+
padding-right: 5px;
141+
padding-left: 5px;
132142
margin-right: -5px;
133143
margin-left: -5px;
134144
}
135145

136-
.treeViewColumnDivider.isResizable,
146+
.treeViewHeaderColumn,
147+
.treeViewHeaderColumnDivider {
148+
padding-top: 4px;
149+
padding-bottom: 4px;
150+
}
151+
152+
.treeViewHeaderColumnDivider.isResizable {
153+
position: relative;
154+
z-index: var(--z-tree-view-header-divider);
155+
}
156+
157+
.treeViewHeaderColumnDivider.isResizable,
137158
.treeView.isResizingColumns {
138159
cursor: col-resize;
139160
}
140161

141-
.treeViewColumnDivider::before {
162+
.treeViewRowColumnDivider::before,
163+
.treeViewHeaderColumnDivider::before {
142164
border-right: 1px solid var(--base-border-color);
143165
content: '';
144166
}
145167

146-
.treeViewColumnDivider.isResizable::before {
168+
.treeViewHeaderColumnDivider.isResizable::before {
147169
width: 1px;
170+
flex-shrink: 0;
148171
border-left: 1px solid var(--base-border-color);
149172
}
150173

‎src/components/shared/TreeView.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ class TreeViewHeader<
113113
{col.hideDividerAfter !== true ? (
114114
<span
115115
key={col.propName + 'Divider'}
116-
className={classNames('treeViewColumnDivider', {
116+
className={classNames('treeViewHeaderColumnDivider', {
117117
isResizable: col.resizable,
118118
})}
119119
onMouseDown={
@@ -241,7 +241,7 @@ class TreeViewRowFixedColumns<
241241
)}
242242
</span>
243243
{col.hideDividerAfter !== true ? (
244-
<span className="treeViewColumnDivider"></span>
244+
<span className="treeViewRowColumnDivider"></span>
245245
) : null}
246246
</React.Fragment>
247247
);
@@ -380,14 +380,9 @@ class TreeViewRowScrolledColumns<
380380
) : null
381381
}
382382
<span
383-
className={classNames(
384-
'treeViewRowColumn',
385-
'treeViewMainColumn',
386-
mainColumn.propName,
387-
{
388-
dim: displayData.isFrameLabel,
389-
}
390-
)}
383+
className={classNames('treeViewMainColumn', mainColumn.propName, {
384+
dim: displayData.isFrameLabel,
385+
})}
391386
>
392387
{displayData.badge ? (
393388
<Localized
@@ -415,7 +410,7 @@ class TreeViewRowScrolledColumns<
415410
</span>
416411
{appendageColumn ? (
417412
<span
418-
className={`treeViewRowColumn treeViewAppendageColumn ${appendageColumn.propName}`}
413+
className={`treeViewAppendageColumn ${appendageColumn.propName}`}
419414
>
420415
{reactStringWithHighlightedSubstrings(
421416
displayData[appendageColumn.propName],

‎src/test/components/MarkerTable.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -476,11 +476,11 @@ describe('MarkerTable', function () {
476476
);
477477

478478
let dividerForFirstColumn = ensureExists(
479-
document.querySelector('.treeViewColumnDivider')
479+
document.querySelector('.treeViewHeaderColumnDivider')
480480
);
481481
let firstColumn = screen.getByText('Start');
482-
expect(firstColumn).toHaveStyle({ width: '90px' });
483-
fireEvent.mouseDown(dividerForFirstColumn, { clientX: 90 });
482+
expect(firstColumn).toHaveStyle({ width: '95px' });
483+
fireEvent.mouseDown(dividerForFirstColumn, { clientX: 95 });
484484

485485
const body = ensureExists(document.body);
486486

@@ -510,10 +510,10 @@ describe('MarkerTable', function () {
510510

511511
// Now double click to reset the style.
512512
dividerForFirstColumn = ensureExists(
513-
document.querySelector('.treeViewColumnDivider')
513+
document.querySelector('.treeViewHeaderColumnDivider')
514514
);
515515
fireEvent.dblClick(dividerForFirstColumn, { detail: 2 });
516-
expect(firstColumn).toHaveStyle({ width: '90px' });
516+
expect(firstColumn).toHaveStyle({ width: '95px' });
517517
});
518518
});
519519

0 commit comments

Comments
 (0)