commit e160d4ae8604f1bbda2d7e1d3077a06a20b3cea5
author Isabelle Taylor <taylori@google.com> Thu May 07 00:17:09 2020 +0000
committer Gerrit Code Review <noreply-gerritcodereview@google.com> Thu May 07 00:17:09 2020 +0000
tree 0d28893dc8b06c74ed348fd30d7aa57d1372415c
parent 46e2bdaa942abf2e4e8abe2e4280c365b608b690
parent 17d266adb55e81960b07b4de6a25fe1c3e53bb0b

Merge "perfetto-ui: Make sleeping slices less visually distracting"

ui/src/frontend/colorizer.ts

diff --git a/ui/src/frontend/colorizer.ts b/ui/src/frontend/colorizer.ts
index a62f8eb..60d7038 100644
--- a/ui/src/frontend/colorizer.ts
+++ b/ui/src/frontend/colorizer.ts
@@ -21,6 +21,7 @@
   h: number;
   s: number;
   l: number;
+  a?: number;
 }
 
 const MD_PALETTE: Color[] = [
@@ -76,11 +77,12 @@
   s: 55,
   l: 47
 };
-const LIGHT_GREY: Color = {
-  c: 'light grey',
+const TRANSPARENT_WHITE: Color = {
+  c: 'white',
   h: 0,
-  s: 0,
-  l: 87
+  s: 1,
+  l: 97,
+  a: 0.55,
 };
 const ORANGE: Color = {
   c: 'orange',
@@ -104,7 +106,7 @@
   } else if (state.includes('Uninterruptible Sleep')) {
     return ORANGE;
   } else if (state.includes('Sleeping')) {
-    return LIGHT_GREY;
+    return TRANSPARENT_WHITE;
   }
   return INDIGO;
 }

ui/src/tracks/thread_state/frontend.ts

diff --git a/ui/src/tracks/thread_state/frontend.ts b/ui/src/tracks/thread_state/frontend.ts
index 91b54ee..7410a0d 100644
--- a/ui/src/tracks/thread_state/frontend.ts
+++ b/ui/src/tracks/thread_state/frontend.ts
@@ -103,7 +103,11 @@
           colorSummarizedSlice(breakdown, rectStart, rectEnd);
           text = getSummarizedSliceText(breakdown);
         } else {
-          ctx.fillStyle = `hsl(${color.h},${color.s}%,${color.l}%)`;
+          let colorStr = `hsl(${color.h},${color.s}%,${color.l}%)`;
+          if (color.a) {
+            colorStr = `hsla(${color.h},${color.s}%,${color.l}%, ${color.a})`;
+          }
+          ctx.fillStyle = colorStr;
         }
         if (shouldGroupBusyStates && rectWidth < 1) {
           rectWidth = 1;
@@ -111,7 +115,7 @@
         ctx.fillRect(rectStart, MARGIN_TOP, rectWidth, RECT_HEIGHT);
 
         // Don't render text when we have less than 10px to play with.
-        if (rectWidth < 10) continue;
+        if (rectWidth < 10 || text === 'Sleeping') continue;
         const title = cropText(text, charWidth, rectWidth);
         const rectXCenter = rectStart + rectWidth / 2;
         ctx.fillStyle = color.l > 80 || breakdown ? '#404040' : '#fff';