OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2014 The Chromium Authors. All rights reserved. |
4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
5 found in the LICENSE file. | 5 found in the LICENSE file. |
6 --> | 6 --> |
7 <link rel="import" href="/tracing/base/base.html"> | 7 <link rel="import" href="/tracing/base/base.html"> |
8 <link rel="import" href="/tracing/base/color.html"> | 8 <link rel="import" href="/tracing/base/color.html"> |
9 <link rel="import" href="/tracing/base/iteration_helpers.html"> | 9 <link rel="import" href="/tracing/base/iteration_helpers.html"> |
10 <script> | 10 <script> |
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
80 cq_build_abandoned: new tr.b.Color(187, 187, 187), | 80 cq_build_abandoned: new tr.b.Color(187, 187, 187), |
81 | 81 |
82 cq_build_attempt_runnig: new tr.b.Color(222, 222, 75), | 82 cq_build_attempt_runnig: new tr.b.Color(222, 222, 75), |
83 cq_build_attempt_passed: new tr.b.Color(103, 218, 35), | 83 cq_build_attempt_passed: new tr.b.Color(103, 218, 35), |
84 cq_build_attempt_failed: new tr.b.Color(197, 81, 81) | 84 cq_build_attempt_failed: new tr.b.Color(197, 81, 81) |
85 }; | 85 }; |
86 | 86 |
87 // Some constants we'll need for later lookups. | 87 // Some constants we'll need for later lookups. |
88 var numGeneralPurposeColorIds = generalPurposeColors.length; | 88 var numGeneralPurposeColorIds = generalPurposeColors.length; |
89 var numReservedColorIds = tr.b.dictionaryLength(reservedColorsByName); | 89 var numReservedColorIds = tr.b.dictionaryLength(reservedColorsByName); |
90 var numBaseColors = numGeneralPurposeColorIds + numReservedColorIds; | 90 var numColorsPerVariant = numGeneralPurposeColorIds + numReservedColorIds; |
91 | 91 |
92 class ColorScheme { | 92 class ColorScheme { |
93 }; | 93 }; |
94 | 94 |
95 /** | 95 /* |
96 * A flat array of tr.b.Color values of the palette, and their variants. | 96 * A flat array of tr.b.Color values of the palette, and their variants. |
97 * | 97 * |
98 * This array is made up of a set of base colors, repeated N times to form | 98 * This array is made up of a set of base colors, repeated N times to form |
99 * a set of variants on that base color. | 99 * a set of variants on that base color. |
100 * | 100 * |
101 * Within the base colors, there are "general purpose" colors, | 101 * Within the base colors, there are "general purpose" colors, |
102 * which can be used for random color selection, and | 102 * which can be used for random color selection, and |
103 * reserved colors, which are used when specific colors | 103 * reserved colors, which are used when specific colors |
104 * need to be used, e.g. where red is desired. | 104 * need to be used, e.g. where red is desired. |
105 * | 105 * |
106 * The variants are automatically generated from the base colors. The 0th | 106 * The variants are automatically generated from the base colors. The 0th |
107 * variant is the default apeparance of the color, and the varaiants are | 107 * variant is the default apeparance of the color, and the varaiants are |
108 * mutations of that color, e.g. several brightening levels and desaturations. | 108 * mutations of that color, e.g. several brightening levels and desaturations. |
109 * | 109 * |
110 * For example, a very simple version of this array looks like the following: | 110 * For example, a very simple version of this array looks like the following: |
111 * 0: Generic Color 0 | 111 * 0: Generic Color 0 |
112 * 1: Generic Color 1 | 112 * 1: Generic Color 1 |
113 * 2: Named Color 'foo' | 113 * 2: Named Color 'foo' |
114 * 3: Brightened Generic Color 0 | 114 * 3: Brightened Generic Color 0 |
115 * 4: Brightened Generic Color 1 | 115 * 4: Brightened Generic Color 1 |
116 * 5: Brightened Named Color 'foo' | 116 * 5: Brightened Named Color 'foo' |
117 */ | 117 */ |
118 ColorScheme.colors = (function() { | 118 var paletteBase = []; |
119 var paletteBase = []; | 119 paletteBase.push.apply(paletteBase, generalPurposeColors); |
120 paletteBase.push.apply(paletteBase, generalPurposeColors); | 120 paletteBase.push.apply(paletteBase, |
121 paletteBase.push.apply(paletteBase, | 121 tr.b.dictionaryValues(reservedColorsByName)); |
122 tr.b.dictionaryValues(reservedColorsByName)); | 122 ColorScheme.colors = []; |
| 123 ColorScheme.properties = {}; |
| 124 ColorScheme.properties = { |
| 125 numColorsPerVariant: numColorsPerVariant |
| 126 }; |
123 | 127 |
124 var combinedItems = []; | 128 function pushVariant(func) { |
125 combinedItems.push.apply(combinedItems, | 129 var variantColors = paletteBase.map(func); |
126 paletteBase); | 130 ColorScheme.colors.push.apply(ColorScheme.colors, variantColors); |
127 combinedItems.push.apply(combinedItems, | 131 } |
128 paletteBase.map(function(c) { | 132 |
129 return c.lighten(0.3, 0.9); | 133 // Basic colors. |
130 })); | 134 pushVariant(function(c) { return c; }); |
131 combinedItems.push.apply(combinedItems, | 135 |
132 paletteBase.map(function(c) { | 136 // Brightened variants. |
133 return c.lighten(0.5, 0.9); | 137 ColorScheme.properties.brightenedOffsets = []; |
134 })); | 138 ColorScheme.properties.brightenedOffsets.push(ColorScheme.colors.length); |
135 combinedItems.push.apply(combinedItems, | 139 pushVariant(function(c) { |
136 paletteBase.map(function(c) { | 140 return c.lighten(0.3, 0.9); |
137 return c.desaturate(); | 141 }); |
138 })); | 142 |
139 return combinedItems; | 143 ColorScheme.properties.brightenedOffsets.push(ColorScheme.colors.length); |
140 })(); | 144 pushVariant(function(c) { |
| 145 return c.lighten(0.48, 0.9); |
| 146 }); |
| 147 |
| 148 ColorScheme.properties.brightenedOffsets.push(ColorScheme.colors.length); |
| 149 pushVariant(function(c) { |
| 150 return c.lighten(0.65, 0.9); |
| 151 }); |
| 152 |
| 153 |
| 154 // Desaturated variants. |
| 155 ColorScheme.properties.dimmedOffsets = []; |
| 156 ColorScheme.properties.dimmedOffsets.push(ColorScheme.colors.length); |
| 157 pushVariant(function(c) { |
| 158 return c.desaturate(); |
| 159 }); |
| 160 ColorScheme.properties.dimmedOffsets.push(ColorScheme.colors.length); |
| 161 pushVariant(function(c) { |
| 162 return c.desaturate(0.5); |
| 163 }); |
| 164 ColorScheme.properties.dimmedOffsets.push(ColorScheme.colors.length); |
| 165 pushVariant(function(c) { |
| 166 return c.desaturate(0.3); |
| 167 }); |
141 | 168 |
142 /** | 169 /** |
143 * A toString'd representation of ColorScheme.colors. | 170 * A toString'd representation of ColorScheme.colors. |
144 */ | 171 */ |
145 ColorScheme.colorsAsStrings = ColorScheme.colors.map(function(c) { | 172 ColorScheme.colorsAsStrings = ColorScheme.colors.map(function(c) { |
146 return c.toString(); | 173 return c.toString(); |
147 }); | 174 }); |
148 | 175 |
149 ColorScheme.properties = { | |
150 numBaseColors: numBaseColors, | |
151 numGeneralPurposeColorIds: numGeneralPurposeColorIds, | |
152 selectedIdBoost: numBaseColors, | |
153 highlightedIdBoost: numBaseColors * 2, | |
154 dimmedIdBoost: numBaseColors * 3 | |
155 }; | |
156 | |
157 // Build reservedColorNameToIdMap. | 176 // Build reservedColorNameToIdMap. |
158 var reservedColorNameToIdMap = (function() { | 177 var reservedColorNameToIdMap = (function() { |
159 var m = {}; | 178 var m = {}; |
160 var i = generalPurposeColors.length; | 179 var i = generalPurposeColors.length; |
161 tr.b.iterItems(reservedColorsByName, function(key, value) { | 180 tr.b.iterItems(reservedColorsByName, function(key, value) { |
162 m[key] = i++; | 181 m[key] = i++; |
163 }); | 182 }); |
164 return m; | 183 return m; |
165 })(); | 184 })(); |
166 | 185 |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
207 stringColorIdCache[string] = hash % numGeneralPurposeColorIds; | 226 stringColorIdCache[string] = hash % numGeneralPurposeColorIds; |
208 } | 227 } |
209 return stringColorIdCache[string]; | 228 return stringColorIdCache[string]; |
210 }; | 229 }; |
211 | 230 |
212 return { | 231 return { |
213 ColorScheme: ColorScheme | 232 ColorScheme: ColorScheme |
214 }; | 233 }; |
215 }); | 234 }); |
216 </script> | 235 </script> |
OLD | NEW |