Conversation
|
If anyone wants to test this design in their codebase, replace the existing gem "simplecov", git: "https://github.com/simplecov-ruby/simplecov.git"
gem "simplecov-html", git: "https://github.com/simplecov-ruby/simplecov-html.git", branch: "modernize-ui"Then |
|
I can barely read new images of the UI design. Perhaps if I zoom them it would be better, but I am pretty sure I can read the old one even from mobile phone screen. But I guess color themes and contrast is bike shedding. For the content I would replace "All" with something like "7/7 files" covered. |
|
The same for lines. Lines "20 (6/8 relevant) covered". The progress bar on 100% is shorter than on 75%, wat. Gray color of the progress bar doesn't help page scanning. |
And maybe clicking on that could give a |
|
@abitrolly Thanks for your feedback. I’ve removed the coverage bar and updated the summary stats to show covered/total ratios. I’ve updated the screenshots above, so you can have another look.
I’d like to keep this PR focused on redesigning the existing feature set. After it’s merged, I’d be happy to consider new features like a |
|
@sferik I might be picky, but contrast now looks much better. I still find "All Files" non-informative. Should it be the project name with branch and revision? I don't know, but that would be useful. Fast switch between tabs to visually compare differences. Search bar at the top to save vertical space is a good move. I actually liked the bars. They give good overview how much a files is covered without reading the text. The best screaming use of them I've seen is here. Along with 5/55 lines covered. 
In the new design the percentage value is too far to the right to connect it to the file name. It is useful if I want to find "what files are still not covered" and less suitable for "see how files are covered in order". "6 missing" for some reason sounds better that "6 missed". I can produce these comments endlessly, but I don't see the point. The tool does it job with any design out there. ) |
|
@abitrolly I’ve restored the bar, matching the color and percentage of the “Coverage” column. It also takes up a variable width, pushing the “Coverage” column closer to file name. On narrow devices (< 640px), it disappears completely. I’ve also changed “missed” to “missing” and changed the color thresholds to match LCOV. See screenshots below: 
Hopefully you can see that your comments have been useful in making this design better. I’d value your additional feedback, but obviously you don’t have to if you don’t want to. |
|
Very nice! One glitch, though, a double scrollbar in the file view: 
That can be avoided with |
|
@sferik looks good now. One question though - does it really search files, or just filters them by name? If filters, then maybe say so, and add |
|
@cboos I’ve fixed the scrolling bug that you reported. Good find! Thanks so much for reporting it. @abitrolly Here’s my latest revision that I believe incorporates your feedback. All the functionality (filtering, summary, etc.) is now incorporated into the main table. I’m pretty happy with how much simpler it is and how it all came together, but I’m open to additional feedback if you have any, especially on the source page, which I’ve spent less time refining or unifying with the main page (table view). 
Here's what it looks like with a filter applied: 
I’ve also dropped a ton of dependencies: jQuery, DataTables, and timeago, reducing the payload by 90%. I’ve also simplified the build pipeline, dropping Sprockets, Uglifier, and SASS. All JavaScript is now TypeScript that compiles and minifies in 2ms. |
sferik
force-pushed
the
modernize-ui
branch
3 times, most recently
from
7c02da4 to
d5ab84c
Compare
|
I’m sure this can be improved and iterated upon further, but I feel like it’s better than the existing version, so if there‘s no additional feedback before tomorrow, I’m planning to merge it. |
|
@sferik there is still too much empty space between filenames and bars, The percentage and counter columns are not vertically aligned. "Search files" I would rename to "Filter paths" and show "3/7 files visible". With some reactivity, counters may change too, but that would no longer be a redesign. :D And the total stats in table header may use bold font, or maybe border around the cell. |
|
The source page is completely another beast. If horizontal space allows, I would annotate the line with the test name that covers it. And also showed performance bottlenecks by colored vertical bar. Links to actual source, revision and tests to edit would be extremely helpful. Colors... well, maybe I would try to experiment with making irrelevant lines faded/gray, covered - normal, and uncovered highlighted. Reading greenish source is awkward. |
|
I'm not really a contributor to the project and only an occasional user of simplecov-html, but since I tested the branch (latest d5ab84c), here are my 2 cents: I find the balance of text/whitespace quite good as it is now, the page is dense enough; it's a huge leap forward, so I think it makes sense to merge that state already and think about further improvements on top of that. 
|
There are some interesting ideas here but they are out of scope for a UI redesign. Feel free to open separate issues for them or submit separate PRs. I’m working on some of your other suggestions now… |
|
@abitrolly Here’s the latest: 
Main changes:
I’ll wait another ~24 hours to see if you or anyone else has any more feedback before merging. |
* Replace Blueprint CSS reset with modern reset * Rewrite stylesheet with design tokens, system fonts, refined light/dark themes, and better contrast ratios * Replace jQuery Colorbox lightbox with native <dialog> element * Add inline coverage bar visualization to file list rows * Add ARIA attributes and proper HTML5 semantics * Remove colorbox, jquery-ui, and DataTables sort images * CSS-only sort indicators for DataTables columns Compiled assets drop from 336KB to 218KB. Closes #65.
* Show covered/total ratios in summary stats, hide zero-miss counts * Increase font sizes ~20% and boost contrast across both themes * Remove coverage bars from file list table * Move search box into header row next to title with placeholder * Fix tab system to work with new header nesting
* Coverage bar in its own column with proportional fill (100% = full width) * Bar color matches percentage text: green >= 90%, yellow >= 75%, red < 75% * Bar column hidden on mobile (< 640px) * Change "missed" to "missing"
* Replace separate summary stats with a totals row at the top of the table that uses the same bar+%+fraction format as data rows * Inline column filters: file name search and per-coverage-type percentage threshold filters with comparator dropdowns * Totals row updates live when filtering or searching * "/" keyboard shortcut to focus search * Fix double scrollbar when source dialog is open * Fix column sorting with filter controls in header
Replace dependencies with ~80 lines of custom sorting, filtering, and relative time logic. Compiled JS drops from 191KB to 21KB. Total assets drop from 218KB to 40KB.
* Remove Sprockets, Uglifier, and sass gem dependencies * esbuild compiles TypeScript directly and minifies in 2ms
* Update highlight.js from pre-2015 to v11.11.1 * Add package.json with bun lockfile for esbuild, highlight.js, TypeScript * Add tsconfig.json for editor/LSP support with strict mode * Add bin/setup script for one-command dev environment setup * Split CI: test.yml, typecheck.yml (bun), gem_push.yml (Sigstore signing) * Add npm ecosystem to dependabot.yml * gemspec: opt-in file list, add metadata URIs, remove stale references * Rewrite README with current setup and development instructions * Update copyright to 2010-2026 Christoph Olszowka and Erik Berlin
* Add mutant-minitest and .mutant.yml targeting all HTMLFormatter methods * Add mutant CI workflow and rake task * Split tests into test_view_helpers.rb and test_formatter.rb * Enable method coverage enforcement when Ruby/SimpleCov support it * Fix warning: suppress method redefinition in test spies * Fix warning: use @_summary ivar instead of locals for ERB binding * Remove redundant respond_to? guard for method_coverage?
* Split coverage fractions into numerator/denominator columns for vertical alignment of the "/" separator (colspan 4 per coverage group) * Add fmt() helper for comma-separated numbers (e.g. 2,252) * Pluralize "file" vs "files" when filtering * Hide bars if < 100px available, cap at 200px max * All bars forced to identical width via min/max/width lock
* Bar and percentage in separate td columns under colspan=2 header so bars align vertically regardless of percentage text width * Colspan reduces to 1 when bars are hidden on narrow viewports * Reduce all table cell padding from 12px to 8px to reclaim space
|
I’ve spent a little more time noodling on this. Here’s the latest: 
I made the maximum bar width a bit longer (240px), so it better “connects” the file name with the data. I also made “Lines Covered” its own column instead of including it in the “Line Coverage” column. This has a couple benefits: it is now independently sortable and it seemed redundant to have the ”Relevant Lines” column right after the coverage fraction, since the denominator was the same “Relevant Lines” number. Now it looks like a fraction, but it’s actually two separate columns with “Lines Covered” aligned right and “Relevant Lines” aligned right, so the slash (“/”) will always be vertically aligned. I’m quite happy with this design revision and will merge it tomorrow unless there is more feedback. I’d encourage everyone to test it out on their own codebase and report any issues. Again, here are the instructions to do so: gem "simplecov", git: "https://github.com/simplecov-ruby/simplecov.git"
gem "simplecov-html", git: "https://github.com/simplecov-ruby/simplecov-html.git", branch: "modernize-ui"Then |
File list: * j/k to move between rows * Enter to open focused file * Escape to clear focus or blur inputs Source view: * n to jump to next missed line * p/N to jump to previous missed line * Escape to close dialog
|
I'll test in my setup with branch coverage, but I fear that having "Lines Covered : Relevant Lines" might be too much when you have it two times... Right... this is how it looks, it needs now more horizontal space, and even as it expands (horiz. scrollbar), it won't expand enough to show the "progress bars". 
The bars only appear at over ~ 1600px... that's a bit too much: 
It looks better with "Covered : Lines" and "Covered : Branch" tweaks, to make these columns narrower, and... a zoom of 67% (that's too much, at 75% the fonts look better, but then the bars disappear again). 
Well, we all have widescreens now, don't we? ;-) But still, I only noticed that with the latest version (9a8dd57, the legend is a nice touch, btw!), so it was better earlier for that aspect. If you could maybe give it one more round to account for narrower screens, it would be great! |
|
@cboos Thank you for testing. This is exactly the type of feedback I was asking for. I will make this change and ask you to test it one more time. Thanks again! |
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().
sferik
force-pushed
the
modernize-ui
branch
3 times, most recently
from
1cae877 to
062d8d2
Compare
|
@cboos Okay, can you please try again now and post the results? |
|
It's much better, indeed! The bars don't disappear anymore, and the layout responds nicely if I zoom out: 
All good from my side! |
|
Thanks for verifying! I”m going merge it now! |
3 participants
This is pretty much a complete rewrite of the UI, so instead of looking at diffs, it might be more helpful to look at screenshots.
Here is how it looked before, for reference:
Here is the new design in light mode:
And here is the new design in dark mode:
Feedback welcome!