Optimize simplecov-html for large coverage reports

A real-world coverage report with 1705 source files produces a **41MB
HTML file** (~1.9M lines) that causes significant browser slowdown:

- 96% of the file is the source files section (~41.3MB)
- 51% of that section is whitespace from ERB template formatting (~21MB)
- 142,254 `<li>` elements rendered into the DOM at page load (hidden)
- 142K event handlers individually bound to line number elements
- An unnecessary `<div>` wrapper around each `<li>` adds 142K extra DOM nodes

**ERB whitespace trimming** (`lib/simplecov-html.rb`, all `.erb` views)
- Add `trim_mode: '-'` to the ERB constructor
- Add `<%-` / `-%>` trim markers to control flow tags in all templates
- Eliminates ~21MB of blank lines produced by ERB conditionals/loops

**Remove `<div>` wrapper around `<li>`** (`views/source_file.erb`)
- These were semantically invalid inside `<ol>` and unnecessary
- Saves ~2.8MB and 142K DOM nodes

**Conditional `data-hits` attribute** (`views/source_file.erb`)
- Only emit `data-hits="N"` when `line.coverage` is truthy
- Previously emitted `data-hits=""` for ~83K "never" lines with no
  JS/CSS referencing the empty attribute

**Compact `covered_percent.erb`**
- Single-line template avoids multi-line whitespace across ~3,400 calls

**`<template>` tags for source files** (`views/layout.erb`)
- Each source file is wrapped in `<template id="tmpl-SHA1">`
- `<template>` content is parsed but NOT rendered into the DOM until
  explicitly activated — removes ~500K DOM nodes from initial page load

**Template materialization on demand** (`assets/javascripts/application.js`)
- New `materializeSourceFile()` function clones template content into
  the `.source_files` container when a file is first viewed
- Syntax highlighting applied on materialization (same deferred approach)
- All code paths updated: click, colorbox onLoad, popstate, deep links

**Event delegation for line number clicks** (`assets/javascripts/application.js`)
- Replaced direct binding on 142K elements with a single delegated
  event handler on `document`
- Required for `<template>` approach and eliminates 142K event bindings

Tested against a real coverage report with 1705 source files:

| Metric              | Before      | After     | Change       |
|---------------------|-------------|-----------|--------------|
| File size           | 41 MB       | 25 MB     | **-39%**     |
| Lines               | 1,944,847   | 573,916   | **-70%**     |
| Blank lines         | 1,090,596   | 3,578     | **-99.7%**   |
| `<div>` wrappers    | 142,255     | 2         | **-142,253** |
| `data-hits` attrs   | 142,253     | 59,101    | **-83,152**  |
| DOM nodes at load   | ~500K+      | ~few K    | deferred via `<template>` |
| Event bindings      | 142K        | 1         | delegated    |

The remaining 25MB is predominantly the actual source code content
inside `<li>` elements, which is irreducible.

| File | Changes |
|---|---|
| `lib/simplecov-html.rb` | `trim_mode: '-'` on ERB constructor |
| `views/source_file.erb` | Trim markers, remove `<div>`, conditional `data-hits` |
| `views/layout.erb` | Trim markers, `<template>` tags around source files |
| `views/file_list.erb` | Trim markers on control flow tags |
| `views/covered_percent.erb` | Single-line template |
| `assets/javascripts/application.js` | Template materialization, event delegation |
| `public/application.js` | Re-compiled asset |

- [x] `bundle exec rake test` passes
- [x] Generate a coverage report against a test project and compare HTML file size
- [x] Open in browser: file list loads, clicking a file shows source in modal
- [x] Line numbers are clickable and scroll to correct position
- [x] Syntax highlighting works on opened files
- [x] Back/forward navigation works correctly
- [x] Deep-linking to a specific file/line via URL hash works

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

assets/javascripts/application.js

@@ -8,19 +8,31 @@ $(document).ready(function () {
     paging: false
   });
 
