diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index b6d90091bbaef..ccfd4cc5b875b 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -8,6 +8,7 @@ :root { --nav-sub-mobile-padding: 8px; + --search-typename-width: 6.75rem; } /* See FiraSans-LICENSE.txt for the Fira Sans license. */ @@ -869,14 +870,11 @@ so that we can apply CSS-filters to change the arrow color in themes */ gap: 1em; } -.search-results > a > div { - flex: 1; -} - .search-results > a > div.desc { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + flex: 2; } .search-results a:hover, @@ -884,6 +882,12 @@ so that we can apply CSS-filters to change the arrow color in themes */ background-color: var(--search-result-link-focus-background-color); } +.search-results .result-name { + display: flex; + align-items: center; + justify-content: start; + flex: 3; +} .search-results .result-name span.alias { color: var(--search-results-alias-color); } @@ -891,10 +895,14 @@ so that we can apply CSS-filters to change the arrow color in themes */ color: var(--search-results-grey-color); } .search-results .result-name .typename { - display: inline-block; color: var(--search-results-grey-color); font-size: 0.875rem; - width: 6.25rem; + width: var(--search-typename-width); +} +.search-results .result-name .path { + word-break: break-all; + max-width: calc(100% - var(--search-typename-width)); + display: inline-block; } .popover { @@ -1730,6 +1738,16 @@ in source-script.js .search-results > a > div.desc, .item-table > li > div.desc { padding-left: 2em; } + .search-results .result-name { + display: block; + } + .search-results .result-name .typename { + width: initial; + margin-right: 0; + } + .search-results .result-name .typename, .search-results .result-name .path { + display: inline; + } .source-sidebar-expanded .source .sidebar { max-width: 100vw; diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index b8cc0a6db714d..345750395f06c 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -2024,9 +2024,11 @@ function initSearch(rawSearchIndex) { resultName.insertAdjacentHTML( "beforeend", - `${typeName}` - + ` ${item.displayPath}${name}` - ); + `\ +${typeName}\ +
\ + ${item.displayPath}${name}\ +
`); link.appendChild(resultName); const description = document.createElement("div"); diff --git a/tests/rustdoc-gui/search-result-color.goml b/tests/rustdoc-gui/search-result-color.goml index e3c628b366fbd..7a7785fd9ac30 100644 --- a/tests/rustdoc-gui/search-result-color.goml +++ b/tests/rustdoc-gui/search-result-color.goml @@ -61,7 +61,7 @@ assert-css: ( {"color": "#c5c5c5"}, ) assert-css: ( - "//*[@class='result-name']/*[text()='test_docs::']", + "//*[@class='result-name']//*[text()='test_docs::']", {"color": "#0096cf"}, ) @@ -138,7 +138,7 @@ call-function: ( move-cursor-to: ".search-input" focus: ".search-input" // To ensure the `` container isnt focus or hover. assert-css: ( - "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a", + "//*[@class='result-name']//*[text()='test_docs::']/ancestor::a", {"color": "#0096cf", "background-color": "transparent"}, ALL, ) @@ -146,11 +146,11 @@ assert-css: ( // Checking color and background on hover. move-cursor-to: "//*[@class='desc'][text()='Just a normal struct.']" assert-css: ( - "//*[@class='result-name']/*[text()='test_docs::']", + "//*[@class='result-name']//*[text()='test_docs::']", {"color": "#fff"}, ) assert-css: ( - "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a", + "//*[@class='result-name']//*[text()='test_docs::']/ancestor::a", {"color": "#fff", "background-color": "rgb(60, 60, 60)"}, ) @@ -173,7 +173,7 @@ assert-css: ( {"color": "#ddd"}, ) assert-css: ( - "//*[@class='result-name']/*[text()='test_docs::']", + "//*[@class='result-name']//*[text()='test_docs::']", {"color": "#ddd"}, ) @@ -250,7 +250,7 @@ call-function: ( move-cursor-to: ".search-input" focus: ".search-input" // To ensure the `` container isnt focus or hover. assert-css: ( - "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a", + "//*[@class='result-name']//*[text()='test_docs::']/ancestor::a", {"color": "#ddd", "background-color": "transparent"}, ) @@ -270,7 +270,7 @@ assert-css: ( {"color": "#000"}, ) assert-css: ( - "//*[@class='result-name']/*[text()='test_docs::']", + "//*[@class='result-name']//*[text()='test_docs::']", {"color": "#000"}, ) @@ -347,7 +347,7 @@ call-function: ( move-cursor-to: ".search-input" focus: ".search-input" // To ensure the `` container isnt focus or hover. assert-css: ( - "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a", + "//*[@class='result-name']//*[text()='test_docs::']/ancestor::a", {"color": "#000", "background-color": "transparent"}, ) diff --git a/tests/rustdoc-gui/search-result-display.goml b/tests/rustdoc-gui/search-result-display.goml index 6593c1a9c45a5..f4c0e3eb04731 100644 --- a/tests/rustdoc-gui/search-result-display.goml +++ b/tests/rustdoc-gui/search-result-display.goml @@ -1,3 +1,4 @@ +// ignore-tidy-linelength // Checks that the search results have the expected width. go-to: "file://" + |DOC_PATH| + "/test_docs/index.html" set-window-size: (900, 1000) @@ -7,15 +8,40 @@ press-key: 'Enter' wait-for: "#crate-search" // The width is returned by "getComputedStyle" which returns the exact number instead of the // CSS rule which is "50%"... -assert-size: (".search-results div.desc", {"width": 310}) +assert-size: (".search-results div.desc", {"width": 248}) +store-size: (".search-results .result-name .typename", {"width": width}) set-window-size: (600, 100) // As counter-intuitive as it may seem, in this width, the width is "100%", which is why // when computed it's larger. assert-size: (".search-results div.desc", {"width": 566}) // The result set is all on one line. -assert-css: (".search-results .result-name > span:not(.typename)", {"display": "inline"}) -assert-css: (".search-results .result-name > span.typename", {"display": "inline-block"}) +compare-elements-position-near: ( + ".search-results .result-name .typename", + ".search-results .result-name .path", + {"y": 2}, +) +compare-elements-position-near-false: ( + ".search-results .result-name .typename", + ".search-results .result-name .path", + {"x": 5}, +) +// The width of the "typename" isn't fixed anymore in this display mode. +store-size: (".search-results .result-name .typename", {"width": new_width}) +assert: |new_width| < |width| - 10 + +// Check that if the search is too long on mobile, it'll go under the "typename". +go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search=SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName" +wait-for: "#crate-search" +compare-elements-position-near: ( + ".search-results .result-name .typename", + ".search-results .result-name .path", + {"y": 2, "x": 0}, +) +store-size: (".search-results .result-name", {"width": width, "height": height}) +store-size: (".search-results .result-name .path", {"width": sub_width, "height": sub_height}) +assert: |width| < |sub_width| + 8 && |width| > |sub_width| - 8 +assert: |height| < |sub_height| + 8 && |height| > |sub_height| - 8 // Check that the crate filter `