Move item kind before the item name

Author: GuillaumeGomez

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;
 }
 

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 ? ` <i>(${longType})</i>` : "";
+                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 + "<span class=\"" + type + "\">" + name + "</span>" + extra);
+                    item.displayPath + "<span class=\"" + type + "\">" + name + "</span>");
                 link.appendChild(resultName);
 
                 const description = document.createElement("div");

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.

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

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"})

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")