Auto merge of #85074 - GuillaumeGomez:end-toggle-migration, r=jsha

Migrate top doc and non-exhaustive toggles to details tag

Fixes #83332.

r? `@jsha`

5 files changed, 78 insertions, 227 deletions

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index ea57831c0e5..5b54b32e4dd 100644
--- a/src/librustdoc/html/render/mod.rs
+++ b/src/librustdoc/html/render/mod.rs
@@ -509,7 +509,7 @@ fn document(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, parent: Option
         info!("Documenting {}", name);
     }
     document_item_info(w, cx, item, parent);
-    document_full(w, item, cx);
+    document_full_collapsible(w, item, cx);
 }
 
 /// Render md_text as markdown.
@@ -561,10 +561,29 @@ fn document_short(
     }
 }
 
+fn document_full_collapsible(w: &mut Buffer, item: &clean::Item, cx: &Context<'_>) {
+    document_full_inner(w, item, cx, true);
+}
+
 fn document_full(w: &mut Buffer, item: &clean::Item, cx: &Context<'_>) {
+    document_full_inner(w, item, cx, false);
+}
+
+fn document_full_inner(w: &mut Buffer, item: &clean::Item, cx: &Context<'_>, is_collapsible: bool) {
     if let Some(s) = cx.shared.maybe_collapsed_doc_value(item) {
         debug!("Doc block: =====\n{}\n=====", s);
-        render_markdown(w, cx, &s, item.links(cx));
+        if is_collapsible {
+            w.write_str(
+                "<details class=\"rustdoc-toggle top-doc\" open>\
+                <summary class=\"hideme\">\
+                     <span>Expand description</span>\
+                </summary>",
+            );
+            render_markdown(w, cx, &s, item.links(cx));
+            w.write_str("</details>");
+        } else {
+            render_markdown(w, cx, &s, item.links(cx));
+        }
     }
 }
 
