Skip to content

Update timeline colors to match new spec. #2059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kenzieschmoll merged 2 commits into from
Jun 10, 2020
Merged

Update timeline colors to match new spec. #2059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8cb796
Update timeline colors to match new spec.
kenzieschmoll Jun 9, 2020
9c71e30
use const
kenzieschmoll Jun 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 12 additions & 75 deletions packages/devtools_app/lib/src/charts/flame_chart.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,6 @@ abstract class FlameChartState<T extends FlameChart, V> extends State<T>
// This method must be overridden by all subclasses.
@mustCallSuper
void initFlameChartElements() {
resetColorOffsets();
rows.clear();
sections.clear();
}
Expand Down Expand Up @@ -753,15 +752,9 @@ class FlameChartNode<T> {
@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,
Expand All @@ -774,12 +767,10 @@ class FlameChartNode<T> {
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.
Expand All @@ -792,8 +783,6 @@ class FlameChartNode<T> {
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;

Expand Down Expand Up @@ -852,17 +841,11 @@ class FlameChartNode<T> {

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;
}

Expand All @@ -883,66 +866,20 @@ class FlameChartNode<T> {
}

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];
}
}

Expand Down
5 changes: 2 additions & 3 deletions packages/devtools_app/lib/src/inspector/layout_explorer/flex/flex.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
11 changes: 4 additions & 7 deletions packages/devtools_app/lib/src/timeline/timeline_flame_chart.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
65 changes: 20 additions & 45 deletions packages/devtools_app/lib/src/ui/colors.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,75 +13,50 @@ 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(
mainUiColorSelectedLight,
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;
Expand Down