Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the "help" button on generated rustdoc pages easier to find #90310

Closed
jyn514 opened this issue Oct 26, 2021 · 20 comments · Fixed by #129545
Closed

Make the "help" button on generated rustdoc pages easier to find #90310

jyn514 opened this issue Oct 26, 2021 · 20 comments · Fixed by #129545
Labels
A-docs Area: Documentation for any part of the project, including the compiler, standard library, and tools A-rustdoc-ui Area: Rustdoc UI (generated HTML) T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue.

Comments

@jyn514
Copy link
Member

jyn514 commented Oct 26, 2021

I've talked to 3+ experienced rust developers this morning, all of whom were unaware of the existence of the help popup. They mentioned the following issues:

  • The icon is to the right of search, not the left, making it seem unimportant.
  • The icon is smaller than the search bar, making it seem unrelated.
  • They've been trained by microsoft products that ? is useless and doesn't have any non-trivial amount of info.

We should move the icon to the left and make it larger. They also suggested duplicating the help text on the docs.rs homepage, which seems like a much bigger hammer, but maybe is worth considering.

image

cc @rust-lang/rustdoc

@jyn514 jyn514 added T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. A-docs Area: Documentation for any part of the project, including the compiler, standard library, and tools A-rustdoc-ui Area: Rustdoc UI (generated HTML) labels Oct 26, 2021
@wooster0
Copy link
Contributor

wooster0 commented Oct 26, 2021

Yes, I think it would be helpful to show some help text in multiple places. The search tricks of the help could be added to the No results :( page and the other half (the keyboard shortcuts) could be shown somewhere else as well maybe.

And I think '?' for more options... in the search bar should be changed to press '?' for help....

@camelid
Copy link
Member

camelid commented Oct 26, 2021

Yeah, I often forget about the help button myself, even though I know we have one ;)

We should move the icon to the left

But then it'll no longer be next to the config icon, right?

@jyn514
Copy link
Member Author

jyn514 commented Oct 26, 2021

We could move both icons at the same time.

@GuillaumeGomez
Copy link
Member

Fine by me!

@camelid
Copy link
Member

camelid commented Oct 26, 2021

We could move both icons at the same time.

It is weird that the theme icon is on one side and the others are on the opposite side, so moving all of them together sounds good.

@jsha
Copy link
Contributor

jsha commented Oct 26, 2021

I'd like to break this down into sub-problems:

Problem 1: Experienced Rust Developers don't know about the help popup.

Problem 2: Experienced Rust Developers don't know about the things the help popup teaches them, specifically:

  • Problem 2a: They don't know about the keyboard shortcuts.
  • Problem 2b: They don't know about the search tips.

Keyboard Shortcuts

? Show this help dialog
S Focus the search field
T Focus the theme picker menu
↑ Move up in search results
↓ Move down in search results
← / → Switch result tab (when results focused)
⏎ Go to active search result
+ Expand all sections
- Collapse all sections

Search Tricks

Prefix searches with a type followed by a colon (e.g., fn:) to restrict the search to a given item kind.
Accepted kinds are: fn, mod, struct, enum, trait, type, macro, and const.
Search functions by type signature (e.g., vec -> usize or * -> vec)
Search multiple things at once by splitting your query with comma (e.g., str,u8 or String,struct:Vec,test)
You can look for items with an exact name by putting double quotes around your request: "string"
Look for items inside another one by searching for a path: vec::Vec


In other words, almost all of the help popup is actually help about searching. We should present that information to people when it is most relevant: when they are searching. A quick mockup:

image

That can do a more effective job teaching people about the search syntax and the search-related keyboard shortcuts, while reducing overall clutter. Excessive clutter around the search bar was one of the major themes of #59829. We should be aiming to remove elements surrounding the search bar rather than add more. For instance, in #84539 I propose that the paintbrush icon should be replaced with equivalent functionality in the settings menu, since picking a theme is a rare operation.

If we use the search page to teach people about searching, we need to teach people about the remaining keyboard shortcuts:

