nordic-dev.net/rust
nordic-dev.net/rust
2
0
Fork 0
mirror of https://github.com/rust-lang/rust.git synced 2024-11-02 15:32:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

rustdoc: use CSS containment to speed up render

Browse Source 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment

This affected layout a little and required adjustments to the CSS to
keep spacing the same. In particular, the margins of adjacent items
usually overlap with each other. However, when an item has contain:
layout, any margins of child nodes push out the size of the item itself.
This was making spacing between items a little too big. To solve that, I
removed margins in some places: in particular for certain classes that
often occur at the end of a `details.rustdoc-toggle` block, I removed
their bottom margin. Generally, the margins provided by the next item
down are sufficient.

Also remove an unnecessary margin-top on .code-header.
This commit is contained in:
Jacob Hoffman-Andrews 2022-09-27 09:21:24 -07:00
parent 57ee5cf5a9
commit 8846c0853d
2 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/librustdoc/html/static/css/rustdoc.css
View File

@ -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 {
@ -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,
@ -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;
@ -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;
@ -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;
@ -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". */
@ -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;
}
#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;
}

6
src/test/rustdoc-gui/sidebar-mobile-scroll.goml
View File

@ -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"}
// Open the sidebar menu.
click: ".sidebar-menu-toggle"
@ -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"}
// 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"}