ui: switch Google Sans -> Roboto Condensed
- Improve real-estate usage using a more compact font
- Consistently use the same font everywhere (canvas and details)
- Allow the track shell to overflow on 2 lines
- Fix a small bug about the track-shell border disappearing
(https://screenshot.googleplex.com/x2nsura0UMP)
- Make the material design font blocking.
Bug: 146977183
Change-Id: I22248ce6297dd447172db3f3f7341e4d1656bc98
diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
index cfccc3e..4a272b8 100644
--- a/ui/src/assets/common.scss
+++ b/ui/src/assets/common.scss
@@ -51,6 +51,21 @@
content: $content;
}
+
+@mixin track_shell_title() {
+ // line-height is deliberately 1px larger than font-size. Roboto seems to
+ // overflow on the bottom on "g"s otherwise.
+ font-size: 14px;
+ line-height: 15px;
+ max-height: 30px;
+ overflow: hidden;
+ text-align: left;
+ overflow-wrap: break-word;
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 300;
+ letter-spacing: -0.25px;
+}
+
* {
box-sizing: border-box;
-webkit-tap-highlight-color: none;
@@ -77,9 +92,9 @@
h1,
h2,
h3 {
- font-family: initial;
- font-size: initial;
- font-weight: initial;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
padding: 0;
margin: 0;
}
@@ -154,7 +169,7 @@
word-wrap: break-word;
font-weight: 400;
font-size: 15px;
- font-family: "Raleway";
+ font-family: 'Raleway', sans-serif;
line-height: 1.5;
padding: 10px 10px 0px 10px;
width: 320px;
@@ -166,7 +181,7 @@
word-wrap: break-word;
font-weight: 400;
font-size: 12px;
- font-family: "Raleway";
+ font-family: 'Raleway', sans-serif;
line-height: 1.5;
padding: 10px 10px 10px 10px;
width: 320px;
@@ -181,7 +196,7 @@
grid-area: alerts;
background-color: #f2f2f2;
>div {
- font-family: 'Raleway';
+ font-family: 'Raleway', sans-serif;
font-weight: 400;
letter-spacing: 0.25px;
padding: 1rem;
@@ -251,13 +266,14 @@
.query-error {
padding: 20px 10px;
color: hsl(-10, 50%, 50%);
- font-family: 'Google Sans';
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 300;
}
.page header {
background-color: hsl(213, 22%, 82%);
color: hsl(213, 22%, 20%);
- font-family: 'Google sans';
+ font-family: 'Roboto Condensed', sans-serif;
font-size: 15px;
font-weight: 400;
padding: 4px 10px;
@@ -284,11 +300,12 @@
grid-column: 1 / span 2;
border-top: 1px solid var(--track-border-color);
margin-top: -1px;
+ z-index: 2;
}
.track-shell {
@include transition();
- padding: 0 10px;
+ padding-left: 10px;
display: grid;
cursor: grab;
grid-template-areas: "title pin";
@@ -315,18 +332,11 @@
h1 {
grid-area: title;
- margin: 0;
- font-size: 14px;
- overflow: hidden;
- text-overflow: ellipsis;
- text-align: left;
- white-space: nowrap;
- font-family: 'Google Sans';
color: hsl(213, 22%, 30%);
+ @include track_shell_title();
}
.track-button {
@include transition();
- margin: 0 5px;
color: #495767;
cursor: pointer;
width: 24px;
@@ -550,12 +560,7 @@
transition: background-color .4s;
h1 {
grid-area: title;
- font-size: 14px;
- overflow: hidden;
- text-overflow: ellipsis;
- font-family: 'Google Sans';
- white-space: nowrap;
- text-align: left;
+ @include track_shell_title();
}
.fold-button {
grid-area: fold-button;
diff --git a/ui/src/assets/details.scss b/ui/src/assets/details.scss
index f116981..4d0fd2c 100644
--- a/ui/src/assets/details.scss
+++ b/ui/src/assets/details.scss
@@ -32,7 +32,7 @@
grid-area: tabs;
.tab {
- font-family: 'Google Sans';
+ font-family: 'Roboto Condensed', sans-serif;
color: #3c4b5d;
padding: 3px 10px 0px 10px;
margin-top: 3px;
@@ -79,7 +79,8 @@
}
.handle-title {
- font-family: 'Google Sans';
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 300;
color: #3c4b5d;
margin-left: 5px;
padding: 5px;
@@ -90,7 +91,8 @@
}
.details-panel {
- font-family: 'Google Sans';
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 300;
color: #3c4b5d;
.details-panel-heading {
padding: 10px 0 5px 0;
@@ -106,7 +108,7 @@
}
h2 {
font-size: 16px;
- font-family: 'Google Sans';
+ font-weight: 400;
padding: 0 10px;
&.split {
width: 50%;
@@ -218,7 +220,8 @@
display: flex;
flex-direction: column;
height: 100%;
- font-family: 'Google Sans';
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 300;
color: #3c4b5d;
.notes-editor-panel-heading-bar {
diff --git a/ui/src/assets/modal.scss b/ui/src/assets/modal.scss
index 24a8bfd..c46db21 100644
--- a/ui/src/assets/modal.scss
+++ b/ui/src/assets/modal.scss
@@ -16,7 +16,7 @@
Basic Modal Styles
\**************************/
.modal {
- font-family: 'Raleway';
+ font-family: 'Raleway', sans-serif;
}
.modal-overlay {
@@ -51,7 +51,7 @@
.modal-title {
margin-top: 0;
margin-bottom: 0;
- font-family: 'Raleway';
+ font-family: 'Raleway', 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 2de7ccd..7600ebd 100644
--- a/ui/src/assets/record.scss
+++ b/ui/src/assets/record.scss
@@ -206,7 +206,7 @@
padding: 0 1em;
font-size: 15px;
letter-spacing: 0.5px;
- font-family: 'Raleway';
+ font-family: 'Raleway', sans-serif;
font-weight: 600;
color: #666;
display: grid;
@@ -296,7 +296,7 @@
>header {
text-align: center;
- font-family: 'Raleway';
+ font-family: 'Raleway', sans-serif;
font-size: 20px;
padding: 15px 10px;
color: #333;
diff --git a/ui/src/assets/sidebar.scss b/ui/src/assets/sidebar.scss
index cf975f8..7cb1ce2 100644
--- a/ui/src/assets/sidebar.scss
+++ b/ui/src/assets/sidebar.scss
@@ -26,7 +26,7 @@
}
input[type=file] { display:none; }
>header {
- font-family: 'Raleway';
+ font-family: 'Raleway', sans-serif;
height: var(--topbar-height);
line-height: var(--topbar-height);
vertical-align: middle;
@@ -88,7 +88,7 @@
cursor: pointer;
>h1,
>h2 {
- font-family: 'Raleway';
+ font-family: 'Raleway', sans-serif;
letter-spacing: 0.25px;
overflow: hidden;
text-overflow: ellipsis;
@@ -143,7 +143,7 @@
line-height: 24px;
font-size: 14px;
font-weight: 400;
- font-family: 'Raleway';
+ font-family: 'Raleway', sans-serif;
letter-spacing: 0.5px;
padding: 5px 24px;
text-decoration: none;
diff --git a/ui/src/assets/topbar.scss b/ui/src/assets/topbar.scss
index 49d7afb..49c06df 100644
--- a/ui/src/assets/topbar.scss
+++ b/ui/src/assets/topbar.scss
@@ -49,7 +49,8 @@
border: 0;
padding: 0 10px;
font-size: 18px;
- font-family: 'Google Sans';
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 300;
color: #666;
background-color: transparent;
&:focus {
@@ -57,7 +58,7 @@
}
&::placeholder {
color: #b4b7ba;
- font-family: 'Raleway';
+ font-family: 'Raleway', sans-serif;
font-weight: 400;
}
}
@@ -99,7 +100,8 @@
display: flex;
font: inherit;
font-size: 14px;
- font-family: 'Google Sans';
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 300;
color: #aaa;
.current {
padding-right: 10px;
diff --git a/ui/src/assets/typefaces.scss b/ui/src/assets/typefaces.scss
index 19f8f9f..55a2712 100644
--- a/ui/src/assets/typefaces.scss
+++ b/ui/src/assets/typefaces.scss
@@ -1,48 +1,53 @@
-/* latin */
-@font-face {
- font-family: 'Google Sans';
- font-style: normal;
- font-weight: 400;
- src: local('Google Sans Regular'), local('GoogleSans-Regular'), url(assets/GoogleSans-Regular.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: 'Google Sans';
- font-style: normal;
- font-weight: 500;
- src: local('Google Sans Medium'), local('GoogleSans-Medium'), url(assets/GoogleSans-Medium.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;
-}
-/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
+ font-display: block;
src: url(assets/MaterialIcons.woff2) format('woff2');
}
+
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 100;
- src: local('Raleway Thin'), local('Raleway-Thin'), url(assets/Raleway-Thin.woff2);
+ src: local('Raleway Thin'), local('Raleway-Thin'), 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: local('Raleway'), local('Raleway-Regular'), url(assets/Raleway-Regular.woff2);
+ src: local('Raleway'), local('Raleway-Regular'), 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 Condensed';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(assets/RobotoCondensed-Light.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 Condensed';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(assets/RobotoCondensed-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 Mono';
font-style: normal;
font-weight: 400;
- src: local('Roboto Mono'), local('RobotoMono-Regular'), url(assets/RobotoMono-Regular.woff2);
+ src: local('Roboto Mono'), local('RobotoMono-Regular'), url(assets/RobotoMono-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;
}
diff --git a/ui/src/frontend/checkerboard.ts b/ui/src/frontend/checkerboard.ts
index 6ae9487..d271759 100644
--- a/ui/src/frontend/checkerboard.ts
+++ b/ui/src/frontend/checkerboard.ts
@@ -24,7 +24,7 @@
leftPx: number,
rightPx: number): void {
const widthPx = rightPx - leftPx;
- ctx.font = '12px Google Sans';
+ ctx.font = '12px Roboto Condensed';
ctx.fillStyle = '#eee';
ctx.fillRect(leftPx, 0, widthPx, heightPx);
ctx.fillStyle = '#666';
diff --git a/ui/src/frontend/flamegraph.ts b/ui/src/frontend/flamegraph.ts
index 4d4dfd1..4c4d3e4 100644
--- a/ui/src/frontend/flamegraph.ts
+++ b/ui/src/frontend/flamegraph.ts
@@ -136,7 +136,7 @@
// Draw root node.
ctx.fillStyle = this.generateColor('root', false);
ctx.fillRect(x, currentY, width, nodeHeight);
- ctx.font = `${this.textSize}px Google Sans`;
+ ctx.font = `${this.textSize}px Roboto Condensed`;
const text = cropText(
`root: ${
this.displaySize(
@@ -199,7 +199,7 @@
}
// Draw name.
- ctx.font = `${this.textSize}px Google Sans`;
+ ctx.font = `${this.textSize}px Roboto Condensed`;
const text = cropText(name, charWidth, width - 2);
ctx.fillStyle = 'black';
ctx.fillText(text, currentX + 5, currentY + nodeHeight - 4);
@@ -284,7 +284,7 @@
height - rectHeight - 8 :
this.hoveredY + 4;
- ctx.font = '12px Google Sans';
+ ctx.font = '12px Roboto Condensed';
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
ctx.fillRect(rectXStart, rectYStart, rectWidth, rectHeight);
ctx.fillStyle = 'hsl(200, 50%, 40%)';
diff --git a/ui/src/frontend/overview_timeline_panel.ts b/ui/src/frontend/overview_timeline_panel.ts
index 215e8da..cfc6ee8 100644
--- a/ui/src/frontend/overview_timeline_panel.ts
+++ b/ui/src/frontend/overview_timeline_panel.ts
@@ -64,7 +64,7 @@
const tracksHeight = size.height - headerHeight;
// Draw time labels on the top header.
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
ctx.fillStyle = '#999';
for (let i = 0; i < 100; i++) {
const xPos =
diff --git a/ui/src/frontend/slice_panel.ts b/ui/src/frontend/slice_panel.ts
index 345b714..5f3553b 100644
--- a/ui/src/frontend/slice_panel.ts
+++ b/ui/src/frontend/slice_panel.ts
@@ -126,7 +126,7 @@
ctx.fillRect(startDraw.x - 1, startDraw.y, 2, 100);
// Wakeup explanation text.
- ctx.font = '13px Google Sans';
+ ctx.font = '13px Roboto Condensed';
ctx.fillStyle = '#3c4b5d';
if (threadInfo) {
const displayText = `Wakeup @ ${
@@ -153,7 +153,7 @@
const explain2 =
'(e.g. because of notifying a wait queue it was suspended on) to';
const explain3 = 'when it started running.';
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
ctx.fillText(explain1, startDraw.x + 70, startDraw.y + 86 + 16);
ctx.fillText(explain2, startDraw.x + 70, startDraw.y + 86 + 16 + 12);
ctx.fillText(explain3, startDraw.x + 70, startDraw.y + 86 + 16 + 24);
diff --git a/ui/src/frontend/time_axis_panel.ts b/ui/src/frontend/time_axis_panel.ts
index 112c723..2f39881 100644
--- a/ui/src/frontend/time_axis_panel.ts
+++ b/ui/src/frontend/time_axis_panel.ts
@@ -32,7 +32,7 @@
ctx.fillStyle = '#999';
// Write trace offset time + line.
- ctx.font = '12px Google Sans';
+ ctx.font = '12px Roboto Condensed';
ctx.textAlign = 'right';
const offsetTime =
@@ -44,7 +44,7 @@
ctx.fillText(startTime + ' +', 6, 11);
// Draw time axis.
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
for (const [x, time] of gridlines(size.width, range, timeScale)) {
ctx.fillRect(x, 0, 1, size.height);
ctx.fillText('+' + timeToString(time - range.start), x + 5, 10);
diff --git a/ui/src/frontend/time_selection_panel.ts b/ui/src/frontend/time_selection_panel.ts
index 3717a57..18ed125 100644
--- a/ui/src/frontend/time_selection_panel.ts
+++ b/ui/src/frontend/time_selection_panel.ts
@@ -76,7 +76,7 @@
ctx.textBaseline = 'middle';
ctx.fillStyle = '#222';
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
ctx.fillText(label, labelXLeft, yMid);
}
@@ -105,7 +105,7 @@
ctx.textBaseline = 'middle';
ctx.fillStyle = '#222';
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
ctx.fillText(label, xPosLabel, yMid);
}
diff --git a/ui/src/tracks/chrome_slices/frontend.ts b/ui/src/tracks/chrome_slices/frontend.ts
index 41f2541..8ceaf16 100644
--- a/ui/src/tracks/chrome_slices/frontend.ts
+++ b/ui/src/tracks/chrome_slices/frontend.ts
@@ -65,7 +65,7 @@
timeScale.timeToPx(data.end),
);
- ctx.font = '12px Google Sans';
+ ctx.font = '12px Roboto Condensed';
ctx.textAlign = 'center';
// measuretext is expensive so we only use it once.
diff --git a/ui/src/tracks/counter/frontend.ts b/ui/src/tracks/counter/frontend.ts
index 3fcfe3e..6377414 100644
--- a/ui/src/tracks/counter/frontend.ts
+++ b/ui/src/tracks/counter/frontend.ts
@@ -154,7 +154,7 @@
ctx.stroke();
ctx.setLineDash([]);
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
if (this.hoveredValue !== undefined && this.hoveredTs !== undefined) {
// TODO(hjd): Add units.
diff --git a/ui/src/tracks/cpu_freq/frontend.ts b/ui/src/tracks/cpu_freq/frontend.ts
index 0bf9199..2554521 100644
--- a/ui/src/tracks/cpu_freq/frontend.ts
+++ b/ui/src/tracks/cpu_freq/frontend.ts
@@ -126,7 +126,7 @@
}
}
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
if (this.hoveredValue !== undefined && this.hoveredTs !== undefined) {
let text = `${this.hoveredValue.toLocaleString()}kHz`;
diff --git a/ui/src/tracks/cpu_slices/frontend.ts b/ui/src/tracks/cpu_slices/frontend.ts
index b77098d..d104fe9 100644
--- a/ui/src/tracks/cpu_slices/frontend.ts
+++ b/ui/src/tracks/cpu_slices/frontend.ts
@@ -112,7 +112,7 @@
assertTrue(data.starts.length === data.utids.length);
ctx.textAlign = 'center';
- ctx.font = '12px Google Sans';
+ ctx.font = '12px Roboto Condensed';
const charWidth = ctx.measureText('dbpqaouk').width / 8;
for (let i = 0; i < data.starts.length; i++) {
@@ -171,10 +171,10 @@
subTitle = cropText(subTitle, charWidth, rectWidth);
const rectXCenter = rectStart + rectWidth / 2;
ctx.fillStyle = '#fff';
- ctx.font = '12px Google Sans';
+ ctx.font = '12px Roboto Condensed';
ctx.fillText(title, rectXCenter, MARGIN_TOP + RECT_HEIGHT / 2 - 1);
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
ctx.fillText(subTitle, rectXCenter, MARGIN_TOP + RECT_HEIGHT / 2 + 9);
}
@@ -251,7 +251,7 @@
line1 = `T: ${hoveredThread.threadName} [${hoveredThread.tid}]`;
}
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
const line1Width = ctx.measureText(line1).width;
const line2Width = ctx.measureText(line2).width;
const width = Math.max(line1Width, line2Width);
diff --git a/ui/src/tracks/gpu_freq/frontend.ts b/ui/src/tracks/gpu_freq/frontend.ts
index 53b79c7..5994cf6 100644
--- a/ui/src/tracks/gpu_freq/frontend.ts
+++ b/ui/src/tracks/gpu_freq/frontend.ts
@@ -106,7 +106,7 @@
ctx.fill();
ctx.stroke();
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
if (this.hoveredValue !== undefined && this.hoveredTs !== undefined) {
let text = `Freq: ${this.hoveredValue.toLocaleString()}kHz`;
diff --git a/ui/src/tracks/process_scheduling/frontend.ts b/ui/src/tracks/process_scheduling/frontend.ts
index 78a0e86..9bc4f20 100644
--- a/ui/src/tracks/process_scheduling/frontend.ts
+++ b/ui/src/tracks/process_scheduling/frontend.ts
@@ -157,7 +157,7 @@
line1 = `T: ${hoveredThread.threadName} [${hoveredThread.tid}]`;
}
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
const line1Width = ctx.measureText(line1).width;
const line2Width = ctx.measureText(line2).width;
const width = Math.max(line1Width, line2Width);
diff --git a/ui/src/tracks/thread_state/frontend.ts b/ui/src/tracks/thread_state/frontend.ts
index 39dda44..0b01644 100644
--- a/ui/src/tracks/thread_state/frontend.ts
+++ b/ui/src/tracks/thread_state/frontend.ts
@@ -80,7 +80,7 @@
const title = cropText(translateState(state), charWidth, rectWidth);
const rectXCenter = rectStart + rectWidth / 2;
ctx.fillStyle = color.l < 80 ? '#fff' : '#404040';
- ctx.font = '10px Google Sans';
+ ctx.font = '10px Roboto Condensed';
ctx.fillText(title, rectXCenter, MARGIN_TOP + RECT_HEIGHT / 2 + 3);
}
}
