From 16bcc18334da53fa5dabd0800ae0772435783437 Mon Sep 17 00:00:00 2001 From: Frank Steffahn Date: Sun, 3 Jul 2022 20:10:19 +0200 Subject: [PATCH 1/4] Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a 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 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" `... 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 { diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index a550eb1c130af..859db6d6150a8 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/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,18 @@ details.rustdoc-toggle > summary::before { /* Without the `!important`, the border-color is ignored for ``... 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 { diff --git a/src/librustdoc/html/static/images/down-arrow.svg b/src/librustdoc/html/static/images/down-arrow.svg index 35437e77a710c..5d76a64e92c70 100644 --- a/src/librustdoc/html/static/images/down-arrow.svg +++ b/src/librustdoc/html/static/images/down-arrow.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index 75c7bd45a2949..d04ec357c40ac 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/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 = "" + path.replace(/::/g, "::"); if (tmp.endsWith("")) { @@ -1710,22 +1704,15 @@ function initSearch(rawSearchIndex) { let crates = ""; const crates_list = Object.keys(rawSearchIndex); if (crates_list.length > 1) { - crates = " in " + + ""; for (const c of crates_list) { crates += ``; } - crates += ""; - } - - let typeFilter = ""; - if (results.query.typeFilter !== NO_TYPE_FILTER) { - typeFilter = " (type: " + escape(itemTypes[results.query.typeFilter]) + ")"; + crates += ""; } - let output = "
" + - `

Results for ${escape(results.query.userQuery)}` + - `${typeFilter}

${crates}
`; + let output = `

Results${crates}

`; if (results.query.error !== null) { output += `

Query parser error: "${results.query.error}".

`; output += "
" + @@ -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(); diff --git a/src/test/rustdoc-gui/pocket-menu.goml b/src/test/rustdoc-gui/pocket-menu.goml index 54f3790a76521..782526e29f45e 100644 --- a/src/test/rustdoc-gui/pocket-menu.goml +++ b/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"]) diff --git a/src/test/rustdoc-gui/search-filter.goml b/src/test/rustdoc-gui/search-filter.goml index d645e23706161..b12eddfd12ad9 100644 --- a/src/test/rustdoc-gui/search-filter.goml +++ b/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 ""). +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)", }) diff --git a/src/test/rustdoc-gui/search-result-display.goml b/src/test/rustdoc-gui/search-result-display.goml index 8464ba7c23cfe..26c176cbc9fd6 100644 --- a/src/test/rustdoc-gui/search-result-display.goml +++ b/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: ".search-results-title" // 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"}) @@ -21,22 +21,32 @@ size: (900, 900) assert-css: ("#crate-search", {"width": "218px"}) compare-elements-position-near: ( "#crate-search", - "#search-settings .search-results-title", + ".search-results-title", {"y": 5}, ) -// Then we update the text of one of the `