[tools][system-analyzer] Color compatibility

Changes:

* Transition edges on timeline-track with the same color of the map type.
* Log file reader loading background adapted to light theme.
* Support additional IC log event colors.
* Move theme switch button to top of the app.

Bug: v8:10644, v8:10673

Change-Id: Ib086b6f4a8bc5f86a4925b251112c640e37278ef
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2379869Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Cr-Commit-Position: refs/heads/master@{#69600}

tools/system-analyzer/helper.mjs

@@ -120,16 +120,20 @@ function typeToColor(type) {
       return CSSColor.red;
     case 'LoadGlobalIC':
       return CSSColor.green;
+    case 'LoadIC':
+      return CSSColor.primaryColor;
     case 'StoreInArrayLiteralIC':
       return CSSColor.violet;
+    case 'StoreGlobalIC':
+      return CSSColor.blue;
     case 'StoreIC':
       return CSSColor.orange;
     case 'KeyedLoadIC':
       return CSSColor.red;
     case 'KeyedStoreIC':
-      return CSSColor.primaryColor;
+      return CSSColor.yellow;
   }
-  return CSSColor.primaryColor;
+  return CSSColor.secondaryColor;
 }
 
 

tools/system-analyzer/index.css

@@ -11,6 +11,7 @@
   --error-color: #cf6679;
   --map-background-color: #5e5454;
   --timeline-background-color: #1f1f1f;
+  --file-reader-background-color: #ffffff80;
   --red: #dc6eae;
   --green: #aedc6e;
   --yellow: #eeff41;
@@ -32,6 +33,7 @@
   --error-color: #b00020;
   --map-background-color: #5e5454;
   --timeline-background-color: #fdfcfc;
+  --file-reader-background-color: #887e8b80;
   --red: #b71c1c;
   --green: #7db300;
   --yellow: #ffff00;

tools/system-analyzer/index.html

@@ -41,9 +41,8 @@ found in the LICENSE file. -->
       white-space: nowrap;
     }
 
-    /*Simple css to style it like a toggle switch*/
     .theme-switch-wrapper {
-      display: flex;
+      display: inline-block;
       align-items: center;
     }
 
@@ -129,6 +128,12 @@ found in the LICENSE file. -->
       <log-file-reader id="log-file-reader"></log-file-reader>
       <br></br>
     </section>
+    <div class="theme-switch-wrapper">
+      <label class="theme-switch" for="checkbox">
+        <input type="checkbox" id="checkbox" />
+        <div class="slider round"></div>
+      </label>
+    </div>
     <div id="container" class="initial">
       <timeline-panel id="timeline-panel">
         <timeline-track id="map-track"></timeline-track>
@@ -138,12 +143,6 @@ found in the LICENSE file. -->
       <ic-panel id="ic-panel" onchange="app.handleSelectIc(event)"></ic-panel>
     </div>
   </div>
-  <div class="theme-switch-wrapper">
-    <label class="theme-switch" for="checkbox">
-      <input type="checkbox" id="checkbox" />
-      <div class="slider round"></div>
-    </label>
-  </div>
   <div id="instructions">
     <h2>Instructions</h2>
     <p>

tools/system-analyzer/log-file-reader-template.html

@@ -48,7 +48,7 @@ found in the LICENSE file. -->
     left: 0px;
     width: 100%;
     height: 100%;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: var(--file-reader-background-color);
   }
 
   #spinner {

tools/system-analyzer/timeline/timeline-track.mjs

@@ -420,7 +420,6 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
         ctx.lineTo(xTo, yTo);
       }
       if (!showLabel) {
-        ctx.strokeStyle = CSSColor.onBackgroundColor;
         ctx.stroke();
       } else {
         let centerX, centerY;
@@ -431,12 +430,11 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
           centerX = xTo;
           centerY = yTo;
         }
-        ctx.strokeStyle = CSSColor.onBackgroundColor;
         ctx.moveTo(centerX, centerY);
         ctx.lineTo(centerX + offsetX, centerY - labelOffset);
         ctx.stroke();
         ctx.textAlign = 'left';
-        ctx.fillStyle = CSSColor.onBackgroundColor;
+        ctx.fillStyle = typeToColor(edge.type);
         ctx.fillText(
           edge.toString(), centerX + offsetX + 2, centerY - labelOffset);
       }
@@ -448,7 +446,6 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       if (depth >= max) return;
       ctx.globalAlpha = 0.5 - depth * (0.3 / max);
       ctx.strokeStyle = CSSColor.timelineBackgroundColor;
-
       const limit = Math.min(map.children.length, 100)
       for (let i = 0; i < limit; i++) {
         let edge = map.children[i];