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" />