Skip to content

Commit

Permalink
HTML: Mark things to show instead of to hide.
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@nedbat
nedbat committed Jul 6, 2019
1 parent 25aff80 commit cfdcace
Show file tree
Hide file tree
Showing 35 changed files with 606 additions and 632 deletions.
3 changes: 2 additions & 1 deletion .treerc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ ignore =
.tox*
.coverage* .metacov
mock.py
*.min.js
*.min.js style.css
gold
sample_html sample_html_beta
*.so *.pyd
*.gz *.zip
Expand Down
3 changes: 3 additions & 0 deletions CHANGES.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ Unreleased
be reported as warnings. As with other warnings, you can suppress them with
the ``[run] disable_warnings`` configuration setting.

- The scrollbar markers in the HTML report now accurately show the highlighted
lines, regardless of what categories of line are highlighted.

- The hack to accommodate ShiningPanda_ looking for an obsolete internal data
file has been removed, since ShiningPanda 0.22 fixed it four years ago.

Expand Down
10 changes: 4 additions & 6 deletions coverage/html.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,10 +199,10 @@ def __init__(self, cov):
# Constants for all reports.
# These css classes determine which lines are highlighted by default.
'category': {
'exc': 'exc',
'mis': 'mis',
'par': 'par run hide_run',
'run': 'run hide_run',
'exc': 'exc show_exc',
'mis': 'mis show_mis',
'par': 'par run show_par',
'run': 'run',
}
}
self.pyfile_html_source = read_data("pyfile.html")
Expand Down Expand Up @@ -316,8 +316,6 @@ def html_file(self, fr, analysis):
ldata.annotate_long = None

css_classes = []
if ldata.statement:
css_classes.append("stm")
if ldata.category:
css_classes.append(self.template_globals['category'][ldata.category])
ldata.css_class = ' '.join(css_classes) or "pln"
Expand Down
88 changes: 46 additions & 42 deletions coverage/htmlfiles/coverage_html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,21 +256,22 @@ coverage.pyfile_ready = function ($) {

coverage.init_scroll_markers();

// Rebuild scroll markers after window high changing
$(window).resize(coverage.resize_scroll_markers);
// Rebuild scroll markers when the window height changes.
$(window).resize(coverage.build_scroll_markers);
};

