v8/tools/turbolizer/turbo-visualizer.css
Alexander.Gilday2 286e2b14a5 [turbolizer] Add support for showing perf profiling information.
perf-turbo.py merges a perf data file and a turbofan trace file into a
single json object which can then be piped to a file and uploaded to
turbolizer to display the profiling data in the disassembly. With the
changes, turbolizer now shows the event counts for instruction in
percentage form and with heatmap-stype colouring. Multiple different
events can be recorded at once with a new drop-down menu to select which
event to view the counts of. The documentation has been updated with
instructions. Using the script is optional and turbolizer retains
previous functionality if a trace without profiling data is uploaded.

BUG=None

Review-Url: https://codereview.chromium.org/2174803002
Cr-Commit-Position: refs/heads/master@{#38124}
2016-07-28 09:42:38 +00:00

338 lines
5.1 KiB
CSS

.visible-transition {
transition-delay: 0s;
transition-duration: 1s;
transition-property: all;
transition-timing-function: ease;
}
.collapse-pane {
background: #A0A0A0;
bottom: 0;
position: absolute;
margin-bottom: 0.5em;
margin-right: 0.5em;
margin-left: 0.5em;
border-radius: 5px;
padding: 0.5em;
z-index: 5;
opacity: 0.7;
cursor: pointer;
}
.search-input {
vertical-align: middle;
width: 145px;
opacity: 1;
}
.button-input {
vertical-align: middle;
width: 24px;
opacity: 0.4;
cursor: pointer;
}
.button-input-toggled {
border-radius: 5px;
background-color: #505050;
}
.button-input:focus {
outline: none;
}
.button-input-invisible {
vertical-align: middle;
width: 0px;
visibility: hidden;
}
.selected {
background-color: #FFFF33;
}
.prettyprint ol.linenums > li {
list-style-type: decimal;
!important
}
body {
margin: 0;
padding: 0;
overflow:hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
p {
text-align: center;
overflow: overlay;
position: relative;
}
marker {
fill: #080808;
}
g rect {
fill: #F0F0F0;
stroke: #080808;
stroke-width: 2px;
}
g.unsorted rect {
opacity: 0.5;
}
div.scrollable {
overflow-y: _croll; overflow-x: hidden;
}
g.control rect {
fill: #EFCC00;
stroke: #080808;
stroke-width: 5px;
}
g.javascript rect {
fill: #DD7E6B;
}
g.simplified rect {
fill: #3C78D8;
}
g.machine rect {
fill: #6AA84F;
}
g.input rect {
fill: #CFE2F3;
}
g.selected rect {
fill: #FFFF33;
}
circle.bubbleStyle {
fill: #080808;
fill-opacity: 0.0;
stroke: #080808;
stroke-width: 2px;
}
circle.bubbleStyle:hover {
stroke-width: 3px;
}
circle.filledBubbleStyle {
fill: #080808;
stroke: #080808;
stroke-width: 2px;
}
circle.filledBubbleStyle:hover {
fill: #080808;
stroke-width: 3px;
}
circle.halfFilledBubbleStyle {
fill: #808080;
stroke: #101010;
stroke-width: 2px;
}
circle.halfFilledBubbleStyle:hover {
fill: #808080;
stroke-width: 3px;
}
path.effect {
fill: none;
stroke: #080808;
stroke-width: 4px;
cursor: default;
}
path.effect:hover {
stroke-width: 6px;
}
path.control {
fill: none;
stroke: #080808;
stroke-width: 4px;
cursor: default;
}
path.control:hover {
stroke-width: 6px;
}
path.value {
fill: none;
stroke: #888888;
stroke-width: 4px;
cursor: default;
}
path.value:hover {
stroke-width: 6px;
}
path.frame-state {
fill: none;
stroke: #080808;
stroke-width: 4px;
cursor: default;
}
path.frame-state:hover{
stroke-width: 6px;
}
path.hidden {
fill: none;
stroke-width: 0;
}
path.link.selected {
stroke: #FFFF33;
}
pre.prettyprint {
border: none !important;
padding: 0px;
}
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
background: none !important
}
li.nolinenums {
list-style-type:none;
}
ul.noindent {
-webkit-padding-start: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
}
input:hover, .collapse-pane:hover input {
opacity: 1;
cursor: pointer;
}
span.linkable-text {
text-decoration: underline;
}
span.linkable-text:hover {
cursor: pointer;
font-weight: bold;
}
#left {
float: left; height: 100%; background-color: #FFFFFF;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-property: width;
transition-duration: 1s, 1s;
}
#middle {
float:left; height: 100%; background-color: #F8F8F8;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-property: width;
transition-duration: 1s, 1s;
}
#right {
float: right; background-color: #FFFFFF;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-property: width;
transition-duration: 1s, 1s;
}
#disassembly-collapse {
right: 0;
}
#source-collapse {
left: 0;
}
#graph-toolbox-anchor {
height: 0px;
}
#graph-toolbox {
position: relative;
top: 1em;
left: 0.7em;
border: 2px solid #eee8d5;
border-radius: 5px;
padding: 0.7em;
z-index: 5;
background: rgba(100%, 100%, 100%, 0.7);
}
#disassembly-toolbox {
position: relative;
top: 1em;
left: 0.7em;
border: 2px solid #eee8d5;
border-radius: 5px;
padding: 0.7em;
z-index: 5;
}
#load-file {
position: absolute;
top: 0;
right: 0;
margin-top: 0.5em;
margin-right: 0.5em;
z-index: 5;
opacity: 0.7;
}
#load-file input {
background: #A0A0A0;
border-radius: 5px;
padding: 0.5em;
}
#hidden-file-upload {
display: none;
}
.prof-low {
color: #888;
}
.prof-med {
color: #080;
}
.prof-high {
color: #800;
}