Skip to content

Make impl section headers sticky #133717

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.

Sign up for GitHub

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

Open
GuillaumeGomez wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Make impl section headers sticky #133717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/librustdoc/html/static/css/noscript.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ nav.sub {
display: block;
}

details.toggle [id] {
/* This is used to prevent anchors from going below the sticky `details`. */
scroll-margin-top: 30vh;
}

/* Begin: styles for themes
Keep the default light and dark themes synchronized with the ones
in rustdoc.css */
Expand Down Expand Up @@ -147,6 +152,18 @@ nav.sub {
--notable-badge-green: oklch(0.88 0.21 150);
--notable-badge-blue: oklch(0.88 0.21 240);
--notable-badge-violet: oklch(0.88 0.21 300);
--collapse-toggle-closed-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="black" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-closed-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="black" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="black" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="black" fill="none" stroke-width="1px"/></svg>');
}
/* End theme: light */

Expand Down Expand Up @@ -264,6 +281,18 @@ nav.sub {
--notable-badge-green: oklch(0.55 0.21 150);
--notable-badge-blue: oklch(0.55 0.21 240);
--notable-badge-violet: oklch(0.55 0.21 300);
--collapse-toggle-closed-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="white" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-closed-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="white" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="white" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="white" fill="none" stroke-width="1px"/></svg>');
}
/* End theme: dark */
}
134 changes: 103 additions & 31 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
--hamburger-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="0 0 22 22" fill="none" stroke="black">\
<path d="M3,5h16M3,11h16M3,17h16" stroke-width="2.75"/></svg>');
--sticky-offset: 0;
}

