Add a horizontal scrollbar to DevTools tables (#9482)

Author: elliette

packages/devtools_app/lib/src/screens/memory/panes/profile/profile_view.dart

@@ -404,6 +404,7 @@ class _GCStatsTable extends StatelessWidget {
             columns: _columns,
             defaultSortColumn: _columns.first,
             defaultSortDirection: SortDirection.ascending,
+            sizeColumnsToFit: false,
           ),
         );
       },
@@ -426,6 +427,8 @@ class AllocationProfileTableView extends StatefulWidget {
 
 class AllocationProfileTableViewState
     extends State<AllocationProfileTableView> {
+  static const _scrollbarHeight = 10.0;
+
   @override
   void initState() {
     super.initState();
@@ -459,7 +462,10 @@ class AllocationProfileTableViewState
                   // and columns) and one data row. We add a slight padding to
                   // ensure the underlying scrollable area has enough space to not
                   // display a scroll bar.
-                  height: defaultRowHeight + defaultHeaderHeight * 2 + 1,
+                  height:
+                      defaultRowHeight +
+                      defaultHeaderHeight * 2 +
+                      _scrollbarHeight,
                   child: _GCStatsTable(controller: widget.controller),
                 ),
                 const ThickDivider(),

packages/devtools_app/lib/src/shared/table/_flat_table.dart

@@ -317,7 +317,6 @@ class FlatTableState<T> extends State<FlatTable<T>> with AutoDisposeMixin {
 
   Widget _buildRow({
     required BuildContext context,
-    required LinkedScrollControllerGroup linkedScrollControllerGroup,
     required int index,
     required List<double> columnWidths,
     required bool isPinned,
@@ -327,7 +326,6 @@ class FlatTableState<T> extends State<FlatTable<T>> with AutoDisposeMixin {
     final data = isPinned ? pinnedData : tableController.tableData.value.data;
     if (index >= data.length) {
       return TableRow<T>.filler(
-        linkedScrollControllerGroup: linkedScrollControllerGroup,
         columns: tableController.columns,
         columnGroups: tableController.columnGroups,
         columnWidths: columnWidths,
@@ -344,7 +342,6 @@ class FlatTableState<T> extends State<FlatTable<T>> with AutoDisposeMixin {
       builder: (context, selected, _) {
         return TableRow<T>(
           key: widget.keyFactory(node),
-          linkedScrollControllerGroup: linkedScrollControllerGroup,
           node: node,
           onPressed: (T? selection) {
             widget.selectionNotifier.value = selection;

packages/devtools_app/lib/src/shared/table/_table_column.dart

@@ -129,15 +129,12 @@ class _ColumnGroupHeaderRow extends StatelessWidget {
   const _ColumnGroupHeaderRow({
     required this.groups,
     required this.columnWidths,
-    required this.scrollController,
   });
 
   final List<ColumnGroup> groups;
 
   final List<double> columnWidths;
 
-  final ScrollController scrollController;
-
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -147,7 +144,6 @@ class _ColumnGroupHeaderRow extends StatelessWidget {
       ),
       child: ListView.builder(
         scrollDirection: Axis.horizontal,
-        controller: scrollController,
         itemCount: groups.length + groups.numSpacers,
         itemBuilder: (context, int i) {
           if (i % 2 == 1) {

packages/devtools_app/lib/src/shared/table/_table_row.dart

@@ -18,7 +18,6 @@ class TableRow<T> extends StatefulWidget {
   /// [node].
   const TableRow({
     super.key,
-    required this.linkedScrollControllerGroup,
     required this.node,
     required this.columns,
     required this.columnWidths,
@@ -44,7 +43,6 @@ class TableRow<T> extends StatefulWidget {
   /// Constructs a [TableRow] that is empty.
   const TableRow.filler({
     super.key,
-    required this.linkedScrollControllerGroup,
     required this.columns,
     required this.columnWidths,
     this.columnGroups,
@@ -71,7 +69,6 @@ class TableRow<T> extends StatefulWidget {
   /// of any [node].
   const TableRow.tableColumnHeader({
     super.key,
-    required this.linkedScrollControllerGroup,
     required this.columns,
     required this.columnWidths,
     required this.columnGroups,
@@ -98,7 +95,6 @@ class TableRow<T> extends StatefulWidget {
   /// [node].
   const TableRow.tableColumnGroupHeader({
     super.key,
-    required this.linkedScrollControllerGroup,
     required this.columnGroups,
     required this.columnWidths,
     required this.sortColumn,
@@ -121,8 +117,6 @@ class TableRow<T> extends StatefulWidget {
        enableHoverHandling = false,
        _rowType = _TableRowType.columnGroupHeader;
 
-  final LinkedScrollControllerGroup linkedScrollControllerGroup;
-
   final T? node;
 
   final List<ColumnData<T>> columns;
@@ -200,8 +194,6 @@ class _TableRowState<T> extends State<TableRow<T>>
         SearchableMixin {
   Key? contentKey;
 
-  late ScrollController scrollController;
-
   bool isSearchMatch = false;
 
   bool isActiveSearchMatch = false;
@@ -216,7 +208,6 @@ class _TableRowState<T> extends State<TableRow<T>>
   void initState() {
     super.initState();
     contentKey = ValueKey(this);
-    scrollController = widget.linkedScrollControllerGroup.addAndGet();
     _initSearchListeners();
 
     _rowDisplayParts = _rowDisplayPartsHelper();
@@ -242,11 +233,6 @@ class _TableRowState<T> extends State<TableRow<T>>
   void didUpdateWidget(TableRow<T> oldWidget) {
     super.didUpdateWidget(oldWidget);
     setExpanded(widget.isExpanded);
-    if (oldWidget.linkedScrollControllerGroup !=
-        widget.linkedScrollControllerGroup) {
-      scrollController.dispose();
-      scrollController = widget.linkedScrollControllerGroup.addAndGet();
-    }
 
     _rowDisplayParts = _rowDisplayPartsHelper();
 
@@ -256,12 +242,6 @@ class _TableRowState<T> extends State<TableRow<T>>
     _initSearchListeners();
   }
 
-  @override
-  void dispose() {
-    scrollController.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
     final node = widget.node;
@@ -530,18 +510,13 @@ class _TableRowState<T> extends State<TableRow<T>>
       return _ColumnGroupHeaderRow(
         groups: groups,
         columnWidths: widget.columnWidths,
-        scrollController: scrollController,
       );
     }
 
     Widget rowContent = Padding(
       padding: const EdgeInsets.symmetric(horizontal: defaultSpacing),
-      child: ExtentDelegateListView(
-        scrollDirection: Axis.horizontal,
-        physics: const ClampingScrollPhysics(),
-        controller: scrollController,
-        extentDelegate: rowExtentDelegate,
-        childrenDelegate: SliverChildBuilderDelegate((context, int i) {
+      child: Row(
+        children: List.generate(_rowDisplayParts.length, (int i) {
           final columnIndexMap = _columnIndexMapHelper(_rowDisplayParts);
           final displayTypeForIndex = _rowDisplayParts[i];
           switch (displayTypeForIndex) {
@@ -559,7 +534,7 @@ class _TableRowState<T> extends State<TableRow<T>>
             case _TableRowPartDisplayType.columnGroupSpacer:
               return const _ColumnGroupSpacer();
           }
-        }, childCount: _rowDisplayParts.length),
+        }),
       ),
     );
 

packages/devtools_app/lib/src/shared/table/_tree_table.dart

@@ -282,7 +282,6 @@ class TreeTableState<T extends TreeNode<T>> extends State<TreeTable<T>>
 
   Widget _buildRow({
     required BuildContext context,
-    required LinkedScrollControllerGroup linkedScrollControllerGroup,
     required int index,
     required List<double> columnWidths,
     required bool isPinned,
@@ -293,7 +292,6 @@ class TreeTableState<T extends TreeNode<T>> extends State<TreeTable<T>>
       node.index = index;
       return TableRow<T>(
         key: widget.keyFactory(node),
-        linkedScrollControllerGroup: linkedScrollControllerGroup,
         node: node,
         onPressed: (item) => _onItemPressed(item, index),
         backgroundColor: alternatingColorForIndex(