rustdoc: Source code pages briefly render in other font and weight as page loads

[camelid]

For example: https://doc.rust-lang.org/nightly/nightly-rustc/src/rustc_attr/builtin.rs.html#96-99

This happens in macOS Safari. It doesn't seem to occur in Firefox on macOS.

I think this regressed within the last day or two since I would've noticed otherwise.

[camelid]

While the brief rendering in bold doesn't happen for the std docs—so I assume it's related to go-to-definition—the std docs do have a brief rendering in a different font that doesn't happen on beta, so I think the same issue is present there as well.

[camelid]

The flash-of-bold-text part seems to be fixed, but now the Rust logo flashes briefly in the sidebar while the page loads. cc @GuillaumeGomez

[camelid]

I'm removing the regression label because that nightly is long past and I don't know when the new regression occurred.

[GuillaumeGomez]

I'm not sure why it's flashing like this. Since @jsha worked on the font to prevent the flashing they might have an idea on what's wrong in here?

[jsha]

Here's my first trick in debugging such things: open the Dev Tools, go to Sources, and hit the "Pause" button, so the next execution of JS on the page will pause. Load the page. When JS execution is paused, you'll see that the logo is visible (but squashed) in the sidebar. That means the logo is shown by default, but hidden with JavaScript. That will cause a flash of visibility because the JS executes after the page loads. The solution will be to hide it with CSS instead.

In general I think we should overhaul both the design and the implementation of the source sidebar. Right now it's nestled inside the regular sidebar in the DOM, which makes styling it weird. It should really have its own <nav> element that can be styled independently. A couple of other source sidebar problems:

• If you have the source sidebar expanded, when you navigate between pages, it re-does its "expand" animation. It should just start out expanded, with no animation.
• While it's doing its expand animation, the Rust logo is squashed horizontally, and grows with the sidebar.

My preferred fix for these is to remove the animation. We don't do an animation like that for the mobile sidebar, and I don't think it adds much benefit.

[GuillaumeGomez]

Removing animations sounds like a good idea. Less CSS to maintain. I'll try to put something together shortly.

[jsha]

Looks like maybe I was wrong about JS being the cause. We have this CSS rule:

.source .sidebar>*:not(:first-child) {
    transition: opacity 0.5s,visibility 0.2s;
    opacity: 0;
    visibility: hidden;
}

I think it's that visibility: 0.2s that's doing it. Basically our CSS is telling the page "this should be visibility: hidden, but take 200ms to make it so".

So I suspect removing the animations will fix the logo problem as well.

[GuillaumeGomez]

Yes, it's what I just saw. This issue should be pretty easy to fix.

[camelid]

If you have the source sidebar expanded, when you navigate between pages, it re-does its "expand" animation. It should just start out expanded, with no animation.

I'd personally prefer that we just make the sidebar collapse upon navigating to a new page. I find it unintuitive that it stays open, and every time I navigate, I have to close it manually because it covers the page.

[jsha]

The intent is that it should not cover the page. I thought we fixed that.

[camelid]

Oops, I forgot that part is fixed. In that case, it still shrinks the rest of the page and adds noise.