From 2fd6ce9ac9ad04f1b2f7f099824bf9df33b7fab3 Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Wed, 6 May 2026 16:21:19 -0400 Subject: [PATCH 1/3] 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). --- res/css/global.css | 1 + src/components/calltree/CallTree.tsx | 30 +- src/components/marker-table/index.tsx | 12 +- src/components/shared/TreeView.css | 37 +- src/components/shared/TreeView.tsx | 17 +- src/test/components/MarkerTable.test.tsx | 10 +- .../__snapshots__/MarkerTable.test.tsx.snap | 110 +- .../ProfileCallTreeView.test.tsx.snap | 1540 ++++++++--------- .../__snapshots__/ZipFileTree.test.tsx.snap | 32 +- 9 files changed, 904 insertions(+), 885 deletions(-) diff --git a/res/css/global.css b/res/css/global.css index 1fcabb3a70..61ec860915 100644 --- a/res/css/global.css +++ b/res/css/global.css @@ -15,6 +15,7 @@ --z-copy-table-warning: 4; --z-tree-view: 0; --z-tree-view-inner: 2; + --z-tree-view-header-divider: 1; --z-overflow-edge-indicator: 3; --z-chart-viewport-expanded: 1; --z-timeline-selection: 1; diff --git a/src/components/calltree/CallTree.tsx b/src/components/calltree/CallTree.tsx index a8e4742c61..401247eee5 100644 --- a/src/components/calltree/CallTree.tsx +++ b/src/components/calltree/CallTree.tsx @@ -111,7 +111,7 @@ class CallTreeImpl extends PureComponent { { propName: 'totalPercent', titleL10nId: '', - initialWidth: 50, + initialWidth: 55, hideDividerAfter: true, }, { @@ -120,20 +120,20 @@ class CallTreeImpl extends PureComponent { minWidth: 30, initialWidth: 70, resizable: true, - headerWidthAdjustment: 50, + headerWidthAdjustment: 55 /* totalPercent initialWidth */, }, { propName: 'self', titleL10nId: 'CallTree--tracing-ms-self', - minWidth: 30, - initialWidth: 70, + minWidth: 40, + initialWidth: 80, resizable: true, }, { propName: 'icon', titleL10nId: '', component: Icon as any, - initialWidth: 10, + initialWidth: 20, }, ]; case 'samples': @@ -141,7 +141,7 @@ class CallTreeImpl extends PureComponent { { propName: 'totalPercent', titleL10nId: '', - initialWidth: 50, + initialWidth: 55, hideDividerAfter: true, }, { @@ -150,20 +150,20 @@ class CallTreeImpl extends PureComponent { minWidth: 30, initialWidth: 70, resizable: true, - headerWidthAdjustment: 50, + headerWidthAdjustment: 55 /* totalPercent initialWidth */, }, { propName: 'self', titleL10nId: 'CallTree--samples-self', - minWidth: 30, - initialWidth: 70, + minWidth: 40, + initialWidth: 80, resizable: true, }, { propName: 'icon', titleL10nId: '', component: Icon as any, - initialWidth: 10, + initialWidth: 20, }, ]; case 'bytes': @@ -171,7 +171,7 @@ class CallTreeImpl extends PureComponent { { propName: 'totalPercent', titleL10nId: '', - initialWidth: 50, + initialWidth: 55, hideDividerAfter: true, }, { @@ -180,20 +180,20 @@ class CallTreeImpl extends PureComponent { minWidth: 30, initialWidth: 140, resizable: true, - headerWidthAdjustment: 50, + headerWidthAdjustment: 55 /* totalPercent initialWidth */, }, { propName: 'self', titleL10nId: 'CallTree--bytes-self', - minWidth: 30, - initialWidth: 90, + minWidth: 40, + initialWidth: 100, resizable: true, }, { propName: 'icon', titleL10nId: '', component: Icon as any, - initialWidth: 10, + initialWidth: 20, }, ]; default: diff --git a/src/components/marker-table/index.tsx b/src/components/marker-table/index.tsx index f5057da0b2..a02b10c06d 100644 --- a/src/components/marker-table/index.tsx +++ b/src/components/marker-table/index.tsx @@ -253,22 +253,22 @@ class MarkerTableImpl extends PureComponent { { propName: 'start', titleL10nId: 'MarkerTable--start', - minWidth: 30, - initialWidth: 90, + minWidth: 35, + initialWidth: 95, resizable: true, }, { propName: 'duration', titleL10nId: 'MarkerTable--duration', - minWidth: 30, - initialWidth: 80, + minWidth: 40, + initialWidth: 90, resizable: true, }, { propName: 'name', titleL10nId: 'MarkerTable--name', - minWidth: 30, - initialWidth: 150, + minWidth: 40, + initialWidth: 160, resizable: true, }, ]; diff --git a/src/components/shared/TreeView.css b/src/components/shared/TreeView.css index 8bcb1f74a0..1ac0a413ea 100644 --- a/src/components/shared/TreeView.css +++ b/src/components/shared/TreeView.css @@ -58,8 +58,7 @@ } .treeViewHeader { - height: 15px; - padding: 4px 0; + height: 23px; border-bottom: 1px solid var(--base-border-color); background: var(--raised-background-color); color: var(--raised-foreground-color); @@ -118,33 +117,57 @@ white-space: nowrap; } +.treeViewHeaderColumn, +.treeViewRowColumn, +.treeViewRowScrolledColumns { + box-sizing: border-box; + padding-right: 5px; + padding-left: 5px; +} + .treeViewFixedColumn { overflow: hidden; text-overflow: ellipsis; } -.treeViewColumnDivider { +.treeViewHeaderColumnDivider, +.treeViewRowColumnDivider { display: flex; - width: 20px; + width: 1px; flex: none; align-items: stretch; justify-content: center; + padding-right: 5px; + padding-left: 5px; margin-right: -5px; margin-left: -5px; } -.treeViewColumnDivider.isResizable, +.treeViewHeaderColumn, +.treeViewHeaderColumnDivider { + padding-top: 4px; + padding-bottom: 4px; +} + +.treeViewHeaderColumnDivider.isResizable { + position: relative; + z-index: var(--z-tree-view-header-divider); +} + +.treeViewHeaderColumnDivider.isResizable, .treeView.isResizingColumns { cursor: col-resize; } -.treeViewColumnDivider::before { +.treeViewRowColumnDivider::before, +.treeViewHeaderColumnDivider::before { border-right: 1px solid var(--base-border-color); content: ''; } -.treeViewColumnDivider.isResizable::before { +.treeViewHeaderColumnDivider.isResizable::before { width: 1px; + flex-shrink: 0; border-left: 1px solid var(--base-border-color); } diff --git a/src/components/shared/TreeView.tsx b/src/components/shared/TreeView.tsx index c1505e1472..5e06d7e7cb 100644 --- a/src/components/shared/TreeView.tsx +++ b/src/components/shared/TreeView.tsx @@ -113,7 +113,7 @@ class TreeViewHeader< {col.hideDividerAfter !== true ? ( {col.hideDividerAfter !== true ? ( - + ) : null} ); @@ -380,14 +380,9 @@ class TreeViewRowScrolledColumns< ) : null } {displayData.badge ? ( {appendageColumn ? ( {reactStringWithHighlightedSubstrings( displayData[appendageColumn.propName], diff --git a/src/test/components/MarkerTable.test.tsx b/src/test/components/MarkerTable.test.tsx index 9f9f16b6df..39acc17e6b 100644 --- a/src/test/components/MarkerTable.test.tsx +++ b/src/test/components/MarkerTable.test.tsx @@ -476,11 +476,11 @@ describe('MarkerTable', function () { ); let dividerForFirstColumn = ensureExists( - document.querySelector('.treeViewColumnDivider') + document.querySelector('.treeViewHeaderColumnDivider') ); let firstColumn = screen.getByText('Start'); - expect(firstColumn).toHaveStyle({ width: '90px' }); - fireEvent.mouseDown(dividerForFirstColumn, { clientX: 90 }); + expect(firstColumn).toHaveStyle({ width: '95px' }); + fireEvent.mouseDown(dividerForFirstColumn, { clientX: 95 }); const body = ensureExists(document.body); @@ -510,10 +510,10 @@ describe('MarkerTable', function () { // Now double click to reset the style. dividerForFirstColumn = ensureExists( - document.querySelector('.treeViewColumnDivider') + document.querySelector('.treeViewHeaderColumnDivider') ); fireEvent.dblClick(dividerForFirstColumn, { detail: 2 }); - expect(firstColumn).toHaveStyle({ width: '90px' }); + expect(firstColumn).toHaveStyle({ width: '95px' }); }); }); diff --git a/src/test/components/__snapshots__/MarkerTable.test.tsx.snap b/src/test/components/__snapshots__/MarkerTable.test.tsx.snap index 9e9856f6e5..df20a0b201 100644 --- a/src/test/components/__snapshots__/MarkerTable.test.tsx.snap +++ b/src/test/components/__snapshots__/MarkerTable.test.tsx.snap @@ -207,32 +207,32 @@ exports[`MarkerTable renders some basic markers and updates when needed 1`] = ` > Start Duration Name 0s 0s UserTiming
0.002s NotifyDidPaint
0.108s unknown IPCOut
0.153s 584.00ns setTimeout
0.153s 584.00ns Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget magna sed magna vehicula congue id id nulla. Ut convallis, neque consequat aliquam egestas, dui urna interdum quam, id semper magna erat et nisi. Vivamus molestie quis ligula eget aliquam. Sed facilisis, turpis sed facilisis posuere, risus odio convallis velit, vitae vehicula justo risus at ipsum. Proin non porttitor neque. Vivamus fringilla ex nec iaculis cursus. Vestibulum suscipit mauris sem, vitae gravida ipsum fermentum id. Quisque pulvinar blandit ullamcorper. Donec id justo at metus scelerisque pulvinar. Proin suscipit suscipit nisi, quis tempus ipsum vulputate quis. Pellentesque sodales rutrum eros, eget pulvinar ante condimentum a. Donec accumsan, ante ut facilisis cursus, nibh quam congue eros, vitae placerat tortor magna vel lacus. Etiam odio diam, venenatis eu sollicitudin non, ultrices ut urna. Aliquam vehicula diam eu eros eleifend, ac vulputate purus faucibus.
0.158s LogMessages
0.162s 1ms FileIO
@@ -534,7 +534,7 @@ exports[`MarkerTable renders some basic markers and updates when needed 1`] = ` class="treeRowToggleButton collapsed leaf" /> foobar @@ -555,7 +555,7 @@ exports[`MarkerTable renders some basic markers and updates when needed 1`] = ` class="treeRowToggleButton collapsed leaf" />