Rollup merge of rust-lang#100374 - GuillaumeGomez:improve_rustdoc_sea…

…rch_results_page_crates_selection, r=notriddle

Improve crate selection on rustdoc search results page

Take over of rust-lang#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/librustdoc/html/markdown.rs

@@ -1439,14 +1439,15 @@ fn init_id_map() -> FxHashMap<Cow<'static, str>, usize> {
  map.insert("not-displayed".into(), 1);
  map.insert("alternative-display".into(), 1);
  map.insert("search".into(), 1);
+ map.insert("crate-search".into(), 1);
+ map.insert("crate-search-div".into(), 1);
  // This is the list of IDs used in HTML generated in Rust (including the ones
  // used in tera template files).
  map.insert("mainThemeStyle".into(), 1);
  map.insert("themeStyle".into(), 1);
  map.insert("settings-menu".into(), 1);
  map.insert("help-button".into(), 1);
  map.insert("main-content".into(), 1);
- map.insert("crate-search".into(), 1);
  map.insert("toggle-all-docs".into(), 1);
  map.insert("all-types".into(), 1);
  map.insert("default-settings".into(), 1);

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

@@ -947,32 +947,71 @@ table,
  height: 100%;
 }
 .search-results-title {
- display: inline;
+ margin-top: 0;
+ white-space: nowrap;
+ /* flex layout allows shrinking the <select> appropriately if it becomes too large */
+ display: inline-flex;
+ max-width: 100%;
+ /* make things look like in a line, despite the fact that we're using a layout
+ with boxes (i.e. from the flex layout) */
+ align-items: baseline;
 }
-#search-settings {
- font-size: 1.5rem;
- font-weight: 500;
- margin-bottom: 20px;
+#crate-search-div {
+ display: inline-block;
+ /* ensures that 100% in properties of #crate-search-div:after
+ are relative to the size of this div */
+ position: relative;
+ /* allows this div (and with it the <select>-element "#crate-search") to be shrunk */
+ min-width: 5em;
 }
 #crate-search {
  min-width: 115px;
- margin-top: 5px;
- padding-left: 0.15em;
+ padding: 0;
+ /* keep these two in sync with "@-moz-document url-prefix()" below */
+ padding-left: 4px;
  padding-right: 23px;
+ /* prevents the <select> from overflowing the containing div in case it's shrunk */
+ max-width: 100%;
+ /* contents can overflow because of max-width limit, then show ellipsis */
+ text-overflow: ellipsis;
  border: 1px solid;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  /* Removes default arrow from firefox */
+ text-indent: 0.01px;
+ background-color: var(--main-background-color);
+}
+/* cancel stylistic differences in padding in firefox
+for "appearance: none"-style (or equivalent) <select>s */
+@-moz-document url-prefix() {
+ #crate-search {
+ padding-left: 0px; /* == 4px - 4px */
+ padding-right: 19px; /* == 23px - 4px */
+ }
+}
+/* pseudo-element for holding the dropdown-arrow image; needs to be a separate thing
+so that we can apply CSS-filters to change the arrow color in themes */
+#crate-search-div::after {
+ /* lets clicks through! */
+ pointer-events: none;
+ /* completely covers the underlying div */
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: "";
  background-repeat: no-repeat;
- background-color: transparent;
  background-size: 20px;
- background-position: calc(100% - 1px) 56%;
+ background-position: calc(100% - 2px) 56%;
+ /* image is black color, themes should apply a "filter" property to change the color */
  background-image: /* AUTOREPLACE: */url("down-arrow.svg");
- max-width: 100%;
- text-overflow: ellipsis;
+}
+#crate-search > option {
+ font-size: 1rem;
 }
 .search-container {
  margin-top: 4px;

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

@@ -182,7 +182,7 @@ details.rustdoc-toggle > summary::before {
  filter: invert(100%);
 }
 
-#crate-search, .search-input {
+.search-input {
  background-color: #141920;
  border-color: #424c57;
 }
@@ -191,7 +191,17 @@ details.rustdoc-toggle > summary::before {
  /* Without the `!important`, the border-color is ignored for `<select>`...
  It cannot be in the group above because `.search-input` has a different border color on
  hover. */
- border-color: #424c57 !important;
+ border-color: #5c6773 !important;
+}
+#crate-search-div::after {
+ /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
+ filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) brightness(94%) contrast(94%);
+}
+#crate-search:hover, #crate-search:focus {
+ border-color: #e0e0e0 !important;
+}
+#crate-search-div:hover::after, #crate-search-div:focus-within::after {
+ filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg) brightness(113%) contrast(76%);
 }
 
 .search-input {

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

@@ -152,7 +152,7 @@ details.rustdoc-toggle > summary::before {
  filter: invert(100%);
 }
 
-#crate-search, .search-input {
+.search-input {
  color: #111;
  background-color: #f0f0f0;
  border-color: #f0f0f0;
@@ -162,7 +162,17 @@ details.rustdoc-toggle > summary::before {
  /* Without the `!important`, the border-color is ignored for `<select>`...
  It cannot be in the group above because `.search-input` has a different border color on
  hover. */
- border-color: #f0f0f0 !important;
+ border-color: #d2d2d2 !important;
+}
+#crate-search-div::after {
+ /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
+ filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg) brightness(90%) contrast(90%);
+}
+#crate-search:hover, #crate-search:focus {
+ border-color: #2196f3 !important;
+}
+#crate-search-div:hover::after, #crate-search-div:focus-within::after {
+ filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%);
 }
 
 .search-input {

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

@@ -144,17 +144,26 @@ details.rustdoc-toggle > summary::before {
  color: #999;
 }
 
-#crate-search, .search-input {
+.search-input {
  background-color: white;
  border-color: #e0e0e0;
 }
-
 #crate-search {
  /* Without the `!important`, the border-color is ignored for `<select>`...
  It cannot be in the group above because `.search-input` has a different border color on
  hover. */
  border-color: #e0e0e0 !important;
 }
+#crate-search-div::after {
+ /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
+ filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg) brightness(114%) contrast(76%);
+}
+#crate-search:hover, #crate-search:focus {
+ border-color: #717171 !important;
+}
+#crate-search-div:hover::after, #crate-search-div:focus-within::after {
+ filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg) brightness(96%) contrast(93%);
+}
 
 .search-input:focus {
  border-color: #66afe9;
@@ -321,7 +330,7 @@ kbd {
 
 .popover, .popover::before,
 #help-button span.top, #help-button span.bottom {
- border-color: #DDDDDD;
+ border-color: #e0e0e0;
 }
 
 #copy-path {

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

@@ -429,9 +429,9 @@ function initSearch(rawSearchIndex) {
  }
  const posBefore = parserState.pos;
  getNextElem(query, parserState, elems, endChar === ">");
- // This case can be encountered if `getNextElem` encounted a "stop character" right from
- // the start. For example if you have `,,` or `<>`. In this case, we simply move up the
- // current position to continue the parsing.
+ // This case can be encountered if `getNextElem` encountered a "stop character" right
+ // from the start. For example if you have `,,` or `<>`. In this case, we simply move up
+ // the current position to continue the parsing.
  if (posBefore === parserState.pos) {
  parserState.pos += 1;
  }
@@ -581,7 +581,7 @@ function initSearch(rawSearchIndex) {
  const elem = document.getElementById("crate-search");
 
  if (elem &&
- elem.value !== "All crates" &&
+ elem.value !== "all crates" &&
  hasOwnPropertyRustdoc(rawSearchIndex, elem.value)
  ) {
  return elem.value;
@@ -1551,12 +1551,6 @@ function initSearch(rawSearchIndex) {
  return [displayPath, href];
  }
 
- function escape(content) {
- const h1 = document.createElement("h1");
- h1.textContent = content;
- return h1.innerHTML;
- }
-
  function pathSplitter(path) {
  const tmp = "<span>" + path.replace(/::/g, "::</span><span>");
  if (tmp.endsWith("<span>")) {
@@ -1710,22 +1704,15 @@ function initSearch(rawSearchIndex) {
  let crates = "";
  const crates_list = Object.keys(rawSearchIndex);
  if (crates_list.length > 1) {
- crates = " in <select id=\"crate-search\"><option value=\"All crates\">" +
- "All crates</option>";
+ crates = " in&nbsp;<div id=\"crate-search-div\"><select id=\"crate-search\">" +
+ "<option value=\"all crates\">all crates</option>";
  for (const c of crates_list) {
  crates += `<option value="${c}" ${c === filterCrates && "selected"}>${c}</option>`;
  }
- crates += "</select>";
- }
-
- let typeFilter = "";
- if (results.query.typeFilter !== NO_TYPE_FILTER) {
- typeFilter = " (type: " + escape(itemTypes[results.query.typeFilter]) + ")";
+ crates += "</select></div>";
  }
 
- let output = "<div id=\"search-settings\">" +
- `<h1 class="search-results-title">Results for ${escape(results.query.userQuery)}` +
- `${typeFilter}</h1>${crates}</div>`;
+ 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\">" +
@@ -2245,7 +2232,7 @@ function initSearch(rawSearchIndex) {
  }
 
  function updateCrate(ev) {
- if (ev.target.value === "All crates") {
+ if (ev.target.value === "all crates") {
  // If we don't remove it from the URL, it'll be picked up again by the search.
  const params = searchState.getQueryStringParams();
  const query = searchState.input.value.trim();

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,16 +40,16 @@ 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
 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,26 +17,18 @@ 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: (
  "#crate-search option",
  "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"})