Make implementors list visible only when filled

Author: GuillaumeGomez

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 */

src/librustdoc/html/static/css/rustdoc.css

@@ -1125,6 +1125,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;
 }

src/librustdoc/html/static/js/main.js

@@ -687,21 +687,21 @@ 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;
         const IS_NEG_IDX = 1;
         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;
@@ -736,7 +736,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.
@@ -784,6 +784,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);

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"})