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/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);
}
