[Story of Your Layout] Interactive flex factor changer

packages/devtools_app/lib/src/inspector/flutter/inspector_data_models.dart

@@ -90,6 +90,7 @@ List<double> computeRenderSizes({
 }
 
 // TODO(albertusangga): Move this to [RemoteDiagnosticsNode] once dart:html app is removed
+/// Represents parsed layout information for a specific [RemoteDiagnosticsNode].
 class LayoutProperties {
  LayoutProperties(this.node, {int copyLevel = 1})
  : description = node?.description,
@@ -112,6 +113,8 @@ class LayoutProperties {
  final bool isFlex;
  final Size size;
 
+ bool get hasFlexFactor => flexFactor != null && flexFactor > 0;
+
  int get totalChildren => children?.length ?? 0;
 
  bool get hasChildren => children?.isNotEmpty ?? false;
@@ -154,7 +157,6 @@ class LayoutProperties {
  static BoxConstraints deserializeConstraints(Map<String, Object> json) {
  // TODO(albertusangga): Support SliverConstraint
  if (json == null || json['type'] != 'BoxConstraints') return null;
- // TODO(albertusangga): Simplify this json (i.e: when maxWidth is null it means it is unbounded)
  return BoxConstraints(
  minWidth: double.parse(json['minWidth']),
  maxWidth: double.parse(json['maxWidth']),
@@ -188,6 +190,7 @@ class FlexLayoutProperties extends LayoutProperties {
  }) : super(node);
 
  factory FlexLayoutProperties.fromDiagnostics(RemoteDiagnosticsNode node) {
+ if (node == null) return null;
  // Cache the properties on an expando so that local tweaks to
  // FlexLayoutProperties persist across multiple lookups from an
  // RemoteDiagnosticsNode.
@@ -406,15 +409,16 @@ class FlexLayoutProperties extends LayoutProperties {
  realSize: children[i].size,
  )
  ..mainAxisOffset = calculateMainAxisOffset(i)
- ..crossAxisOffset = calculateCrossAxisOffset(i),
+ ..crossAxisOffset = calculateCrossAxisOffset(i)
+ ..layoutProperties = children[i],
  );
  }
 
  final spaces = <RenderProperties>[];
  final actualLeadingSpace = leadingSpace(freeSpace);
  final actualBetweenSpace = betweenSpace(freeSpace);
  final renderPropsWithFullCrossAxisDimension =
- RenderProperties(axis: direction, isFreeSpace: true)
+ RenderProperties(axis: direction)
  ..crossAxisDimension = maxSizeAvailable(crossAxisDirection)
  ..crossAxisRealDimension = dimension(crossAxisDirection)
  ..crossAxisOffset = 0.0;
@@ -445,36 +449,36 @@ class FlexLayoutProperties extends LayoutProperties {
  }
 
  List<RenderProperties> crossAxisSpaces({
- @required List<RenderProperties> childrenRenderProps,
+ @required List<RenderProperties> childrenRenderProperties,
  @required double Function(Axis) maxSizeAvailable,
  }) {
  if (crossAxisAlignment == CrossAxisAlignment.stretch) return [];
  final spaces = <RenderProperties>[];
  for (var i = 0; i < children.length; ++i) {
  if (dimension(crossAxisDirection) ==
  children[i].dimension(crossAxisDirection) ||
-childrenRenderProps[i].crossAxisDimension ==
+childrenRenderProperties[i].crossAxisDimension ==
  maxSizeAvailable(crossAxisDirection)) continue;
 
- final renderInfo = childrenRenderProps[i];
- final space = renderInfo.clone();
+ final renderProperties = childrenRenderProperties[i];
+ final space = renderProperties.clone()..layoutProperties = null;
 
  space.crossAxisRealDimension =
  crossAxisDimension - space.crossAxisRealDimension;
  space.crossAxisDimension =
  maxSizeAvailable(crossAxisDirection) - space.crossAxisDimension;
-
+ if (space.crossAxisDimension <= 0.0) continue;
  if (crossAxisAlignment == CrossAxisAlignment.center) {
  space.crossAxisDimension *= 0.5;
  space.crossAxisRealDimension *= 0.5;
  spaces.add(space.clone()..crossAxisOffset = 0.0);
  spaces.add(space.clone()
- ..crossAxisOffset =
-renderInfo.crossAxisDimension + renderInfo.crossAxisOffset);
+ ..crossAxisOffset = renderProperties.crossAxisDimension +
+renderProperties.crossAxisOffset);
  } else {
  space.crossAxisOffset = crossAxisAlignment == CrossAxisAlignment.end
  ? 0
- : renderInfo.crossAxisDimension;
+ : renderProperties.crossAxisDimension;
  spaces.add(space);
  }
  }
@@ -496,13 +500,14 @@ class FlexLayoutProperties extends LayoutProperties {
  EnumUtils<TextBaseline>(TextBaseline.values);
 }
 
+/// RenderProperties contains information for rendering a [LayoutProperties] node
 class RenderProperties {
  RenderProperties({
  @required this.axis,
  Size size,
  Offset offset,
  Size realSize,
- this.isFreeSpace = false,
+ this.layoutProperties,
  }) : width = size?.width,
  height = size?.height,
  realWidth = realSize?.width,
@@ -512,11 +517,15 @@ class RenderProperties {
 
  final Axis axis;
 
- bool isFreeSpace;
+ /// represents which node is rendered for this object.
+ LayoutProperties layoutProperties;
+
  double dx, dy;
  double width, height;
  double realWidth, realHeight;
 
+ bool get isFreeSpace => layoutProperties == null;
+
  Size get size => Size(width, height);
 
  Size get realSize => Size(realWidth, realHeight);
@@ -585,7 +594,7 @@ class RenderProperties {
  size: size,
  offset: offset,
  realSize: realSize,
-isFreeSpace: isFreeSpace,
+layoutProperties: layoutProperties,
  );
  }
 }

packages/devtools_app/lib/src/inspector/flutter/inspector_screen_details_tab.dart

@@ -8,8 +8,6 @@ import 'package:flutter/widgets.dart';
 
 import '../diagnostics_node.dart';
 import '../inspector_controller.dart';
-import '../inspector_service.dart';
-import 'inspector_data_models.dart';
 import 'story_of_your_layout/flex.dart';
 
 class InspectorDetailsTabController extends StatelessWidget {
@@ -37,17 +35,15 @@ class InspectorDetailsTabController extends StatelessWidget {
  Widget build(BuildContext context) {
  final tabs = <Tab>[
  _buildTab('Details Tree'),
- if (InspectorController.enableExperimentalStoryOfLayout)
- _buildTab('Layout Details'),
+ _buildTab('Layout Details'),
  ];
  final tabViews = <Widget>[
  detailsTree,
- if (InspectorController.enableExperimentalStoryOfLayout)
- Banner(
- message: 'PROTOTYPE',
- location: BannerLocation.topStart,
- child: LayoutDetailsTab(controller: controller),
- ),
+ Banner(
+ message: 'PROTOTYPE',
+ location: BannerLocation.topStart,
+ child: LayoutDetailsTab(controller: controller),
+ ),
  ];
  final focusColor = Theme.of(context).focusColor;
  return Container(
@@ -92,6 +88,7 @@ class InspectorDetailsTabController extends StatelessWidget {
  }
 }
 
+/// Tab that acts as a proxy to decide which widget to be displayed
 class LayoutDetailsTab extends StatefulWidget {
  const LayoutDetailsTab({Key key, this.controller}) : super(key: key);
 
@@ -107,67 +104,27 @@ class _LayoutDetailsTabState extends State<LayoutDetailsTab>
 
  RemoteDiagnosticsNode get selected => controller?.selectedNode?.diagnostic;
 
- InspectorObjectGroupManager objectGroupManager;
-
- RemoteDiagnosticsNode root;
+ RemoteDiagnosticsNode previousSelection;
 
-RemoteDiagnosticsNode getRoot(RemoteDiagnosticsNode node) {
- if (!StoryOfYourFlexWidget.shouldDisplay(node)) return null;
-if (node.isFlex) return node;
- return node.parent;
+Widget rootWidget(RemoteDiagnosticsNode node) {
+ if (StoryOfYourFlexWidget.shouldDisplay(node))
+ return StoryOfYourFlexWidget(controller);
+ return const SizedBox();
  }
 
- void onSelectionChanged() async {
- if (!StoryOfYourFlexWidget.shouldDisplay(selected)) {
-setState(() => root = null);
-return;
+ void onSelectionChanged() {
+ if (rootWidget(previousSelection).runtimeType !=
+ rootWidget(selected).runtimeType) {
+setState(() => previousSelection = selected);
  }
- final shouldFetch =
- root?.dartDiagnosticRef?.id != getRoot(selected)?.dartDiagnosticRef?.id;
- if (shouldFetch) {
- objectGroupManager.cancelNext();
- // TODO(albertusangga) show loading animation when root is null?
- setState(() {
- root = null;
- });
-
- final nextObjectGroup = objectGroupManager.next;
- root = await nextObjectGroup.getDetailsSubtreeWithRenderObject(
- selected.isFlex ? selected : selected.parent,
- subtreeDepth: 1,
- );
- if (!nextObjectGroup.disposed) {
- assert(objectGroupManager.next == nextObjectGroup);
- objectGroupManager.promoteNext();
- }
- }
- setState(() {});
  }
 
  @override
  void initState() {
  super.initState();
- updateObjectGroupManager();
  controller.addSelectionListener(onSelectionChanged);
  }
 
- void updateObjectGroupManager() {
- final service = controller.inspectorService;
- if (service != objectGroupManager?.inspectorService) {
- objectGroupManager = InspectorObjectGroupManager(
- service,
- 'flex-layout',
- );
- }
- onSelectionChanged();
- }
-
- @override
- void didUpdateWidget(Widget oldWidget) {
- super.didUpdateWidget(oldWidget);
- updateObjectGroupManager();
- }
-
  @override
  void dispose() {
  controller.removeSelectionListener(onSelectionChanged);
@@ -177,17 +134,7 @@ class _LayoutDetailsTabState extends State<LayoutDetailsTab>
  @override
  Widget build(BuildContext context) {
  super.build(context);
- // TODO(albertusangga): Visualize non-flex widget constraint model
- if (root == null || !StoryOfYourFlexWidget.shouldDisplay(selected))
- return const SizedBox();
- final flexLayoutProperties = FlexLayoutProperties.fromDiagnostics(root);
- final highlightChild =
- selected.isFlex ? null : selected.parent.childrenNow.indexOf(selected);
- return StoryOfYourFlexWidget(
- flexLayoutProperties,
- highlightChild: highlightChild,
- inspectorController: controller,
- );
+ return rootWidget(selected);
  }
 
  @override

packages/devtools_app/lib/src/inspector/flutter/inspector_service_flutter_extension.dart

@@ -21,4 +21,20 @@ extension InspectorFlutterService on ObjectGroup {
  );
  return val;
  }
+
+ Future<InstanceRef> invokeTweakFlexFactor(
+ InspectorInstanceRef ref, int flexFactor) async {
+ final command = '((){'
+ ' dynamic object = WidgetInspectorService.instance.toObject("${ref?.id}");'
+ ' final render = object.renderObject;'
+ ' final FlexParentData parentData = render.parentData;'
+ ' parentData.flex = $flexFactor;'
+ ' render.markNeedsLayout();'
+ '})()';
+ final val = await inspectorLibrary.eval(
+ command,
+ isAlive: this,
+ );
+ return val;
+ }
 }