AuroraMiddleware/v8
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

[tools] Fix system-analyzer CSS

Browse Source 
- 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}
This commit is contained in:
Camillo Bruni 2020-10-10 20:02:26 +02:00 committed by Commit Bot
parent f9a31e424c
commit 4d47881b06
7 changed files with 127 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tools/index.html
View File

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

4
tools/system-analyzer/ic-panel-template.html
View File

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

61
tools/system-analyzer/index.css
View File

@ -49,18 +49,47 @@ body {
margin-left: 2.5%; margin-left: 2.5%;
margin-right: 2.5%; margin-right: 2.5%;
background-color: var(--background-color); background-color: var(--background-color);
letter-spacing: 0.5px;
} }
h2,
h4 { ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.0);
transition: 0.3s; }
color: var(--on-surface-color); ::-webkit-scrollbar, ::-webkit-scrollbar-track {
padding: 10px 20px; width: 10px;
text-align: center; height: 10px;
text-decoration: none; }
::-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; 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 { dl {
display: grid; display: grid;
grid-template-columns: min-content auto; grid-template-columns: min-content auto;
@ -73,15 +102,15 @@ dt {
dd { dd {
margin: 0; margin: 0;
} }
.panel { .panel {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
background-color: var(--surface-color); background-color: var(--surface-color);
color: var(--on-surface-color); color: var(--on-surface-color);
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
margin: auto; overflow-x: auto;
overflow-x: scroll;
} }
button { button {
cursor: pointer; cursor: pointer;
} }
@ -146,10 +175,4 @@ button {
background-color: var(--primary-color); background-color: var(--primary-color);
color: var(--on-primary-color); color: var(--on-primary-color);
cursor: pointer; cursor: pointer;
} }
a:link {
color: var(--secondary-color);
background-color: transparent;
text-decoration: none;
}

143
tools/system-analyzer/index.html
View File

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

2
tools/system-analyzer/log/map.mjs
View File

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

1
tools/system-analyzer/timeline-panel-template.html
View File

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

50
tools/system-analyzer/timeline/timeline-track-template.html
View File

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