Replace heatmap with treemap in memory page
diff --git a/packages/devtools_app/lib/src/charts/treemap.dart b/packages/devtools_app/lib/src/charts/treemap.dart
new file mode 100644
index 0000000..a093093
--- /dev/null
+++ b/packages/devtools_app/lib/src/charts/treemap.dart
@@ -0,0 +1,546 @@
+import 'package:flutter/material.dart';
+
+import '../common_widgets.dart';
+import '../trees.dart';
+import '../ui/colors.dart';
+import '../utils.dart';
+
+enum PivotType { pivotByMiddle, pivotBySize }
+
+class Treemap extends StatelessWidget {
+ const Treemap.fromRoot({
+ @required this.rootNode,
+ this.nodes,
+ @required this.levelsVisible,
+ @required this.isOutermostLevel,
+ @required this.height,
+ @required this.onRootChangedCallback,
+ });
+
+ const Treemap.fromNodes({
+ this.rootNode,
+ @required this.nodes,
+ @required this.levelsVisible,
+ @required this.isOutermostLevel,
+ @required this.height,
+ @required this.onRootChangedCallback,
+ });
+
+ final TreemapNode rootNode;
+
+ final List<TreemapNode> nodes;
+
+ /// The depth of children visible from this Treemap widget.
+ ///
+ /// A decremented level should be passed in when constructing [Treemap.fromRoot],
+ /// but not when constructing [Treemap.fromNodes]. This is because
+ /// when constructing from a root, [Treemap] either builds a nested [Treemap] to
+ /// show its node's children, or it shows its node. When constructing from a list
+ /// of nodes, however, [Treemap] is built to become part of a bigger treemap,
+ /// which means the level should not change.
+ ///
+ /// For example, levelsVisible = 2:
+ /// ```
+ /// _______________
+ /// | Root |
+ /// ---------------
+ /// | 1 |
+ /// | --------- |
+ /// | | 2 | |
+ /// | | | |
+ /// | | | |
+ /// | --------- |
+ /// ---------------
+ /// ```
+ final int levelsVisible;
+
+ /// Whether current levelsVisible matches the outermost level.
+ final bool isOutermostLevel;
+
+ final double height;
+
+ final void Function(TreemapNode node) onRootChangedCallback;
+
+ static const PivotType pivotType = PivotType.pivotBySize;
+
+ static const treeMapHeaderHeight = 20.0;
+
+ static const minHeightToDisplayTitleText = 20.0;
+
+ static const minHeightToDisplayCellText = 40.0;
+
+ /// Computes the total size of a given list of treemap nodes.
+ /// [endIndex] defaults to nodes.length - 1.
+ int computeByteSizeForNodes({
+ @required List<TreemapNode> nodes,
+ int startIndex = 0,
+ int endIndex,
+ }) {
+ endIndex ??= nodes.length - 1;
+ int sum = 0;
+ for (int i = startIndex; i <= endIndex; i++) {
+ sum += nodes[i].byteSize;
+ }
+ return sum;
+ }
+
+ int computePivot(List<TreemapNode> children) {
+ switch (pivotType) {
+ case PivotType.pivotByMiddle:
+ return (children.length / 2).floor();
+ case PivotType.pivotBySize:
+ int pivotIndex = -1;
+ double maxSize = double.negativeInfinity;
+ for (int i = 0; i < children.length; i++) {
+ if (children[i].byteSize > maxSize) {
+ maxSize = children[i].byteSize.toDouble();
+ pivotIndex = i;
+ }
+ }
+ return pivotIndex;
+ default:
+ return -1;
+ }
+ }
+
+ /// Implements the ordered treemap algorithm studied in [this research paper](https://www.cs.umd.edu/~ben/papers/Shneiderman2001Ordered.pdf).
+ ///
+ /// **Algorithm**
+ ///
+ /// Divides a given list of treemap nodes into four parts:
+ /// L1, P, L2, L3.
+ ///
+ /// P (pivot) is the treemap node chosen to be the pivot based on the pivot type.
+ /// L1 includes all treemap nodes before the pivot treemap node.
+ /// L2 and L3 combined include all treemap nodes after the pivot treemap node.
+ /// A combination of elements are put into L2 and L3 so that
+ /// the aspect ratio of the pivot cell (P) is as close to 1 as it can be.
+ ///
+ /// **Layout**
+ /// ```
+ /// ----------------------
+ /// | | P | |
+ /// | | | |
+ /// | L1 |------| L3 |
+ /// | | L2 | |
+ /// | | | |
+ /// ----------------------
+ /// ```
+ List<Positioned> buildTreemaps({
+ @required List<TreemapNode> children,
+ @required double width,
+ @required double height,
+ }) {
+ final isHorizontalRectangle = width > height;
+
+ final totalByteSize = computeByteSizeForNodes(nodes: children);
+ if (children.isEmpty) {
+ return [];
+ }
+
+ // Sort the list of treemap nodes, descending in size.
+ children.sort((a, b) => b.byteSize.compareTo(a.byteSize));
+ if (children.length <= 2) {
+ final positionedChildren = <Positioned>[];
+ double offset = 0;
+
+ for (final child in children) {
+ final ratio = child.byteSize / totalByteSize;
+
+ positionedChildren.add(
+ Positioned(
+ left: isHorizontalRectangle ? offset : 0.0,
+ top: isHorizontalRectangle ? 0.0 : offset,
+ width: isHorizontalRectangle ? ratio * width : width,
+ height: isHorizontalRectangle ? height : ratio * height,
+ child: Treemap.fromRoot(
+ rootNode: child,
+ levelsVisible: levelsVisible - 1,
+ isOutermostLevel: false,
+ onRootChangedCallback: onRootChangedCallback,
+ height: height,
+ ),
+ ),
+ );
+ offset += isHorizontalRectangle ? ratio * width : ratio * height;
+ }
+
+ return positionedChildren;
+ }
+
+ final pivotIndex = computePivot(children);
+
+ final pivotNode = children[pivotIndex];
+ final pivotByteSize = pivotNode.byteSize;
+
+ final list1 = children.sublist(0, pivotIndex);
+ final list1ByteSize = computeByteSizeForNodes(nodes: list1);
+
+ var list2 = <TreemapNode>[];
+ int list2ByteSize = 0;
+ var list3 = <TreemapNode>[];
+ int list3ByteSize = 0;
+
+ // The maximum amount of data we can put in [list3].
+ final l3MaxLength = children.length - pivotIndex - 1;
+ int bestIndex = 0;
+ double pivotBestWidth = 0;
+ double pivotBestHeight = 0;
+
+ // We need to be able to put at least 3 elements in [list3] for this algorithm.
+ if (l3MaxLength >= 3) {
+ double pivotBestAspectRatio = double.infinity;
+ // Iterate through different combinations of [list2] and [list3] to find
+ // the combination where the aspect ratio of pivot is the lowest.
+ for (int i = pivotIndex + 1; i < children.length; i++) {
+ final list2Size = computeByteSizeForNodes(
+ nodes: children,
+ startIndex: pivotIndex + 1,
+ endIndex: i,
+ );
+
+ // Calculate the aspect ratio for the pivot treemap node.
+ final pivotAndList2Ratio = (pivotByteSize + list2Size) / totalByteSize;
+ final pivotRatio = pivotByteSize / (pivotByteSize + list2Size);
+
+ final pivotWidth = isHorizontalRectangle
+ ? pivotAndList2Ratio * width
+ : pivotRatio * width;
+
+ final pivotHeight = isHorizontalRectangle
+ ? pivotRatio * height
+ : pivotAndList2Ratio * height;
+
+ final pivotAspectRatio = pivotWidth / pivotHeight;
+
+ // Best aspect ratio that is the closest to 1.
+ if ((1 - pivotAspectRatio).abs() < (1 - pivotBestAspectRatio).abs()) {
+ pivotBestAspectRatio = pivotAspectRatio;
+ bestIndex = i;
+ // Kept track of width and height to construct the pivot cell.
+ pivotBestWidth = pivotWidth;
+ pivotBestHeight = pivotHeight;
+ }
+ }
+ // Split the rest of the data into [list2] and [list3].
+ list2 = children.sublist(pivotIndex + 1, bestIndex + 1);
+ list2ByteSize = computeByteSizeForNodes(nodes: list2);
+
+ list3 = children.sublist(bestIndex + 1);
+ list3ByteSize = computeByteSizeForNodes(nodes: list3);
+ } else {
+ // Put all data in [list2] and none in [list3].
+ list2 = children.sublist(pivotIndex + 1);
+ list2ByteSize = computeByteSizeForNodes(nodes: list2);
+
+ final pivotAndList2Ratio =
+ (pivotByteSize + list2ByteSize) / totalByteSize;
+ final pivotRatio = pivotByteSize / (pivotByteSize + list2ByteSize);
+ pivotBestWidth = isHorizontalRectangle
+ ? pivotAndList2Ratio * width
+ : pivotRatio * width;
+ pivotBestHeight = isHorizontalRectangle
+ ? pivotRatio * height
+ : pivotAndList2Ratio * height;
+ }
+
+ final positionedTreemaps = <Positioned>[];
+
+ // Contruct list 1 sub-treemap.
+ final list1SizeRatio = list1ByteSize / totalByteSize;
+ final list1Width = isHorizontalRectangle ? width * list1SizeRatio : width;
+ final list1Height =
+ isHorizontalRectangle ? height : height * list1SizeRatio;
+ if (list1.isNotEmpty) {
+ positionedTreemaps.add(
+ Positioned(
+ left: 0.0,
+ right: 0.0,
+ width: list1Width,
+ height: list1Height,
+ child: Treemap.fromNodes(
+ nodes: list1,
+ levelsVisible: levelsVisible,
+ isOutermostLevel: isOutermostLevel,
+ onRootChangedCallback: onRootChangedCallback,
+ height: height,
+ ),
+ ),
+ );
+ }
+
+ // Construct list 2 sub-treemap.
+ final list2Width =
+ isHorizontalRectangle ? pivotBestWidth : width - pivotBestWidth;
+ final list2Height =
+ isHorizontalRectangle ? height - pivotBestHeight : pivotBestHeight;
+ final list2XCoord = isHorizontalRectangle ? list1Width : 0.0;
+ final list2YCoord = isHorizontalRectangle ? pivotBestHeight : list1Height;
+ if (list2.isNotEmpty) {
+ positionedTreemaps.add(
+ Positioned(
+ left: list2XCoord,
+ top: list2YCoord,
+ width: list2Width,
+ height: list2Height,
+ child: Treemap.fromNodes(
+ nodes: list2,
+ levelsVisible: levelsVisible,
+ isOutermostLevel: isOutermostLevel,
+ onRootChangedCallback: onRootChangedCallback,
+ height: height,
+ ),
+ ),
+ );
+ }
+
+ // Construct pivot cell.
+ final pivotXCoord = isHorizontalRectangle ? list1Width : list2Width;
+ final pivotYCoord = isHorizontalRectangle ? 0.0 : list1Height;
+
+ positionedTreemaps.add(
+ Positioned(
+ left: pivotXCoord,
+ top: pivotYCoord,
+ width: pivotBestWidth,
+ height: pivotBestHeight,
+ child: Treemap.fromRoot(
+ rootNode: pivotNode,
+ levelsVisible: levelsVisible - 1,
+ isOutermostLevel: false,
+ onRootChangedCallback: onRootChangedCallback,
+ height: height,
+ ),
+ ),
+ );
+
+ // Construct list 3 sub-treemap.
+ final list3Ratio = list3ByteSize / totalByteSize;
+ final list3Width = isHorizontalRectangle ? list3Ratio * width : width;
+ final list3Height = isHorizontalRectangle ? height : list3Ratio * height;
+ final list3XCoord =
+ isHorizontalRectangle ? list1Width + pivotBestWidth : 0.0;
+ final list3YCoord =
+ isHorizontalRectangle ? 0.0 : list1Height + pivotBestHeight;
+
+ if (list3.isNotEmpty) {
+ positionedTreemaps.add(
+ Positioned(
+ left: list3XCoord,
+ top: list3YCoord,
+ width: list3Width,
+ height: list3Height,
+ child: Treemap.fromNodes(
+ nodes: list3,
+ levelsVisible: levelsVisible,
+ isOutermostLevel: isOutermostLevel,
+ onRootChangedCallback: onRootChangedCallback,
+ height: height,
+ ),
+ ),
+ );
+ }
+
+ return positionedTreemaps;
+ }
+
+ Text buildNameAndSizeText({
+ @required Color fontColor,
+ @required bool oneLine,
+ }) {
+ return Text(
+ rootNode.displayText(oneLine: oneLine),
+ style: TextStyle(color: fontColor),
+ textAlign: TextAlign.center,
+ overflow: TextOverflow.ellipsis,
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ if (rootNode == null && nodes.isNotEmpty) {
+ return buildSubTreemaps();
+ } else {
+ return buildTreemap(context);
+ }
+ }
+
+ /// **Treemap widget layout**
+ /// ```
+ /// ----------------------------
+ /// | Title Text |
+ /// |--------------------------|
+ /// | |
+ /// | Cell |
+ /// | |
+ /// | |
+ /// ----------------------------
+ /// ```
+ Widget buildTreemap(BuildContext context) {
+ if (levelsVisible > 0 && rootNode.children.isNotEmpty) {
+ return Padding(
+ padding: const EdgeInsets.all(1.0),
+ child: Column(
+ children: [
+ if (height > minHeightToDisplayTitleText) buildTitleText(context),
+ Expanded(
+ child: Treemap.fromNodes(
+ nodes: rootNode.children,
+ levelsVisible: levelsVisible,
+ isOutermostLevel: isOutermostLevel,
+ onRootChangedCallback: onRootChangedCallback,
+ height: height,
+ ),
+ ),
+ ],
+ ),
+ );
+ } else {
+ return Column(
+ children: [
+ Expanded(
+ child: buildSelectable(
+ child: Container(
+ decoration: BoxDecoration(
+ color: mainUiColor,
+ border: Border.all(color: Colors.black87),
+ ),
+ child: Center(
+ child: height > minHeightToDisplayCellText
+ ? buildNameAndSizeText(
+ fontColor: Colors.black,
+ oneLine: false,
+ )
+ : const SizedBox(),
+ ),
+ ),
+ ),
+ ),
+ ],
+ );
+ }
+ }
+
+ Widget buildTitleText(BuildContext context) {
+ if (isOutermostLevel) {
+ final pathFromRoot = rootNode.pathFromRoot();
+ // Build breadcrumbs navigator.
+ return Container(
+ height: treeMapHeaderHeight,
+ child: ListView.separated(
+ shrinkWrap: true,
+ scrollDirection: Axis.horizontal,
+ separatorBuilder: (context, index) {
+ return const Text(' > ');
+ },
+ itemCount: pathFromRoot.length,
+ itemBuilder: (BuildContext context, int index) {
+ return buildSelectable(
+ child: Text(
+ index < pathFromRoot.length - 1
+ ? pathFromRoot[index].name
+ : pathFromRoot[index].displayText(),
+ ),
+ newRoot: pathFromRoot[index],
+ );
+ },
+ ),
+ );
+ } else {
+ return buildSelectable(
+ child: Container(
+ height: treeMapHeaderHeight,
+ width: double.infinity,
+ decoration: BoxDecoration(
+ border: Border.all(color: Colors.black87),
+ ),
+ child: buildNameAndSizeText(
+ fontColor: Theme.of(context).textTheme.bodyText2.color,
+ oneLine: true,
+ ),
+ ),
+ );
+ }
+ }
+
+ /// Builds a selectable container with [child] as its child.
+ ///
+ /// Selecting this widget will trigger a re-root of the tree
+ /// to the associated [TreemapNode].
+ ///
+ /// The default value for newRoot is [rootNode].
+ Tooltip buildSelectable({@required Widget child, TreemapNode newRoot}) {
+ newRoot ??= rootNode;
+ return Tooltip(
+ message: rootNode.displayText(),
+ waitDuration: tooltipWait,
+ preferBelow: false,
+ child: InkWell(
+ onTap: () {
+ if (rootNode.children.isNotEmpty) onRootChangedCallback(newRoot);
+ },
+ child: child,
+ ),
+ );
+ }
+
+ Widget buildSubTreemaps() {
+ return LayoutBuilder(
+ builder: (context, constraints) {
+ return Stack(
+ children: buildTreemaps(
+ children: nodes,
+ width: constraints.maxWidth,
+ height: constraints.maxHeight,
+ ),
+ );
+ },
+ );
+ }
+}
+
+class TreemapNode extends TreeNode<TreemapNode> {
+ TreemapNode({
+ @required this.name,
+ this.byteSize = 0,
+ this.childrenMap = const <String, TreemapNode>{},
+ }) : assert(name != null),
+ assert(byteSize != null),
+ assert(childrenMap != null);
+
+ final String name;
+ final Map<String, TreemapNode> childrenMap;
+ int byteSize;
+
+ String displayText({bool oneLine = true}) {
+ final separator = oneLine ? ' ' : '\n';
+ return '$name$separator[${prettyPrintBytes(byteSize, includeUnit: true)}]';
+ }
+
+ /// Returns a list of [TreemapNode] in the path from root node to [this].
+ List<TreemapNode> pathFromRoot() {
+ TreemapNode node = this;
+ final path = <TreemapNode>[];
+ while (node != null) {
+ path.add(node);
+ node = node.parent;
+ }
+ return path.reversed.toList();
+ }
+
+ void printTree() {
+ printTreeHelper(this, '');
+ }
+
+ void printTreeHelper(TreemapNode root, String tabs) {
+ print(tabs + '$root');
+ for (final child in root.children) {
+ printTreeHelper(child, tabs + '\t');
+ }
+ }
+
+ @override
+ String toString() {
+ return '{name: $name, size: $byteSize}';
+ }
+}
diff --git a/packages/devtools_app/lib/src/logging/logging_controller.dart b/packages/devtools_app/lib/src/logging/logging_controller.dart
index 8960c04..eb01c98 100644
--- a/packages/devtools_app/lib/src/logging/logging_controller.dart
+++ b/packages/devtools_app/lib/src/logging/logging_controller.dart
@@ -386,7 +386,7 @@
final String summary = '${isolateRef['name']} • '
'${e.json['reason']} collection in $time ms • '
- '${printMb(usedBytes)} MB used of ${printMb(capacityBytes)} MB';
+ '${printMB(usedBytes, includeUnit: true)} used of ${printMB(capacityBytes, includeUnit: true)}';
final Map<String, dynamic> event = <String, dynamic>{
'reason': e.json['reason'],
diff --git a/packages/devtools_app/lib/src/memory/memory_controller.dart b/packages/devtools_app/lib/src/memory/memory_controller.dart
index 5687d7f..77081ff 100644
--- a/packages/devtools_app/lib/src/memory/memory_controller.dart
+++ b/packages/devtools_app/lib/src/memory/memory_controller.dart
@@ -52,12 +52,12 @@
static const logFilenamePrefix = 'memory_log_';
- final _showHeatMap = ValueNotifier<bool>(false);
+ final _showTreemap = ValueNotifier<bool>(false);
- ValueListenable<bool> get showHeatMap => _showHeatMap;
+ ValueListenable<bool> get showTreemap => _showTreemap;
- void toggleShowHeatMap(bool value) {
- _showHeatMap.value = value;
+ void toggleShowTreeMap(bool value) {
+ _showTreemap.value = value;
}
final snapshots = <Snapshot>[];
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
index 70cf4f7..28f40a3 100644
--- a/packages/devtools_app/lib/src/memory/memory_heap_tree_view.dart
+++ b/packages/devtools_app/lib/src/memory/memory_heap_tree_view.dart
@@ -23,8 +23,8 @@
import 'memory_controller.dart';
import 'memory_filter.dart';
import 'memory_graph_model.dart';
-import 'memory_heatmap.dart';
import 'memory_snapshot_models.dart';
+import 'memory_treemap.dart';
import 'memory_utils.dart';
class HeapTree extends StatefulWidget {
@@ -227,12 +227,8 @@
: _isSnapshotComplete ? 'Done' : '...'),
]);
} else if (controller.snapshotByLibraryData != null) {
- if (controller.showHeatMap.value) {
- snapshotDisplay = HeatMapSizeAnalyzer(
- child: SizedBox.expand(
- child: FlameChart(controller),
- ),
- );
+ if (controller.showTreemap.value) {
+ snapshotDisplay = MemoryTreemap(controller);
} else {
snapshotDisplay = MemorySnapshotTable();
}
@@ -268,7 +264,7 @@
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(child: snapshotDisplay),
- if (hasDetails) const SizedBox(width: defaultSpacing),
+ hasDetails ? const SizedBox(width: defaultSpacing) : const SizedBox(),
// TODO(terry): Need better focus handling between 2 tables & up/down
// arrows in the right-side field instance view table.
controller.isLeafSelected
@@ -343,13 +339,13 @@
const SizedBox(width: defaultSpacing),
Row(
children: [
- const Text('Heat Map'),
+ const Text('Treemap'),
Switch(
- value: controller.showHeatMap.value,
+ value: controller.showTreemap.value,
onChanged: (value) {
setState(() {
closeAutoCompleteOverlay();
- controller.toggleShowHeatMap(value);
+ controller.toggleShowTreeMap(value);
controller.search = '';
controller.selectedLeaf = null;
});
@@ -358,13 +354,13 @@
],
),
const SizedBox(width: defaultSpacing),
- controller.showHeatMap.value
+ controller.showTreemap.value
? const SizedBox()
: _groupByDropdown(textTheme),
const SizedBox(width: defaultSpacing),
// TODO(terry): Mechanism to handle expand/collapse on both
// tables objects/fields. Maybe notion in table?
- controller.showHeatMap.value
+ controller.showTreemap.value
? const SizedBox()
: OutlineButton(
key: collapseAllButtonKey,
@@ -386,7 +382,7 @@
: null,
child: const Text('Collapse All'),
),
- controller.showHeatMap.value
+ controller.showTreemap.value
? const SizedBox()
: OutlineButton(
key: expandAllButtonKey,
@@ -463,7 +459,7 @@
),
);
- if (controller.showHeatMap.value && controller.snapshots.isNotEmpty) {
+ if (controller.showTreemap.value && controller.snapshots.isNotEmpty) {
searchFieldFocusNode.requestFocus();
}
diff --git a/packages/devtools_app/lib/src/memory/memory_heatmap.dart b/packages/devtools_app/lib/src/memory/memory_heatmap.dart
deleted file mode 100644
index 5d18241..0000000
--- a/packages/devtools_app/lib/src/memory/memory_heatmap.dart
+++ /dev/null
@@ -1,684 +0,0 @@
-// Copyright 2020 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'dart:math' as math;
-import 'dart:math';
-import 'dart:ui';
-
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart' hide TextStyle;
-import 'package:flutter/rendering.dart' hide TextStyle;
-import 'package:flutter/widgets.dart' hide TextStyle;
-import 'package:intl/intl.dart';
-import 'package:provider/provider.dart';
-
-import '../auto_dispose_mixin.dart';
-import '../ui/colors.dart';
-
-import 'memory_controller.dart';
-import 'memory_graph_model.dart';
-import 'memory_utils.dart';
-
-/// UX navigation in a heat map e.g.,
-/// ------------------------------------------------------------
-/// | ||| || |||| | | new String | | || Foundation (38M) |
-/// ------------------------------------------------------------
-/// || | | | | List | String | | || src (42M) |
-/// ------------------------------------------------------------
-/// | src (36.4M) | dart:core (58M) |package:flutter (42M)|
-/// ------------------------------------------------------------
-/// | Root (136M) |
-/// ------------------------------------------------------------
-/// Mouse action (click or mouse scroll wheel) over a rectangle for example
-/// package:flutter will to expand its contained children to more rectangles
-/// upwards. The sizes of the contained children (if an aggregated parent).
-/// Mouse action over, upward, children will further expand its children in
-/// a upward fashion too. To collapse a rectangle move the mouse below a child
-/// rectangle (its parent) and click or mouse scroll.
-
-class HeatMapSizeAnalyzer extends SingleChildRenderObjectWidget {
- const HeatMapSizeAnalyzer({
- Key key,
- Widget child,
- }) : super(key: key, child: child);
-
- @override
- RenderFlameChart createRenderObject(BuildContext context) {
- return RenderFlameChart();
- }
-}
-
-class RenderFlameChart extends RenderProxyBox {
- @override
- void paint(PaintingContext context, Offset offset) {
- if (child != null) {
- context.paintChild(child, offset);
- }
- }
-}
-
-class FlameChart extends StatefulWidget {
- const FlameChart(
- this.controller,
- );
-
- final MemoryController controller;
-
- @override
- FlameChartState createState() => FlameChartState(controller);
-}
-
-class FlameChartState extends State<FlameChart> with AutoDisposeMixin {
- FlameChartState(this.controller);
-
- InstructionsSize sizes;
-
- Map<String, Function> callbacks = {};
-
- MemoryController controller;
-
- Widget snapshotDisplay;
-
- _FlameChart _flameChart;
-
- @override
- void initState() {
- super.initState();
- }
-
- @override
- void didChangeDependencies() {
- super.didChangeDependencies();
-
- // TODO(terry): Unable to short-circuit need to investigate why?
- controller = Provider.of<MemoryController>(context);
-
- cancel();
-
- addAutoDisposeListener(controller.selectedSnapshotNotifier, () {
- setState(() {
- controller.computeAllLibraries(true, true);
-
- sizes = InstructionsSize.fromSnapshop(controller);
- });
- });
-
- addAutoDisposeListener(controller.filterNotifier, () {
- setState(() {
- controller.computeAllLibraries(true, true);
- });
- });
-
- addAutoDisposeListener(controller.selectTheSearchNotifier, () {
- setState(() {
- if (_trySelectItem()) {
- closeAutoCompleteOverlay();
- }
- });
- });
-
- addAutoDisposeListener(controller.searchNotifier, () {
- setState(() {
- if (_trySelectItem()) {
- closeAutoCompleteOverlay();
- }
- });
- });
-
- addAutoDisposeListener(controller.searchAutoCompleteNotifier, () {
- setState(autoCompleteOverlaySetState(controller, context));
- });
- }
-
- /// Returns true if node found and node selected.
- bool _trySelectItem() {
- if (controller.search.isNotEmpty) {
- if (controller.selectTheSearch) {
- // Select the node.
- final node = findNode(controller.search);
- selectNode(node);
-
- closeAutoCompleteOverlay();
-
- controller.selectTheSearch = false;
- controller.search = '';
- return true;
- } else {
- var matches = matchNames(controller.search)..sort();
- // No exact match, return top matches.
- matches = matches.sublist(0, min(topMatchesLimit, matches.length));
- controller.searchAutoComplete.value = matches;
- }
- } else if (controller.selectTheSearch) {
- // Escape hit, on empty search.
- selectNode(null);
- controller.selectTheSearch = false;
- }
-
- return false;
- }
-
- @override
- void dispose() {
- super.dispose();
- }
-
- @override
- Widget build(BuildContext context) {
- sizes = InstructionsSize.fromSnapshop(controller);
-
- if (sizes != null) {
- _flameChart = _FlameChart(
- sizes,
- // TODO(terry): Can the color range match flame chart? Review with UX.
- memoryHeatMapLightColor,
- memoryHeatMapDarkColor,
- callbacks,
- );
- return _flameChart;
- } else {
- return const SizedBox();
- }
- }
-
- List<String> matchNames(String searchValue) {
- final MatchNamesFunction callback = _flameChart.callbacks[matchNamesKey];
- return callback(searchValue);
- }
-
- Node findNode(String searchValue) {
- final FindNodeFunction callback = _flameChart.callbacks[findNodeKey];
- return callback(searchValue);
- }
-
- void selectNode(Node nodeValue) {
- final SelectNodeFunction callback = _flameChart.callbacks[selectNodeKey];
- callback(nodeValue);
- }
-}
-
-/// Definitions of exposed callback methods stored in callback Map the key
-/// is the function name (String) and the value a callback function signature.
-
-/// matchNames callback name.
-const matchNamesKey = 'matchNames';
-
-/// matchNames callback signature.
-typedef MatchNamesFunction = List<String> Function(String);
-
-/// findNode callback name.
-const findNodeKey = 'findNode';
-
-/// findNode callback signature.
-typedef FindNodeFunction = Node Function(String);
-
-/// selectNode callback name.
-const selectNodeKey = 'selectNode';
-
-/// selectNode callback signature.
-typedef SelectNodeFunction = void Function(Node);
-
-class _FlameChart extends LeafRenderObjectWidget {
- const _FlameChart(
- this.sizes, this.lightColor, this.darkColor, this.callbacks);
-
- final InstructionsSize sizes;
-
- final Color lightColor;
-
- final Color darkColor;
-
- final Map<String, Function> callbacks;
-
- @override
- FlameChartRenderObject createRenderObject(BuildContext context) {
- return FlameChartRenderObject()
- // callbacks must be before sizes as hookup is done in sizes setter.
- ..callbacks = callbacks
- ..sizes = sizes
- ..lightColor = lightColor
- ..darkColor = darkColor;
- }
-
- @override
- void updateRenderObject(
- BuildContext context,
- FlameChartRenderObject renderObject,
- ) {
- renderObject
- ..sizes = sizes
- ..lightColor = lightColor
- ..darkColor = darkColor;
- }
-}
-
-class FlameChartRenderObject extends RenderBox {
- FlameChartRenderObject();
-
- InstructionsSize _sizes;
-
- Offset paintOffset;
-
- Map<String, Function> callbacks;
-
- set sizes(InstructionsSize value) {
- callbacks[matchNamesKey] = _exposeMatchNames;
- callbacks[findNodeKey] = _exposeFindNode;
- callbacks[selectNodeKey] = _exposeSelectNode;
-
- if (value == _sizes) {
- return;
- }
- _sizes = value;
- _selectedNode ??= value.root;
- markNeedsPaint();
- }
-
- Color _lightColor;
-
- set lightColor(Color value) {
- if (value == _lightColor) {
- return;
- }
- _lightColor = value;
- markNeedsPaint();
- }
-
- Color _darkColor;
-
- set darkColor(Color value) {
- if (value == _lightColor) {
- return;
- }
- _darkColor = value;
- markNeedsPaint();
- }
-
- List<String> _exposeMatchNames(String searchName) {
- return matchNodeNames(_sizes.root.children, searchName);
- }
-
- /// Look for the node with a particular name (depth first traversal).
- List<String> matchNodeNames(Map<String, Node> children, String searchName) {
- final matches = <String>[];
- final matchName = searchName.toLowerCase();
- for (var child in children.entries) {
- final node = child.value;
-
- final lcNodeName = node.name.toLowerCase();
- if (!lcNodeName.endsWith('.dart') && lcNodeName.startsWith(matchName)) {
- matches.add(node.name);
- }
- if (node.children.isNotEmpty) {
- final childMatches = matchNodeNames(node.children, searchName);
- if (childMatches.isNotEmpty) {
- matches.addAll(childMatches);
- }
- }
- }
-
- return matches;
- }
-
- Node _exposeFindNode(String searchName) {
- return findNode(_sizes.root.children, searchName);
- }
-
- /// Look for the node with a particular name (depth first traversal).
- Node findNode(Map<String, Node> children, String searchName) {
- final matchName = searchName.toLowerCase();
- for (var child in children.entries) {
- final node = child.value;
- if (node.children.isEmpty) {
- return node.name.toLowerCase() == matchName ? node : null;
- } else {
- if (node.name.toLowerCase() == matchName) return node;
- final foundNode = findNode(node.children, matchName);
- if (foundNode != null) return foundNode;
- }
- }
-
- return null;
- }
-
- void _exposeSelectNode(Node value) {
- selectedNode = value;
- }
-
- Node _selectedNode;
-
- set selectedNode(Node value) {
- value ??= _sizes.root;
- if (value == _selectedNode) {
- return;
- }
- _selectedNode = value;
-
- markNeedsPaint();
- }
-
- @override
- bool get sizedByParent => true;
-
- @override
- bool hitTest(BoxHitTestResult result, {Offset position}) {
- final computedPosition =
- Offset(position.dx + paintOffset.dx, position.dy + paintOffset.dy);
-
- final node = _selectedNode.findRect(computedPosition);
- if (node != null) {
- selectedNode = node;
- }
-
- return super.hitTest(result, position: position);
- }
-
- @override
- void paint(PaintingContext context, Offset offset) {
- paintOffset = offset;
-
- final rootWidth = size.width;
- final top = _paintAncestors(context, _selectedNode.ancestors);
-
- _paintNode(
- context, _selectedNode, 0 + paintOffset.dx, rootWidth, top - offset.dy);
-
- _paintChildren(
- context: context,
- currentLeft: 1 + offset.dx,
- parentSize: _selectedNode.byteSize,
- children: _selectedNode.children.values,
- topFactor: top + Node.nodeHeight + 1 - offset.dy,
- maxWidth: rootWidth - 1,
- );
- }
-
- final _logs = <int, double>{};
- final _inverseColors = <Color, Color>{};
-
- void _paintNode(
- PaintingContext context,
- Node node,
- double left,
- double width,
- double top,
- ) {
- node.rect = Rect.fromLTWH(left, size.height - top, width, Node.nodeHeight);
- final double t =
- _logs.putIfAbsent(node.byteSize, () => math.log(node.byteSize)) /
- _logs.putIfAbsent(
- _sizes.root.byteSize, () => math.log(_sizes.root.byteSize));
- final Color backgroundColor = Color.lerp(
- _lightColor,
- _darkColor,
- t,
- );
-
- context.canvas.drawRRect(
- RRect.fromRectAndRadius(node.rect, const Radius.circular(2.0)),
- Paint()..color = backgroundColor,
- );
- // Don't bother figuring out the text length if the box is too small.
- if (width < 100) {
- return;
- }
-
- final formattedByteSize = NumberFormat.compact().format(node.byteSize);
-
- final builder = ParagraphBuilder(
- ParagraphStyle(
- textAlign: TextAlign.center,
- maxLines: 2,
- ellipsis: '...',
- ),
- )
- ..pushStyle(
- TextStyle(
- color: _inverseColors.putIfAbsent(backgroundColor, () {
- return HSLColor.fromColor(backgroundColor).lightness > .7
- ? const Color(0xFF000000)
- : const Color(0xFFFFFFFF);
- }),
- fontFamily: 'Courier New',
- ),
- )
- ..addText('${node.name}\n($formattedByteSize)');
- final Paragraph paragraph = builder.build()
- ..layout(ParagraphConstraints(width: width - 5));
- context.canvas.drawParagraph(
- paragraph,
- Offset(10 + left, size.height - top + 10),
- );
- }
-
- double _paintAncestors(PaintingContext context, List<Node> nodes) {
- double top = Node.nodeHeight;
- for (var node in nodes.reversed) {
- _paintNode(
- context, node, 0 + paintOffset.dx, size.width, top - paintOffset.dy);
- top += Node.nodeHeight;
- }
- return top;
- }
-
- void _paintChildren({
- PaintingContext context,
- double currentLeft,
- int parentSize,
- Iterable<Node> children,
- double topFactor,
- double maxWidth,
- }) {
- double left = currentLeft;
-
- for (var child in children) {
- final double width = child.byteSize / parentSize * maxWidth;
- _paintNode(context, child, left, width, topFactor);
-
- if (!child.isLeaf) {
- final double factor = math.max(
- 0.0001,
- math.min(
- math.log(maxWidth * .01),
- math.log(width * .1),
- ),
- );
- // Very minor chunk of memory, just skip display for now. Smaller than 1 pixel in width.
- if (factor < width) {
- _paintChildren(
- context: context,
- currentLeft: left + factor,
- parentSize: child.byteSize,
- children: child.children.values,
- topFactor: topFactor + Node.nodeHeight + 1,
- maxWidth: width - (2 * factor),
- );
- }
- }
- left += width;
- }
- }
-}
-
-class InstructionsSize {
- const InstructionsSize(this.root);
-
- factory InstructionsSize.fromSnapshop(MemoryController controller) {
- final Map<String, Node> rootChildren = <String, Node>{};
- final Node root = Node(
- 'root',
- children: rootChildren,
- );
- Node currentParent = root;
-
- // TODO(terry): Should heat map be all memory or just the filtered group?
- // Using rawGroup not graph.groupByLibrary.
- controller.heapGraph.rawGroupByLibrary.forEach(
- (libraryGroup, value) {
- final classes = value;
- for (final theClass in classes) {
- final shallowSize = theClass.instancesTotalShallowSizes;
- var className = theClass.name;
- if (shallowSize == 0 ||
- libraryGroup == null ||
- className == null ||
- className == '::') {
- continue;
- }
-
- // Ensure the empty library name is our group name e.g., '' -> 'src'.
- String libraryName = theClass.libraryUri.toString();
- if (libraryName.isEmpty) {
- libraryName = libraryGroup;
- }
-
- // Map class names to familar user names.
- final predefined =
- predefinedClasses[LibraryClass(libraryName, className)];
- if (predefined != null) {
- className = predefined.prettyName;
- }
-
- final symbol = Symbol(
- name: 'new $className',
- size: shallowSize,
- libraryUri: libraryName,
- className: className,
- );
-
- Map<String, Node> currentChildren = rootChildren;
- final Node parentReset = currentParent;
- for (String pathPart in symbol.parts) {
- currentChildren.putIfAbsent(
- pathPart,
- () => Node(pathPart,
- parent: currentParent, children: <String, Node>{}),
- );
- currentChildren[pathPart].byteSize += symbol.size;
- currentParent = currentChildren[pathPart];
- currentChildren = currentChildren[pathPart].children;
- }
- currentParent = parentReset;
- }
- },
- );
-
- root.byteSize = root.children.values
- .fold(0, (int current, Node node) => current + node.byteSize);
-
- final snapshotGraph = controller.snapshots.last.snapshotGraph;
-
- // Add the external heap to the heat map.
- root.children.putIfAbsent('External Heap', () {
- final node = Node(
- 'External Heap',
- parent: root,
- children: <String, Node>{},
- );
- node.byteSize = snapshotGraph.externalSize;
- return node;
- });
-
- // Add the filtered libraries/classes to the heat map.
- root.children.putIfAbsent('All Filtered Libraries', () {
- final node = Node(
- 'All Filtered Libraries',
- parent: root,
- children: <String, Node>{},
- );
- node.byteSize = snapshotGraph.shallowSize - root.byteSize;
- return node;
- });
-
- root.byteSize = snapshotGraph.shallowSize + snapshotGraph.externalSize;
-
- return InstructionsSize(root);
- }
-
- final Node root;
-}
-
-class Node {
- Node(
- this.name, {
- this.byteSize = 0,
- this.parent,
- this.children = const <String, Node>{},
- }) : assert(name != null),
- assert(byteSize != null),
- assert(children != null);
-
- static const double nodeHeight = 50.0;
-
- final String name;
- int byteSize;
- Rect rect = Rect.zero;
- final Node parent;
- final Map<String, Node> children;
-
- Iterable<Node> get ancestors {
- final nodes = <Node>[];
- Node current = this;
- while (current.parent != null) {
- nodes.add(current.parent);
- current = current.parent;
- }
- return nodes;
- }
-
- bool get isLeaf => children.isEmpty;
-
- Node findRect(Offset offset) {
- if (rect.contains(offset)) {
- return this;
- }
- for (var ancestor in ancestors) {
- if (ancestor.rect.contains(offset)) {
- return ancestor;
- }
- }
- for (var child in children.values) {
- final value = child.findRect(offset);
- if (value != null) {
- return value;
- }
- }
- return null;
- }
-
- @override
- String toString() => 'Node($name, $byteSize, $rect)';
-}
-
-class Symbol {
- const Symbol({
- @required this.name,
- @required this.size,
- this.libraryUri,
- this.className,
- }) : assert(name != null),
- assert(size != null);
-
- static Symbol fromMap(Map<String, dynamic> json) {
- return Symbol(
- name: json['n'] as String,
- size: json['s'] as int,
- className: json['c'] as String,
- libraryUri: json['l'] as String,
- );
- }
-
- final String name;
- final int size;
- final String libraryUri;
- final String className;
-
- List<String> get parts {
- return <String>[
- if (libraryUri != null) ...libraryUri.split('/') else '@stubs',
- if (className != null && className.isNotEmpty) className,
- name,
- ];
- }
-}
diff --git a/packages/devtools_app/lib/src/memory/memory_treemap.dart b/packages/devtools_app/lib/src/memory/memory_treemap.dart
new file mode 100644
index 0000000..a810167
--- /dev/null
+++ b/packages/devtools_app/lib/src/memory/memory_treemap.dart
@@ -0,0 +1,266 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart' hide TextStyle;
+import 'package:flutter/widgets.dart' hide TextStyle;
+import 'package:provider/provider.dart';
+
+import '../auto_dispose_mixin.dart';
+import '../charts/treemap.dart';
+
+import 'memory_controller.dart';
+import 'memory_graph_model.dart';
+import 'memory_utils.dart';
+
+class MemoryTreemap extends StatefulWidget {
+ const MemoryTreemap(this.controller);
+
+ final MemoryController controller;
+
+ @override
+ MemoryTreemapState createState() => MemoryTreemapState(controller);
+}
+
+class MemoryTreemapState extends State<MemoryTreemap> with AutoDisposeMixin {
+ MemoryTreemapState(this.controller);
+
+ InstructionsSize sizes;
+
+ Map<String, Function> callbacks = {};
+
+ MemoryController controller;
+
+ Widget snapshotDisplay;
+
+ TreemapNode root;
+
+ @override
+ void didChangeDependencies() {
+ super.didChangeDependencies();
+
+ // TODO(terry): Unable to short-circuit need to investigate why?
+ controller = Provider.of<MemoryController>(context);
+
+ sizes = InstructionsSize.fromSnapshot(controller);
+
+ root = sizes.root;
+
+ cancel();
+
+ addAutoDisposeListener(controller.selectedSnapshotNotifier, () {
+ setState(() {
+ controller.computeAllLibraries(true, true);
+
+ sizes = InstructionsSize.fromSnapshot(controller);
+ });
+ });
+
+ addAutoDisposeListener(controller.filterNotifier, () {
+ setState(() {
+ controller.computeAllLibraries(true, true);
+ });
+ });
+ // TODO(peterdjlee): Need to check if applicable to treemap.
+ // addAutoDisposeListener(controller.selectTheSearchNotifier, () {
+ // setState(() {
+ // if (_trySelectItem()) {
+ // closeAutoCompleteOverlay();
+ // }
+ // });
+ // });
+
+ // addAutoDisposeListener(controller.searchNotifier, () {
+ // setState(() {
+ // if (_trySelectItem()) {
+ // closeAutoCompleteOverlay();
+ // }
+ // });
+ // });
+
+ addAutoDisposeListener(controller.searchAutoCompleteNotifier, () {
+ setState(autoCompleteOverlaySetState(controller, context));
+ });
+ }
+
+ void _onRootChanged(TreemapNode newRoot) {
+ setState(() {
+ root = newRoot;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ if (sizes != null) {
+ return LayoutBuilder(
+ builder: (context, constraints) {
+ return Treemap.fromRoot(
+ rootNode: root,
+ levelsVisible: 2,
+ isOutermostLevel: true,
+ height: constraints.maxHeight,
+ onRootChangedCallback: _onRootChanged,
+ );
+ },
+ );
+ } else {
+ return const SizedBox();
+ }
+ }
+}
+
+/// Definitions of exposed callback methods stored in callback Map the key
+/// is the function name (String) and the value a callback function signature.
+
+/// matchNames callback name.
+const matchNamesKey = 'matchNames';
+
+/// matchNames callback signature.
+typedef MatchNamesFunction = List<String> Function(String);
+
+/// findNode callback name.
+const findNodeKey = 'findNode';
+
+/// findNode callback signature.
+typedef FindNodeFunction = TreemapNode Function(String);
+
+/// selectNode callback name.
+const selectNodeKey = 'selectNode';
+
+/// selectNode callback signature.
+typedef SelectNodeFunction = void Function(TreemapNode);
+
+class InstructionsSize {
+ const InstructionsSize(this.root);
+
+ factory InstructionsSize.fromSnapshot(MemoryController controller) {
+ final rootChildren = <String, TreemapNode>{};
+ final root = TreemapNode(
+ name: 'root',
+ childrenMap: rootChildren,
+ );
+ TreemapNode currentParent = root;
+
+ // TODO(terry): Should treemap be all memory or just the filtered group?
+ // Using rawGroup not graph.groupByLibrary.
+
+ controller.heapGraph.rawGroupByLibrary.forEach(
+ (libraryGroup, value) {
+ final classes = value;
+ for (final theClass in classes) {
+ final shallowSize = theClass.instancesTotalShallowSizes;
+ var className = theClass.name;
+ if (shallowSize == 0 ||
+ libraryGroup == null ||
+ className == null ||
+ className == '::') {
+ continue;
+ }
+
+ // Ensure the empty library name is our group name e.g., '' -> 'src'.
+ String libraryName = theClass.libraryUri.toString();
+ if (libraryName.isEmpty) {
+ libraryName = libraryGroup;
+ }
+
+ // Map class names to familar user names.
+ final predefined =
+ predefinedClasses[LibraryClass(libraryName, className)];
+ if (predefined != null) {
+ className = predefined.prettyName;
+ }
+
+ final symbol = Symbol(
+ name: 'new $className',
+ size: shallowSize,
+ libraryUri: libraryName,
+ className: className,
+ );
+
+ Map<String, TreemapNode> currentChildren = rootChildren;
+ final parentReset = currentParent;
+ for (String pathPart in symbol.parts) {
+ currentChildren.putIfAbsent(
+ pathPart,
+ () {
+ final node = TreemapNode(
+ name: pathPart,
+ childrenMap: <String, TreemapNode>{},
+ );
+ currentParent.addChild(node);
+ return node;
+ },
+ );
+ currentChildren[pathPart].byteSize += symbol.size;
+ currentParent = currentChildren[pathPart];
+ currentChildren = currentChildren[pathPart].childrenMap;
+ }
+ currentParent = parentReset;
+ }
+ },
+ );
+
+ // Get sum of children's sizes.
+ root.byteSize = root.childrenMap.values
+ .fold(0, (int current, TreemapNode node) => current + node.byteSize);
+
+ final snapshotGraph = controller.snapshots.last.snapshotGraph;
+ // Add the external heap to the treemap.
+ root.childrenMap.putIfAbsent('External Heap', () {
+ final node = TreemapNode(
+ name: 'External Heap',
+ childrenMap: <String, TreemapNode>{},
+ )..byteSize = snapshotGraph.externalSize;
+ root.addChild(node);
+ return node;
+ });
+
+ // Add the filtered libraries/classes to the treemap.
+ root.childrenMap.putIfAbsent('All Filtered Libraries', () {
+ final node = TreemapNode(
+ name: 'All Filtered Libraries',
+ childrenMap: <String, TreemapNode>{},
+ )..byteSize = snapshotGraph.shallowSize - root.byteSize;
+ root.addChild(node);
+ return node;
+ });
+
+ root.byteSize = snapshotGraph.shallowSize + snapshotGraph.externalSize;
+
+ return InstructionsSize(root);
+ }
+
+ final TreemapNode root;
+}
+
+class Symbol {
+ const Symbol({
+ @required this.name,
+ @required this.size,
+ this.libraryUri,
+ this.className,
+ }) : assert(name != null),
+ assert(size != null);
+
+ static Symbol fromMap(Map<String, dynamic> json) {
+ return Symbol(
+ name: json['n'] as String,
+ size: json['s'] as int,
+ className: json['c'] as String,
+ libraryUri: json['l'] as String,
+ );
+ }
+
+ final String name;
+ final int size;
+ final String libraryUri;
+ final String className;
+
+ List<String> get parts {
+ return <String>[
+ if (libraryUri != null) ...libraryUri.split('/') else '@stubs',
+ if (className != null && className.isNotEmpty) className,
+ name,
+ ];
+ }
+}
diff --git a/packages/devtools_app/lib/src/ui/colors.dart b/packages/devtools_app/lib/src/ui/colors.dart
index 3096989..3a7e00b 100644
--- a/packages/devtools_app/lib/src/ui/colors.dart
+++ b/packages/devtools_app/lib/src/ui/colors.dart
@@ -13,6 +13,7 @@
Color memoryHeatMapLightColor = const Color(0xFFBBDEFB); // Material BLUE 100
Color memoryHeatMapDarkColor = const Color(0xFF0D47A1); // Material BLUE 900
+// TODO(peterdjlee): Rename mainUiColor to something that more broadly matches where the color is used.
const mainUiColor = Color(0xFF88B1DE);
const mainRasterColor = Color(0xFF2C5DAA);
const mainUnknownColor = Color(0xFFCAB8E9);
diff --git a/packages/devtools_app/lib/src/utils.dart b/packages/devtools_app/lib/src/utils.dart
index 51d86e8..ed39357 100644
--- a/packages/devtools_app/lib/src/utils.dart
+++ b/packages/devtools_app/lib/src/utils.dart
@@ -64,17 +64,34 @@
String percent2(double d) => '${(d * 100).toStringAsFixed(2)}%';
+String prettyPrintBytes(int size, {bool includeUnit = false}) {
+ final sizeInKB = size / 1024.0;
+ if (sizeInKB < 1024.0) {
+ return '${printKB(size, includeUnit: includeUnit)}';
+ } else {
+ return '${printMB(size, fractionDigits: 2, includeUnit: includeUnit)}';
+ }
+}
+
final NumberFormat _kbPattern = NumberFormat.decimalPattern()
..maximumFractionDigits = 0;
-String printKb(num bytes) {
+String printKB(num bytes, {bool includeUnit = false}) {
// We add ((1024/2)-1) to the value before formatting so that a non-zero byte
// value doesn't round down to 0.
- return _kbPattern.format((bytes + 511) / 1024);
+ var output = _kbPattern.format((bytes + 511) / 1024);
+ if (includeUnit) {
+ output += ' KB';
+ }
+ return output;
}
-String printMb(num bytes, [int fractionDigits = 1]) {
- return (bytes / (1024 * 1024.0)).toStringAsFixed(fractionDigits);
+String printMB(num bytes, {int fractionDigits = 1, bool includeUnit = false}) {
+ var output = (bytes / (1024 * 1024.0)).toStringAsFixed(fractionDigits);
+ if (includeUnit) {
+ output += ' MB';
+ }
+ return output;
}
String msText(
diff --git a/packages/devtools_app/macos/Flutter/GeneratedPluginRegistrant.swift b/packages/devtools_app/macos/Flutter/GeneratedPluginRegistrant.swift
index 8236f57..4618f38 100644
--- a/packages/devtools_app/macos/Flutter/GeneratedPluginRegistrant.swift
+++ b/packages/devtools_app/macos/Flutter/GeneratedPluginRegistrant.swift
@@ -5,8 +5,10 @@
import FlutterMacOS
import Foundation
+import path_provider_macos
import url_launcher_macos
func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+ PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))
}
diff --git a/packages/devtools_app/test/timeline_flame_chart_test.dart b/packages/devtools_app/test/timeline_flame_chart_test.dart
index 4052631..5a43356 100644
--- a/packages/devtools_app/test/timeline_flame_chart_test.dart
+++ b/packages/devtools_app/test/timeline_flame_chart_test.dart
@@ -69,10 +69,7 @@
await pumpTimelineBody(tester, TimelineController());
await tester.pumpAndSettle();
expect(find.byType(TimelineFlameChart), findsNothing);
- expect(
- find.byKey(TimelineScreen.emptyTimelineKey),
- findsOneWidget,
- );
+ expect(find.byKey(TimelineScreen.emptyTimelineKey), findsOneWidget);
});
testWidgetsWithWindowSize(
@@ -85,6 +82,7 @@
await tester.pumpAndSettle();
expect(find.byType(TimelineFlameChart), findsOneWidget);
+<<<<<<< HEAD
await expectLater(
find.byType(TimelineFlameChart),
matchesGoldenFile(
@@ -93,5 +91,12 @@
// Await delay for golden comparison.
await tester.pumpAndSettle(const Duration(seconds: 2));
}, skip: kIsWeb || !Platform.isMacOS);
+=======
+ expect(
+ find.byType(TimelineFlameChart),
+ matchesGoldenFile(
+ 'goldens/timeline_flame_chart_with_selected_frame.png'));
+ });
+>>>>>>> 4191e172... Fix merge conflict
});
}
diff --git a/packages/devtools_app/test/utils_test.dart b/packages/devtools_app/test/utils_test.dart
index daaf198..91dd59a 100644
--- a/packages/devtools_app/test/utils_test.dart
+++ b/packages/devtools_app/test/utils_test.dart
@@ -11,27 +11,40 @@
void main() {
group('utils', () {
+ test('prettyPrintBytes', () {
+ const int kb = 1024;
+ const int mb = 1024 * kb;
+
+ expect(prettyPrintBytes(kb), '1');
+ expect(prettyPrintBytes(kb, includeUnit: true), '1 KB');
+ expect(prettyPrintBytes(kb * 1000, includeUnit: true), '1,000 KB');
+
+ expect(prettyPrintBytes(mb), '1.00');
+ expect(prettyPrintBytes(mb, includeUnit: true), '1.00 MB');
+ expect(prettyPrintBytes(mb - kb, includeUnit: true), '1,023 KB');
+ });
+
test('printKb', () {
const int kb = 1024;
- expect(printKb(0), '0');
- expect(printKb(1), '1');
- expect(printKb(kb - 1), '1');
- expect(printKb(kb), '1');
- expect(printKb(kb + 1), '2');
- expect(printKb(2000), '2');
+ expect(printKB(0), '0');
+ expect(printKB(1), '1');
+ expect(printKB(kb - 1), '1');
+ expect(printKB(kb), '1');
+ expect(printKB(kb + 1), '2');
+ expect(printKB(2000), '2');
});
test('printMb', () {
- const int MB = 1024 * 1024;
+ const int mb = 1024 * 1024;
- expect(printMb(10 * MB, 0), '10');
- expect(printMb(10 * MB), '10.0');
- expect(printMb(10 * MB, 2), '10.00');
+ expect(printMB(10 * mb, fractionDigits: 0), '10');
+ expect(printMB(10 * mb), '10.0');
+ expect(printMB(10 * mb, fractionDigits: 2), '10.00');
- expect(printMb(1000 * MB, 0), '1000');
- expect(printMb(1000 * MB), '1000.0');
- expect(printMb(1000 * MB, 2), '1000.00');
+ expect(printMB(1000 * mb, fractionDigits: 0), '1000');
+ expect(printMB(1000 * mb), '1000.0');
+ expect(printMB(1000 * mb, fractionDigits: 2), '1000.00');
});
test('msAsText', () {
