Allow right click options (version 0.1.5) (#4)

* Allow right click options

* `NodeWidget` is now moved to this package
* Use gradient scroll view
* Use `DebugTreeView` instead of the generic `TreeView`

* Code cleanup

* Use `searchReference` along with the `link`

Author: sbis04

extension/devtools/build/flutter_bootstrap.js

@@ -3,11 +3,11 @@ const MANIFEST = 'flutter-app-manifest';
 const TEMP = 'flutter-temp-cache';
 const CACHE_NAME = 'flutter-app-cache';
 
-const RESOURCES = {"flutter_bootstrap.js": "c43f6b3d6cb22e11f4307ce2a12d1bbb",
-"version.json": "58c669002200e69eff81e37902cb1971",
+const RESOURCES = {"flutter_bootstrap.js": "2d275fb884f93fa49b29a9c7166c846d",
+"version.json": "0a388a4d54ecb5fc56daaf2a8e2b7923",
 "index.html": "aa6f466ba4f6154a3e7ad6465ec3796b",
 "/": "aa6f466ba4f6154a3e7ad6465ec3796b",
-"main.dart.js": "f870985b1af898cd1435f7a0908d79e4",
+"main.dart.js": "5756642eb2a3b4ec1066498d89ffbb59",
 "flutter.js": "383e55f7f3cce5be08fcf1f3881f585c",
 "favicon.png": "5dcef449791fa27946b3d35ad8803796",
 "icons/Icon-192.png": "ac9a721a12bbc803b44f645561ecb1e1",

extension/devtools/build/flutter_service_worker.js

@@ -1 +1 @@
-{"app_name":"flutterflow_debug_panel","version":"0.1.3","package_name":"flutterflow_debug_panel"}
+{"app_name":"flutterflow_debug_panel","version":"0.1.5","package_name":"flutterflow_debug_panel"}

extension/devtools/build/main.dart.js

@@ -1,4 +1,4 @@
 name: flutterflow_debug_panel
-version: 0.1.3
+version: 0.1.5
 issueTracker: https://github.com/FlutterFlow/flutterflow-issues/issues
 materialIconCodePoint: "0xe115"

extension/devtools/build/version.json

@@ -1,5 +1,6 @@
 import 'dart:async';
 
+import 'package:flutter/services.dart';
 import 'package:flutterflow_debug_panel/src/utils/debug_utils.dart';
 import 'package:flutterflow_debug_panel/src/widgets/debug_variables_panel.dart';
 import 'package:devtools_extensions/devtools_extensions.dart';
@@ -35,20 +36,26 @@ class _DebugPanelPageState extends State<DebugPanelPage> {
   @override
   void initState() {
     super.initState();
+    // Disable the browser's default context menu, so that we can show our
+    // custom right-click menu on the variables.
+    BrowserContextMenu.disableContextMenu();
     _appEventHandler();
   }
 
   @override
   void dispose() {
     extensionEventSubscription.cancel();
     vmService.dispose();
+    // Re-enable the browser's default context menu.
+    BrowserContextMenu.enableContextMenu();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) => ChangeNotifierProvider(
         create: (context) => variableDebugData,
         child: DebugVariablesPanel(
+          listGradientColor: Theme.of(context).scaffoldBackgroundColor,
           onEvent: (name, params) {
             if (kDebugMode) {
               debugPrint('$name, $params');

extension/devtools/config.yaml

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:flutterflow_debug_panel/src/widgets/flutterflow_gradient_scroll_view.dart';
+import 'package:flutterflow_tree_view/flutterflow_tree_view.dart';
+
+/// Tree view with collapsible and expandable nodes.
+class DebugTreeView extends StatelessWidget {
+  /// Constructs a tree view widget.
+  ///
+  /// - [nodes] parameter is a required list of [TreeNode] objects that represent the nodes in the tree.
+  /// - [treeController] parameter is an optional [TreeController] object that controls the behavior of the tree view.
+  /// - [nodeBuilder] parameter is a required function that builds a widget for each tree node.
+  DebugTreeView({
+    super.key,
+    required List<TreeNode> nodes,
+    required this.treeController,
+    required this.nodeBuilder,
+    this.listPadding,
+    this.listGradientColor,
+  }) : nodes = copyTreeNodes(nodes);
+
+  /// List of root level tree nodes.
+  final List<TreeNode> nodes;
+
+  /// Builder function to create a widget for each tree node.
+  final Widget Function(BuildContext context, FlattenTreeNode flattenedNode)
+      nodeBuilder;
+
+  /// Tree controller to manage the tree state.
+  final TreeController treeController;
+
+  /// Padding for the list view.
+  final EdgeInsets? listPadding;
+
+  /// Color for the gradient background of the list view.
+  final Color? listGradientColor;
+
+  @override
+  Widget build(BuildContext context) {
+    final flattenedTreeNode = FlattenTreeNode.getFlattenedTree(
+      nodes,
+      treeController,
+    );
+    return FlutterFlowGradientScrollView(
+      gradientHeight: 100,
+      gradientColor: listGradientColor,
+      child: (controller) => ListView.builder(
+        controller: controller,
+        padding: listPadding ?? EdgeInsets.zero,
+        itemCount: flattenedTreeNode.length,
+        itemBuilder: (context, index) =>
+            nodeBuilder(context, flattenedTreeNode[index]),
+      ),
+    );
+  }
+}

lib/src/pages/debug_panel_page.dart

@@ -20,10 +20,13 @@ class DebugVariablesPanel extends StatefulWidget {
   const DebugVariablesPanel({
     super.key,
     required this.onEvent,
+    this.listGradientColor,
   });
 
   final Function(String name, Map<String, dynamic>? params) onEvent;
 
+  final Color? listGradientColor;
+
   @override
   State<DebugVariablesPanel> createState() => _DebugVariablesPanelState();
 }
@@ -41,14 +44,22 @@ class _DebugVariablesPanelState extends State<DebugVariablesPanel> {
   void initState() {
     super.initState();
     _treeController = TreeController(
-      onNodeToggled: (name) {
+      onNodeToggled: (name, [isAllExpanded]) {
         if (mounted) {
           setState(() {});
         }
-        logEvent(
-          'debug-panel-toggle-section',
-          {'name': name},
-        );
+
+        if (name != null) {
+          logEvent(
+            'debug-panel-toggle-section',
+            {'name': name},
+          );
+        } else if (isAllExpanded != null) {
+          logEvent(
+            'debug-panel-${isAllExpanded ? 'expand' : 'collapse'}-all',
+            {},
+          );
+        }
       },
       onTreeEvent: (event) => widget.onEvent(event.name, event.params),
     );
@@ -188,9 +199,43 @@ class _DebugVariablesPanelState extends State<DebugVariablesPanel> {
                               ],
                             ),
                           )
-                        : NarrowModal(
-                            treeController: _treeController,
-                            narrowModalSections: filteredDebugTree,
+                        : Stack(
+                            children: [
+                              NarrowModal(
+                                treeController: _treeController,
+                                narrowModalSections: filteredDebugTree,
+                                listGradientColor: widget.listGradientColor,
+                              ),
+                              Align(
+                                alignment: Alignment.topRight,
+                                child: Padding(
+                                  padding: const EdgeInsets.only(top: 2.0),
+                                  child: InkWell(
+                                    borderRadius: BorderRadius.circular(8.0),
+                                    onTap: () =>
+                                        _treeController.allNodesExpanded
+                                            ? _treeController.collapseAll()
+                                            : _treeController.expandAll(),
+                                    child: Padding(
+                                      padding: const EdgeInsets.symmetric(
+                                        horizontal: kPadding8px,
+                                        vertical: kPadding2px,
+                                      ),
+                                      child: Text(
+                                        _treeController.allNodesExpanded
+                                            ? 'Collapse all'
+                                            : 'Expand all',
+                                        style: productSans(
+                                          context,
+                                          size: kFontSize12px,
+                                          color: context.theme.secondaryText,
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                            ],
                           ),
                   ),
                 ],

lib/src/widgets/debug_tree_view.dart

@@ -0,0 +1,141 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'package:flutterflow_debug_panel/src/themes/flutter_flow_default_theme.dart';
+import 'package:flutterflow_debug_panel/src/utils/ff_utils.dart';
+
+/// A scrollable widget that displays a gradient at the top and bottom.
+class FlutterFlowGradientScrollView extends StatefulWidget {
+  /// Creates a scrollable widget that displays a gradient at the top and bottom
+  /// based on the scroll position.
+  ///
+  /// * [child] parameter is the child widget that will be scrolled.
+  ///
+  /// * [gradientColor] parameter is the color of the gradient. If not provided,
+  /// it will use the panel color.
+  ///
+  /// * [gradientHeight] parameter is the height of the gradient. Default is 50.0.
+  const FlutterFlowGradientScrollView({
+    super.key,
+    required this.child,
+    this.gradientColor,
+    this.gradientHeight = 50.0,
+  });
+
+  /// The child widget that will be scrolled.
+  final ScrollView Function(ScrollController controller) child;
+
+  /// The color of the gradient. If not provided, it will use the panel color.
+  final Color? gradientColor;
+
+  /// The height of the gradient. Default is 50.0.
+  final double gradientHeight;
+
+  @override
+  State<FlutterFlowGradientScrollView> createState() =>
+      _FlutterFlowGradientScrollViewState();
+}
+
+class _FlutterFlowGradientScrollViewState
+    extends State<FlutterFlowGradientScrollView> {
+  var _showStartGradient = false;
+  var _showEndGradient = false;
+  double? _maxScrollExtent;
+  final _scrollController = ScrollController();
+
+  @override
+  Widget build(BuildContext context) {
+    // This is a workaround to get the max scroll extent after the first frame
+    // to set the initial state of the gradients, and to update the state when
+    // the scroll length changes.
+    SchedulerBinding.instance.addPostFrameCallback((_) {
+      if (_scrollController.positions.isNotEmpty &&
+          _scrollController.hasClients) {
+        if (_maxScrollExtent == null ||
+            _maxScrollExtent != _scrollController.position.maxScrollExtent) {
+          _maxScrollExtent = _scrollController.position.maxScrollExtent;
+          _showEndGradient = _showStartGradient =
+              _scrollController.position.maxScrollExtent > 0;
+          setState(() {});
+        }
+      }
+    });
+
+    final gradientColor = widget.gradientColor ?? context.theme.panelColor;
+    return Stack(
+      children: [
+        NotificationListener<ScrollNotification>(
+          onNotification: (scrollInfo) {
+            final extentBefore = scrollInfo.metrics.extentBefore;
+            final extentAfter = scrollInfo.metrics.extentAfter;
+            var updatedShowStartGradient = false;
+            var updatedShowEndGradient = false;
+            if (extentBefore > 0) {
+              updatedShowStartGradient = true;
+            } else {
+              updatedShowStartGradient = false;
+            }
+            if (extentAfter > 0) {
+              updatedShowEndGradient = true;
+            } else {
+              updatedShowEndGradient = false;
+            }
+            if (updatedShowStartGradient != _showStartGradient ||
+                updatedShowEndGradient != _showEndGradient) {
+              setState(() {
+                _showStartGradient = updatedShowStartGradient;
+                _showEndGradient = updatedShowEndGradient;
+              });
+            }
+            return true;
+          },
+          child: widget.child(_scrollController),
+        ),
+        IgnorePointer(
+          child: Column(
+            children: [
+              AnimatedOpacity(
+                duration: 300.millis,
+                opacity: _scrollController.positions.isNotEmpty &&
+                        _scrollController.offset > 0 &&
+                        _showStartGradient
+                    ? 1
+                    : 0,
+                child: Container(
+                  height: widget.gradientHeight,
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [
+                        gradientColor,
+                        gradientColor.withOpacity(0),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+              const Spacer(),
+              AnimatedOpacity(
+                duration: 300.millis,
+                opacity: _showEndGradient ? 1 : 0,
+                child: Container(
+                  height: widget.gradientHeight,
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [
+                        gradientColor.withOpacity(0),
+                        gradientColor,
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}