Skip to content

Commit

Permalink
Auto merge of #14588 - ahaoboy:dark-mode, r=weihanglo
Browse files Browse the repository at this point in the history 
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">
  • Loading branch information
@bors
bors committed Sep 26, 2024
2 parents 7cbdcf0 + 3401cb8 commit 9d66d13
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 26 deletions.
45 changes: 31 additions & 14 deletions src/cargo/core/compiler/timings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,21 @@ let UNIT_COORDS = {};
// Map of unit index to the index it was unlocked by.
let REVERSE_UNIT_DEPS = {};
let REVERSE_UNIT_RMETA_DEPS = {};

// Colors from css
const getCssColor = name => getComputedStyle(document.body).getPropertyValue(name);
const TEXT_COLOR = getCssColor('--text');
const BG_COLOR = getCssColor('--background');
const CANVAS_BG = getCssColor('--canvas-background');
const AXES_COLOR = getCssColor('--canvas-axes');
const GRID_COLOR = getCssColor('--canvas-grid');
const BLOCK_COLOR = getCssColor('--canvas-block');
const CUSTOM_BUILD_COLOR = getCssColor('--canvas-custom-build');
const NOT_CUSTOM_BUILD_COLOR = getCssColor('--canvas-not-custom-build');
const DEP_LINE_COLOR = getCssColor('--canvas-dep-line');
const DEP_LINE_HIGHLIGHTED_COLOR = getCssColor('--canvas-dep-line-highlighted');
const CPU_COLOR = getCssColor('--canvas-cpu');

