[tools] Fix system-analyzer CSS

- simplify CSS in index.css
- fix start-page layout
- reduce timeline-track height
- fix timeline-track legend layout
- fix scrollbar colors in dark theme

Bug: v8:10644
Change-Id: If3bb7422e6866bac766e7851f489a42ecbcf1d78
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2463239
Auto-Submit: Camillo Bruni <cbruni@chromium.org>
Commit-Queue: Sathya Gunasekaran  <gsathya@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Cr-Commit-Position: refs/heads/master@{#70438}

tools/index.html

@@ -46,7 +46,6 @@ a:hover, a:active {
   text-align: center;
   padding: 10px 50px 10px 50px ;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-  transition: 0.3s;
   background-color: #121212;
   width: auto;
 }

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

@@ -25,10 +25,6 @@ found in the LICENSE file. -->
     padding: 0.5em 0 0.2em 0;
   }
 
-  .entry-details {}
-
-  .entry-details TD {}
-
   .details {
     width: 0.1em;
   }

tools/system-analyzer/index.css

@@ -49,18 +49,47 @@ body {
   margin-left: 2.5%;
   margin-right: 2.5%;
   background-color: var(--background-color);
-  letter-spacing: 0.5px;
 }
-h2,
-h4 {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-  transition: 0.3s;
-  color: var(--on-surface-color);
-  padding: 10px 20px;
-  text-align: center;
-  text-decoration: none;
+
+::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0.0);
+}
+::-webkit-scrollbar, ::-webkit-scrollbar-track {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb { 
+  background-color: rgba(128, 128, 128, 0.5);
+  border-radius: 8px;
+  cursor: pointer;
+}
+::-webkit-scrollbar-thumb:hover { 
+  background-color: rgba(128, 128, 128, 0.8);
+}
+
+kbd {
+  color: var(--on-primary-color);
+  background-color: var(--primary-color);
+  border-radius: 3px;
+  border: 1px solid var(--on-primary-color);
   display: inline-block;
+  font-size: .9em;
+  font-weight: bold;
+  padding: 0px 4px 2px 4px;
+  white-space: nowrap;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--secondary-color);
 }
+a:link {
+  color: var(--secondary-color);
+}
+
 dl {
   display: grid;
   grid-template-columns: min-content auto;
@@ -73,15 +102,15 @@ dt {
 dd {
   margin: 0;
 }
+
 .panel {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-  transition: 0.3s;
   background-color: var(--surface-color);
   color: var(--on-surface-color);
   padding: 10px 10px 10px 10px;
-  margin: auto;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
+
 button {
   cursor: pointer;
 }
@@ -146,10 +175,4 @@ button {
   background-color: var(--primary-color);
   color: var(--on-primary-color);
   cursor: pointer;
-}
-
-a:link {
-  color: var(--secondary-color);
-  background-color: transparent;
-  text-decoration: none;
-}
+}
\ No newline at end of file

tools/system-analyzer/index.html

@@ -13,23 +13,6 @@ found in the LICENSE file. -->
   <script type="module" src="index.mjs"></script>
   <link rel="stylesheet" type="text/css" href="./index.css">
   <style>
-    #instructions {
-      padding: 10px 10px 60px 10px;
-      margin: auto;
-    }
-
-    kbd {
-      background-color: var(--primary-color);
-      color: var(--on-primary-color);
-      border-radius: 3px;
-      border: 1px solid var(--on-primary-color);
-      display: inline-block;
-      font-size: .9em;
-      font-weight: bold;
-      padding: 0px 4px 2px 4px;
-      white-space: nowrap;
-    }
-
     .theme-switch-wrapper {
       display: inline-block;
       align-items: center;
@@ -37,9 +20,9 @@ found in the LICENSE file. -->
 
     .theme-switch {
       display: inline-block;
-      height: 34px;
+      height: 16px;
       position: relative;
-      width: 60px;
+      width: 38px;
     }
 
     .theme-switch input {
@@ -54,34 +37,22 @@ found in the LICENSE file. -->
       position: absolute;
       right: 0;
       top: 0;
-      transition: .4s;
+      border-radius: 34px;
     }
 
     .slider:before {
       background-color: var(--surface-color);
-      bottom: 4px;
+      position: absolute;
+      height: 10px;
+      width: 10px;
+      bottom: 3px;
       content: "";
-      height: 26px;
       left: 4px;
-      position: absolute;
-      transition: .4s;
-      width: 26px;
-    }
-
-    input:checked+.slider {
-      background-color: var(--primary-color);
+      border-radius: 50%;
     }
 
     input:checked+.slider:before {
-      transform: translateX(26px);
-    }
-
-    .slider.round {
-      border-radius: 34px;
-    }
-
-    .slider.round:before {
-      border-radius: 50%;
+      transform: translateX(20px);
     }
 
     #container.initial {
@@ -94,19 +65,15 @@ found in the LICENSE file. -->
       grid-template-columns: repeat(auto-fit, minmax(400px, 800px));
       grid-template-rows: repeat(auto-fit, minmax(400px, 800px));
       grid-auto-flow: dense;
+      grid-gap: 1em;
     }
 
     #container.loaded>#timeline-panel {
       grid-column: span 2;
       overflow: scroll;
     }
