Add inspector tab switch analytics and fix regression with network sc…

…reen tabs (#3694)
flutter · Feb 15, 2022 · bfe463b · bfe463b
1 parent 1926efe
commit bfe463b
Show file tree

Hide file tree

Showing 12 changed files with 294 additions and 248 deletions.
diff --git a/packages/devtools_app/lib/src/analytics/_analytics_stub.dart b/packages/devtools_app/lib/src/analytics/_analytics_stub.dart
@@ -70,6 +70,7 @@ void select(
   String screenName,
   String selectedItem, {
   int value = 0,
+  bool nonInteraction,
   ScreenAnalyticsMetrics Function() screenMetricsProvider,
 }) {}
 

diff --git a/packages/devtools_app/lib/src/analytics/_analytics_web.dart b/packages/devtools_app/lib/src/analytics/_analytics_web.dart
@@ -427,6 +427,7 @@ void select(
   String screenName,
   String selectedItem, {
   int value = 0,
+  bool nonInteraction,
   ScreenAnalyticsMetrics Function() screenMetricsProvider,
 }) {
   GTag.event(
@@ -435,6 +436,7 @@ void select(
       event_category: analytics_constants.selectEvent,
       event_label: selectedItem,
       value: value,
+      non_interaction: nonInteraction,
       send_to: gaDevToolsPropertyId(),
       user_app: userAppType,
       user_build: userBuildType,

diff --git a/packages/devtools_app/lib/src/app_size/app_size_screen.dart b/packages/devtools_app/lib/src/app_size/app_size_screen.dart
@@ -83,10 +83,17 @@ class AppSizeBody extends StatefulWidget {
 
 class _AppSizeBodyState extends State<AppSizeBody>
     with AutoDisposeMixin, SingleTickerProviderStateMixin {
-  static final diffTab =
-      DevToolsTab(text: 'Diff', key: AppSizeScreen.diffTabKey);
-  static final analysisTab =
-      DevToolsTab(text: 'Analysis', key: AppSizeScreen.analysisTabKey);
+  static const _gaPrefix = 'appSizeTab';
+  static final diffTab = DevToolsTab.create(
+    tabName: 'Diff',
+    gaPrefix: _gaPrefix,
+    key: AppSizeScreen.diffTabKey,
+  );
+  static final analysisTab = DevToolsTab.create(
+    tabName: 'Analysis',
+    gaPrefix: _gaPrefix,
+    key: AppSizeScreen.analysisTabKey,
+  );
   static final tabs = [analysisTab, diffTab];
 
   AppSizeController controller;

diff --git a/packages/devtools_app/lib/src/inspector/inspector_screen.dart b/packages/devtools_app/lib/src/inspector/inspector_screen.dart
@@ -78,8 +78,6 @@ class InspectorScreenBodyState extends State<InspectorScreenBody>
 
   DebuggerController _debuggerController;
 
-  bool get enableButtons => actionInProgress == false;
-
   bool searchVisible = false;
 
   /// Indicates whether search can be closed. The value is set to true when
@@ -144,14 +142,6 @@ class InspectorScreenBodyState extends State<InspectorScreenBody>
     });
   }
 
-  void _onExpandClick() {
-    blockWhileInProgress(inspectorController.expandAllNodesInDetailsTree);
-  }
-
-  void _onResetClick() {
-    blockWhileInProgress(inspectorController.collapseDetailsToSelected);
-  }
-
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
@@ -175,10 +165,9 @@ class InspectorScreenBodyState extends State<InspectorScreenBody>
       initialFractions: const [0.33, 0.67],
       children: [
         summaryTree,
-        InspectorDetailsTabController(
+        InspectorDetails(
           detailsTree: detailsTree,
           controller: inspectorController,
-          actionButtons: _expandCollapseButtons(),
         ),
       ],
     );
@@ -309,44 +298,6 @@ class InspectorScreenBodyState extends State<InspectorScreenBody>
     ];
   }
 
-  Widget _expandCollapseButtons() {
-    return Container(
-      alignment: Alignment.centerRight,
-      decoration: BoxDecoration(
-        border: Border(
-          left: defaultBorderSide(Theme.of(context)),
-        ),
-      ),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.end,
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          SizedBox(
-            child: IconLabelButton(
-              icon: Icons.unfold_more,
-              onPressed: enableButtons ? _onExpandClick : null,
-              label: 'Expand all',
-              minScreenWidthForTextBeforeScaling:
-                  minScreenWidthForTextBeforeScaling,
-              outlined: false,
-            ),
-          ),
-          const SizedBox(width: denseSpacing),
-          SizedBox(
-            child: IconLabelButton(
-              icon: Icons.unfold_less,
-              onPressed: enableButtons ? _onResetClick : null,
-              label: 'Collapse to selected',
-              minScreenWidthForTextBeforeScaling:
-                  minScreenWidthForTextBeforeScaling,
-              outlined: false,
-            ),
-          )
-        ],
-      ),
-    );
-  }
-
   void _refreshInspector() {
     ga.select(analytics_constants.inspector, analytics_constants.refresh);
     blockWhileInProgress(() async {

diff --git a/packages/devtools_app/lib/src/inspector/inspector_screen_details_tab.dart b/packages/devtools_app/lib/src/inspector/inspector_screen_details_tab.dart
@@ -6,119 +6,145 @@
 
 import 'package:flutter/material.dart';
 
-import '../primitives/auto_dispose_mixin.dart';
+import '../analytics/analytics.dart' as ga;
+import '../analytics/constants.dart' as analytics_constants;
+import '../primitives/blocking_action_mixin.dart';
+import '../shared/common_widgets.dart';
 import '../shared/theme.dart';
 import '../shared/utils.dart';
 import '../ui/tab.dart';
 import 'inspector_controller.dart';
+import 'inspector_screen.dart';
 import 'layout_explorer/layout_explorer.dart';
 
-class InspectorDetailsTabController extends StatefulWidget {
-  const InspectorDetailsTabController({
-    this.detailsTree,
-    this.actionButtons,
-    this.controller,
+class InspectorDetails extends StatelessWidget {
+  const InspectorDetails({
+    @required this.detailsTree,
+    @required this.controller,
     Key key,
   }) : super(key: key);
 
   final Widget detailsTree;
-  final Widget actionButtons;
   final InspectorController controller;
 
-  @override
-  _InspectorDetailsTabControllerState createState() =>
-      _InspectorDetailsTabControllerState();
-}
-
-class _InspectorDetailsTabControllerState
-    extends State<InspectorDetailsTabController>
-    with TickerProviderStateMixin, AutoDisposeMixin {
-  static const _detailsTreeTabIndex = 1;
-  static const _tabsLengthWithLayoutExplorer = 2;
-
-  TabController _tabController;
-
-  @override
-  void initState() {
-    super.initState();
-    addAutoDisposeListener(
-      _tabController = TabController(
-        length: _tabsLengthWithLayoutExplorer,
-        vsync: this,
-      ),
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
-    final tabs = <Tab>[
-      _buildTab('Layout Explorer'),
-      _buildTab('Widget Details Tree'),
+    final tabs = [
+      _buildTab(tabName: 'Layout Explorer'),
+      _buildTab(
+        tabName: 'Widget Details Tree',
+        trailing: InspectorExpandCollapseButtons(controller: controller),
+      ),
     ];
     final tabViews = <Widget>[
-      LayoutExplorerTab(controller: widget.controller),
-      widget.detailsTree,
+      LayoutExplorerTab(controller: controller),
+      detailsTree,
     ];
     final theme = Theme.of(context);
     final focusColor = theme.focusColor;
     final borderSide = BorderSide(color: focusColor);
-    final hasActionButtons = widget.actionButtons != null &&
-        _tabController.index == _detailsTreeTabIndex;
 
-    return Column(
-      children: <Widget>[
-        Container(
-          height: defaultButtonHeight +
-              (isDense() ? denseModeDenseSpacing : denseSpacing),
-          decoration: BoxDecoration(
-            border: Border.all(color: Theme.of(context).focusColor),
-          ),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.end,
-            children: <Widget>[
-              TabBar(
-                controller: _tabController,
-                labelColor: theme.textTheme.bodyText1.color,
-                tabs: tabs,
-                isScrollable: true,
-              ),
-              Expanded(
-                child: Container(
-                  alignment: Alignment.centerRight,
-                  child: hasActionButtons
-                      ? widget.actionButtons
-                      : const SizedBox(),
-                ),
-              ),
-            ],
-          ),
+    return AnalyticsTabbedView(
+      tabs: tabs,
+      tabViews: tabViews,
+      gaScreen: analytics_constants.inspector,
+      tabBarContainer: (child) => Container(
+        height: defaultButtonHeight +
+            (isDense() ? denseModeDenseSpacing : denseSpacing),
+        decoration: BoxDecoration(
+          border: Border.all(color: Theme.of(context).focusColor),
         ),
-        Expanded(
-          child: Container(
-            decoration: BoxDecoration(
-              border: Border(
-                left: borderSide,
-                bottom: borderSide,
-                right: borderSide,
-              ),
-            ),
-            child: TabBarView(
-              physics: defaultTabBarViewPhysics,
-              controller: _tabController,
-              children: tabViews,
-            ),
+        child: child,
+      ),
+      tabViewContainer: (child) => Container(
+        decoration: BoxDecoration(
+          border: Border(
+            left: borderSide,
+            bottom: borderSide,
+            right: borderSide,
           ),
         ),
-      ],
+        child: child,
+      ),
     );
   }
 
-  Widget _buildTab(String tabName) {
-    return DevToolsTab(
-      child: Text(
-        tabName,
-        overflow: TextOverflow.ellipsis,
+  DevToolsTab _buildTab({@required String tabName, Widget trailing}) {
+    return DevToolsTab.create(
+      tabName: tabName,
+      gaPrefix: 'inspectorDetailsTab',
+      trailing: trailing,
+    );
+  }
+}
+
+class InspectorExpandCollapseButtons extends StatefulWidget {
+  const InspectorExpandCollapseButtons({
+    Key key,
+    @required this.controller,
+  }) : super(key: key);
+
+  final InspectorController controller;
+
+  @override
+  State<InspectorExpandCollapseButtons> createState() =>
+      _InspectorExpandCollapseButtonsState();
+}
+
+class _InspectorExpandCollapseButtonsState
+    extends State<InspectorExpandCollapseButtons> with BlockingActionMixin {
+  bool get enableButtons => actionInProgress == false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      alignment: Alignment.centerRight,
+      decoration: BoxDecoration(
+        border: Border(
+          left: defaultBorderSide(Theme.of(context)),
+        ),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.end,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SizedBox(
+            child: IconLabelButton(
+              icon: Icons.unfold_more,
+              onPressed: enableButtons ? _onExpandClick : null,
+              label: 'Expand all',
+              minScreenWidthForTextBeforeScaling:
+                  InspectorScreenBodyState.minScreenWidthForTextBeforeScaling,
+              outlined: false,
+            ),
+          ),
+          const SizedBox(width: denseSpacing),
+          SizedBox(
+            child: IconLabelButton(
+              icon: Icons.unfold_less,
+              onPressed: enableButtons ? _onCollapseClick : null,
+              label: 'Collapse to selected',
+              minScreenWidthForTextBeforeScaling:
+                  InspectorScreenBodyState.minScreenWidthForTextBeforeScaling,
+              outlined: false,
+            ),
+          )
+        ],
       ),
     );
   }
+
+  void _onExpandClick() {
+    blockWhileInProgress(() async {
+      ga.select(analytics_constants.inspector, analytics_constants.expandAll);
+      await widget.controller.expandAllNodesInDetailsTree();
+    });
+  }
+
+  void _onCollapseClick() {
+    blockWhileInProgress(() async {
+      ga.select(analytics_constants.inspector, analytics_constants.collapseAll);
+      await widget.controller.collapseDetailsToSelected();
+    });
+  }
 }
diff --git a/packages/devtools_app/lib/src/memory/memory_heap_tree_view.dart b/packages/devtools_app/lib/src/memory/memory_heap_tree_view.dart
@@ -149,9 +149,19 @@ class HeapTreeViewState extends State<HeapTree>
   static const int analysisTabIndex = 0;
   static const int allocationsTabIndex = 1;
 
+  static const _gaPrefix = 'memoryTab';
+
   static final List<Tab> dartHeapTabs = [
-    DevToolsTab(key: dartHeapAnalysisTabKey, text: 'Analysis'),
-    DevToolsTab(key: dartHeapAllocationsTabKey, text: 'Allocations'),
+    DevToolsTab.create(
+      key: dartHeapAnalysisTabKey,
+      gaPrefix: _gaPrefix,
+      tabName: 'Analysis',
+    ),
+    DevToolsTab.create(
+      key: dartHeapAllocationsTabKey,
+      gaPrefix: _gaPrefix,
+      tabName: 'Allocations',
+    ),
   ];
 
   MemoryController controller;

diff --git a/packages/devtools_app/lib/src/memory/memory_screen.dart b/packages/devtools_app/lib/src/memory/memory_screen.dart
@@ -23,7 +23,6 @@ import '../shared/screen.dart';
 import '../shared/theme.dart';
 import '../shared/utils.dart';
 import '../ui/icons.dart';
-import '../ui/tab.dart';
 import 'memory_android_chart.dart' as android;
 import 'memory_charts.dart';
 import 'memory_controller.dart';
@@ -76,11 +75,6 @@ class MemoryScreen extends Screen {
 class MemoryBody extends StatefulWidget {
   const MemoryBody();
 
-  static final List<Tab> memoryTabs = [
-    DevToolsTab(text: 'Analysis'),
-    DevToolsTab(text: 'Allocations'),
-  ];
-
   @override
   MemoryBodyState createState() => MemoryBodyState();
 }