-  // Syntax highlight all files up front - deactivated
-  // $('.source_table pre code').each(function(i, e) {hljs.highlightBlock(e, '  ')});
+  // Materialize a source file from its <template> tag into the .source_files container.
+  // Returns the materialized element, or the existing one if already materialized.
+  function materializeSourceFile(sourceFileId) {
+    var existing = document.getElementById(sourceFileId);
+    if (existing) return $(existing);
+
+    var tmpl = document.getElementById('tmpl-' + sourceFileId);
+    if (!tmpl) return null;
+
+    var clone = document.importNode(tmpl.content, true);
+    $('.source_files').append(clone);
+
+    var el = $('#' + sourceFileId);
+
+    // Apply syntax highlighting on first materialization
+    el.find('pre code').each(function (i, e) { hljs.highlightBlock(e, '  ') });
+    el.addClass('highlighted');
+
+    return el;
+  }
 
   // Syntax highlight source files on first toggle of the file view popup
   $("a.src_link").click(function () {
-    // Get the source file element that corresponds to the clicked element
-    var source_table = $($(this).attr('href'));
-
-    // If not highlighted yet, do it!
-    if (!source_table.hasClass('highlighted')) {
-      source_table.find('pre code').each(function (i, e) { hljs.highlightBlock(e, '  ') });
-      source_table.addClass('highlighted');
-    };
+    var sourceFileId = $(this).attr('href').substring(1);
+    materializeSourceFile(sourceFileId);
   });
 
   var prev_anchor;
