Move type name directly into the same DOM element

Author: GuillaumeGomez

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;

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

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']"

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: (

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.

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