[tools][system-analyzer] Maximise space use
This CL maximises the space use in between panels and fixes asymmetries in the Web app to make the UI panel views more compact and increase accessibility of the web app for different screen size. Bug: v8:10644 Change-Id: I07bf6317db2cf3fa59204120276f0f885e356e6c Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2351660 Reviewed-by: Sathya Gunasekaran <gsathya@chromium.org> Commit-Queue: Zeynep Cankara <zcankara@google.com> Cr-Commit-Position: refs/heads/master@{#69358}
This commit is contained in:
Zeynep Cankara
Commit Bot
parent
175e982e5a
commit
4206dd799d
@ -1,62 +1,60 @@
|
||||
|
||||
:root {
|
||||
--background-color: #000000;
|
||||
--surface-color: #121212;
|
||||
--primary-color: #BB86FC;
|
||||
--secondary-color: #03DAC6;
|
||||
--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;
|
||||
--default-color: #9b6edc;
|
||||
--error-color: #cf6679;
|
||||
--map-background-color: #5e5454;
|
||||
--timeline-background-color: #1f1f1f;
|
||||
--red: #dc6eae;
|
||||
--green: #aedc6e;
|
||||
--yellow: #EEFF41;
|
||||
--yellow: #eeff41;
|
||||
--blue: #6e77dc;
|
||||
--orange: #dc9b6e;
|
||||
--violet: #d26edc;
|
||||
}
|
||||
|
||||
|
||||
[data-theme="light"] {
|
||||
--background-color: #FFFFFF;
|
||||
--surface-color: #FFFFFF;
|
||||
--primary-color: #6200EE;
|
||||
--secondary-color: #03DAC5;
|
||||
--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-primary-color: #ffffff;
|
||||
--on-secondary-color: #000000;
|
||||
--default-color: #3700B3;
|
||||
--error-color: #B00020;
|
||||
--default-color: #3700b3;
|
||||
--error-color: #b00020;
|
||||
--map-background-color: #5e5454;
|
||||
--timeline-background-color: #EEEEEE;
|
||||
--red: #B71C1C;
|
||||
--timeline-background-color: #fdfcfc;
|
||||
--red: #b71c1c;
|
||||
--green: #7db300;
|
||||
--yellow: #FFFF00;
|
||||
--yellow: #ffff00;
|
||||
--blue: #0024b3;
|
||||
--orange: #EF6C00;
|
||||
--orange: #ef6c00;
|
||||
--violet: #8f00b3;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--on-background-color);
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
margin-left: 2.5%;
|
||||
margin-right: 2.5%;
|
||||
background-color: var(--background-color);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
h2, h4 {
|
||||
background-color: var(--primary-color);
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
h2,
|
||||
h4 {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
transition: 0.3s;
|
||||
color: var(--on-primary-color);
|
||||
padding: 15px 25px;
|
||||
color: var(--on-surface-color);
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
@ -74,14 +72,13 @@ dd {
|
||||
margin: 0;
|
||||
}
|
||||
.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);
|
||||
color: var(--on-surface-color);
|
||||
padding: 30px 30px 30px 30px ;
|
||||
padding: 10px 10px 10px 10px;
|
||||
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;
|
||||
@ -89,7 +86,7 @@ dd {
|
||||
border: 1px var(--background-color) solid;
|
||||
}
|
||||
|
||||
.primary{
|
||||
.primary {
|
||||
background-color: var(--default-color);
|
||||
}
|
||||
|
||||
@ -111,7 +108,7 @@ dd {
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color:var(--orange);
|
||||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
.violet {
|
||||
@ -130,4 +127,4 @@ a:link {
|
||||
color: var(--secondary-color);
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,63 +6,75 @@ found in the LICENSE file. -->
|
||||
<link href="./index.css" rel="stylesheet">
|
||||
</head>
|
||||
<style>
|
||||
#timeline {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
user-select: none;
|
||||
background-color: var(--timeline-background-color);
|
||||
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
|
||||
}
|
||||
#timelineLabel {
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left bottom 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 250px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#timelineChunks {
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
margin-right: 100px;
|
||||
}
|
||||
#timelineCanvas {
|
||||
height: 250px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
.chunk {
|
||||
width: 6px;
|
||||
border: 0px var(--timeline-background-color) solid;
|
||||
border-width: 0 2px 0 2px;
|
||||
position: absolute;
|
||||
background-size: 100% 100%;
|
||||
image-rendering: pixelated;
|
||||
bottom: 0px;
|
||||
}
|
||||
.timestamp {
|
||||
height: 250px;
|
||||
width: 100px;
|
||||
border-left: 1px var(--surface-color) dashed;
|
||||
padding-left: 4px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#timelineLegend {
|
||||
position: relative;
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.timeline {
|
||||
background-color: var(--timeline-background-color);
|
||||
}
|
||||
#timeline {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
user-select: none;
|
||||
background-color: var(--timeline-background-color);
|
||||
}
|
||||
|
||||
#timelineLabel {
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left bottom 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 250px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#timelineChunks {
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
#timelineCanvas {
|
||||
height: 250px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chunk {
|
||||
width: 6px;
|
||||
border: 0px var(--timeline-background-color) solid;
|
||||
border-width: 0 2px 0 2px;
|
||||
position: absolute;
|
||||
background-size: 100% 100%;
|
||||
image-rendering: pixelated;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
height: 250px;
|
||||
width: 100px;
|
||||
border-left: 1px var(--surface-color) dashed;
|
||||
padding-left: 4px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#timelineLegend {
|
||||
position: relative;
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
background-color: var(--timeline-background-color);
|
||||
}
|
||||
|
||||
#timelineLegendContent {
|
||||
float: right;
|
||||
padding: 20px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
<div class="timeline">
|
||||
<div id="timelineLegend">
|
||||
@ -75,4 +87,4 @@ found in the LICENSE file. -->
|
||||
<div id="timelineChunks"></div>
|
||||
<canvas id="timelineCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user