[tools][system-analyzer] Map colors to variables

This CL maps the colors being used in
the web app to variables to make it easier to
change color palette without having to track color
changes across files.

Bug: v8:10673

Change-Id: Icf1c53396b8a831367c4ed420931e6233d780a07
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2298005
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#68864}

tools/system-analyzer/ic-panel-template.html

@@ -34,8 +34,8 @@ found in the LICENSE file. -->
 
 .details span {
   padding: 0 0.4em 0 0.4em;
-  background-color: white;
-  color: black;
+  background-color: var(--on-surface-color);
+  color: var(--surface-color);
   border-radius: 25px;
   text-align: center;
   cursor: -webkit-zoom-in;

tools/system-analyzer/index.css

 
+:root {
+  --background-color: #000000;
+  --surface-color: #121212;
+  --primary-color: #BB86FC;
+  --secondary-color: #03DAC6;
+  --on-surface-color: #ffffff;
+  --on-background-color: #f5f0f0;
+  --on-primary-color: #000000;
+  --on-secondary-color: #000000;
+  --default-color: #9B6EDC;
+  --error-color: #CF6679;
+  --map-background-color: #5e5454;
+  --timeline-background-color: #1f1f1f;
+  --red: #dc6eae;
+  --green: #aedc6e;
+  --yellow: #EEFF41;
+  --blue: #6e77dc;
+  --orange: #dc9b6e;
+  --violet: #d26edc;
+}
+
 body {
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
-  color: white;
+  color: var(--on-background-color);
   margin-left: 5%;
   margin-right: 5%;
-  background-color: #000000;
+  background-color: var(--background-color);
   letter-spacing: 0.5px;
 }
 h2 {
-  background-color: #BB86FC;
+  background-color: var(--primary-color);
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   transition: 0.3s;
-  color: black;
+  color: var(--on-primary-color);
   padding: 15px 25px;
   text-align: center;
   text-decoration: none;
@@ -21,7 +42,8 @@ h2 {
 .panel {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   transition: 0.3s;
-  background-color: #121212;
+  background-color: var(--surface-color);
+  color: var(--on-surface-color);
   padding: 30px 30px 30px 30px ;
   margin: auto;
   overflow-x: scroll;
@@ -30,48 +52,48 @@ h2 {
 .colorbox {
   width: 10px;
   height: 10px;
-  border: 1px black solid;
+  border: 1px var(--background-color) solid;
 }
 
 .primary{
-  background-color: #9B6EDC;
+  background-color: var(--default-color);
 }
 
 .red {
-  background-color: #dc6eae;
+  background-color: var(--red);
 }
 
 .green {
-  background-color: #aedc6e;
+  background-color: var(--green);
 }
 
 .yellow {
-  background-color: #EEFF41;
-  color: #5e5454;
+  background-color: var(--yellow);
+  color: var(--map-background-color);
 }
 
 .blue {
-  background-color: #6e77dc;
+  background-color: var(--blue);
 }
 
 .orange {
-  background-color:#dc9b6e;
+  background-color:var(--orange);
 }
 
 .violet {
-  background-color: #d26edc;
-  color: #5e5454;
+  background-color: var(--violet);
+  color: var(--map-background-color);
 }
 
 .success {
-  background-color:#03DAC6;
+  background-color: var(--secondary-color);
 }
 
 .failure {
-  background-color: #CF6679;
+  background-color: var(--error-color);
 }
 a:link {
-  color: #03DAC6;
+  color: var(--secondary-color);
   background-color: transparent;
   text-decoration: none;
 }
\ No newline at end of file

tools/system-analyzer/index.html

@@ -24,27 +24,15 @@ found in the LICENSE file. -->
   <script src="../arguments.js"></script>
   <script src="../SourceMap.js"></script>
   <style>
-  body {
-    font-family: 'Roboto', sans-serif;
-    color: white;
-    margin-left: 5%;
-    margin-right: 5%;
-    background-color: #000000;
-  }
-  .colorbox {
-    width: 10px;
-    height: 10px;
-    border: 1px black solid;
-  }
   #instructions {
     padding: 10px 10px  60px 10px ;
     margin: auto;
   }
   kbd {
-  background-color: #BB86FC;
-  color:black;
+  background-color: var(--primary-color);
+  color: var(--on-primary-color);
   border-radius: 3px;
-  border: 1px solid black;
+  border: 1px solid var(--on-primary-color);
   display: inline-block;
   font-size: .9em;
   font-weight: bold;

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

@@ -3,6 +3,8 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->
 
 <style>
+  @import "./index.css";
+
   #fileReader {
     width: 100%;
     height: 100px;
@@ -11,8 +13,8 @@ found in the LICENSE file. -->
     border-radius: 5px;
     cursor: pointer;
     transition: all 0.5s ease-in-out;
-    border: 2px solid #BB86FC;
-    background-color: #121212;
+    border: 2px solid var(--primary-color);
+    background-color: var(--surface-color);
   }
 
   #fileReader.done {
@@ -22,8 +24,8 @@ found in the LICENSE file. -->
   }
 
   #fileReader:hover {
-    background-color: #e0edfe ;
-    color: black;
+    background-color: var(--on-surface-color);
+    color: var(--surface-color);
   }
 
   .loading #fileReader {
@@ -55,8 +57,8 @@ found in the LICENSE file. -->
     top: 40%;
     left: 50%;
     margin-left: -50px;
-    border: 30px solid #000;
-    border-top: 30px solid #BB86FC;
+    border: 30px solid var(--surface-color);
+    border-top: 30px solid var(--primary-color);
     border-radius: 50%;
     animation: spin 1s ease-in-out infinite;
   }

tools/system-analyzer/map-panel-template.html

@@ -23,12 +23,12 @@ found in the LICENSE file. -->
   height: 20px;
   display: inline-block;
   border-radius: 50%;
-  background-color: #5e5454;
-  border: 4px solid white;
+  background-color: var(--map-background-color);
+  border: 4px solid var(--on-surface-color);
   font-size: 10px;
   text-align: center;
   line-height: 18px;
-  color: white;
+  color: var(--on-surface-color);
   vertical-align: top;
   margin-top: -13px;
   /* raise z-index */
@@ -38,7 +38,7 @@ found in the LICENSE file. -->
 }
 
 .map.selected {
-    border-color: #5e5454;
+    border-color: var(--map-background-color);
 }
 
 .transitions {
@@ -88,20 +88,20 @@ found in the LICENSE file. -->
   width: 80px;
   display: inline-block;
   margin: 0 0 2px 0;
-  background-color: #5e5454;
+  background-color: var(--map-background-color);
   vertical-align: top;
   padding-left: 15px;
 }
 
 .transitionLabel {
-  color: #5e5454;
+  color: var(--map-background-color);
   transform: rotate(-15deg);
   transform-origin: top left;
   margin-top: -10px;
   font-size: 10px;
   white-space: normal;
   word-break: break-all;
-  background-color: white;
+  background-color: var(--on-surface-color);
 }
 
 .showSubtransitions {
@@ -109,14 +109,14 @@ found in the LICENSE file. -->
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-top: 10px solid #5e5454;
+  border-top: 10px solid var(--map-background-color);
   cursor: zoom-in;
   margin: 4px 0 0 4px;
 }
 
 .showSubtransitions.opened {
   border-top: none;
-  border-bottom: 10px solid #5e5454;
+  border-bottom: 10px solid var(--map-background-color);
   cursor: zoom-out;
 }
 
