HTML Reporter: QUnit 3.0 theme structure and layout #1774
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@IgnaceMaes I'd value your feedback on this, as author of qunit-theme-ember! For this PR, I'm focussing on the structure and layout. After this, I'm also interested in giving QUnit a new paint job for the QUnit 3.0 release. Possibly similar to qunit-theme-ember, or perhaps based on the colors of https://qunitjs.com. Thoughts, questions, concerns, and ideas are most welcome! |
Krinkle
changed the title
Should the UA string be in the same darkened style? 
|
Notable design changes: * Edge to edge design. Remove body margin (browser default), remove rounded corners. * Progress bar. The qunit-banner was previously blank until it turns green/red. Test execution is now animated with a blue progress bar. * Adopt system-ui fonts, remove any text shadows. * Sticky header reduced to toolbar. Re-implemented using `position: sticky`, to create a normal page-level scrollbar instead of a scrollable area. The rest of the page naturally flows under it. This fixes various layout quirks, with custom elements no longer squished or pushed outside the viewport. This is similar to how things rendered prior to QUnit 2.14. The sticky part now excludes the page title and user agent, making more optimal use of vertical space. * Move "Abort" button to the left. This previously floated in a somewhat-random position on the right. The toolbar now occupies the same height during the "running" and "completed" state, avoiding a visible layout shift. * Remove 2px offset hack from checkboxes to make them vertically aligned. Other changes: * `#qunit-userAgent` is now DIV rather than H2, placed above #qunit-testrunner-toolbar instead of below it. * `#qunit-toolbar` now parents `#qunit-banner`, `#qunit-testresult`, and `#qunit-filteredTest`. * `#qunit-header` now parents `H1` and `#qunit-userAgent`. * The `#qunit-modulefilter-actions` buttons are now ordered in a more natural way in the DOM. Previously, the order was reversed, with the default theme using float: right to reverse them. To achieve right-aligned buttons like before, one could set `text-align: right` on `.qunit-modulefilter-actions`. * The `.qunit-skipped-label` and `.qunit-todo-label` elements, which are palced before TODO/SKIP test titles, now include a space between the label and the test title. This means the word "skipped" and the first word of the test title no longer get presented semantically as one word with intra-word styling (e.g. to a screen reader, or when copying selected text). This also removes the need for margin-right hack in the theme. Fixed bug: * Assertion counts the parentheses of `#qunit-test` items were double-bolded, and on failing tests the numbers were tripple-bolded. In browsers/fonts that support "bolder" (e.g. Firefox) this resulted in an ever-wider font. Changed `<b>` to `<span>` given they are already inside a `<strong>`. Closes qunitjs#1774.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This may be a breaking change for themes that rely on the default HTML as created by a
<div id="qunit">element. The changes are fairly small but they could break certain theme layouts. If you prefer the old structure, replace<div id="qunit">with the following instead:Notable changes:
(Design) Test execution is now animated with a progress bar in the qunit-banner.
(Design) Edge to edge design. Remove body margin (browser default), remove rounded corners.
(Design) Adopt
system-uifonts, remove any text shadows(Design) Sticky element is now reduced to just the toolbar. Now implemented with
position: sticky;. This means we now have a normal page-level scrollbar instead of a scrollable area. The rest of the page naturally flows under it. This fixes various layout quirks, with extra elements no longer squished or pushed outside the viewport. This is similar to how things rendered prior to QUnit 2.14, and fixes HTML Reporter since 2.14.0 doesn't add "flowing" elements to the page #1603 (ping @smcclure15).The sticky header excludes the page title and user agent, making more optimal use of vertical space.
(Design) Move "Abort" button to the left. And make sure the toolbar display occupies the same height during the "running" and "completed" state, to avoid a visible layout shift.
(Design) Remove 2px offset hack from checkboxes to make them vertically aligned.
#qunit-userAgentis now DIV rather than H2, and placed above#qunit-testrunner-toolbarinstead of below it.#qunit-banner,#qunit-testresult,#qunit-filteredTestare now inside#qunit-toolbar.The
#qunit-modulefilter-actionselement is now ordered in a more natural way. Previously, the order was reversed in HTML, with the default theme usingfloat: rightto re-order them.To achieve right-aligned buttons like before, one could set
text-align: righton.qunit-modulefilter-actions.The
.qunit-skipped-labeland.qunit-todo-labelelements are inserted before a TODO/SKIP test title. These now include a space in the HTML between the label and the test title.This means the word "skipped" and the first word of the test title no longer get presented semantically as one word with intra-word styling (e.g. to a screen reader, or when copying selected text). This also removes the need for margin-right hack in the theme.
Fixes #1603.
At small screens / tiny embedded demo on the homepage, difference between 2.21.0 and
this PR3.0.0-alpha.2: