Rollup merge of #115988 - notriddle:notriddle/search-tab-layout, r=Gu…

…illaumeGomez

rustdoc: add test cases, and fix, search tabs layout jank

## Before

### Resizing

https://github.com/rust-lang/rust/assets/1593513/24bb5f2b-f6bd-4ed8-91e1-f9ff63d1acee

### Typing

https://github.com/rust-lang/rust/assets/1593513/145f53e1-42eb-4b2a-adba-7c9ab44b0aa4

## After

### Resizing

https://github.com/rust-lang/rust/assets/1593513/acc10a55-e83e-43e6-8604-5dfcb9ae3141

### Typing

https://github.com/rust-lang/rust/assets/1593513/09d6d389-e24f-428f-933f-83d9075f15a2

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

@@ -1355,6 +1355,7 @@ a.tooltip:hover::after {
 
 #search-tabs .count {
 	font-size: 1rem;
+	font-variant-numeric: tabular-nums;
 	color: var(--search-tab-title-count-color);
 }
 
@@ -1637,6 +1638,13 @@ However, it's not needed with smaller screen width because the doc/code block is
 
 /* Media Queries */
 
+/* Make sure all the buttons line wrap at the same time */
+@media (max-width: 850px) {
+	#search-tabs .count {
+		display: block;
+	}
+}
+
 /*
 WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
 If you update this line, then you also need to update the line with the same warning
@@ -1764,10 +1772,6 @@ in src-script.js
 		display: none !important;
 	}
 
-	#search-tabs .count {
-		display: block;
-	}
-
 	#main-content > details.toggle > summary::before,
 	#main-content > div > details.toggle > summary::before {
 		left: -11px;

src/librustdoc/html/static/js/search.js

@@ -2334,11 +2334,20 @@ ${item.displayPath}<span class="${type}">${name}</span>\
     }
 
     function makeTabHeader(tabNb, text, nbElems) {
+        // https://blog.horizon-eda.org/misc/2020/02/19/ui.html
+        //
+        // CSS runs with `font-variant-numeric: tabular-nums` to ensure all
+        // digits are the same width. \u{2007} is a Unicode space character
+        // that is defined to be the same width as a digit.
+        const fmtNbElems =
+            nbElems < 10  ? `\u{2007}(${nbElems})\u{2007}\u{2007}` :
+            nbElems < 100 ? `\u{2007}(${nbElems})\u{2007}` :
+            `\u{2007}(${nbElems})`;
         if (searchState.currentTab === tabNb) {
             return "<button class=\"selected\">" + text +
-                   " <span class=\"count\">(" + nbElems + ")</span></button>";
+                   "<span class=\"count\">" + fmtNbElems + "</span></button>";
         }
-        return "<button>" + text + " <span class=\"count\">(" + nbElems + ")</span></button>";
+        return "<button>" + text + "<span class=\"count\">" + fmtNbElems + "</span></button>";
     }
 
     /**

tests/rustdoc-gui/search-tab.goml

@@ -1,5 +1,5 @@
 // Checking the colors of the search tab headers.
-go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html?search=something"
+go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html?search=foo"
 show-text: true
 
 define-function: (
@@ -74,3 +74,87 @@ call-function: ("check-colors", {
     "border_top_selected": "2px solid #0089ff",
     "border_top_hover": "2px solid #0089ff",
 })
+
+// set size wide enough that the text is in a single row
+set-window-size: (851, 600)
+
+// Check the size and count in tabs
+assert-text: ("#search-tabs > button:nth-child(1) > .count", " (23) ")
+assert-text: ("#search-tabs > button:nth-child(2) > .count", " (4)  ")
+assert-text: ("#search-tabs > button:nth-child(3) > .count", " (0)  ")
+store-property: ("#search-tabs > button:nth-child(1)", {"offsetWidth": buttonWidth})
+assert-property: ("#search-tabs > button:nth-child(2)", {"offsetWidth": |buttonWidth|})
+assert-property: ("#search-tabs > button:nth-child(3)", {"offsetWidth": |buttonWidth|})
+store-property: ("#search-tabs > button:nth-child(1) > .count", {"offsetWidth": countWidth})
+assert-property: ("#search-tabs > button:nth-child(2) > .count", {"offsetWidth": |countWidth|})
+assert-property: ("#search-tabs > button:nth-child(3) > .count", {"offsetWidth": |countWidth|})
+
+// Check that counts are in a row with each other
+compare-elements-position: (
+    "#search-tabs > button:nth-child(1) > .count",
+    "#search-tabs > button:nth-child(2) > .count",
+    ("y")
+)
+compare-elements-position: (
+    "#search-tabs > button:nth-child(2) > .count",
+    "#search-tabs > button:nth-child(3) > .count",
+    ("y")
+)
+// Check that counts are beside the titles and haven't wrapped
+compare-elements-position-near: (
+    "#search-tabs > button:nth-child(1)",
+    "#search-tabs > button:nth-child(1) > .count",
+    {"y": 8}
+)
+compare-elements-position-near: (
+    "#search-tabs > button:nth-child(2)",
+    "#search-tabs > button:nth-child(2) > .count",
+    {"y": 8}
+)
+compare-elements-position-near: (
+    "#search-tabs > button:nth-child(2)",
+    "#search-tabs > button:nth-child(2) > .count",
+    {"y": 8}
+)
+
+// Set size narrow enough that they wrap.
+// When I tested it, it wrapped at 811px, but I added some fudge factor to ensure it
+// doesn't prematurely wrap with slightly different font kerning or whatever, with a
+// @media query
+set-window-size: (850, 600)
+
+// all counts and buttons still have same size
+store-property: ("#search-tabs > button:nth-child(1)", {"offsetWidth": buttonWidth})
+assert-property: ("#search-tabs > button:nth-child(2)", {"offsetWidth": |buttonWidth|})
+assert-property: ("#search-tabs > button:nth-child(3)", {"offsetWidth": |buttonWidth|})
+store-property: ("#search-tabs > button:nth-child(1) > .count", {"offsetWidth": countWidth})
+assert-property: ("#search-tabs > button:nth-child(2) > .count", {"offsetWidth": |countWidth|})
+assert-property: ("#search-tabs > button:nth-child(3) > .count", {"offsetWidth": |countWidth|})
+
+// Check that counts are still in a row with each other
+compare-elements-position: (
+    "#search-tabs > button:nth-child(1) > .count",
+    "#search-tabs > button:nth-child(2) > .count",
+    ("y")
+)
+compare-elements-position: (
+    "#search-tabs > button:nth-child(2) > .count",
+    "#search-tabs > button:nth-child(3) > .count",
+    ("y")
+)
+// Check that counts are NOT beside the titles; now they have wrapped
+compare-elements-position-near-false: (
+    "#search-tabs > button:nth-child(1)",
+    "#search-tabs > button:nth-child(1) > .count",
+    {"y": 8}
+)
+compare-elements-position-near-false: (
+    "#search-tabs > button:nth-child(2)",
+    "#search-tabs > button:nth-child(2) > .count",
+    {"y": 8}
+)
+compare-elements-position-near-false: (
+    "#search-tabs > button:nth-child(2)",
+    "#search-tabs > button:nth-child(2) > .count",
+    {"y": 8}
+)