ui: Minor visual refresh
The focus is on:
1. Increasing information density
2. Decreasing visual noise / increasing consistency
It's by no means done but it's a step in the right direction.
For 1. we:
- Decrease font size
- Remove excessive padding
- Reduce topbar height
- Reduce sidebar width
- Reduce the minimum track height
- Reduce the thread state track
For 2. we:
- Reduce the number of typefaces
- Reduce the number of weights in use
- Reduce the number of non-semantic colors
- Use the same border-radius everywhere
- Replace some custom buttons with with the button widget
Before/after for the various surfaces:
- Welcome:
- https://screenshot.googleplex.com/5Vg3Dcckjq2h8Rf
- https://screenshot.googleplex.com/6Wop2quyztZ7Nno
- Timeline:
- https://screenshot.googleplex.com/5sahBHEhqaB7F8X
- https://screenshot.googleplex.com/382giTGsEnga33T
- Query:
- https://screenshot.googleplex.com/5ozS5m5Jzo3rrtn
- https://screenshot.googleplex.com/9fTHeyVyG4XHmN8
- Metrics:
- https://screenshot.googleplex.com/mGsFtDLJeC6BVGy
- https://screenshot.googleplex.com/VsowCEdrBYUHCJR
- Flags:
- https://screenshot.googleplex.com/BjtWjNpg969Y8YZ
- https://screenshot.googleplex.com/ZAkfSzD3kCNbLDg
- RecordingV2:
- https://screenshot.googleplex.com/3jUgxhmpLGoF3YV
- https://screenshot.googleplex.com/9HDoY7kEnkZ9C5S
- Recording:
- https://screenshot.googleplex.com/3C5RB3U3rdQusNb
- https://screenshot.googleplex.com/9U7bYTxfeWgtP43
- Tabs:
- https://screenshot.googleplex.com/C8BoNPFr9DLiYy8
- https://screenshot.googleplex.com/5y2g9tAi6L59Djb
Change-Id: I8e22bdc694b8e0846e839daf9aaab4e447414885
diff --git a/ui/src/assets/analyze_page.scss b/ui/src/assets/analyze_page.scss
index 4a700a3..92814d2 100644
--- a/ui/src/assets/analyze_page.scss
+++ b/ui/src/assets/analyze_page.scss
@@ -15,6 +15,8 @@
.analyze-page {
overflow-y: auto;
overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
.query-input {
width: 100%;
background-color: #111;
@@ -29,5 +31,6 @@
padding: 0.5em;
overflow: auto;
resize: vertical;
+ outline: none;
}
}
diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
index 9e26d09..82a9569 100644
--- a/ui/src/assets/common.scss
+++ b/ui/src/assets/common.scss
@@ -12,12 +12,13 @@
// See the License for the specific language governing permissions and
// limitations under the License.
+@import "widgets/theme";
@import "typefaces";
@import "fonts";
:root {
- --sidebar-width: 256px;
- --topbar-height: 48px;
+ --sidebar-width: 230px;
+ --topbar-height: 44px;
--monospace-font: "Roboto Mono", monospace;
--track-shell-width: 250px;
--track-border-color: #00000025;
@@ -51,7 +52,7 @@
overflow-wrap: break-word;
font-family: "Roboto Condensed", sans-serif;
font-weight: 300;
- letter-spacing: -0.25px;
+ letter-spacing: -0.5px;
}
* {
@@ -175,12 +176,13 @@
grid-area: alerts;
background-color: #f2f2f2;
> div {
- font-family: "Raleway", sans-serif;
+ 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;
@@ -377,7 +379,7 @@
.track-shell {
@include transition();
- padding-left: 10px;
+ padding-left: 5px;
display: grid;
cursor: grab;
grid-template-areas: "title buttons";
@@ -408,7 +410,7 @@
.chip {
background-color: #bed6ff;
- border-radius: 3px;
+ border-radius: $pf-border-radius;
font-size: smaller;
padding: 0 0.1rem;
margin-left: 1ch;
@@ -441,6 +443,7 @@
display: flex;
height: 100%;
align-items: center;
+ justify-content: center;
&:hover {
background-color: #ebeef9;
@@ -469,6 +472,7 @@
}
.details-panel-container {
+ box-shadow: #0000003b 0px 0px 3px 1px;
position: relative;
overflow-x: hidden;
overflow-y: auto;
@@ -533,7 +537,7 @@
}
.overview-timeline {
- height: 100px;
+ height: 70px;
}
.time-axis-panel {
diff --git a/ui/src/assets/details.scss b/ui/src/assets/details.scss
index 3a007c6..034a967 100644
--- a/ui/src/assets/details.scss
+++ b/ui/src/assets/details.scss
@@ -41,14 +41,14 @@
padding: 3px 10px 0 10px;
margin-top: 3px;
font-size: 13px;
- border-radius: 5px 5px 0 0;
- background-color: hsla(0, 0%, 75%, 1);
- border-top: solid 1px hsla(0, 0%, 75%, 1);
- border-left: solid 1px hsla(0, 0%, 75%, 1);
+ border-radius: 3px 3px 0 0;
+ background-color: #0000000f;
border-right: solid 1px hsla(0, 0%, 75%, 1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
+ z-index: 5;
+ box-shadow: #0000003b 0px 0px 3px 1px;
&[active] {
background-color: white;
@@ -62,6 +62,10 @@
cursor: pointer;
background-color: hsla(0, 0%, 85%, 1);
}
+
+ &:nth-child(1) {
+ margin-left: 3px;
+ }
}
}
diff --git a/ui/src/assets/flags_page.scss b/ui/src/assets/flags_page.scss
index a23c60f..d65b678 100644
--- a/ui/src/assets/flags_page.scss
+++ b/ui/src/assets/flags_page.scss
@@ -12,31 +12,34 @@
// See the License for the specific language governing permissions and
// limitations under the License.
+@import "widgets/theme";
+
.flags-page {
overflow-y: scroll;
}
.flags-content {
- max-width: 90ch;
+ max-width: 100ch;
width: 60%;
margin: 0 auto;
padding: 3rem;
display: grid;
- grid-row-gap: 1rem;
h1 {
font-size: larger;
+ margin: 1rem 1rem;
}
button {
background: none;
border: 1px solid rgb(218, 220, 224);
- border-radius: 3px;
+ border-radius: $pf-border-radius;
color: rgb(25, 103, 210);
font-size: 0.8125rem;
padding: 8px 12px;
cursor: pointer;
font-weight: 500;
+ margin: 3px 0.5rem;
}
}
@@ -45,9 +48,9 @@
grid-template:
"title control" auto
"description control" auto / 1fr auto;
-
- row-gap: 0.5rem;
- align-content: center;
+ row-gap: 0.3rem;
+ padding: 1rem 1rem;
+ align-items: center;
select {
grid-area: control;
@@ -70,3 +73,8 @@
font-size: smaller;
}
}
+
+.flag-widget:nth-child(2n+1) {
+ background-color: #0000000a;
+}
+
diff --git a/ui/src/assets/hiring_banner.scss b/ui/src/assets/hiring_banner.scss
index a6807df..3e3b46d 100644
--- a/ui/src/assets/hiring_banner.scss
+++ b/ui/src/assets/hiring_banner.scss
@@ -1,5 +1,5 @@
.hiring-banner {
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
font-size: 12px;
background: #db4634;
box-shadow: 0 0 3px rgba(0, 0, 0, 30%);
diff --git a/ui/src/assets/home_page.scss b/ui/src/assets/home_page.scss
index 4d3f5a8..f421b83 100644
--- a/ui/src/assets/home_page.scss
+++ b/ui/src/assets/home_page.scss
@@ -12,6 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
+@import "widgets/theme";
+
.home-page {
text-align: center;
align-items: center;
@@ -31,15 +33,15 @@
font-size: 60px;
margin: 25px;
text-align: center;
- font-family: "Raleway", sans-serif;
- font-weight: 100;
+ font-family: "Roboto", sans-serif;
+ font-weight: 400;
color: #333;
}
.channel-select {
font-family: "Roboto", sans-serif;
font-size: 1.2rem;
- font-weight: 200;
+ font-weight: 400;
margin-top: 3em;
--chan-width: 100px;
--chan-num: 2;
@@ -69,7 +71,7 @@
padding: 0;
position: relative;
background-color: hsl(218, 8%, 30%);
- border-radius: 3px;
+ border-radius: $pf-border-radius;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
border: 0;
width: calc(var(--chan-width) * var(--chan-num));
@@ -88,7 +90,7 @@
z-index: 2;
text-transform: uppercase;
font-size: 16px;
- font-family: "Raleway";
+ font-family: "Roboto";
font-weight: 400;
letter-spacing: 0.3px;
}
@@ -106,7 +108,7 @@
left: 0;
z-index: 1;
border-radius: inherit;
- @include transition();
+ @include transition(0.2s);
}
.home-page-reload {
@@ -114,7 +116,7 @@
opacity: 0;
color: #da4534;
font-weight: 400;
- @include transition();
+ @include transition(0.2s);
&.show {
opacity: 1;
}
@@ -126,7 +128,7 @@
grid-area: footer;
text-decoration: none;
font-family: "Roboto", sans-serif;
- font-weight: 200;
+ font-weight: 400;
color: #333;
font-size: 15px;
}
diff --git a/ui/src/assets/metrics_page.scss b/ui/src/assets/metrics_page.scss
index 3ed881c..1487e34 100644
--- a/ui/src/assets/metrics_page.scss
+++ b/ui/src/assets/metrics_page.scss
@@ -12,9 +12,11 @@
// See the License for the specific language governing permissions and
// limitations under the License.
+@import "widgets/theme";
+
.metrics-page {
padding: 30px;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
overflow-y: auto;
.metric-run-button {
@@ -23,12 +25,12 @@
border-radius: 4px;
padding: 5px 10px;
font-weight: bold;
- font-family: "Raleway";
+ font-family: "Roboto";
}
select {
margin: 10px;
- font-family: "Raleway";
+ font-family: "Roboto";
font-size: 1em;
border: 1px solid black;
background-color: #eee;
@@ -39,7 +41,7 @@
padding: 20px;
font-family: "Roboto Mono";
line-height: 1.5em;
- border-radius: 5px;
+ border-radius: $pf-border-radius;
overflow-x: auto;
&.metric-error {
color: #ef6c00;
diff --git a/ui/src/assets/modal.scss b/ui/src/assets/modal.scss
index 76d3cea..ee575f0 100644
--- a/ui/src/assets/modal.scss
+++ b/ui/src/assets/modal.scss
@@ -12,6 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
+@import "widgets/theme";
+
// The opacity changes are only transitional. Once the `modalFadeOut` animation
// reaches the end, the Mithril component that renders .modal-backdrop
// (and .modal-dialog) is fully destroyed and removed from the DOM.
@@ -57,7 +59,6 @@
.modal-dialog {
position: absolute;
z-index: 100;
- border: 1px solid #333;
background-color: #fff;
margin: auto;
min-width: 25vw;
@@ -65,7 +66,7 @@
padding: 30px;
max-width: 90vw;
max-height: 90vh;
- border-radius: 4px;
+ border-radius: $pf-border-radius;
overflow-y: auto;
top: 50%;
left: 50%;
@@ -86,7 +87,7 @@
h2 {
margin-top: 0;
margin-bottom: 0;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.25;
diff --git a/ui/src/assets/record.scss b/ui/src/assets/record.scss
index 529e57e..43cf635 100644
--- a/ui/src/assets/record.scss
+++ b/ui/src/assets/record.scss
@@ -12,6 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
+@import "widgets/theme";
+
:root {
--record-text-color: #333;
}
@@ -30,7 +32,7 @@
max-width: 900px;
min-height: 500px;
margin: auto;
- border-radius: 5px;
+ border-radius: $pf-border-radius;
box-shadow: 0 1px 2px 0 #aaa, 0 1px 3px 1px #eee;
background-color: #fff;
display: grid;
@@ -53,7 +55,7 @@
height: 100%;
text-align: center;
padding: 180px 30px;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
font-size: 25px;
}
}
@@ -72,8 +74,6 @@
flex-direction: row;
.logo-wrapping {
- border-radius: 50%;
- background-color: #f0f0f0;
width: 150px;
height: 150px;
display: inline-block;
@@ -81,7 +81,7 @@
align-self: center;
i.material-icons {
- color: #0000ff;
+ color: #16161d;
font-size: 150px;
}
}
@@ -127,7 +127,7 @@
input[type="text"] {
flex-grow: 1;
- border-radius: 4px;
+ border-radius: $pf-border-radius;
border: 1px solid #dcdcdc;
padding: 3px;
margin: 0 10px;
@@ -169,7 +169,7 @@
.record-modal-button,
.record-modal-button-high {
- border-radius: 0.25rem;
+ border-radius: $pf-border-radius;
border-style: none;
border-width: 0;
}
@@ -234,7 +234,7 @@
margin: 10px;
text-align: center;
background-color: #eee;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
font-size: 17px;
@media (max-width: 1280px) {
font-size: 1.6vw;
@@ -366,7 +366,7 @@
padding: 0 1em;
font-size: 15px;
letter-spacing: 0.5px;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
font-weight: 600;
color: #666;
display: grid;
@@ -378,12 +378,10 @@
i {
margin: auto;
- border-radius: 100%;
font-size: 32px;
width: 38px;
height: 38px;
padding: 3px;
- background: #eee;
grid-area: icon;
}
@@ -476,7 +474,7 @@
margin-right: 10px;
text-align: center;
justify-items: center;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
padding: 7px;
&:hover:enabled {
@@ -542,7 +540,7 @@
}
&::placeholder {
color: #b4b7ba;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
font-weight: 400;
}
}
@@ -564,7 +562,7 @@
> header {
text-align: center;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
font-size: 20px;
padding: 15px 10px;
color: #333;
@@ -801,7 +799,7 @@
margin: 5px;
text-align: center;
background-color: #eee;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
font-size: 20px;
@media (max-width: 1280px) {
font-size: 1.6vw;
@@ -1175,7 +1173,7 @@
text-align: center;
margin: 3px;
background-color: #eee;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
flex-grow: 1;
font-size: 17px;
@media (max-width: 1280px) {
@@ -1202,7 +1200,7 @@
border-radius: 10px;
text-align: center;
justify-items: center;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
padding: 7px;
background-color: hsl(88, 50%, 67%);
diff --git a/ui/src/assets/sidebar.scss b/ui/src/assets/sidebar.scss
index b0a7092..6fedf61 100644
--- a/ui/src/assets/sidebar.scss
+++ b/ui/src/assets/sidebar.scss
@@ -12,6 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
+@import "widgets/theme";
+
.sidebar {
--sidebar-padding-bottom: 40px;
--sidebar-timing: 0.15s;
@@ -38,11 +40,11 @@
height: var(--topbar-height);
line-height: var(--topbar-height);
vertical-align: middle;
- padding: 0 20px;
+ padding: 0 12px;
color: #fff;
overflow: visible;
.brand {
- height: 40px;
+ height: 36px;
margin-top: 4px;
}
&::before {
@@ -54,7 +56,7 @@
position: absolute;
font-size: 10px;
line-height: 10px;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
left: 155px;
top: 7px;
}
@@ -121,17 +123,15 @@
cursor: pointer;
> h1,
> h2 {
- font-family: "Raleway", sans-serif;
letter-spacing: 0.25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- margin: 0 24px;
+ margin: 0 12px;
}
> h1 {
color: #fff;
font-size: 15px;
- font-weight: 500;
}
> h2 {
@include transition();
@@ -189,10 +189,8 @@
a {
line-height: 24px;
font-size: 14px;
- font-weight: 400;
- font-family: "Raleway", sans-serif;
letter-spacing: 0.5px;
- padding: 5px 24px;
+ padding: 4px 12px;
text-decoration: none;
display: block;
&.pending {
@@ -225,6 +223,7 @@
}
.material-icons {
margin-right: 10px;
+ font-size: 20px
}
&:hover {
background-color: #373f4b;
@@ -265,13 +264,19 @@
}
> .dbg-info-square {
+ font-family: "Roboto Condensed", sans-serif;
width: 24px;
- height: 22px;
- line-height: 22px;
+ height: 24px;
+ line-height: 24px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+
margin: 1px 0;
background: #12161b;
color: #4e71b3;
- border-radius: 5px;
+ border-radius: $pf-border-radius;
font-size: 12px;
text-align: center;
&.green {
diff --git a/ui/src/assets/topbar.scss b/ui/src/assets/topbar.scss
index 561c9364..7742b5a 100644
--- a/ui/src/assets/topbar.scss
+++ b/ui/src/assets/topbar.scss
@@ -11,6 +11,9 @@
// 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";
+
@mixin omnibox-width() {
width: 90%;
max-width: 600px;
@@ -22,7 +25,7 @@
z-index: 3;
overflow: visible;
background-color: hsl(215, 1%, 95%);
- box-shadow: 0 -3px 14px 2px #bbb;
+ box-shadow: 0px 1px 2px 1px #00000026;
min-height: var(--topbar-height);
display: flex;
justify-content: center;
@@ -33,7 +36,7 @@
display: grid;
grid-template-areas: "icon input stepthrough";
grid-template-columns: 34px auto max-content;
- border-radius: 20px;
+ border-radius: $pf-border-radius;
background-color: #fcfcfc;
border: 0;
line-height: 34px;
@@ -83,14 +86,14 @@
}
&.message-mode {
background-color: hsl(0, 0%, 89%);
- border-radius: 4px;
+ border-radius: $pf-border-radius;
input::placeholder {
font-weight: 400;
font-family: var(--monospace-font);
color: hsl(213, 40%, 50%);
}
&:before {
- content: "bubble_chart";
+ content: "info";
}
}
.stepthrough {
diff --git a/ui/src/assets/trace_info_page.scss b/ui/src/assets/trace_info_page.scss
index 69baaaf..3846b7a 100644
--- a/ui/src/assets/trace_info_page.scss
+++ b/ui/src/assets/trace_info_page.scss
@@ -36,7 +36,7 @@
}
h2 {
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
font-weight: 400;
letter-spacing: 0.25px;
font-size: 2rem;
diff --git a/ui/src/assets/typefaces.scss b/ui/src/assets/typefaces.scss
index d0c4b82..02ef5e8 100644
--- a/ui/src/assets/typefaces.scss
+++ b/ui/src/assets/typefaces.scss
@@ -1,27 +1,5 @@
/* latin */
@font-face {
- font-family: "Raleway";
- font-style: normal;
- font-weight: 100;
- src: url(assets/Raleway-Thin.woff2) format("woff2");
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
- U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
- U+FEFF, U+FFFD;
-}
-
-/* latin */
-@font-face {
- font-family: "Raleway";
- font-style: normal;
- font-weight: 400;
- src: url(assets/Raleway-Regular.woff2) format("woff2");
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
- U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
- U+FEFF, U+FFFD;
-}
-
-/* latin */
-@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 100;
diff --git a/ui/src/assets/widgets/theme.scss b/ui/src/assets/widgets/theme.scss
index 3902dc4..2a49642 100644
--- a/ui/src/assets/widgets/theme.scss
+++ b/ui/src/assets/widgets/theme.scss
@@ -15,7 +15,7 @@
// Standard theme settings for widgets
$pf-font: "Roboto Condensed", sans-serif;
-$pf-border-radius: 3px;
+$pf-border-radius: 2px;
$pf-anim-timing: 250ms cubic-bezier(0.4, 0, 0.2, 1);
// Here we describe two colour schemes: primary and minimal
diff --git a/ui/src/frontend/icons.ts b/ui/src/frontend/icons.ts
index 0725a41..2fc19b0 100644
--- a/ui/src/frontend/icons.ts
+++ b/ui/src/frontend/icons.ts
@@ -20,3 +20,4 @@
export const EXPAND_UP = 'expand_less';
export const PIN = 'push_pin';
+export const STAR = 'star';
diff --git a/ui/src/frontend/metrics_page.ts b/ui/src/frontend/metrics_page.ts
index 1eabd99..606236f 100644
--- a/ui/src/frontend/metrics_page.ts
+++ b/ui/src/frontend/metrics_page.ts
@@ -17,6 +17,7 @@
import {Actions} from '../common/actions';
import {globals} from './globals';
import {createPage} from './pages';
+import {Button} from './widgets/button';
function getCurrSelectedMetric() {
const {availableMetrics, selectedIndex} = globals.state.metrics;
@@ -64,9 +65,10 @@
},
availableMetrics.map(
(metric) => m('option', {value: metric, key: metric}, metric))),
- m('button.metric-run-button',
- {onclick: () => globals.dispatch(Actions.requestSelectedMetric({}))},
- 'Run'),
+ m(Button, {
+ onclick: () => globals.dispatch(Actions.requestSelectedMetric({})),
+ label: 'Run',
+ }),
]);
}
}
diff --git a/ui/src/frontend/notes_panel.ts b/ui/src/frontend/notes_panel.ts
index 295c893..52cec48 100644
--- a/ui/src/frontend/notes_panel.ts
+++ b/ui/src/frontend/notes_panel.ts
@@ -232,7 +232,7 @@
const prevBaseline = ctx.textBaseline;
ctx.textBaseline = 'alphabetic';
// Adjust height for icon font.
- ctx.font = '24px Material Icons';
+ ctx.font = '24px Material Symbols Sharp';
ctx.fillStyle = color;
ctx.strokeStyle = color;
// The ligatures have padding included that means the icon is not drawn
diff --git a/ui/src/frontend/overview_timeline_panel.ts b/ui/src/frontend/overview_timeline_panel.ts
index adc06d9..2e351f3 100644
--- a/ui/src/frontend/overview_timeline_panel.ts
+++ b/ui/src/frontend/overview_timeline_panel.ts
@@ -34,7 +34,7 @@
import {TimeScale} from './time_scale';
export class OverviewTimelinePanel extends Panel {
- private static HANDLE_SIZE_PX = 7;
+ private static HANDLE_SIZE_PX = 5;
private width = 0;
private gesture?: DragGestureHandler;
@@ -79,7 +79,7 @@
renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
if (this.width === undefined) return;
if (this.timeScale === undefined) return;
- const headerHeight = 25;
+ const headerHeight = 20;
const tracksHeight = size.height - headerHeight;
const timeSpan = new TimeSpan(0, this.totTime.duration);
@@ -147,18 +147,18 @@
ctx.fillRect(vizEndPx, headerHeight, 1, tracksHeight);
const hbarWidth = OverviewTimelinePanel.HANDLE_SIZE_PX;
- const hbarDivisionFactor = 3.5;
+ const hbarHeight = tracksHeight * 0.4;
// Draw handlebar
ctx.fillRect(
vizStartPx - Math.floor(hbarWidth / 2) - 1,
headerHeight,
hbarWidth,
- tracksHeight / hbarDivisionFactor);
+ hbarHeight);
ctx.fillRect(
vizEndPx - Math.floor(hbarWidth / 2),
headerHeight,
hbarWidth,
- tracksHeight / hbarDivisionFactor);
+ hbarHeight);
}
private onMouseMove(e: MouseEvent) {
diff --git a/ui/src/frontend/query_history.ts b/ui/src/frontend/query_history.ts
index e2e503c..a50627a 100644
--- a/ui/src/frontend/query_history.ts
+++ b/ui/src/frontend/query_history.ts
@@ -17,6 +17,8 @@
import {Actions} from '../common/actions';
import {globals} from './globals';
+import {STAR} from './icons';
+
import {
arrayOf,
bool,
@@ -60,15 +62,17 @@
return m(
'.history-item',
m('.history-item-buttons',
- m('button',
- {
- onclick: () => {
- queryHistoryStorage.setStarred(
- vnode.attrs.index, !vnode.attrs.entry.starred);
- globals.rafScheduler.scheduleFullRedraw();
+ m(
+ 'button',
+ {
+ onclick: () => {
+ queryHistoryStorage.setStarred(
+ vnode.attrs.index, !vnode.attrs.entry.starred);
+ globals.rafScheduler.scheduleFullRedraw();
+ },
},
- },
- m(Icon, {icon: 'star', filled: vnode.attrs.entry.starred})),
+ m(Icon, {icon: STAR, filled: vnode.attrs.entry.starred}),
+ ),
m('button',
{
onclick: () => {
diff --git a/ui/src/frontend/record_page.ts b/ui/src/frontend/record_page.ts
index d142ee6..d6d574a 100644
--- a/ui/src/frontend/record_page.ts
+++ b/ui/src/frontend/record_page.ts
@@ -711,7 +711,7 @@
m('.sub', 'Buffer mode, size and duration'))),
m('a[href="#!/record/instructions"]',
m(`li${routePage === 'instructions' ? '.active' : ''}`,
- m('i.material-icons.rec', 'fiber_manual_record'),
+ m('i.material-icons-filled.rec', 'fiber_manual_record'),
m('.title', 'Recording command'),
m('.sub', 'Manually record trace'))),
PERSIST_CONFIG_FLAG.get() ?
diff --git a/ui/src/frontend/record_page_v2.ts b/ui/src/frontend/record_page_v2.ts
index 105411d..70ab452 100644
--- a/ui/src/frontend/record_page_v2.ts
+++ b/ui/src/frontend/record_page_v2.ts
@@ -466,7 +466,7 @@
m('.sub', 'Buffer mode, size and duration'))),
m('a[href="#!/record/instructions"]',
m(`li${routePage === 'instructions' ? '.active' : ''}`,
- m('i.material-icons.rec', 'fiber_manual_record'),
+ m('i.material-icons-filled.rec', 'fiber_manual_record'),
m('.title', 'Recording command'),
m('.sub', 'Manually record trace'))),
PERSIST_CONFIG_FLAG.get() ?
diff --git a/ui/src/frontend/recording/reset_target_modal.ts b/ui/src/frontend/recording/reset_target_modal.ts
index a50cce8..5e34c7b 100644
--- a/ui/src/frontend/recording/reset_target_modal.ts
+++ b/ui/src/frontend/recording/reset_target_modal.ts
@@ -69,7 +69,6 @@
m('.logo-wrapping', m('i.material-icons', 'usb')),
m('.record-modal-description',
m('h3', 'Android device over WebUSB'),
- m('h4', 'JustWorks from the browser with one click'),
m('text',
'Android developers: this option cannot co-operate ' +
'with the adb host on your machine. Only one entity between ' +
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index b76eeed..0aa518a 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -245,7 +245,7 @@
'.track',
{
style: {
- height: `${Math.max(24, attrs.track.getHeight())}px`,
+ height: `${Math.max(18, attrs.track.getHeight())}px`,
},
id: 'track_' + attrs.trackState.id,
},
diff --git a/ui/src/tracks/chrome_slices/index.ts b/ui/src/tracks/chrome_slices/index.ts
index 00c475a..23f9a5e 100644
--- a/ui/src/tracks/chrome_slices/index.ts
+++ b/ui/src/tracks/chrome_slices/index.ts
@@ -29,7 +29,7 @@
export const SLICE_TRACK_KIND = 'ChromeSliceTrack';
const SLICE_HEIGHT = 18;
-const TRACK_PADDING = 4;
+const TRACK_PADDING = 2;
const CHEVRON_WIDTH_PX = 10;
const HALF_CHEVRON_WIDTH_PX = CHEVRON_WIDTH_PX / 2;
const INNER_CHEVRON_OFFSET = -3;
diff --git a/ui/src/tracks/thread_state/index.ts b/ui/src/tracks/thread_state/index.ts
index 475d8b1..3713999 100644
--- a/ui/src/tracks/thread_state/index.ts
+++ b/ui/src/tracks/thread_state/index.ts
@@ -167,8 +167,8 @@
}
}
-const MARGIN_TOP = 4;
-const RECT_HEIGHT = 14;
+const MARGIN_TOP = 3;
+const RECT_HEIGHT = 12;
const EXCESS_WIDTH = 10;
class ThreadStateTrack extends Track<Config, Data> {
