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

Jump to bottom

Put contexts dict in <script> and reveal them using JavaScript #1587

Merged
merged 6 commits into from
Mar 22, 2023
Merged

Put contexts dict in <script> and reveal them using JavaScript #1587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6329d31
Put contexts dict in <script> and reveal them using JavaScript
abo-abo Mar 16, 2023
e550869
Address review comments
abo-abo Mar 17, 2023
49220af
coverage/htmlfiles/style.css: Align the contexts to the right
abo-abo Mar 17, 2023
9833e3d
coverage/htmlfiles/style.scss: Match style.css
abo-abo Mar 20, 2023
d2ef5c6
coverage/html.py: Fix linting and mypy errors
abo-abo Mar 20, 2023
809266c
two_tests_py.html: make update-gold
abo-abo Mar 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 14 additions & 0 deletions coverage/html.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
import os
import re
import shutil
from collections import Counter

from dataclasses import dataclass
from typing import Any, Dict, Iterable, List, Optional, Tuple, TYPE_CHECKING, cast
Expand Down Expand Up @@ -84,6 +85,7 @@ class LineData:
short_annotations: List[str]
long_annotations: List[str]
html: str = ""
context_str: Optional[str] = None
annotate: Optional[str] = None
annotate_long: Optional[str] = None
css_class: str = ""
Expand Down Expand Up @@ -367,6 +369,11 @@ def write_html_file(self, ftr: FileToReport, prev_html: str, next_html: str) ->

# Write the HTML page for this file.
file_data = self.datagen.data_for_file(ftr.fr, ftr.analysis)

contexts = Counter(c for cline in file_data.lines for c in cline.contexts)
context_codes = {y: i for (i, y) in enumerate(x[0] for x in contexts.most_common())}
contexts_json = json.dumps({v: k for (k, v) in context_codes.items()}, indent=2)

for ldata in file_data.lines:
# Build the HTML for the line.
html_parts = []
Expand All @@ -380,6 +387,9 @@ def write_html_file(self, ftr: FileToReport, prev_html: str, next_html: str) ->
)
ldata.html = ''.join(html_parts)

ldata.context_str = ",".join(
str(context_codes[c_context]) for c_context in ldata.context_list)

if ldata.short_annotations:
# 202F is NARROW NO-BREAK SPACE.
# 219B is RIGHTWARDS ARROW WITH STROKE.
Expand Down Expand Up @@ -412,6 +422,10 @@ def write_html_file(self, ftr: FileToReport, prev_html: str, next_html: str) ->
)
ldata.css_class = ' '.join(css_classes) or "pln"

