New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 828389 link

Starred by 3 users

Issue metadata

Status: WontFix
Owner:
Closed: Apr 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Make about://tracing color palette more readable

Project Member Reported by yangguo@chromium.org, Apr 3 2018

Issue description

The current color palette has been chosen more than two years ago [0]. The description of the change indicates that it has been generated using HSL, but the luminosity is way too low, making labels hard to read.

I suggest generating the palette using HSL at runtime, with fixed saturation and luminosity. I have a change that looks a lot better imo.

[0] https://codereview.chromium.org/1426173002
 
is_currently.png
22.8 KB View Download
should_be.png
31.6 KB View Download
Cc: l...@chromium.org fmea...@chromium.org
Components: Speed>Tracing
Owner: yangguo@chromium.org
Status: Assigned (was: Untriaged)
Hi Yang,

I think the new color palette looks objectively better, but tracing has been migrated to catapult, and this should become a catapult issue. Happy to review the CL once uploaded.
Thanks. I'll follow up on this :)
Status: WontFix (was: Assigned)
Following up here: https://github.com/catapult-project/catapult/issues/4373
New palette.
Screen Shot 2018-04-03 at 7.29.49 PM.png
8.8 KB View Download
For posterity, the script to generate this screenshot:

  const old = [
    [122, 98, 135],
    [150, 83, 105],
    [44, 56, 189],
    [99, 86, 147],
    [104, 129, 107],
    [130, 178, 55],
    [87, 109, 147],
    [111, 145, 88],
    [81, 152, 131],
    [142, 91, 111],
    [81, 163, 70],
    [148, 94, 86],
    [144, 89, 118],
    [83, 150, 97],
    [105, 94, 139],
    [89, 144, 122],
    [105, 119, 128],
    [96, 128, 137],
    [145, 88, 145],
    [88, 145, 144],
    [90, 100, 143],
    [121, 97, 136],
    [111, 160, 73],
    [112, 91, 142],
    [86, 147, 86],
    [63, 100, 170],
    [81, 152, 107],
    [60, 164, 173],
    [143, 72, 161],
    [159, 74, 86]];

for (var rgb of old) {
  var div = document.createElement('div');
  div.style.cssText = `width:20px;height:20px;background-color: rgb(${rgb.join(',')});float:left`;
  console.log(div.style.cssText);
  document.body.appendChild(div);
}
var div = document.createElement('div');
div.style.cssText = `width:20px;height:20px;`;
document.body.appendChild(div);
for (var i = 0; i < 18; i++) {
  var div = document.createElement('div');
  div.style.cssText = `width:20px;height:20px;background-color: hsl(${i/18*360},75%,75%);float:left`;
  console.log(div.style.cssText);
  document.body.appendChild(div);
}
This is the script to generate using SinebowColorGenerator, for posterity: https://gist.github.com/hashseed/3bc2844b15e006b380a4566325361b36

Sign in to add a comment