diff --git a/src/librustdoc/html/render/print_item.rs b/src/librustdoc/html/render/print_item.rs
index 9d4ac3cf015..4b7664f28a1 100644
--- a/src/librustdoc/html/render/print_item.rs
+++ b/src/librustdoc/html/render/print_item.rs
@@ -1464,17 +1464,23 @@ fn document_non_exhaustive_header(item: &clean::Item) -> &str {
 
 fn document_non_exhaustive(w: &mut Buffer, item: &clean::Item) {
     if item.is_non_exhaustive() {
-        write!(w, "<div class=\"docblock non-exhaustive non-exhaustive-{}\">", {
-            if item.is_struct() {
-                "struct"
-            } else if item.is_enum() {
-                "enum"
-            } else if item.is_variant() {
-                "variant"
-            } else {
-                "type"
+        write!(
+            w,
+            "<details class=\"rustdoc-toggle non-exhaustive\">\
+                 <summary class=\"hideme\"><span>{}</span></summary>\
+                 <div class=\"docblock\">",
+            {
+                if item.is_struct() {
+                    "This struct is marked as non-exhaustive"
+                } else if item.is_enum() {
+                    "This enum is marked as non-exhaustive"
+                } else if item.is_variant() {
+                    "This variant is marked as non-exhaustive"
+                } else {
+                    "This type is marked as non-exhaustive"
+                }
             }
-        });
+        );
 
         if item.is_struct() {
             w.write_str(
@@ -1502,6 +1508,6 @@ fn document_non_exhaustive(w: &mut Buffer, item: &clean::Item) {
             );
         }
 
-        w.write_str("</div>");
+        w.write_str("</div></details>");
     }
 }
diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index 1bc53625924..a03d20c053d 100644
--- a/src/librustdoc/html/static/main.js
+++ b/src/librustdoc/html/static/main.js
@@ -377,28 +377,7 @@ function hideThemeButtonState() {
             if (savedHash.length === 0) {
                 return;
             }
-            elem = document.getElementById(savedHash.slice(1)); // we remove the '#'
-            if (!elem || !isHidden(elem)) {
-                return;
-            }
-            var parent = elem.parentNode;
-            if (parent && hasClass(parent, "impl-items")) {
-                // In case this is a trait implementation item, we first need to toggle
-                // the "Show hidden undocumented items".
-                onEachLazy(parent.getElementsByClassName("collapsed"), function(e) {
-                    if (e.parentNode === parent) {
-                        // Only click on the toggle we're looking for.
-                        e.click();
-                        return true;
-                    }
-                });
-                if (isHidden(elem)) {
-                    // The whole parent is collapsed. We need to click on its toggle as well!
-                    if (hasClass(parent.lastElementChild, "collapse-toggle")) {
-                        parent.lastElementChild.click();
-                    }
-                }
-            }
+            expandSection(savedHash.slice(1)); // we remove the '#'
         }
     }
 
@@ -465,25 +444,7 @@ function hideThemeButtonState() {
     }
 
     function expandSection(id) {
-        var elem = document.getElementById(id);
-        if (elem && isHidden(elem)) {
-            var h3 = elem.parentNode.previousElementSibling;
-            if (h3 && h3.tagName !== "H3") {
-                h3 = h3.previousElementSibling; // skip div.docblock
-            }
-
-            if (h3) {
-                var collapses = h3.getElementsByClassName("collapse-toggle");
-                if (collapses.length > 0) {
-                    // The element is not visible, we need to make it appear!
-                    collapseDocs(collapses[0], "show");
-                }
-                // Open all ancestor <details> to make this element visible.
-                openParentDetails(h3.parentNode);
-            } else {
-                openParentDetails(elem.parentNode);
-            }
-        }
+        openParentDetails(document.getElementById(id));
     }
 
     function getHelpElement(build) {
@@ -678,10 +639,6 @@ function hideThemeButtonState() {
         var helpElem = getHelpElement(false);
         if (hasClass(ev.target, "help-button")) {
             displayHelp(true, ev);
-        } else if (hasClass(ev.target, "collapse-toggle")) {
-            collapseDocs(ev.target, "toggle");
-        } else if (hasClass(ev.target.parentNode, "collapse-toggle")) {
-            collapseDocs(ev.target.parentNode, "toggle");
         } else if (ev.target.tagName === "SPAN" && hasClass(ev.target.parentNode, "line-numbers")) {
             handleSourceHighlight(ev);
         } else if (helpElem && hasClass(helpElem, "hidden") === false) {
@@ -898,72 +855,34 @@ function hideThemeButtonState() {
         return "\u2212"; // "\u2212" is "−" minus sign
     }
 
-    function onEveryMatchingChild(elem, className, func) {
-        if (elem && className && func) {
-            var length = elem.childNodes.length;
-            var nodes = elem.childNodes;
-            for (var i = 0; i < length; ++i) {
-                if (hasClass(nodes[i], className)) {
-                    func(nodes[i]);
-                } else {
-                    onEveryMatchingChild(nodes[i], className, func);
-                }
-            }
-        }
-    }
-
-    function toggleAllDocs(fromAutoCollapse) {
+    function toggleAllDocs() {
         var innerToggle = document.getElementById(toggleAllDocsId);
         if (!innerToggle) {
             return;
         }
+        var sectionIsCollapsed = false;
         if (hasClass(innerToggle, "will-expand")) {
             removeClass(innerToggle, "will-expand");
-            onEachLazy(document.getElementsByTagName("details"), function(e) {
-                e.open = true;
-            });
-            onEveryMatchingChild(innerToggle, "inner", function(e) {
-                e.innerHTML = labelForToggleButton(false);
+            onEachLazy(document.getElementsByClassName("rustdoc-toggle"), function(e) {
+                if (!hasClass(e, "type-contents-toggle")) {
+                    e.open = true;
+                }
             });
             innerToggle.title = "collapse all docs";
-            if (fromAutoCollapse !== true) {
-                onEachLazy(document.getElementsByClassName("collapse-toggle"), function(e) {
-                    collapseDocs(e, "show");
-                });
-            }
         } else {
             addClass(innerToggle, "will-expand");
-            onEachLazy(document.getElementsByTagName("details"), function(e) {
-                e.open = false;
-            });
-            onEveryMatchingChild(innerToggle, "inner", function(e) {
-                var parent = e.parentNode;
-                var superParent = null;
-
-                if (parent) {
-                    superParent = parent.parentNode;
-                }
-                if (!parent || !superParent || superParent.id !== "main" ||
-                    hasClass(parent, "impl") === false) {
-                    e.innerHTML = labelForToggleButton(true);
+            onEachLazy(document.getElementsByClassName("rustdoc-toggle"), function(e) {
+                if (e.parentNode.id !== "main" ||
+                    (!hasClass(e, "implementors-toggle") &&
+                     !hasClass(e, "type-contents-toggle")))
+                {
+                    e.open = false;
                 }
             });
+            sectionIsCollapsed = true;
             innerToggle.title = "expand all docs";
-            if (fromAutoCollapse !== true) {
-                onEachLazy(document.getElementsByClassName("collapse-toggle"), function(e) {
-                    var parent = e.parentNode;
-                    var superParent = null;
-
-                    if (parent) {
-                        superParent = parent.parentNode;
-                    }
-                    if (!parent || !superParent || superParent.id !== "main" ||
-                        hasClass(parent, "impl") === false) {
-                        collapseDocs(e, "hide");
-                    }
-                });
-            }
         }
+        innerToggle.children[0].innerText = labelForToggleButton(sectionIsCollapsed);
     }
 
     function collapseDocs(toggle, mode) {
@@ -1102,71 +1021,26 @@ function hideThemeButtonState() {
         referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
     }
 
-    function createSimpleToggle(sectionIsCollapsed) {
-        var toggle = document.createElement("a");
-        toggle.href = "javascript:void(0)";
-        toggle.className = "collapse-toggle";
-        toggle.innerHTML = "[<span class=\"inner\">" + labelForToggleButton(sectionIsCollapsed) +
-                           "</span>]";
-        return toggle;
-    }
-
-    function createToggle(toggle, otherMessage, fontSize, extraClass, show) {
-        var span = document.createElement("span");
-        span.className = "toggle-label";
-        if (show) {
-            span.style.display = "none";
-        }
-        if (!otherMessage) {
-            span.innerHTML = "&nbsp;Expand&nbsp;description";
-        } else {
-            span.innerHTML = otherMessage;
-        }
-
-        if (fontSize) {
-            span.style.fontSize = fontSize;
-        }
-
-        var mainToggle = toggle.cloneNode(true);
-        mainToggle.appendChild(span);
-
-        var wrapper = document.createElement("div");
-        wrapper.className = "toggle-wrapper";
-        if (!show) {
-            addClass(wrapper, "collapsed");
-            var inner = mainToggle.getElementsByClassName("inner");
-            if (inner && inner.length > 0) {
-                inner[0].innerHTML = "+";
-            }
-        }
-        if (extraClass) {
-            addClass(wrapper, extraClass);
-        }
-        wrapper.appendChild(mainToggle);
-        return wrapper;
-    }
-
     (function() {
         var toggles = document.getElementById(toggleAllDocsId);
         if (toggles) {
             toggles.onclick = toggleAllDocs;
         }
 
-        var toggle = createSimpleToggle(false);
         var hideMethodDocs = getSettingValue("auto-hide-method-docs") === "true";
         var hideImplementors = getSettingValue("auto-collapse-implementors") !== "false";
         var hideLargeItemContents = getSettingValue("auto-hide-large-items") !== "false";
 
         var impl_list = document.getElementById("trait-implementations-list");
         if (impl_list !== null) {
-            onEachLazy(impl_list.getElementsByClassName("collapse-toggle"), function(e) {
+            onEachLazy(impl_list.getElementsByClassName("rustdoc-toggle"), function(e) {
                 collapseNonInherent(e);
             });
         }
 
         var blanket_list = document.getElementById("blanket-implementations-list");
         if (blanket_list !== null) {
-            onEachLazy(blanket_list.getElementsByClassName("collapse-toggle"), function(e) {
+            onEachLazy(blanket_list.getElementsByClassName("rustdoc-toggle"), function(e) {
                 collapseNonInherent(e);
             });
         }
@@ -1205,66 +1079,6 @@ function hideThemeButtonState() {
             }
         }
 
-        function buildToggleWrapper(e) {
-            if (hasClass(e, "autohide")) {
-                var wrap = e.previousElementSibling;
-                if (wrap && hasClass(wrap, "toggle-wrapper")) {
-                    var inner_toggle = wrap.childNodes[0];
-                    var extra = e.childNodes[0].tagName === "H3";
-
-                    e.style.display = "none";
-                    addClass(wrap, "collapsed");
-                    onEachLazy(inner_toggle.getElementsByClassName("inner"), function(e) {
-                        e.innerHTML = labelForToggleButton(true);
-                    });
-                    onEachLazy(inner_toggle.getElementsByClassName("toggle-label"), function(e) {
-                        e.style.display = "inline-block";
-                        if (extra === true) {
-                            e.innerHTML = " Show " + e.childNodes[0].innerHTML;
-                        }
-                    });
-                }
-            }
-            if (e.parentNode.id === "main") {
-                var otherMessage = "";
-                var fontSize;
-                var extraClass;
-
-                if (hasClass(e, "type-decl")) {
-                    // We do something special for these
-                    return;
-                } else if (hasClass(e, "non-exhaustive")) {
-                    otherMessage = "&nbsp;This&nbsp;";
-                    if (hasClass(e, "non-exhaustive-struct")) {
-                        otherMessage += "struct";
-                    } else if (hasClass(e, "non-exhaustive-enum")) {
-                        otherMessage += "enum";
-                    } else if (hasClass(e, "non-exhaustive-variant")) {
-                        otherMessage += "enum variant";
-                    } else if (hasClass(e, "non-exhaustive-type")) {
-                        otherMessage += "type";
-                    }
-                    otherMessage += "&nbsp;is&nbsp;marked&nbsp;as&nbsp;non-exhaustive";
-                } else if (hasClass(e.childNodes[0], "impl-items")) {
-                    extraClass = "marg-left";
-                }
-
-                e.parentNode.insertBefore(
-                    createToggle(
-                        toggle,
-                        otherMessage,
-                        fontSize,
-                        extraClass,
-                        true),
-                    e);
-                if (hasClass(e, "non-exhaustive") === true) {
-                    collapseDocs(e.previousSibling.childNodes[0], "toggle");
-                }
-            }
-        }
-
-        onEachLazy(document.getElementsByClassName("docblock"), buildToggleWrapper);
-
         var pageId = getPageId();
         if (pageId !== null) {
             expandSection(pageId);
diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
index d3fe59e8d0b..42a85fcce03 100644
--- a/src/librustdoc/html/static/rustdoc.css
+++ b/src/librustdoc/html/static/rustdoc.css
@@ -1790,6 +1790,18 @@ details.rustdoc-toggle > summary::before {
 	cursor: pointer;
 }
 
+details.rustdoc-toggle.top-doc > summary,
+details.rustdoc-toggle.top-doc > summary::before,
+details.rustdoc-toggle.non-exhaustive > summary,
+details.rustdoc-toggle.non-exhaustive > summary::before {
+	font-family: 'Fira Sans';
+	font-size: 16px;
+}
+
+details.non-exhaustive {
+	margin-bottom: 8px;
+}
+
 details.rustdoc-toggle > summary.hideme::before {
 	position: relative;
 }
diff --git a/src/test/rustdoc/issue-55364.rs b/src/test/rustdoc/issue-55364.rs
index f156d225bd7..bc0ad14be03 100644
--- a/src/test/rustdoc/issue-55364.rs
+++ b/src/test/rustdoc/issue-55364.rs
@@ -2,19 +2,19 @@
 
 // @has issue_55364/subone/index.html
 // These foo/bar links in the module's documentation should refer inside `subone`
-// @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
-// @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
+// @has - '//section[@id="main"]/details[@open=""]/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
+// @has - '//section[@id="main"]/details[@open=""]/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
 pub mod subone {
     //! See either [foo] or [bar].
 
     // This should refer to subone's `bar`
     // @has issue_55364/subone/fn.foo.html
-    // @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
+    // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
     /// See [bar]
     pub fn foo() {}
     // This should refer to subone's `foo`
     // @has issue_55364/subone/fn.bar.html
-    // @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
+    // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
     /// See [foo]
     pub fn bar() {}
 }
@@ -26,8 +26,8 @@ pub mod subone {
 // @!has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
 // @!has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
 // Instead it should be referencing the top level functions
-// @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
-// @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
+// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
+// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
 // Though there should be such links later
 // @has - '//section[@id="main"]/table//tr[@class="module-item"]/td/a[@class="fn"][@href="fn.foo.html"]' 'foo'
 // @has - '//section[@id="main"]/table//tr[@class="module-item"]/td/a[@class="fn"][@href="fn.bar.html"]' 'bar'
@@ -37,13 +37,13 @@ pub mod subtwo {
     // Despite the module's docs referring to the top level foo/bar,
     // this should refer to subtwo's `bar`
     // @has issue_55364/subtwo/fn.foo.html
-    // @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
+    // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
     /// See [bar]
     pub fn foo() {}
     // Despite the module's docs referring to the top level foo/bar,
     // this should refer to subtwo's `foo`
     // @has issue_55364/subtwo/fn.bar.html
-    // @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
+    // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
     /// See [foo]
     pub fn bar() {}
 }
@@ -59,8 +59,8 @@ pub fn bar() {}
 
 // @has issue_55364/subthree/index.html
 // This module should also refer to the top level foo/bar
-// @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
-// @has - '//section[@id="main"]/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
+// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
+// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
 pub mod subthree {
     //! See either [foo][super::foo] or [bar][super::bar]
 }