Gitiles
Code Review Sign In
gerrit-public.fairphone.software / fp2-dev / platform / external / chromium-trace / ad0b04f54dab7c049e98abd97353bd46ce30294b / . / trace-viewer / trace_viewer / base / ui / color_scheme.html
blob: fe4810c74e7f982a025873e3ebae206ae053a60e [file] [log] [blame]
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]1<!DOCTYPE html>
2<!--
3Copyright (c) 2014 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7<link rel="import" href="/base/base.html">
8<link rel="import" href="/base/iteration_helpers.html">
9<link rel="import" href="/base/ui/color_utils.html">
10<script>
11'use strict';
12
13/**
14 * @fileoverview Provides color scheme related functions.
15 */
Chris Craik24385db2015-06-11 11:16:26 -0700[diff] [blame]16tr.exportTo('tr.b.ui', function() {
17 var colorToRGBString = tr.b.ui.colorToRGBString;
18 var colorToRGBAString = tr.b.ui.colorToRGBAString;
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]19
20 // Basic constants...
21
22 var generalPurposeColors = [
23 {r: 138, g: 113, b: 152},
24 {r: 175, g: 112, b: 133},
25 {r: 127, g: 135, b: 225},
26 {r: 93, g: 81, b: 137},
27 {r: 116, g: 143, b: 119},
28 {r: 178, g: 214, b: 122},
29 {r: 87, g: 109, b: 147},
30 {r: 119, g: 155, b: 95},
31 {r: 114, g: 180, b: 160},
32 {r: 132, g: 85, b: 103},
33 {r: 157, g: 210, b: 150},
34 {r: 148, g: 94, b: 86},
35 {r: 164, g: 108, b: 138},
36 {r: 139, g: 191, b: 150},
37 {r: 110, g: 99, b: 145},
38 {r: 80, g: 129, b: 109},
39 {r: 125, g: 140, b: 149},
40 {r: 93, g: 124, b: 132},
41 {r: 140, g: 85, b: 140},
42 {r: 104, g: 163, b: 162},
43 {r: 132, g: 141, b: 178},
44 {r: 131, g: 105, b: 147},
45 {r: 135, g: 183, b: 98},
46 {r: 152, g: 134, b: 177},
47 {r: 141, g: 188, b: 141},
48 {r: 133, g: 160, b: 210},
49 {r: 126, g: 186, b: 148},
50 {r: 112, g: 198, b: 205},
51 {r: 180, g: 122, b: 195},
52 {r: 203, g: 144, b: 152}];
53
54 var reservedColorsByName = {
55 thread_state_iowait: {r: 182, g: 125, b: 143},
56 thread_state_running: {r: 126, g: 200, b: 148},
57 thread_state_runnable: {r: 133, g: 160, b: 210},
58 thread_state_sleeping: {r: 240, g: 240, b: 240},
59 thread_state_unknown: {r: 199, g: 155, b: 125},
60
61 memory_dump: {r: 0, g: 0, b: 180},
62
Chris Craikbeca7ae2015-04-07 13:29:55 -0700[diff] [blame]63 generic_work: {r: 125, g: 125, b: 125},
64
65 good: {r: 0, g: 125, b: 0},
66 bad: {r: 180, g: 125, b: 0},
Chris Craik24385db2015-06-11 11:16:26 -0700[diff] [blame]67 terrible: {r: 180, g: 0, b: 0},
68
69 black: {r: 0, g: 0, b: 0},
70
71 rail_response: {r: 67, g: 135, b: 253},
72 rail_animate: {r: 244, g: 74, b: 63},
73 rail_idle: {r: 238, g: 142, b: 0},
74 rail_load: {r: 13, g: 168, b: 97}
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]75 };
76
77 // Some constants we'll need for later lookups.
78 var numGeneralPurposeColorIds = generalPurposeColors.length;
Chris Craik24385db2015-06-11 11:16:26 -0700[diff] [blame]79 var numReservedColorIds = tr.b.dictionaryLength(reservedColorsByName);
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]80
81 // The color palette is split in half, with the upper
82 // half of the palette being the "highlighted" verison
83 // of the base color. So, color 7's highlighted form is
84 // 7 + (palette.length / 2).
85 //
86 // These bright versions of colors are automatically generated
87 // from the base colors.
88 //
89 // Within the color palette, there are "general purpose" colors,
90 // which can be used for random color selection, and
91 // reserved colors, which are used when specific colors
92 // need to be used, e.g. where red is desired.
93 var paletteRaw = (function() {
94 var paletteBase = [];
95 paletteBase.push.apply(paletteBase, generalPurposeColors);
96 paletteBase.push.apply(paletteBase,
Chris Craik24385db2015-06-11 11:16:26 -0700[diff] [blame]97 tr.b.dictionaryValues(reservedColorsByName));
98 return paletteBase.concat(paletteBase.map(tr.b.ui.brightenColor),
99 paletteBase.map(tr.b.ui.desaturateColor));
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]100 })();
101 var palette = paletteRaw.map(colorToRGBString);
102
Chris Craik19832152015-04-16 15:43:38 -0700[diff] [blame]103 var highlightIdBoost = paletteRaw.length / 3;
104 var desaturateIdBoost = (paletteRaw.length / 3) * 2;
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]105
106 // Build reservedColorNameToIdMap.
107 var reservedColorNameToIdMap = (function() {
108 var m = {};
109 var i = generalPurposeColors.length;
Chris Craik24385db2015-06-11 11:16:26 -0700[diff] [blame]110 tr.b.iterItems(reservedColorsByName, function(key, value) {
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]111 m[key] = i++;
112 });
113 return m;
114 })();
115
116 /**
117 * Computes a simplistic hashcode of the provide name. Used to chose colors
118 * for slices.
119 * @param {string} name The string to hash.
120 */
121 function getStringHash(name) {
122 var hash = 0;
123 for (var i = 0; i < name.length; ++i)
124 hash = (hash + 37 * hash + 11 * name.charCodeAt(i)) % 0xFFFFFFFF;
125 return hash;
126 }
127
128 /**
129 * Gets the color palette.
130 */
131 function getColorPalette() {
132 return palette;
133 }
134
135 /**
136 * Gets the raw color palette, where entries are still objects.
137 */
138 function getRawColorPalette() {
139 return paletteRaw;
140 }
141
142 /**
143 * @return {Number} The value to add to a color ID to get its highlighted
Chris Craik19832152015-04-16 15:43:38 -0700[diff] [blame]144 * color ID. E.g. 7 + getPaletteHighlightIdBoost() yields a brightened form
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]145 * of 7's base color.
146 */
147 function getColorPaletteHighlightIdBoost() {
148 return highlightIdBoost;
149 }
Chris Craik19832152015-04-16 15:43:38 -0700[diff] [blame]150 /**
151 * @return {Number} The value to add to a color ID to get its desaturated
152 * color ID. E.g. 7 + getPaletteDesaturateIdBoost() yields a desaturate form
153 * of 7's base color.
154 */
155 function getColorPaletteDesaturateIdBoost() {
156 return desaturateIdBoost;
157 }
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]158
159 /**
160 * @param {String} name The color name.
161 * @return {Number} The color ID for the given color name.
162 */
163 function getColorIdForReservedName(name) {
164 var id = reservedColorNameToIdMap[name];
165 if (id === undefined)
166 throw new Error('Unrecognized color ') + name;
167 return id;
168 }
169
170 // Previously computed string color IDs. They are based on a stable hash, so
171 // it is safe to save them throughout the program time.
172 var stringColorIdCache = {};
173
174 /**
175 * @return {Number} A color ID that is stably associated to the provided via
176 * the getStringHash method. The color ID will be chosen from the general
177 * purpose ID space only, e.g. no reserved ID will be used.
178 */
179 function getColorIdForGeneralPurposeString(string) {
180 if (stringColorIdCache[string] === undefined) {
181 var hash = getStringHash(string);
182 stringColorIdCache[string] = hash % numGeneralPurposeColorIds;
183 }
184 return stringColorIdCache[string];
185 }
186
187 var paletteProperties = {
188 numGeneralPurposeColorIds: numGeneralPurposeColorIds,
Chris Craik19832152015-04-16 15:43:38 -0700[diff] [blame]189 highlightIdBoost: highlightIdBoost,
190 desaturateIdBoost: desaturateIdBoost
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]191 };
192
193 return {
194 getRawColorPalette: getRawColorPalette,
195 getColorPalette: getColorPalette,
196 paletteProperties: paletteProperties,
197 getColorPaletteHighlightIdBoost: getColorPaletteHighlightIdBoost,
Chris Craik19832152015-04-16 15:43:38 -0700[diff] [blame]198 getColorPaletteDesaturateIdBoost: getColorPaletteDesaturateIdBoost,
Chris Craikb122baf2015-03-05 13:58:42 -0800[diff] [blame]199 getColorIdForReservedName: getColorIdForReservedName,
200 getStringHash: getStringHash,
201 getColorIdForGeneralPurposeString: getColorIdForGeneralPurposeString
202 };
203});
204</script>