Skip to content

Commit e7d305b

Browse files
ahaoboyahaoboy
committed
cargo-timings.html support dark mode
1 parent 844457c commit e7d305b

File tree

2 files changed

+94
-26
lines changed

2 files changed

+94
-26
lines changed

‎src/cargo/core/compiler/timings.js

+31-14
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,21 @@ let UNIT_COORDS = {};
2222
// Map of unit index to the index it was unlocked by.
2323
let REVERSE_UNIT_DEPS = {};
2424
let REVERSE_UNIT_RMETA_DEPS = {};
25+
26+
// Colors from css
27+
const getCssColor = name => getComputedStyle(document.documentElement).getPropertyValue(name);
28+
const TEXT_COLOR = getCssColor('--text');
29+
const BG_COLOR = getCssColor('--background');
30+
const CANVAS_BG = getCssColor('--canvas-background');
31+
const AXES_COLOR = getCssColor('--axes');
32+
const GRID_COLOR = getCssColor('--grid');
33+
const BLOCK_COLOR = getCssColor('--block');
34+
const CUSTOM_BUILD_COLOR = getCssColor('--custom-build');
35+
const NOT_CUSTOM_BUILD_COLOR = getCssColor('--not-custom-build');
36+
const DEP_LINE_COLOR = getCssColor('--dep-line');
37+
const DEP_LINE_HIGHLIGHTED_COLOR = getCssColor('--dep-line-highlighted');
38+
const CPU_COLOR = getCssColor('--cpu');
39+
2540
for (let n=0; n<UNIT_DATA.length; n++) {
2641
let unit = UNIT_DATA[n];
2742
for (let unlocked of unit.unlocked_units) {
@@ -52,7 +67,7 @@ function render_pipeline_graph() {
5267
// Canvas for hover highlights. This is a separate layer to improve performance.
5368
const linectx = setup_canvas('pipeline-graph-lines', canvas_width, canvas_height);
5469
linectx.clearRect(0, 0, canvas_width, canvas_height);
55-
70+
ctx.strokeStyle = AXES_COLOR;
5671
// Draw Y tick marks.
5772
for (let n=1; n<units.length; n++) {
5873
const y = MARGIN + Y_TICK_DIST * n;
@@ -65,6 +80,7 @@ function render_pipeline_graph() {
6580
// Draw Y labels.
6681
ctx.textAlign = 'end';
6782
ctx.textBaseline = 'middle';
83+
ctx.fillStyle = AXES_COLOR;
6884
for (let n=0; n<units.length; n++) {
6985
let y = MARGIN + Y_TICK_DIST * n + Y_TICK_DIST / 2;
7086
ctx.fillText(n+1, X_LINE-4, y);
@@ -101,18 +117,18 @@ function render_pipeline_graph() {
101117
HIT_BOXES.push({x: X_LINE+x, y:MARGIN+y, x2: X_LINE+x+width, y2: MARGIN+y+BOX_HEIGHT, i: unit.i});
102118

103119
ctx.beginPath();
104-
ctx.fillStyle = unit.mode == 'run-custom-build' ? '#f0b165' : '#95cce8';
120+
ctx.fillStyle = unit.mode == 'run-custom-build' ? CUSTOM_BUILD_COLOR : NOT_CUSTOM_BUILD_COLOR;
105121
roundedRect(ctx, x, y, width, BOX_HEIGHT, RADIUS);
106122
ctx.fill();
107123

108124
if (unit.rmeta_time != null) {
109125
ctx.beginPath();
110-
ctx.fillStyle = '#aa95e8';
126+
ctx.fillStyle = BLOCK_COLOR;
111127
let ctime = unit.duration - unit.rmeta_time;
112128
roundedRect(ctx, rmeta_x, y, px_per_sec * ctime, BOX_HEIGHT, RADIUS);
113129
ctx.fill();
114130
}
115-
ctx.fillStyle = "#000";
131+
ctx.fillStyle = TEXT_COLOR;
116132
ctx.textAlign = 'start';
117133
ctx.textBaseline = 'middle';
118134
ctx.font = '14px sans-serif';
@@ -145,7 +161,7 @@ function draw_dep_lines(ctx, unit_idx, highlighted) {
145161
function draw_one_dep_line(ctx, from_x, from_y, to_unit, highlighted) {
146162
if (to_unit in UNIT_COORDS) {
147163
let {x: u_x, y: u_y} = UNIT_COORDS[to_unit];
148-
ctx.strokeStyle = highlighted ? '#000' : '#ddd';
164+
ctx.strokeStyle = highlighted ? DEP_LINE_HIGHLIGHTED_COLOR: DEP_LINE_COLOR;
149165
ctx.setLineDash([2]);
150166
ctx.beginPath();
151167
ctx.moveTo(from_x, from_y+BOX_HEIGHT/2);
@@ -204,7 +220,7 @@ function render_timing_graph() {
204220
};
205221
}
206222

207-
const cpuFillStyle = 'rgba(250, 119, 0, 0.2)';
223+
const cpuFillStyle = CPU_COLOR;
208224
if (CPU_USAGE.length > 1) {
209225
ctx.beginPath();
210226
ctx.fillStyle = cpuFillStyle;
@@ -245,8 +261,8 @@ function render_timing_graph() {
245261
ctx.save();
246262
ctx.translate(canvas_width-200, MARGIN);
247263
// background
248-
ctx.fillStyle = '#fff';
249-
ctx.strokeStyle = '#000';
264+
ctx.fillStyle = BG_COLOR;
265+
ctx.strokeStyle = TEXT_COLOR;
250266
ctx.lineWidth = 1;
251267
ctx.textBaseline = 'middle'
252268
ctx.textAlign = 'start';
@@ -255,7 +271,7 @@ function render_timing_graph() {
255271
ctx.stroke();
256272
ctx.fill();
257273

258-
ctx.fillStyle = '#000'
274+
ctx.fillStyle = TEXT_COLOR;
259275
ctx.beginPath();
260276
ctx.lineWidth = 2;
261277
ctx.strokeStyle = 'red';
@@ -282,7 +298,7 @@ function render_timing_graph() {
282298
ctx.fillStyle = cpuFillStyle
283299
ctx.fillRect(15, 60, 30, 15);
284300
ctx.fill();
285-
ctx.fillStyle = 'black';
301+
ctx.fillStyle = TEXT_COLOR;
286302
ctx.fillText('CPU Usage', 54, 71);
287303

288304
ctx.restore();
@@ -311,12 +327,13 @@ function draw_graph_axes(id, graph_height) {
311327
const canvas_width = Math.max(graph_width + X_LINE + 30, X_LINE + 250);
312328
const canvas_height = graph_height + MARGIN + Y_LINE;
313329
let ctx = setup_canvas(id, canvas_width, canvas_height);
314-
ctx.fillStyle = '#f7f7f7';
330+
ctx.fillStyle = CANVAS_BG;
315331
ctx.fillRect(0, 0, canvas_width, canvas_height);
316332

317333
ctx.lineWidth = 2;
318334
ctx.font = '16px sans-serif';
319335
ctx.textAlign = 'center';
336+
ctx.strokeStyle = AXES_COLOR;
320337

321338
// Draw main axes.
322339
ctx.beginPath();
@@ -327,7 +344,7 @@ function draw_graph_axes(id, graph_height) {
327344

328345
// Draw X tick marks.
329346
const {step, tick_dist, num_ticks} = split_ticks(DURATION, px_per_sec, graph_width);
330-
ctx.fillStyle = '#303030';
347+
ctx.fillStyle = AXES_COLOR;
331348
for (let n=0; n<num_ticks; n++) {
332349
const x = X_LINE + ((n + 1) * tick_dist);
333350
ctx.beginPath();
@@ -339,7 +356,7 @@ function draw_graph_axes(id, graph_height) {
339356
}
340357

341358
// Draw vertical lines.
342-
ctx.strokeStyle = '#e6e6e6';
359+
ctx.strokeStyle = GRID_COLOR;
343360
ctx.setLineDash([2, 4]);
344361
for (n=0; n<num_ticks; n++) {
345362
const x = X_LINE + ((n + 1) * tick_dist);
@@ -348,7 +365,7 @@ function draw_graph_axes(id, graph_height) {
348365
ctx.lineTo(x, MARGIN+graph_height);
349366
ctx.stroke();
350367
}
351-
ctx.strokeStyle = '#000';
368+
ctx.strokeStyle = TEXT_COLOR;
352369
ctx.setLineDash([]);
353370
return {canvas_width, canvas_height, graph_width, graph_height, ctx, px_per_sec};
354371
}

‎src/cargo/core/compiler/timings.rs

+63-12
Original file line numberDiff line numberDiff line change
@@ -609,8 +609,59 @@ static HTML_TMPL: &str = r#"
609609
<title>Cargo Build Timings — {ROOTS}</title>
610610
<meta charset="utf-8">
611611
<style type="text/css">
612+
:root {
613+
--error-text: #e80000;
614+
--text: #000;
615+
--background: #fff;
616+
--h1-border-bottom: #c0c0c0;;
617+
--table-box-shadow: rgba(0, 0, 0, 0.1);
618+
--table-th: #d5dde5;
619+
--table-th-background: #1b1e24;
620+
--table-th-border-bottom: #9ea7af;
621+
--table-th-border-right: #343a45;
622+
--table-tr-border-top: #c1c3d1;
623+
--table-tr-border-bottom: #c1c3d1;
624+
--table-tr-odd-background: #ebebeb;
625+
--table-td-background: #ffffff;
626+
--table-td-border-right: #C1C3D1;
627+
--canvas-background: #f7f7f7;
628+
--axes: #303030;
629+
--grid: #e6e6e6;
630+
--block: #aa95e8;
631+
--custom-build: #f0b165;
632+
--not-custom-build: #95cce8;
633+
--dep-line: #ddd ;
634+
--dep-line-highlighted: #000;
635+
--cpu: rgba(250, 119, 0, 0.2)
636+
}
637+
638+
@media (prefers-color-scheme: dark) {
639+
:root {
640+
--text: #fff;
641+
--background: #121212;
642+
--h1-border-bottom: #444;
643+
--table-box-shadow: rgba(255, 255, 255, 0.1);
644+
--table-th: #a0a0a0;
645+
--table-th-background: #2c2c2c;
646+
--table-th-border-bottom: #555;
647+
--table-th-border-right: #444;
648+
--table-tr-border-top: #333;
649+
--table-tr-border-bottom: #333;
650+
--table-tr-odd-background: #1e1e1e;
651+
--table-td-background: #262626;
652+
--table-td-border-right: #333;
653+
--canvas-background: #1a1a1a;
654+
--axes: #b0b0b0;
655+
--grid: #333;
656+
--dep-line: #444;
657+
--dep-line-highlighted: #fff;
658+
}
659+
}
660+
612661
html {
613662
font-family: sans-serif;
663+
color: var(--text);
664+
background: var(--background);
614665
}
615666
616667
.canvas-container {
@@ -620,7 +671,7 @@ html {
620671
}
621672
622673
h1 {
623-
border-bottom: 1px solid #c0c0c0;
674+
border-bottom: 1px solid var(--h1-border-bottom);
624675
}
625676
626677
.graph {
@@ -631,14 +682,14 @@ h1 {
631682
margin-top: 20px;
632683
margin-bottom: 20px;
633684
border-collapse: collapse;
634-
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
685+
box-shadow: 0 5px 10px var(--table-box-shadow);
635686
}
636687
637688
.my-table th {
638-
color: #d5dde5;
639-
background: #1b1e24;
640-
border-bottom: 4px solid #9ea7af;
641-
border-right: 1px solid #343a45;
689+
color: var(--table-th);
690+
background: var(--table-th-background);
691+
border-bottom: 4px solid var(--table-th-border-bottom);
692+
border-right: 1px solid var(--table-th-border-right);
642693
font-size: 18px;
643694
font-weight: 100;
644695
padding: 12px;
@@ -656,8 +707,8 @@ h1 {
656707
}
657708
658709
.my-table tr {
659-
border-top: 1px solid #c1c3d1;
660-
border-bottom: 1px solid #c1c3d1;
710+
border-top: 1px solid var(--table-tr-border-top);
711+
border-bottom: 1px solid var(--table-tr-border-bottom);
661712
font-size: 16px;
662713
font-weight: normal;
663714
}
@@ -671,7 +722,7 @@ h1 {
671722
}
672723
673724
.my-table tr:nth-child(odd) td {
674-
background: #ebebeb;
725+
background: var(--table-tr-odd-background);
675726
}
676727
677728
.my-table tr:last-child td:first-child {
@@ -683,13 +734,13 @@ h1 {
683734
}
684735
685736
.my-table td {
686-
background: #ffffff;
737+
background: var(--table-td-background);
687738
padding: 10px;
688739
text-align: left;
689740
vertical-align: middle;
690741
font-weight: 300;
691742
font-size: 14px;
692-
border-right: 1px solid #C1C3D1;
743+
border-right: 1px solid var(--table-td-border-right);
693744
}
694745
695746
.my-table td:last-child {
@@ -706,7 +757,7 @@ h1 {
706757
}
707758
708759
.error-text {
709-
color: #e80000;
760+
color: var(--error-text);
710761
}
711762
712763
</style>

0 commit comments

Comments
 (0)