[tools][system-analyzer] Change colors and layout

This CL changes colors of map panel
and layout of IC panel legend for organize
UI better.

Bug: v8:10673, v8:10644

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

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

@@ -44,21 +44,27 @@ found in the LICENSE file. -->
 #legend {
   padding-right: 20px;
 }
-
 </style>
 <div class="panel">
   <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>
-        X no feedback<br>
-        1 monomorphic<br>
-        ^ recompute handler<br>
-        P polymorphic<br>
-        N megamorphic<br>
-        G generic
-    </div>
+    <dl style="float:right;  border-style: solid; border-width: 1px; padding:20px">
+      <dt>0</dt>
+      <dd>uninitialized</dd>
+      <dt>X</dt>
+      <dd>no feedback</dd>
+      <dt>1</dt>
+      <dd>monomorphic</dd>
+      <dt>^</dt>
+      <dd>recompute handler</dd>
+      <dt>P</dt>
+      <dd>polymorphic</dd>
+      <dt>N</dt>
+      <dd>megamorphic</dd>
+      <dt>G</dt>
+      <dd>generic</dd>
+    </dl>
   </div>
 
   <h3>Data</h3>

tools/system-analyzer/index.css

@@ -39,6 +39,18 @@ h2 {
   text-decoration: none;
   display: inline-block;
 }
+dl {
+  display: grid;
+  grid-template-columns: min-content auto;
+  grid-gap: 10px;
+}
+dt {
+  text-align: right;
+  white-space: nowrap;
+}
+dd {
+  margin: 0;
+}
 .panel {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   transition: 0.3s;

tools/system-analyzer/index.html

@@ -40,18 +40,6 @@ found in the LICENSE file. -->
   padding: 0px 4px 2px 4px;
   white-space: nowrap;
 }
-dl {
-  display: grid;
-  grid-template-columns: min-content auto;
-  grid-gap: 10px;
-}
-dt {
-  text-align: right;
-  white-space: nowrap;
-}
-dd {
-  margin: 0;
-}
 </style>
 <script type="module" >
 import {App} from  './index.mjs';

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

@@ -94,14 +94,14 @@ found in the LICENSE file. -->
 }
 
 .transitionLabel {
-  color: var(--map-background-color);
+  color: var(--on-surface-color);
   transform: rotate(-15deg);
   transform-origin: top left;
   margin-top: -10px;
   font-size: 10px;
   white-space: normal;
   word-break: break-all;
-  background-color: var(--on-surface-color);
+  background-color: var(--surface-color);
 }
 
 .showSubtransitions {