From 6a5f8b1aef1417d7dc85b5d0a229d2db1930eb7c Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Thu, 6 Jan 2022 19:48:24 -0500 Subject: Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page. --- src/test/rustdoc-gui/anchors.goml | 2 +- src/test/rustdoc-gui/code-blocks-overflow.goml | 2 +- src/test/rustdoc-gui/docblock-table-overflow.goml | 4 ++-- src/test/rustdoc-gui/headings.goml | 2 +- src/test/rustdoc-gui/item-info-width.goml | 2 +- src/test/rustdoc-gui/search-result-display.goml | 2 +- src/test/rustdoc-gui/sidebar-mobile.goml | 23 +++++++++++++---------- src/test/rustdoc-gui/sidebar-source-code.goml | 4 ++++ src/test/rustdoc-gui/sidebar.goml | 16 +++++++++++----- src/test/rustdoc-gui/type-declation-overflow.goml | 11 +++++++++-- 10 files changed, 44 insertions(+), 24 deletions(-) (limited to 'src/test/rustdoc-gui') diff --git a/src/test/rustdoc-gui/anchors.goml b/src/test/rustdoc-gui/anchors.goml index e6758287d8c..2d48d21dc1b 100644 --- a/src/test/rustdoc-gui/anchors.goml +++ b/src/test/rustdoc-gui/anchors.goml @@ -20,7 +20,7 @@ assert-css: (".srclink", {"text-decoration": "underline solid rgb(56, 115, 173)" assert-css: ("#top-doc-prose-title", {"color": "rgb(0, 0, 0)"}) -assert-css: (".sidebar a", {"color": "rgb(0, 0, 0)"}) +assert-css: (".sidebar a", {"color": "rgb(56, 115, 173)"}) assert-css: (".in-band a", {"color": "rgb(0, 0, 0)"}) // We move the cursor over the "Implementations" title so the anchor is displayed. diff --git a/src/test/rustdoc-gui/code-blocks-overflow.goml b/src/test/rustdoc-gui/code-blocks-overflow.goml index ee4dad444e9..f93f3f0aefc 100644 --- a/src/test/rustdoc-gui/code-blocks-overflow.goml +++ b/src/test/rustdoc-gui/code-blocks-overflow.goml @@ -5,4 +5,4 @@ size: (1080, 600) assert-count: (".docblock > .example-wrap", 2) assert: ".docblock > .example-wrap > .language-txt" assert: ".docblock > .example-wrap > .rust-example-rendered" -assert-css: (".docblock > .example-wrap > pre", {"width": "796px", "overflow-x": "auto"}, ALL) +assert-css: (".docblock > .example-wrap > pre", {"width": "785.25px", "overflow-x": "auto"}, ALL) diff --git a/src/test/rustdoc-gui/docblock-table-overflow.goml b/src/test/rustdoc-gui/docblock-table-overflow.goml index 1b3006155d8..a9af88189a6 100644 --- a/src/test/rustdoc-gui/docblock-table-overflow.goml +++ b/src/test/rustdoc-gui/docblock-table-overflow.goml @@ -4,7 +4,7 @@ goto: file://|DOC_PATH|/lib2/long_table/struct.Foo.html size: (1100, 800) // Logically, the ".docblock" and the "

" should have the same scroll width. compare-elements-property: (".top-doc .docblock", ".top-doc .docblock > p", ["scrollWidth"]) -assert-property: (".top-doc .docblock", {"scrollWidth": "816"}) +assert-property: (".top-doc .docblock", {"scrollWidth": "801"}) // However, since there is overflow in the , its scroll width is bigger. assert-property: (".top-doc .docblock table", {"scrollWidth": "1573"}) @@ -16,6 +16,6 @@ compare-elements-property: ( "#implementations + details .docblock > p", ["scrollWidth"], ) -assert-property: ("#implementations + details .docblock", {"scrollWidth": "816"}) +assert-property: ("#implementations + details .docblock", {"scrollWidth": "801"}) // However, since there is overflow in the
, its scroll width is bigger. assert-property: ("#implementations + details .docblock table", {"scrollWidth": "1573"}) diff --git a/src/test/rustdoc-gui/headings.goml b/src/test/rustdoc-gui/headings.goml index 34fadd84ae8..34ff2de3a9b 100644 --- a/src/test/rustdoc-gui/headings.goml +++ b/src/test/rustdoc-gui/headings.goml @@ -110,7 +110,7 @@ assert-css: ("h6#sub-sub-heading-for-enum-impl-item-doc", {"font-size": "15.2px" assert-css: ("h6#sub-sub-heading-for-enum-impl-item-doc", {"border-bottom-width": "0px"}) assert-text: (".sidebar .others h3", "Modules") -assert-css: (".sidebar .others h3", {"border-bottom-width": "1px"}, ALL) +assert-css: (".sidebar .others h3", {"border-bottom-width": "0px"}, ALL) goto: file://|DOC_PATH|/test_docs/union.HeavilyDocumentedUnion.html diff --git a/src/test/rustdoc-gui/item-info-width.goml b/src/test/rustdoc-gui/item-info-width.goml index cdc00d34114..acb30141ce5 100644 --- a/src/test/rustdoc-gui/item-info-width.goml +++ b/src/test/rustdoc-gui/item-info-width.goml @@ -3,5 +3,5 @@ goto: file://|DOC_PATH|/lib2/struct.Foo.html // We set a fixed size so there is no chance of "random" resize. size: (1100, 800) // We check that ".item-info" is bigger than its content. -assert-css: (".item-info", {"width": "807px"}) +assert-css: (".item-info", {"width": "757px"}) assert-css: (".item-info .stab", {"width": "341px"}) diff --git a/src/test/rustdoc-gui/search-result-display.goml b/src/test/rustdoc-gui/search-result-display.goml index ea94e5640fb..3162a067d21 100644 --- a/src/test/rustdoc-gui/search-result-display.goml +++ b/src/test/rustdoc-gui/search-result-display.goml @@ -5,7 +5,7 @@ write: (".search-input", "test") wait-for: "#titles" // The width is returned by "getComputedStyle" which returns the exact number instead of the // CSS rule which is "50%"... -assert-css: (".search-results div.desc", {"width": "320px"}) +assert-css: (".search-results div.desc", {"width": "295px"}) 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. diff --git a/src/test/rustdoc-gui/sidebar-mobile.goml b/src/test/rustdoc-gui/sidebar-mobile.goml index eecd584bca9..547eb3fd1b3 100644 --- a/src/test/rustdoc-gui/sidebar-mobile.goml +++ b/src/test/rustdoc-gui/sidebar-mobile.goml @@ -4,25 +4,28 @@ goto: file://|DOC_PATH|/test_docs/struct.Foo.html // Switching to "mobile view" by reducing the width to 600px. size: (600, 600) -assert-css: (".sidebar-elems", {"display": "block", "left": "-246px"}) +assert-css: (".sidebar", {"display": "block", "left": "-1000px"}) // Opening the sidebar menu. -click: ".sidebar-menu" -assert-css: (".sidebar-elems", {"display": "block", "left": "0px"}) +click: ".sidebar-menu-toggle" +assert-css: (".sidebar", {"display": "block", "left": "0px"}) // Closing the sidebar menu. -click: ".sidebar-menu" -assert-css: (".sidebar-elems", {"display": "block", "left": "-246px"}) +click: ".sidebar-menu-toggle" +assert-css: (".sidebar", {"display": "block", "left": "-1000px"}) // Force the sidebar open by focusing a link inside it. // This makes it easier for keyboard users to get to it. focus: ".sidebar-title a" -assert-css: (".sidebar-elems", {"display": "block", "left": "0px"}) +assert-css: (".sidebar", {"display": "block", "left": "0px"}) // When we tab out of the sidebar, close it. focus: ".search-input" -assert-css: (".sidebar-elems", {"display": "block", "left": "-246px"}) +assert-css: (".sidebar", {"display": "block", "left": "-1000px"}) // Open the sidebar menu. -click: ".sidebar-menu" -assert-css: (".sidebar-elems", {"left": "0px"}) +click: ".sidebar-menu-toggle" +assert-css: (".sidebar", {"left": "0px"}) // Click elsewhere. click: "body" -assert-css: (".sidebar-elems", {"left": "-246px"}) +assert-css: (".sidebar", {"display": "block", "left": "-1000px"}) + +// Check that the topbar is visible +assert-property: (".mobile-topbar", {"clientHeight": "45"}) diff --git a/src/test/rustdoc-gui/sidebar-source-code.goml b/src/test/rustdoc-gui/sidebar-source-code.goml index 98f4fdf4233..1c5eb9239ba 100644 --- a/src/test/rustdoc-gui/sidebar-source-code.goml +++ b/src/test/rustdoc-gui/sidebar-source-code.goml @@ -10,6 +10,7 @@ click: (10, 10) // We wait for the sidebar to be expanded (there is a 0.5s animation). wait-for: 600 assert-css: ("nav.sidebar.expanded", {"width": "300px"}) +assert-css: ("nav.sidebar.expanded a", {"font-size": "14.4px"}) // We collapse the sidebar. click: (10, 10) // We wait for the sidebar to be collapsed (there is a 0.5s animation). @@ -30,3 +31,6 @@ click: (10, 10) // We ensure that the class has been removed. assert-false: "nav.sidebar.expanded" assert: "nav.sidebar" + +// Check that the topbar is not visible +assert-property: (".mobile-topbar", {"offsetParent": "null"}) diff --git a/src/test/rustdoc-gui/sidebar.goml b/src/test/rustdoc-gui/sidebar.goml index 9289244f6f8..a1175525858 100644 --- a/src/test/rustdoc-gui/sidebar.goml +++ b/src/test/rustdoc-gui/sidebar.goml @@ -1,8 +1,14 @@ goto: file://|DOC_PATH|/test_docs/index.html +show-text: true +local-storage: {"rustdoc-theme": "light"} +// We reload the page so the local storage settings are being used. +reload: + assert-text: (".sidebar > .location", "Crate test_docs") // In modules, we only have one "location" element. assert-count: (".sidebar .location", 1) -assert-text: (".sidebar-elems > #all-types", "See all test_docs's items") +assert-text: ("#all-types", "All Items") +assert-css: ("#all-types", {"color": "rgb(56, 115, 173)"}) // We check that we have the crates list and that the "current" on is "test_docs". assert-text: (".sidebar-elems .crate > ul > li > a.current", "test_docs") // And we're also supposed to have the list of items in the current module. @@ -24,13 +30,14 @@ assert-count: (".sidebar .location", 2) assert-false: ".sidebar-elems > .crate" click: ".sidebar-links a" -assert-property: ("html", {"scrollTop": "389"}) +assert-property-false: ("html", {"scrollTop": "0"}) -click: ".sidebar h2.location" +click: ".sidebar h2.location a" assert-property: ("html", {"scrollTop": "0"}) // We now go back to the crate page to click on the "lib2" crate link. goto: file://|DOC_PATH|/test_docs/index.html +assert-css: (".sidebar-elems .crate > ul > li:first-child > a", {"color": "rgb(56, 115, 173)"}) click: ".sidebar-elems .crate > ul > li:first-child > a" // PAGE: lib2/index.html @@ -51,8 +58,7 @@ click: "#functions + .item-table .item-left > a" // In items containing no items (like functions or constants) and in modules, we have one // "location" elements. assert-count: (".sidebar .location", 1) -// There is a "
" tag between "in" and "lib2", but it doesn't count as a space. -assert-text: (".sidebar .sidebar-elems .location", "Other items inlib2") +assert-text: (".sidebar .sidebar-elems .location", "In lib2") // We check that we don't have the crate list. assert-false: ".sidebar-elems > .crate" diff --git a/src/test/rustdoc-gui/type-declation-overflow.goml b/src/test/rustdoc-gui/type-declation-overflow.goml index bb24d0ce792..21874f786f1 100644 --- a/src/test/rustdoc-gui/type-declation-overflow.goml +++ b/src/test/rustdoc-gui/type-declation-overflow.goml @@ -11,7 +11,7 @@ assert-property: (".item-decl pre", {"scrollWidth": "1324"}) goto: file://|DOC_PATH|/lib2/too_long/type.ReallyLongTypeNameLongLongLong.html assert-property: ("body", {"scrollWidth": "1100"}) // We now check that the section width hasn't grown because of it. -assert-property: ("#main-content", {"scrollWidth": "840"}) +assert-property: ("#main-content", {"scrollWidth": "825"}) // And now checking that it has scrollable content. assert-property: (".item-decl pre", {"scrollWidth": "1103"}) @@ -20,6 +20,13 @@ assert-property: (".item-decl pre", {"scrollWidth": "1103"}) goto: file://|DOC_PATH|/lib2/too_long/constant.ReallyLongTypeNameLongLongLongConstBecauseWhyNotAConstRightGigaGigaSupraLong.html assert-property: ("body", {"scrollWidth": "1100"}) // We now check that the section width hasn't grown because of it. -assert-property: ("#main-content", {"scrollWidth": "840"}) +assert-property: ("#main-content", {"scrollWidth": "825"}) // And now checking that it has scrollable content. assert-property: (".item-decl pre", {"scrollWidth": "950"}) + +// On mobile: +size: (600, 600) +goto: file://|DOC_PATH|/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html +assert-property: (".mobile-topbar .location", {"scrollWidth": "504"}) +assert-property: (".mobile-topbar .location", {"clientWidth": "504"}) +assert-css: (".mobile-topbar .location", {"overflow-x": "hidden"}) -- cgit 1.4.1-3-g733a5