From 93ca4f0367360cef56c55489dd8dc67dc5488691 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 26 Jun 2023 13:34:46 -0700 Subject: [PATCH] =?UTF-8?q?rustdoc:=20redesign=20[+]/[=E2=88=92]=20control?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is a continuation of #107658 and #59851, making the toggles consistent with other buttons, instead of looking like syntax. The tactics to improve the look of these controls: * When the toggle is expanded, the minus sign remains as dark as before, but the border is lighter. The plus sign has a border that's the same color as the label (black, on the default theme). This makes expansion buttons more prominent, easier to tell apart from collapse buttons. * The plus sign is slightly taller than wide, also to make it easier to tell apart from the minus sign. * The use of crispEdges has to get a bit strategic to make this come out right. I've tested it on Firefox, Safari, and Chromium, but it's a bit hard to be sure it works right on all setups. * Does anybody know some trick to do crispEdges on only the X axis, while still allowing antialiasing on the Y? * The "toggle all" button is modeled after the Help and Settings buttons, with a matching border, width, and +/− label. --- src/librustdoc/html/static/css/rustdoc.css | 43 +++++++++++-------- src/librustdoc/html/static/js/main.js | 4 +- src/librustdoc/html/templates/print_item.html | 4 +- tests/rustdoc-gui/anchors.goml | 16 ++++++- tests/rustdoc-gui/shortcuts.goml | 10 ++--- tests/rustdoc-gui/sidebar.goml | 4 +- tests/rustdoc-gui/toggle-docs.goml | 12 +++--- .../rustdoc-gui/type-declation-overflow.goml | 5 ++- tests/rustdoc/source-version-separator.rs | 4 +- 9 files changed, 60 insertions(+), 42 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 3b23664133761..4c6fb119b746b 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -138,7 +138,7 @@ h1, h2, h3, h4 { margin-top: 0; } .main-heading h1 { - margin: 0; + margin: 9px 0 0 0; padding: 0; flex-grow: 1; /* We use overflow-wrap: break-word for Safari, which doesn't recognize @@ -293,15 +293,6 @@ button { /* end tweaks for normalize.css 8 */ -button#toggle-all-docs { - padding: 0; - background: none; - border: none; - /* iOS button gradient: https://stackoverflow.com/q/5438567 */ - -webkit-appearance: none; - opacity: 1; -} - .rustdoc { display: flex; flex-direction: row; @@ -666,7 +657,7 @@ pre, .rustdoc.src .example-wrap { nav.sub { flex-grow: 1; flex-flow: row nowrap; - margin: 4px 0 25px 0; + margin: 4px 0 16px 0; display: flex; align-items: center; } @@ -1410,11 +1401,11 @@ a.tooltip:hover::after { opacity: 1; } -#settings-menu, #help-button { +#settings-menu, #help-button, button#toggle-all-docs { margin-left: 4px; display: flex; } -#settings-menu > a, #help-button > a { +#settings-menu > a, #help-button > a, button#toggle-all-docs { display: flex; align-items: center; justify-content: center; @@ -1426,13 +1417,23 @@ a.tooltip:hover::after { as an icon, it's okay to specify their sizes in pixels. */ font-size: 20px; width: 33px; + /* iOS button gradient: https://stackoverflow.com/q/5438567 */ + -webkit-appearance: none; + opacity: 1; } #settings-menu > a:hover, #settings-menu > a:focus, -#help-button > a:hover, #help-button > a:focus { +#help-button > a:hover, #help-button > a:focus, +button#toggle-all-docs:hover, button#toggle-all-docs:focus { border-color: var(--settings-button-border-focus); } +button#toggle-all-docs { + height: 34px; + margin-left: 16px; + float: right; +} + #copy-path { color: var(--copy-path-button-color); background: var(--main-background-color); @@ -1532,9 +1533,9 @@ details.toggle > summary.hideme > span { details.toggle > summary::before { /* toggle plus */ - background: url('data:image/svg+xml,') no-repeat top left; + background: url('data:image/svg+xml,') no-repeat top left; content: ""; cursor: pointer; width: 16px; @@ -1565,7 +1566,7 @@ details.toggle > summary.hideme::after { content: ""; } -details.toggle > summary:focus::before, +details.toggle > summary:focus-visible::before, details.toggle > summary:hover::before { opacity: 1; } @@ -1615,7 +1616,7 @@ details.toggle[open] > summary::before { /* toggle minus */ background: url('data:image/svg+xml,') no-repeat top left; +d="M2.5 2.5h12v12h-12v-12.5" stroke="%23999"/>') no-repeat top left; } details.toggle[open] > summary::after { @@ -1666,6 +1667,10 @@ in src-script.js flex-direction: column; } + button#toggle-all-docs { + margin-top: -8px; + } + .out-of-band { text-align: left; margin-left: initial; diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index eb256455b0878..f3e4aa6a28f90 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -626,7 +626,7 @@ function preLoadCss(cssUrl) { } }); innerToggle.title = "collapse all docs"; - innerToggle.children[0].innerText = "\u2212"; // "\u2212" is "−" minus sign + innerToggle.innerText = "\u2212"; // "\u2212" is "−" minus sign } function collapseAllDocs() { @@ -641,7 +641,7 @@ function preLoadCss(cssUrl) { } }); innerToggle.title = "expand all docs"; - innerToggle.children[0].innerText = "+"; + innerToggle.innerText = "+"; } function toggleAllDocs() { diff --git a/src/librustdoc/html/templates/print_item.html b/src/librustdoc/html/templates/print_item.html index 1d215c26968d8..ddb2a3212430f 100644 --- a/src/librustdoc/html/templates/print_item.html +++ b/src/librustdoc/html/templates/print_item.html @@ -18,11 +18,11 @@

