mirror of
https://github.com/rust-lang/rust.git
synced 2025-04-15 05:26:47 +00:00
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``
This commit is contained in:
Matthias Krüger
GitHub
commit
cefcfda6e6
@ -1439,6 +1439,8 @@ 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);
|
||||
@ -1446,7 +1448,6 @@ fn init_id_map() -> FxHashMap<Cow<'static, str>, usize> {
|
||||
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);
|
||||
|
||||
@ -947,18 +947,33 @@ 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;
|
||||
@ -966,13 +981,37 @@ table,
|
||||
-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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
@ -317,7 +326,7 @@ kbd {
|
||||
|
||||
.popover, .popover::before,
|
||||
#help-button span.top, #help-button span.bottom {
|
||||
border-color: #DDDDDD;
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
#copy-path {
|
||||
|
||||
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" width="128" height="128" enable-background="new 0 0 128 128" version="1.1" viewBox="-30 -20 176 176" xml:space="preserve"><g><line x1="111" x2="64" y1="40.5" y2="87.499" fill="none" stroke="#2F3435" stroke-linecap="square" stroke-miterlimit="10" stroke-width="12"/><line x1="64" x2="17" y1="87.499" y2="40.5" fill="none" stroke="#2F3435" stroke-linecap="square" stroke-miterlimit="10" stroke-width="12"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" width="128" height="128" enable-background="new 0 0 128 128" version="1.1" viewBox="-30 -20 176 176" xml:space="preserve"><g><line x1="111" x2="64" y1="40.5" y2="87.499" fill="none" stroke="#000000" stroke-linecap="square" stroke-miterlimit="10" stroke-width="12"/><line x1="64" x2="17" y1="87.499" y2="40.5" fill="none" stroke="#000000" stroke-linecap="square" stroke-miterlimit="10" stroke-width="12"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 510 B After Width: | Height: | Size: 510 B |
@ -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 <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>";
|
||||
crates += "</select></div>";
|
||||
}
|
||||
|
||||
let typeFilter = "";
|
||||
if (results.query.typeFilter !== NO_TYPE_FILTER) {
|
||||
typeFilter = " (type: " + escape(itemTypes[results.query.typeFilter]) + ")";
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
@ -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"])
|
||||
|
||||
@ -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)",
|
||||
})
|
||||
|
||||
@ -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"})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user