Skip to content
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

Jump to bottom

rustdoc: use CSS containment to speed up render #102253

Merged
merged 2 commits into from
Sep 28, 2022
Merged

rustdoc: use CSS containment to speed up render #102253

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8846c08
rustdoc: use CSS containment to speed up render
jsha Sep 27, 2022
b5b77a2
Update src/test/rustdoc-gui/sidebar-mobile-scroll.goml
jsha Sep 27, 2022
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
42 changes: 29 additions & 13 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 @@ -132,7 +132,7 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 500;
}
h1, h2, h3, h4 {
margin: 20px 0 15px 0;
margin: 25px 0 15px 0;
padding-bottom: 6px;
}
.docblock h3, .docblock h4, h5, h6 {
Expand Down Expand Up @@ -176,8 +176,6 @@ h4.code-header {
border-bottom-style: none;
margin: 0;
padding: 0;
margin-top: 0.6rem;
margin-bottom: 0.4rem;
}
.impl,
.impl-items .method,
Expand Down Expand Up @@ -292,6 +290,11 @@ p {
https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */
margin: 0 0 .75em 0;
}
/* For the last child of a div, the margin will be taken care of
by the margin-top of the next item. */
p:last-child {
margin: 0;
}

summary {
outline: none;
Expand Down Expand Up @@ -565,9 +568,16 @@ h2.location a {

.rustdoc .example-wrap {
display: flex;
margin-bottom: 10px;
position: relative;
}
.rustdoc .example-wrap {
margin-bottom: 10px;
}
/* For the last child of a div, the margin will be taken care of
by the margin-top of the next item. */
.rustdoc .example-wrap:last-child {
margin-bottom: 0px;
}

pre.example-line-numbers {
overflow: initial;
Expand Down Expand Up @@ -726,10 +736,6 @@ pre, .rustdoc.source .example-wrap {
margin-left: 24px;
}

.content .impl-items .docblock, .content .impl-items .item-info {
margin-bottom: .6em;
}

#main-content > .item-info {
margin-top: 0;
margin-left: 0;
Expand Down Expand Up @@ -1532,6 +1538,16 @@ details.dir-entry a {
display: block;
}

/* We use CSS containment on the details elements because most sizeable elements
of the page are contained in one of these. This also makes re-rendering
faster on document changes (like closing and opening toggles).
Unfortunately we can't yet specify contain: content or contain: strict
because the [-]/[+] toggles extend past the boundaries of the <details>
https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
details.rustdoc-toggle {
contain: layout;
}

/* The hideme class is used on summary tags that contain a span with
placeholder text shown only when the toggle is closed. For instance,
"Expand description" or "Show methods". */
Expand Down Expand Up @@ -2012,17 +2028,17 @@ in storage.js plus the media query with (min-width: 701px)
margin-bottom: 0.75em;
}

.method-toggle[open] {
.method-toggle[open]:not(:last-child) {
margin-bottom: 2em;
}

.implementors-toggle[open] {
.implementors-toggle[open]:not(:last-child) {
margin-bottom: 2em;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This 2em margin works out to be 32px.

This means that, by disabling it on the last child, you're reducing the margin on the bottom of a list of implementors in this scenario (on current nightly, it'll be 32px, while on your branch, it's now 25px, because that's the top margin of the header).

}

#trait-implementations-list .method-toggle,
#synthetic-implementations-list .method-toggle,
#blanket-implementations-list .method-toggle {
#trait-implementations-list .method-toggle:not(:last-child),
#synthetic-implementations-list .method-toggle:not(:last-child),
#blanket-implementations-list .method-toggle:not(:last-child) {
margin-bottom: 1em;
}

Expand Down
6 changes: 3 additions & 3 deletions src/test/rustdoc-gui/sidebar-mobile-scroll.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ assert-css: (".sidebar", {"display": "block", "left": "-1000px"})

// Scroll down.
scroll-to: "//h2[@id='blanket-implementations']"
assert-window-property: {"pageYOffset": "643"}
assert-window-property: {"pageYOffset": "645"}
jsha marked this conversation as resolved.
Show resolved Hide resolved

// Open the sidebar menu.
click: ".sidebar-menu-toggle"
Expand All @@ -21,11 +21,11 @@ assert-window-property: {"pageYOffset": "0"}
// Close the sidebar menu. Make sure the scroll position gets restored.
click: ".sidebar-menu-toggle"
wait-for-css: (".sidebar", {"left": "-1000px"})
assert-window-property: {"pageYOffset": "643"}
assert-window-property: {"pageYOffset": "645"}
jsha marked this conversation as resolved.
Show resolved Hide resolved

// Now test that scrollability returns when the browser window is just resized.
click: ".sidebar-menu-toggle"
wait-for-css: (".sidebar", {"left": "0px"})
assert-window-property: {"pageYOffset": "0"}
size: (900, 600)
assert-window-property: {"pageYOffset": "643"}
assert-window-property: {"pageYOffset": "645"}
jsha marked this conversation as resolved.
Show resolved Hide resolved