Skip to content

Commit cfdcace

Browse files
nedbatnedbat
committed
HTML: Mark things to show instead of to hide.
Also made some other changes along the way: * Scroll bar markers change as the selected categories change. * We don't use css class 'stm' for anything, get rid of it. * Better sass use all around.
1 parent 25aff80 commit cfdcace

35 files changed

+606
-632
lines changed

‎.treerc

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ ignore =
99
.tox*
1010
.coverage* .metacov
1111
mock.py
12-
*.min.js
12+
*.min.js style.css
13+
gold
1314
sample_html sample_html_beta
1415
*.so *.pyd
1516
*.gz *.zip

‎CHANGES.rst

+3
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ Unreleased
4141
be reported as warnings. As with other warnings, you can suppress them with
4242
the ``[run] disable_warnings`` configuration setting.
4343

44+
- The scrollbar markers in the HTML report now accurately show the highlighted
45+
lines, regardless of what categories of line are highlighted.
46+
4447
- The hack to accommodate ShiningPanda_ looking for an obsolete internal data
4548
file has been removed, since ShiningPanda 0.22 fixed it four years ago.
4649

‎coverage/html.py

+4-6
Original file line numberDiff line numberDiff line change
@@ -199,10 +199,10 @@ def __init__(self, cov):
199199
# Constants for all reports.
200200
# These css classes determine which lines are highlighted by default.
201201
'category': {
202-
'exc': 'exc',
203-
'mis': 'mis',
204-
'par': 'par run hide_run',
205-
'run': 'run hide_run',
202+
'exc': 'exc show_exc',
203+
'mis': 'mis show_mis',
204+
'par': 'par run show_par',
205+
'run': 'run',
206206
}
207207
}
208208
self.pyfile_html_source = read_data("pyfile.html")
@@ -316,8 +316,6 @@ def html_file(self, fr, analysis):
316316
ldata.annotate_long = None
317317

318318
css_classes = []
319-
if ldata.statement:
320-
css_classes.append("stm")
321319
if ldata.category:
322320
css_classes.append(self.template_globals['category'][ldata.category])
323321
ldata.css_class = ' '.join(css_classes) or "pln"

‎coverage/htmlfiles/coverage_html.js

+46-42
Original file line numberDiff line numberDiff line change
@@ -256,21 +256,22 @@ coverage.pyfile_ready = function ($) {
256256

257257
coverage.init_scroll_markers();
258258

259-
// Rebuild scroll markers after window high changing
260-
$(window).resize(coverage.resize_scroll_markers);
259+
// Rebuild scroll markers when the window height changes.
260+
$(window).resize(coverage.build_scroll_markers);
261261
};
262262