-
-    a {
-      color: var(--primary-color);
-    }
-
-    a:hover {
-      color: var(--secondary-color);
+    dt::after  {
+      content: ":";
     }
   </style>
   <script type="module">
@@ -119,58 +86,64 @@ found in the LICENSE file. -->
 </head>
 
 <body>
-  <div id="content">
-    <section id="file-reader">
-      <log-file-reader id="log-file-reader"></log-file-reader>
-    </section>
+  <section id="file-reader">
+    <log-file-reader id="log-file-reader"></log-file-reader>
+  </section>
+
+  <section id="container" class="initial">
+    <timeline-panel id="timeline-panel">
+      <timeline-track id="map-track"></timeline-track>
+      <timeline-track id="ic-track"></timeline-track>
+    </timeline-panel>
+    <map-panel id="map-panel"></map-panel>
+    <ic-panel id="ic-panel" onchange="app.handleSelectIc(event)"></ic-panel>
+    <source-panel id="source-panel"></source-panel>
+  </section>
+
+  <section id="settings">
+    <h2>Settings</h2>
+    <span>Theme:</span>
     <div class="theme-switch-wrapper">
-      <label class="theme-switch" for="checkbox">
-        <input type="checkbox" id="checkbox" />
-        <div class="slider round"></div>
+      <label class="theme-switch" for="theme-switch-input">
+        <input type="checkbox" id="theme-switch-input" />
+        <div class="slider"></div>
       </label>
     </div>
-    <div id="container" class="initial">
-      <timeline-panel id="timeline-panel">
-        <timeline-track id="map-track"></timeline-track>
-        <timeline-track id="ic-track"></timeline-track>
-      </timeline-panel>
-      <map-panel id="map-panel"></map-panel>
-      <ic-panel id="ic-panel" onchange="app.handleSelectIc(event)"></ic-panel>
-      <source-panel id="source-panel"></source-panel>
-    </div>
-  </div>
-  <div id="instructions">
+  </section>
+
+  <section id="instructions">
     <h2>Instructions</h2>
     <p>
       Unified web interface to analyse runtime information stored in the v8 log.
     </p>
-    For generating log file from
-    <a href="https://v8.dev/docs/build" target="_blank">d8</a>:
-    <p>
-      Log Options:
-    </p>
-    <dl>
-      <dt>--trace-maps:</dt>
+    For generating a v8.log file from <a href="https://v8.dev/docs/build">d8</a>:
+    <ul>
+      <li>
+        <code>/path/do/d8 --trace-maps --trace_ic --log-source-code $FILE</code>
+      </li>
+    </ul>
+    For generating a v8.log file from Chrome:
+    <ul>
+      <li>
+        <code>/path/to/chrome --user-data-dir=/var/tmp/chr$RANDOM --no-sandbox
+        --js-flags='--trace-ic --trace-maps --log-source-code’
+        $WEBSITE_URL</code>
+      </li>
+    </ul>
+
+    <h3>Log Options:</h3>
+    <dl class="d8-options">
+      <dt><code>--trace-maps</code></dt>
       <dd>Log<a href="https://v8.dev/blog/fast-properties" target="_blank">
           Maps</a></dd>
-      <dt>--trace_ic:</dt>
+      <dt><code>--trace-ic</code></dt>
       <dd>Log
         <a href="https://mathiasbynens.be/notes/shapes-ics" target="_blank">
           ICs</a></dd>
-      <dt>--log-source-code:</dt>
+      <dt><code>--log-source-code</code></dt>
       <dd>Log source code</dd>
     </dl>
-    Usage:
-    <ul>
-      <li><code>/path/do/d8 --trace-maps --trace_ic --log-source-code $FILE
-      </code></li>
-    </ul>
-    For generating a log file from Chrome:
-    <ul>
-      <li><code>/path/to/chrome --user-data-dir=/var/tmp/chr1 --no-sandbox
-        --js-flags='--trace-ic --trace-maps --log-source-code’
-        $WEBSITE_URL</code></li>
-    </ul>
+
     <h3>Keyboard Shortcuts for Navigation</h3>
     <dl>
       <dt><kbd>SHIFT</kbd> + <kbd>Arrow Up</kbd></dt>
@@ -197,7 +170,7 @@ found in the LICENSE file. -->
       <dt><kbd>-</kbd></dt>
       <dd>Timeline zoom out</dd>
     </dl>
-  </div>
+  </section>
 </body>
 
 </html>

tools/system-analyzer/log/map.mjs

@@ -8,7 +8,7 @@ import { Event } from './log.mjs';
 // ===========================================================================
 // Map Log Events
 
-const kChunkHeight = 250;
+const kChunkHeight = 200;
 const kChunkWidth = 10;
 
 function define(prototype, name, fn) {

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

@@ -45,7 +45,6 @@ found in the LICENSE file. -->
 </style>
 <div class="panel">
   <h2>Timeline Panel</h2>
-  <h3>Timeline</h3>
   <div>
     <slot></slot>
   </div>

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

@@ -8,7 +8,7 @@ found in the LICENSE file. -->
 <style>
   #timeline {
     position: relative;
-    height: 300px;
+    height: calc(200px + 12px);
     overflow-y: hidden;
     overflow-x: scroll;
     user-select: none;
@@ -20,20 +20,20 @@ found in the LICENSE file. -->
     transform-origin: left bottom 0;
     position: absolute;
     left: 0;
-    width: 250px;
+    width: 200px;
     text-align: center;
     font-size: 10px;
     opacity: 0.5;
   }
 
   #timelineChunks {
-    height: 250px;
+    height: 200px;
     position: absolute;
     margin-right: 100px;
   }
 
   #timelineCanvas {
