Rollup merge of #92490 - jsha:crates-in-results, r=GuillaumeGomez

Move crate drop-down to search results page

This reduces clutter on doc pages.

Part of #59840

r? ```@GuillaumeGomez```

Demo: https://rustdoc.crud.net/jsha/crates-in-results/std/index.html?search=str

Author: matthiaskrgr

src/ci/docker/host-x86_64/mingw-check/Dockerfile

@@ -17,12 +17,12 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
   pkg-config \
   mingw-w64
 
-RUN curl -sL https://nodejs.org/dist/v14.4.0/node-v14.4.0-linux-x64.tar.xz | tar -xJ
-ENV PATH="/node-v14.4.0-linux-x64/bin:${PATH}"
+RUN curl -sL https://nodejs.org/dist/v16.9.0/node-v16.9.0-linux-x64.tar.xz | tar -xJ
+ENV PATH="/node-v16.9.0-linux-x64/bin:${PATH}"
 # Install es-check
 # Pin its version to prevent unrelated CI failures due to future es-check versions.
-RUN npm install es-check@5.2.3 -g
-RUN npm install eslint@7.20.0 -g
+RUN npm install es-check@6.1.1 -g
+RUN npm install eslint@8.6.0 -g
 
 COPY scripts/sccache.sh /scripts/
 RUN sh /scripts/sccache.sh
@@ -40,5 +40,5 @@ ENV SCRIPT python3 ../x.py --stage 2 test src/tools/expand-yaml-anchors && \
            /scripts/validate-toolstate.sh && \
            /scripts/validate-error-codes.sh && \
            # Runs checks to ensure that there are no ES5 issues in our JS code.
-           es-check es5 ../src/librustdoc/html/static/js/*.js && \
+           es-check es6 ../src/librustdoc/html/static/js/*.js && \
            eslint ../src/librustdoc/html/static/js/*.js

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

@@ -866,18 +866,24 @@ h2.small-section-header > .anchor {
 	display: inline-flex;
 	width: calc(100% - 63px);
 }
+.search-results-title {
+	display: inline;
+}
+#search-settings {
+	font-size: 1.5rem;
+	font-weight: 500;
+	margin-bottom: 20px;
+}
 #crate-search {
 	min-width: 115px;
 	margin-top: 5px;
-	padding: 6px;
-	padding-right: 19px;
-	flex: none;
+	margin-left: 0.2em;
+	padding-left: 0.3em;
+	padding-right: 23px;
 	border: 0;
-	border-right: 0;
-	border-radius: 4px 0 0 4px;
+	border-radius: 4px;
 	outline: none;
 	cursor: pointer;
-	border-right: 1px solid;
 	-moz-appearance: none;
 	-webkit-appearance: none;
 	/* Removes default arrow from firefox */

src/librustdoc/html/static/js/search.js

@@ -1085,7 +1085,7 @@ window.initSearch = function(rawSearchIndex) {
         return "<button>" + text + " <div class=\"count\">(" + nbElems + ")</div></button>";
     }
 
