diff --git a/packages/devtools_app/lib/src/charts/flame_chart.dart b/packages/devtools_app/lib/src/charts/flame_chart.dart index ffb3791dc4e..96bc62ec914 100644 --- a/packages/devtools_app/lib/src/charts/flame_chart.dart +++ b/packages/devtools_app/lib/src/charts/flame_chart.dart @@ -260,7 +260,6 @@ abstract class FlameChartState extends State // This method must be overridden by all subclasses. @mustCallSuper void initFlameChartElements() { - resetColorOffsets(); rows.clear(); sections.clear(); } @@ -753,15 +752,9 @@ class FlameChartNode { @required this.textColor, @required this.data, @required this.onSelected, - this.useAlternateBackground, - this.alternateBackgroundColor, this.selectable = true, this.sectionIndex, - }) { - if (useAlternateBackground != null) { - assert(alternateBackgroundColor != null); - } - } + }); FlameChartNode.sectionLabel({ this.key, @@ -774,12 +767,10 @@ class FlameChartNode { tooltip = text, data = null, onSelected = ((_) {}), - selectable = false, - useAlternateBackground = null, - alternateBackgroundColor = null; + selectable = false; static const _selectedNodeColor = lightSelection; - static const _alternateTextColor = Colors.black; + static const _selectedTextColor = Colors.black; // We would like this value to be smaller, but zoom performance does not allow // for that. We should decrease this value if we can improve flame chart zoom // performance. @@ -792,8 +783,6 @@ class FlameChartNode { final Color backgroundColor; final Color textColor; final T data; - final bool Function(T) useAlternateBackground; - final Color alternateBackgroundColor; final void Function(T) onSelected; final bool selectable; @@ -852,17 +841,11 @@ class FlameChartNode { Color _backgroundColor(bool selected) { if (selected) return _selectedNodeColor; - if (useAlternateBackground != null && useAlternateBackground(data)) { - return alternateBackgroundColor; - } return backgroundColor; } Color _textColor(bool selected) { - if (selected || - (useAlternateBackground != null && useAlternateBackground(data))) { - return _alternateTextColor; - } + if (selected) return _selectedTextColor; return textColor; } @@ -883,66 +866,20 @@ class FlameChartNode { } mixin FlameChartColorMixin { - int _uiColorOffset = 0; - Color nextUiColor({bool resetOffset = false}) { - if (resetOffset) { - _uiColorOffset = 0; - } - final color = uiColorPalette[_uiColorOffset % uiColorPalette.length]; - _uiColorOffset++; - return color; + Color nextUiColor(int row) { + return uiColorPalette[row % uiColorPalette.length]; } - int _rasterColorOffset = 0; - Color nextRasterColor({bool resetOffset = false}) { - if (resetOffset) { - _rasterColorOffset = 0; - } - final color = - rasterColorPalette[_rasterColorOffset % rasterColorPalette.length]; - _rasterColorOffset++; - return color; + Color nextRasterColor(int row) { + return rasterColorPalette[row % rasterColorPalette.length]; } - int _asyncColorOffset = 0; - Color nextAsyncColor({bool resetOffset = false}) { - if (resetOffset) { - _asyncColorOffset = 0; - } - final color = - asyncColorPalette[_asyncColorOffset % asyncColorPalette.length]; - _asyncColorOffset++; - return color; - } - - int _unknownColorOffset = 0; - Color nextUnknownColor({bool resetOffset = false}) { - if (resetOffset) { - _unknownColorOffset = 0; - } - final color = - unknownColorPalette[_unknownColorOffset % unknownColorPalette.length]; - _unknownColorOffset++; - return color; - } - - int _selectedColorOffset = 0; - Color nextSelectedColor({bool resetOffset = false}) { - if (resetOffset) { - _selectedColorOffset = 0; - } - final color = selectedColorPalette[ - _selectedColorOffset % selectedColorPalette.length]; - _selectedColorOffset++; - return color; + Color nextAsyncColor(int row) { + return asyncColorPalette[row % asyncColorPalette.length]; } - void resetColorOffsets() { - _asyncColorOffset = 0; - _uiColorOffset = 0; - _rasterColorOffset = 0; - _unknownColorOffset = 0; - _selectedColorOffset = 0; + Color nextUnknownColor(int row) { + return unknownColorPalette[row % unknownColorPalette.length]; } } diff --git a/packages/devtools_app/lib/src/inspector/layout_explorer/flex/flex.dart b/packages/devtools_app/lib/src/inspector/layout_explorer/flex/flex.dart index c65107e065d..2425d1aa02a 100644 --- a/packages/devtools_app/lib/src/inspector/layout_explorer/flex/flex.dart +++ b/packages/devtools_app/lib/src/inspector/layout_explorer/flex/flex.dart @@ -23,9 +23,8 @@ import 'free_space.dart'; import 'overflow_indicator_painter.dart'; import 'utils.dart'; -const widthIndicatorColor = ThemedColor(Color(0xFF000099), mainUiColorDark); -const heightIndicatorColor = - ThemedColor(mainRasterColorDark, Color(0xFF27AAE1)); +const widthIndicatorColor = ThemedColor(Color(0xFF000099), mainUiColor); +const heightIndicatorColor = ThemedColor(mainRasterColor, Color(0xFF27AAE1)); const margin = 8.0; const arrowHeadSize = 8.0; diff --git a/packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart b/packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart index 07c604357c9..d8b69129217 100644 --- a/packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart +++ b/packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart @@ -245,7 +245,7 @@ class FlutterFramesChartItem extends StatelessWidget { ); return Container( padding: const EdgeInsets.symmetric(horizontal: densePadding), - color: selected ? chartAccentColor : null, + color: selected ? selectedFrameBackgroundColor : null, child: Column( children: [ // Dummy child so that the InkWell does not take up the entire column. diff --git a/packages/devtools_app/lib/src/timeline/timeline_flame_chart.dart b/packages/devtools_app/lib/src/timeline/timeline_flame_chart.dart index de2b1554db7..c550816bc90 100644 --- a/packages/devtools_app/lib/src/timeline/timeline_flame_chart.dart +++ b/packages/devtools_app/lib/src/timeline/timeline_flame_chart.dart @@ -171,13 +171,13 @@ class TimelineFlameChartState Color backgroundColor; if (event.isAsyncEvent) { - backgroundColor = nextAsyncColor(resetOffset: event.isRoot); + backgroundColor = nextAsyncColor(row); } else if (event.isUiEvent) { - backgroundColor = nextUiColor(resetOffset: event.isRoot); + backgroundColor = nextUiColor(row); } else if (event.isRasterEvent) { - backgroundColor = nextRasterColor(resetOffset: event.isRoot); + backgroundColor = nextRasterColor(row); } else { - backgroundColor = nextUnknownColor(resetOffset: event.isRoot); + backgroundColor = nextUnknownColor(row); } Color textColor; @@ -196,9 +196,6 @@ class TimelineFlameChartState textColor: textColor, data: event, onSelected: (dynamic event) => widget.onSelected(event), - useAlternateBackground: (TimelineEvent event) => - _selectedFrame != null && event.root.frameId == _selectedFrame.id, - alternateBackgroundColor: nextSelectedColor(resetOffset: event.isRoot), sectionIndex: section, ); chartNodesByEvent[event] = node; diff --git a/packages/devtools_app/lib/src/ui/colors.dart b/packages/devtools_app/lib/src/ui/colors.dart index 63de414734e..8359f20e184 100644 --- a/packages/devtools_app/lib/src/ui/colors.dart +++ b/packages/devtools_app/lib/src/ui/colors.dart @@ -13,61 +13,41 @@ import 'theme.dart'; Color memoryHeatMapLightColor = const Color(0xFFBBDEFB); // Material BLUE 100 Color memoryHeatMapDarkColor = const Color(0xFF0D47A1); // Material BLUE 900 -/// Mark: Timeline / CPU profiler. -/// -/// Light mode is Light Blue 50 palette and Dark mode is Blue 50 palette. -/// https://material.io/design/color/the-color-system.html#tools-for-picking-colors. -const mainUiColor = ThemedColor(mainUiColorLight, mainUiColorDark); -const mainRasterColor = ThemedColor(mainRasterColorLight, mainRasterColorDark); -final mainUnknownColor = ThemedColor.fromSingleColor(const Color(0xFFCAB8E9)); -final mainAsyncColor = ThemedColor.fromSingleColor(const Color(0xFF80CBC4)); - -const mainUiColorLight = Color(0xFF81D4FA); // Light Blue 50 - 200 -const mainRasterColorLight = Color(0xFF0288D1); // Light Blue 50 - 700 +const mainUiColor = Color(0xFF88B1DE); +const mainRasterColor = Color(0xFF2C5DAA); +const mainUnknownColor = Color(0xFFCAB8E9); +const mainAsyncColor = Color(0xFF80CBC4); const mainUiColorSelectedLight = Color(0xFFD4D7DA); // Lighter grey. const mainRasterColorSelectedLight = Color(0xFFB5B5B5); // Darker grey. -const mainUiColorDark = Color(0xFF9EBEF9); // Blue 200 Material Dark -const mainRasterColorDark = Color(0xFF1A73E8); // Blue 600 Material Dark - const mainUiColorSelectedDark = Colors.white; const mainRasterColorSelectedDark = Color(0xFFC9C9C9); // Grey. -// Light Blue 50: 200-400 (light mode) - see https://material.io/design/color/the-color-system.html#tools-for-picking-colors. -// Blue Material Dark: 200-400 (dark mode) - see https://standards.google/guidelines/google-material/color/dark-theme.html#style. final uiColorPalette = [ - const ThemedColor(mainUiColorLight, mainUiColorDark), - const ThemedColor(Color(0xFF4FC3F7), Color(0xFF8AB4F7)), - const ThemedColor(Color(0xFF29B6F6), Color(0xFF669CF6)), + mainUiColor, + const Color(0xFF6793CD), ]; -// Light Blue 50: 700-900 (light mode) - see https://material.io/design/color/the-color-system.html#tools-for-picking-colors. -// Blue Material Dark: 500-700 (dark mode) - see https://standards.google/guidelines/google-material/color/dark-theme.html#style. final rasterColorPalette = [ - const ThemedColor(mainRasterColorLight, mainRasterColorDark), - const ThemedColor(Color(0xFF0277BD), Color(0xFF1966D2)), - const ThemedColor(Color(0xFF01579B), Color(0xFF1859BD)), + mainRasterColor, + const Color(0xFF386EB6), ]; -// Teal 200-400 - see https://material.io/design/color/#tools-for-picking-colors. -final asyncColorPalette = [ +const selectedFrameBackgroundColor = + ThemedColor(Color(0xFFDBDDDD), Color(0xFF4E4F4F)); +const selectedFrameAccentColor = Color(0xFF36C6F4); + +// Teal 200, 400 - see https://material.io/design/color/#tools-for-picking-colors. +const asyncColorPalette = [ mainAsyncColor, - ThemedColor.fromSingleColor(const Color(0xFF4DB6AC)), - ThemedColor.fromSingleColor(const Color(0xFF26A69A)), + Color(0xFF26A69A), ]; -// Slight variation on Deep purple 100-300 - see https://material.io/design/color/#tools-for-picking-colors. -final unknownColorPalette = [ +// Slight variation on Deep purple 100, 300 - see https://material.io/design/color/#tools-for-picking-colors. +const unknownColorPalette = [ mainUnknownColor, - ThemedColor.fromSingleColor(const Color(0xFFB39DDB)), - ThemedColor.fromSingleColor(const Color(0xFF9D84CA)), -]; - -final selectedColorPalette = [ - ThemedColor.fromSingleColor(const Color(0xFFBDBDBD)), - ThemedColor.fromSingleColor(const Color(0xFFADADAD)), - ThemedColor.fromSingleColor(const Color(0xFF9E9E9E)), + Color(0xFF9D84CA), ]; const selectedFlameChartItemColor = ThemedColor( @@ -75,13 +55,8 @@ const selectedFlameChartItemColor = ThemedColor( mainUiColorSelectedLight, ); -final selectedFlutterFrameUiColor = Colors.yellow[500]; -final selectedFlutterFrameRasterColor = Colors.yellow[700]; - -// [mainUiColor] with a red 0.4 opacity overlay. -final uiJankColor = ThemedColor.fromSingleColor(const Color(0xFFCA82A1)); -// [mainRasterColor] with a red 0.4 opacity overlay. -final rasterJankColor = ThemedColor.fromSingleColor(const Color(0xFF845697)); +const uiJankColor = Color(0xFFF5846B); +const rasterJankColor = Color(0xFFC3595A); // Red 50 - 400 is light at 1/2 opacity, Dark Red 500 Material Dark. const Color highwater16msColor = mainUiColorSelectedLight;