Rollup merge of #97113 - GuillaumeGomez:search-ui-fixes, r=notriddle

Search GUI fixes

The first fix is about the duplicated "in":

![Screenshot from 2022-05-17 13-25-53](https://user-images.githubusercontent.com/3050060/168814186-a4e9064f-4325-469c-8bf6-46ea2737a24f.png)

The second fix is about the `<select>` broken style:

![Screenshot from 2022-05-17 13-37-03](https://user-images.githubusercontent.com/3050060/168814182-b1c5ae66-d8cf-4fd5-a227-5aa8cd8453ab.png)
![Screenshot from 2022-05-17 13-36-55](https://user-images.githubusercontent.com/3050060/168814184-be9e56f8-fad4-477c-899e-9abff4d4910c.png)

You can test it [here](https://rustdoc.crud.net/imperio/search-ui-fixes/doc/foo/index.html?search=test).

r? `@notriddle`

Author: JohnTitor

src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version

@@ -1 +1 @@
-0.9.1
+0.9.2

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

@@ -897,7 +897,7 @@ table,
 	margin-left: 0.25em;
 	padding-left: 0.3125em;
 	padding-right: 23px;
-	border: 0;
+	border: 1px solid;
 	border-radius: 4px;
 	outline: none;
 	cursor: pointer;
@@ -2010,7 +2010,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 
 	#crate-search {
 		border-radius: 4px;
-		border: 0;
 	}
 
 	.docblock {

src/librustdoc/html/static/css/themes/ayu.css

@@ -236,8 +236,8 @@ details.undocumented > summary::before {
 
 #crate-search, .search-input {
 	background-color: #141920;
-	border-color: #424c57;
-	color: #c5c5c5;
+	/* Without the `!important`, the border-color is ignored for `<select>`... */
+	border-color: #424c57 !important;
 }
 
 .search-input {

src/librustdoc/html/static/css/themes/dark.css

@@ -217,7 +217,8 @@ details.undocumented > summary::before {
 #crate-search, .search-input {
 	color: #111;
 	background-color: #f0f0f0;
-	border-color: #000;
+	/* Without the `!important`, the border-color is ignored for `<select>`... */
+	border-color: #f0f0f0 !important;
 }
 
 .search-input {

src/librustdoc/html/static/css/themes/light.css

@@ -209,9 +209,9 @@ details.undocumented > summary::before {
 }
 
 #crate-search, .search-input {
-	color: #555;
 	background-color: white;
-	border-color: #e0e0e0;
+	/* Without the `!important`, the border-color is ignored for `<select>`... */
+	border-color: #e0e0e0 !important;
 }
 
 .search-input:focus {

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

@@ -1738,7 +1738,7 @@ function initSearch(rawSearchIndex) {
 
         let output = "<div id=\"search-settings\">" +
             `<h1 class="search-results-title">Results for ${escape(results.query.userQuery)}` +
-            `${typeFilter}</h1> in ${crates} </div>`;
+            `${typeFilter}</h1>${crates}</div>`;
         if (results.query.error !== null) {
             output += `<h3>Query parser error: "${results.query.error}".</h3>`;
             output += "<div id=\"titles\">" +

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

@@ -45,3 +45,37 @@ goto: file://|DOC_PATH|/test_docs/index.html?search=test&filter-crate=lib2
 wait-for: "#crate-search"
 assert-property: ("#crate-search", {"value": "lib2"})
 assert-false: "#results .externcrate"
+
+// Checking that the text for the "title" is correct (the "All" comes from the "<select>").
+assert-text: ("#search-settings", "Results for test in All", STARTS_WITH)
+
+// Checking the display of the crate filter.
+// We start with the light theme.
+local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+reload:
+
+timeout: 2000
+wait-for: "#crate-search"
+assert-css: ("#crate-search", {
+    "border": "1px solid rgb(224, 224, 224)",
+    "color": "rgb(0, 0, 0)",
+    "background-color": "rgb(255, 255, 255)",
+})
+
+// We now check the dark theme.
+click: "#settings-menu"
+wait-for: "#settings"
+click: "#theme-dark"
+wait-for-css: ("#crate-search", {
+    "border": "1px solid rgb(240, 240, 240)",
+    "color": "rgb(17, 17, 17)",
+    "background-color": "rgb(240, 240, 240)",
+})
+
+// And finally we check the ayu theme.
+click: "#theme-ayu"
+wait-for-css: ("#crate-search", {
+    "border": "1px solid rgb(66, 76, 87)",
+    "color": "rgb(197, 197, 197)",
+    "background-color": "rgb(20, 25, 32)",
+})