-    function showResults(results, go_to_first) {
+    function showResults(results, go_to_first, filterCrates) {
         var search = searchState.outputElement();
         if (go_to_first || (results.others.length === 1
             && getSettingValue("go-to-only-result") === "true"
@@ -1126,9 +1126,16 @@ window.initSearch = function(rawSearchIndex) {
             }
         }
 
-        var output = "<h1>Results for " + escape(query.query) +
+        let crates = `<select id="crate-search"><option value="All crates">All crates</option>`;
+        for (let c of window.ALL_CRATES) {
+            crates += `<option value="${c}" ${c == filterCrates && "selected"}>${c}</option>`;
+        }
+        crates += `</select>`;
+        var output = `<div id="search-settings">
+            <h1 class="search-results-title">Results for ${escape(query.query)} ` +
             (query.type ? " (type: " + escape(query.type) + ")" : "") + "</h1>" +
-            "<div id=\"titles\">" +
+            ` in ${crates} ` +
+            `</div><div id="titles">` +
             makeTabHeader(0, "In Names", ret_others[1]) +
             makeTabHeader(1, "In Parameters", ret_in_args[1]) +
             makeTabHeader(2, "In Return Types", ret_returned[1]) +
@@ -1141,6 +1148,7 @@ window.initSearch = function(rawSearchIndex) {
         resultsElem.appendChild(ret_returned[0]);
 
         search.innerHTML = output;
+        document.getElementById("crate-search").addEventListener("input", updateCrate);
         search.appendChild(resultsElem);
         // Reset focused elements.
         searchState.focusedByTab = [null, null, null];
@@ -1316,7 +1324,8 @@ window.initSearch = function(rawSearchIndex) {
         }
 
         var filterCrates = getFilterCrates();
-        showResults(execSearch(query, searchWords, filterCrates), params["go_to_first"]);
+        showResults(execSearch(query, searchWords, filterCrates),
+            params["go_to_first"], filterCrates);
     }
 
     function buildIndex(rawSearchIndex) {
@@ -1552,19 +1561,6 @@ window.initSearch = function(rawSearchIndex) {
             }
         });
 
-
-        var selectCrate = document.getElementById("crate-search");
-        if (selectCrate) {
-            selectCrate.onchange = function() {
-                updateLocalStorage("rustdoc-saved-filter-crate", selectCrate.value);
-                // In case you "cut" the entry from the search input, then change the crate filter
-                // before paste back the previous search, you get the old search results without
-                // the filter. To prevent this, we need to remove the previous results.
-                currentResults = null;
-                search(undefined, true);
-            };
-        }
-
         // Push and pop states are used to add search results to the browser
         // history.
         if (searchState.browserSupportsHistoryApi()) {
@@ -1616,6 +1612,15 @@ window.initSearch = function(rawSearchIndex) {
         };
     }
 
+    function updateCrate(ev) {
+        updateLocalStorage("rustdoc-saved-filter-crate", ev.target.value);
+        // In case you "cut" the entry from the search input, then change the crate filter
+        // before paste back the previous search, you get the old search results without
+        // the filter. To prevent this, we need to remove the previous results.
+        currentResults = null;
+        search(undefined, true);
+    }
+
     searchWords = buildIndex(rawSearchIndex);
     registerSearchEvents();
     // If there's a search term in the URL, execute the search now.

src/librustdoc/html/templates/page.html

@@ -105,11 +105,7 @@
                     </div> {#- -#}
                     <form class="search-form"> {#- -#}
                         <div class="search-container"> {#- -#}
-                            <div>{%- if layout.generate_search_filter -%}
-                                <select id="crate-search"> {#- -#}
-                                    <option value="All crates">All crates</option> {#- -#}
-                                </select> {#- -#}
-                                {%- endif -%}
+                            <div>
                                 <input {# -#}
                                     class="search-input" {# -#}
                                     name="search" {# -#}

src/test/rustdoc-gui/escape-key.goml

@@ -1,7 +1,7 @@
 goto: file://|DOC_PATH|/test_docs/index.html
 // First, we check that the search results are hidden when the Escape key is pressed.
 write: (".search-input", "test")
-wait-for: "#search > h1" // The search element is empty before the first search 
+wait-for: "#search h1" // The search element is empty before the first search 
 assert-attribute: ("#search", {"class": "content"})
 assert-attribute: ("#main-content", {"class": "content hidden"})
 press-key: "Escape"

src/test/rustdoc-gui/search-filter.goml

@@ -5,14 +5,12 @@ write: (".search-input", "test")
 wait-for: "#titles"
 assert-text: ("#results .externcrate", "test_docs")
 
-goto: file://|DOC_PATH|/test_docs/index.html
+wait-for: "#crate-search"
 // We now want to change the crate filter.
 click: "#crate-search"
 // We select "lib2" option then press enter to change the filter.
 press-key: "ArrowDown"
 press-key: "Enter"
-// We now make the search again.
-write: (".search-input", "test")
 // Waiting for the search results to appear...
 wait-for: "#titles"
 // We check that there is no more "test_docs" appearing.

src/test/rustdoc-gui/toggle-docs-mobile.goml

@@ -1,12 +1,12 @@
 goto: file://|DOC_PATH|/test_docs/struct.Foo.html
 size: (433, 600)
 assert-attribute: (".top-doc", {"open": ""})
-click: (4, 280) // This is the position of the top doc comment toggle
+click: (4, 240) // This is the position of the top doc comment toggle
 assert-attribute-false: (".top-doc", {"open": ""})
-click: (4, 280)
+click: (4, 240)
 assert-attribute: (".top-doc", {"open": ""})
 // To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
-click: (3, 280)
+click: (3, 240)
 assert-attribute: (".top-doc", {"open": ""})
 
 // Assert the position of the toggle on the top doc block.