Skip to content

V
V8
Commit 81521dd1 authored by Zeynep Cankara's avatar Zeynep Cankara Committed by Commit Bot
Browse files
Options

[tools][system-analyzer] Establish dark theme compatibility 

This CL changes color of the timeline
and map panel to decrease eye strain and follow
material design guidelines.

Material design guidelines ensures to enhance
accessibility and conserve energy.

Bug: v8:10673, v8:10672
Change-Id: Iea8f487fa5b73437888e88d6e1d694d5bfaf830c
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2292239Reviewed-by: 's avatarCamillo Bruni <cbruni@chromium.org>
Reviewed-by: 's avatarSathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Cr-Commit-Position: refs/heads/master@{#68833}
parent b342a120
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 272 deletions
tools/system-analyzer/ic-panel-template.html
View file @ 81521dd1
<!-- Copyright 2020 the V8 project authors. All rights reserved.
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: #232323;
padding: 20px 20px 20px 20px ;
margin: auto;
}
#ic-panel {
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;
}
@import "./index.css";
.count {
text-align: right;
......@@ -57,8 +34,8 @@ found in the LICENSE file. -->
.details span {
padding: 0 0.4em 0 0.4em;
background-color: black;
color: white;
background-color: white;
color: black;
border-radius: 25px;
text-align: center;
cursor: -webkit-zoom-in;
......@@ -68,42 +45,38 @@ found in the LICENSE file. -->
padding-right: 20px;
}
</style>
<div class="ic-panel">
<section id="ic-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>
<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>
</div>
<h3>Data</h3>
<h3>Data</h3>
<p>Trace Count: <span id="count">0</span></p>
<p>Trace Count: <span id="count">0</span></p>
<h3>Result</h3>
<p>
Group-Key:
<select id="group-key"></select>
</p>
Filter number of items
<br></br>
<input type="search" id="filter-input" placeholder="Number of items"></input>
<button id="filterICBtn">Filter</button>
<p>
<table id="table" width="100%">
<tbody id="table-body">
</tbody>
</table>
</p>
</section>
<h3>Result</h3>
<p>
Group-Key:
<select id="group-key"></select>
</p>
Filter number of items
<br></br>
<input type="search" id="filter-input" placeholder="Number of items"></input>
<button id="filterICBtn">Filter</button>
<p>
<table id="table" width="100%">
<tbody id="table-body">
</tbody>
</table>
</p>
</div>
tools/system-analyzer/index.css 0 → 100644
View file @ 81521dd1
body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: white;
margin-left: 5%;
margin-right: 5%;
background-color: #000000;
letter-spacing: 0.5px;
}
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;
}
.panel {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
background-color: #121212;
padding: 30px 30px 30px 30px ;
margin: auto;
overflow-x: scroll;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.colorbox {
width: 10px;
height: 10px;
border: 1px black solid;
}
.primary{
background-color: #9B6EDC;
}
.red {
background-color: #dc6eae;
}
.green {
background-color: #aedc6e;
}
.yellow {
background-color: #EEFF41;
color: #5e5454;
}
.blue {
background-color: #6e77dc;
}
.orange {
background-color:#dc9b6e;
}
.violet {
background-color: #d26edc;
color: #5e5454;
}
.success {
background-color:#03DAC6;
}
.failure {
background-color: #CF6679;
}
a:link {
color: #03DAC6;
background-color: transparent;
text-decoration: none;
}
\ No newline at end of file
tools/system-analyzer/index.html
View file @ 81521dd1
......@@ -11,6 +11,7 @@ found in the LICENSE file. -->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<!-- <link rel="icon" type="image/png" href="/images/favicon.png"/> -->
<!-- <script type="module" src="index.js"></script> -->
<link rel="stylesheet" type="text/css" href="./index.css">
<script src="helper.js"></script>
<script type="module" src="log-file-reader.mjs"></script>
......@@ -31,20 +32,6 @@ found in the LICENSE file. -->
<script src="./ic-processor.js"></script>
<script src="./map-model.js"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: white;
margin-left: 5%;
margin-right: 5%;
background-color: #000000;
letter-spacing: 0.5px;
}
.colorbox {
width: 10px;
height: 10px;
border: 1px black solid;
}
#instructions {
padding: 10px 10px 60px 10px ;
margin: auto;
......
tools/system-analyzer/log-file-reader-template.html
View file @ 81521dd1
......@@ -8,15 +8,17 @@ found in the LICENSE file. -->
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px #000000;
border-radius: 5px;
cursor: pointer;
transition: all 0.5s ease-in-out;
border: 2px solid #BB86FC;
background-color: #121212;
}
#fileReader.done {
height: 20px;
line-height: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#fileReader:hover {
......
tools/system-analyzer/map-model.js
View file @ 81521dd1
......@@ -374,14 +374,14 @@ class View {
let max = chunks.max();
ctx.clearRect(0, 0, canvas.width, height);
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.moveTo(0, height);
for (let i = 0; i < chunks.length; i++) {
ctx.lineTo(i / kFactor, height - chunks[i] / max * height);
}
ctx.lineTo(chunks.length, height);
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.closePath();
ctx.fill();
......@@ -401,7 +401,7 @@ class View {
}
setMapStyle(map, ctx) {
ctx.fillStyle = map.edge && map.edge.from ? 'black' : 'green';
ctx.fillStyle = map.edge && map.edge.from ? 'white' : '#aedc6e';
}
setEdgeStyle(edge, ctx) {
......@@ -427,6 +427,7 @@ class View {
ctx.beginPath();
this.setMapStyle(map, ctx);
ctx.arc(x, y, 6, 0, 2 * Math.PI);
ctx.strokeStyle = 'white';
ctx.stroke();
}
......@@ -488,6 +489,7 @@ class View {
ctx.lineTo(xTo, yTo);
}
if (!showLabel) {
ctx.strokeStyle = 'white';
ctx.stroke();
} else {
let centerX, centerY;
......@@ -498,10 +500,12 @@ class View {
centerX = xTo;
centerY = yTo;
}
ctx.strokeStyle = 'white';
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + offsetX, centerY - labelOffset);
ctx.stroke();
ctx.textAlign = 'left';
ctx.fillStyle = 'white';
ctx.fillText(
edge.toString(), centerX + offsetX + 2, centerY - labelOffset)
}
......@@ -576,7 +580,7 @@ class TransitionView {
addMapNode(map) {
let node = div('map');
if (map.edge) node.classList.add(map.edge.getColor());
if (map.edge) node.style.backgroundColor = map.edge.getColor();
node.map = map;
node.addEventListener('click', () => this.selectMap(map));
if (map.children.length > 1) {
......@@ -603,8 +607,9 @@ class TransitionView {
}
addTransitionEdge(map) {
let classes = ['transitionEdge', map.edge.getColor()];
let classes = ['transitionEdge'];
let edge = div(classes);
edge.style.backgroundColor = map.edge.getColor();
let labelNode = div('transitionLabel');
labelNode.innerText = map.edge.toString();
edge.appendChild(labelNode);
......@@ -661,19 +666,26 @@ class TransitionView {
function transitionTypeToColor(type) {
switch (type) {
case 'new':
return 'green';
// green
return '#aedc6e';
case 'Normalize':
return 'violet';
// violet
return '#d26edc';
case 'SlowToFast':
return 'orange';
// orange
return '#dc9b6e';
case 'InitialMap':
return 'yellow';
// yellow
return '#EEFF41';
case 'Transition':
return 'black';
// pink/violet (primary)
return '#9B6EDC';
case 'ReplaceDescriptors':
return 'red';
// red
return '#dc6eae';
}
return 'black';
// pink/violet (primary)
return '#9B6EDC';
}
// ======================= histogram ==========
......
tools/system-analyzer/map-panel-template.html
View file @ 81521dd1
......@@ -2,34 +2,13 @@
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<style>
.map-panel {
background-color: #232323;
padding: 20px 20px 20px 20px ;
margin: auto;
}
#map-panel {
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;
}
@import "./index.css";
#mapDetails {
font-family: monospace;
white-space: pre;
overflow-x: scroll;
}
#transitionView {
overflow-x: scroll;
white-space: nowrap;
......@@ -39,7 +18,6 @@ h2 {
margin-top: -25px;
width: 100%;
}
.map {
width: 20px;
height: 20px;
......@@ -126,44 +104,6 @@ h2 {
background-color: white;
}
.black{
background-color: #5e5454;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
color: #5e5454;
}
.blue {
background-color: blue;
}
.orange {
background-color: orange;
}
.violet {
background-color: violet;
color: #5e5454;
}
.success {
background-color:#03DAC6;
}
.failure {
background-color: #CF6679;
}
.showSubtransitions {
width: 0;
height: 0;
......@@ -192,28 +132,26 @@ h2 {
#searchBarInput {
width: 200px;
color: black;
}
</style>
<stats-panel id="stats-panel" onchange="showMaps(event)"></stats-panel>
<div class="map-panel">
<section id="map-panel">
<h2>Map Panel</h2>
<h3>Transitions</h3>
<section id="transitionView"></section>
<br/>
<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>
<h4>Selected Map</h4>
<section id="mapDetails"></section>
<div id="tooltip">
<div id="tooltipContents"></div>
</div>
</section>
<div class="panel">
<h2>Map Panel</h2>
<h3>Transitions</h3>
<section id="transitionView"></section>
<br/>
<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>
<h4>Selected Map</h4>
<section id="mapDetails"></section>
<div id="tooltip">
<div id="tooltipContents"></div>
</div>
</div>
tools/system-analyzer/stats-panel-template.html
View file @ 81521dd1
<!-- Copyright 2020 the V8 project authors. All rights reserved.
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;
@import "./index.css";
#stats {
display: flex;
height: 250px;
background-color: #121212;
padding: 10px 10px 10px 10px ;
margin: auto;
}
#stats table {
flex: 1;
padding-right: 50px;
max-height: 250px;
display: inline-block;
overflow-y: scroll;
}
#stats table td {
cursor: pointer;
}
#stats {
display: flex;
height: 250px;
background-color: #121212;
padding: 10px 10px 10px 10px ;
margin: auto;
}
#stats-panel {
background-color: #121212;
padding: 10px 10px 10px 10px ;
margin: auto;
}
.stats-panel {
background-color:#232323;
padding: 20px 20px 20px 20px ;
margin: auto;
}
#stats table {
flex: 1;
padding-right: 50px;
max-height: 250px;
display: inline-block;
overflow-y: scroll;
}
#stats table td {
cursor: pointer;
}
#stats .transitionTable {
overflow-y: scroll;
}
#stats .transitionTable tr {
max-width: 200px;
#stats .transitionTable {
overflow-y: scroll;
}
#stats .transitionTable tr {
max-width: 200px;
}
#stats .transitionType {
text-align: right;
max-width: 380px;
}
#stats .transitionType tr td:nth-child(2) {
text-align: left;
}
#stats table thead td {
border-bottom: 1px black dotted;
}
}
#stats .transitionType {
text-align: right;
max-width: 380px;
}
#stats .transitionType tr td:nth-child(2) {
text-align: left;
}
#stats table thead td {
border-bottom: 1px black dotted;
}
</style>
<div id="container">
<div class="stats-panel">
<section id="stats-panel">
<h2>Stats Panel</h2>
<h3>Stats</h3>
<section id="stats">
</section>
<div class="panel">
<h2>Stats Panel</h2>
<h3>Stats</h3>
<section id="stats">
</section>
</div>
</div>
tools/system-analyzer/timeline-panel-template.html
View file @ 81521dd1
......@@ -3,35 +3,15 @@ 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: #232323;
padding: 20px 20px 20px 20px ;
margin: auto;
}
#timeline-panel {
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;
}
@import "./index.css";
#timeline {
position: relative;
height: 300px;
overflow-y: hidden;
overflow-x: scroll;
user-select: none;
background-color: whitesmoke;
background-color: #1f1f1f;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
#timelineLabel {
transform: rotate(90deg);
......@@ -56,7 +36,7 @@ found in the LICENSE file. -->
}
.chunk {
width: 6px;
border: 0px white solid;
border: 0px #262626 solid;
border-width: 0 2px 0 2px;
position: absolute;
background-size: 100% 100%;
......@@ -66,7 +46,7 @@ found in the LICENSE file. -->
.timestamp {
height: 250px;
width: 100px;
border-left: 1px black dashed;
border-left: 1px #121212 dashed;
padding-left: 4px;
position: absolute;
pointer-events: none;
......@@ -80,14 +60,14 @@ found in the LICENSE file. -->
margin-top: -50px;
margin-bottom: 10px;
background-size: 100% 100%;
border: 1px black solid;
border: 1px #121212 solid;
border-width: 1px 0 1px 0;
overflow: hidden;
}
#timelineOverviewIndicator {
height: 100%;
position: absolute;
box-shadow: 0px 2px 20px -5px black inset;
box-shadow: 0px 2px 20px -5px #121212 inset;
top: 0px;
cursor: ew-resize;
}
......@@ -106,22 +86,18 @@ found in the LICENSE file. -->
left: 100%;
}
</style>
<div class="timeline-panel">
<section id="timeline-panel">
<h2>Timeline Panel</h2>
<h3>Timeline</h3>
<div id="timeline">
<div id="timelineLabel">Frequency</div>
<div id="timelineChunks"></div>
<canvas id="timelineCanvas"></canvas>
</div>
<div id="timelineOverview">
<div id="timelineOverviewIndicator">
<div class="leftMask"></div>
<div class="rightMask"></div>
</div>
<div class="panel">
<h2>Timeline Panel</h2>
<h3>Timeline</h3>
<div id="timeline">
<div id="timelineLabel">Frequency</div>
<div id="timelineChunks"></div>
<canvas id="timelineCanvas"></canvas>
</div>
<div id="timelineOverview">
<div id="timelineOverviewIndicator">
<div class="leftMask"></div>
<div class="rightMask"></div>
</div>
</section>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment