[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}
2020-10-10 20:02:26 +02:00 · 2020-10-10 20:02:26 +02:00 · 4d47881b06
commit 4d47881b06
parent f9a31e424c
7 changed files with 127 additions and 135 deletions
--- a/tools/index.html
+++ b/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;
 }
--- a/tools/system-analyzer/ic-panel-template.html
+++ b/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;
  }
--- a/tools/system-analyzer/index.css
+++ b/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;
 }
@ -147,9 +176,3 @@ button {
  color: var(--on-primary-color);
  cursor: pointer;
 }
-
-a:link {
-  color: var(--secondary-color);
-  background-color: transparent;
-  text-decoration: none;
-}
--- a/tools/system-analyzer/index.html
+++ b/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;
-      content: "";
-      height: 26px;
-      left: 4px;
      position: absolute;
-      transition: .4s;
-      width: 26px;
-    }
-
-    input:checked+.slider {
-      background-color: var(--primary-color);
+      height: 10px;
+      width: 10px;
+      bottom: 3px;
+      content: "";
+      left: 4px;
+      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,17 +86,11 @@ 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>
-    <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">
+
+  <section id="container" class="initial">
    <timeline-panel id="timeline-panel">
      <timeline-track id="map-track"></timeline-track>
      <timeline-track id="ic-track"></timeline-track>
@ -137,40 +98,52 @@ found in the LICENSE file. -->
    <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="theme-switch-input">
+        <input type="checkbox" id="theme-switch-input" />
+        <div class="slider"></div>
+      </label>
    </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>
--- a/tools/system-analyzer/log/map.mjs
+++ b/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) {
--- a/tools/system-analyzer/timeline-panel-template.html
+++ b/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>
--- a/tools/system-analyzer/timeline/timeline-track-template.html
+++ b/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,11 +103,10 @@ found in the LICENSE file. -->
  }
 </style>
 <div class="timeline">
-  <div id="legend">
-    <table>
+  <table id="legend">
    <thead>
      <tr>
-          <td>Color</td>
+        <td></td>
        <td>Type</td>
        <td>Count</td>
        <td>Percent</td>
@ -112,7 +115,6 @@ found in the LICENSE file. -->
    <tbody id="legendContent">
    </tbody>
  </table>
-  </div>
  <div id="timeline">
    <div class="leftHandle"></div>
    <div class="selection"></div>