Skip to content

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

[tools][system-analyzer] Change color to dark theme 

This CL attempts to change System Analyzer to fit
to the dark theme by Material Design.

Link dark theme: https://material.io/design/color/dark-theme.html

Screen Shots: https://imgur.com/a/xWJo1Xb

Change-Id: Ib921febfaaee7aa362495031a174875f442af3a0
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2282596Reviewed-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@{#68729}
parent cb1bc4a2
Hide whitespace changes
Inline Side-by-side
Showing with 218 additions and 173 deletions
tools/system-analyzer/ic-panel-template.html
View file @ dbe1f4ef
......@@ -3,35 +3,47 @@ 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: #355EC2;
padding: 20px 20px 20px 20px ;
margin: auto;
background-color: #232323;
padding: 20px 20px 20px 20px ;
margin: auto;
}
#ic-panel {
background-color: #232323;
padding: 10px 10px 10px 10px ;
margin: auto;
overflow-x: scroll;
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;
}
.count {
text-align: right;
width: 5em;
text-align: right;
width: 5em;
}
.percentage {
text-align: right;
width: 5em;
text-align: right;
width: 5em;
}
.key {
padding-left: 1em;
padding-left: 1em;
}
.drilldown-group-title {
font-weight: bold;
padding: 0.5em 0 0.2em 0;
font-weight: bold;
padding: 0.5em 0 0.2em 0;
}
.entry-details {
}
......@@ -40,58 +52,58 @@ found in the LICENSE file. -->
}
.details {
width: 0.1em;
width: 0.1em;
}
.details span {
padding: 0 0.4em 0 0.4em;
background-color: black;
color: white;
border-radius: 25px;
text-align: center;
cursor: -webkit-zoom-in;
padding: 0 0.4em 0 0.4em;
background-color: black;
color: white;
border-radius: 25px;
text-align: center;
cursor: -webkit-zoom-in;
}
#legend {
padding-right: 20px;
padding-right: 20px;
}
</style>
<div class="ic-panel">
<section id="ic-panel">
<h1>IC Explorer</h1>
<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>
<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>
<h2>Data</h2>
<h3>Data</h3>
<p>Trace Count: <span id="count">0</span></p>
<p>Trace Count: <span id="count">0</span></p>
<h2>Result</h2>
<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>
</section>
</div>
tools/system-analyzer/index.html
View file @ dbe1f4ef
......@@ -34,12 +34,12 @@ found in the LICENSE file. -->
color: white;
margin-left: 5%;
margin-right: 5%;
background-color: #041531;
background-color: #000000;
}
.colorbox {
width: 10px;
height: 10px;
border: 1px black solid;
width: 10px;
height: 10px;
border: 1px black solid;
}
#instructions {
padding: 10px 10px 60px 10px ;
......@@ -48,15 +48,15 @@ found in the LICENSE file. -->
#stats {
display: flex;
height: 250px;
background-color: #232323;
background-color: #121212;
padding: 10px 10px 10px 10px ;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
margin: auto;
}
.stats-panel {
background-color: #355EC2;
padding: 20px 20px 20px 20px ;
margin: auto;
background-color: #232323;
margin: auto;
transition: 0.3s;
}
#stats table {
flex: 1;
......
tools/system-analyzer/log-file-reader-template.html
View file @ dbe1f4ef
......@@ -54,7 +54,7 @@ found in the LICENSE file. -->
left: 50%;
margin-left: -50px;
border: 30px solid #000;
border-top: 30px solid #36E;
border-top: 30px solid #BB86FC;
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
}
......
tools/system-analyzer/map-panel-template.html
View file @ dbe1f4ef
......@@ -4,195 +4,215 @@ found in the LICENSE file. -->
<style>
.map-panel {
background-color: #355EC2;
padding: 20px 20px 20px 20px ;
margin: auto;
background-color: #232323;
padding: 20px 20px 20px 20px ;
margin: auto;
}
#map-panel {
background-color: #232323;
padding: 10px 10px 10px 10px ;
margin: auto;
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;
}
#mapDetails {
font-family: monospace;
white-space: pre;
overflow-x: scroll;
font-family: monospace;
white-space: pre;
overflow-x: scroll;
}
#transitionView {
overflow-x: scroll;
white-space: nowrap;
min-height: 50px;
max-height: 200px;
padding: 50px 0 0 0;
margin-top: -25px;
width: 100%;
overflow-x: scroll;
white-space: nowrap;
min-height: 50px;
max-height: 200px;
padding: 50px 0 0 0;
margin-top: -25px;
width: 100%;
}
.map {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
background-color: black;
border: 4px solid white;
font-size: 10px;
text-align: center;
line-height: 18px;
color: white;
vertical-align: top;
margin-top: -13px;
/* raise z-index */
position: relative;
z-index: 2;
cursor: pointer;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
background-color: #5e5454;
border: 4px solid white;
font-size: 10px;
text-align: center;
line-height: 18px;
color: white;
vertical-align: top;
margin-top: -13px;
/* raise z-index */
position: relative;
z-index: 2;
cursor: pointer;
}
.map.selected {
border-color: black;
border-color: #5e5454;
}
.transitions {
display: inline-block;
margin-left: -15px;
display: inline-block;
margin-left: -15px;
}
.transition {
min-height: 55px;
margin: 0 0 -2px 2px;
min-height: 55px;
margin: 0 0 -2px 2px;
}
/* gray out deprecated transitions */
.deprecated > .transitionEdge,
.deprecated > .map {
opacity: 0.5;
opacity: 0.5;
}
.deprecated > .transition {
border-color: rgba(0, 0, 0, 0.5);
border-color: rgba(0, 0, 0, 0.5);
}
/* Show a border for all but the first transition */
.transition:nth-of-type(2),
.transition:nth-last-of-type(n+2) {
border-left: 2px solid;
margin-left: 0px;
border-left: 2px solid;
margin-left: 0px;
}
/* special case for 2 transitions */
.transition:nth-last-of-type(1) {
border-left: none;
border-left: none;
}
/* topmost transitions are not related */
#transitionView > .transition {
border-left: none;
border-left: none;
}
/* topmost transition edge needs initial offset to be aligned */
#transitionView > .transition > .transitionEdge {
margin-left: 13px;
margin-left: 13px;
}
.transitionEdge {
height: 2px;
width: 80px;
display: inline-block;
margin: 0 0 2px 0;
background-color: black;
vertical-align: top;
padding-left: 15px;
height: 2px;
width: 80px;
display: inline-block;
margin: 0 0 2px 0;
background-color: #5e5454;
vertical-align: top;
padding-left: 15px;
}
.transitionLabel {
color: black;
transform: rotate(-15deg);
transform-origin: top left;
margin-top: -10px;
font-size: 10px;
white-space: normal;
word-break: break-all;
background-color: rgba(255,255,255,0.5);
color: #5e5454;
transform: rotate(-15deg);
transform-origin: top left;
margin-top: -10px;
font-size: 10px;
white-space: normal;
word-break: break-all;
background-color: white;
}
.black{
background-color: black;
background-color: #5e5454;
}
.red {
background-color: red;
background-color: red;
}
.green {
background-color: green;
background-color: green;
}
.yellow {
background-color: yellow;
color: black;
background-color: yellow;
color: #5e5454;
}
.blue {
background-color: blue;
background-color: blue;
}
.orange {
background-color: orange;
background-color: orange;
}
.violet {
background-color: violet;
color: black;
background-color: violet;
color: #5e5454;
}
.success {
background-color:#03DAC6;
}
.failure {
background-color: #CF6679;
}
.showSubtransitions {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid black;
cursor: zoom-in;
margin: 4px 0 0 4px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid #5e5454;
cursor: zoom-in;
margin: 4px 0 0 4px;
}
.showSubtransitions.opened {
border-top: none;
border-bottom: 10px solid black;
cursor: zoom-out;
border-top: none;
border-bottom: 10px solid #5e5454;
cursor: zoom-out;
}
#tooltip {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
pointer-events: none;
z-index: 100;
display: none;
position: absolute;
width: 10px;
height: 10px;
background-color: red;
pointer-events: none;
z-index: 100;
display: none;
}
#searchBarInput {
width: 200px;
width: 200px;
}
</style>
<div class="map-panel">
<section id="map-panel">
<h2>Transitions</h2>
<section id="transitionView"></section>
<br/>
<h2>Search Map by Address</h2>
<section id="searchBar"></section>
<input type="search" id="searchBarInput" placeholder="Search maps by address.."></input>
<button id="searchBarBtn">Search</button>
<h2>Selected Map</h2>
<section id="mapDetails"></section>
<div id="tooltip">
<div id="tooltipContents"></div>
</div>
</section>
<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>
tools/system-analyzer/map-panel.mjs
View file @ dbe1f4ef
......@@ -59,10 +59,10 @@ defineCustomElement('map-panel', (templateText) =>
if(selectedMap){
dataModel.isValidMap = true;
dataModel.map = selectedMap;
searchBar.className = "green";
searchBar.className = "success";
} else {
dataModel.isValidMap = false;
searchBar.className = "red";
searchBar.className = "failure";
}
this.dispatchEvent(new CustomEvent(
'click', {bubbles: true, composed: true, detail: dataModel}));
......
tools/system-analyzer/timeline-panel-template.html
View file @ dbe1f4ef
......@@ -3,13 +3,25 @@ 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: #355EC2;
background-color: #232323;
padding: 20px 20px 20px 20px ;
margin: auto;
}
#timeline-panel {
background-color: #232323;
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;
}
......@@ -98,7 +110,8 @@ found in the LICENSE file. -->
<div class="timeline-panel">
<section id="timeline-panel">
<h2>Timeline</h2>
<h2>Timeline Panel</h2>
<h3>Timeline</h3>
<div id="timeline">
<div id="timelineLabel">Frequency</div>
<div id="timelineChunks"></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