From 8a35cc3ddc5b18303d67d0455fa1a8fa88ca0af8 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 18 May 2023 16:16:13 +0200 Subject: [PATCH] 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 b487cfa5c25..d469b397dcf 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 f65d3915124..c25c36994fa 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 06a0dc949c4..4f3ccd71599 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 b0d236ce1e5..5ae3125a7f1 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 bf096f62c48..08c43b4899c 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 8d6478e28a5..3326f5b72f4 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")