mirror of
https://github.com/rust-lang/cargo
synced 2024-09-28 20:15:04 +00:00
timings: use css variables
This commit is contained in:
ahaoboy
parent
844457cf85
commit
fd63023cf5
|
|
@ -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) {
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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';
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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();
|
||||
|
|
@ -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();
|
||||
|
|
@ -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();
|
||||
|
|
@ -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);
|
||||
|
|
@ -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};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -609,8 +609,36 @@ 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);
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
color: var(--text);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
|
|
@ -620,7 +648,7 @@ html {
|
|||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid #c0c0c0;
|
||||
border-bottom: 1px solid var(--h1-border-bottom);
|
||||
}
|
||||
|
||||
.graph {
|
||||
|
|
@ -631,14 +659,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;
|
||||
|
|
@ -656,8 +684,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;
|
||||
}
|
||||
|
|
@ -671,7 +699,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 {
|
||||
|
|
@ -683,13 +711,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 {
|
||||
|
|
@ -706,7 +734,7 @@ h1 {
|
|||
}
|
||||
|
||||
.error-text {
|
||||
color: #e80000;
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue