rustdoc: use a more evocative name for CSS/JS #titles

This renames the ID, which is only used in search results, to
`#search-tabs`. Also changes the `.count` to a span, so it doesn't need its
display mode to be overridden.

Author: notriddle

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

@@ -1261,14 +1261,14 @@ a.test-arrow:hover {
 	margin-right: auto;
 }
 
-#titles {
+#search-tabs {
 	display: flex;
 	flex-direction: row;
 	gap: 1px;
 	margin-bottom: 4px;
 }
 
-#titles > button {
+#search-tabs button {
 	text-align: center;
 	font-size: 1.125rem;
 	border: 0;
@@ -1278,8 +1278,7 @@ a.test-arrow:hover {
 	color: inherit;
 }
 
-#titles > button > div.count {
-	display: inline-block;
+#search-tabs .count {
 	font-size: 1rem;
 	color: var(--search-tab-title-count-color);
 }
@@ -1706,7 +1705,7 @@ in storage.js
 		display: none !important;
 	}
 
-	#titles > button > div.count {
+	#search-tabs .count {
 		display: block;
 	}
 

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

@@ -49,7 +49,7 @@ function printTab(nb) {
     let iter = 0;
     let foundCurrentTab = false;
     let foundCurrentResultSet = false;
-    onEachLazy(document.getElementById("titles").childNodes, elem => {
+    onEachLazy(document.getElementById("search-tabs").childNodes, elem => {
         if (nb === iter) {
             addClass(elem, "selected");
             foundCurrentTab = true;
@@ -1490,7 +1490,7 @@ function initSearch(rawSearchIndex) {
     function focusSearchResult() {
         const target = searchState.focusedByTab[searchState.currentTab] ||
             document.querySelectorAll(".search-results.active a").item(0) ||
-            document.querySelectorAll("#titles > button").item(searchState.currentTab);
+            document.querySelectorAll("#search-tabs button").item(searchState.currentTab);
         searchState.focusedByTab[searchState.currentTab] = null;
         if (target) {
             target.focus();
@@ -1645,9 +1645,9 @@ function initSearch(rawSearchIndex) {
     function makeTabHeader(tabNb, text, nbElems) {
         if (searchState.currentTab === tabNb) {
             return "<button class=\"selected\">" + text +
-                   " <div class=\"count\">(" + nbElems + ")</div></button>";
+                   " <span class=\"count\">(" + nbElems + ")</span></button>";
         }
-        return "<button>" + text + " <div class=\"count\">(" + nbElems + ")</div></button>";
+        return "<button>" + text + " <span class=\"count\">(" + nbElems + ")</span></button>";
     }
 
     /**
@@ -1712,12 +1712,12 @@ function initSearch(rawSearchIndex) {
         let output = `<h1 class="search-results-title">Results${crates}</h1>`;
         if (results.query.error !== null) {
             output += `<h3>Query parser error: "${results.query.error}".</h3>`;
-            output += "<div id=\"titles\">" +
+            output += "<div id=\"search-tabs\">" +
                 makeTabHeader(0, "In Names", ret_others[1]) +
                 "</div>";
             currentTab = 0;
         } else if (results.query.foundElems <= 1 && results.query.returned.length === 0) {
-            output += "<div id=\"titles\">" +
+            output += "<div id=\"search-tabs\">" +
                 makeTabHeader(0, "In Names", ret_others[1]) +
                 makeTabHeader(1, "In Parameters", ret_in_args[1]) +
                 makeTabHeader(2, "In Return Types", ret_returned[1]) +
@@ -1727,7 +1727,7 @@ function initSearch(rawSearchIndex) {
                 results.query.elems.length === 0 ? "In Function Return Types" :
                 results.query.returned.length === 0 ? "In Function Parameters" :
                 "In Function Signatures";
-            output += "<div id=\"titles\">" +
+            output += "<div id=\"search-tabs\">" +
                 makeTabHeader(0, signatureTabTitle, ret_others[1]) +
                 "</div>";
             currentTab = 0;
@@ -1747,7 +1747,7 @@ function initSearch(rawSearchIndex) {
         search.appendChild(resultsElem);
         // Reset focused elements.
         searchState.showResults(search);
-        const elems = document.getElementById("titles").childNodes;
+        const elems = document.getElementById("search-tabs").childNodes;
         searchState.focusedByTab = [];
         let i = 0;
         for (const elem of elems) {

src/test/rustdoc-gui/cursor.goml

@@ -12,8 +12,8 @@ write: (".search-input", "Foo")
 // To be SURE that the search will be run.
 press-key: 'Enter'
 // Waiting for the search results to appear...
-wait-for: "#titles"
-assert-css: ("#titles > button", {"cursor": "pointer"})
+wait-for: "#search-tabs"
+assert-css: ("#search-tabs > button", {"cursor": "pointer"})
 
 // mobile sidebar toggle button
 size: (500, 700)

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

@@ -5,7 +5,7 @@ write: (".search-input", "test")
 // To be SURE that the search will be run.
 press-key: 'Enter'
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 assert-text: ("#results .externcrate", "test_docs")
 
 wait-for: "#crate-search"
@@ -17,7 +17,7 @@ press-key: "ArrowDown"
 press-key: "ArrowDown"
 press-key: "Enter"
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 assert-document-property: ({"URL": "&filter-crate="}, CONTAINS)
 // We check that there is no more "test_docs" appearing.
 assert-false: "#results .externcrate"
@@ -41,7 +41,7 @@ press-key: "ArrowUp"
 press-key: "ArrowUp"
 press-key: "Enter"
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 assert-property: ("#crate-search", {"value": "all crates"})
 
 // Checking that the URL parameter is taken into account for crate filtering.

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

@@ -5,7 +5,7 @@ write: (".search-input", "Foo")
 // To be SURE that the search will be run.
 press-key: 'Enter'
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 
 // Now use the keyboard commands to switch to the third result.
 press-key: "ArrowDown"

src/test/rustdoc-gui/search-result-color.goml

@@ -65,9 +65,9 @@ local-storage: {
 reload:
 
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 assert-css: (
-    "#titles > button > div.count",
+    "#search-tabs > button > .count",
     {"color": "rgb(136, 136, 136)"},
     ALL,
 )
@@ -182,9 +182,9 @@ local-storage: {
 reload:
 
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 assert-css: (
-    "#titles > button > div.count",
+    "#search-tabs > button > .count",
     {"color": "rgb(136, 136, 136)"},
     ALL,
 )
@@ -284,9 +284,9 @@ local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
 reload:
 
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 assert-css: (
-    "#titles > button > div.count",
+    "#search-tabs > button > .count",
     {"color": "rgb(136, 136, 136)"},
     ALL,
 )
@@ -396,7 +396,7 @@ define-function: (
         // To be SURE that the search will be run.
         ("press-key", 'Enter'),
         // Waiting for the search results to appear...
-        ("wait-for", "#titles"),
+        ("wait-for", "#search-tabs"),
         // Checking that the colors for the alias element are the ones expected.
         ("assert-css", (".result-name > .alias", {"color": |alias|})),
         ("assert-css", (".result-name > .alias > .grey", {"color": |grey|})),

src/test/rustdoc-gui/search-result-description.goml

@@ -1,5 +1,5 @@
 // This test is to ensure that the codeblocks are correctly rendered in the search results.
 goto: "file://" + |DOC_PATH| + "/test_docs/index.html?search=some_more_function"
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 assert-text: (".search-results .desc code", "format!")

src/test/rustdoc-gui/search-result-go-to-first.goml

@@ -8,7 +8,7 @@ assert-text-false: (".fqn", "Struct test_docs::Foo")
 // We now check that we land on the search result page if "go_to_first" isn't set.
 goto: "file://" + |DOC_PATH| + "/test_docs/index.html?search=struct%3AFoo"
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 assert-text-false: (".fqn", "Struct test_docs::Foo")
 // Ensure that the search results are displayed, not the "normal" content.
 assert-css: ("#main-content", {"display": "none"})

src/test/rustdoc-gui/search-result-keyword.goml

@@ -4,7 +4,7 @@ write: (".search-input", "CookieMonster")
 // To be SURE that the search will be run.
 press-key: 'Enter'
 // Waiting for the search results to appear...
-wait-for: "#titles"
+wait-for: "#search-tabs"
 // Note: The two next assert commands could be merged as one but readability would be
 // less good.
 //

src/test/rustdoc-gui/search-tab-change-title-fn-sig.goml

@@ -5,70 +5,70 @@ write: (".search-input", "Foo")
 // To be SURE that the search will be run.
 press-key: 'Enter'
 // Waiting for the search results to appear...
-wait-for: "#titles"
-assert-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
-assert-text: ("#titles > button:nth-of-type(1)", "In Names", STARTS_WITH)
+wait-for: "#search-tabs"
+assert-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
+assert-text: ("#search-tabs > button:nth-of-type(1)", "In Names", STARTS_WITH)
 assert: "input.search-input:focus"
 // Use left-right keys
 press-key: "ArrowDown"
 assert: "#results > .search-results.active > a:nth-of-type(1):focus"
 press-key: "ArrowRight"
-wait-for-attribute: ("#titles > button:nth-of-type(2)", {"class": "selected"})
+wait-for-attribute: ("#search-tabs > button:nth-of-type(2)", {"class": "selected"})
 press-key: "ArrowRight"
-wait-for-attribute: ("#titles > button:nth-of-type(3)", {"class": "selected"})
+wait-for-attribute: ("#search-tabs > button:nth-of-type(3)", {"class": "selected"})
 press-key: "ArrowRight"
-wait-for-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
+wait-for-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
 press-key: "ArrowLeft"
-wait-for-attribute: ("#titles > button:nth-of-type(3)", {"class": "selected"})
+wait-for-attribute: ("#search-tabs > button:nth-of-type(3)", {"class": "selected"})
 
 // Now try search-by-return
 goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
 write: (".search-input", "-> String")
 // To be SURE that the search will be run.
 press-key: 'Enter'
 // Waiting for the search results to appear...
-wait-for: "#titles"
-assert-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
-assert-text: ("#titles > button:nth-of-type(1)", "In Function Return Types", STARTS_WITH)
+wait-for: "#search-tabs"
+assert-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
+assert-text: ("#search-tabs > button:nth-of-type(1)", "In Function Return Types", STARTS_WITH)
 assert: "input.search-input:focus"
 // Use left-right keys
 press-key: "ArrowDown"
 assert: "#results > .search-results.active > a:nth-of-type(1):focus"
 press-key: "ArrowRight"
-wait-for-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
+wait-for-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
 press-key: "ArrowRight"
-wait-for-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
+wait-for-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
 press-key: "ArrowRight"
-wait-for-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
+wait-for-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
 press-key: "ArrowLeft"
-wait-for-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
+wait-for-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
 
 // Try with a search-by-return with no results
 goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
 write: (".search-input", "-> Something")
 // To be SURE that the search will be run.
 press-key: 'Enter'
 // Waiting for the search results to appear...
-wait-for: "#titles"
-assert-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
-assert-text: ("#titles > button:nth-of-type(1)", "In Function Return Types", STARTS_WITH)
+wait-for: "#search-tabs"
+assert-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
+assert-text: ("#search-tabs > button:nth-of-type(1)", "In Function Return Types", STARTS_WITH)
 
 // Try with a search-by-parameter
 goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
 write: (".search-input", "usize pattern")
 // To be SURE that the search will be run.
 press-key: 'Enter'
 // Waiting for the search results to appear...
-wait-for: "#titles"
-assert-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
-assert-text: ("#titles > button:nth-of-type(1)", "In Function Parameters", STARTS_WITH)
+wait-for: "#search-tabs"
+assert-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
+assert-text: ("#search-tabs > button:nth-of-type(1)", "In Function Parameters", STARTS_WITH)
 
 // Try with a search-by-parameter-and-return
 goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
 write: (".search-input", "pattern -> str")
 // To be SURE that the search will be run.
 press-key: 'Enter'
 // Waiting for the search results to appear...
-wait-for: "#titles"
-assert-attribute: ("#titles > button:nth-of-type(1)", {"class": "selected"})
-assert-text: ("#titles > button:nth-of-type(1)", "In Function Signatures", STARTS_WITH)
+wait-for: "#search-tabs"
+assert-attribute: ("#search-tabs > button:nth-of-type(1)", {"class": "selected"})
+assert-text: ("#search-tabs > button:nth-of-type(1)", "In Function Signatures", STARTS_WITH)