diff options
Diffstat (limited to 'coverage')
| -rw-r--r-- | coverage/html.py | 10 | ||||
| -rw-r--r-- | coverage/htmlfiles/coverage_html.js | 88 | ||||
| -rw-r--r-- | coverage/htmlfiles/style.css | 91 | ||||
| -rw-r--r-- | coverage/htmlfiles/style.scss | 332 |
4 files changed, 254 insertions, 267 deletions
diff --git a/coverage/html.py b/coverage/html.py index fc3bb364..253bda1c 100644 --- a/coverage/html.py +++ b/coverage/html.py @@ -199,10 +199,10 @@ class HtmlReporter(object): # 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") @@ -316,8 +316,6 @@ class HtmlReporter(object): 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" diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js index 2b32c391..4f6eb89e 100644 --- a/coverage/htmlfiles/coverage_html.js +++ b/coverage/htmlfiles/coverage_html.js @@ -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. @@ -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. @@ -306,9 +302,17 @@ 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 () { @@ -316,14 +320,14 @@ coverage.to_next_chunk = function () { // 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++; @@ -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(); @@ -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(); @@ -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); @@ -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"); } @@ -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) { @@ -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)); diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css index 83966952..e6e6dc42 100644 --- a/coverage/htmlfiles/style.css +++ b/coverage/htmlfiles/style.css @@ -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; } @@ -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%; } diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss index 168d6878..e9f49d88 100644 --- a/coverage/htmlfiles/style.scss +++ b/coverage/htmlfiles/style.scss @@ -115,50 +115,79 @@ h1 { } } +$pln-color: #ffffff; +$mis-color: #ffdddd; +$run-color: #ddffdd; +$exc-color: #eeeeee; +$par-color: #ffffaa; + +$off-button-lighten: 50%; + h2.stats { margin-top: .5em; font-size: 1em; } .stats span { border: 1px solid; - padding: .1em .25em; + border-radius: .1em; + padding: .1em .5em; margin: 0 .1em; cursor: pointer; - border-color: #999 #ccc #ccc #999; - - &.hide_run, &.hide_exc, &.hide_mis, &.hide_par, &.par.hide_run.hide_par { - border-color: #ccc #999 #999 #ccc; - } - &.par.hide_run { - border-color: #999 #ccc #ccc #999; - } + border-color: #ccc #999 #999 #ccc; &.run { - background: #ddffdd; - } - &.exc { - background: #eeeeee; + background: mix($run-color, #fff, $off-button-lighten); + &.show_run { + border-color: #999 #ccc #ccc #999; + background: $run-color; + } } &.mis { - background: #ffdddd; - } - &.hide_run { - background: #eeffee; - } - &.hide_exc { - background: #f5f5f5; + background: mix($mis-color, #fff, $off-button-lighten); + &.show_mis { + border-color: #999 #ccc #ccc #999; + background: $mis-color; + } } - &.hide_mis { - background: #ffeeee; + &.exc { + background: mix($exc-color, #fff, $off-button-lighten); + &.show_exc { + border-color: #999 #ccc #ccc #999; + background: $exc-color; + } } &.par { - background: #ffffaa; - } - &.hide_par { - background: #ffffcc; + background: mix($par-color, #fff, $off-button-lighten); + &.show_par { + border-color: #999 #ccc #ccc #999; + background: $par-color; + } } } +// Yellow post-it things. +%popup { + 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; +} + +// Yellow post-it's in the text listings. +%in-text-popup { + @extend %popup; + white-space: normal; + float: right; + top: 1.75em; + right: 1em; + height: auto; +} + // Help panel #keyboard_icon { float: right; @@ -167,24 +196,24 @@ h2.stats { } .help_panel { - position: absolute; - background: #ffffcc; + @extend %popup; padding: .5em; border: 1px solid #883; - display: none; -} -.indexfile .help_panel { - width: 20em; height: 4em; -} + .legend { + font-style: italic; + margin-bottom: 1em; + } -.pyfile .help_panel { - width: 16em; height: 8em; -} + .indexfile & { + width: 20em; + height: 4em; + } -.help_panel .legend { - font-style: italic; - margin-bottom: 1em; + .pyfile & { + width: 16em; + height: 8em; + } } #panel_icon { @@ -232,13 +261,8 @@ td.text { width: 100%; } -$mis-color: #ffdddd; -$run-color: #ddffdd; -$exc-color: #eeeeee; -$par-color: #ffffaa; - $hover-dark-amt: 95%; -$plain-hover-color: mix(#ffffff, #000, $hover-dark-amt); +$pln-hover-color: mix($pln-color, #000, $hover-dark-amt); $mis-hover-color: mix($mis-color, #000, $hover-dark-amt); $run-hover-color: mix($run-color, #000, $hover-dark-amt); $exc-hover-color: mix($exc-color, #000, $hover-dark-amt); @@ -252,50 +276,50 @@ $par-hover-color: mix($par-color, #000, $hover-dark-amt); position: relative; &:hover { - background: $plain-hover-color; + background: $pln-hover-color; } - &.mis { - background: $mis-color; - border-left: 2px solid #ff0000; + &.run { + border-left: 2px solid #00ff00; + &.show_run { + background: $run-color; - &:hover { - background: $mis-hover-color; + &:hover { + background: $run-hover-color; + } } } - &.run, &.run.hide_par { - background: $run-color; - border-left: 2px solid #00ff00; + &.mis { + border-left: 2px solid #ff0000; + &.show_mis { + background: $mis-color; - &:hover { - background: $run-hover-color; + &:hover { + background: $mis-hover-color; + } } } &.exc { - background: $exc-color; border-left: 2px solid #808080; + &.show_exc { + background: $exc-color; - &:hover { - background: $exc-hover-color; + &:hover { + background: $exc-hover-color; + } } } - &.par, &.par.hide_run { - background: $par-color; + &.par { border-left: 2px solid #eeee99; + &.show_par { + background: $par-color; - &:hover { - background: $par-hover-color; - } - } - - &.hide_run, &.hide_exc, &.hide_mis, &.hide_par, &.hide_run.hide_par { - background: inherit; - - &:hover { - background: $plain-hover-color; + &:hover { + background: $par-hover-color; + } } } } @@ -307,35 +331,21 @@ $par-hover-color: mix($par-color, #000, $hover-dark-amt); color: #666; float: right; padding-right: .5em; - } - p.hide_par span.annotate { display: none; } - span.annotate.long { - display: none; + p.show_par span.annotate { + display: inline; } - p:hover span.annotate.long { - display: block; + p.show_par span.annotate.long { + @extend %in-text-popup; 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; } -} + p.show_par:hover span.annotate.long { + display: block; + } -// Syntax coloring -.text { + // Syntax coloring .com { color: green; font-style: italic; @@ -363,24 +373,15 @@ td.contexts { background: #eee; } span.context-list { - display: none; + @extend %in-text-popup; + min-width: 30em; + + span.context-line { + display: block; + } } &: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; } span.context-button { display: inline-block; @@ -391,66 +392,63 @@ td.contexts { } } -span.context-list span.context-line { - display: block; -} - // index styles -#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 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, #index tr.total_dynamic { } // ??? +#index { + td, th { + text-align: right; + width: 5em; + padding: .25em .5em; + border-bottom: 1px solid #eee; + &.left { + padding-left: 0; + } + &.right { + padding-right: 0; + } + &.name { + text-align: left; + width: auto; + } + } + th { + font-style: italic; + color: #333; + border-bottom: 1px solid #ccc; + cursor: pointer; + &:hover { + background: #eee; + border-bottom: 1px solid #999; + } + &.headerSortDown, &.headerSortUp { + border-bottom: 1px solid #000; + white-space: nowrap; + background: #eee; + } + &.headerSortDown:after { + content: " ↓"; + } + &.headerSortUp:after { + content: " ↑"; + } + } + 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; + tr.total td, + tr.total_dynamic td { + font-weight: bold; + border-top: 1px solid #ccc; + border-bottom: none; + } + tr.file:hover { + background: #eeeeee; + td.name { + text-decoration: underline; + color: #000; + } + } } // scroll marker styles @@ -465,7 +463,7 @@ span.context-list span.context-line { will-change: transform; // for faster scrolling of fixed element in Chrome .marker { - background: #eedddd; + background: #ddd; position: absolute; min-height: 3px; width: 100%; |