From 741d210c44bc637a30dd1e4675848c1c2aae5952 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sat, 22 Apr 2023 16:00:20 +0200 Subject: [PATCH 1/5] Add search result item types after their name --- src/librustdoc/html/static/css/rustdoc.css | 4 +- src/librustdoc/html/static/js/search.js | 43 +++++++++++++++++----- 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 054cfe7597ea..b487cfa5c255 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -213,7 +213,7 @@ a.anchor, h1 a, .search-results a, .stab, -.result-name .primitive > i, .result-name .keyword > i { +.result-name i { color: var(--main-color); } @@ -887,7 +887,7 @@ so that we can apply CSS-filters to change the arrow color in themes */ .search-results .result-name span.alias { color: var(--search-results-alias-color); } -.search-results .result-name span.grey { +.search-results .result-name .grey { color: var(--search-results-grey-color); } diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index 62afe40bb315..f65d39151241 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -35,6 +35,35 @@ const itemTypes = [ "traitalias", ]; +const longItemTypes = [ + "module", + "extern crate", + "re-export", + "struct", + "enum", + "function", + "type alias", + "static", + "trait", + "", + "trait method", + "method", + "struct field", + "enum variant", + "macro", + "primitive type", + "associated type", + "constant", + "associated constant", + "union", + "foreign type", + "keyword", + "existential type", + "attribute macro", + "derive macro", + "trait alias", +]; + // used for special search precedence const TY_PRIMITIVE = itemTypes.indexOf("primitive"); const TY_KEYWORD = itemTypes.indexOf("keyword"); @@ -1836,16 +1865,11 @@ function initSearch(rawSearchIndex) { array.forEach(item => { const name = item.name; const type = itemTypes[item.ty]; + const longType = longItemTypes[item.ty]; + let extra = longType.length !== 0 ? ` (${longType})` : ""; length += 1; - let extra = ""; - if (type === "primitive") { - extra = " (primitive type)"; - } else if (type === "keyword") { - extra = " (keyword)"; - } - const link = document.createElement("a"); link.className = "result-" + type; link.href = item.href; @@ -1854,6 +1878,7 @@ function initSearch(rawSearchIndex) { resultName.className = "result-name"; if (item.is_alias) { + extra = ""; const alias = document.createElement("span"); alias.className = "alias"; @@ -1863,13 +1888,13 @@ function initSearch(rawSearchIndex) { alias.insertAdjacentHTML( "beforeend", - " - see "); + " - see "); resultName.appendChild(alias); } resultName.insertAdjacentHTML( "beforeend", - item.displayPath + "" + name + extra + ""); + item.displayPath + "" + name + "" + extra); link.appendChild(resultName); const description = document.createElement("div"); From 7a09a688de6f1565fe1608eaaaee5ff4fe0c3a6d Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sat, 22 Apr 2023 16:00:29 +0200 Subject: [PATCH 2/5] Update rustdoc tests and add more checks for type kind colors --- tests/rustdoc-gui/search-reexport.goml | 2 +- tests/rustdoc-gui/search-result-color.goml | 14 +++++++++++--- tests/rustdoc-gui/search-result-keyword.goml | 4 ++-- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/tests/rustdoc-gui/search-reexport.goml b/tests/rustdoc-gui/search-reexport.goml index fd817b58990c..06a0dc949c4e 100644 --- a/tests/rustdoc-gui/search-reexport.goml +++ b/tests/rustdoc-gui/search-reexport.goml @@ -14,7 +14,7 @@ assert-attribute: ( "//a[@class='result-import']", {"href": "../test_docs/index.html#reexport.TheStdReexport"}, ) -assert-text: ("//a[@class='result-import']", "test_docs::TheStdReexport") +assert-text: ("//a[@class='result-import']", "test_docs::TheStdReexport (re-export)") click: "//a[@class='result-import']" // We check that it has the background modified thanks to the focus. wait-for-css: ("//*[@id='reexport.TheStdReexport']", {"background-color": "rgb(73, 74, 61)"}) diff --git a/tests/rustdoc-gui/search-result-color.goml b/tests/rustdoc-gui/search-result-color.goml index 90f7160b7249..b0d236ce1e5d 100644 --- a/tests/rustdoc-gui/search-result-color.goml +++ b/tests/rustdoc-gui/search-result-color.goml @@ -5,6 +5,7 @@ define-function: ( (result_kind, color, hover_color), block { assert-css: (".result-" + |result_kind| + " ." + |result_kind|, {"color": |color|}, ALL) + assert-css: (".result-" + |result_kind| + " i", {"color": |default_color|}) assert-css: ( ".result-" + |result_kind|, {"color": |entry_color|, "background-color": |background_color|}, @@ -18,6 +19,7 @@ define-function: ( ".result-" + |result_kind| + ":hover ." + |result_kind|, {"color": |hover_color|}, ) + assert-css: (".result-" + |result_kind| + ":hover i", {"color": |default_color|}) move-cursor-to: ".search-input" focus: ".result-" + |result_kind| assert-css: ( @@ -65,10 +67,12 @@ assert-css: ( {"border-bottom-color": "#aaa3"} ) +store-value: (default_color, "rgb(197, 197, 197)") + // Checking the color of "keyword" text. assert-css: ( "//*[@class='result-name']//*[text()='(keyword)']", - {"color": "#788797"}, + {"color": |default_color|}, ) store-value: (entry_color, "#0096cf") // color of the search entry @@ -182,10 +186,12 @@ assert-css: ( {"border-bottom-color": "#aaa3"} ) +store-value: (default_color, "rgb(221, 221, 221)") + // Checking the color for "keyword" text. assert-css: ( "//*[@class='result-name']//*[text()='(keyword)']", - {"color": "#ddd"}, + {"color": |default_color|}, ) store-value: (entry_color, "#ddd") // color of the search entry @@ -284,10 +290,12 @@ assert-css: ( {"border-bottom-color": "#aaa3"} ) +store-value: (default_color, "rgb(0, 0, 0)") + // Checking the color for "keyword" text. assert-css: ( "//*[@class='result-name']//*[text()='(keyword)']", - {"color": "#000"}, + {"color": |default_color|}, ) store-value: (entry_color, "#000") // color of the search entry diff --git a/tests/rustdoc-gui/search-result-keyword.goml b/tests/rustdoc-gui/search-result-keyword.goml index 5d56e9d9cd42..8d6478e28a5b 100644 --- a/tests/rustdoc-gui/search-result-keyword.goml +++ b/tests/rustdoc-gui/search-result-keyword.goml @@ -9,5 +9,5 @@ wait-for: "#search-tabs" // less good. // // Checking that the CSS is displaying " (keyword)" in italic. -assert-text: (".result-name span.keyword > i", "(keyword)") -assert-text: (".result-name span.keyword", "CookieMonster (keyword)") +assert-text: (".result-keyword span.keyword + i", "(keyword)") +assert-text: (".result-keyword .result-name", "CookieMonster (keyword)") From 8a35cc3ddc5b18303d67d0455fa1a8fa88ca0af8 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 18 May 2023 16:16:13 +0200 Subject: [PATCH 3/5] Move item kind before the item name --- src/librustdoc/html/static/css/rustdoc.css | 5 ++++ src/librustdoc/html/static/js/search.js | 11 +++++--- tests/rustdoc-gui/search-reexport.goml | 5 ++-- tests/rustdoc-gui/search-result-color.goml | 28 ++------------------ tests/rustdoc-gui/search-result-display.goml | 4 +-- tests/rustdoc-gui/search-result-keyword.goml | 4 +-- 6 files changed, 22 insertions(+), 35 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index b487cfa5c255..d469b397dcfc 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -190,6 +190,7 @@ h1, h2, h3, h4, h5, h6, .mobile-topbar, .search-input, .search-results .result-name, +.search-results .type-kind, .item-name > a, .out-of-band, span.since, @@ -870,6 +871,10 @@ so that we can apply CSS-filters to change the arrow color in themes */ } .search-results > a > div { + flex: 3; +} + +.search-results > a > div.type-kind { flex: 1; } diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index f65d39151241..c25c36994fa4 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -1866,7 +1866,7 @@ function initSearch(rawSearchIndex) { const name = item.name; const type = itemTypes[item.ty]; const longType = longItemTypes[item.ty]; - let extra = longType.length !== 0 ? ` (${longType})` : ""; + const typeName = longType.length !== 0 ? `${longType}` : "?"; length += 1; @@ -1878,7 +1878,6 @@ function initSearch(rawSearchIndex) { resultName.className = "result-name"; if (item.is_alias) { - extra = ""; const alias = document.createElement("span"); alias.className = "alias"; @@ -1892,9 +1891,15 @@ function initSearch(rawSearchIndex) { resultName.appendChild(alias); } + + const typeDisplay = document.createElement("div"); + typeDisplay.innerText = typeName; + typeDisplay.className = "type-kind"; + link.appendChild(typeDisplay); + resultName.insertAdjacentHTML( "beforeend", - item.displayPath + "" + name + "" + extra); + item.displayPath + "" + name + ""); link.appendChild(resultName); const description = document.createElement("div"); diff --git a/tests/rustdoc-gui/search-reexport.goml b/tests/rustdoc-gui/search-reexport.goml index 06a0dc949c4e..4f3ccd715994 100644 --- a/tests/rustdoc-gui/search-reexport.goml +++ b/tests/rustdoc-gui/search-reexport.goml @@ -14,7 +14,8 @@ assert-attribute: ( "//a[@class='result-import']", {"href": "../test_docs/index.html#reexport.TheStdReexport"}, ) -assert-text: ("//a[@class='result-import']", "test_docs::TheStdReexport (re-export)") +assert-text: ("a.result-import .result-name", "test_docs::TheStdReexport") +assert-text: ("a.result-import .type-kind", "re-export") click: "//a[@class='result-import']" // We check that it has the background modified thanks to the focus. wait-for-css: ("//*[@id='reexport.TheStdReexport']", {"background-color": "rgb(73, 74, 61)"}) @@ -25,7 +26,7 @@ press-key: 'Enter' write: (".search-input", "AliasForTheStdReexport") wait-for: "//a[@class='result-import']" assert-text: ( - "//a[@class='result-import']", + "a.result-import .result-name", "AliasForTheStdReexport - see test_docs::TheStdReexport", ) // Same thing again, we click on it to ensure the background is once again set as expected. diff --git a/tests/rustdoc-gui/search-result-color.goml b/tests/rustdoc-gui/search-result-color.goml index b0d236ce1e5d..5ae3125a7f18 100644 --- a/tests/rustdoc-gui/search-result-color.goml +++ b/tests/rustdoc-gui/search-result-color.goml @@ -5,7 +5,7 @@ define-function: ( (result_kind, color, hover_color), block { assert-css: (".result-" + |result_kind| + " ." + |result_kind|, {"color": |color|}, ALL) - assert-css: (".result-" + |result_kind| + " i", {"color": |default_color|}) + assert-css: (".result-" + |result_kind| + " .type-kind", {"color": |entry_color|}) assert-css: ( ".result-" + |result_kind|, {"color": |entry_color|, "background-color": |background_color|}, @@ -19,7 +19,7 @@ define-function: ( ".result-" + |result_kind| + ":hover ." + |result_kind|, {"color": |hover_color|}, ) - assert-css: (".result-" + |result_kind| + ":hover i", {"color": |default_color|}) + assert-css: (".result-" + |result_kind| + ":hover .type-kind", {"color": |hover_entry_color|}) move-cursor-to: ".search-input" focus: ".result-" + |result_kind| assert-css: ( @@ -67,14 +67,6 @@ assert-css: ( {"border-bottom-color": "#aaa3"} ) -store-value: (default_color, "rgb(197, 197, 197)") - -// Checking the color of "keyword" text. -assert-css: ( - "//*[@class='result-name']//*[text()='(keyword)']", - {"color": |default_color|}, -) - store-value: (entry_color, "#0096cf") // color of the search entry store-value: (hover_entry_color, "#fff") // color of the hovered/focused search entry store-value: (background_color, "transparent") // background color @@ -186,14 +178,6 @@ assert-css: ( {"border-bottom-color": "#aaa3"} ) -store-value: (default_color, "rgb(221, 221, 221)") - -// Checking the color for "keyword" text. -assert-css: ( - "//*[@class='result-name']//*[text()='(keyword)']", - {"color": |default_color|}, -) - store-value: (entry_color, "#ddd") // color of the search entry store-value: (hover_entry_color, "#ddd") // color of the hovered/focused search entry store-value: (background_color, "transparent") // background color @@ -290,14 +274,6 @@ assert-css: ( {"border-bottom-color": "#aaa3"} ) -store-value: (default_color, "rgb(0, 0, 0)") - -// Checking the color for "keyword" text. -assert-css: ( - "//*[@class='result-name']//*[text()='(keyword)']", - {"color": |default_color|}, -) - store-value: (entry_color, "#000") // color of the search entry store-value: (hover_entry_color, "#000") // color of the hovered/focused search entry store-value: (background_color, "transparent") // background color diff --git a/tests/rustdoc-gui/search-result-display.goml b/tests/rustdoc-gui/search-result-display.goml index bf096f62c483..08c43b4899cd 100644 --- a/tests/rustdoc-gui/search-result-display.goml +++ b/tests/rustdoc-gui/search-result-display.goml @@ -7,11 +7,11 @@ 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-css: (".search-results div.desc", {"width": "310px"}) +assert-size: (".search-results div.desc", {"width": 259}) 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-css: (".search-results div.desc", {"width": "566px"}) +assert-size: (".search-results div.desc", {"width": 566}) // The result set is all on one line. assert-css: (".search-results .result-name > span", {"display": "inline"}) diff --git a/tests/rustdoc-gui/search-result-keyword.goml b/tests/rustdoc-gui/search-result-keyword.goml index 8d6478e28a5b..3326f5b72f4d 100644 --- a/tests/rustdoc-gui/search-result-keyword.goml +++ b/tests/rustdoc-gui/search-result-keyword.goml @@ -9,5 +9,5 @@ wait-for: "#search-tabs" // less good. // // Checking that the CSS is displaying " (keyword)" in italic. -assert-text: (".result-keyword span.keyword + i", "(keyword)") -assert-text: (".result-keyword .result-name", "CookieMonster (keyword)") +assert-text: (".result-keyword .type-kind", "keyword") +assert-text: (".result-keyword .result-name", "CookieMonster") From f92cd677114d76d78c73177d21184c83a087a6b6 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Tue, 23 May 2023 13:41:59 +0200 Subject: [PATCH 4/5] Improve new search result display on mobile --- src/librustdoc/html/static/css/rustdoc.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index d469b397dcfc..167319ba9bd7 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1722,6 +1722,14 @@ in source-script.js display: block; } + .search-results > a > .type-kind { + display: inline-block; + } + .search-results > a > .result-name { + display: inline-block; + margin-left: 7px; + } + /* Display an alternating layout on tablets and phones */ .search-results > a { padding: 5px 0px; From de85f7ff363a80ab0eefc6909edc24b5c99880c4 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sat, 3 Jun 2023 16:22:19 +0200 Subject: [PATCH 5/5] Move type name directly into the same DOM element --- src/librustdoc/html/static/css/rustdoc.css | 13 ------------- src/librustdoc/html/static/js/search.js | 7 +------ tests/rustdoc-gui/search-reexport.goml | 5 ++--- tests/rustdoc-gui/search-result-color.goml | 2 -- tests/rustdoc-gui/search-result-display.goml | 2 +- tests/rustdoc-gui/search-result-keyword.goml | 7 +------ 6 files changed, 5 insertions(+), 31 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 167319ba9bd7..b487cfa5c255 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -190,7 +190,6 @@ h1, h2, h3, h4, h5, h6, .mobile-topbar, .search-input, .search-results .result-name, -.search-results .type-kind, .item-name > a, .out-of-band, span.since, @@ -871,10 +870,6 @@ so that we can apply CSS-filters to change the arrow color in themes */ } .search-results > a > div { - flex: 3; -} - -.search-results > a > div.type-kind { flex: 1; } @@ -1722,14 +1717,6 @@ in source-script.js display: block; } - .search-results > a > .type-kind { - display: inline-block; - } - .search-results > a > .result-name { - display: inline-block; - margin-left: 7px; - } - /* Display an alternating layout on tablets and phones */ .search-results > a { padding: 5px 0px; diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index c25c36994fa4..eff8aa79caf9 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -1892,14 +1892,9 @@ function initSearch(rawSearchIndex) { resultName.appendChild(alias); } - const typeDisplay = document.createElement("div"); - typeDisplay.innerText = typeName; - typeDisplay.className = "type-kind"; - link.appendChild(typeDisplay); - resultName.insertAdjacentHTML( "beforeend", - item.displayPath + "" + name + ""); + `${typeName} ${item.displayPath}${name}`); link.appendChild(resultName); const description = document.createElement("div"); diff --git a/tests/rustdoc-gui/search-reexport.goml b/tests/rustdoc-gui/search-reexport.goml index 4f3ccd715994..0ce4e99339fb 100644 --- a/tests/rustdoc-gui/search-reexport.goml +++ b/tests/rustdoc-gui/search-reexport.goml @@ -14,8 +14,7 @@ assert-attribute: ( "//a[@class='result-import']", {"href": "../test_docs/index.html#reexport.TheStdReexport"}, ) -assert-text: ("a.result-import .result-name", "test_docs::TheStdReexport") -assert-text: ("a.result-import .type-kind", "re-export") +assert-text: ("a.result-import .result-name", "re-export test_docs::TheStdReexport") click: "//a[@class='result-import']" // We check that it has the background modified thanks to the focus. wait-for-css: ("//*[@id='reexport.TheStdReexport']", {"background-color": "rgb(73, 74, 61)"}) @@ -27,7 +26,7 @@ write: (".search-input", "AliasForTheStdReexport") wait-for: "//a[@class='result-import']" assert-text: ( "a.result-import .result-name", - "AliasForTheStdReexport - see test_docs::TheStdReexport", + "AliasForTheStdReexport - see re-export test_docs::TheStdReexport", ) // Same thing again, we click on it to ensure the background is once again set as expected. click: "//a[@class='result-import']" diff --git a/tests/rustdoc-gui/search-result-color.goml b/tests/rustdoc-gui/search-result-color.goml index 5ae3125a7f18..c75e4141434e 100644 --- a/tests/rustdoc-gui/search-result-color.goml +++ b/tests/rustdoc-gui/search-result-color.goml @@ -5,7 +5,6 @@ define-function: ( (result_kind, color, hover_color), block { assert-css: (".result-" + |result_kind| + " ." + |result_kind|, {"color": |color|}, ALL) - assert-css: (".result-" + |result_kind| + " .type-kind", {"color": |entry_color|}) assert-css: ( ".result-" + |result_kind|, {"color": |entry_color|, "background-color": |background_color|}, @@ -19,7 +18,6 @@ define-function: ( ".result-" + |result_kind| + ":hover ." + |result_kind|, {"color": |hover_color|}, ) - assert-css: (".result-" + |result_kind| + ":hover .type-kind", {"color": |hover_entry_color|}) move-cursor-to: ".search-input" focus: ".result-" + |result_kind| assert-css: ( diff --git a/tests/rustdoc-gui/search-result-display.goml b/tests/rustdoc-gui/search-result-display.goml index 08c43b4899cd..afb3a44be303 100644 --- a/tests/rustdoc-gui/search-result-display.goml +++ b/tests/rustdoc-gui/search-result-display.goml @@ -7,7 +7,7 @@ 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": 259}) +assert-size: (".search-results div.desc", {"width": 310}) 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. diff --git a/tests/rustdoc-gui/search-result-keyword.goml b/tests/rustdoc-gui/search-result-keyword.goml index 3326f5b72f4d..1b2be6d4e3e2 100644 --- a/tests/rustdoc-gui/search-result-keyword.goml +++ b/tests/rustdoc-gui/search-result-keyword.goml @@ -5,9 +5,4 @@ write: (".search-input", "CookieMonster") press-key: 'Enter' // Waiting for the search results to appear... wait-for: "#search-tabs" -// Note: The two next assert commands could be merged as one but readability would be -// less good. -// -// Checking that the CSS is displaying " (keyword)" in italic. -assert-text: (".result-keyword .type-kind", "keyword") -assert-text: (".result-keyword .result-name", "CookieMonster") +assert-text: (".result-keyword .result-name", "keyword CookieMonster")