-    height: 250px;
+    height: 200px;
     position: relative;
     overflow: visible;
     pointer-events: none;
@@ -50,20 +50,18 @@ found in the LICENSE file. -->
   }
 
   .timestamp {
-    height: 250px;
+    height: 200px;
     width: 100px;
-    border-left: 1px var(--surface-color) dashed;
+    border-left: 1px var(--on-surface-color) dashed;
     padding-left: 4px;
     position: absolute;
     pointer-events: none;
     font-size: 10px;
-    opacity: 0.5;
   }
 
   #legend {
     position: relative;
     float: right;
-    text-align: center;
     width: 100%;
     max-width: 280px;
     padding-left: 20px;
@@ -73,8 +71,14 @@ found in the LICENSE file. -->
   th,
   td {
     width: 200px;
-    text-align: center;
-    padding: 5px;
+    text-align: left;
+    padding-bottom: 1px;
+  }
+  
+  /* right align numbers */
+  #legend td:nth-of-type(4n+3),
+  #legend td:nth-of-type(4n+4) {
+    text-align: right;
   }
 
   .timeline {
@@ -99,20 +103,18 @@ found in the LICENSE file. -->
   }
 </style>
 <div class="timeline">
-  <div id="legend">
-    <table>
-      <thead>
-        <tr>
-          <td>Color</td>
-          <td>Type</td>
-          <td>Count</td>
-          <td>Percent</td>
-        </tr>
-      </thead>
-      <tbody id="legendContent">
-      </tbody>
-    </table>
-  </div>
+  <table id="legend">
+    <thead>
+      <tr>
+        <td></td>
+        <td>Type</td>
+        <td>Count</td>
+        <td>Percent</td>
+      </tr>
+    </thead>
+    <tbody id="legendContent">
+    </tbody>
+  </table>
   <div id="timeline">
     <div class="leftHandle"></div>
     <div class="selection"></div>