Resize columns in TreeView

src/actions/profile-view.js

@@ -73,6 +73,7 @@ import type {
   Tid,
   GlobalTrack,
   KeyboardModifiers,
+  TableViewOptions,
 } from 'firefox-profiler/types';
 import {
   funcHasDirectRecursiveCall,
@@ -1924,6 +1925,17 @@ export function changeMouseTimePosition(
   };
 }
 
+export function changeTableViewOptions(
+  tab: TabSlug,
+  tableViewOptions: TableViewOptions
+): Action {
+  return {
+    type: 'CHANGE_TABLE_VIEW_OPTIONS',
+    tab,
+    tableViewOptions,
+  };
+}
+
 export function openSourceView(file: string, currentTab: TabSlug): Action {
   return {
     type: 'OPEN_SOURCE_VIEW',

src/components/app/ZipFileViewer.js

@@ -24,6 +24,7 @@ import {
 import { getPathInZipFileFromUrl } from 'firefox-profiler/selectors/url-state';
 import { TreeView } from 'firefox-profiler/components/shared/TreeView';
 import { ProfileViewer } from './ProfileViewer';
+import { defaultTableViewOptions } from 'firefox-profiler/reducers/profile-view';
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 import type { ZipFileState } from 'firefox-profiler/types';
@@ -269,6 +270,7 @@ class ZipFileViewerImpl extends React.PureComponent<Props> {
                 rowHeight={30}
                 indentWidth={15}
                 onEnterKey={this._onEnterKey}
+                viewOptions={defaultTableViewOptions}
               />
               <DragAndDropOverlay />
             </div>

src/components/calltree/CallTree.css

@@ -7,20 +7,6 @@
   text-align: right;
 }
 
-.treeViewFixedColumn.total {
-  width: 70px;
-}
-
-/* The header for the total column spans both totalPercent and total columns */
-.treeViewHeaderColumn.total {
-  width: 120px;
-}
-
-.treeViewFixedColumn.totalPercent {
-  width: 50px;
-  border-right: none;
-}
-
 /* The header for the totalPercent column is not visible */
 .treeViewHeaderColumn.totalPercent {
   display: none;
@@ -32,7 +18,6 @@
 
 .treeViewFixedColumn.icon {
   display: flex;
-  width: 19px;
   flex-flow: column nowrap;
   align-items: center;
 }

src/components/calltree/CallTree.js

@@ -21,6 +21,7 @@ import {
   getFocusCallTreeGeneration,
   getPreviewSelection,
   getCategories,
+  getCurrentTableViewOptions,
 } from 'firefox-profiler/selectors/profile';
 import { selectedThreadSelectors } from 'firefox-profiler/selectors/per-thread';
 import {
@@ -30,6 +31,7 @@ import {
   addTransformToStack,
   handleCallNodeTransformShortcut,
   openSourceView,
+  changeTableViewOptions,
 } from 'firefox-profiler/actions/profile-view';
 import { assertExhaustiveCheck } from 'firefox-profiler/utils/flow';
 
@@ -42,10 +44,14 @@ import type {
   IndexIntoCallNodeTable,
   CallNodeDisplayData,
   WeightType,
+  TableViewOptions,
 } from 'firefox-profiler/types';
 import type { CallTree as CallTreeType } from 'firefox-profiler/profile-logic/call-tree';
 
-import type { Column } from 'firefox-profiler/components/shared/TreeView';
+import type {
+  Column,
+  MaybeResizableColumn,
+} from 'firefox-profiler/components/shared/TreeView';
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 
 import './CallTree.css';
@@ -66,6 +72,7 @@ type StateProps = {|
   +implementationFilter: ImplementationFilter,
   +callNodeMaxDepth: number,
   +weightType: WeightType,
+  +tableViewOptions: TableViewOptions,
 |};
 
 type DispatchProps = {|
@@ -75,6 +82,7 @@ type DispatchProps = {|
   +addTransformToStack: typeof addTransformToStack,
   +handleCallNodeTransformShortcut: typeof handleCallNodeTransformShortcut,
   +openSourceView: typeof openSourceView,
+  +onTableViewOptionsChange: (TableViewOptions) => any,
 |};
 
 type Props = ConnectedProps<{||}, StateProps, DispatchProps>;
@@ -96,46 +104,97 @@ class CallTreeImpl extends PureComponent<Props> {
    * appropriate labels for the call tree based on this weight.
    */
   _weightTypeToColumns = memoize(
-    (weightType: WeightType): Column<CallNodeDisplayData>[] => {
+    (weightType: WeightType): MaybeResizableColumn<CallNodeDisplayData>[] => {
       switch (weightType) {
         case 'tracing-ms':
           return [
-            { propName: 'totalPercent', titleL10nId: '' },
+            {
+              propName: 'totalPercent',
+              titleL10nId: '',
+              initialWidth: 50,
+              hideDividerAfter: true,
+            },
             {
               propName: 'total',
               titleL10nId: 'CallTree--tracing-ms-total',
+              minWidth: 30,
+              initialWidth: 70,
+              resizable: true,
+              headerWidthAdjustment: 50,
             },
             {
               propName: 'self',
               titleL10nId: 'CallTree--tracing-ms-self',
+              minWidth: 30,
+              initialWidth: 70,
+              resizable: true,
+            },
+            {
+              propName: 'icon',
+              titleL10nId: '',
+              component: Icon,
+              initialWidth: 10,
             },
-            { propName: 'icon', titleL10nId: '', component: Icon },
           ];
         case 'samples':
           return [
-            { propName: 'totalPercent', titleL10nId: '' },
+            {
+              propName: 'totalPercent',
+              titleL10nId: '',
+              initialWidth: 50,
+              hideDividerAfter: true,
+            },
             {
               propName: 'total',
               titleL10nId: 'CallTree--samples-total',
+              minWidth: 30,
+              initialWidth: 70,
+              resizable: true,
+              headerWidthAdjustment: 50,
             },
             {
               propName: 'self',
               titleL10nId: 'CallTree--samples-self',
+              minWidth: 30,
+              initialWidth: 70,
+              resizable: true,
+            },
+            {
+              propName: 'icon',
+              titleL10nId: '',
+              component: Icon,
+              initialWidth: 10,
             },
-            { propName: 'icon', titleL10nId: '', component: Icon },
           ];
         case 'bytes':
           return [
-            { propName: 'totalPercent', titleL10nId: '' },
+            {
+              propName: 'totalPercent',
+              titleL10nId: '',
+              initialWidth: 50,
+              hideDividerAfter: true,
+            },
             {
               propName: 'total',
               titleL10nId: 'CallTree--bytes-total',
+              minWidth: 30,
+              initialWidth: 140,
+              resizable: true,
+              headerWidthAdjustment: 50,
             },
             {
               propName: 'self',
               titleL10nId: 'CallTree--bytes-self',
+              minWidth: 30,
+              initialWidth: 90,
+              resizable: true,
+            },
+            {
+              propName: 'icon',
+              titleL10nId: '',
+              component: Icon,
+              initialWidth: 10,
             },
-            { propName: 'icon', titleL10nId: '', component: Icon },
           ];
         default:
           throw assertExhaustiveCheck(weightType, 'Unhandled WeightType.');
@@ -300,6 +359,8 @@ class CallTreeImpl extends PureComponent<Props> {
       disableOverscan,
       callNodeMaxDepth,
       weightType,
+      tableViewOptions,
+      onTableViewOptionsChange,
     } = this.props;
     if (tree.getRoots().length === 0) {
       return <CallTreeEmptyReasons />;
@@ -326,6 +387,8 @@ class CallTreeImpl extends PureComponent<Props> {
         onKeyDown={this._onKeyDown}
         onEnterKey={this._onEnterOrDoubleClick}
         onDoubleClick={this._onEnterOrDoubleClick}
+        viewOptions={tableViewOptions}
+        onViewOptionsChange={onTableViewOptionsChange}
       />
     );
   }
@@ -355,6 +418,7 @@ export const CallTree = explicitConnect<{||}, StateProps, DispatchProps>({
     callNodeMaxDepth:
       selectedThreadSelectors.getFilteredCallNodeMaxDepth(state),
     weightType: selectedThreadSelectors.getWeightTypeForCallTree(state),
+    tableViewOptions: getCurrentTableViewOptions(state),
   }),
   mapDispatchToProps: {
     changeSelectedCallNode,
@@ -363,6 +427,8 @@ export const CallTree = explicitConnect<{||}, StateProps, DispatchProps>({
     addTransformToStack,
     handleCallNodeTransformShortcut,
     openSourceView,
+    onTableViewOptionsChange: (options: TableViewOptions) =>
+      changeTableViewOptions('calltree', options),
   },
   component: CallTreeImpl,
 });

src/components/marker-table/index.js

@@ -14,12 +14,14 @@ import {
   getZeroAt,
   getScrollToSelectionGeneration,
   getMarkerSchemaByName,
+  getCurrentTableViewOptions,
 } from '../../selectors/profile';
 import { selectedThreadSelectors } from '../../selectors/per-thread';
 import { getSelectedThreadsKey } from '../../selectors/url-state';
 import {
   changeSelectedMarker,
   changeRightClickedMarker,
+  changeTableViewOptions,
 } from '../../actions/profile-view';
 import { MarkerSettings } from '../shared/MarkerSettings';
 import { formatSeconds, formatTimestamp } from '../../utils/format-numbers';
@@ -32,6 +34,7 @@ import type {
   MarkerIndex,
   Milliseconds,
   MarkerSchemaByName,
+  TableViewOptions,
 } from 'firefox-profiler/types';
 
 import type { ConnectedProps } from '../../utils/connect';
@@ -149,20 +152,40 @@ type StateProps = {|
   +scrollToSelectionGeneration: number,
   +markerSchemaByName: MarkerSchemaByName,
   +getMarkerLabel: (MarkerIndex) => string,
+  +tableViewOptions: TableViewOptions,
 |};
 
 type DispatchProps = {|
   +changeSelectedMarker: typeof changeSelectedMarker,
   +changeRightClickedMarker: typeof changeRightClickedMarker,
+  +onTableViewOptionsChange: (TableViewOptions) => any,
 |};
 
 type Props = ConnectedProps<{||}, StateProps, DispatchProps>;
 
 class MarkerTableImpl extends PureComponent<Props> {
   _fixedColumns = [
-    { propName: 'start', titleL10nId: 'MarkerTable--start' },
-    { propName: 'duration', titleL10nId: 'MarkerTable--duration' },
-    { propName: 'type', titleL10nId: 'MarkerTable--type' },
+    {
+      propName: 'start',
+      titleL10nId: 'MarkerTable--start',
+      minWidth: 30,
+      initialWidth: 90,
+      resizable: true,
+    },
+    {
+      propName: 'duration',
+      titleL10nId: 'MarkerTable--duration',
+      minWidth: 30,
+      initialWidth: 80,
+      resizable: true,
+    },
+    {
+      propName: 'type',
+      titleL10nId: 'MarkerTable--type',
+      minWidth: 30,
+      initialWidth: 150,
+      resizable: true,
+    },
   ];
   _mainColumn = { propName: 'name', titleL10nId: 'MarkerTable--description' };
   _expandedNodeIds: Array<MarkerIndex | null> = [];
@@ -247,6 +270,8 @@ class MarkerTableImpl extends PureComponent<Props> {
             contextMenuId="MarkerContextMenu"
             rowHeight={16}
             indentWidth={10}
+            viewOptions={this.props.tableViewOptions}
+            onViewOptionsChange={this.props.onTableViewOptionsChange}
           />
         )}
       </div>
@@ -266,7 +291,13 @@ export const MarkerTable = explicitConnect<{||}, StateProps, DispatchProps>({
     zeroAt: getZeroAt(state),
     markerSchemaByName: getMarkerSchemaByName(state),
     getMarkerLabel: selectedThreadSelectors.getMarkerTableLabelGetter(state),
+    tableViewOptions: getCurrentTableViewOptions(state),
   }),
-  mapDispatchToProps: { changeSelectedMarker, changeRightClickedMarker },
+  mapDispatchToProps: {
+    changeSelectedMarker,
+    changeRightClickedMarker,
+    onTableViewOptionsChange: (tableViewOptions) =>
+      changeTableViewOptions('marker-table', tableViewOptions),
+  },
   component: MarkerTableImpl,
 });