From 1b6eaf97e23854047eaff625593a7f20df89da68 Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Wed, 6 May 2026 16:21:19 -0400 Subject: [PATCH] Move paddings inside the tree header cells. When we make columns sortable, this will offer a bigger click target and mousedown feedback area. --- src/components/calltree/CallTree.tsx | 30 +- src/components/shared/TreeView.css | 37 +- src/components/shared/TreeView.tsx | 17 +- src/test/components/MarkerTable.test.tsx | 4 +- .../__snapshots__/MarkerTable.test.tsx.snap | 62 +- .../ProfileCallTreeView.test.tsx.snap | 1540 ++++++++--------- .../__snapshots__/ZipFileTree.test.tsx.snap | 32 +- 7 files changed, 870 insertions(+), 852 deletions(-) diff --git a/src/components/calltree/CallTree.tsx b/src/components/calltree/CallTree.tsx index e593b01644..1b8c3c8639 100644 --- a/src/components/calltree/CallTree.tsx +++ b/src/components/calltree/CallTree.tsx @@ -110,7 +110,7 @@ class CallTreeImpl extends PureComponent { { propName: 'totalPercent', titleL10nId: '', - initialWidth: 50, + initialWidth: 55, hideDividerAfter: true, }, { @@ -119,20 +119,20 @@ class CallTreeImpl extends PureComponent { minWidth: 30, initialWidth: 70, resizable: true, - headerWidthAdjustment: 50, + headerWidthAdjustment: 55, }, { 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': @@ -140,7 +140,7 @@ class CallTreeImpl extends PureComponent { { propName: 'totalPercent', titleL10nId: '', - initialWidth: 50, + initialWidth: 55, hideDividerAfter: true, }, { @@ -149,20 +149,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': @@ -170,7 +170,7 @@ class CallTreeImpl extends PureComponent { { propName: 'totalPercent', titleL10nId: '', - initialWidth: 50, + initialWidth: 55, hideDividerAfter: true, }, { @@ -179,20 +179,20 @@ class CallTreeImpl extends PureComponent { minWidth: 30, initialWidth: 140, resizable: true, - headerWidthAdjustment: 50, + headerWidthAdjustment: 55, }, { 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/shared/TreeView.css b/src/components/shared/TreeView.css index 8bcb1f74a0..49bfa6fb27 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: 2; +} + +.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 a6eb6e374d..ae28c174cb 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..ad21b9ca96 100644 --- a/src/test/components/MarkerTable.test.tsx +++ b/src/test/components/MarkerTable.test.tsx @@ -476,7 +476,7 @@ describe('MarkerTable', function () { ); let dividerForFirstColumn = ensureExists( - document.querySelector('.treeViewColumnDivider') + document.querySelector('.treeViewHeaderColumnDivider') ); let firstColumn = screen.getByText('Start'); expect(firstColumn).toHaveStyle({ width: '90px' }); @@ -510,7 +510,7 @@ 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' }); diff --git a/src/test/components/__snapshots__/MarkerTable.test.tsx.snap b/src/test/components/__snapshots__/MarkerTable.test.tsx.snap index 9e9856f6e5..ba15edc9a6 100644 --- a/src/test/components/__snapshots__/MarkerTable.test.tsx.snap +++ b/src/test/components/__snapshots__/MarkerTable.test.tsx.snap @@ -212,7 +212,7 @@ exports[`MarkerTable renders some basic markers and updates when needed 1`] = ` Start
@@ -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" />