Rollup merge of #100374 - GuillaumeGomez:improve_rustdoc_search_results_page_crates_selection, r=notriddle

Improve crate selection on rustdoc search results page

Take over of #98855 (screenshots and explanations are there).

You can test it [here](https://rustdoc.crud.net/imperio/improve_rustdoc_search_results_page_crates_selection/std/index.html?search=test).

cc ``@steffahn`` ``@jsha``
r? ``@notriddle``

src/test/rustdoc-gui/pocket-menu.goml

@@ -71,7 +71,7 @@ reload:
 click: "#help-button"
 assert-css: (
     "#help-button .popover",
-    {"display": "block", "border-color": "rgb(221, 221, 221)"},
+    {"display": "block", "border-color": "rgb(224, 224, 224)"},
 )
 compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-color"])
 compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])

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

@@ -40,7 +40,7 @@ press-key: "ArrowUp"
 press-key: "Enter"
 // Waiting for the search results to appear...
 wait-for: "#titles"
-assert-property: ("#crate-search", {"value": "All crates"})
+assert-property: ("#crate-search", {"value": "all crates"})
 
 // Checking that the URL parameter is taken into account for crate filtering.
 goto: file://|DOC_PATH|/test_docs/index.html?search=test&filter-crate=lib2
@@ -48,8 +48,8 @@ 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 that the text for the "title" is correct (the "all crates" comes from the "<select>").
+assert-text: (".search-results-title", "Results in all crates", STARTS_WITH)
 
 // Checking the display of the crate filter.
 // We start with the light theme.
@@ -69,15 +69,15 @@ 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)",
+    "border": "1px solid rgb(210, 210, 210)",
+    "color": "rgb(221, 221, 221)",
+    "background-color": "rgb(53, 53, 53)",
 })
 
 // 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)",
+    "border": "1px solid rgb(92, 103, 115)",
+    "color": "rgb(255, 255, 255)",
+    "background-color": "rgb(15, 20, 25)",
 })

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

@@ -4,7 +4,7 @@ size: (900, 1000)
 write: (".search-input", "test")
 // To be SURE that the search will be run.
 press-key: 'Enter'
-wait-for: "#search-settings"
+wait-for: "#crate-search"
 // The width is returned by "getComputedStyle" which returns the exact number instead of the
 // CSS rule which is "50%"...
 assert-css: (".search-results div.desc", {"width": "295px"})
@@ -17,13 +17,9 @@ assert-css: (".search-results div.desc", {"width": "570px"})
 // To do so we need to update the length of one of its `<option>`.
 size: (900, 900)
 
-// First we check the current width and position.
-assert-css: ("#crate-search", {"width": "218px"})
-compare-elements-position-near: (
-    "#crate-search",
-    "#search-settings .search-results-title",
-    {"y": 5},
-)
+// First we check the current width, height and position.
+assert-css: ("#crate-search", {"width": "223px"})
+assert-css: (".search-results-title", {"height": "44px", "width": "336px"})
 
 // Then we update the text of one of the `<option>`.
 text: (
@@ -31,12 +27,8 @@ text: (
     "sdjfaksdjfaksjdbfkadsbfkjsadbfkdsbkfbsadkjfbkdsabfkadsfkjdsafa",
 )
 
-// Then we compare again.
-assert-css: ("#crate-search", {"width": "640px"})
-compare-elements-position-near-false: (
-    "#crate-search",
-    "#search-settings .search-results-title",
-    {"y": 5},
-)
-// And we check that the `<select>` isn't bigger than its container.
+// Then we compare again to confirm the height didn't change.
+assert-css: ("#crate-search", {"width": "527px"})
+assert-css: (".search-results-title", {"height": "44px", "width": "640px"})
+// And we check that the `<select>` isn't bigger than its container (".search-results-title").
 assert-css: ("#search", {"width": "640px"})