Source code without tables

3 files changed, 154 insertions, 142 deletions

diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js
index 4f6eb89e..22152333 100644
--- a/coverage/htmlfiles/coverage_html.js
+++ b/coverage/htmlfiles/coverage_html.js
@@ -231,7 +231,7 @@ coverage.index_ready = function ($) {
 coverage.pyfile_ready = function ($) {
     // If we're directed to a particular line number, highlight the line.
     var frag = location.hash;
-    if (frag.length > 2 && frag[1] === 'n') {
+    if (frag.length > 2 && frag[1] === 't') {
         $(frag).addClass('highlight');
         coverage.set_sel(parseInt(frag.substr(2), 10));
     }
@@ -512,7 +512,7 @@ coverage.finish_scrolling = function () {
 coverage.init_scroll_markers = function () {
     var c = coverage;
     // Init some variables
-    c.lines_len = $('td.text p').length;
+    c.lines_len = $('#source p').length;
     c.body_h = $('body').height();
     c.header_h = $('div#header').height();
 
@@ -526,7 +526,7 @@ coverage.build_scroll_markers = function () {
         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');
+    c.lines_to_mark = $('#source').find('p.show_run, p.show_mis, p.show_exc, 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) {
diff --git a/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html
index d4a86ff3..2154c06c 100644
--- a/coverage/htmlfiles/pyfile.html
+++ b/coverage/htmlfiles/pyfile.html
@@ -68,45 +68,26 @@
 </div>
 
 <div id="source">
-    <table>
-        <tr>
-            <td class="linenos">
-{% for line in lines -%}
-    <p id="n{{line.number}}" class="{{line.css_class}}"><a href="#n{{line.number}}">{{line.number}}</a></p>
-{% endfor %}
-            </td>
-            <td class="text">
-{# These are the source lines, which are very sensitive to whitespace. -#}
-{# The `{ # - # }` below are comments which slurp up the following space. -#}
-{% for line in lines -%}
-    <p id="t{{line.number}}" class="{{line.css_class}}">{#-#}
-        {% if line.annotate -%}
-            <span class="annotate short">{{line.annotate}}</span>{#-#}
-            <span class="annotate long">{{line.annotate_long}}</span>{#-#}
-        {% endif -%}
-        {{line.html}}<span class="strut">&nbsp;</span>{#-#}
-    </p>
-{% endfor %}
-            </td>
-            {% if show_contexts -%}
-            <td class="contexts">
-              {% for line in lines -%}
-                <p>{#-#}
-                  {% if line.contexts -%}
-                    <span class="context-button">{{ line.contexts|len }} ctx</span>{#-#}
-                    <span class="context-list">
-                      {% for context in line.contexts -%}
-                      <span class="context-line">{{context}}</span>{#-#}
-                      {% endfor -%}
-                    </span>{#-#}
-                  {% endif -%}
-                  &nbsp;
-                </p>{#-#}
-              {% endfor %}
-            </td>
-            {% endif %}
-        </tr>
-    </table>
+    {# These are the source lines, which are very sensitive to whitespace. -#}
+    {# The `{ # - # }` below are comments which slurp up the following space. -#}
+    {% for line in lines -%}
+        <p id="t{{line.number}}" class="{{line.css_class}}">{#-#}
+            <span class="n"><a href="#t{{line.number}}">{{line.number}}</a></span>{#-#}
+            <span class="t">{{line.html}}&nbsp;</span>{#-#}
+            {% if line.annotate -%}
+                <span class="annotate short">{{line.annotate}}</span>{#-#}
+                <span class="annotate long">{{line.annotate_long}}</span>{#-#}
+            {% endif -%}
+            {% if line.contexts -%}
+                <span class="context-button">{{ line.contexts|len }} ctx</span>{#-#}
+                <span class="context-list">
+                    {% for context in line.contexts -%}
+                        <span class="context-line">{{context}}</span>{#-#}
+                    {% endfor -%}
+                </span>{#-#}
+            {% endif -%}
+        </p>
+    {% endfor %}
 </div>
 
 <div id="footer">
diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index e9f49d88..33ec38e4 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -6,15 +6,20 @@
 // When you edit this file, you need to run "make css" to get the CSS file
 // generated, and then check in both the .scss and the .css files.
 
+// When working on the file, this command is useful:
+//      sass --watch --style=compact --sourcemap=none --no-cache coverage/htmlfiles/style.scss:htmlcov/style.css
+
 // Ignore this comment, it's for the CSS output file:
 /* Don't edit this .css file. Edit the .scss file instead! */
 
+// Dimensions
+$left-gutter: 3rem;
+
 // Page-wide styles
 html, body, h1, h2, h3, p, table, td, th {
     margin: 0;
     padding: 0;
     border: 0;
-    outline: 0;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
@@ -70,11 +75,6 @@ a.nav {
     border-bottom: 1px solid #eee;
 }
 
-#source {
-    padding: 1em;
-    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-}
-
 .indexfile #footer {
     margin: 1em 3em;
 }
@@ -97,7 +97,7 @@ a.nav {
 
 /* Header styles */
 #header .content {
-    padding: 1em 3em;
+    padding: 1em $left-gutter;
 }
 
 h1 {
@@ -235,31 +235,6 @@ h2.stats {
 }
 
 // Source file styles
-.linenos p {
-    text-align: right;
-    margin: 0;
-    padding: 0 .5em;
-    color: #999999;
-    font-family: verdana, sans-serif;
-
-    &.highlight {
-        background: #ffdd00;
-    }
-    a {
-        text-decoration: none;
-        color: #999999;
-        font-size: .8333em;   // 10/12
-        line-height: 1em;
-        &:hover {
-            text-decoration: underline;
-            color: #999999;
-        }
-    }
-}
-
-td.text {
-    width: 100%;
-}
 
 $hover-dark-amt: 95%;
 $pln-hover-color: mix($pln-color, #000, $hover-dark-amt);
@@ -267,99 +242,155 @@ $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);
 $par-hover-color: mix($par-color, #000, $hover-dark-amt);
+$border-indicator-width: .2em;
 
-.text p {
-    margin: 0;
-    padding: 0 0 0 .5em;
-    border-left: 2px solid #ffffff;
-    white-space: pre;
-    position: relative;
+#source {
+    padding: 1em 0 1em $left-gutter;
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
 
-    &:hover {
-        background: $pln-hover-color;
-    }
+    p {
+        /* position relative makes position:absolute pop-ups appear in the right place. */
+        position: relative;
+        white-space: pre;
+
+        .n {
+            float: left;
+            text-align: right;
+            width: $left-gutter;
+            box-sizing: border-box;
+            margin-left: -$left-gutter;
+            padding-right: 1em;
+            color: #999999;
+            font-family: verdana, sans-serif;
+
+            a {
+                text-decoration: none;
+                color: #999999;
+                font-size: .8333em;   // 10/12
+                line-height: 1em;
+                &:hover {
+                    text-decoration: underline;
+                    color: #999999;
+                }
+            }
+        }
 
-    &.run {
-        border-left: 2px solid #00ff00;
-        &.show_run {
-            background: $run-color;
+        &.highlight .n {
+            background: #ffdd00;
+        }
+
+        .t {
+            display: inline-block;
+            width: 100%;
+            box-sizing: border-box;
+            margin-left: -.5em;
+            padding-left: .5em - $border-indicator-width;
+            border-left: $border-indicator-width solid white;
 
             &:hover {
-                background: $run-hover-color;
+                background: $pln-hover-color;
+            }
+            // Syntax coloring
+            .com {
+                color: green;
+                font-style: italic;
+                line-height: 1px;
+            }
+            .key {
+                font-weight: bold;
+                line-height: 1px;
+            }
+            .str {
+                color: #000080;
             }
         }
-    }
 
-    &.mis {
-        border-left: 2px solid #ff0000;
-        &.show_mis {
-            background: $mis-color;
+        &.mis {
+            .t {
+                border-left: $border-indicator-width solid #ff0000;
+            }
 
-            &:hover {
-                background: $mis-hover-color;
+            &.show_mis .t {
+                background: $mis-color;
+
+                &:hover {
+                    background: $mis-hover-color;
+                }
             }
         }
-    }
 
-    &.exc {
-        border-left: 2px solid #808080;
-        &.show_exc {
-            background: $exc-color;
+        &.run {
+            .t {
+                border-left: $border-indicator-width solid #00ff00;
+            }
 
-            &:hover {
-                background: $exc-hover-color;
+            &.show_run .t {
+                background: $run-color;
+
+                &:hover {
+                    background: $run-hover-color;
+                }
             }
         }
-    }
 
-    &.par {
-        border-left: 2px solid #eeee99;
-        &.show_par {
-            background: $par-color;
+        &.exc {
+            .t {
+                border-left: $border-indicator-width solid #808080;
+            }
 
-            &:hover {
-                background: $par-hover-color;
+            &.show_exc .t {
+                background: $exc-color;
+
+                &:hover {
+                    background: $exc-hover-color;
+                }
             }
         }
-    }
-}
 
+        &.par {
+            .t {
+                border-left: $border-indicator-width solid #eeee99;
+            }
 
-.text {
-    span.annotate {
-        font-family: georgia;
-        color: #666;
-        float: right;
-        padding-right: .5em;
-        display: none;
-    }
-    p.show_par span.annotate {
-        display: inline;
-    }
-    p.show_par span.annotate.long {
-        @extend %in-text-popup;
-        max-width: 50%;
-        width: 30em;
-    }
-    p.show_par:hover span.annotate.long {
-        display: block;
-    }
+            &.show_par .t {
+                background: $par-color;
 
-    // Syntax coloring
-    .com {
-        color: green;
-        font-style: italic;
-        line-height: 1px;
-    }
-    .key {
-        font-weight: bold;
-        line-height: 1px;
-    }
-    .str {
-        color: #000080;
+                &:hover {
+                    background: $par-hover-color;
+                }
+            }
+
+            span.annotate {
+                &.short {
+                    display: inline;
+                    position: absolute;
+                    right: 1.5em;
+                }
+
+                &.long {
+                    @extend %in-text-popup;
+                    max-width: 50%;
+                    width: 30em;
+                    right: 2.5em;
+                }
+            }
+
+            &:hover span.annotate.long {
+                display: block;
+            }
+        }
+
+
+        span.annotate {
+            font-family: georgia;
+            color: #666;
+            float: right;
+            padding-right: .5em;
+        }
     }
 }
 
+
 // Line contexts
 td.contexts {
     p {