Unrolled build for #146385

Rollup merge of #146385 - notriddle:no-anim, r=GuillaumeGomez

rustdoc-search: redesign throbber to be less distracting

Preview: https://notriddle.com/rustdoc-html-demo-12/throbber/std/index.html

<img width="1920" height="182" alt="image" src="https://github.com/user-attachments/assets/da838ee0-3f7a-4b10-ba92-f9ac52e9f723" />

<img width="1920" height="182" alt="image" src="https://github.com/user-attachments/assets/b5a59fc0-5d07-4981-b1dd-0b60556a0dd5" />

<img width="1920" height="182" alt="image" src="https://github.com/user-attachments/assets/bb587660-7b6c-40e1-a7ae-2270d530dcd4" />

Complaints about it being distracting, and causing people to wait until all of the results are loaded instead of using the incremental results as they come in, make me think it was a bad idea to put it in the tab.

Part of #146048

Author: rust-timer

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

@@ -1987,12 +1987,10 @@ a.tooltip:hover::after {
 	color: inherit;
 }
 #search-tabs button:not(.selected) {
-	--search-tab-button-background: var(--search-tab-button-not-selected-background);
 	background-color: var(--search-tab-button-not-selected-background);
 	border-top-color: var(--search-tab-button-not-selected-border-top-color);
 }
 #search-tabs button:hover, #search-tabs button.selected {
-	--search-tab-button-background: var(--search-tab-button-selected-background);
 	background-color: var(--search-tab-button-selected-background);
 	border-top-color: var(--search-tab-button-selected-border-top-color);
 }
@@ -2008,66 +2006,27 @@ a.tooltip:hover::after {
 	color: transparent;
 }
 
-.search-form.loading {
-	--search-tab-button-background: var(--button-background-color);
-}
-
-#search-tabs .count.loading::before,
-.search-form.loading::before
-{
-	width: 16px;
-	height: 16px;
-	border-radius: 16px;
-	background: radial-gradient(
-		var(--search-tab-button-background) 0 50%,
-		transparent 50% 100%
-	), conic-gradient(
-		var(--code-highlight-kw-color) 0deg 30deg,
-		var(--code-highlight-prelude-color) 30deg 60deg,
-		var(--code-highlight-number-color) 90deg 120deg,
-		var(--code-highlight-lifetime-color ) 120deg 150deg,
-		var(--code-highlight-comment-color) 150deg 180deg,
-		var(--code-highlight-self-color) 180deg 210deg,
-		var(--code-highlight-attribute-color) 210deg 240deg,
-		var(--code-highlight-literal-color) 210deg 240deg,
-		var(--code-highlight-macro-color) 240deg 270deg,
-		var(--code-highlight-question-mark-color) 270deg 300deg,
-		var(--code-highlight-prelude-val-color) 300deg 330deg,
-		var(--code-highlight-doc-comment-color) 330deg 360deg
-	);
-	content: "";
-	position: absolute;
-	left: 2px;
-	top: 2px;
-	animation: rotating 1.25s linear infinite;
-}
-#search-tabs .count.loading::after,
 .search-form.loading::after
 {
 	width: 18px;
 	height: 18px;
 	border-radius: 18px;
-	background: conic-gradient(
-		var(--search-tab-button-background) 0deg 180deg,
-		transparent 270deg 360deg
-	);
-	content: "";
+	/* hourglass */
+	content: url('data:image/svg+xml,\
+	<svg width="16" height="16" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">\
+		<g fill="none">\
+			<path d="m3.019 1.496v1.496l0.5878 1.018-0.5751 0.996v1.494" stroke="%233f3f3f"/>\
+			<path d="m5.003 1.496v1.496l-0.5878 1.018 0.5751 0.996v1.494" stroke="%233f3f3f"/>\
+			<path d="m2.006 1.5h3.978" stroke="%23000"/>\
+			<path d="m2.006 6.49h3.993" stroke="%23000"/>\
+		</g>\
+		<path d="m4.005 5.301-0.3987 0.6905h0.7977z" fill="%237f7f7f"/>\
+		<path d="m4.011 3.712-0.3987-0.6905h0.7977z" fill="%237f7f7f"/>\
+	</svg>');
 	position: absolute;
-	left: 1px;
-	top: 1px;
-	animation: rotating 0.66s linear infinite;
-}
-
-.search-form.loading::before {
-	left: auto;
-	right: 9px;
-	top: 8px;
-}
-
-.search-form.loading::after {
-	left: auto;
 	right: 8px;
 	top: 8px;
+	filter: var(--settings-menu-filter);
 }
 
 #search .error code {

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

