rustdoc: clean up source sidebar hide button #119066

notriddle · 2023-12-18T06:17:20Z

This is a redesign of the feature, with parts pulled from #119049 but with a button that looks more like a button and matches the one used on other sidebar pages.

Preview:

	Before	After
Closed
Open
Mobile Closed
Mobile Open

This is a redesign of the feature, with parts pulled from rust-lang#119049 but with a button that looks more like a button and matches the one used on other sidebar pages.

rustbot · 2023-12-18T06:17:29Z

r? @fmease

(rustbot has picked a reviewer for you, use r? to override)

rustbot · 2023-12-18T06:17:31Z

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez, @jsha

Some changes occurred in GUI tests.

cc @GuillaumeGomez

GuillaumeGomez · 2023-12-18T13:19:30Z

I found the previous design way more obvious. In this case, nothing indicates that:

There is a sidebar
The sidebar is not about the content but about files hierarchy

Also I really don't like the appearance when sidebar is opened for the title and close button (that is very much personal taste).

notriddle · 2023-12-18T16:26:48Z

There is a sidebar

Is this about the empty vertical column when the sidebar is closed, or is it about the icon?

I had removed the vertical column because it ate into horizontal screen real estate, which is at a premium since code isn't line wrapped. But if you find that helpful, it could be redesigned to put it back.

The sidebar is not about the content but about files hierarchy

The > icon doesn't seem better about that.

Also I really don't like the appearance when sidebar is opened for the title and close button (that is very much personal taste).

I'm hoping to lean on people's existing familiarity with GitHub.

The fact that this particular icon doesn't seem to have a tooltip in GitHub's design should be criminal, and this PR does include a tooltip for this exact reason. But the icon isn't exactly the same (it's closer to Apple's).

GuillaumeGomez · 2023-12-18T16:45:59Z

Is this about the empty vertical column when the sidebar is closed, or is it about the icon?

I had removed the vertical column because it ate into horizontal screen real estate, which is at a premium since code isn't line wrapped. But if you find that helpful, it could be redesigned to put it back.

On mobile the vertical column isn't visible and I think the problem is quite limited on desktop. But yes, I think it'd help to make the connection between the button and the sidebar.

The > icon doesn't seem better about that.

Indeed.

I'm hoping to lean on people's existing familiarity with GitHub.

And because of this comment, I just realized that this sidebar could be collapsed. I'm not sure if it's bad UI or just me who's very bad at that... 😅

The fact that this particular icon doesn't seem to have a tooltip in GitHub's design should be criminal, and this PR does include a tooltip for this exact reason. But the icon isn't exactly the same (it's closer to Apple's).

The button doesn't stand out much either in their case, hence why I never paid attention to it.

notriddle · 2023-12-18T19:38:05Z

@GuillaumeGomez

On mobile the vertical column isn't visible and I think the problem is quite limited on desktop. But yes, I think it'd help to make the connection between the button and the sidebar.

No problem. I've just pushed a new version of the preview docs and PR with the vertical placeholder column.

And because of this comment, I just realized that this sidebar could be collapsed. I'm not sure if it's bad UI or just me who's very bad at that... 😅

Do you think this is because:

The buttons doesn't look like buttons? GitHub's buttons are pretty similar to ours, and if they don't look like buttons, then we should probably add more shading or otherwise try to improve clickability signifiers.
The icon is bad? What does a good sidebar icon look like? (hamburger buttons should open a modal slide-out, not toggle a persistent navigation panel)
This particular button is badly designed for some other reason?

It doesn't look quite right, because the lines are too far apart, and it's not going to be announced by screenreaders as a menu button, since that's not what the symbol means. This adds a real tooltip and uses a better drawing of the icon.

GuillaumeGomez · 2023-12-18T22:41:44Z

No problem. I've just pushed a new version of the preview docs and PR with the vertical placeholder column.

Much better for when the sidebar is closed. Now my only question is about the mobile version: currently we can open the sidebar wherever we are on the page. With your change, it's not possible anymore. I think to be taken into consideration as some source code pages can be quite huge and if you're at the bottom, it's quite annoying to go back to the top. And also, it makes the sidebar harder to "discover" if you're not already aware of its existence in this case.

Now for when the sidebar is open, I think the title should still be centered and the button remaining on the left side (as currently). You also removed the line which was used as marker to differentiate the "title" and the "content" before. Any reason for that change?

Do you think this is because:

