Skip to content

Commit 274a6a7

Browse files
mstangemstange
committed
Move paddings inside the tree header cells.
When we make columns sortable, this will offer a bigger click target and mousedown feedback area. This commit does two things: - The distance between the column header text and the separator now becomes part of the header cell (using padding). - The width of the header cell now includes the padding (box-sizing: border-box), so it changes its meaning. I've updated the width values in the JS code so that the outcome looks the same as before. I adjusted the numbers based on these rules: - By default: minWidth and initialidth is increased by 10 - this matches the "includes padding" change because we now have 5px of padding on each side (10px total). - The first column increases by 5px less because it didn't have a 5px column separate distance in front of it in the past. - The columns with headerWidthAdjustment don't increase their width at all because they didn't contribute any separator distance in the past (because their preceding column has hideDividerAfter:true).
1 parent 0d3c35c commit 274a6a7

8 files changed

Lines changed: 871 additions & 852 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/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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -476,7 +476,7 @@ describe('MarkerTable', function () {
476476
);
477477

478478
let dividerForFirstColumn = ensureExists(
479-
document.querySelector('.treeViewColumnDivider')
479+
document.querySelector('.treeViewHeaderColumnDivider')
480480
);
481481
let firstColumn = screen.getByText('Start');
482482
expect(firstColumn).toHaveStyle({ width: '90px' });
@@ -510,7 +510,7 @@ 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 });
516516
expect(firstColumn).toHaveStyle({ width: '90px' });

0 commit comments

Comments
 (0)