diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 5c7b56ec140b5..8bb5c30468ba7 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -914,18 +914,33 @@ table, height: 100%; } .search-results-title { - display: inline; + margin-top: 0; + white-space: nowrap; + /* flex layout allows shrinking the -element "#crate-search") to be shrunk */ + min-width: 5em; } #crate-search { min-width: 115px; - margin-top: 5px; - padding-left: 0.3125em; + padding: 0; + /* keep these two in sync with "@-moz-document url-prefix()" below */ + padding-left: 4px; padding-right: 23px; + /* prevents the 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; diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index b25f5e9fdb10b..e6db0d91f2135 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -220,10 +220,24 @@ details.undocumented > summary::before { filter: invert(100%); } -#crate-search, .search-input { +.search-input { background-color: #141920; + border-color: #424c57; +} +#crate-search { + background-color: #0f1419; /* Without the `!important`, the border-color is ignored for ``... */ - border-color: #f0f0f0 !important; + border-color: #d2d2d2; +} +#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 { diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index e8770ac212426..97ef959bd1a7e 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -188,11 +188,25 @@ details.undocumented > summary::before { color: #999; } -#crate-search, .search-input { +.search-input { + background-color: white; + border-color: #e0e0e0; +} +#crate-search { background-color: white; /* Without the `!important`, the border-color is ignored for `"; + crates = " in 
"; - } - - 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 d0b3175114cce..3139a5b99d0cf 100644 --- a/src/test/rustdoc-gui/search-filter.goml +++ b/src/test/rustdoc-gui/search-filter.goml @@ -38,7 +38,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 @@ -46,8 +46,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. @@ -67,15 +67,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 b31905a126a0e..4721bda4cd6e3 100644 --- a/src/test/rustdoc-gui/search-result-display.goml +++ b/src/test/rustdoc-gui/search-result-display.goml @@ -2,7 +2,7 @@ goto: file://|DOC_PATH|/test_docs/index.html size: (900, 1000) write: (".search-input", "test") -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"}) @@ -15,26 +15,28 @@ assert-css: (".search-results div.desc", {"width": "570px"}) // To do so we need to update the length of one of its `