if context_codes:
file_data.__dict__["contexts_json"] = contexts_json
else:
file_data.__dict__["contexts_json"] = None
html_path = os.path.join(self.directory, ftr.html_filename)
html = self.source_tmpl.render({
**file_data.__dict__,
Expand Down
21 changes: 21 additions & 0 deletions coverage/htmlfiles/coverage_html.js
View file
Open in desktop
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please note that I use four-space indents in .js and .html files. I recommend an editorconfig plugin for your editor to adjust settings automatically.

Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,11 @@ coverage.index_ready = function () {
coverage.LINE_FILTERS_STORAGE = "COVERAGE_LINE_FILTERS";

coverage.pyfile_ready = function () {
cboxes = document.querySelectorAll('[id^=ctxs]')
cboxes.forEach(function(cbox) {
cbox.addEventListener("click", coverage.showContexts)
});

// If we're directed to a particular line number, highlight the line.
var frag = location.hash;
if (frag.length > 2 && frag[1] === 't') {
Expand Down Expand Up @@ -595,10 +600,26 @@ coverage.wire_up_sticky_header = function () {
updateHeader();
};

coverage.showContexts = function (e) {
span = e.target.nextElementSibling.nextElementSibling;
span_text = span.textContent;

if (/^[0-9,]+$/.test(span_text))
{
span.textContent = "";
span_text.split(",").forEach(function(s) {
ctx = contexts[s];
span.appendChild(document.createTextNode(ctx));
span.appendChild(document.createElement("br"));
})
}
};

document.addEventListener("DOMContentLoaded", () => {
if (document.body.classList.contains("indexfile")) {
coverage.index_ready();
} else {
coverage.pyfile_ready();
}

});
13 changes: 9 additions & 4 deletions coverage/htmlfiles/pyfile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@
{% if extra_css %}
<link rel="stylesheet" href="{{ extra_css }}" type="text/css">
{% endif %}

{% if contexts_json %}
<script type="text/javascript">
contexts = {{ contexts_json }}
</script>
{% endif %}

<script type="text/javascript" src="coverage_html.js" defer></script>
</head>
<body class="pyfile">
Expand Down Expand Up @@ -117,11 +124,9 @@ <h2>
{% endif %}
</span>
{# Things that should appear below the line. #}
{% if line.context_list %}
{% if line.context_str %}
<span class="ctxs">
{% for context in line.context_list %}
<span>{{context}}</span>
{% endfor %}
{{ line.context_str }}
</span>
{% endif %}
</p>
Expand Down
2 changes: 1 addition & 1 deletion coverage/htmlfiles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ kbd { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em

@media (prefers-color-scheme: dark) { #source p label.ctx { color: #777; } }

#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #d0e8ff; border-radius: .25em; margin-right: 1.75em; }
#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #d0e8ff; border-radius: .25em; margin-right: 1.75em; text-align: right; }
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is generated from a .scss file. You want to add this setting in place of the span clause here: https://github.com/nedbat/coveragepy/blob/master/coverage/htmlfiles/style.scss#L625-L628


@media (prefers-color-scheme: dark) { #source p .ctxs { background: #056; } }

Expand Down
1 change: 1 addition & 0 deletions coverage/htmlfiles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -622,6 +622,7 @@ $border-indicator-width: .2em;
@include background-dark($dark-context-bg-color);
border-radius: .25em;
margin-right: 1.75em;
text-align: right;
span {
display: block;
text-align: right;
Expand Down
29 changes: 18 additions & 11 deletions tests/gold/html/contexts/two_tests_py.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
<title>Coverage for two_tests.py: 94%</title>
<link rel="icon" sizes="32x32" href="favicon_32.png">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript">
contexts = {
"0": "(empty)",
"1": "two_tests.test_two",
"2": "two_tests.test_one"
}
</script>
<script type="text/javascript" src="coverage_html.js" defer></script>
</head>
<body class="pyfile">
Expand Down Expand Up @@ -65,7 +72,7 @@ <h2>
<a id="nextFileLink" class="nav" href="index.html">&#xbb; next</a>
&nbsp; &nbsp; &nbsp;
<a class="nav" href="https://coverage.readthedocs.io/en/7.2.3a0.dev1">coverage.py v7.2.3a0.dev1</a>,
created at 2023-03-21 08:44 -0400
created at 2023-03-22 16:13 +0100
</p>
<aside class="hidden">
<button type="button" class="button_next_chunk" data-shortcut="j"/>
Expand All @@ -81,20 +88,20 @@ <h2>
</header>
<main id="source">
<p class="run"><span class="n"><a id="t1" href="#t1">1</a></span><span class="t"><span class="key">def</span> <span class="nam">helper</span><span class="op">(</span><span class="nam">lineno</span><span class="op">)</span><span class="op">:</span>&nbsp;</span><span class="r"><label for="ctxs1" class="ctx">(empty)</label></span></p>
<p class="run"><span class="n"><a id="t2" href="#t2">2</a></span><span class="t"> <span class="nam">x</span> <span class="op">=</span> <span class="num">2</span>&nbsp;</span><input type="checkbox" id="ctxs2" /><span class="r"><label for="ctxs2" class="ctx">3 ctx</label></span><span class="ctxs"><span>(empty)</span><span>two_tests.test_one</span><span>two_tests.test_two</span></span></p>
<p class="run"><span class="n"><a id="t2" href="#t2">2</a></span><span class="t"> <span class="nam">x</span> <span class="op">=</span> <span class="num">2</span>&nbsp;</span><input type="checkbox" id="ctxs2" /><span class="r"><label for="ctxs2" class="ctx">3 ctx</label></span><span class="ctxs">0,2,1</span></p>
<p class="pln"><span class="n"><a id="t3" href="#t3">3</a></span><span class="t">&nbsp;</span><span class="r"></span></p>
<p class="run"><span class="n"><a id="t4" href="#t4">4</a></span><span class="t"><span class="key">def</span> <span class="nam">test_one</span><span class="op">(</span><span class="op">)</span><span class="op">:</span>&nbsp;</span><span class="r"><label for="ctxs4" class="ctx">(empty)</label></span></p>
<p class="run"><span class="n"><a id="t5" href="#t5">5</a></span><span class="t"> <span class="nam">a</span> <span class="op">=</span> <span class="num">5</span>&nbsp;</span><input type="checkbox" id="ctxs5" /><span class="r"><label for="ctxs5" class="ctx">1 ctx</label></span><span class="ctxs"><span>two_tests.test_one</span></span></p>
<p class="run"><span class="n"><a id="t6" href="#t6">6</a></span><span class="t"> <span class="nam">helper</span><span class="op">(</span><span class="num">6</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs6" /><span class="r"><label for="ctxs6" class="ctx">1 ctx</label></span><span class="ctxs"><span>two_tests.test_one</span></span></p>
<p class="run"><span class="n"><a id="t5" href="#t5">5</a></span><span class="t"> <span class="nam">a</span> <span class="op">=</span> <span class="num">5</span>&nbsp;</span><input type="checkbox" id="ctxs5" /><span class="r"><label for="ctxs5" class="ctx">1 ctx</label></span><span class="ctxs">2</span></p>
<p class="run"><span class="n"><a id="t6" href="#t6">6</a></span><span class="t"> <span class="nam">helper</span><span class="op">(</span><span class="num">6</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs6" /><span class="r"><label for="ctxs6" class="ctx">1 ctx</label></span><span class="ctxs">2</span></p>
<p class="pln"><span class="n"><a id="t7" href="#t7">7</a></span><span class="t">&nbsp;</span><span class="r"></span></p>
<p class="run"><span class="n"><a id="t8" href="#t8">8</a></span><span class="t"><span class="key">def</span> <span class="nam">test_two</span><span class="op">(</span><span class="op">)</span><span class="op">:</span>&nbsp;</span><span class="r"><label for="ctxs8" class="ctx">(empty)</label></span></p>
<p class="run"><span class="n"><a id="t9" href="#t9">9</a></span><span class="t"> <span class="nam">a</span> <span class="op">=</span> <span class="num">9</span>&nbsp;</span><input type="checkbox" id="ctxs9" /><span class="r"><label for="ctxs9" class="ctx">1 ctx</label></span><span class="ctxs"><span>two_tests.test_two</span></span></p>
<p class="run"><span class="n"><a id="t10" href="#t10">10</a></span><span class="t"> <span class="nam">b</span> <span class="op">=</span> <span class="num">10</span>&nbsp;</span><input type="checkbox" id="ctxs10" /><span class="r"><label for="ctxs10" class="ctx">1 ctx</label></span><span class="ctxs"><span>two_tests.test_two</span></span></p>
<p class="run"><span class="n"><a id="t11" href="#t11">11</a></span><span class="t"> <span class="key">if</span> <span class="nam">a</span> <span class="op">></span> <span class="num">11</span><span class="op">:</span>&nbsp;</span><input type="checkbox" id="ctxs11" /><span class="r"><label for="ctxs11" class="ctx">1 ctx</label></span><span class="ctxs"><span>two_tests.test_two</span></span></p>
<p class="run"><span class="n"><a id="t9" href="#t9">9</a></span><span class="t"> <span class="nam">a</span> <span class="op">=</span> <span class="num">9</span>&nbsp;</span><input type="checkbox" id="ctxs9" /><span class="r"><label for="ctxs9" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
<p class="run"><span class="n"><a id="t10" href="#t10">10</a></span><span class="t"> <span class="nam">b</span> <span class="op">=</span> <span class="num">10</span>&nbsp;</span><input type="checkbox" id="ctxs10" /><span class="r"><label for="ctxs10" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
<p class="run"><span class="n"><a id="t11" href="#t11">11</a></span><span class="t"> <span class="key">if</span> <span class="nam">a</span> <span class="op">></span> <span class="num">11</span><span class="op">:</span>&nbsp;</span><input type="checkbox" id="ctxs11" /><span class="r"><label for="ctxs11" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
<p class="mis show_mis"><span class="n"><a id="t12" href="#t12">12</a></span><span class="t"> <span class="nam">b</span> <span class="op">=</span> <span class="num">12</span>&nbsp;</span><span class="r"></span></p>
<p class="run"><span class="n"><a id="t13" href="#t13">13</a></span><span class="t"> <span class="key">assert</span> <span class="nam">a</span> <span class="op">==</span> <span class="op">(</span><span class="num">13</span><span class="op">-</span><span class="num">4</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs13" /><span class="r"><label for="ctxs13" class="ctx">1 ctx</label></span><span class="ctxs"><span>two_tests.test_two</span></span></p>
<p class="run"><span class="n"><a id="t14" href="#t14">14</a></span><span class="t"> <span class="key">assert</span> <span class="nam">b</span> <span class="op">==</span> <span class="op">(</span><span class="num">14</span><span class="op">-</span><span class="num">4</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs14" /><span class="r"><label for="ctxs14" class="ctx">1 ctx</label></span><span class="ctxs"><span>two_tests.test_two</span></span></p>
<p class="run"><span class="n"><a id="t15" href="#t15">15</a></span><span class="t"> <span class="nam">helper</span><span class="op">(</span>&nbsp;</span><input type="checkbox" id="ctxs15" /><span class="r"><label for="ctxs15" class="ctx">1 ctx</label></span><span class="ctxs"><span>two_tests.test_two</span></span></p>
<p class="run"><span class="n"><a id="t13" href="#t13">13</a></span><span class="t"> <span class="key">assert</span> <span class="nam">a</span> <span class="op">==</span> <span class="op">(</span><span class="num">13</span><span class="op">-</span><span class="num">4</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs13" /><span class="r"><label for="ctxs13" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
<p class="run"><span class="n"><a id="t14" href="#t14">14</a></span><span class="t"> <span class="key">assert</span> <span class="nam">b</span> <span class="op">==</span> <span class="op">(</span><span class="num">14</span><span class="op">-</span><span class="num">4</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs14" /><span class="r"><label for="ctxs14" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
<p class="run"><span class="n"><a id="t15" href="#t15">15</a></span><span class="t"> <span class="nam">helper</span><span class="op">(</span>&nbsp;</span><input type="checkbox" id="ctxs15" /><span class="r"><label for="ctxs15" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
<p class="pln"><span class="n"><a id="t16" href="#t16">16</a></span><span class="t"> <span class="num">16</span>&nbsp;</span><span class="r"></span></p>
<p class="pln"><span class="n"><a id="t17" href="#t17">17</a></span><span class="t"> <span class="op">)</span>&nbsp;</span><span class="r"></span></p>
<p class="pln"><span class="n"><a id="t18" href="#t18">18</a></span><span class="t">&nbsp;</span><span class="r"></span></p>
Expand All @@ -111,7 +118,7 @@ <h2>
<a id="nextFileLink" class="nav" href="index.html">&#xbb; next</a>
&nbsp; &nbsp; &nbsp;
<a class="nav" href="https://coverage.readthedocs.io/en/7.2.3a0.dev1">coverage.py v7.2.3a0.dev1</a>,
created at 2023-03-21 08:44 -0400
created at 2023-03-22 16:13 +0100
</p>
</div>
</footer>
Expand Down
2 changes: 1 addition & 1 deletion tests/gold/html/styled/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ kbd { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em

@media (prefers-color-scheme: dark) { #source p label.ctx { color: #777; } }

#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #d0e8ff; border-radius: .25em; margin-right: 1.75em; }
#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #d0e8ff; border-radius: .25em; margin-right: 1.75em; text-align: right; }

@media (prefers-color-scheme: dark) { #source p .ctxs { background: #056; } }

Expand Down