@@ -124,7 +124,7 @@ found in the LICENSE file. -->
   position: absolute;
   width: 10px;
   height: 10px;
-  background-color: red;
+  background-color: var(--red);
   pointer-events: none;
   z-index: 100;
   display: none;

tools/system-analyzer/stats-panel-template.html

@@ -6,7 +6,7 @@ found in the LICENSE file. -->
 #stats {
   display: flex;
   height: 250px;
-  background-color: #121212;
+  background-color: var(--surface-color);
   padding: 10px 10px  10px 10px ;
   margin: auto;
 }
@@ -35,7 +35,7 @@ found in the LICENSE file. -->
   text-align: left;
 }
 #stats table thead td {
-  border-bottom: 1px black dotted;
+  border-bottom: 1px var(--on-surface-color) dotted;
 }
 </style>
 <div id="container">

tools/system-analyzer/timeline-panel-template.html

@@ -10,7 +10,7 @@ found in the LICENSE file. -->
   overflow-y: hidden;
   overflow-x: scroll;
   user-select: none;
-  background-color: #1f1f1f;
+  background-color: var(--timeline-background-color);
   box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
 }
 #timelineLabel {
@@ -46,7 +46,7 @@ found in the LICENSE file. -->
 .timestamp {
   height: 250px;
   width: 100px;
-  border-left: 1px #121212 dashed;
+  border-left: 1px var(--surface-color) dashed;
   padding-left: 4px;
   position: absolute;
   pointer-events: none;
@@ -60,14 +60,14 @@ found in the LICENSE file. -->
   margin-top: -50px;
   margin-bottom: 10px;
   background-size: 100% 100%;
-  border: 1px #121212 solid;
+  border: 1px var(--surface-color) solid;
   border-width: 1px 0 1px 0;
   overflow: hidden;
 }
 #timelineOverviewIndicator {
   height: 100%;
   position: absolute;
-  box-shadow: 0px 2px 20px -5px #121212 inset;
+  box-shadow: 0px 2px 20px -5px var(--surface-color) inset;
   top: 0px;
   cursor: ew-resize;
 }