@@ -1,5 +1,5 @@
 // ignore-tidy-filelength
-/* global addClass, getNakedUrl, getVar, nonnull, getSettingValue */
+/* global addClass, getNakedUrl, getVar, getSettingValue, hasClass, nonnull */
 /* global onEachLazy, removeClass, searchState, browserSupportsHistoryApi */
 
 "use strict";
@@ -4804,6 +4804,15 @@ function printTab(nb) {
         if (nb === iter) {
             addClass(elem, "selected");
             foundCurrentTab = true;
+            onEachLazy(document.querySelectorAll(
+                ".search-form",
+            ), form => {
+                if (hasClass(elem.firstElementChild, "loading")) {
+                    addClass(form, "loading");
+                } else {
+                    removeClass(form, "loading");
+                }
+            });
         } else {
             removeClass(elem, "selected");
         }
@@ -5019,7 +5028,9 @@ ${obj.displayPath}<span class="${type}">${name}</span>\
                 await Promise.all(descList);
                 // need to make sure the element is shown before
                 // running this callback
-                yieldToBrowser().then(() => finishedCallback(count, output));
+                yieldToBrowser().then(() => {
+                    finishedCallback(count, output);
+                });
             }
         });
     };
@@ -5156,6 +5167,7 @@ function makeTab(tabNb, text, results, query, isTypeSearch, goToFirst) {
                 count < 100 ? `\u{2007}(${count})\u{2007}` : `\u{2007}(${count})`;
             tabCount.innerHTML = fmtNbElems;
             tabCount.className = "count";
+            printTab(window.searchState.currentTab);
         }, isTypeSearch),
     ];
 }
@@ -5215,9 +5227,12 @@ async function showResults(docSearch, results, goToFirst, filterCrates) {
     resultsElem.id = "results";
 
     search.innerHTML = "";
-    for (const [tab, output] of tabs) {
+    for (const [tabNb, [tab, output]] of tabs.entries()) {
         tabsElem.appendChild(tab);
+        const isCurrentTab = window.searchState.currentTab === tabNb;
         const placeholder = document.createElement("div");
+        placeholder.className = isCurrentTab ? "search-results active" : "search-results";
+        placeholder.innerHTML = "Loading...";
         output.then(output => {
             if (placeholder.parentElement) {
                 placeholder.parentElement.replaceChild(output, placeholder);
@@ -5474,11 +5489,6 @@ if (ROOT_PATH === null) {
 const database = await Stringdex.loadDatabase(hooks);
 if (typeof window !== "undefined") {
     docSearch = new DocSearch(ROOT_PATH, database);
-    onEachLazy(document.querySelectorAll(
-        ".search-form.loading",
-    ), form => {
-        removeClass(form, "loading");
-    });
     registerSearchEvents();
     // If there's a search term in the URL, execute the search now.
     if (window.searchState.getQueryStringParams().search !== undefined) {

tests/rustdoc-gui/search-throbber.goml

@@ -0,0 +1,23 @@
+// We are intentionally triggering errors for race-free throbber test
+fail-on-request-error: false
+fail-on-js-error: false
+
+// First, make sure the throbber goes away when done
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search="
+wait-for: ".search-input"
+wait-for-false: ".search-form.loading"
+write-into: (".search-input", "test")
+press-key: 'Enter'
+wait-for-false: ".search-form.loading"
+
+// Make sure the throbber shows up if we prevent the search from
+// ever finishing (this tactic is needed to make sure we don't get stuck
+// with any race conditions).
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search="
+block-network-request: "*/desc/*.js"
+reload:
+wait-for: ".search-input"
+wait-for-false: ".search-form.loading"
+write-into: (".search-input", "test")
+press-key: 'Enter'
+wait-for: ".search-form.loading"