coverage.toggle_lines = function (btn, cls) {
btn = $(btn);
var hide = "hide_"+cls;
if (btn.hasClass(hide)) {
$("#source ."+cls).removeClass(hide);
btn.removeClass(hide);
var show = "show_"+cls;
if (btn.hasClass(show)) {
$("#source ." + cls).removeClass(show);
btn.removeClass(show);
}
else {
$("#source ."+cls).addClass(hide);
btn.addClass(hide);
$("#source ." + cls).addClass(show);
btn.addClass(show);
}
coverage.build_scroll_markers();
};

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

// Return the container of all the code.
coverage.code_container = function () {
return $(".linenos");
};

// Set the selection. b and e are line numbers.
coverage.set_sel = function (b, e) {
// The first line selected.
Expand All @@ -306,24 +302,32 @@ coverage.to_first_chunk = function () {
coverage.to_next_chunk();
};

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

coverage.to_next_chunk = function () {
var c = coverage;

// Find the start of the next colored chunk.
var probe = c.sel_end;
var color, probe_line;
var chunk_indicator, probe_line;
while (true) {
probe_line = c.line_elt(probe);
if (probe_line.length === 0) {
return;
}
color = probe_line.css("background-color");
if (!c.is_transparent(color)) {
chunk_indicator = c.chunk_indicator(probe_line);
if (chunk_indicator) {
break;
}
probe++;
Expand All @@ -333,11 +337,11 @@ coverage.to_next_chunk = function () {
var begin = probe;

// Find the end of this chunk.
var next_color = color;
while (next_color === color) {
var next_indicator = chunk_indicator;
while (next_indicator === chunk_indicator) {
probe++;
probe_line = c.line_elt(probe);
next_color = probe_line.css("background-color");
next_indicator = c.chunk_indicator(probe_line);
}
c.set_sel(begin, probe);
c.show_selection();
Expand All @@ -352,25 +356,25 @@ coverage.to_prev_chunk = function () {
if (probe_line.length === 0) {
return;
}
var color = probe_line.css("background-color");
while (probe > 0 && c.is_transparent(color)) {
var chunk_indicator = c.chunk_indicator(probe_line);
while (probe > 0 && !chunk_indicator) {
probe--;
probe_line = c.line_elt(probe);
if (probe_line.length === 0) {
return;
}
color = probe_line.css("background-color");
chunk_indicator = c.chunk_indicator(probe_line);
}

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

// Find the beginning of this chunk.
var prev_color = color;
while (prev_color === color) {
var prev_indicator = chunk_indicator;
while (prev_indicator === chunk_indicator) {
probe--;
probe_line = c.line_elt(probe);
prev_color = probe_line.css("background-color");
prev_indicator = c.chunk_indicator(probe_line);
}
c.set_sel(probe+1, end);
c.show_selection();
Expand Down Expand Up @@ -442,29 +446,29 @@ coverage.select_line_or_chunk = function (lineno) {
if (probe_line.length === 0) {
return;
}
var the_color = probe_line.css("background-color");
if (!c.is_transparent(the_color)) {
var the_indicator = c.chunk_indicator(probe_line);
if (the_indicator) {
// The line is in a highlighted chunk.
// Search backward for the first line.
var probe = lineno;
var color = the_color;
while (probe > 0 && color === the_color) {
var indicator = the_indicator;
while (probe > 0 && indicator === the_indicator) {
probe--;
probe_line = c.line_elt(probe);
if (probe_line.length === 0) {
break;
}
color = probe_line.css("background-color");
indicator = c.chunk_indicator(probe_line);
}
var begin = probe + 1;

// Search forward for the last line.
probe = lineno;
color = the_color;
while (color === the_color) {
indicator = the_indicator;
while (indicator === the_indicator) {
probe++;
probe_line = c.line_elt(probe);
color = probe_line.css("background-color");
indicator = c.chunk_indicator(probe_line);
}

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

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

// Build html
c.resize_scroll_markers();
c.build_scroll_markers();
};

coverage.resize_scroll_markers = function () {
coverage.build_scroll_markers = function () {
var c = coverage,
min_line_height = 3,
max_line_height = 10,
visible_window_h = $(window).height();

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

// Calculate line offsets outside loop to prevent relayouts
c.missed_lines.each(function() {
c.lines_to_mark.each(function() {
offsets[this.id] = $(this).offset().top;
});
c.missed_lines.each(function () {
c.lines_to_mark.each(function () {
var id_name = $(this).attr('id'),
line_top = Math.round(offsets[id_name] * marker_scale),
line_number = parseInt(id_name.substring(1, id_name.length));
Expand Down
91 changes: 39 additions & 52 deletions coverage/htmlfiles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,27 +43,26 @@ h1 { font-size: 1.25em; display: inline-block; }

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

.stats span { border: 1px solid; padding: .1em .25em; margin: 0 .1em; cursor: pointer; border-color: #999 #ccc #ccc #999; }
.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; }
.stats span.par.hide_run { border-color: #999 #ccc #ccc #999; }
.stats span.run { background: #ddffdd; }
.stats span.exc { background: #eeeeee; }
.stats span.mis { background: #ffdddd; }
.stats span.hide_run { background: #eeffee; }
.stats span.hide_exc { background: #f5f5f5; }
.stats span.hide_mis { background: #ffeeee; }
.stats span.par { background: #ffffaa; }
.stats span.hide_par { background: #ffffcc; }
.stats span { border: 1px solid; border-radius: .1em; padding: .1em .5em; margin: 0 .1em; cursor: pointer; border-color: #ccc #999 #999 #ccc; }
.stats span.run { background: #eeffee; }
.stats span.run.show_run { border-color: #999 #ccc #ccc #999; background: #ddffdd; }
.stats span.mis { background: #ffeeee; }
.stats span.mis.show_mis { border-color: #999 #ccc #ccc #999; background: #ffdddd; }
.stats span.exc { background: #f7f7f7; }
.stats span.exc.show_exc { border-color: #999 #ccc #ccc #999; background: #eeeeee; }
.stats span.par { background: #ffffd5; }
.stats span.par.show_par { border-color: #999 #ccc #ccc #999; background: #ffffaa; }

#keyboard_icon { float: right; margin: 5px; cursor: pointer; }

.help_panel { position: absolute; background: #ffffcc; padding: .5em; border: 1px solid #883; display: none; }
.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; }

.indexfile .help_panel { width: 20em; height: 4em; }
.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; }

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

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

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

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

.text p { margin: 0; padding: 0 0 0 .5em; border-left: 2px solid #ffffff; white-space: pre; position: relative; }
.text p:hover { background: #f2f2f2; }
.text p.mis { background: #ffdddd; border-left: 2px solid #ff0000; }
.text p.mis:hover { background: #f2d2d2; }
.text p.run, .text p.run.hide_par { background: #ddffdd; border-left: 2px solid #00ff00; }
.text p.run:hover, .text p.run.hide_par:hover { background: #d2f2d2; }
.text p.exc { background: #eeeeee; border-left: 2px solid #808080; }
.text p.exc:hover { background: #e2e2e2; }
.text p.par, .text p.par.hide_run { background: #ffffaa; border-left: 2px solid #eeee99; }
.text p.par:hover, .text p.par.hide_run:hover { background: #f2f2a2; }
.text p.hide_run, .text p.hide_exc, .text p.hide_mis, .text p.hide_par, .text p.hide_run.hide_par { background: inherit; }
.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; }

.text span.annotate { font-family: georgia; color: #666; float: right; padding-right: .5em; }
.text p.hide_par span.annotate { display: none; }
.text span.annotate.long { display: none; }
.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; }

.text p.run { border-left: 2px solid #00ff00; }
.text p.run.show_run { background: #ddffdd; }
.text p.run.show_run:hover { background: #d2f2d2; }
.text p.mis { border-left: 2px solid #ff0000; }
.text p.mis.show_mis { background: #ffdddd; }
.text p.mis.show_mis:hover { background: #f2d2d2; }
.text p.exc { border-left: 2px solid #808080; }
.text p.exc.show_exc { background: #eeeeee; }
.text p.exc.show_exc:hover { background: #e2e2e2; }
.text p.par { border-left: 2px solid #eeee99; }
.text p.par.show_par { background: #ffffaa; }
.text p.par.show_par:hover { background: #f2f2a2; }

.text span.annotate { font-family: georgia; color: #666; float: right; padding-right: .5em; display: none; }
.text p.show_par span.annotate { display: inline; }
.text p.show_par span.annotate.long { max-width: 50%; width: 30em; }
.text p.show_par:hover span.annotate.long { display: block; }
.text .com { color: green; font-style: italic; line-height: 1px; }
.text .key { font-weight: bold; line-height: 1px; }
.text .str { color: #000080; }

td.contexts p { margin: 0; padding: 0 .5em; color: #999999; font-family: verdana, sans-serif; white-space: nowrap; position: relative; }
td.contexts p:hover { background: #eee; }
td.contexts p span.context-list { display: none; }
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; }
td.contexts p span.context-list { min-width: 30em; }
td.contexts p span.context-list span.context-line { display: block; }
td.contexts p:hover span.context-list { display: block; }
td.contexts p span.context-button { display: inline-block; cursor: pointer; font-size: .8333em; line-height: 1em; }

span.context-list span.context-line { display: block; }

#index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }

#index th { font-style: italic; color: #333; border-bottom: 1px solid #ccc; cursor: pointer; }

#index th:hover { background: #eee; border-bottom: 1px solid #999; }

#index td.left, #index th.left { padding-left: 0; }

#index td.right, #index th.right { padding-right: 0; }

#index td.name, #index th.name { text-align: left; width: auto; }
#index th { font-style: italic; color: #333; border-bottom: 1px solid #ccc; cursor: pointer; }
#index th:hover { background: #eee; border-bottom: 1px solid #999; }
#index th.headerSortDown, #index th.headerSortUp { border-bottom: 1px solid #000; white-space: nowrap; background: #eee; }

#index th.headerSortDown:after { content: " ↓"; }

#index th.headerSortUp:after { content: " ↑"; }

#index td.name, #index th.name { text-align: left; width: auto; }

#index td.name a { text-decoration: none; color: #000; }

#index tr.total td, #index tr.total_dynamic td { font-weight: bold; border-top: 1px solid #ccc; border-bottom: none; }

#index tr.file:hover { background: #eeeeee; }

#index tr.file:hover td.name { text-decoration: underline; color: #000; }

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

0 comments on commit cfdcace

Please sign in to comment.