{% endif %} {% match src_href %} {% when Some with (href) %} - source · {#+ #} + source {#+ #} {% else %} {% endmatch %} {# #} {# #} {# #} diff --git a/tests/rustdoc-gui/anchors.goml b/tests/rustdoc-gui/anchors.goml index 30b83f0da3866..cb1113963b0d8 100644 --- a/tests/rustdoc-gui/anchors.goml +++ b/tests/rustdoc-gui/anchors.goml @@ -2,7 +2,16 @@ define-function: ( "check-colors", - (theme, main_color, title_color, main_heading_color, main_heading_type_color, src_link_color, sidebar_link_color), + ( + theme, + main_color, + title_color, + main_heading_color, + main_heading_type_color, + src_link_color, + sidebar_link_color, + button_color, + ), block { go-to: "file://" + |DOC_PATH| + "/staged_api/struct.Foo.html" // This is needed to ensure that the text color is computed. @@ -13,7 +22,7 @@ define-function: ( // We reload the page so the local storage settings are being used. reload: - assert-css: ("#toggle-all-docs", {"color": |main_color|}) + assert-css: ("#toggle-all-docs", {"color": |button_color|}) assert-css: (".main-heading h1 a:nth-of-type(1)", {"color": |main_heading_color|}) assert-css: (".main-heading a:nth-of-type(2)", {"color": |main_heading_type_color|}) assert-css: ( @@ -81,6 +90,7 @@ call-function: ( "main_heading_type_color": "#ffa0a5", "src_link_color": "#39afd7", "sidebar_link_color": "#53b1db", + "button_color": "#fff", }, ) call-function: ( @@ -93,6 +103,7 @@ call-function: ( "main_heading_type_color": "#2dbfb8", "src_link_color": "#d2991d", "sidebar_link_color": "#fdbf35", + "button_color": "#000", }, ) call-function: ( @@ -105,5 +116,6 @@ call-function: ( "main_heading_type_color": "#ad378a", "src_link_color": "#3873ad", "sidebar_link_color": "#356da4", + "button_color": "black", }, ) diff --git a/tests/rustdoc-gui/shortcuts.goml b/tests/rustdoc-gui/shortcuts.goml index 2c61ee5428b86..57f6ad9c34b4a 100644 --- a/tests/rustdoc-gui/shortcuts.goml +++ b/tests/rustdoc-gui/shortcuts.goml @@ -13,19 +13,19 @@ press-key: "Escape" assert-css: ("#help-button .popover", {"display": "none"}) // Checking doc collapse and expand. // It should be displaying a "-": -assert-text: ("#toggle-all-docs", "[−]") +assert-text: ("#toggle-all-docs", "−") press-key: "-" -wait-for-text: ("#toggle-all-docs", "[+]") +wait-for-text: ("#toggle-all-docs", "+") assert-attribute: ("#toggle-all-docs", {"class": "will-expand"}) // Pressing it again shouldn't do anything. press-key: "-" -assert-text: ("#toggle-all-docs", "[+]") +assert-text: ("#toggle-all-docs", "+") assert-attribute: ("#toggle-all-docs", {"class": "will-expand"}) // Expanding now. press-key: "+" -wait-for-text: ("#toggle-all-docs", "[−]") +wait-for-text: ("#toggle-all-docs", "−") assert-attribute: ("#toggle-all-docs", {"class": ""}) // Pressing it again shouldn't do anything. press-key: "+" -assert-text: ("#toggle-all-docs", "[−]") +assert-text: ("#toggle-all-docs", "−") assert-attribute: ("#toggle-all-docs", {"class": ""}) diff --git a/tests/rustdoc-gui/sidebar.goml b/tests/rustdoc-gui/sidebar.goml index 520481d3bbafa..f4780dcf68413 100644 --- a/tests/rustdoc-gui/sidebar.goml +++ b/tests/rustdoc-gui/sidebar.goml @@ -144,10 +144,10 @@ assert-css: ("#modules", {"background-color": "#fdffd3"}) // Finally, assert that the `[+]/[−]` toggle doesn't affect sidebar width. click: "#toggle-all-docs" -assert-text: ("#toggle-all-docs", "[+]") +assert-text: ("#toggle-all-docs", "+") assert-property: (".sidebar", {"clientWidth": "200"}) click: "#toggle-all-docs" -assert-text: ("#toggle-all-docs", "[−]") +assert-text: ("#toggle-all-docs", "−") assert-property: (".sidebar", {"clientWidth": "200"}) // Checks that all.html and index.html have their sidebar link in the same place. diff --git a/tests/rustdoc-gui/toggle-docs.goml b/tests/rustdoc-gui/toggle-docs.goml index 9ea6d9b18f4c7..a9ca656513f0c 100644 --- a/tests/rustdoc-gui/toggle-docs.goml +++ b/tests/rustdoc-gui/toggle-docs.goml @@ -1,12 +1,12 @@ // Checks that the documentation toggles have the correct position, style and work as expected. go-to: "file://" + |DOC_PATH| + "/test_docs/index.html" assert-attribute: ("#main-content > details.top-doc", {"open": ""}) -assert-text: ("#toggle-all-docs", "[−]") +assert-text: ("#toggle-all-docs", "−") click: "#toggle-all-docs" wait-for: 50 // This is now collapsed so there shouldn't be the "open" attribute on details. assert-attribute-false: ("#main-content > details.top-doc", {"open": ""}) -assert-text: ("#toggle-all-docs", "[+]") +assert-text: ("#toggle-all-docs", "+") assert-css: ( "#main-content > details.top-doc > summary", {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'}, @@ -14,12 +14,12 @@ assert-css: ( click: "#toggle-all-docs" // Not collapsed anymore so the "open" attribute should be back. wait-for-attribute: ("#main-content > details.top-doc", {"open": ""}) -assert-text: ("#toggle-all-docs", "[−]") +assert-text: ("#toggle-all-docs", "−") // Check that it works on non-module pages as well. go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html" // We first check that everything is visible. -assert-text: ("#toggle-all-docs", "[−]") +assert-text: ("#toggle-all-docs", "−") assert-attribute: ("#implementations-list details.toggle", {"open": ""}, ALL) assert-attribute: ("#trait-implementations-list details.toggle", {"open": ""}, ALL) assert-attribute-false: ( @@ -30,7 +30,7 @@ assert-attribute-false: ( // We collapse them all. click: "#toggle-all-docs" -wait-for-text: ("#toggle-all-docs", "[+]") +wait-for-text: ("#toggle-all-docs", "+") // We check that all
are collapsed (except for the impl block ones). assert-attribute-false: ("details.toggle:not(.implementors-toggle)", {"open": ""}, ALL) assert-attribute: ("#implementations-list > details.implementors-toggle", {"open": ""}) @@ -42,7 +42,7 @@ assert-attribute-false: ( ) // We open them all again. click: "#toggle-all-docs" -wait-for-text: ("#toggle-all-docs", "[−]") +wait-for-text: ("#toggle-all-docs", "−") assert-attribute: ("details.toggle", {"open": ""}, ALL) // Checking the toggles style. diff --git a/tests/rustdoc-gui/type-declation-overflow.goml b/tests/rustdoc-gui/type-declation-overflow.goml index f212781e9b340..00c62f08ac879 100644 --- a/tests/rustdoc-gui/type-declation-overflow.goml +++ b/tests/rustdoc-gui/type-declation-overflow.goml @@ -47,9 +47,10 @@ assert-css: (".mobile-topbar h2", {"overflow-x": "hidden"}) // On desktop, they wrap when too big. set-window-size: (1100, 800) go-to: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html" -compare-elements-position-false: (".main-heading h1", ".main-heading .out-of-band", ("y")) +store-position: (".main-heading .out-of-band", {"y": out_of_band_long_y}) go-to: "file://" + |DOC_PATH| + "/lib2/index.html" -compare-elements-position: (".main-heading h1", ".main-heading .out-of-band", ("y")) +store-position: (".main-heading .out-of-band", {"y": out_of_band_lib2_y}) +assert: |out_of_band_long_y| > |out_of_band_lib2_y| // make sure there is a gap between them compare-elements-position-near-false: (".main-heading h1", ".main-heading .out-of-band", {"x": 550}) diff --git a/tests/rustdoc/source-version-separator.rs b/tests/rustdoc/source-version-separator.rs index 14580373b3b05..122d93fa36d75 100644 --- a/tests/rustdoc/source-version-separator.rs +++ b/tests/rustdoc/source-version-separator.rs @@ -3,7 +3,7 @@ #![feature(staged_api)] // @has foo/trait.Bar.html -// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0 · source · ' +// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0 · source' #[stable(feature = "bar", since = "1.0")] pub trait Bar { // @has - '//*[@id="tymethod.foo"]/*[@class="rightside"]' '3.0 · source' @@ -14,7 +14,7 @@ pub trait Bar { // @has - '//div[@id="implementors-list"]//*[@class="rightside"]' '4.0 · source' // @has foo/struct.Foo.html -// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0 · source · ' +// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0 · source' #[stable(feature = "baz", since = "1.0")] pub struct Foo;