:root.sans-serif-fonts {
Expand Down Expand Up @@ -2205,10 +2206,10 @@ button#toggle-all-docs:hover, button#toggle-all-docs:focus-visible {
/* Magnifying glass */
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
width="18" height="18" viewBox="0 0 16 16">\
<circle r="5" cy="7" cx="7" style="fill:none;stroke:black;stroke-width:3"/><path \
d="M14.5,14.5 12,12" style="fill:none;stroke:black;stroke-width:3;stroke-linecap:round">\
</path><desc>Search</desc>\
</svg>');
<circle r="5" cy="7" cx="7" style="fill:none;stroke:black;stroke-width:3"/><path \
d="M14.5,14.5 12,12" style="fill:none;stroke:black;stroke-width:3;stroke-linecap:round">\
</path><desc>Search</desc>\
</svg>');
width: 18px;
height: 18px;
filter: var(--settings-menu-filter);
Expand Down Expand Up @@ -2403,6 +2404,21 @@ details.toggle {
position: relative;
}

h2.section-header + div > details.implementors-toggle > summary,
details.toggle.big-toggle > summary {
position: sticky;
top: 0;
background: var(--main-background-color);
z-index: 1;
}

h2.section-header + div > details.implementors-toggle > summary.sticky .item-info,
h2.section-header + div > details.implementors-toggle > summary.sticky .docblock,
details.toggle.big-toggle > summary.sticky .item-info,
details.toggle.big-toggle > summary.sticky .docblock {
display: none;
}

details.big-toggle {
/* This makes [-] on the same line as <summary>. */
contain: inline-size;
Expand Down Expand Up @@ -2431,18 +2447,41 @@ details.toggle > summary.hideme > span {
}

details.toggle > summary::before {
/* arrow pointing left */
background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 12 12" \
enable-background="new 0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
<path d="M4,2l4,4l-4,4" stroke="black" fill="none" stroke-width="1px"/></svg>');
/* arrow pointing right */
background-image: var(--collapse-toggle-closed-semi-opaque);
background-color: var(--main-background-color);
background-repeat: no-repeat;
background-position: left 4px;
content: "";
cursor: pointer;
width: 16px;
height: 16px;
width: 24px;
height: 100%;
display: inline-block;
vertical-align: middle;
opacity: .5;
filter: var(--toggle-filter);
}

details.toggle > summary:focus::before,
details.toggle > summary:hover::before {
background-image: var(--collapse-toggle-closed-opaque);
}

details.toggle[open] > summary::before {
/* arrow pointing down */
background-image: var(--collapse-toggle-open-semi-opaque);
}

details.toggle[open] > summary:focus::before,
details.toggle[open] > summary:hover::before {
background-image: var(--collapse-toggle-open-opaque);
}

details.toggle[open] > summary::after {
content: "Collapse";
}

details.toggle [id] {
/* This is used to prevent anchors from going below the sticky `details`. */
scroll-margin-top: var(--sticky-offset);
}

details.toggle > summary.hideme > span,
Expand All @@ -2465,11 +2504,6 @@ details.toggle > summary.hideme::after {
content: "";
}

details.toggle > summary:focus::before,
details.toggle > summary:hover::before {
opacity: 1;
}

details.toggle > summary:focus-visible::before {
/* The SVG is black, and gets turned white using a filter in the dark themes.
Do the same with the outline.
Expand All @@ -2490,7 +2524,7 @@ details.toggle > summary.hideme::before {
details.toggle > summary:not(.hideme)::before {
position: absolute;
left: -24px;
top: 4px;
top: 0;
}

.impl-items > details.toggle > summary:not(.hideme)::before,
Expand All @@ -2515,7 +2549,9 @@ details.toggle > summary:not(.hideme)::before {

details.big-toggle > summary:not(.hideme)::before {
left: -34px;
top: 9px;
width: 34px;
height: 100%;
background-position: left 9px;
}

/* When a "hideme" summary is open and the "Expand description" or "Show
Expand All @@ -2531,17 +2567,6 @@ details.toggle[open] > summary.hideme > span {
display: none;
}

details.toggle[open] > summary::before {
/* arrow pointing down */
background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 12 12" \
enable-background="new 0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
<path d="M2,4l4,4l4,-4" stroke="black" fill="none" stroke-width="1px"/></svg>');
}

details.toggle[open] > summary::after {
content: "Collapse";
}

details.toggle:not([open]) > summary .docblock {
max-height: calc(1.5em + 0.75em);
overflow-y: hidden;
Expand Down Expand Up @@ -2726,6 +2751,9 @@ in src-script.js and main.js
--impl-items-indent: 0.7em;
--topbar-height: 45px;
}
:root.hide-sidebar {
--topbar-height: 0;
}

/* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
Expand Down Expand Up @@ -2906,7 +2934,8 @@ in src-script.js and main.js

#main-content > details.toggle > summary::before,
#main-content > div > details.toggle > summary::before {
left: -11px;
left: -24px;
width: 24px;
}

/* sidebar button becomes topbar button */
Expand Down Expand Up @@ -2966,6 +2995,7 @@ in src-script.js and main.js
.impl-items > details.toggle > summary:not(.hideme)::before,
#main-content > .methods > details.toggle > summary:not(.hideme)::before {
left: -20px;
width: 20px;
}

/* Align summary-nested and unnested item-info gizmos. */
Expand All @@ -2988,6 +3018,12 @@ in src-script.js and main.js
html:not(.src-sidebar-expanded) .src #sidebar-button > a:focus-visible {
background-color: var(--sidebar-background-color);
}

h2.section-header + div > details.implementors-toggle > summary,
details.toggle.big-toggle > summary {
top: var(--topbar-height);
margin-left: 10px;
}
}


Expand Down Expand Up @@ -3316,6 +3352,18 @@ by default.
--notable-badge-green: oklch(0.88 0.21 150);
--notable-badge-blue: oklch(0.88 0.21 240);
--notable-badge-violet: oklch(0.88 0.21 300);
--collapse-toggle-closed-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="black" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-closed-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="black" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="black" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="black" fill="none" stroke-width="1px"/></svg>');
}
/* End theme: light */