/ to focus search (this is described in the grey text inside the search box, so we're good)
T to focus theme picker (this will be reachable in the settings menu with normal navigation)
- / + to expand all / collapse all. We should advertise these in the hover text for the [-] icon at the top of the page. If people aren't aware of that icon or what it does, that's an additional problem we should solve.

@jyn514 when you talked to those Rust devs, what was the functionality you wanted them to know about inside the help popup?

@jyn514
Copy link
Member Author

jyn514 commented Oct 26, 2021

@jsha 2b, the search tips - this originally came up because someone suggested adding a ref:MyType search syntax, not realizing that functionality is already available from the "In Parameters" and "In Return Types" tab of search.

@camelid
Copy link
Member

camelid commented Oct 26, 2021

That can do a more effective job teaching people about the search syntax and the search-related keyboard shortcuts, while reducing overall clutter.

IMO, that adds more clutter, since it's a whole sentence that'd appear every time you use the search box and distract from the search results.

We should be aiming to remove elements surrounding the search bar rather than add more. For instance, in #84539 I propose that the paintbrush icon should be replaced with equivalent functionality in the settings menu, since picking a theme is a rare operation.

I agree that we should reduce the number of elements, but I disagree that picking a theme is a rare operation. Since docs.rs does not persist settings across crates, because that's managed by rustdoc, I have to manually change the theme if I want to put the page in dark mode. Perhaps one way to mitigate this would be to make following the system theme the default setting—but then, since I prefer Ayu over the Dark theme, I'd still have to dig around in settings to switch the default dark theme to Ayu.

@jyn514
Copy link
Member Author

jyn514 commented Oct 26, 2021

Since docs.rs does not persist settings across crates, because that's managed by rustdoc

Wait, what? We spent a long time making sure the theme syncs across pages, it even applies to the docs.rs homepage.

@camelid
Copy link
Member

camelid commented Oct 27, 2021

Since docs.rs does not persist settings across crates, because that's managed by rustdoc

Wait, what? We spent a long time making sure the theme syncs across pages, it even applies to the docs.rs homepage.

I stand corrected! Wow, did that happen recently? I remember it not being synchronized... Anyway, that's amazing!

@jsha
Copy link
Contributor

jsha commented Oct 27, 2021

IMO, that adds more clutter, since it's a whole sentence that'd appear every time you use the search box and distract from the search results.

My intent with the mockup was that there would be an easy, obvious button (mimicked with "[x]") that dismisses the tips forever.

this originally came up because someone suggested adding a ref:MyType search syntax, not realizing that functionality is already available from the "In Parameters" and "In Return Types" tab of search.

It sounds like this is a third problem: people aren't noticing the "In Parameters" and "In Return Types" tabs of search, or notice them but don't internalize what they do. I think making the help popup more prominent doesn't actually solve this problem, right?

@camelid
Copy link
Member

camelid commented Oct 27, 2021

My intent with the mockup was that there would be an easy, obvious button (mimicked with "[x]") that dismisses the tips forever.

How hard would it be for docs.rs to synchronize that between all crates like (I've now learned) it does for themes? Also, for locally built docs, you'd have to manually dismiss it each time you built the docs, which seems frustrating.

@jsha
Copy link
Contributor

jsha commented Oct 27, 2021

How hard would it be for docs.rs to synchronize that between all crates like (I've now learned) it does for themes?

Presumably not too hard, though @jyn514 can answer for sure. I agree it would be annoying if it wasn't synchronized!

Also, for locally built docs, you'd have to manually dismiss it each time you built the docs, which seems frustrating.

We should turn the tips off when accessing via file:// URLs.

@camelid
Copy link
Member

camelid commented Oct 27, 2021

Also, for locally built docs, you'd have to manually dismiss it each time you built the docs, which seems frustrating.

We should turn the tips off when accessing via file:// URLs.

That would solve the problem, but it feels like it adds complexity to rustdoc's behavior and could be confusing, though I guess it couldn't be too bad...

@jyn514
Copy link
Member Author

jyn514 commented Oct 27, 2021

I think making the help popup more prominent doesn't actually solve this problem, right?

Well, sort of - we have a link to doc.rust-lang.org/rustdoc in the popup and we could add some more docs there (#90309). But I agree it doesn't solve the problem on its own.

@GuillaumeGomez
Copy link
Member

I stand corrected! Wow, did that happen recently? I remember it not being synchronized... Anyway, that's amazing!

I did it a few months ago. :)

My intent with the mockup was that there would be an easy, obvious button (mimicked with "[x]") that dismisses the tips forever.

Let's avoid that. I think showing a sentence which would open the popup is a good idea. People will simply ignore it after a few uses of the rustdoc search.

We should turn the tips off when accessing via file:// URLs.

Let's not. Having different behaviours between local and non-local documentation is not a good idea at all.

Well, sort of - we have a link to doc.rust-lang.org/rustdoc in the popup and we could add some more docs there (#90309). But I agree it doesn't solve the problem on its own.

It would only work if you have an internet connection, so not the best. I think the current way is fine. It's how we allow people to get to it which needs to be refined.

@jyn514
Copy link
Member Author

jyn514 commented Oct 27, 2021

@GuillaumeGomez I have trouble understanding this comment:

It would only work if you have an internet connection, so not the best. I think the current way is fine. It's how we allow people to get to it which needs to be refined.

Right now we don't document the search tabs at all.

@GuillaumeGomez
Copy link
Member

I meant going to <doc.rust-lang.org/rustdoc>. If we add more information, only "non-vital" should be put outside of rustdoc as much as possible.

Right now we don't document the search tabs at all.

True, which isn't great...

@camelid
Copy link
Member

camelid commented Oct 27, 2021

My intent with the mockup was that there would be an easy, obvious button (mimicked with "[x]") that dismisses the tips forever.

Let's avoid that. I think showing a sentence which would open the popup is a good idea. People will simply ignore it after a few uses of the rustdoc search.

We should turn the tips off when accessing via file:// URLs.

Let's not. Having different behaviours between local and non-local documentation is not a good idea at all.

I agree that having different behaviors between local and non-local docs could be confusing, but I also don't think unconditionally showing the sentence is a good idea either. It's hard to find the right balance here.

@Nemo157
Copy link
Member

Nemo157 commented Oct 27, 2021

Presumably not too hard, though @jyn514 can answer for sure. I agree it would be annoying if it wasn't synchronized!

Since docs.rs is a single domain all local storage settings get shared across all documentation. As long as different versions of rustdoc are consistent in the settings they read/write they will synchronize the settings fine.

notriddle added a commit to notriddle/rust that referenced this issue Aug 25, 2024
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>,
  <rust-lang#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/>,
  <rust-lang#90310>,
  <rust-lang#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.

Settings and Help are also migrated, so that the whole group can benefit from
being described using actual words.
notriddle added a commit to notriddle/rust that referenced this issue Aug 27, 2024
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>,
  <rust-lang#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/>,
  <rust-lang#90310>,
  <rust-lang#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.

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

Additionally, the Help button is only shown on SERPs, not all the time.
This is done for two major reasons:

* Most of what's in there is search-related. The things that aren't are
  keyboard commands, and the search box tells you about that anyway.
  Pressing <kbd>?</kbd> will temporarily show the button and its popover.
* I'm trading it off by showing the help button, even on mobile.
  It's useful since you can use the search engine suggestions there.
* The three buttons were causing line wrapping on too many desktop layouts.
notriddle added a commit to notriddle/rust that referenced this issue Aug 27, 2024
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>,
  <rust-lang#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/>,
  <rust-lang#90310>,
  <rust-lang#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.

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

Additionally, the Help button is only shown on SERPs, not all the time.
This is done for two major reasons:

* Most of what's in there is search-related. The things that aren't are
  keyboard commands, and the search box tells you about that anyway.
  Pressing <kbd>?</kbd> will temporarily show the button and its popover.
* I'm trading it off by showing the help button, even on mobile.
  It's useful since you can use the search engine suggestions there.
* The three buttons were causing line wrapping on too many desktop layouts.
notriddle added a commit to notriddle/rust that referenced this issue Aug 27, 2024
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>,
  <rust-lang#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/>,
  <rust-lang#90310>,
  <rust-lang#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.

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

Additionally, the Help button is only shown on SERPs, not all the time.
This is done for two major reasons:

* Most of what's in there is search-related. The things that aren't are
  keyboard commands, and the search box tells you about that anyway.
  Pressing <kbd>?</kbd> will temporarily show the button and its popover.
* I'm trading it off by showing the help button, even on mobile.
  It's useful since you can use the search engine suggestions there.
* The three buttons were causing line wrapping on too many desktop layouts.
notriddle added a commit to notriddle/rust that referenced this issue Aug 27, 2024
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>,
  <rust-lang#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/>,
  <rust-lang#90310>,
  <rust-lang#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.

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

Additionally, the Help button is only shown on SERPs, not all the time.
This is done for two major reasons:

* Most of what's in there is search-related. The things that aren't are
  keyboard commands, and the search box tells you about that anyway.
  Pressing <kbd>?</kbd> will temporarily show the button and its popover.
* I'm trading it off by showing the help button, even on mobile.
  It's useful since you can use the search engine suggestions there.
* The three buttons were causing line wrapping on too many desktop layouts.
notriddle added a commit to notriddle/rust that referenced this issue Sep 11, 2024
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>,
  <rust-lang#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/>,
  <rust-lang#90310>,
  <rust-lang#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.

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

Additionally, the Help button is only shown on SERPs, not all the time.
This is done for two major reasons:

* Most of what's in there is search-related. The things that aren't are
  keyboard commands, and the search box tells you about that anyway.
  Pressing <kbd>?</kbd> will temporarily show the button and its popover.
* I'm trading it off by showing the help button, even on mobile.
  It's useful since you can use the search engine suggestions there.
* The three buttons were causing line wrapping on too many desktop layouts.
notriddle added a commit to notriddle/rust that referenced this issue Sep 11, 2024
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>,
  <rust-lang#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/>,
  <rust-lang#90310>,
  <rust-lang#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.

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

Additionally, the Help button is only shown on SERPs, not all the time.
This is done for two major reasons:

* Most of what's in there is search-related. The things that aren't are
  keyboard commands, and the search box tells you about that anyway.
  Pressing <kbd>?</kbd> will temporarily show the button and its popover.
* I'm trading it off by showing the help button, even on mobile.
  It's useful since you can use the search engine suggestions there.
* The three buttons were causing line wrapping on too many desktop layouts.
workingjubilee added a commit to workingjubilee/rustc that referenced this issue Sep 22, 2024
…GuillaumeGomez

rustdoc: redesign toolbar and disclosure widgets

Fixes rust-lang#77899
Fixes rust-lang#90310

## Preview

| before | after
| ------ | -----
| ![image](https://github.com/user-attachments/assets/ebeec185-3a72-481d-921e-a9a885f348d9) | ![image](https://github.com/user-attachments/assets/08735a65-99d1-4523-ab77-ddb164c0a5db)
| ![image](https://github.com/user-attachments/assets/ae8e0f24-49cb-445d-b9bd-cec9c57b94e7) | ![image](https://github.com/user-attachments/assets/ba484f94-b031-41fc-b8a8-6cd81be8fb6b)
| ![image](https://github.com/user-attachments/assets/8c2cc041-a138-4950-a12e-3d529c8a5339) | ![image](https://github.com/user-attachments/assets/e7f010bd-19e2-4711-85bf-3fd00c3e5647)
| ![image](https://github.com/user-attachments/assets/e2b63785-971c-489e-b069-eb85f6a30620) | ![image](https://github.com/user-attachments/assets/b65eea16-d6a3-4aa3-8a27-6ded74009010)
| ![image](https://github.com/user-attachments/assets/1c7b0901-a61a-4325-9d01-9d8b14b476aa) | ![image](https://github.com/user-attachments/assets/d4a485db-d9f1-4a62-94bc-a3d125ea6dc1)
| N/A | ![image](https://github.com/user-attachments/assets/7add0a2a-7fd7-483d-87ee-51ee45a2fe5d)
| ![image](https://github.com/user-attachments/assets/334f50bc-9f8d-42d9-a7df-95058f7cdfd5) | ![image](https://github.com/user-attachments/assets/451fcc22-b034-453c-ae4b-b948fd6bd779)
| ![image](https://github.com/user-attachments/assets/132f720c-802a-466d-bd55-c7a4750acdc3) | ![image](https://github.com/user-attachments/assets/177b7921-06c5-467d-87d3-9cdf88c4e50b)

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>, <rust-lang#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/>, <rust-lang#90310>, <rust-lang#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 <rust-lang#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.

![image](https://github.com/user-attachments/assets/9a4a0498-232d-4d60-87b9-f601f4515254)
GuillaumeGomez added a commit to GuillaumeGomez/rust that referenced this issue Sep 22, 2024
…GuillaumeGomez

rustdoc: redesign toolbar and disclosure widgets

Fixes rust-lang#77899
Fixes rust-lang#90310

## Preview

| before | after
| ------ | -----
| ![image](https://github.com/user-attachments/assets/ebeec185-3a72-481d-921e-a9a885f348d9) | ![image](https://github.com/user-attachments/assets/08735a65-99d1-4523-ab77-ddb164c0a5db)
| ![image](https://github.com/user-attachments/assets/ae8e0f24-49cb-445d-b9bd-cec9c57b94e7) | ![image](https://github.com/user-attachments/assets/ba484f94-b031-41fc-b8a8-6cd81be8fb6b)
| ![image](https://github.com/user-attachments/assets/8c2cc041-a138-4950-a12e-3d529c8a5339) | ![image](https://github.com/user-attachments/assets/e7f010bd-19e2-4711-85bf-3fd00c3e5647)
| ![image](https://github.com/user-attachments/assets/e2b63785-971c-489e-b069-eb85f6a30620) | ![image](https://github.com/user-attachments/assets/b65eea16-d6a3-4aa3-8a27-6ded74009010)
| ![image](https://github.com/user-attachments/assets/1c7b0901-a61a-4325-9d01-9d8b14b476aa) | ![image](https://github.com/user-attachments/assets/d4a485db-d9f1-4a62-94bc-a3d125ea6dc1)
| N/A | ![image](https://github.com/user-attachments/assets/7add0a2a-7fd7-483d-87ee-51ee45a2fe5d)
| ![image](https://github.com/user-attachments/assets/334f50bc-9f8d-42d9-a7df-95058f7cdfd5) | ![image](https://github.com/user-attachments/assets/451fcc22-b034-453c-ae4b-b948fd6bd779)
| ![image](https://github.com/user-attachments/assets/132f720c-802a-466d-bd55-c7a4750acdc3) | ![image](https://github.com/user-attachments/assets/177b7921-06c5-467d-87d3-9cdf88c4e50b)

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>, <rust-lang#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/>, <rust-lang#90310>, <rust-lang#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 <rust-lang#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.

![image](https://github.com/user-attachments/assets/9a4a0498-232d-4d60-87b9-f601f4515254)
GuillaumeGomez added a commit to GuillaumeGomez/rust that referenced this issue Sep 22, 2024
…GuillaumeGomez

rustdoc: redesign toolbar and disclosure widgets

Fixes rust-lang#77899
Fixes rust-lang#90310

## Preview

| before | after
| ------ | -----
| ![image](https://github.com/user-attachments/assets/ebeec185-3a72-481d-921e-a9a885f348d9) | ![image](https://github.com/user-attachments/assets/08735a65-99d1-4523-ab77-ddb164c0a5db)
| ![image](https://github.com/user-attachments/assets/ae8e0f24-49cb-445d-b9bd-cec9c57b94e7) | ![image](https://github.com/user-attachments/assets/ba484f94-b031-41fc-b8a8-6cd81be8fb6b)
| ![image](https://github.com/user-attachments/assets/8c2cc041-a138-4950-a12e-3d529c8a5339) | ![image](https://github.com/user-attachments/assets/e7f010bd-19e2-4711-85bf-3fd00c3e5647)
| ![image](https://github.com/user-attachments/assets/e2b63785-971c-489e-b069-eb85f6a30620) | ![image](https://github.com/user-attachments/assets/b65eea16-d6a3-4aa3-8a27-6ded74009010)
| ![image](https://github.com/user-attachments/assets/1c7b0901-a61a-4325-9d01-9d8b14b476aa) | ![image](https://github.com/user-attachments/assets/d4a485db-d9f1-4a62-94bc-a3d125ea6dc1)
| N/A | ![image](https://github.com/user-attachments/assets/7add0a2a-7fd7-483d-87ee-51ee45a2fe5d)
| ![image](https://github.com/user-attachments/assets/334f50bc-9f8d-42d9-a7df-95058f7cdfd5) | ![image](https://github.com/user-attachments/assets/451fcc22-b034-453c-ae4b-b948fd6bd779)
| ![image](https://github.com/user-attachments/assets/132f720c-802a-466d-bd55-c7a4750acdc3) | ![image](https://github.com/user-attachments/assets/177b7921-06c5-467d-87d3-9cdf88c4e50b)

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>, <rust-lang#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/>, <rust-lang#90310>, <rust-lang#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 <rust-lang#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.

![image](https://github.com/user-attachments/assets/9a4a0498-232d-4d60-87b9-f601f4515254)
compiler-errors added a commit to compiler-errors/rust that referenced this issue Sep 24, 2024
…GuillaumeGomez

rustdoc: redesign toolbar and disclosure widgets

Fixes rust-lang#77899
Fixes rust-lang#90310

## Preview

| before | after
| ------ | -----
| ![image](https://github.com/user-attachments/assets/ebeec185-3a72-481d-921e-a9a885f348d9) | ![image](https://github.com/user-attachments/assets/08735a65-99d1-4523-ab77-ddb164c0a5db)
| ![image](https://github.com/user-attachments/assets/ae8e0f24-49cb-445d-b9bd-cec9c57b94e7) | ![image](https://github.com/user-attachments/assets/ba484f94-b031-41fc-b8a8-6cd81be8fb6b)
| ![image](https://github.com/user-attachments/assets/8c2cc041-a138-4950-a12e-3d529c8a5339) | ![image](https://github.com/user-attachments/assets/e7f010bd-19e2-4711-85bf-3fd00c3e5647)
| ![image](https://github.com/user-attachments/assets/e2b63785-971c-489e-b069-eb85f6a30620) | ![image](https://github.com/user-attachments/assets/b65eea16-d6a3-4aa3-8a27-6ded74009010)
| ![image](https://github.com/user-attachments/assets/1c7b0901-a61a-4325-9d01-9d8b14b476aa) | ![image](https://github.com/user-attachments/assets/d4a485db-d9f1-4a62-94bc-a3d125ea6dc1)
| N/A | ![image](https://github.com/user-attachments/assets/7add0a2a-7fd7-483d-87ee-51ee45a2fe5d)
| ![image](https://github.com/user-attachments/assets/334f50bc-9f8d-42d9-a7df-95058f7cdfd5) | ![image](https://github.com/user-attachments/assets/451fcc22-b034-453c-ae4b-b948fd6bd779)
| ![image](https://github.com/user-attachments/assets/132f720c-802a-466d-bd55-c7a4750acdc3) | ![image](https://github.com/user-attachments/assets/177b7921-06c5-467d-87d3-9cdf88c4e50b)

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>, <rust-lang#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/>, <rust-lang#90310>, <rust-lang#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 <rust-lang#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.

![image](https://github.com/user-attachments/assets/9a4a0498-232d-4d60-87b9-f601f4515254)
@bors bors closed this as completed in 0a0ea28 Sep 24, 2024
rust-timer added a commit to rust-lang-ci/rust that referenced this issue Sep 24, 2024
Rollup merge of rust-lang#129545 - notriddle:notriddle/toolbar-v2, r=GuillaumeGomez

rustdoc: redesign toolbar and disclosure widgets

Fixes rust-lang#77899
Fixes rust-lang#90310

## Preview

| before | after
| ------ | -----
| ![image](https://github.com/user-attachments/assets/ebeec185-3a72-481d-921e-a9a885f348d9) | ![image](https://github.com/user-attachments/assets/08735a65-99d1-4523-ab77-ddb164c0a5db)
| ![image](https://github.com/user-attachments/assets/ae8e0f24-49cb-445d-b9bd-cec9c57b94e7) | ![image](https://github.com/user-attachments/assets/ba484f94-b031-41fc-b8a8-6cd81be8fb6b)
| ![image](https://github.com/user-attachments/assets/8c2cc041-a138-4950-a12e-3d529c8a5339) | ![image](https://github.com/user-attachments/assets/e7f010bd-19e2-4711-85bf-3fd00c3e5647)
| ![image](https://github.com/user-attachments/assets/e2b63785-971c-489e-b069-eb85f6a30620) | ![image](https://github.com/user-attachments/assets/b65eea16-d6a3-4aa3-8a27-6ded74009010)
| ![image](https://github.com/user-attachments/assets/1c7b0901-a61a-4325-9d01-9d8b14b476aa) | ![image](https://github.com/user-attachments/assets/d4a485db-d9f1-4a62-94bc-a3d125ea6dc1)
| N/A | ![image](https://github.com/user-attachments/assets/7add0a2a-7fd7-483d-87ee-51ee45a2fe5d)
| ![image](https://github.com/user-attachments/assets/334f50bc-9f8d-42d9-a7df-95058f7cdfd5) | ![image](https://github.com/user-attachments/assets/451fcc22-b034-453c-ae4b-b948fd6bd779)
| ![image](https://github.com/user-attachments/assets/132f720c-802a-466d-bd55-c7a4750acdc3) | ![image](https://github.com/user-attachments/assets/177b7921-06c5-467d-87d3-9cdf88c4e50b)

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>, <rust-lang#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/>, <rust-lang#90310>, <rust-lang#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 <rust-lang#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.

![image](https://github.com/user-attachments/assets/9a4a0498-232d-4d60-87b9-f601f4515254)
github-actions bot pushed a commit to rust-lang/miri that referenced this issue Sep 25, 2024
…Gomez

rustdoc: redesign toolbar and disclosure widgets

Fixes #77899
Fixes #90310

## Preview

| before | after
| ------ | -----
| ![image](https://github.com/user-attachments/assets/ebeec185-3a72-481d-921e-a9a885f348d9) | ![image](https://github.com/user-attachments/assets/08735a65-99d1-4523-ab77-ddb164c0a5db)
| ![image](https://github.com/user-attachments/assets/ae8e0f24-49cb-445d-b9bd-cec9c57b94e7) | ![image](https://github.com/user-attachments/assets/ba484f94-b031-41fc-b8a8-6cd81be8fb6b)
| ![image](https://github.com/user-attachments/assets/8c2cc041-a138-4950-a12e-3d529c8a5339) | ![image](https://github.com/user-attachments/assets/e7f010bd-19e2-4711-85bf-3fd00c3e5647)
| ![image](https://github.com/user-attachments/assets/e2b63785-971c-489e-b069-eb85f6a30620) | ![image](https://github.com/user-attachments/assets/b65eea16-d6a3-4aa3-8a27-6ded74009010)
| ![image](https://github.com/user-attachments/assets/1c7b0901-a61a-4325-9d01-9d8b14b476aa) | ![image](https://github.com/user-attachments/assets/d4a485db-d9f1-4a62-94bc-a3d125ea6dc1)
| N/A | ![image](https://github.com/user-attachments/assets/7add0a2a-7fd7-483d-87ee-51ee45a2fe5d)
| ![image](https://github.com/user-attachments/assets/334f50bc-9f8d-42d9-a7df-95058f7cdfd5) | ![image](https://github.com/user-attachments/assets/451fcc22-b034-453c-ae4b-b948fd6bd779)
| ![image](https://github.com/user-attachments/assets/132f720c-802a-466d-bd55-c7a4750acdc3) | ![image](https://github.com/user-attachments/assets/177b7921-06c5-467d-87d3-9cdf88c4e50b)

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>, <rust-lang/rust#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/>, <rust-lang/rust#90310>, <rust-lang/rust#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 <rust-lang/rust#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.

![image](https://github.com/user-attachments/assets/9a4a0498-232d-4d60-87b9-f601f4515254)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-docs Area: Documentation for any part of the project, including the compiler, standard library, and tools A-rustdoc-ui Area: Rustdoc UI (generated HTML) T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants