Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(timings): support dark color scheme in HTML output #14588

Merged
merged 2 commits into from
Sep 26, 2024
Merged

feat(timings): support dark color scheme in HTML output #14588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd63023
timings: use css variables
ahaoboy Sep 26, 2024
3401cb8
timings: add dark mode
ahaoboy Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 31 additions & 14 deletions src/cargo/core/compiler/timings.js
View file
Open in desktop
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
Open in desktop
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) {
ahaoboy marked this conversation as resolved.
Show resolved Hide resolved
: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