From 9fbee7dcc556cf731e00298f9ed0bbe22f57e7bb Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Tue, 19 Sep 2023 19:40:36 -0700 Subject: [PATCH 1/2] rustdoc: add test cases, and fix, search tabs --- src/librustdoc/html/static/css/rustdoc.css | 12 ++- src/librustdoc/html/static/js/search.js | 9 ++- tests/rustdoc-gui/search-tab.goml | 86 +++++++++++++++++++++- 3 files changed, 100 insertions(+), 7 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 3b23664133761..47f9e65028118 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/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; diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index 407bf5f2c5fe1..3dd60296e81e0 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -2334,11 +2334,16 @@ ${item.displayPath}${name}\ } function makeTabHeader(tabNb, text, nbElems) { + // https://blog.horizon-eda.org/misc/2020/02/19/ui.html + 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 ""; + "" + fmtNbElems + ""; } - return ""; + return ""; } /** diff --git a/tests/rustdoc-gui/search-tab.goml b/tests/rustdoc-gui/search-tab.goml index 7bbde3ec23d3c..427201e1b5da4 100644 --- a/tests/rustdoc-gui/search-tab.goml +++ b/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} +) From 66e0483a654a998cdc480b8e9a15d8d30aa4515b Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Wed, 20 Sep 2023 07:51:30 -0700 Subject: [PATCH 2/2] rustdoc: add comment about numeric spacing --- src/librustdoc/html/static/js/search.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index 3dd60296e81e0..2f0cae0a48e21 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -2335,6 +2335,10 @@ ${item.displayPath}${name}\ 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}` :