diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css
index 5c02e2eb26a3..6b80d3e7bbee 100644
--- a/src/librustdoc/html/static/css/noscript.css
+++ b/src/librustdoc/html/static/css/noscript.css
@@ -29,6 +29,10 @@ nav.sub {
display: none;
}
+#synthetic-implementors-list, #implementors-list {
+ display: block;
+}
+
/* Begin: styles for themes
Keep the default light and dark themes synchronized with the ones
in rustdoc.css */
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 36f44a8072af..a5e43e1d7d19 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1158,6 +1158,12 @@ div.where {
margin-left: calc(var(--docblock-indent) + var(--impl-items-indent));
}
+#synthetic-implementors-list, #implementors-list {
+ /* To prevent layout shift when loading the page with extra implementors being loaded
+ from JS, we hide the list until it's complete. */
+ display: none;
+}
+
.item-info code {
font-size: 0.875rem;
}
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index fb6b70492181..72d7e6131814 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -813,7 +813,7 @@ function preLoadCss(cssUrl) {
return [elem, elem ? elem.querySelector(".negative-marker") : null];
}
const implementors = implementorsElems("implementors-list");
- const synthetic_implementors = implementorsElems("synthetic-implementors-list");
+ const syntheticImplementors = implementorsElems("synthetic-implementors-list");
const inlined_types = new Set();
const TEXT_IDX = 0;
@@ -821,13 +821,13 @@ function preLoadCss(cssUrl) {
const SYNTHETIC_IDX = 2;
const TYPES_IDX = 3;
- if (synthetic_implementors[0]) {
+ if (syntheticImplementors[0]) {
// This `inlined_types` variable is used to avoid having the same implementation
// showing up twice. For example "String" in the "Sync" doc page.
//
// By the way, this is only used by and useful for traits implemented automatically
// (like "Send" and "Sync").
- onEachLazy(synthetic_implementors[0].getElementsByClassName("impl"), el => {
+ onEachLazy(syntheticImplementors[0].getElementsByClassName("impl"), el => {
const aliases = el.getAttribute("data-aliases");
if (!aliases) {
return;
@@ -862,7 +862,7 @@ function preLoadCss(cssUrl) {
struct_loop:
for (const struct of structs) {
- const list = struct[SYNTHETIC_IDX] ? synthetic_implementors : implementors;
+ const list = struct[SYNTHETIC_IDX] ? syntheticImplementors : implementors;
// The types list is only used for synthetic impls.
// If this changes, `main.js` and `write_shared.rs` both need changed.
@@ -910,6 +910,12 @@ function preLoadCss(cssUrl) {
currentNbImpls += 1;
}
}
+ if (implementors[0]) {
+ implementors[0].style.display = "block";
+ }
+ if (syntheticImplementors[0]) {
+ syntheticImplementors[0].style.display = "block";
+ }
};
if (window.pending_implementors) {
window.register_implementors(window.pending_implementors);
diff --git a/tests/rustdoc-gui/implementors.goml b/tests/rustdoc-gui/implementors.goml
index 99fb9b9aff54..d4542c6f7817 100644
--- a/tests/rustdoc-gui/implementors.goml
+++ b/tests/rustdoc-gui/implementors.goml
@@ -1,7 +1,7 @@
// The goal of this test is to check that the external trait implementors, generated with JS,
// have the same display than the "local" ones.
go-to: "file://" + |DOC_PATH| + "/implementors/trait.Whatever.html"
-assert: "#implementors-list"
+wait-for-css: ("#implementors-list", {"display": "block"})
// There are supposed to be four implementors listed.
assert-count: ("#implementors-list .impl", 4)
// There are supposed to be two non-negative implementors.
@@ -66,3 +66,8 @@ assert-count: ("#implementors-list .impl", 1)
go-to: "file://" + |DOC_PATH| + "/http/trait.HttpTrait.html"
assert-count: ("#implementors-list .impl", 1)
assert-attribute: ("#implementors-list .impl a.trait", {"href": "../http/trait.HttpTrait.html"})
+
+// Now we check that if JS is disabled, the implementors list will be visible.
+javascript: false
+reload:
+assert-css: ("#implementors-list", {"display": "block"})