Expand Down Expand Up @@ -3432,6 +3480,18 @@ by default.
--notable-badge-green: oklch(0.55 0.21 150);
--notable-badge-blue: oklch(0.55 0.21 240);
--notable-badge-violet: oklch(0.55 0.21 300);
--collapse-toggle-closed-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="white" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-closed-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="white" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="white" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="white" fill="none" stroke-width="1px"/></svg>');
}
/* End theme: dark */

Expand Down Expand Up @@ -3552,6 +3612,18 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--notable-badge-green: oklch(0.49 0.21 150);
--notable-badge-blue: oklch(0.49 0.21 240);
--notable-badge-violet: oklch(0.49 0.21 300);
--collapse-toggle-closed-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="white" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-closed-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4,2l4,4l-4,4" \
stroke="white" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-semi-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="white" stroke-opacity="0.5" fill="none" stroke-width="1px"/></svg>');
--collapse-toggle-open-opaque: url('data:image/svg+xml,<svg width="16" height="16" \
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M2,4l4,4l4,-4" \
stroke="white" fill="none" stroke-width="1px"/></svg>');
}

:root[data-theme="ayu"] h1,
Expand Down
70 changes: 70 additions & 0 deletions src/librustdoc/html/static/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1293,6 +1293,7 @@ function preLoadCss(cssUrl) {
base.TOOLTIP_FORCE_VISIBLE = true;
}
}
setupScrollObserver();
});

const mainElem = document.getElementById(MAIN_ID);
Expand Down Expand Up @@ -2249,4 +2250,73 @@ function preLoadCss(cssUrl) {
elem.addEventListener("mouseover", addCopyButton);
elem.addEventListener("click", showHideCodeExampleButtons);
});

/* Setting the "sticky offset" to prevent the heading to hide the target below it. */
function setupScrollObserver() {
function topbarHeight() {
if (window.innerWidth > 700) {
return 0;
}
return parseInt(
window.getComputedStyle(document.documentElement)
.getPropertyValue('--topbar-height'),
10,
);
}

if (window.scrollObserver) {
window.scrollObserver.disconnect();
}

window.scrollObserver = new IntersectionObserver(entries => {
for (const entry of entries) {
// The ratio drops below 1 in two cases: stuck at the top, or partly
// below the bottom of the viewport. Checking `top` tells them apart.
let top = topbarHeight();
if (entry.intersectionRatio < 1 && entry.boundingClientRect.top < (top + 1)) {
if (!entry.target.classList.contains("sticky")) {
entry.target.classList.add("sticky");
document.documentElement.style.setProperty(
"--sticky-offset", `${entry.boundingClientRect.height + top}px`);
const details = entry.target.parentElement;
// We store the callback into `details` to be reused when we want to remove
// the event listener.
details.toggleCallback = () => {
if (!details.open) {
// When we scroll the docs, we're actually scrolling the `html`
// element, so we need to take the current scroll position...
const currentScroll = document.documentElement.scrollTop;
// ... and then we add the current "sticky" heading scroll position
// which is negative so jump back to where it's located.
document.documentElement.scrollTo({
top: details.getBoundingClientRect().top + currentScroll - top,
});
}
};
details.addEventListener("toggle", details.toggleCallback);
}
} else if (entry.target.classList.contains("sticky")) {
entry.target.classList.remove("sticky");
const details = entry.target.parentElement;
details.removeEventListener("toggle", details.toggleCallback);
}
}
}, {
rootMargin: `-${topbarHeight() + 1}px 0px 0px 0px`,
threshold: [1],
});

onEachLazy(
document.querySelectorAll(
"h2.section-header + div > details.implementors-toggle > summary"
),
elem => window.scrollObserver.observe(elem),
);
onEachLazy(
document.querySelectorAll("details.toggle.big-toggle > summary"),
elem => window.scrollObserver.observe(elem),
);
}

setupScrollObserver();
}());
Loading