for (let n=0; n<UNIT_DATA.length; n++) {
let unit = UNIT_DATA[n];
for (let unlocked of unit.unlocked_units) {
Expand Down Expand Up @@ -52,7 +67,7 @@ function render_pipeline_graph() {
// Canvas for hover highlights. This is a separate layer to improve performance.
const linectx = setup_canvas('pipeline-graph-lines', canvas_width, canvas_height);
linectx.clearRect(0, 0, canvas_width, canvas_height);

ctx.strokeStyle = AXES_COLOR;
// Draw Y tick marks.
for (let n=1; n<units.length; n++) {
const y = MARGIN + Y_TICK_DIST * n;
Expand All @@ -65,6 +80,7 @@ function render_pipeline_graph() {
// Draw Y labels.
ctx.textAlign = 'end';
ctx.textBaseline = 'middle';
ctx.fillStyle = AXES_COLOR;
for (let n=0; n<units.length; n++) {
let y = MARGIN + Y_TICK_DIST * n + Y_TICK_DIST / 2;
ctx.fillText(n+1, X_LINE-4, y);
Expand Down Expand Up @@ -101,18 +117,18 @@ function render_pipeline_graph() {
HIT_BOXES.push({x: X_LINE+x, y:MARGIN+y, x2: X_LINE+x+width, y2: MARGIN+y+BOX_HEIGHT, i: unit.i});

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

if (unit.rmeta_time != null) {
ctx.beginPath();
ctx.fillStyle = '#aa95e8';
ctx.fillStyle = BLOCK_COLOR;
let ctime = unit.duration - unit.rmeta_time;
roundedRect(ctx, rmeta_x, y, px_per_sec * ctime, BOX_HEIGHT, RADIUS);
ctx.fill();
}
ctx.fillStyle = "#000";
ctx.fillStyle = TEXT_COLOR;
ctx.textAlign = 'start';
ctx.textBaseline = 'middle';
ctx.font = '14px sans-serif';
Expand Down Expand Up @@ -145,7 +161,7 @@ function draw_dep_lines(ctx, unit_idx, highlighted) {
function draw_one_dep_line(ctx, from_x, from_y, to_unit, highlighted) {
if (to_unit in UNIT_COORDS) {
let {x: u_x, y: u_y} = UNIT_COORDS[to_unit];
ctx.strokeStyle = highlighted ? '#000' : '#ddd';
ctx.strokeStyle = highlighted ? DEP_LINE_HIGHLIGHTED_COLOR: DEP_LINE_COLOR;
ctx.setLineDash([2]);
ctx.beginPath();
ctx.moveTo(from_x, from_y+BOX_HEIGHT/2);
Expand Down Expand Up @@ -204,7 +220,7 @@ function render_timing_graph() {
};
}

const cpuFillStyle = 'rgba(250, 119, 0, 0.2)';
const cpuFillStyle = CPU_COLOR;
if (CPU_USAGE.length > 1) {
ctx.beginPath();
ctx.fillStyle = cpuFillStyle;
Expand Down Expand Up @@ -245,8 +261,8 @@ function render_timing_graph() {
ctx.save();
ctx.translate(canvas_width-200, MARGIN);
// background
ctx.fillStyle = '#fff';
ctx.strokeStyle = '#000';
ctx.fillStyle = BG_COLOR;
ctx.strokeStyle = TEXT_COLOR;
ctx.lineWidth = 1;
ctx.textBaseline = 'middle'
ctx.textAlign = 'start';
Expand All @@ -255,7 +271,7 @@ function render_timing_graph() {
ctx.stroke();
ctx.fill();

ctx.fillStyle = '#000'
ctx.fillStyle = TEXT_COLOR;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
Expand All @@ -282,7 +298,7 @@ function render_timing_graph() {
ctx.fillStyle = cpuFillStyle
ctx.fillRect(15, 60, 30, 15);
ctx.fill();
ctx.fillStyle = 'black';
ctx.fillStyle = TEXT_COLOR;
ctx.fillText('CPU Usage', 54, 71);

ctx.restore();
Expand Down Expand Up @@ -311,12 +327,13 @@ function draw_graph_axes(id, graph_height) {
const canvas_width = Math.max(graph_width + X_LINE + 30, X_LINE + 250);
const canvas_height = graph_height + MARGIN + Y_LINE;
let ctx = setup_canvas(id, canvas_width, canvas_height);
ctx.fillStyle = '#f7f7f7';
ctx.fillStyle = CANVAS_BG;
ctx.fillRect(0, 0, canvas_width, canvas_height);

ctx.lineWidth = 2;
ctx.font = '16px sans-serif';
ctx.textAlign = 'center';
ctx.strokeStyle = AXES_COLOR;

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

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

// Draw vertical lines.
ctx.strokeStyle = '#e6e6e6';
ctx.strokeStyle = GRID_COLOR;
ctx.setLineDash([2, 4]);
for (n=0; n<num_ticks; n++) {
const x = X_LINE + ((n + 1) * tick_dist);
Expand All @@ -348,7 +365,7 @@ function draw_graph_axes(id, graph_height) {
ctx.lineTo(x, MARGIN+graph_height);
ctx.stroke();
}
ctx.strokeStyle = '#000';
ctx.strokeStyle = TEXT_COLOR;
ctx.setLineDash([]);
return {canvas_width, canvas_height, graph_width, graph_height, ctx, px_per_sec};
}
Expand Down
80 changes: 68 additions & 12 deletions src/cargo/core/compiler/timings.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -609,8 +609,64 @@ static HTML_TMPL: &str = r#"
<title>Cargo Build Timings — {ROOTS}</title>
<meta charset="utf-8">
<style type="text/css">
:root {
--error-text: #e80000;
--text: #000;
--background: #fff;
--h1-border-bottom: #c0c0c0;
--table-box-shadow: rgba(0, 0, 0, 0.1);
--table-th: #d5dde5;
--table-th-background: #1b1e24;
--table-th-border-bottom: #9ea7af;
--table-th-border-right: #343a45;
--table-tr-border-top: #c1c3d1;
--table-tr-border-bottom: #c1c3d1;
--table-tr-odd-background: #ebebeb;
--table-td-background: #ffffff;
--table-td-border-right: #C1C3D1;
--canvas-background: #f7f7f7;
--canvas-axes: #303030;
--canvas-grid: #e6e6e6;
--canvas-block: #aa95e8;
--canvas-custom-build: #f0b165;
--canvas-not-custom-build: #95cce8;
--canvas-dep-line: #ddd;
--canvas-dep-line-highlighted: #000;
--canvas-cpu: rgba(250, 119, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
:root {
--error-text: #e80000;
--text: #fff;
--background: #121212;
--h1-border-bottom: #444;
--table-box-shadow: rgba(255, 255, 255, 0.1);
--table-th: #a0a0a0;
--table-th-background: #2c2c2c;
--table-th-border-bottom: #555;
--table-th-border-right: #444;
--table-tr-border-top: #333;
--table-tr-border-bottom: #333;
--table-tr-odd-background: #1e1e1e;
--table-td-background: #262626;
--table-td-border-right: #333;
--canvas-background: #1a1a1a;
--canvas-axes: #b0b0b0;
--canvas-grid: #333;
--canvas-block: #aa95e8;
--canvas-custom-build: #f0b165;
--canvas-not-custom-build: #95cce8;
--canvas-dep-line: #444;
--canvas-dep-line-highlighted: #fff;
--canvas-cpu: rgba(250, 119, 0, 0.2);
}
}
html {
font-family: sans-serif;
color: var(--text);
background: var(--background);
}
.canvas-container {
Expand All @@ -620,7 +676,7 @@ html {
}
h1 {
border-bottom: 1px solid #c0c0c0;
border-bottom: 1px solid var(--h1-border-bottom);
}
.graph {
Expand All @@ -631,14 +687,14 @@ h1 {
margin-top: 20px;
margin-bottom: 20px;
border-collapse: collapse;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px var(--table-box-shadow);
}
.my-table th {
color: #d5dde5;
background: #1b1e24;
border-bottom: 4px solid #9ea7af;
border-right: 1px solid #343a45;
color: var(--table-th);
background: var(--table-th-background);
border-bottom: 4px solid var(--table-th-border-bottom);
border-right: 1px solid var(--table-th-border-right);
font-size: 18px;
font-weight: 100;
padding: 12px;
Expand All @@ -656,8 +712,8 @@ h1 {
}
.my-table tr {
border-top: 1px solid #c1c3d1;
border-bottom: 1px solid #c1c3d1;
border-top: 1px solid var(--table-tr-border-top);
border-bottom: 1px solid var(--table-tr-border-bottom);
font-size: 16px;
font-weight: normal;
}
Expand All @@ -671,7 +727,7 @@ h1 {
}
.my-table tr:nth-child(odd) td {
background: #ebebeb;
background: var(--table-tr-odd-background);
}
.my-table tr:last-child td:first-child {
Expand All @@ -683,13 +739,13 @@ h1 {
}
.my-table td {
background: #ffffff;
background: var(--table-td-background);
padding: 10px;
text-align: left;
vertical-align: middle;
font-weight: 300;
font-size: 14px;
border-right: 1px solid #C1C3D1;
border-right: 1px solid var(--table-td-border-right);
}
.my-table td:last-child {
Expand All @@ -706,7 +762,7 @@ h1 {
}
.error-text {
color: #e80000;
color: var(--error-text);
}
</style>
Expand Down

0 comments on commit 9d66d13

Please sign in to comment.