@@ -36,6 +48,10 @@ $(document).ready(function () {
     onLoad: function () {
       prev_anchor = curr_anchor ? curr_anchor : window.location.hash.substring(1);
       curr_anchor = this.href.split('#')[1];
+
+      // Ensure the source file is materialized before colorbox tries to inline it
+      materializeSourceFile(curr_anchor.replace(/-L.*/, ''));
+
       window.location.hash = curr_anchor;
 
       $('.file_list_container').hide();
@@ -56,8 +72,8 @@ $(document).ready(function () {
     }
   });
 
-  // Set-up of anchor of linenumber
-  $('.source_table li[data-linenumber]').click(function () {
+  // Event delegation for line number clicks (works with template-materialized elements)
+  $(document).on('click', '.source_table li[data-linenumber]', function () {
     $('#cboxLoadedContent').scrollTop(this.offsetTop);
     var new_anchor = curr_anchor.replace(/-.*/, '') + '-L' + $(this).data('linenumber');
     window.location.replace(window.location.href.replace(/#.*/, '#' + new_anchor));
@@ -75,6 +91,10 @@ $(document).ready(function () {
         var ary = anchor.split('-L');
         var source_file_id = ary[0];
         var linenumber = ary[1];
+
+        // Materialize before opening colorbox
+        materializeSourceFile(source_file_id);
+
         $('a.src_link[href="#' + source_file_id + '"]').colorbox({ open: true });
         if (linenumber !== undefined) {
           $('#cboxLoadedContent').scrollTop($('#cboxLoadedContent .source_table li[data-linenumber="' + linenumber + '"]')[0].offsetTop);
@@ -123,11 +143,17 @@ $(document).ready(function () {
   if (window.location.hash) {
     var anchor = window.location.hash.substring(1);
     if (anchor.length === 40) {
+      // Materialize before clicking
+      materializeSourceFile(anchor);
       $('a.src_link[href="#' + anchor + '"]').click();
     } else if (anchor.length > 40) {
       var ary = anchor.split('-L');
       var source_file_id = ary[0];
       var linenumber = ary[1];
+
+      // Materialize before opening colorbox
+      materializeSourceFile(source_file_id);
+
       $('a.src_link[href="#' + source_file_id + '"]').colorbox({ open: true });
       // Scroll to anchor of linenumber
       $('#' + source_file_id + ' li[data-linenumber="' + linenumber + '"]').click();

lib/simplecov-html.rb

@@ -70,7 +70,7 @@ def output_message(result)
 
       # Returns the an erb instance for the template of given name
       def template(name)
-        @templates[name] ||= ERB.new(File.read(File.join(File.dirname(__FILE__), "../views/", "#{name}.erb")))
+        @templates[name] ||= ERB.new(File.read(File.join(File.dirname(__FILE__), "../views/", "#{name}.erb")), trim_mode: "-")
       end
 
       def output_path

public/application.js

@@ -1,3 +1 @@
-<span class="<%= coverage_css_class(percent) %>">
-  <%= sprintf("%.2f", percent.floor(2)) %>%
-</span>
+<span class="<%= coverage_css_class(percent) %>"><%= sprintf("%.2f", percent.floor(2)) %>%</span>

views/covered_percent.erb

@@ -25,16 +25,14 @@
     <span class="red"><b><%= source_files.missed_lines %></b> lines missed. </span>
     (<%= covered_percent(source_files.covered_percent) %>)
   </div>
-
-  <% if branchable_result? %>
-    <div class="t-branch-summary">
-      <span><b><%= source_files.total_branches %></b> total branches, </span>
-      <span class="green"><b><%= source_files.covered_branches %></b> branches covered</span> and
-      <span class="red"><b><%= source_files.missed_branches %></b> branches missed.</span>
-      (<%= covered_percent(source_files.branch_covered_percent) %>)
-    </div>
-  <% end %>
-
+<%- if branchable_result? -%>
+  <div class="t-branch-summary">
+    <span><b><%= source_files.total_branches %></b> total branches, </span>
+    <span class="green"><b><%= source_files.covered_branches %></b> branches covered</span> and
+    <span class="red"><b><%= source_files.missed_branches %></b> branches missed.</span>
+    (<%= covered_percent(source_files.branch_covered_percent) %>)
+  </div>
+<%- end -%>
   <div class="file_list--responsive">
     <table class="file_list">
       <thead>
@@ -46,32 +44,32 @@
           <th class="cell--number">Lines covered</th>
           <th class="cell--number">Lines missed</th>
           <th class="cell--number">Avg. Hits / Line</th>
-          <% if branchable_result? %>
-            <th class="cell--number">Branch Coverage</th>
-            <th class="cell--number">Branches</th>
-            <th class="cell--number">Covered branches</th>
-            <th class="cell--number">Missed branches </th>
-          <% end %>
+<%- if branchable_result? -%>
+          <th class="cell--number">Branch Coverage</th>
+          <th class="cell--number">Branches</th>
+          <th class="cell--number">Covered branches</th>
+          <th class="cell--number">Missed branches </th>
+<%- end -%>
         </tr>
       </thead>
       <tbody>
-        <% source_files.each do |source_file| %>
-          <tr class="t-file">
-            <td class="strong t-file__name"><%= link_to_source_file(source_file) %></td>
-            <td class="strong cell--number t-file__coverage"><%= covered_percent(source_file.covered_percent) %></td>
-            <td class="cell--number"><%= source_file.lines.count %></td>
-            <td class="cell--number"><%= source_file.covered_lines.count + source_file.missed_lines.count %></td>
-            <td class="cell--number"><%= source_file.covered_lines.count %></td>
-            <td class="cell--number"><%= source_file.missed_lines.count %></td>
-            <td class="cell--number"><%= sprintf("%.2f", source_file.covered_strength) %></td>
-            <% if branchable_result? %>
-              <td class="strong cell--number t-file__branch-coverage"><%= covered_percent(source_file.branches_coverage_percent) %></td>
-              <td class="cell--number"><%= source_file.total_branches.count %></td>
-              <td class="cell--number"><%= source_file.covered_branches.count %></td>
-              <td class="cell--number"><%= source_file.missed_branches.count %></td>
-            <% end %>
-          </tr>
-        <% end %>
+<%- source_files.each do |source_file| -%>
+        <tr class="t-file">
+          <td class="strong t-file__name"><%= link_to_source_file(source_file) %></td>
+          <td class="strong cell--number t-file__coverage"><%= covered_percent(source_file.covered_percent) %></td>
+          <td class="cell--number"><%= source_file.lines.count %></td>
+          <td class="cell--number"><%= source_file.covered_lines.count + source_file.missed_lines.count %></td>
+          <td class="cell--number"><%= source_file.covered_lines.count %></td>
+          <td class="cell--number"><%= source_file.missed_lines.count %></td>
+          <td class="cell--number"><%= sprintf("%.2f", source_file.covered_strength) %></td>
+<%- if branchable_result? -%>
+          <td class="strong cell--number t-file__branch-coverage"><%= covered_percent(source_file.branches_coverage_percent) %></td>
+          <td class="cell--number"><%= source_file.total_branches.count %></td>
+          <td class="cell--number"><%= source_file.covered_branches.count %></td>
+          <td class="cell--number"><%= source_file.missed_branches.count %></td>
+<%- end -%>
+        </tr>
+<%- end -%>
       </tbody>
     </table>
   </div>

views/file_list.erb

@@ -18,10 +18,9 @@
 
       <div id="content">
         <%= formatted_file_list("All Files", result.source_files) %>
-
-        <% result.groups.each do |name, files| %>
-          <%= formatted_file_list(name, files) %>
-        <% end %>
+<%- result.groups.each do |name, files| -%>
+        <%= formatted_file_list(name, files) %>
+<%- end -%>
       </div>
 
       <div id="footer">
@@ -31,9 +30,11 @@
       </div>
 
       <div class="source_files">
-      <% result.source_files.each do |source_file| %>
-        <%= formatted_source_file(source_file) %>
-      <% end %>
+<%- result.source_files.each do |source_file| -%>
+        <template id="tmpl-<%= id(source_file) %>">
+          <%= formatted_source_file(source_file) %>
+        </template>
+<%- end -%>
       </div>
     </div>
   </body>

views/layout.erb

@@ -5,53 +5,42 @@
       <%= covered_percent(source_file.covered_percent) %>
       lines covered
     </h4>
-
-    <% if branchable_result? %>
-      <h4>
-        <%= covered_percent(source_file.branches_coverage_percent) %>
-        branches covered
-      </h4>
-    <% end %>
-
+<%- if branchable_result? -%>
+    <h4>
+      <%= covered_percent(source_file.branches_coverage_percent) %>
+      branches covered
+    </h4>
+<%- end -%>
     <div class="t-line-summary">
       <b><%= source_file.lines_of_code %></b> relevant lines.
       <span class="green"><b><%= source_file.covered_lines.count %></b> lines covered</span> and
       <span class="red"><b><%= source_file.missed_lines.count %></b> lines missed.</span>
     </div>
-
-    <% if branchable_result? %>
-      <div class="t-branch-summary">
-          <span><b><%= source_file.total_branches.count %></b> total branches, </span>
-          <span class="green"><b><%= source_file.covered_branches.count %></b> branches covered</span> and
-          <span class="red"><b><%= source_file.missed_branches.count %></b> branches missed.</span>
-      </div>
-    <% end %>
-
+<%- if branchable_result? -%>
+    <div class="t-branch-summary">
+        <span><b><%= source_file.total_branches.count %></b> total branches, </span>
+        <span class="green"><b><%= source_file.covered_branches.count %></b> branches covered</span> and
+        <span class="red"><b><%= source_file.missed_branches.count %></b> branches missed.</span>
+    </div>
+<%- end -%>
   </div>
-
   <pre>
     <ol>
-      <% source_file.lines.each do |line| %>
-        <div>
-          <li class="<%= line_status?(source_file, line) %>" data-hits="<%= line.coverage ? line.coverage : '' %>" data-linenumber="<%= line.number %>">
-            <% if line.covered? %>
-              <span class="hits"><%= line.coverage %></span>
-            <% elsif line.skipped? %>
-              <span class="hits">skipped</span>
-            <% end %>
-
-            <% if branchable_result? %>
-              <% source_file.branches_for_line(line.number).each do |branch_type, hit_count| %>
-                <span class="hits" title="<%= branch_type%> branch hit <%= hit_count %> times">
-                  <%= branch_type %>: <%= hit_count %>
-                </span>
-              <% end %>
-            <% end %>
-
-            <code class="ruby"><%= ERB::Util.html_escape(line.src.chomp) %></code>
-          </li>
-        </div>
-      <% end %>
+<%- source_file.lines.each do |line| -%>
+      <li class="<%= line_status?(source_file, line) %>"<%= " data-hits=\"#{line.coverage}\"" if line.coverage %> data-linenumber="<%= line.number %>">
+<%- if line.covered? -%>
+        <span class="hits"><%= line.coverage %></span>
+<%- elsif line.skipped? -%>
+        <span class="hits">skipped</span>
+<%- end -%>
+<%- if branchable_result? -%>
+<%- source_file.branches_for_line(line.number).each do |branch_type, hit_count| -%>
+        <span class="hits" title="<%= branch_type%> branch hit <%= hit_count %> times"><%= branch_type %>: <%= hit_count %></span>
+<%- end -%>
+<%- end -%>
+        <code class="ruby"><%= ERB::Util.html_escape(line.src.chomp) %></code>
+      </li>
+<%- end -%>
     </ol>
   </pre>
 </div>