Conversation
* 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.
|
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 |
* 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
|
@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. ) |
* 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"
|
@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. |



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!