Rustdoc 1.60 produces flat UI

[pravic]

Rustdoc 1.59 and earlier used to produce a nice clean UI, Rustdoc 1.60 is weirdly flat and inconvenient.

Version it worked on

1.59 and earlier:

Version with regression

1.60 and later:

rustc --version --verbose:

rustc 1.60.0 (7737e0b5c 2022-04-04)
binary: rustc
commit-hash: 7737e0b5c4103216d6fd8cf941b7ab9bdbaace7c
commit-date: 2022-04-04
host: x86_64-pc-windows-msvc
release: 1.60.0
LLVM version: 14.0.0

[pravic]

@rustbot modify labels: +A-rustdoc-ui +A-rustdoc-themes

[Urgau]

See this blog post for more information about the changes: https://blog.guillaume-gomez.fr/articles/2022-04-08+rustdoc%3A+Recent+UI+and+UX+changes+in+generated+documentation

[GuillaumeGomez]

I removed a few labels. If you want to start a discussion about a change you didn't like, it's fine to do so. However please provide an alternative and some arguments to support it.

[sharnoff]

Not the original poster, but I found the changes a little disorienting & thought I'd weigh in:

TL;DR: IMO it looks pretty, but I think it should have the separator lines (or some equivalent visual marker).

Overall: I think it looks significantly more aesthetically pleasing. However: previously, I used the separator lines as a distinct visual marker to easily glance to and between sections of the sidebar. This version doesn't have an equivalent, which has made it harder for me to use.

Generalizing from my experience: In the zulip discussion, MDN's style was mentioned as inspiration. IMO, MDN's style works there because the sidebar is a "related topics" area -- it's not meant for primary navigation, unlike rustdoc's sidebar. In MDN's case, the sidebar content is readable only once you look over, but that's ok because you're not there to quickly pick something out of the sidebar -- while reading the article, you're probably not even aware that the sidebar exists, but it has to be there to balance out the page. (see below)

Aside from navigation, IMO this layout feels somewhat unbalanced -- particularly when the names in the sidebar are relatively short (taking up only 1/3 to 1/2 of the width). For example:

I think my feeling here is coming from a lack of definition between the sidebar and the main body, which I think would also be better with separator lines -- or at least something spanning most of the width of the sidebar at multiple points. Again, the sidebar is great if you're looking right at it; I've found it disorienting when I'm looking at the main body of the page.

A couple ideas

I don't think separator lines aren't necessarily the best option here -- I happen to be referring to them because it's what we had before, but perhaps boxes around the text or background shading might fulfill a similar function.

[GuillaumeGomez]

cc @jsha

[jsha]

Thanks for the feedback!

a lack of definition between the sidebar and the main body, which I think would also be better with separator lines

Interestingly, there is indeed a separator line (the scrollbar track) on both the light and the dark themes:

The ayu theme is unique in making the scrollbar track invisible (same color as background). I think it would make sense to change that, both for consistency with the other themes, and to make it visually apparent that the sidebar is scrollable.

The light and dark themes also use a different background color for the sidebar. I'm guessing the ayu theme intentionally doesn't (though I'd have to check). Still, showing a scrollbar track should do the job.

[sharnoff]

@jsha the scrollbar track is definitely a big component of it!

Here's the result of setting it to #1d232b, which seemed to match the other themes:

Screenshot

While I was tinkering with the css, I decided to see if there were any other bits I thought made it better. I'm tossing these in here as a "hey, whadda ya think of these" kind of deal, with no personal attachment to them - so, take them as you will :P

1. Centering and underlining location (includes item name & "also in this module"):

Screenshot

Screenshot (sidebar scrolled down, "in std::cmp" in view)

With this, I had particularly noticed how the current style doesn't align Ordering (in the screenshot) and the rust logo, which I felt might have been throwing me off. I think centering looks a bit better? The underline I think isn't perfect (could just be the color), but it looked weird without it.

2. Shift block headers (.sidebar .h2) left by 4px and block items right slightly (not sure exactly why it's shifted right, 20 + 4 should equal 24, but... I am far from a CSS wizard):

Screenshot

Screenshot (scrolled down)

Screenshot (current, for comparison)

Screenshot (current, scrolled down)

I particularly noticed the small indent while scrolling down the sidebar trying to find something -- I think the small offset helps draw the eye to the headers.

With these changes, I do feel that the sidebar becomes a lot busier again -- which I know was part of the reasoning for the original UI changes in the first place. Maybe these hypothetical changes are too much - there's probaby a balance point. In particular, I think that headers with few items feel noticeably more noisy.

---

In any case, I realize that I'm not sure what the intended outcome of this issue should be -- my futzing about with the styling is fun and all, but maybe it'd be more useful to first determine what should happen here before I (or anyone else) spend a bunch of time changing something that wasn't really up for being changed right now.