Skip to content

Commit 9d66d13

Browse files
borsbors
committed
Auto merge of #14588 - ahaoboy:dark-mode, r=weihanglo
feat(timings): support dark color scheme in HTML output ### What does this PR try to resolve? Use CSS variables to control colors in different modes Fixes #14586 ### How should we test and review this PR? Switch to dark mode to preview cargo-timing.html file ### Additional information I am not an expert in CSS. The color table is generated by gpt. Maybe there are other better color schemes. <img width="1671" alt="Snipaste_2024-09-24_19-36-14" src="https://github.com/user-attachments/assets/5a4556f6-8c5b-4c81-af1d-9d2cdb304201"> <img width="1644" alt="Snipaste_2024-09-24_19-36-50" src="https://github.com/user-attachments/assets/0ae0457c-8fcc-463a-bbb9-ec9e549021b6">
2 parents 7cbdcf0 + 3401cb8 commit 9d66d13

File tree

2 files changed

+99
-26
lines changed

2 files changed

+99
-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.body).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('--canvas-axes');
32+
const GRID_COLOR = getCssColor('--canvas-grid');
33+
const BLOCK_COLOR = getCssColor('--canvas-block');
34+
const CUSTOM_BUILD_COLOR = getCssColor('--canvas-custom-build');
35+
const NOT_CUSTOM_BUILD_COLOR = getCssColor('--canvas-not-custom-build');
36+
const DEP_LINE_COLOR = getCssColor('--canvas-dep-line');
37+
const DEP_LINE_HIGHLIGHTED_COLOR = getCssColor('--canvas-dep-line-highlighted');
38+
const CPU_COLOR = getCssColor('--canvas-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

+68-12
Original file line numberDiff line numberDiff line change
@@ -609,8 +609,64 @@ 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+
--canvas-axes: #303030;
629+
--canvas-grid: #e6e6e6;
630+
--canvas-block: #aa95e8;
631+
--canvas-custom-build: #f0b165;
632+
--canvas-not-custom-build: #95cce8;
633+
--canvas-dep-line: #ddd;
634+
--canvas-dep-line-highlighted: #000;
635+
--canvas-cpu: rgba(250, 119, 0, 0.2);
636+
}
637+
638+
@media (prefers-color-scheme: dark) {
639+
:root {
640+
--error-text: #e80000;
641+
--text: #fff;
642+
--background: #121212;
643+
--h1-border-bottom: #444;
644+
--table-box-shadow: rgba(255, 255, 255, 0.1);
645+
--table-th: #a0a0a0;
646+
--table-th-background: #2c2c2c;
647+
--table-th-border-bottom: #555;
648+
--table-th-border-right: #444;
649+
--table-tr-border-top: #333;
650+
--table-tr-border-bottom: #333;
651+
--table-tr-odd-background: #1e1e1e;
652+
--table-td-background: #262626;
653+
--table-td-border-right: #333;
654+
--canvas-background: #1a1a1a;
655+
--canvas-axes: #b0b0b0;
656+
--canvas-grid: #333;
657+
--canvas-block: #aa95e8;
658+
--canvas-custom-build: #f0b165;
659+
--canvas-not-custom-build: #95cce8;
660+
--canvas-dep-line: #444;
661+
--canvas-dep-line-highlighted: #fff;
662+
--canvas-cpu: rgba(250, 119, 0, 0.2);
663+
}
664+
}
665+
612666
html {
613667
font-family: sans-serif;
668+
color: var(--text);
669+
background: var(--background);
614670
}
615671
616672
.canvas-container {
@@ -620,7 +676,7 @@ html {
620676
}
621677
622678
h1 {
623-
border-bottom: 1px solid #c0c0c0;
679+
border-bottom: 1px solid var(--h1-border-bottom);
624680
}
625681
626682
.graph {
@@ -631,14 +687,14 @@ h1 {
631687
margin-top: 20px;
632688
margin-bottom: 20px;
633689
border-collapse: collapse;
634-
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
690+
box-shadow: 0 5px 10px var(--table-box-shadow);
635691
}
636692
637693
.my-table th {
638-
color: #d5dde5;
639-
background: #1b1e24;
640-
border-bottom: 4px solid #9ea7af;
641-
border-right: 1px solid #343a45;
694+
color: var(--table-th);
695+
background: var(--table-th-background);
696+
border-bottom: 4px solid var(--table-th-border-bottom);
697+
border-right: 1px solid var(--table-th-border-right);
642698
font-size: 18px;
643699
font-weight: 100;
644700
padding: 12px;
@@ -656,8 +712,8 @@ h1 {
656712
}
657713
658714
.my-table tr {
659-
border-top: 1px solid #c1c3d1;
660-
border-bottom: 1px solid #c1c3d1;
715+
border-top: 1px solid var(--table-tr-border-top);
716+
border-bottom: 1px solid var(--table-tr-border-bottom);
661717
font-size: 16px;
662718
font-weight: normal;
663719
}
@@ -671,7 +727,7 @@ h1 {
671727
}
672728
673729
.my-table tr:nth-child(odd) td {
674-
background: #ebebeb;
730+
background: var(--table-tr-odd-background);
675731
}
676732
677733
.my-table tr:last-child td:first-child {
@@ -683,13 +739,13 @@ h1 {
683739
}
684740
685741
.my-table td {
686-
background: #ffffff;
742+
background: var(--table-td-background);
687743
padding: 10px;
688744
text-align: left;
689745
vertical-align: middle;
690746
font-weight: 300;
691747
font-size: 14px;
692-
border-right: 1px solid #C1C3D1;
748+
border-right: 1px solid var(--table-td-border-right);
693749
}
694750
695751
.my-table td:last-child {
@@ -706,7 +762,7 @@ h1 {
706762
}
707763
708764
.error-text {
709-
color: #e80000;
765+
color: var(--error-text);
710766
}
711767
712768
</style>

0 commit comments

Comments
 (0)