[tools][system-analyzer] Change color to dark theme

This CL attempts to change System Analyzer to fit
to the dark theme by Material Design.

Link dark theme: https://material.io/design/color/dark-theme.html

Screen Shots: https://imgur.com/a/xWJo1Xb

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

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

@@ -3,13 +3,25 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->
 
 <style>
+  h2 {
+  background-color: #BB86FC;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  color: black;
+  padding: 15px 25px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+}
 .ic-panel {
-	background-color: #355EC2;
+  background-color: #232323;
   padding: 20px 20px  20px 20px ;
   margin: auto;
 }
 #ic-panel {
-	background-color: #232323;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  background-color: #121212;
   padding: 10px 10px  10px 10px ;
   margin: auto;
   overflow-x: scroll;
@@ -60,8 +72,8 @@ found in the LICENSE file. -->
 
 <div class="ic-panel">
   <section id="ic-panel">
-		<h1>IC Explorer</h1>
-
+    <h2>IC Panel</h2>
+    <h3>IC Explorer</h3>
     <div id="legend">
       <div style="float:right;  border-style: solid; border-width: 1px; padding:20px">
           0 uninitialized<br>
@@ -74,11 +86,11 @@ found in the LICENSE file. -->
       </div>
     </div>
 
-		<h2>Data</h2>
+    <h3>Data</h3>
 
     <p>Trace Count: <span id="count">0</span></p>
 
-		<h2>Result</h2>
+    <h3>Result</h3>
     <p>
     Group-Key:
     <select id="group-key"></select>

tools/system-analyzer/index.html

@@ -34,7 +34,7 @@ found in the LICENSE file. -->
     color: white;
     margin-left: 5%;
     margin-right: 5%;
-    background-color: #041531;
+    background-color: #000000;
   }
   .colorbox {
     width: 10px;
@@ -48,15 +48,15 @@ found in the LICENSE file. -->
   #stats {
     display: flex;
     height: 250px;
-
-    background-color: #232323;
+    background-color: #121212;
     padding: 10px 10px  10px 10px ;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     margin: auto;
   }
   .stats-panel {
-        background-color: #355EC2;
-        padding: 20px 20px  20px 20px ;
+    background-color: #232323;
     margin: auto;
+    transition: 0.3s;
   }
   #stats table {
     flex: 1;

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

@@ -54,7 +54,7 @@ found in the LICENSE file. -->
     left: 50%;
     margin-left: -50px;
     border: 30px solid #000;
-    border-top: 30px solid #36E;
+    border-top: 30px solid #BB86FC;
     border-radius: 50%;
     animation: spin 1s ease-in-out infinite;
   }

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

@@ -4,16 +4,27 @@ found in the LICENSE file. -->
 
 <style>
 .map-panel {
-	background-color: #355EC2;
+  background-color: #232323;
   padding: 20px 20px  20px 20px ;
   margin: auto;
 }
 #map-panel {
-	background-color: #232323;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  background-color: #121212;
   padding: 10px 10px  10px 10px ;
   margin: auto;
 }
-
+h2 {
+  background-color: #BB86FC;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  color: black;
+  padding: 15px 25px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+}
 #mapDetails {
   font-family: monospace;
   white-space: pre;
@@ -35,7 +46,7 @@ found in the LICENSE file. -->
   height: 20px;
   display: inline-block;
   border-radius: 50%;
-	background-color: black;
+  background-color: #5e5454;
   border: 4px solid white;
   font-size: 10px;
   text-align: center;
@@ -50,7 +61,7 @@ found in the LICENSE file. -->
 }
 
 .map.selected {
-    border-color: black;
+    border-color: #5e5454;
 }
 
 .transitions {
@@ -100,24 +111,24 @@ found in the LICENSE file. -->
   width: 80px;
   display: inline-block;
   margin: 0 0 2px 0;
-	background-color: black;
+  background-color: #5e5454;
   vertical-align: top;
   padding-left: 15px;
 }
 
 .transitionLabel {
-	color: black;
+  color: #5e5454;
   transform: rotate(-15deg);
   transform-origin: top left;
   margin-top: -10px;
   font-size: 10px;
   white-space: normal;
   word-break: break-all;
-	background-color: rgba(255,255,255,0.5);
+  background-color: white;
 }
 
 .black{
-	background-color: black;
+  background-color: #5e5454;
 }
 
 .red {
@@ -130,7 +141,7 @@ found in the LICENSE file. -->
 
 .yellow {
   background-color: yellow;
-	color: black;
+  color: #5e5454;
 }
 
 .blue {
@@ -143,7 +154,15 @@ found in the LICENSE file. -->
 
 .violet {
   background-color: violet;
-	color: black;
+  color: #5e5454;
+}
+
+.success {
+  background-color:#03DAC6;
+}
+
+.failure {
+  background-color: #CF6679;
 }
 
 .showSubtransitions {
@@ -151,14 +170,14 @@ found in the LICENSE file. -->
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-	border-top: 10px solid black;
+  border-top: 10px solid #5e5454;
   cursor: zoom-in;
   margin: 4px 0 0 4px;
 }
 
 .showSubtransitions.opened {
   border-top: none;
-	border-bottom: 10px solid black;
+  border-bottom: 10px solid #5e5454;
   cursor: zoom-out;
 }
 
@@ -178,16 +197,17 @@ found in the LICENSE file. -->
 </style>
 <div class="map-panel">
   <section id="map-panel">
-		<h2>Transitions</h2>
+    <h2>Map Panel</h2>
+    <h3>Transitions</h3>
     <section id="transitionView"></section>
     <br/>
 
-		<h2>Search Map by Address</h2>
+    <h4>Search Map by Address</h4>
     <section id="searchBar"></section>
     <input type="search" id="searchBarInput" placeholder="Search maps by address.."></input>
     <button id="searchBarBtn">Search</button>
 
-		<h2>Selected Map</h2>
+    <h4>Selected Map</h4>
     <section id="mapDetails"></section>
 
     <div id="tooltip">

tools/system-analyzer/map-panel.mjs

@@ -59,10 +59,10 @@ defineCustomElement('map-panel', (templateText) =>
     if(selectedMap){
       dataModel.isValidMap = true;
       dataModel.map = selectedMap;
-      searchBar.className = "green";
+      searchBar.className = "success";
     } else {
       dataModel.isValidMap = false;
-      searchBar.className = "red";
+      searchBar.className = "failure";
     }
     this.dispatchEvent(new CustomEvent(
       'click', {bubbles: true, composed: true, detail: dataModel}));

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

@@ -3,13 +3,25 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->
 
 <style>
+  h2 {
+  background-color: #BB86FC;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  color: black;
+  padding: 15px 25px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+}
 .timeline-panel {
-    background-color: #355EC2;
+    background-color: #232323;
     padding: 20px 20px  20px 20px ;
     margin: auto;
 }
 #timeline-panel {
-    background-color: #232323;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    background-color: #121212;
     padding: 10px 10px  10px 10px ;
     margin: auto;
 }
@@ -98,7 +110,8 @@ found in the LICENSE file. -->
 
 <div class="timeline-panel">
   <section id="timeline-panel">
-    <h2>Timeline</h2>
+    <h2>Timeline Panel</h2>
+    <h3>Timeline</h3>
     <div id="timeline">
       <div id="timelineLabel">Frequency</div>
       <div id="timelineChunks"></div>