* The buttons doesn't look like buttons? GitHub's buttons are pretty similar to ours, and if they don't look like buttons, then we should probably add more shading or otherwise try to improve clickability signifiers.

I think it would be already a pretty good improvement. I think it's because there is not a strong enough visual marker that I don't notice it.

* The icon is bad? What does a good sidebar icon look like? (hamburger buttons should open a modal slide-out, not toggle a persistent navigation panel)

Not a strong opinion on this one. But in this case, I think we should use the same icon for both mobile and desktop, whichever it is.

* This particular button is badly designed for some other reason?

Since you moved it back inside a "column" on desktop, looks good to me. On mobile I still have worries I described above.

notriddle · 2023-12-18T22:55:47Z

Much better for when the sidebar is closed. Now my only question is about the mobile version: currently we can open the sidebar wherever we are on the page. With your change, it's not possible anymore.

That's odd. What browser are you testing on? The hamburger button is supposed to stick while you scroll, the same way the > button did.

Now for when the sidebar is open, I think the title should still be centered and the button remaining on the left side (as currently).

I prefer left alignment because the docs sidebar does it the same way.

You also removed the line which was used as marker to differentiate the "title" and the "content" before. Any reason for that change?

Not really. If you want it, I'll put it in.

Not a strong opinion on this one. But in this case, I think we should use the same icon for both mobile and desktop, whichever it is.

I guess it would need to use a hamburger in on both desktop and mobile, then, since the sidebar icon would be wrong (the file browser fills up the entire screen on mobile, but the icon depicts it as only partially filling the screen).

GuillaumeGomez · 2023-12-18T23:01:02Z

That's odd. What browser are you testing on? The hamburger button is supposed to stick while you scroll, the same way the > button did.

After a force refresh, problem gone. All good there. :)

I prefer left alignment because the docs sidebar does it the same way.

Depends on the "mode": on mobile, the button is on the left and the title is on the right. There is no equivalent for desktop to compare to unfortunately.

Not really. If you want it, I'll put it in.

Let's see how it looks with it then. 👍

I guess it would need to use a hamburger in on both desktop and mobile, then, since the sidebar icon would be wrong (the file browser fills up the entire screen on mobile, but the icon depicts it as only partially filling the screen).

Sounds good to me.

notriddle · 2023-12-19T00:02:55Z

Depends on the "mode": on mobile, the button is on the left and the title is on the right. There is no equivalent for desktop to compare to unfortunately.

That's how the top bar looks. I was thinking of the sidebar logo lockup and its headers.

Sounds good to me.

It doesn't sound very good to me, because that icon usually opens a modal instead of toggling a setting.

Backing up and trying to think of a different approach, maybe we should use an icon based on its purpose instead of its mechanics, which is the same across all viewport sizes.

Old versions

	Before	After
Closed
Open
Mobile Closed
Mobile Open

src/librustdoc/html/static/css/noscript.css

GuillaumeGomez · 2023-12-20T13:42:02Z

Apart from the question I asked, looks good to me, thanks! Once it's answered, we can start the FCP.

GuillaumeGomez · 2023-12-20T16:02:49Z

Time to start the FCP then.

@rfcbot fcp merge

rfcbot · 2023-12-20T16:02:51Z

Team member @GuillaumeGomez has proposed to merge this. The next step is review by the rest of the tagged team members:

No concerns currently listed.

Once a majority of reviewers approve (and at most 2 approvals are outstanding), this will enter its final comment period. If you spot a major issue that hasn't been raised at any point in this process, please speak up!

See this document for info about what commands tagged team members can give me.

Nemo157 · 2023-12-21T12:52:32Z

The fact that this particular icon doesn't seem to have a tooltip in GitHub's design should be criminal

Interestingly they do have a tooltip on this exact icon in the PR-diff-view.

