Make impl section headers sticky

[GuillaumeGomez]

Fixes #133506.

It makes impl sections headings sticky, allowing users to know what impl items they are currently going through.

You can test it here.

Some technical details: to make it work (because summary use both ::before and ::after pseudo-elements), I needed to give some left margin and padding so that the other collapse/expand toggles of children items would not appear on the sticky heading's toggle. Hence why the GUI tests new values look so weird.

r? @notriddle

[rustbot]

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez, @jsha

[GuillaumeGomez]

Forgot to push the second commit updating GUI tests...

[joshtriplett]

I love it! https://rustdoc.crud.net/imperio/sticky-headings/std/primitive.slice.html looks great.

I can confirm that it works as expected in Firefox on both desktop and mobile.

[notriddle]

It's messed up when the sidebar is hidden. Otherwise, seems fine.

[GuillaumeGomez]

Kinda fixed the mess up with the sidebar button. Not perfect but sadly, we can't set an element position based on the page scroll without JS, and with JS, having a listener on the page scroll is terrible for performance. So instead, I simply make the button above the heading. It'll prevent to collapse the heading if the button is present, but I think it's ok.

[GuillaumeGomez]

@rfcbot fcp merge

[rfcbot]

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

• @GuillaumeGomez
• @Manishearth
• @Nemo157
• @aDotInTheVoid
• @camelid
• @fmease
• @jsha
• @notriddle

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.

[GuillaumeGomez]

Damn, only wanted front-end people. Sorry for the noise.

@rfcbot fcp cancel

[rfcbot]

@GuillaumeGomez proposal cancelled.

[GuillaumeGomez]

@rfcbot fcp merge

[rfcbot]

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

• @GuillaumeGomez
• @camelid
• @jsha
• @notriddle

Concerns:

• mobile hidden persistent navigation bar (Make impl section headers sticky #133717 (comment))
• scroll after collapse (Make impl section headers sticky #133717 (comment))
• scroll-margin-top (Make impl section headers sticky #133717 (comment))

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.

[notriddle]

The trouble with this sort of thing is that it's really hard to get all the interaction features right. Here's a few cases that act weird:

• If I click an item in the sidebar, it gets lost underneath the impl header.

  

  Normally, the solution to this one is scroll-margin-top, as in rustdoc mobile: fix scroll offset when jumping to internal id #93067, but, unfortunately, we don't know how tall the impl header is:

  

• If I collapse an impl block while I'm scrolled some distance into it, I wind up at some arbitrary point in the document. I don't know how to fix this one without JS.

  

• Hidden navigation bar is still a mess on mobile:

  

[notriddle]

@rfcbot concern scroll-margin-top

@rfcbot concern scroll after collapse

@rfcbot concern mobile hidden persistent navigation bar

[Manishearth]

(In favor of this general design, but echo notriddle's concern that this is really tricky to get right, so we should spend some time experimenting and ensuring it works in all scenarios)