[rustdoc] Only generate search DOM elements if the search is actually needed

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

@@ -245,6 +245,32 @@ function preLoadCss(cssUrl) {
     window.searchState = {
         rustdocToolbar: document.querySelector("rustdoc-toolbar"),
         loadingText: "Loading search results...",
+        searchLoaded: false,
+        loadSearch() {
+            // If you're browsing the nightly docs, the page might need to be refreshed for
+            // the search to work because the hash of the JS scripts might have changed.
+            function sendSearchForm() {
+                // @ts-expect-error
+                document.getElementsByClassName("search-form")[0].submit();
+            }
+            if (!window.searchState.searchLoaded) {
+                window.searchState.searchLoaded = true;
+                window.rr_ = data => {
+                    window.searchIndex = data;
+                };
+                if (!window.StringdexOnload) {
+                    window.StringdexOnload = [];
+                }
+                window.StringdexOnload.push(() => {
+                    loadScript(
+                        getVar("static-root-path") + getVar("search-js"),
+                        sendSearchForm,
+                    );
+                });
+                loadScript(getVar("static-root-path") + getVar("stringdex-js"), sendSearchForm);
+                loadScript(resourcePath("search.index/root", ".js"), sendSearchForm);
+            }
+        },
         inputElement: () => {
             let el = document.getElementsByClassName("search-input")[0];
             if (!el) {
@@ -269,6 +295,10 @@ function preLoadCss(cssUrl) {
                 </nav><div class="search-switcher"></div>`;
                 out.insertBefore(hdr, window.searchState.outputElement());
                 el = document.getElementsByClassName("search-input")[0];
+
+                el.addEventListener("focus", () => {
+                    window.searchState.loadSearch();
+                });
             }
             if (el instanceof HTMLInputElement) {
                 return el;
@@ -391,41 +421,6 @@ function preLoadCss(cssUrl) {
             return params;
         },
         setup: () => {
-            let searchLoaded = false;
-            const search_input = window.searchState.inputElement();
-            if (!search_input) {
-                return;
-            }
-            // If you're browsing the nightly docs, the page might need to be refreshed for the
-            // search to work because the hash of the JS scripts might have changed.
-            function sendSearchForm() {
-                // @ts-expect-error
-                document.getElementsByClassName("search-form")[0].submit();
-            }
-            function loadSearch() {
-                if (!searchLoaded) {
-                    searchLoaded = true;
-                    window.rr_ = data => {
-                        window.searchIndex = data;
-                    };
-                    if (!window.StringdexOnload) {
-                        window.StringdexOnload = [];
-                    }
-                    window.StringdexOnload.push(() => {
-                        loadScript(
-                            getVar("static-root-path") + getVar("search-js"),
-                            sendSearchForm,
-                        );
-                    });
-                    loadScript(getVar("static-root-path") + getVar("stringdex-js"), sendSearchForm);
-                    loadScript(resourcePath("search.index/root", ".js"), sendSearchForm);
-                }
-            }
-
-            search_input.addEventListener("focus", () => {
-                loadSearch();
-            });
-
             const btn = document.getElementById("search-button");
             if (btn) {
                 btn.onclick = event => {
@@ -434,7 +429,7 @@ function preLoadCss(cssUrl) {
                     }
                     event.preventDefault();
                     window.searchState.toggle();
-                    loadSearch();
+                    window.searchState.loadSearch();
                 };
             }
 
@@ -455,7 +450,7 @@ function preLoadCss(cssUrl) {
                     // previous state with nothing in the bar.
                     const inputElement = window.searchState.inputElement();
                     if (params.search !== undefined && inputElement !== null) {
-                        loadSearch();
+                        window.searchState.loadSearch();
                         inputElement.value = params.search;
                         // Some browsers fire "onpopstate" for every page load
                         // (Chrome), while others fire the event only when actually
@@ -482,29 +477,32 @@ function preLoadCss(cssUrl) {
             // that try to sync state between the URL and the search input. To work around it,
             // do a small amount of re-init on page show.
             window.onpageshow = () => {
-                const inputElement = window.searchState.inputElement();
                 const qSearch = window.searchState.getQueryStringParams().search;
-                if (qSearch !== undefined && inputElement !== null) {
-                    if (inputElement.value === "") {
-                        inputElement.value = qSearch;
-                    }
-                    window.searchState.showResults();
-                    if (qSearch === "") {
-                        loadSearch();
-                        window.searchState.focus();
+                if (qSearch !== undefined) {
+                    const inputElement = window.searchState.inputElement();
+                    if (inputElement !== null) {
+                        if (inputElement.value === "") {
+                            inputElement.value = qSearch;
+                        }
+                        window.searchState.showResults();
+                        if (qSearch === "") {
+                            window.searchState.loadSearch();
+                            window.searchState.focus();
+                        }
                     }
-                } else {
-                    window.searchState.hideResults();
                 }
             };
 
             const params = window.searchState.getQueryStringParams();
             if (params.search !== undefined) {
                 window.searchState.setLoadingSearch();
-                loadSearch();
+                window.searchState.loadSearch();
             }
         },
         setLoadingSearch: () => {
+            // We set up the search input before adding the other search elements (like
+            // "search loading") in case it's not already there yet.
+            window.searchState.inputElement();
             const search = window.searchState.outputElement();
             nonnull(search).innerHTML = "<h3 class=\"search-loading\">" +
                 window.searchState.loadingText + "</h3>";

src/librustdoc/html/static/js/rustdoc.d.ts

@@ -137,6 +137,8 @@ declare namespace rustdoc {
         loadDesc: function({descShard: SearchDescShard, descIndex: number}): Promise<string|null>;
         loadedDescShard: function(string, number, string);
         isDisplayed: function(): boolean;
+        searchLoaded: boolean;
+        loadSearch: function();
     }
 
     interface SearchDescShard {

tests/rustdoc-gui/go-to-collapsed-elem.goml

@@ -1,6 +1,7 @@
 // This test ensures that when clicking on a link which leads to an item inside a collapsed element,
 // the collapsed element will be expanded.
 go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
+include: "utils.goml"
 // We check that the implementors block is expanded.
 assert-property: ("#implementations-list .implementors-toggle", {"open": "true"})
 // We now collapse the implementors block.
@@ -16,6 +17,7 @@ define-function: ("collapsed-from-search", [], block {
     // Then we collapse the section again...
     set-property: ("#implementations-list .implementors-toggle", {"open": "false"})
     // Then we run the search.
+    call-function: ("open-search", {})
     write-into: (".search-input", "foo::must_use")
     wait-for: "//*[@id='search']//a[@href='../test_docs/struct.Foo.html#method.must_use']"
     click: "//*[@id='search']//a[@href='../test_docs/struct.Foo.html#method.must_use']"

tests/rustdoc-gui/search-elements.goml

@@ -0,0 +1,15 @@
+// This test ensures that the search elements are not created in the DOM before being needed.
+
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
+store-value: (search_selector, "#search")
+
+// This selector is not supposed to exist yet.
+assert-false: |search_selector|
+
+// It should be generated when the search "begins".
+click: "#search-button"
+wait-for: |search_selector|
+
+// When we arrive on a page with a search query parameter, the element should also be present.
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search=a"
+wait-for: |search_selector|

tests/rustdoc-gui/sidebar-source-code-display.goml

@@ -53,7 +53,8 @@ define-function: (
             "#src-sidebar details[open] > .files a:not(.selected):focus",
             {"color": |color_hover|, "background-color": |background_hover|},
         )
-        focus: ".search-input"
+        // Focus another element to remove focus from the <a> element.
+        focus: "#search-button"
         // With hover.
         move-cursor-to: "#src-sidebar details[open] > .files a:not(.selected)"
         assert-css: (
@@ -72,7 +73,8 @@ define-function: (
             "#src-sidebar .dir-entry summary:focus",
             {"color": |color_hover|, "background-color": |background_hover|},
         )
-        focus: ".search-input"
+        // Focus another element to remove focus from the <summary> element.
+        focus: "#search-button"
         // With hover.
         move-cursor-to: "#src-sidebar .dir-entry summary"
         assert-css: (
@@ -91,7 +93,8 @@ define-function: (
             "#src-sidebar details[open] > .folders > details > summary:focus",
             {"color": |color_hover|, "background-color": |background_hover|},
         )
-        focus: ".search-input"
+        // Focus another element to remove focus from the <summary> element.
+        focus: "#search-button"
         // With hover.
         move-cursor-to: "#src-sidebar details[open] > .folders > details > summary"
         assert-css: (