The biggest thing I notice with this (and github's similar button) is that it feels wrong to me that it's on the left, the button to close a panel should be in the top-right. But that's likely platform-specific behavior, and I don't think rustdoc has any similar UI anywhere to be self-consistent with (unlike github which uses top-right-close everywhere I can see except this one panel).

rfcbot · 2023-12-21T12:54:03Z

🔔 This is now entering its final comment period, as per the review above. 🔔

rfcbot · 2023-12-31T13:04:45Z

The final comment period, with a disposition to merge, as per the review above, is now complete.

As the automated representative of the governance process, I would like to thank the author for their work and everyone else who contributed.

This will be merged soon.

GuillaumeGomez · 2023-12-31T13:55:40Z

@bors r+

bors · 2023-12-31T13:55:44Z

📌 Commit 9566db1 has been approved by GuillaumeGomez

It is now in the queue for this repository.

bors · 2023-12-31T15:32:18Z

⌛ Testing commit 9566db1 with merge 67b6975...

bors · 2023-12-31T17:30:01Z

☀️ Test successful - checks-actions
Approved by: GuillaumeGomez
Pushing 67b6975 to master...

rust-timer · 2023-12-31T19:31:29Z

Finished benchmarking commit (67b6975): comparison URL.

Overall result: ❌ regressions - no action needed

@rustbot label: -perf-regression

Instruction count

This is a highly reliable metric that was used to determine the overall result at the top of this comment.

	mean	range	count
Regressions ❌ (primary)	1.2%	[1.2%, 1.2%]	1
Regressions ❌ (secondary)	-	-	0
Improvements ✅ (primary)	-	-	0
Improvements ✅ (secondary)	-	-	0
All ❌✅ (primary)	1.2%	[1.2%, 1.2%]	1

Max RSS (memory usage)

Results

This is a less reliable metric that may be of interest but was not used to determine the overall result at the top of this comment.

	mean	range	count
Regressions ❌ (primary)	2.6%	[2.6%, 2.6%]	1
Regressions ❌ (secondary)	-	-	0
Improvements ✅ (primary)	-	-	0
Improvements ✅ (secondary)	-2.2%	[-2.2%, -2.2%]	1
All ❌✅ (primary)	2.6%	[2.6%, 2.6%]	1

Cycles

This benchmark run did not return any relevant results for this metric.

Binary size

This benchmark run did not return any relevant results for this metric.

Bootstrap: 666.618s -> 665.69s (-0.14%)
Artifact size: 311.73 MiB -> 311.76 MiB (0.01%)

notriddle · 2023-12-31T20:46:26Z

Not even a change to the doc build. It's spurious.

Pkgsrc changes: * Adapt checksums and patches. Upstream chnages: Version 1.77.0 (2024-03-21) ========================== - [Reveal opaque types within the defining body for exhaustiveness checking.] (rust-lang/rust#116821) - [Stabilize C-string literals.] (rust-lang/rust#117472) - [Stabilize THIR unsafeck.] (rust-lang/rust#117673) - [Add lint `static_mut_refs` to warn on references to mutable statics.] (rust-lang/rust#117556) - [Support async recursive calls (as long as they have indirection).] (rust-lang/rust#117703) - [Undeprecate lint `unstable_features` and make use of it in the compiler.] (rust-lang/rust#118639) - [Make inductive cycles in coherence ambiguous always.] (rust-lang/rust#118649) - [Get rid of type-driven traversal in const-eval interning] (rust-lang/rust#119044), only as a [future compatiblity lint] (rust-lang/rust#122204) for now. - [Deny braced macro invocations in let-else.] (rust-lang/rust#119062) Compiler -------- - [Include lint `soft_unstable` in future breakage reports.] (rust-lang/rust#116274) - [Make `i128` and `u128` 16-byte aligned on x86-based targets.] (rust-lang/rust#116672) - [Use `--verbose` in diagnostic output.] (rust-lang/rust#119129) - [Improve spacing between printed tokens.] (rust-lang/rust#120227) - [Merge the `unused_tuple_struct_fields` lint into `dead_code`.] (rust-lang/rust#118297) - [Error on incorrect implied bounds in well-formedness check] (rust-lang/rust#118553), with a temporary exception for Bevy. - [Fix coverage instrumentation/reports for non-ASCII source code.] (rust-lang/rust#119033) - [Fix `fn`/`const` items implied bounds and well-formedness check.] (rust-lang/rust#120019) - [Promote `riscv32{im|imafc}-unknown-none-elf` targets to tier 2.] (rust-lang/rust#118704) - Add several new tier 3 targets: - [`aarch64-unknown-illumos`] (rust-lang/rust#112936) - [`hexagon-unknown-none-elf`] (rust-lang/rust#117601) - [`riscv32imafc-esp-espidf`] (rust-lang/rust#119738) - [`riscv32im-risc0-zkvm-elf`] (rust-lang/rust#117958) Refer to Rust's [platform support page][platform-support-doc] for more information on Rust's tiered platform support. Libraries --------- - [Implement `From<&[T; N]>` for `Cow<[T]>`.] (rust-lang/rust#113489) - [Remove special-case handling of `vec.split_off (0)`.](rust-lang/rust#119917) Stabilized APIs --------------- - [`array::each_ref`] (https://doc.rust-lang.org/stable/std/primitive.array.html#method.each_ref) - [`array::each_mut`] (https://doc.rust-lang.org/stable/std/primitive.array.html#method.each_mut) - [`core::net`] (https://doc.rust-lang.org/stable/core/net/index.html) - [`f32::round_ties_even`] (https://doc.rust-lang.org/stable/std/primitive.f32.html#method.round_ties_even) - [`f64::round_ties_even`] (https://doc.rust-lang.org/stable/std/primitive.f64.html#method.round_ties_even) - [`mem::offset_of!`] (https://doc.rust-lang.org/stable/std/mem/macro.offset_of.html) - [`slice::first_chunk`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.first_chunk) - [`slice::first_chunk_mut`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.first_chunk_mut) - [`slice::split_first_chunk`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.split_first_chunk) - [`slice::split_first_chunk_mut`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.split_first_chunk_mut) - [`slice::last_chunk`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.last_chunk) - [`slice::last_chunk_mut`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.last_chunk_mut) - [`slice::split_last_chunk`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.split_last_chunk) - [`slice::split_last_chunk_mut`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.split_last_chunk_mut) - [`slice::chunk_by`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.chunk_by) - [`slice::chunk_by_mut`] (https://doc.rust-lang.org/stable/std/primitive.slice.html#method.chunk_by_mut) - [`Bound::map`] (https://doc.rust-lang.org/stable/std/ops/enum.Bound.html#method.map) - [`File::create_new`] (https://doc.rust-lang.org/stable/std/fs/struct.File.html#method.create_new) - [`Mutex::clear_poison`] (https://doc.rust-lang.org/stable/std/sync/struct.Mutex.html#method.clear_poison) - [`RwLock::clear_poison`] (https://doc.rust-lang.org/stable/std/sync/struct.RwLock.html#method.clear_poison) Cargo ----- - [Extend the build directive syntax with `cargo::`.] (rust-lang/cargo#12201) - [Stabilize metadata `id` format as `PackageIDSpec`.] (rust-lang/cargo#12914) - [Pull out as `cargo-util-schemas` as a crate.] (rust-lang/cargo#13178) - [Strip all debuginfo when debuginfo is not requested.] (rust-lang/cargo#13257) - [Inherit jobserver from env for all kinds of runners.] (rust-lang/cargo#12776) - [Deprecate rustc plugin support in cargo.] (rust-lang/cargo#13248) Rustdoc ----- - [Allows links in markdown headings.] (rust-lang/rust#117662) - [Search for tuples and unit by type with `()`.] (rust-lang/rust#118194) - [Clean up the source sidebar's hide button.] (rust-lang/rust#119066) - [Prevent JS injection from `localStorage`.] (rust-lang/rust#120250) Misc ---- - [Recommend version-sorting for all sorting in style guide.] (rust-lang/rust#115046) Internal Changes ---------------- These changes do not affect any public interfaces of Rust, but they represent significant improvements to the performance or internals of rustc and related tools. - [Add more weirdness to `weird-exprs.rs`.] (rust-lang/rust#119028)

rustdoc: clean up source sidebar hide button

859bbc5

This is a redesign of the feature, with parts pulled from rust-lang#119049 but with a button that looks more like a button and matches the one used on other sidebar pages.

rustbot assigned fmease Dec 18, 2023

notriddle assigned GuillaumeGomez and unassigned fmease Dec 18, 2023

rustbot added S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. labels Dec 18, 2023

notriddle marked this pull request as draft December 18, 2023 06:17

notriddle mentioned this pull request Dec 18, 2023

Improve accessibility for source sidebar collapse/expand button #119049

Closed

This comment has been minimized.

Sign in to view

notriddle force-pushed the notriddle/sidebar-source-redesign branch from 969ab31 to 668fe2d Compare December 18, 2023 19:20

This comment has been minimized.

Sign in to view

Add back the column

bd14fb6

notriddle force-pushed the notriddle/sidebar-source-redesign branch from 668fe2d to bd14fb6 Compare December 18, 2023 19:42

This comment has been minimized.

Sign in to view

notriddle force-pushed the notriddle/sidebar-source-redesign branch from 8272eae to c3e29ea Compare December 18, 2023 20:56

Add border bottom for source sidebar title area

66779ff

Use folder icon instead of hamburger and sidebar

34984a6

GuillaumeGomez reviewed Dec 20, 2023

View reviewed changes

src/librustdoc/html/static/css/noscript.css Show resolved Hide resolved

GuillaumeGomez approved these changes Dec 20, 2023

View reviewed changes

rfcbot added proposed-final-comment-period Proposed to merge/close by relevant subteam, see T-<team> label. Will enter FCP once signed off. disposition-merge This issue / PR is in PFCP or FCP with a disposition to merge it. labels Dec 20, 2023

rfcbot added final-comment-period In the final comment period and will be merged soon unless new substantive objections are raised. and removed proposed-final-comment-period Proposed to merge/close by relevant subteam, see T-<team> label. Will enter FCP once signed off. labels Dec 21, 2023

bors added S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. and removed S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. labels Dec 31, 2023

bors added the merged-by-bors This PR was explicitly merged by bors. label Dec 31, 2023

bors merged commit 67b6975 into rust-lang:master Dec 31, 2023
12 checks passed

rustbot added this to the 1.77.0 milestone Dec 31, 2023

notriddle deleted the notriddle/sidebar-source-redesign branch December 31, 2023 17:43

bors mentioned this pull request Dec 31, 2023

Simplify source pages sidebar handling #119016

Closed

apiraino removed the to-announce Announce this issue on triage meeting label Jan 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rustdoc: clean up source sidebar hide button #119066

rustdoc: clean up source sidebar hide button #119066

notriddle commented Dec 18, 2023 •

edited

rustbot commented Dec 18, 2023

rustbot commented Dec 18, 2023

This comment has been minimized.

GuillaumeGomez commented Dec 18, 2023

notriddle commented Dec 18, 2023

GuillaumeGomez commented Dec 18, 2023

This comment has been minimized.

notriddle commented Dec 18, 2023

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

GuillaumeGomez commented Dec 18, 2023

notriddle commented Dec 18, 2023

GuillaumeGomez commented Dec 18, 2023 •

edited

notriddle commented Dec 19, 2023 •

edited

GuillaumeGomez commented Dec 20, 2023

GuillaumeGomez commented Dec 20, 2023

rfcbot commented Dec 20, 2023 •

edited by Nemo157

Nemo157 commented Dec 21, 2023

rfcbot commented Dec 21, 2023

rfcbot commented Dec 31, 2023

GuillaumeGomez commented Dec 31, 2023

bors commented Dec 31, 2023

bors commented Dec 31, 2023

bors commented Dec 31, 2023

rust-timer commented Dec 31, 2023

notriddle commented Dec 31, 2023

rustdoc: clean up source sidebar hide button #119066

rustdoc: clean up source sidebar hide button #119066

Conversation

notriddle commented Dec 18, 2023 • edited

rustbot commented Dec 18, 2023

rustbot commented Dec 18, 2023

This comment has been minimized.

GuillaumeGomez commented Dec 18, 2023

notriddle commented Dec 18, 2023

GuillaumeGomez commented Dec 18, 2023

This comment has been minimized.

notriddle commented Dec 18, 2023

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

GuillaumeGomez commented Dec 18, 2023

notriddle commented Dec 18, 2023

GuillaumeGomez commented Dec 18, 2023 • edited

notriddle commented Dec 19, 2023 • edited

GuillaumeGomez commented Dec 20, 2023

GuillaumeGomez commented Dec 20, 2023

rfcbot commented Dec 20, 2023 • edited by Nemo157

Nemo157 commented Dec 21, 2023

rfcbot commented Dec 21, 2023

rfcbot commented Dec 31, 2023

GuillaumeGomez commented Dec 31, 2023

bors commented Dec 31, 2023

bors commented Dec 31, 2023

bors commented Dec 31, 2023

rust-timer commented Dec 31, 2023

Overall result: ❌ regressions - no action needed

Instruction count

Max RSS (memory usage)

Cycles

Binary size

notriddle commented Dec 31, 2023

notriddle commented Dec 18, 2023 •

edited

GuillaumeGomez commented Dec 18, 2023 •

edited

notriddle commented Dec 19, 2023 •

edited

rfcbot commented Dec 20, 2023 •

edited by Nemo157