Rollup merge of #105504 - notriddle:notriddle/stab-css, r=GuillaumeGomez

rustdoc: make stability badge CSS more consistent

# Before

![image](https://user-images.githubusercontent.com/1593513/206763667-8e0deb74-be63-4906-8229-9a7eb51725c2.png)

![image](https://user-images.githubusercontent.com/1593513/206764007-6301c0e8-4594-4a41-ba93-105824dffee6.png)

# After

![image](https://user-images.githubusercontent.com/1593513/206763698-e187cee2-3a50-4e48-b7b5-c3cfa41a797d.png)

![image](https://user-images.githubusercontent.com/1593513/206764058-3999ee67-1439-4c98-8216-b90575342aa8.png)

# Description

* They all get rounded corners now. A test case has been added for this, too.

* There are now broadly two kinds of stability badge, where there used to be three: item-info "fat badge", and the "thin badge" in both item tables and in docblocks (which got merged). The fat badges can have icons, while the thin badges can't.

* The old Ayu design doesn't make sense to me. Does anyone know why it was done that way?

Author: matthiaskrgr

src/librustdoc/html/static/css/rustdoc.css

@@ -212,7 +212,7 @@ pre.rust a,
 .mobile-topbar h2 a,
 h1 a,
 .search-results a,
-.item-left .stab,
+.stab,
 .result-name .primitive > i, .result-name .keyword > i {
 	color: var(--main-color);
 }
@@ -960,22 +960,29 @@ so that we can apply CSS-filters to change the arrow color in themes */
 }
 
 .item-info .stab {
-	width: fit-content;
 	/* This min-height is needed to unify the height of the stab elements because some of them
 	   have emojis.
 	*/
 	min-height: 36px;
 	display: flex;
-	align-items: center;
-	white-space: pre-wrap;
-}
-.stab {
 	padding: 3px;
 	margin-bottom: 5px;
+}
+.item-left .stab {
+	margin-left: 0.3125em;
+}
+.stab {
+	padding: 0 2px;
 	font-size: 0.875rem;
 	font-weight: normal;
 	color: var(--main-color);
 	background-color: var(--stab-background-color);
+	width: fit-content;
+	align-items: center;
+	white-space: pre-wrap;
+	border-radius: 3px;
+	display: inline-flex;
+	vertical-align: text-bottom;
 }
 
 .stab.portability > code {
@@ -988,12 +995,6 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	margin-right: 0.3rem;
 }
 
-/* This is to prevent the `.stab` elements to overflow the .docblock elements. */
-.docblock .stab {
-	padding: 0 0.125em;
-	margin-bottom: 0;
-}
-
 /* Black one-pixel outline around emoji shapes */
 .emoji {
 	text-shadow:
@@ -1003,16 +1004,6 @@ so that we can apply CSS-filters to change the arrow color in themes */
 		0 -1px 0 black;
 }
 
-.item-left .stab {
-	border-radius: 3px;
-	display: inline-block;
-	line-height: 1.2;
-	margin-bottom: 0;
-	margin-left: 0.3125em;
-	padding: 2px;
-	vertical-align: text-bottom;
-}
-
 .module-item.unstable,
 .import-item.unstable {
 	opacity: 0.65;

src/librustdoc/html/static/css/themes/ayu.css

@@ -160,11 +160,6 @@ body.source .example-wrap pre.rust a {
 	background: #333;
 }
 
-.module-item .stab,
-.import-item .stab {
-	color: #000;
-}
-
 .result-name .primitive > i, .result-name .keyword > i {
 	color: #788797;
 }

src/test/rustdoc-gui/stab-badge.goml

@@ -0,0 +1,41 @@
+// All stability badges should have rounded corners and colored backgrounds.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+show-text: true
+define-function: (
+	"check-badge",
+	(theme, background, color),
+	[
+        ("local-storage", {"rustdoc-use-system-theme": "false", "rustdoc-theme": |theme|}),
+        ("goto", "file://" + |DOC_PATH| + "/test_docs/index.html"),
+		("assert", (".docblock .stab")),
+		("assert", (".item-table .stab")),
+		("assert-css", (".stab", {
+			"border-radius": "3px",
+			"color": |color|,
+			"background-color": |background|,
+		})),
+        ("goto", "file://" + |DOC_PATH| + "/test_docs/fn.replaced_function.html"),
+		("assert", (".item-info .stab")),
+		("assert-css", (".stab", {
+			"border-radius": "3px",
+			"color": |color|,
+			"background-color": |background|,
+		})),
+	]
+)
+
+call-function: ("check-badge", {
+	"theme": "ayu",
+	"color": "rgb(197, 197, 197)",
+	"background": "rgb(49, 69, 89)",
+})
+call-function: ("check-badge", {
+	"theme": "dark",
+	"color": "rgb(221, 221, 221)",
+	"background": "rgb(49, 69, 89)",
+})
+call-function: ("check-badge", {
+	"theme": "light",
+	"color": "rgb(0, 0, 0)",
+	"background": "rgb(255, 245, 214)",
+})