rustdoc: redesign toolbar and disclosure widgets

[notriddle]

Fixes #77899
Fixes #90310

Preview

before	after
N/A

https://notriddle.com/rustdoc-html-demo-12/toolbar-v2/std/index.html

Description

This adds labels to the icons and moves them away from the search box.

These changes are made together, because they work together, but are based on several complaints:

• The [+/-] thing are a Reddit-ism. They don't look like buttons, but look like syntax https://rust-lang.zulipchat.com/#narrow/stream/266220-t-rustdoc/topic/More.20visual.20difference.20for.20the.20.2B.2F-.20.20Icons, Reduce visual prominence of controls, source links, and version numbers in rustdoc #59851 (some of these are laundry lists with more suggestions, but they all mention [+/-] looking wrong)

• The settings, help, and summary buttons are also too hard to recognize https://lwn.net/Articles/987070/, Make the "help" button on generated rustdoc pages easier to find #90310, rustdoc: provide summary views #14475 (comment), https://internals.rust-lang.org/t/improve-rustdoc-design/12758 ("Not all functionality is self-explanatory, for example the [+] button in the top right corner, the theme picker or the settings button.")

The toggle-all and toggle-individual buttons both need done at once, since we want them to look like they go together. This changes them from both being [+/-] to both being arrows.

CC #113074 (comment) and @jsha regarding the use of triangles for disclosure, which is what everyone wanted, but was pending a good toggle-all button. This PR adds a toggle-all button that should work.

Settings and Help are also migrated, so that the whole group can benefit from being described using actual words.

The breadcrumbs also get redesigned, so that they use less space, by shrinking the parent module path parts. This is done at the same time as the toolbar redesign because it's, effectively, moving space from the toolbar to the breadcrumbs.
This is aimed at avoiding any line wrapping at desktop sizes.

Prior art

This style of toolbar, with explicit labels on the buttons, used to be more popular. It's not very common in web browsers nowadays, and for truly universal icons like ⬅️ I can understand why, but words are great when icons fail.

[rustbot]

r? @GuillaumeGomez

rustbot has assigned @GuillaumeGomez.
They will have a look at your PR within the next two weeks and either review your PR or reassign to another reviewer.

Use r? to explicitly pick a reviewer

[bjorn3]

These buttons are way too big on mobile IMO. Here is what it looks on a Galaxy S20 emulated by Firefox with the crate name replaced by a slightly larger one:

Screenshot

[notriddle]

@bjorn3 Does this look more reasonable?

[bjorn3]

Much better! Thanks!

[GuillaumeGomez]

Just to say: I LOVE IT! It looks so good. Well done!

[rustbot]

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez, @jsha

Some changes occurred in src/tools/compiletest

cc @jieyouxu

This PR modifies tests/run-make/. If this PR is trying to port a Makefile
run-make test to use rmake.rs, please update the
run-make port tracking issue
so we can track our progress. You can either modify the tracking issue
directly, or you can comment on the tracking issue and link this PR.

cc @jieyouxu

Some changes occurred in GUI tests.

cc @GuillaumeGomez

[GuillaumeGomez]

So about the help button: it has important information like a link to the rustdoc book or the version of rustdoc used to generate this doc. So displaying it only on the search results page is not an improvement imo.

[notriddle]

It can’t be that important. It was already hidden on mobile.

[GuillaumeGomez]

Maybe the problem here is that this menu contains too many different kind of information:

1. Shortcuts
2. Search tricks
3. Link to rustdoc book
4. Version used to generate this doc

2 can be hidden away on mobile all the time, 3 and 4 seems like we're not providing all information we should. 1 is only useful on desktop, but then it'd be better to display it all the time.

[lolbinarycat]

big fan of labeled icons that collapse to just icons on mobile. docs.rs uses the same approach for its menubar, so there's some nice parity with that too.

[lolbinarycat]

one slight issue: the "copy path" button is probably a bit more confusing now that the module and name have been split up.

[camelid]

This looks amazing, thanks for the great work @notriddle. I only have one comment, and I don't feel strongly about it: What if instead of disabling "Summary" when in search view (etc.), we just delete it? We would also have to move it to be the leftmost icon, but I think that might make more sense anyway. It's a little strange to have content-related buttons after settings.

[camelid]

I checked my box since, like I said, I don't feel strongly, and it can always be tweaked later.

[lolbinarycat]

strictly speaking, the "collapse all" view would be more accurately described as an outline, not a summary, although it doesn't matter that much as long as it is clearly a button, since it's function will become apparent once it is clicked (just looking at the screenshots, it wasn't immediately obvious to me what it does)

[notriddle]

We would also have to move it to be the leftmost icon, but I think that might make more sense anyway.

I intentionally wanted to put the Settings button near the middle of the popover, so that switching themes is easier, while putting the Summary button near the scrollbar.

[GuillaumeGomez]

Seems like we got the frontend team to agree with the changes. Thanks everyone! Time to approve it. Can't wait for this change to be available. :D

@bors r+ rollup

[bors]

📌 Commit 1be4e7f has been approved by GuillaumeGomez

It is now in the queue for this repository.

[workingjubilee]

@bors r-

[notriddle]

@bors r=GuillaumeGomez

[bors]

📌 Commit 6260680 has been approved by GuillaumeGomez

It is now in the queue for this repository.