New widget icons and alignment added (#3195) (#3215)

Author: alexlindroos

packages/devtools_app/icons/custom/bg-gray-red.png

@@ -36,13 +36,13 @@ typedef TreeEventCallback = void Function(InspectorTreeNode node);
 // TODO(jacobr): merge this scheme with other color schemes in DevTools.
 extension InspectorColorScheme on ColorScheme {
   Color get selectedRowBackgroundColor => isLight
-      ? const Color.fromARGB(255, 202, 191, 69)
-      : const Color.fromARGB(255, 99, 101, 103);
+      ? const Color.fromARGB(255, 220, 220, 220)
+      : const Color.fromARGB(255, 73, 73, 73);
   Color get hoverColor =>
       isLight ? Colors.yellowAccent : const Color.fromARGB(255, 70, 73, 76);
 }
 
-const double iconPadding = 5.0;
+const double iconPadding = 4.0;
 const double chartLineStrokeWidth = 1.0;
 double get columnWidth => isDense() ? 12 : 16.0;
 double get verticalPadding => scaleByFontFactor(10.0);

packages/devtools_app/icons/custom/bg-green.png

@@ -669,7 +669,6 @@ class InspectorRowContent extends StatelessWidget {
                 },
                 child: Container(
                   height: rowHeight,
-                  padding: const EdgeInsets.symmetric(horizontal: 4.0),
                   child: DiagnosticsNodeDescription(
                     node.diagnostic,
                     isSelected: row.isSelected,

packages/devtools_app/icons/custom/bg-new-red.png

@@ -20,6 +20,7 @@ import '../ui/layout_explorer_widget.dart';
 import '../ui/theme.dart';
 import '../ui/utils.dart';
 import '../ui/widget_constraints.dart';
+import '../ui/widgets_theme.dart';
 
 class BoxLayoutExplorerWidget extends LayoutExplorerWidget {
   const BoxLayoutExplorerWidget(
@@ -215,7 +216,7 @@ class _BoxLayoutExplorerWidgetState extends LayoutExplorerWidgetState<
           height: constraints.maxHeight,
           decoration: BoxDecoration(
             border: Border.all(
-              color: regularWidgetColor,
+              color: WidgetTheme.fromName(properties.node.description).color,
             ),
           ),
           child: Stack(

packages/devtools_app/icons/custom/class.png

@@ -453,17 +453,29 @@ class _VisualizeFlexChildrenState extends State<VisualizeFlexChildren> {
         );
 
         final childrenRenderWidgets = <Widget>[];
+        Widget selectedWidget;
         for (var i = 0; i < widget.children.length; i++) {
           final child = widget.children[i];
           final isSelected = widget.highlighted == child;
 
-          childrenRenderWidgets.add(FlexChildVisualizer(
+          final visualizer = FlexChildVisualizer(
             key: isSelected ? selectedChildKey : null,
             state: widget.state,
             layoutProperties: child,
             isSelected: isSelected,
             renderProperties: renderProperties[i],
-          ));
+          );
+
+          if (isSelected) {
+            selectedWidget = visualizer;
+          } else {
+            childrenRenderWidgets.add(visualizer);
+          }
+        }
+
+        // Selected widget needs to be last to draw its border over other children
+        if (selectedWidget != null) {
+          childrenRenderWidgets.add(selectedWidget);
         }
 
         final freeSpacesWidgets = [
@@ -679,7 +691,7 @@ class FlexChildVisualizer extends StatelessWidget {
     return Positioned(
       top: renderOffset.dy,
       left: renderOffset.dx,
-      child: InkWell(
+      child: GestureDetector(
         onTap: () => state.onTap(properties),
         onDoubleTap: () => state.onDoubleTap(properties),
         onLongPress: () => state.onDoubleTap(properties),

packages/devtools_app/icons/custom/[email protected]

@@ -13,6 +13,7 @@ import '../../diagnostics_node.dart';
 import '../../inspector_data_models.dart';
 import 'overflow_indicator_painter.dart';
 import 'theme.dart';
+import 'widgets_theme.dart';
 
 /// A widget for positioning sized widgets that follows layout as follows:
 ///      | top    |
@@ -142,7 +143,10 @@ class WidgetVisualizer extends StatelessWidget {
 
   final OverflowSide overflowSide;
 
-  static const overflowIndicatorSize = 20.0;
+  static const _overflowIndicatorSize = 20.0;
+  static const _borderUnselectedWidth = 1.0;
+  static const _borderSelectedWidth = 3.0;
+  static const _selectedPadding = 4.0;
 
   bool get drawOverflow => overflowSide != null;
 
@@ -151,80 +155,96 @@ class WidgetVisualizer extends StatelessWidget {
     final theme = Theme.of(context);
     final colorScheme = theme.colorScheme;
     final properties = layoutProperties;
-    Color borderColor = regularWidgetColor;
-    if (properties is FlexLayoutProperties) {
-      borderColor =
-          properties?.direction == Axis.horizontal ? rowColor : columnColor;
-    }
-    if (isSelected) {
-      borderColor = selectedWidgetColor;
-    }
-    return Container(
-      child: Stack(
-        children: [
-          if (drawOverflow)
-            Positioned.fill(
-              child: CustomPaint(
-                painter: OverflowIndicatorPainter(
-                  overflowSide,
-                  overflowIndicatorSize,
-                ),
-              ),
-            ),
-          Container(
-            margin: EdgeInsets.only(
-              right: overflowSide == OverflowSide.right
-                  ? overflowIndicatorSize
-                  : 0.0,
-              bottom: overflowSide == OverflowSide.bottom
-                  ? overflowIndicatorSize
-                  : 0.0,
-            ),
-            color: isSelected ? colorScheme.backgroundColorSelected : null,
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              mainAxisSize: MainAxisSize.min,
+    final borderColor = WidgetTheme.fromName(properties.node.description).color;
+    final boxAdjust = isSelected ? _selectedPadding : 0.0;
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return OverflowBox(
+          minWidth: constraints.minWidth + boxAdjust,
+          maxWidth: constraints.maxWidth + boxAdjust,
+          maxHeight: constraints.maxHeight + boxAdjust,
+          minHeight: constraints.minHeight + boxAdjust,
+          child: Container(
+            child: Stack(
               children: [
-                IntrinsicHeight(
-                  child: Row(
+                if (drawOverflow)
+                  Positioned.fill(
+                    child: CustomPaint(
+                      painter: OverflowIndicatorPainter(
+                        overflowSide,
+                        _overflowIndicatorSize,
+                      ),
+                    ),
+                  ),
+                Container(
+                  margin: EdgeInsets.only(
+                    right: overflowSide == OverflowSide.right
+                        ? _overflowIndicatorSize
+                        : 0.0,
+                    bottom: overflowSide == OverflowSide.bottom
+                        ? _overflowIndicatorSize
+                        : 0.0,
+                  ),
+                  child: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    mainAxisSize: MainAxisSize.min,
                     children: [
-                      Flexible(
-                        child: Container(
-                          constraints: BoxConstraints(
-                              maxWidth: largeTitle
-                                  ? defaultMaxRenderWidth
-                                  : minRenderWidth *
-                                      widgetTitleMaxWidthPercentage),
-                          child: Center(
-                            child: Text(
-                              title,
-                              style:
-                                  TextStyle(color: colorScheme.widgetNameColor),
-                              overflow: TextOverflow.ellipsis,
+                      IntrinsicHeight(
+                        child: Row(
+                          crossAxisAlignment: CrossAxisAlignment.stretch,
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Flexible(
+                              child: Container(
+                                constraints: BoxConstraints(
+                                    maxWidth: largeTitle
+                                        ? defaultMaxRenderWidth
+                                        : minRenderWidth *
+                                            widgetTitleMaxWidthPercentage),
+                                child: Center(
+                                  child: Text(
+                                    title,
+                                    style: TextStyle(
+                                        color: colorScheme.widgetNameColor),
+                                    overflow: TextOverflow.ellipsis,
+                                  ),
+                                ),
+                                decoration: BoxDecoration(color: borderColor),
+                                padding: const EdgeInsets.all(4.0),
+                              ),
                             ),
-                          ),
-                          decoration: BoxDecoration(color: borderColor),
-                          padding: const EdgeInsets.all(4.0),
+                            if (hint != null) Flexible(child: hint),
+                          ],
                         ),
                       ),
-                      if (hint != null) Flexible(child: hint),
+                      if (child != null) Expanded(child: child),
                     ],
                   ),
                 ),
-                if (child != null) Expanded(child: child),
               ],
             ),
+            decoration: BoxDecoration(
+              border: Border.all(
+                color: borderColor,
+                width:
+                    isSelected ? _borderSelectedWidth : _borderUnselectedWidth,
+              ),
+              color: isSelected
+                  ? theme.canvasColor.brighten()
+                  : theme.canvasColor.darken(),
+              boxShadow: isSelected
+                  ? [
+                      BoxShadow(
+                        color: Colors.black.withOpacity(.5),
+                        blurRadius: 20,
+                      ),
+                    ]
+                  : null,
+            ),
           ),
-        ],
-      ),
-      decoration: BoxDecoration(
-        border: Border.all(
-          color: borderColor,
-        ),
-        color: theme.canvasColor.darken(),
-      ),
+        );
+      },
     );
   }
 }