diff --git a/src/librustdoc/html/markdown.rs b/src/librustdoc/html/markdown.rs index 699238017c702..ec2e129c364e8 100644 --- a/src/librustdoc/html/markdown.rs +++ b/src/librustdoc/html/markdown.rs @@ -1439,6 +1439,8 @@ fn init_id_map() -> FxHashMap, 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, 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); diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 83fe14550cc21..710ca3ee7c7e7 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -947,18 +947,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.15em; + 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 c42cac59bd6fa..c9bf3a3420bf1 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/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 ``... 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 { diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index b751acff152cb..baa2f70b5937e 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/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 `"; + 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 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..db4907924faf3 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: "#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 `