Improve code quality

Extract coverage column rendering into reusable Ruby helpers
(coverage_bar, coverage_cells, coverage_header_cells, file_data_attrs,
coverage_type_summary), reducing file_list.erb from 103 to 53 lines and
coverage_summary.erb from 32 to 5 lines. Remove unused
strength_css_class method, replace SHA1 with MD5 for HTML IDs, eliminate
@_summary instance-variable side-channel, and return placeholder HTML
instead of nil on encoding errors.

In TypeScript, add named constants for magic numbers, replace compare()
if-chain with lookup table, extract parseFilters() and initDarkMode(),
loop updateTotalsRow over dataAttrMap, move DOM elements into the dialog
instead of deep-cloning, debounce equalizeBarWidths with
requestAnimationFrame, cache visible file rows for keyboard navigation,
and use .includes() and tbody.append().

Author: sferik

lib/simplecov-html.rb

@@ -93,6 +93,7 @@ def formatted_source_file(source_file)
         template("source_file").result(binding)
       rescue Encoding::CompatibilityError => e
         puts "Encoding problems with file #{source_file.filename}. Simplecov/ERB can't handle non ASCII characters in filenames. Error: #{e.message}."
+        %(<div class="source_table" id="#{id(source_file)}"><div class="header"><h2>Encoding Error</h2><p>#{ERB::Util.html_escape(e.message)}</p></div></div>)
       end
 
       def formatted_file_list(title, source_files)

lib/simplecov-html/view_helpers.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
-require "digest/sha1"
+require "digest/md5"
 require "set"
 
 module SimpleCov
   module Formatter
     class HTMLFormatter
       # Helper methods used by ERB templates for rendering coverage data.
-      module ViewHelpers
+      module ViewHelpers # rubocop:disable Metrics/ModuleLength
         def line_status?(source_file, line)
           if branch_coverage? && source_file.line_with_missed_branch?(line.number)
             "missed-branch"
@@ -44,18 +44,8 @@ def coverage_css_class(covered_percent)
           end
         end
 
-        def strength_css_class(covered_strength)
-          if covered_strength > 1
-            "green"
-          elsif covered_strength == 1
-            "yellow"
-          else
-            "red"
-          end
-        end
-
         def id(source_file)
-          Digest::SHA1.hexdigest(source_file.filename)
+          Digest::MD5.hexdigest(source_file.filename)
         end
 
         def timeago(time)
@@ -83,8 +73,85 @@ def fmt(number)
           number.to_s.gsub(/(\d)(?=(\d{3})+(?!\d))/, '\\1,')
         end
 
+        def coverage_bar(pct)
+          css = coverage_css_class(pct)
+          width = Kernel.format("%.1f", pct.floor(1))
+          %(<div class="coverage-bar"><div class="coverage-bar__fill coverage-bar__fill--#{css}" style="width: #{width}%"></div></div>)
+        end
+
+        def coverage_cells(pct, covered, total, type:, totals: false) # rubocop:disable Metrics/MethodLength
+          css = coverage_css_class(pct)
+          if totals
+            bar_cls = "cell--bar t-totals__#{type}-bar"
+            pct_cls = "cell--pct strong t-totals__#{type}-pct #{css}"
+            num_cls = "cell--numerator strong t-totals__#{type}-num"
+            den_cls = "cell--denominator strong t-totals__#{type}-den"
+          else
+            bar_cls = "cell--bar"
+            pct_cls = "cell--pct cell--#{type}-pct #{css}"
+            num_cls = "cell--numerator"
+            den_cls = "cell--denominator"
+          end
+          pct_str = Kernel.format("%.2f", pct.floor(2))
+          pct_td = if totals
+                     %(<td class="#{pct_cls}">#{pct_str}%</td>)
+                   else
+                     %(<td class="#{pct_cls}" data-order="#{Kernel.format('%.2f', pct)}">#{pct_str}%</td>)
+                   end
+          %(<td class="#{bar_cls}">#{coverage_bar(pct)}</td>) +
+            pct_td +
+            %(<td class="#{num_cls}">#{fmt(covered)}/</td>) +
+            %(<td class="#{den_cls}">#{fmt(total)}</td>)
+        end
+
+        def coverage_header_cells(label, type, covered_label, total_label)
+          <<~HTML
+            <th class="cell--coverage" colspan="2">
+              <div class="th-with-filter">
+                <span class="th-label">#{label}</span>
+                <div class="col-filter__coverage">
+                  <select class="col-filter__op" data-type="#{type}"><option value="lt">&lt;</option><option value="lte" selected>&le;</option><option value="eq">=</option><option value="gte">&ge;</option><option value="gt">&gt;</option></select>
+                  <span class="col-filter__pct-wrap"><input type="number" class="col-filter__value" min="0" max="100" data-type="#{type}" value="100" step="any"></span>
+                </div>
+              </div>
+            </th>
+            <th class="cell--numerator">#{covered_label}</th>
+            <th class="cell--denominator">#{total_label}</th>
+          HTML
+        end
+
+        def file_data_attrs(source_file) # rubocop:disable Metrics/AbcSize
+          covered = source_file.covered_lines.count
+          relevant = covered + source_file.missed_lines.count
+          pairs = {"covered-lines" => covered, "relevant-lines" => relevant}
+          pairs["covered-branches"] = source_file.covered_branches.count if branch_coverage?
+          pairs["total-branches"] = source_file.total_branches.count if branch_coverage?
+          pairs["covered-methods"] = source_file.covered_methods.count if method_coverage?
+          pairs["total-methods"] = source_file.methods.count if method_coverage?
+          pairs.map { |k, v| %(data-#{k}="#{v}") }.join(" ")
+        end
+
+        def coverage_type_summary(type, label, summary, enabled:, **opts) # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
+          return disabled_summary(type, label) unless enabled
+
+          s = summary.fetch(type.to_sym)
+          pct = s.fetch(:pct)
+          covered = s.fetch(:covered)
+          total = s.fetch(:total)
+          missed = s.fetch(:missed)
+          css = coverage_css_class(pct)
+          parts = [
+            %(<div class="t-#{type}-summary">\n    #{label}: ),
+            %(<span class="#{css}"><b>#{Kernel.format('%.2f', pct.floor(2))}%</b></span>),
+            %(<span class="coverage-cell__fraction"> #{covered}/#{total} #{opts.fetch(:suffix, 'covered')}</span>),
+          ]
+          parts << missed_summary_html(missed, opts.fetch(:missed_class, "red"), opts.fetch(:toggle, false)) if missed.positive?
+          parts << "\n  </div>"
+          parts.join
+        end
+
         def coverage_summary(stats, show_method_toggle: false)
-          @_summary = {
+          _summary = {
             line: build_stats(stats.fetch(:covered_lines), stats.fetch(:total_lines)),
             branch: build_stats(stats.fetch(:covered_branches, 0), stats.fetch(:total_branches, 0)),
             method: build_stats(stats.fetch(:covered_methods, 0), stats.fetch(:total_methods, 0)),
@@ -97,6 +164,21 @@ def build_stats(covered, total)
           pct = total.positive? ? (covered * 100.0 / total) : 100.0
           {covered: covered, total: total, missed: total - covered, pct: pct}
         end
+
+      private
+
+        def disabled_summary(type, label)
+          %(<div class="t-#{type}-summary">\n    #{label}: <span class="coverage-disabled">disabled</span>\n  </div>)
+        end
+
+        def missed_summary_html(count, missed_class, toggle)
+          missed = if toggle
+                     %(<a href="#" class="t-missed-method-toggle"><b>#{count}</b> missed</a>)
+                   else
+                     %(<span class="#{missed_class}"><b>#{count}</b> missed</span>)
+                   end
+          %(<span class="coverage-cell__fraction">,</span>\n    #{missed})
+        end
       end
     end
   end