v8/tools/system-analyzer/index.css
Zeynep Cankara 0f6afbe125 [tools][system-analyzer] Add Source Code Panel
This CL adds a source code panel to display source code positions of
Map/IC log events.

* Clicking file positions on the Ic Panel emits FocusEvent with
SourcePositionLogEvent as entry to highlight code related with the
selected icLogEvent.

* Clicking map details on the Map Panel emits FocusEvent with
SourcePositionLogEvent as entry to highlight code related with the
selected mapLogEvent.

Bug: v8:10644
Change-Id: Icaf3e9e3f7fae485c50ad685f9ec5dc8ac28b3dc
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2358734
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Cr-Commit-Position: refs/heads/master@{#69610}
2020-08-28 15:20:21 +00:00

154 lines
2.9 KiB
CSS

:root {
--background-color: #000000;
--surface-color: #121212;
--primary-color: #bb86fc;
--secondary-color: #03dac6;
--on-surface-color: #ffffff;
--on-background-color: #f5f0f0;
--on-primary-color: #000000;
--on-secondary-color: #000000;
--default-color: #9b6edc;
--error-color: #cf6679;
--map-background-color: #5e5454;
--timeline-background-color: #1f1f1f;
--file-reader-background-color: #ffffff80;
--red: #dc6eae;
--green: #aedc6e;
--yellow: #eeff41;
--blue: #6e77dc;
--orange: #dc9b6e;
--violet: #d26edc;
}
[data-theme="light"] {
--background-color: #ffffff;
--surface-color: #ffffff;
--primary-color: #6200ee;
--secondary-color: #03dac5;
--on-surface-color: #000000;
--on-background-color: #000000;
--on-primary-color: #ffffff;
--on-secondary-color: #000000;
--default-color: #3700b3;
--error-color: #b00020;
--map-background-color: #5e5454;
--timeline-background-color: #fdfcfc;
--file-reader-background-color: #887e8b80;
--red: #b71c1c;
--green: #7db300;
--yellow: #ffff00;
--blue: #0024b3;
--orange: #ef6c00;
--violet: #8f00b3;
}
body {
font-family: "Roboto", sans-serif;
font-size: 14px;
color: var(--on-background-color);
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;
display: inline-block;
}
dl {
display: grid;
grid-template-columns: min-content auto;
grid-gap: 10px;
}
dt {
text-align: right;
white-space: nowrap;
}
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;
}
button {
cursor: pointer;
}
input,
select,
button {
background-color: var(--surface-color);
color: var(--on-surface-color);
}
.colorbox {
width: 10px;
height: 10px;
border: 1px var(--background-color) solid;
}
.primary {
background-color: var(--default-color);
}
.red {
background-color: var(--red);
}
.green {
background-color: var(--green);
}
.yellow {
background-color: var(--yellow);
color: var(--map-background-color);
}
.blue {
background-color: var(--blue);
}
.orange {
background-color: var(--orange);
}
.violet {
background-color: var(--violet);
color: var(--map-background-color);
}
.success {
background-color: var(--secondary-color);
}
.failure {
background-color: var(--error-color);
}
.highlight {
background-color: var(--primary-color);
color: var(--on-primary-color);
}
.clickable:hover,
.clickable:active {
background-color: var(--primary-color);
color: var(--on-primary-color);
cursor: pointer;
}
a:link {
color: var(--secondary-color);
background-color: transparent;
text-decoration: none;
}