blob: 94a9c0ef99a46791035c943d73bfc21594971530 [file] [log] [blame]
// Copyright (C) 2018 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
@import "widgets/theme";
@import "typefaces";
@import "fonts";
:root {
--sidebar-width: 230px;
--topbar-height: 44px;
--monospace-font: "Roboto Mono", monospace;
--track-shell-width: 250px;
--track-border-color: #00000025;
--anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
--selection-stroke-color: #00344596;
--selection-fill-color: #8398e64d;
--overview-timeline-non-visible-color: #c8c8c8cc;
--details-content-height: 280px;
}
@mixin transition($time: 0.1s) {
transition: opacity $time ease, color $time ease, background-color $time ease,
border-color $time ease, width $time ease, height $time ease,
max-width $time ease, max-height $time ease, margin $time ease,
transform $time ease, box-shadow $time ease, border-radius $time ease;
}
@mixin material-icon($content) {
@include icon;
content: $content;
}
@mixin track_shell_title() {
font-size: 14px;
max-height: 30px;
overflow: hidden;
text-align: left;
overflow-wrap: break-word;
font-family: "Roboto Condensed", sans-serif;
font-weight: 300;
line-break: anywhere;
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
touch-action: none;
}
html {
font-family: Roboto, verdana, sans-serif;
height: 100%;
width: 100%;
}
html,
body,
body > main {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overscroll-behavior: none;
overflow: hidden;
}
pre,
code {
font-family: var(--monospace-font);
}
// This is to minimize Mac vs Linux Chrome Headless rendering differences
// when running UI intergrationtests via puppeteer.
body.testing {
-webkit-font-smoothing: antialiased !important;
font-kerning: none !important;
}
h1,
h2,
h3 {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
padding: 0;
margin: 0;
}
table {
user-select: text;
}
body > main {
display: grid;
grid-template-areas:
"sidebar topbar"
"sidebar alerts"
"sidebar page";
grid-template-rows: auto auto 1fr;
grid-template-columns: auto 1fr;
color: #121212;
overflow: hidden;
}
body.filedrag::after {
content: "Drop the trace file to open it";
position: fixed;
z-index: 99;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px dashed #404854;
text-align: center;
font-size: 3rem;
line-height: 100vh;
color: #333;
background: rgba(255, 255, 255, 0.5);
}
button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
button.close {
font-family: var(--monospace-font);
}
.full-page-loading-screen {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background: #3e4a5a url("assets/logo-3d.png") no-repeat fixed center;
}
.page {
grid-area: page;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
.split-panel {
flex: 1;
display: flex;
flex-flow: row;
position: relative;
overflow: hidden;
}
.alerts {
grid-area: alerts;
background-color: #f2f2f2;
> div {
font-family: "Roboto", sans-serif;
font-weight: 400;
letter-spacing: 0.25px;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
button {
width: 24px;
height: 24px;
}
}
}
@mixin table-font-size {
font-size: 14px;
line-height: 18px;
}
$table-hover-color: hsl(214, 22%, 90%);
$table-border-color: rgba(60, 76, 92, 0.4);
$bottom-tab-padding: 10px;
@mixin table-component {
@include bottom-panel-font;
@include table-font-size;
width: 100%;
border-collapse: collapse;
thead {
font-weight: normal;
}
tr:hover td {
background-color: $table-hover-color;
}
tr.header {
border-bottom: 1px solid $table-border-color;
text-align: center;
}
td {
padding: 3px 5px;
white-space: nowrap;
i.material-icons {
// Shrink the icons inside the table cells to increase the information
// density a little bit.
font-size: 16px;
}
}
}
.generic-table {
@include table-component;
}
.pivot-table {
@include table-component;
thead,
i {
cursor: pointer;
}
td.first {
border-left: 1px solid $table-border-color;
padding-left: 6px;
}
thead td.reorderable-cell {
cursor: grab;
}
.disabled {
cursor: default;
}
.indent {
display: inline-block;
// 16px is the width of expand_more/expand_less icon to pad out cells
// without the button
width: 16px;
}
strong {
font-weight: 400;
}
}
.query-table {
width: 100%;
font-size: 14px;
border: 0;
thead td {
// TODO(stevegolton): Get sticky working again.
// position: sticky;
// top: 0;
background-color: hsl(214, 22%, 90%);
color: #262f3c;
text-align: center;
padding: 1px 3px;
border-style: solid;
border-color: #fff;
border-right-width: 1px;
border-left-width: 1px;
}
tbody tr {
@include transition();
background-color: hsl(214, 22%, 100%);
font-family: var(--monospace-font);
&:nth-child(even) {
background-color: hsl(214, 22%, 95%);
}
td:first-child {
padding-left: 5px;
}
td:last-child {
padding-right: 5px;
}
&:hover {
background-color: hsl(214, 22%, 90%);
}
&[clickable] {
cursor: pointer;
}
}
}
.query-error {
padding: 20px 10px;
color: hsl(-10, 50%, 50%);
font-family: "Roboto Condensed", sans-serif;
font-weight: 300;
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-button {
cursor: pointer;
}
.popup-menu {
position: absolute;
background-color: white;
right: 0;
box-shadow: 0 0 4px 0 #999;
/* TODO(hjd): Reduce and make z-index use sensible. */
z-index: 1000;
&.closed {
display: none;
}
&.opened {
display: block;
}
button.open-menu {
border-radius: 0;
margin: 0;
height: auto;
background: transparent;
color: #111;
font-size: 12px;
padding: 0.4em 1em;
white-space: nowrap;
width: 100%;
text-align: right;
line-height: 1;
display: block; // Required in order for inherited white-space property not
// to screw up vertical rendering of the popup menu items.
&:hover {
background: #c7d0db;
}
}
.nested-menu {
padding-right: 1em;
}
}
.track {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr 0;
&::after {
display: block;
content: "";
grid-column: 1 / span 2;
border-top: 1px solid var(--track-border-color);
margin-top: -1px;
z-index: 2;
}
.track-shell {
@include transition();
padding-left: 10px;
display: grid;
cursor: grab;
grid-template-areas: "title buttons";
grid-template-columns: 1fr auto;
align-items: center;
width: var(--track-shell-width);
background: #fff;
border-right: 1px solid #c7d0db;
overflow: hidden;
&.drag {
background-color: #eee;
box-shadow: 0 4px 12px -4px #999 inset;
}
&.drop-before {
box-shadow: 0 4px 2px -1px hsl(213, 40%, 50%) inset;
}
&.drop-after {
box-shadow: 0 -4px 2px -1px hsl(213, 40%, 50%) inset;
}
&.selected {
background-color: #ebeef9;
}
&.alternating-thread-track {
background: hsl(214, 22%, 95%);
}
.chip {
background-color: #bed6ff;
border-radius: $pf-border-radius;
font-size: smaller;
padding: 0 0.1rem;
margin-left: 1ch;
}
h1 {
grid-area: title;
color: hsl(213, 22%, 30%);
@include track_shell_title();
}
.track-buttons {
grid-area: buttons;
display: flex;
height: 100%;
align-items: center;
}
.track-button {
@include transition();
color: rgb(60, 86, 136);
cursor: pointer;
width: 22px;
font-size: 18px;
opacity: 0;
}
.track-button.show {
opacity: 1;
}
.track-button.full-height {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
&:hover {
background-color: #ebeef9;
}
}
&:hover .track-button {
opacity: 1;
}
&.flash {
background-color: #ffe263;
}
}
}
.scrolling-panel-container {
position: relative;
overflow-x: hidden;
overflow-y: auto;
flex: 1 1 auto;
will-change: transform; // Force layer creation.
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "space";
}
.details-panel-container {
box-shadow: #0000003b 0px 0px 3px 1px;
overflow: auto;
}
.pinned-panel-container {
position: relative;
// Override top level overflow: hidden so height of this flex item can be
// its content height.
overflow: visible;
box-shadow: 1px 3px 15px rgba(23, 32, 44, 0.3);
z-index: 2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "space";
}
// In the scrolling case, since the canvas is overdrawn and continuously
// repositioned, we need the canvas to be in a div with overflow hidden and
// height equaling the total height of the content to prevent scrolling
// height from growing.
.scroll-limiter {
position: relative;
grid-area: space;
overflow: hidden;
}
canvas.main-canvas {
z-index: -1;
}
.panels {
grid-area: space;
user-select: none;
}
.panel {
position: relative; // Otherwise canvas covers panel dom.
&.sticky {
// TODO(stevegolton): Get sticky working again.
// position: sticky;
z-index: 3;
// top: 0;
background-color: hsl(215, 22%, 19%);
}
}
.pan-and-zoom-content {
flex: 1;
position: relative;
display: flex;
flex-flow: column nowrap;
}
.overview-timeline {
height: 70px;
}
.time-axis-panel {
height: 22px;
}
.tickbar {
height: 5px;
}
.notes-panel {
height: 20px;
}
.x-scrollable {
overflow-x: auto;
}
header.overview {
position: sticky;
top: 0;
left: 0;
display: flex;
align-content: baseline;
background-color: hsl(213, 22%, 82%);
color: hsl(213, 22%, 20%);
font-family: "Roboto Condensed", sans-serif;
font-size: 15px;
font-weight: 400;
padding: 4px 10px;
vertical-align: middle;
border-color: hsl(213, 22%, 75%);
border-style: solid;
border-width: 1px 0;
.code {
font-family: var(--monospace-font);
font-size: 12px;
margin-left: 10px;
color: hsl(213, 22%, 40%);
}
span {
white-space: nowrap;
}
span.code {
text-overflow: ellipsis;
max-width: 50vw;
overflow: hidden;
}
span.spacer {
flex-grow: 1;
}
}
.text-select {
user-select: text;
}
button.query-ctrl {
background: #262f3c;
color: white;
border-radius: 10px;
font-size: 10px;
height: 18px;
line-height: 18px;
min-width: 7em;
margin: auto 0 auto 1rem;
}
.debug-panel-border {
position: absolute;
top: 0;
height: 100%;
width: 100%;
border: 1px solid rgba(69, 187, 73, 0.5);
pointer-events: none;
}
.perf-stats {
--stroke-color: hsl(217, 39%, 94%);
position: fixed;
bottom: 0;
left: 0;
width: 600px;
color: var(--stroke-color);
font-family: var(--monospace-font);
padding: 10px 24px;
z-index: 100;
background-color: rgba(27, 28, 29, 0.9);
button {
text-decoration: underline;
color: hsl(45, 100%, 48%);
&:hover {
color: hsl(6, 70%, 53%);
}
}
.close-button {
position: absolute;
right: 20px;
top: 10px;
width: 20px;
height: 20px;
color: var(--stroke-color);
}
& > section {
padding: 5px;
border-bottom: 1px solid var(--stroke-color);
}
div {
margin: 2px 0;
}
table,
td,
th {
border: 1px solid var(--stroke-color);
text-align: center;
padding: 4px;
margin: 4px 0;
}
table {
border-collapse: collapse;
}
}
.track-group-panel {
--collapsed-background: hsla(190, 49%, 97%, 1);
--collapsed-transparent: hsla(190, 49%, 97%, 0);
--expanded-background: hsl(215, 22%, 19%);
--expanded-transparent: hsl(215, 22%, 19%, 0);
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
transition: background-color 0.4s, color 0.4s;
height: 40px;
&::after {
display: block;
content: "";
grid-column: 1 / span 2;
border-top: 1px solid var(--track-border-color);
margin-top: -1px;
}
&[collapsed="true"] {
background-color: var(--collapsed-transparent);
.shell {
border-right: 1px solid #c7d0db;
background-color: var(--collapsed-background);
}
.track-button {
color: rgb(60, 86, 136);
}
}
&[collapsed="false"] {
background-color: var(--expanded-transparent);
color: white;
font-weight: bold;
.shell.flash {
color: #121212;
}
.track-button {
color: white;
}
span.chip {
color: #121212;
}
}
.shell {
padding: 4px 4px;
display: grid;
grid-template-areas: "fold-button title check";
grid-template-columns: 28px 1fr 20px;
align-items: center;
line-height: 1;
width: var(--track-shell-width);
min-height: 40px;
transition: background-color 0.4s;
.track-title {
user-select: text;
}
.track-subtitle {
font-size: 0.6rem;
font-weight: normal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// Maximum width according to grid-template-columns value for .shell
width: calc(var(--track-shell-width) - 56px);
}
.chip {
background-color: #bed6ff;
border-radius: 3px;
font-size: smaller;
padding: 0 0.1rem;
margin-left: 1ch;
}
.title-wrapper {
grid-area: title;
overflow: hidden;
}
h1 {
@include track_shell_title();
}
.fold-button {
grid-area: fold-button;
}
.track-button {
font-size: 20px;
}
&:hover {
cursor: pointer;
.fold-button {
color: hsl(45, 100%, 48%);
}
}
&.flash {
background-color: #ffe263;
}
&.selected {
background-color: #ebeef9;
}
}
.track-content {
display: grid;
span {
@include track_shell_title();
align-self: center;
}
}
}
.time-selection-panel {
height: 10px;
}
.cookie-consent {
position: absolute;
z-index: 10;
left: 10px;
bottom: 10px;
width: 550px;
background-color: #19212b;
font-size: 14px;
color: rgb(180, 183, 186);
border-radius: 5px;
padding: 20px;
.buttons {
display: flex;
justify-content: flex-end;
margin-top: 10px;
font-size: 15px;
}
button {
padding: 10px;
border-radius: 3px;
color: #fff;
margin-left: 5px;
a {
text-decoration: none;
color: #fff;
}
}
button:hover {
background-color: #373f4b;
cursor: pointer;
}
}
.disallow-selection {
user-select: none;
}
.pivot-table {
user-select: text;
padding: $bottom-tab-padding;
button.mode-button {
border-radius: 10px;
padding: 7px;
margin: 5px;
background-color: #c7d0db;
}
&.query-error {
color: red;
}
.total-values {
text-align: right;
padding-right: 10px;
}
.empty-result {
padding: 10px;
}
td.menu {
text-align: left;
}
td {
// In context menu icon to go on a separate line.
// In regular pivot table cells, avoids wrapping the icon spacer to go on
// a separate line.
white-space: pre;
}
}
.name-completion {
input {
width: 90%;
}
min-height: 20vh;
min-width: 30vw;
.arguments-popup-sizer {
color: transparent;
user-select: none;
height: 0;
}
}
.reorderable-cell {
&.dragged {
color: gray;
}
&.highlight-left {
background: linear-gradient(90deg, $table-border-color, transparent 20%);
}
&.highlight-right {
background: linear-gradient(270deg, $table-border-color, transparent 20%);
}
}
.history-item {
border-bottom: 1px solid hsl(213, 22%, 75%);
padding: 0.25em 0.5em;
max-height: 150px;
overflow-y: auto;
pre {
font-size: 10pt;
margin: 0;
overflow-x: auto;
}
&:hover .history-item-buttons {
visibility: visible;
}
}
.history-item-buttons {
position: sticky;
float: right;
top: 0;
visibility: hidden;
button {
margin: 0 0.5rem;
i.material-icons,
i.material-icons-filled {
font-size: 18px;
}
}
}
.context-wrapper {
white-space: nowrap;
i.material-icons {
margin-left: 0;
}
}