Improve the styling of the conformance results page

[ngnpope]

Issues Identified

Looking at the conformance results page, there were a number of issues that I noticed:

• Inconsistent column widths as type checkers are added or removed
• Type checker columns are in an arbitrary order
• Scrolling down the page, it is hard to remember which column is for which type checker
• It is also hard to see which row you're looking at in larger blocks of tests
• Only a root template with all other elements as strings joined in Python
• The markup didn't validate - duplicate id attributes, <span> parent of <p>
• <th> used for all table cells, not only header cells
• Styling is over-complicated with excessive class attributes
• All cells have a pointer cursor, even if there is no tooltip (or other action)
• Tooltips defined using excess elements, positioning is poor and overflows the viewport
• Lots of non-breaking spaces used instead of padding
• Inconsistent use of markdown code spans in notes

List of Changes

This pull request aims to improve the generated output and make it easier to maintain.

The following changes have been made:

• Switch to using tomllib from the standard library instead of tomli
  • Dependency not needed as conformance/pyproject.toml has requires-python = "==3.12.*"
• Use jinja2 for templates instead of manually joining lists of tags
  • Moved stylesheet into a separate file for ease of maintenance
• Use better markup for improved accessibility and semantics
  • Only use <th> for heading cells, not all table cells
  • Use <thead> for the header row with type checker names
  • Use separate <tbody> for each group of tests
  • Make use of scope attributes for header cells
  • Make use of <colgroup> and <col> to reduce excess class attributes
  • Reduce the number of elements required for tooltip implementation
• Fix issues with styling, including:
  • Remove unused CSS rules
  • Calculate column widths based on number of type checkers
  • Make the table header sticky so it remains visible as the page scrolls
  • Add a hover effect to the rows to aid scanning across columns
  • Make use of more advanced selectors to reduce excess class attributes
  • Use the help cursor instead of pointer, and only where there are tooltips
  • Replace the use of non-breaking spaces with padding
  • Add asterisk if a pass with notes using CSS only
  • Various improvements, e.g. use CSS variables for colors, avoid use of pixel units
  • Added a theme selector and support for light/dark (and auto) modes
    • CSS-only based implementation for switching using light-dark(), etc.
    • A small amount of JS for theme persistence
  • Added an emoji favicon to make it easier to spot in the browser: 📘 (Can be changed.)
• Add markdown rendering of notes in the tooltip
  • Improves readability of many notes
  • Most notes already used code spans, others have been updated
  • Links in notes have been made to be clickable
• Added summary rows to each test group and a total footer row at the end of the table
  • Use 1 for a pass and 0.5 for a partial result

Passes validation on validator.w3.org (with the exception of a known bug in the validator for nested CSS) and also scores 100 for performance, accessibility, and SEO in Google Chrome DevTools Lighthouse tool.

Future Ideas

• Add a footer with the current git hash when the results were generated
• Link to conformance test case source files in GitHub from each item in the first column
• Add a workflow to publish the results via GitHub Pages
  • Would need to be done by someone with access to configure settings
  • Current workaround is to use one of these links:
    • https://htmlpreview.github.io/?https://github.com/python/typing/blob/main/conformance/results/results.html
    • https://html-preview.github.io/?url=https://github.com/python/typing/blob/main/conformance/results/results.html
  • Alternative could be to publish somehow alongside https://typing.python.org/

AI Disclosure

No AI was involved in creating this pull request.

Screenshots

First Load

Light	Dark

Sticky Table Header

Light	Dark

Tooltip Rendering

Light	Dark

Theme Selector

[ngnpope]

I timed that terribly badly... 😂 Rebased on top of #2308.

You can preview the changes here.

[davidhalter]

No AI was involved in creating this pull request.

Are you really honest here? I would not have guessed that you wrote the issue description in a hundred years. This looks 100% like AI.

[ngnpope]

No AI was involved in creating this pull request.

Are you really honest here? I would not have guessed that you wrote the issue description in a hundred years. This looks 100% like AI.

Urgh. Yes. I 100% wrote it. I lament this day and age where everything could be considered AI or look like AI. I've frequently used em-dashes in the past and now that's considered a "tell" for AI. So tired of it 🙁

It's disappointing that you have to start with a presumption of dishonesty.

[davidhalter]

I'm sorry if you actually wrote it. But in 15 years of open source I've never seen this style. I have never seen anybody use emojis like this (except LLMs) and when looking at the last ~10 pull request of yours and a couple random ones in the last ten years I don't see a single Emoji. So I feel like my intuition wasn't really that weird. But as a long-term contributor to the Python ecosystem I'm obviously willing to give you the benefit of the doubt.

LLMs aren't banned on this repository, and there is no necessity to disclose this although very obviously happy to have this information.

---

In general I like the PR, I've glanced over it and there are a lot of good changes in there. I think somebody else needs to review the visual aspects, since I'm not really good at that part.

[ngnpope]

…I don't see a single Emoji.

I've been working in a private repository that has a template with headers like that and I guess I just had it in my head. Have reverted back to my usual more plain style.