perfetto-ui: Create root scss file
Change-Id: I83a22f9339c0a1806ae04e44a1d7b4ed0407fd0c
diff --git a/ui/BUILD.gn b/ui/BUILD.gn
index 910a017..7d5b696 100644
--- a/ui/BUILD.gn
+++ b/ui/BUILD.gn
@@ -250,18 +250,20 @@
# | Build css. |
# +----------------------------------------------------------------------------+
+scss_root = "src/assets/perfetto.scss"
+scss_srcs = [
+ "src/assets/sidebar.scss",
+ "src/assets/topbar.scss",
+ "src/assets/record.scss",
+ "src/assets/common.scss",
+]
+
# Build css.
node_bin("scss") {
deps = [
":dist_symlink",
]
- main_css = "src/assets/perfetto.scss"
- inputs = [
- main_css,
- "src/assets/sidebar.scss",
- "src/assets/topbar.scss",
- "src/assets/record.scss",
- ]
+ inputs = [ scss_root ] + scss_srcs
outputs = [
"$ui_dir/perfetto.css",
]
@@ -269,7 +271,7 @@
node_cmd = "node-sass"
args = [
"--quiet",
- rebase_path(main_css, root_build_dir),
+ rebase_path(scss_root, root_build_dir),
rebase_path(outputs[0], root_build_dir),
]
}
@@ -288,14 +290,10 @@
copy("assets_dist") {
sources = [
- "src/assets/flamegraph.svg",
- "src/assets/logo-3d.png",
- "src/assets/logo.png",
- "src/assets/perfetto.scss",
- "src/assets/record.scss",
- "src/assets/sidebar.scss",
- "src/assets/topbar.scss",
- ]
+ "src/assets/flamegraph.svg",
+ "src/assets/logo-3d.png",
+ "src/assets/logo.png",
+ ] + [ scss_root ] + scss_srcs
outputs = [
"$ui_dir/assets/{{source_file_part}}",
]
diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
new file mode 100644
index 0000000..2ba3830
--- /dev/null
+++ b/ui/src/assets/common.scss
@@ -0,0 +1,386 @@
+// 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.
+:root {
+ --sidebar-width: 256px;
+ --topbar-height: 48px;
+ --monospace-font: 'Roboto Mono', monospace;
+}
+
+@mixin transition($time:0.1s) {
+ transition: opacity $time ease,
+ background-color $time ease,
+ width $time ease,
+ height $time ease,
+ max-width $time ease,
+ max-height $time ease,
+ margin $time ease,
+ border-radius $time ease;
+}
+
+@mixin material-icon($content) {
+ direction: ltr;
+ display: inline-block;
+ font-family: 'Material Icons';
+ font-size: 24px;
+ font-style: normal;
+ font-weight: normal;
+ letter-spacing: normal;
+ line-height: 1;
+ text-transform: none;
+ white-space: nowrap;
+ word-wrap: normal;
+ -webkit-font-feature-settings: 'liga';
+ -webkit-font-smoothing: antialiased;
+ content: $content;
+}
+
+* {
+ box-sizing: border-box;
+ overflow: hidden;
+ -webkit-tap-highlight-color: none;
+ touch-action: none;
+}
+
+html {
+ font-family: Roboto, verdana, sans-serif;
+ height: 100%;
+ width: 100%;
+}
+
+html,
+body {
+ height: 100%;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ user-select: none;
+}
+
+h1,
+h2,
+h3 {
+ font-family: initial;
+ font-size: initial;
+ font-weight: initial;
+ padding: 0;
+ margin: 0;
+}
+table {
+ user-select: text;
+}
+
+body {
+ display: grid;
+ grid-template-areas:
+ "sidebar topbar"
+ "sidebar page"
+ "sidebar alerts";
+ grid-template-rows: var(--topbar-height) 1fr auto;
+ grid-template-columns: var(--sidebar-width) auto;
+ color: #121212;
+}
+
+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;
+ background: #3e4a5a;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ background-image: url('assets/logo.png');
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.page {
+ grid-area: page;
+ position: relative;
+}
+
+.alerts {
+ grid-area: alerts;
+ background-color: #262f3c;
+ div {
+ font-family: 'Raleway';
+ font-weight: 400;
+ letter-spacing: 0.25px;
+ color: white;
+ padding: 25px;
+ a {
+ color: white;
+ }
+ }
+}
+
+.home-page {
+ text-align: center;
+ padding-top: 20vh;
+}
+
+.home-page .logo {
+ width: 250px;
+}
+
+.home-page-title {
+ font-size: 60px;
+ margin: 25px;
+ text-align: center;
+ font-family: 'Raleway', sans-serif;
+ font-weight: 100;
+ color: #333;
+}
+
+.query-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 14px;
+ border: 0;
+ thead td {
+ background-color: hsl(214, 22%, 90%);
+ color: #262f3b;
+ 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%);
+ }
+ }
+}
+
+.query-error {
+ padding: 20px 10px;
+ color: hsl(-10, 50%, 50%);
+ font-family: 'Google Sans';
+}
+
+.page header {
+ height: 25px;
+ line-height: 25px;
+ background-color: hsl(213, 22%, 82%);
+ color: hsl(213, 22%, 20%);
+ font-family: 'Google sans';
+ font-size: 15px;
+ font-weight: 400;
+ padding: 0 10px;
+ vertical-align: middle;
+ border-color: hsl(213, 22%, 75%);
+ border-style: solid;
+ border-top-width: 1px;
+ border-bottom-width: 1px;
+ .code {
+ font-family: var(--monospace-font);
+ font-size: 12px;
+ margin-left: 10px;
+ color: hsl(213, 22%, 40%);
+ }
+}
+
+.track {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-template-rows: 1fr;
+ border-top: 1px solid #c7d0db;
+ .track-shell {
+ padding: 0 20px;
+ display: grid;
+ grid-template-areas: "title pin up down";
+ grid-template-columns: 1fr auto auto;
+ align-items: center;
+ width: 300px;
+ background: #fff;
+ border-right: 1px solid #c7d0db;
+ h1 {
+ grid-area: title;
+ margin: 0;
+ font-size: 1em;
+ text-overflow: ellipsis;
+ font-family: 'Google Sans';
+ color: hsl(213, 22%, 30%);
+ }
+ .track-button {
+ margin: 0 5px;
+ color: #495767;
+ cursor: pointer;
+ width: 24px;
+ }
+ }
+}
+
+.scrolling-panel-container {
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: auto;
+ flex: 1 1 auto;
+ will-change: transform; // Force layer creation.
+}
+
+.pinned-panel-container {
+ position: relative;
+ // Override top level overflow: hidden so height of this flex item can be
+ // its content height.
+ overflow: visible;
+}
+
+// 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 {
+ overflow: hidden;
+ position: relative;
+}
+
+canvas.main-canvas {
+ top: 0px;
+ position: absolute;
+}
+
+.panel {
+ position: relative; // Otherwise canvas covers panel dom.
+}
+
+.pan-and-zoom-content {
+ height: 100%;
+ position: relative;
+ display: flex;
+ flex-flow: column nowrap;
+}
+
+.overview-timeline {
+ height: 100px;
+}
+
+.time-axis-panel {
+ height: 30px;
+}
+
+.flame-graph-panel {
+ height: 500px;
+}
+
+header {
+ height: 25px;
+}
+
+header.overview {
+ display: flex;
+ justify-content: space-between;
+}
+
+.query-error {
+ user-select: text;
+}
+
+span.code {
+ user-select: text;
+}
+
+.debug-panel-border {
+ position: absolute;
+ top: 0px;
+ height: 100%;
+ width: 100%;
+ border: 1px solid rgba(69, 187, 73, 0.5);
+ pointer-events: none;
+}
+
+.perf-stats {
+ --perfetto-orange: hsl(45, 100%, 48%);
+ --perfetto-red: hsl(6, 70%, 53%);
+ --stroke-color: hsl(217, 39%, 94%);
+ position: fixed;
+ bottom: 0;
+ color: var(--stroke-color);
+ font-family: monospace;
+ padding: 2px 0px;
+ z-index: 100;
+ button:hover {
+ color: var(--perfetto-red);
+ }
+ &[expanded=true] {
+ width: 600px;
+ background-color: rgba(27, 28, 29, 0.95);
+ button {
+ color: var(--perfetto-orange);
+ &:hover {
+ color: var(--perfetto-red);
+ }
+ }
+ }
+ &[expanded=false] {
+ width: var(--sidebar-width);
+ background-color: transparent;
+ }
+ i {
+ margin: 0px 24px;
+ font-size: 30px;
+ }
+ .perf-stats-content {
+ margin: 10px 24px;
+ & > section {
+ padding: 5px;
+ border-bottom: 1px solid var(--stroke-color);
+ }
+ button {
+ text-decoration: underline;
+ }
+ div {
+ margin: 2px 0px;
+ }
+ table, td, th {
+ border: 1px solid var(--stroke-color);
+ text-align: center;
+ padding: 4px;
+ margin: 4px 0px;
+ }
+ table {
+ border-collapse: collapse;
+ }
+ }
+}
+
diff --git a/ui/src/assets/perfetto.scss b/ui/src/assets/perfetto.scss
index a22f5c9..cf46528 100644
--- a/ui/src/assets/perfetto.scss
+++ b/ui/src/assets/perfetto.scss
@@ -11,379 +11,8 @@
// 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.
-:root {
- --sidebar-width: 256px;
- --topbar-height: 48px;
- --monospace-font: 'Roboto Mono', monospace;
-}
-@mixin transition($time:0.1s) {
- transition: opacity $time ease,
- background-color $time ease,
- width $time ease,
- height $time ease,
- max-width $time ease,
- max-height $time ease,
- margin $time ease,
- border-radius $time ease;
-}
-
-@mixin material-icon($content) {
- direction: ltr;
- display: inline-block;
- font-family: 'Material Icons';
- font-size: 24px;
- font-style: normal;
- font-weight: normal;
- letter-spacing: normal;
- line-height: 1;
- text-transform: none;
- white-space: nowrap;
- word-wrap: normal;
- -webkit-font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- content: $content;
-}
-
-* {
- box-sizing: border-box;
- overflow: hidden;
- -webkit-tap-highlight-color: none;
- touch-action: none;
-}
-
-html {
- font-family: Roboto, verdana, sans-serif;
- height: 100%;
- width: 100%;
-}
-
-html,
-body {
- height: 100%;
- width: 100%;
- padding: 0;
- margin: 0;
- user-select: none;
-}
-
-h1,
-h2,
-h3 {
- font-family: initial;
- font-size: initial;
- font-weight: initial;
- padding: 0;
- margin: 0;
-}
-table {
- user-select: text;
-}
-
-body {
- display: grid;
- grid-template-areas:
- "sidebar topbar"
- "sidebar page"
- "sidebar alerts";
- grid-template-rows: var(--topbar-height) 1fr auto;
- grid-template-columns: var(--sidebar-width) auto;
- color: #121212;
-}
-
-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;
- background: #3e4a5a;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: row;
- background-image: url('assets/logo.png');
- background-attachment: fixed;
- background-repeat: no-repeat;
- background-position: center;
-}
-
-.page {
- grid-area: page;
- position: relative;
-}
-
-.alerts {
- grid-area: alerts;
- background-color: #262f3c;
- div {
- font-family: 'Raleway';
- font-weight: 400;
- letter-spacing: 0.25px;
- color: white;
- padding: 25px;
- a {
- color: white;
- }
- }
-}
-
+@import 'common';
@import 'sidebar';
@import 'topbar';
@import 'record';
-
-.home-page {
- text-align: center;
- padding-top: 20vh;
-}
-
-.home-page .logo {
- width: 250px;
-}
-
-.home-page-title {
- font-size: 60px;
- margin: 25px;
- text-align: center;
- font-family: 'Raleway', sans-serif;
- font-weight: 100;
- color: #333;
-}
-
-.query-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 14px;
- border: 0;
- thead td {
- background-color: hsl(214, 22%, 90%);
- color: #262f3b;
- 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%);
- }
- }
-}
-
-.query-error {
- padding: 20px 10px;
- color: hsl(-10, 50%, 50%);
- font-family: 'Google Sans';
-}
-
-.page header {
- height: 25px;
- line-height: 25px;
- background-color: hsl(213, 22%, 82%);
- color: hsl(213, 22%, 20%);
- font-family: 'Google sans';
- font-size: 15px;
- font-weight: 400;
- padding: 0 10px;
- vertical-align: middle;
- border-color: hsl(213, 22%, 75%);
- border-style: solid;
- border-top-width: 1px;
- border-bottom-width: 1px;
- .code {
- font-family: var(--monospace-font);
- font-size: 12px;
- margin-left: 10px;
- color: hsl(213, 22%, 40%);
- }
-}
-
-.track {
- display: grid;
- grid-template-columns: auto 1fr;
- grid-template-rows: 1fr;
- border-top: 1px solid #c7d0db;
- .track-shell {
- padding: 0 20px;
- display: grid;
- grid-template-areas: "title pin up down";
- grid-template-columns: 1fr auto auto;
- align-items: center;
- width: 300px;
- background: #fff;
- border-right: 1px solid #c7d0db;
- h1 {
- grid-area: title;
- margin: 0;
- font-size: 1em;
- text-overflow: ellipsis;
- font-family: 'Google Sans';
- color: hsl(213, 22%, 30%);
- }
- .track-button {
- margin: 0 5px;
- color: #495767;
- cursor: pointer;
- width: 24px;
- }
- }
-}
-
-.scrolling-panel-container {
- position: relative;
- overflow-x: hidden;
- overflow-y: auto;
- flex: 1 1 auto;
- will-change: transform; // Force layer creation.
-}
-
-.pinned-panel-container {
- position: relative;
- // Override top level overflow: hidden so height of this flex item can be
- // its content height.
- overflow: visible;
-}
-
-// 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 {
- overflow: hidden;
- position: relative;
-}
-
-canvas.main-canvas {
- top: 0px;
- position: absolute;
-}
-
-.panel {
- position: relative; // Otherwise canvas covers panel dom.
-}
-
-.pan-and-zoom-content {
- height: 100%;
- position: relative;
- display: flex;
- flex-flow: column nowrap;
-}
-
-.overview-timeline {
- height: 100px;
-}
-
-.time-axis-panel {
- height: 30px;
-}
-
-.flame-graph-panel {
- height: 500px;
-}
-
-header {
- height: 25px;
-}
-
-header.overview {
- display: flex;
- justify-content: space-between;
-}
-
-.query-error {
- user-select: text;
-}
-
-span.code {
- user-select: text;
-}
-
-.debug-panel-border {
- position: absolute;
- top: 0px;
- height: 100%;
- width: 100%;
- border: 1px solid rgba(69, 187, 73, 0.5);
- pointer-events: none;
-}
-
-.perf-stats {
- --perfetto-orange: hsl(45, 100%, 48%);
- --perfetto-red: hsl(6, 70%, 53%);
- --stroke-color: hsl(217, 39%, 94%);
- position: fixed;
- bottom: 0;
- color: var(--stroke-color);
- font-family: monospace;
- padding: 2px 0px;
- z-index: 100;
- button:hover {
- color: var(--perfetto-red);
- }
- &[expanded=true] {
- width: 600px;
- background-color: rgba(27, 28, 29, 0.95);
- button {
- color: var(--perfetto-orange);
- &:hover {
- color: var(--perfetto-red);
- }
- }
- }
- &[expanded=false] {
- width: var(--sidebar-width);
- background-color: transparent;
- }
- i {
- margin: 0px 24px;
- font-size: 30px;
- }
- .perf-stats-content {
- margin: 10px 24px;
- & > section {
- padding: 5px;
- border-bottom: 1px solid var(--stroke-color);
- }
- button {
- text-decoration: underline;
- }
- div {
- margin: 2px 0px;
- }
- table, td, th {
- border: 1px solid var(--stroke-color);
- text-align: center;
- padding: 4px;
- margin: 4px 0px;
- }
- table {
- border-collapse: collapse;
- }
- }
-}