263263
coverage.toggle_lines = function (btn, cls) {
264264
btn = $(btn);
265-
var hide = "hide_"+cls;
266-
if (btn.hasClass(hide)) {
267-
$("#source ."+cls).removeClass(hide);
268-
btn.removeClass(hide);
265+
var show = "show_"+cls;
266+
if (btn.hasClass(show)) {
267+
$("#source ." + cls).removeClass(show);
268+
btn.removeClass(show);
269269
}
270270
else {
271-
$("#source ."+cls).addClass(hide);
272-
btn.addClass(hide);
271+
$("#source ." + cls).addClass(show);
272+
btn.addClass(show);
273273
}
274+
coverage.build_scroll_markers();
274275
};
275276

276277
// Return the nth line div.
@@ -283,11 +284,6 @@ coverage.num_elt = function (n) {
283284
return $("#n" + n);
284285
};
285286

286-
// Return the container of all the code.
287-
coverage.code_container = function () {
288-
return $(".linenos");
289-
};
290-
291287
// Set the selection. b and e are line numbers.
292288
coverage.set_sel = function (b, e) {
293289
// The first line selected.
@@ -306,24 +302,32 @@ coverage.to_first_chunk = function () {
306302
coverage.to_next_chunk();
307303
};
308304

309-
coverage.is_transparent = function (color) {
310-
// Different browsers return different colors for "none".
311-
return color === "transparent" || color === "rgba(0, 0, 0, 0)";
305+
// Return a string indicating what kind of chunk this line belongs to,
306+
// or null if not a chunk.
307+
coverage.chunk_indicator = function (line_elt) {
308+
var klass = line_elt.attr('class');
309+
if (klass) {
310+
var m = klass.match(/\bshow_\w+\b/);
311+
if (m) {
312+
return m[0];
313+
}
314+
}
315+
return null;
312316
};
313317

314318
coverage.to_next_chunk = function () {
315319
var c = coverage;
316320

317321
// Find the start of the next colored chunk.
318322
var probe = c.sel_end;
319-
var color, probe_line;
323+
var chunk_indicator, probe_line;
320324
while (true) {
321325
probe_line = c.line_elt(probe);
322326
if (probe_line.length === 0) {
323327
return;
324328
}
325-
color = probe_line.css("background-color");
326-
if (!c.is_transparent(color)) {
329+
chunk_indicator = c.chunk_indicator(probe_line);
330+
if (chunk_indicator) {
327331
break;
328332
}
329333
probe++;
@@ -333,11 +337,11 @@ coverage.to_next_chunk = function () {
333337
var begin = probe;
334338

335339
// Find the end of this chunk.
336-
var next_color = color;
337-
while (next_color === color) {
340+
var next_indicator = chunk_indicator;
341+
while (next_indicator === chunk_indicator) {
338342
probe++;
339343
probe_line = c.line_elt(probe);
340-
next_color = probe_line.css("background-color");
344+
next_indicator = c.chunk_indicator(probe_line);
341345
}
342346
c.set_sel(begin, probe);
343347
c.show_selection();
@@ -352,25 +356,25 @@ coverage.to_prev_chunk = function () {
352356
if (probe_line.length === 0) {
353357
return;
354358
}
355-
var color = probe_line.css("background-color");
356-
while (probe > 0 && c.is_transparent(color)) {
359+
var chunk_indicator = c.chunk_indicator(probe_line);
360+
while (probe > 0 && !chunk_indicator) {
357361
probe--;
358362
probe_line = c.line_elt(probe);
359363
if (probe_line.length === 0) {
360364
return;
361365
}
362-
color = probe_line.css("background-color");
366+
chunk_indicator = c.chunk_indicator(probe_line);
363367
}
364368

365369
// There's a prev chunk, `probe` points to its last line.
366370
var end = probe+1;
367371

368372
// Find the beginning of this chunk.
369-
var prev_color = color;
370-
while (prev_color === color) {
373+
var prev_indicator = chunk_indicator;
374+
while (prev_indicator === chunk_indicator) {
371375
probe--;
372376
probe_line = c.line_elt(probe);
373-
prev_color = probe_line.css("background-color");
377+
prev_indicator = c.chunk_indicator(probe_line);
374378
}
375379
c.set_sel(probe+1, end);
376380
c.show_selection();
@@ -442,29 +446,29 @@ coverage.select_line_or_chunk = function (lineno) {
442446
if (probe_line.length === 0) {
443447
return;
444448
}
445-
var the_color = probe_line.css("background-color");
446-
if (!c.is_transparent(the_color)) {
449+
var the_indicator = c.chunk_indicator(probe_line);
450+
if (the_indicator) {
447451
// The line is in a highlighted chunk.
448452
// Search backward for the first line.
449453
var probe = lineno;
450-
var color = the_color;
451-
while (probe > 0 && color === the_color) {
454+
var indicator = the_indicator;
455+
while (probe > 0 && indicator === the_indicator) {
452456
probe--;
453457
probe_line = c.line_elt(probe);
454458
if (probe_line.length === 0) {
455459
break;
456460
}
457-
color = probe_line.css("background-color");
461+
indicator = c.chunk_indicator(probe_line);
458462
}
459463
var begin = probe + 1;
460464

461465
// Search forward for the last line.
462466
probe = lineno;
463-
color = the_color;
464-
while (color === the_color) {
467+
indicator = the_indicator;
468+
while (indicator === the_indicator) {
465469
probe++;
466470
probe_line = c.line_elt(probe);
467-
color = probe_line.css("background-color");
471+
indicator = c.chunk_indicator(probe_line);
468472
}
469473

470474
coverage.set_sel(begin, probe);
@@ -478,7 +482,7 @@ coverage.show_selection = function () {
478482
var c = coverage;
479483

480484
// Highlight the lines in the chunk
481-
c.code_container().find(".highlight").removeClass("highlight");
485+
$(".linenos .highlight").removeClass("highlight");
482486
for (var probe = c.sel_begin; probe > 0 && probe < c.sel_end; probe++) {
483487
c.num_elt(probe).addClass("highlight");
484488
}
@@ -511,18 +515,18 @@ coverage.init_scroll_markers = function () {
511515
c.lines_len = $('td.text p').length;
512516
c.body_h = $('body').height();
513517
c.header_h = $('div#header').height();
514-
c.missed_lines = $('td.text p.mis, td.text p.par');
515518

516519
// Build html
517-
c.resize_scroll_markers();
520+
c.build_scroll_markers();
518521
};
519522

520-
coverage.resize_scroll_markers = function () {
523+
coverage.build_scroll_markers = function () {
521524
var c = coverage,
522525
min_line_height = 3,
523526
max_line_height = 10,
524527
visible_window_h = $(window).height();
525528

529+
c.lines_to_mark = $('td.text').find('p.show_run, p.show_mis, p.show_exc, p.show_par');
526530
$('#scroll_marker').remove();
527531
// Don't build markers if the window has no scroll bar.
528532
if (c.body_h <= visible_window_h) {
@@ -550,10 +554,10 @@ coverage.resize_scroll_markers = function () {
550554
offsets = {};
551555

552556
// Calculate line offsets outside loop to prevent relayouts
553-
c.missed_lines.each(function() {
557+
c.lines_to_mark.each(function() {
554558
offsets[this.id] = $(this).offset().top;
555559
});
556-
c.missed_lines.each(function () {
560+
c.lines_to_mark.each(function () {
557561
var id_name = $(this).attr('id'),
558562
line_top = Math.round(offsets[id_name] * marker_scale),
559563
line_number = parseInt(id_name.substring(1, id_name.length));

‎coverage/htmlfiles/style.css

+39-52
Original file line numberDiff line numberDiff line change
@@ -43,27 +43,26 @@ h1 { font-size: 1.25em; display: inline-block; }
4343

4444
h2.stats { margin-top: .5em; font-size: 1em; }
4545

46-
.stats span { border: 1px solid; padding: .1em .25em; margin: 0 .1em; cursor: pointer; border-color: #999 #ccc #ccc #999; }
47-
.stats span.hide_run, .stats span.hide_exc, .stats span.hide_mis, .stats span.hide_par, .stats span.par.hide_run.hide_par { border-color: #ccc #999 #999 #ccc; }
48-
.stats span.par.hide_run { border-color: #999 #ccc #ccc #999; }
49-
.stats span.run { background: #ddffdd; }
50-
.stats span.exc { background: #eeeeee; }
51-
.stats span.mis { background: #ffdddd; }
52-
.stats span.hide_run { background: #eeffee; }
53-
.stats span.hide_exc { background: #f5f5f5; }
54-
.stats span.hide_mis { background: #ffeeee; }
55-
.stats span.par { background: #ffffaa; }
56-
.stats span.hide_par { background: #ffffcc; }
46+
.stats span { border: 1px solid; border-radius: .1em; padding: .1em .5em; margin: 0 .1em; cursor: pointer; border-color: #ccc #999 #999 #ccc; }
47+
.stats span.run { background: #eeffee; }
48+
.stats span.run.show_run { border-color: #999 #ccc #ccc #999; background: #ddffdd; }
49+
.stats span.mis { background: #ffeeee; }
50+
.stats span.mis.show_mis { border-color: #999 #ccc #ccc #999; background: #ffdddd; }
51+
.stats span.exc { background: #f7f7f7; }
52+
.stats span.exc.show_exc { border-color: #999 #ccc #ccc #999; background: #eeeeee; }
53+
.stats span.par { background: #ffffd5; }
54+
.stats span.par.show_par { border-color: #999 #ccc #ccc #999; background: #ffffaa; }
5755

58-
#keyboard_icon { float: right; margin: 5px; cursor: pointer; }
59-
60-
.help_panel { position: absolute; background: #ffffcc; padding: .5em; border: 1px solid #883; display: none; }
56+
.text p.show_par span.annotate.long, td.contexts p span.context-list, .help_panel { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; color: #333; padding: .25em .5em; }
6157

62-
.indexfile .help_panel { width: 20em; height: 4em; }
58+
.text p.show_par span.annotate.long, td.contexts p span.context-list { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; }
6359

64-
.pyfile .help_panel { width: 16em; height: 8em; }
60+
#keyboard_icon { float: right; margin: 5px; cursor: pointer; }
6561

62+
.help_panel { padding: .5em; border: 1px solid #883; }
6663
.help_panel .legend { font-style: italic; margin-bottom: 1em; }
64+
.indexfile .help_panel { width: 20em; height: 4em; }
65+
.pyfile .help_panel { width: 16em; height: 8em; }
6766

6867
#panel_icon { float: right; cursor: pointer; }
6968

@@ -79,59 +78,47 @@ td.text { width: 100%; }
7978

8079
.text p { margin: 0; padding: 0 0 0 .5em; border-left: 2px solid #ffffff; white-space: pre; position: relative; }
8180
.text p:hover { background: #f2f2f2; }
82-
.text p.mis { background: #ffdddd; border-left: 2px solid #ff0000; }
83-
.text p.mis:hover { background: #f2d2d2; }
84-
.text p.run, .text p.run.hide_par { background: #ddffdd; border-left: 2px solid #00ff00; }
85-
.text p.run:hover, .text p.run.hide_par:hover { background: #d2f2d2; }
86-
.text p.exc { background: #eeeeee; border-left: 2px solid #808080; }
87-
.text p.exc:hover { background: #e2e2e2; }
88-
.text p.par, .text p.par.hide_run { background: #ffffaa; border-left: 2px solid #eeee99; }
89-
.text p.par:hover, .text p.par.hide_run:hover { background: #f2f2a2; }
90-
.text p.hide_run, .text p.hide_exc, .text p.hide_mis, .text p.hide_par, .text p.hide_run.hide_par { background: inherit; }
91-
.text p.hide_run:hover, .text p.hide_exc:hover, .text p.hide_mis:hover, .text p.hide_par:hover, .text p.hide_run.hide_par:hover { background: #f2f2f2; }
92-
93-
.text span.annotate { font-family: georgia; color: #666; float: right; padding-right: .5em; }
94-
.text p.hide_par span.annotate { display: none; }
95-
.text span.annotate.long { display: none; }
96-
.text p:hover span.annotate.long { display: block; max-width: 50%; white-space: normal; float: right; position: absolute; top: 1.75em; right: 1em; width: 30em; height: auto; color: #333; background: #ffffcc; border: 1px solid #888; padding: .25em .5em; z-index: 999; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; }
97-
81+
.text p.run { border-left: 2px solid #00ff00; }
82+
.text p.run.show_run { background: #ddffdd; }
83+
.text p.run.show_run:hover { background: #d2f2d2; }
84+
.text p.mis { border-left: 2px solid #ff0000; }
85+
.text p.mis.show_mis { background: #ffdddd; }
86+
.text p.mis.show_mis:hover { background: #f2d2d2; }
87+
.text p.exc { border-left: 2px solid #808080; }
88+
.text p.exc.show_exc { background: #eeeeee; }
89+
.text p.exc.show_exc:hover { background: #e2e2e2; }
90+
.text p.par { border-left: 2px solid #eeee99; }
91+
.text p.par.show_par { background: #ffffaa; }
92+
.text p.par.show_par:hover { background: #f2f2a2; }
93+
94+
.text span.annotate { font-family: georgia; color: #666; float: right; padding-right: .5em; display: none; }
95+
.text p.show_par span.annotate { display: inline; }
96+
.text p.show_par span.annotate.long { max-width: 50%; width: 30em; }
97+
.text p.show_par:hover span.annotate.long { display: block; }
9898
.text .com { color: green; font-style: italic; line-height: 1px; }
9999
.text .key { font-weight: bold; line-height: 1px; }
100100
.text .str { color: #000080; }
101101

102102
td.contexts p { margin: 0; padding: 0 .5em; color: #999999; font-family: verdana, sans-serif; white-space: nowrap; position: relative; }
103103
td.contexts p:hover { background: #eee; }
104-
td.contexts p span.context-list { display: none; }
105-
td.contexts p:hover span.context-list { display: block; min-width: 30em; white-space: normal; float: right; position: absolute; top: 1.75em; right: 1em; height: auto; color: #333; background: #ffffcc; border: 1px solid #888; padding: .25em .5em; z-index: 999; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; }
104+
td.contexts p span.context-list { min-width: 30em; }
105+
td.contexts p span.context-list span.context-line { display: block; }
106+
td.contexts p:hover span.context-list { display: block; }
106107
td.contexts p span.context-button { display: inline-block; cursor: pointer; font-size: .8333em; line-height: 1em; }
107108

108-
span.context-list span.context-line { display: block; }
109-
110109
#index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }
111-
112-
#index th { font-style: italic; color: #333; border-bottom: 1px solid #ccc; cursor: pointer; }
113-
114-
#index th:hover { background: #eee; border-bottom: 1px solid #999; }
115-
116110
#index td.left, #index th.left { padding-left: 0; }
117-
118111
#index td.right, #index th.right { padding-right: 0; }
119-
112+
#index td.name, #index th.name { text-align: left; width: auto; }
113+
#index th { font-style: italic; color: #333; border-bottom: 1px solid #ccc; cursor: pointer; }
114+
#index th:hover { background: #eee; border-bottom: 1px solid #999; }
120115
#index th.headerSortDown, #index th.headerSortUp { border-bottom: 1px solid #000; white-space: nowrap; background: #eee; }
121-
122116
#index th.headerSortDown:after { content: " ↓"; }
123-
124117
#index th.headerSortUp:after { content: " ↑"; }
125-
126-
#index td.name, #index th.name { text-align: left; width: auto; }
127-
128118
#index td.name a { text-decoration: none; color: #000; }
129-
130119
#index tr.total td, #index tr.total_dynamic td { font-weight: bold; border-top: 1px solid #ccc; border-bottom: none; }
131-
132120
#index tr.file:hover { background: #eeeeee; }
133-
134121
#index tr.file:hover td.name { text-decoration: underline; color: #000; }
135122

136123
#scroll_marker { position: fixed; right: 0; top: 0; width: 16px; height: 100%; background: white; border-left: 1px solid #eee; will-change: transform; }
137-
#scroll_marker .marker { background: #eedddd; position: absolute; min-height: 3px; width: 100%; }
124+
#scroll_marker .marker { background: #ddd; position: absolute; min-height: 3px; width: 100%; }

0 commit comments

Comments
 (0)