From f6dd4708cf37689863c867889ab6f9c512825f4d Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 20 Oct 2022 13:22:36 -0700 Subject: [PATCH] rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area. --- src/librustdoc/html/static/css/noscript.css | 2 +- src/librustdoc/html/static/css/rustdoc.css | 38 ++++++++--------- src/librustdoc/html/templates/page.html | 46 ++++++++++----------- src/test/rustdoc-gui/help-page.goml | 12 +++--- src/test/rustdoc-gui/settings.goml | 2 +- src/test/rustdoc-gui/source-code-page.goml | 24 ++++++++++- 6 files changed, 72 insertions(+), 52 deletions(-) diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 0a19a99abf054..63b35f5d0df0d 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -14,7 +14,7 @@ rules. display: none; } -.sub { +nav.sub { /* The search bar and related controls don't work without JS */ display: none; } diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 746a510c488f9..afe1ca5d7e520 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -365,15 +365,8 @@ img { overflow: visible; } -.sub-container { - display: flex; - flex-direction: row; - flex-wrap: nowrap; -} - .sub-logo-container { - display: block; - margin-right: 20px; + line-height: 0; } .sub-logo-container > img { @@ -696,14 +689,21 @@ pre, .rustdoc.source .example-wrap { } nav.sub { - position: relative; flex-grow: 1; - margin-bottom: 25px; + flex-flow: row nowrap; + margin: 4px 0 25px 0; + display: flex; + align-items: center; +} +nav.sub form { + flex-grow: 1; } .source nav.sub { + margin: 0 0 15px 0; +} +.source nav.sub form { margin-left: 32px; } -nav.sub form { display: inline; } a { text-decoration: none; @@ -796,7 +796,6 @@ table, position: relative; display: flex; height: 34px; - margin-top: 4px; } .search-results-title { margin-top: 0; @@ -1822,10 +1821,6 @@ in storage.js margin-left: 0px; } - .source .content { - margin-top: 10px; - } - .anchor { display: none !important; } @@ -1934,6 +1929,11 @@ in storage.js .impl-items > .item-info { margin-left: 34px; } + + .source nav.sub { + margin: 0; + padding: 8px; + } } @media print { @@ -1962,12 +1962,12 @@ in storage.js overflow-wrap: anywhere; } - .sub-container { + nav.sub { flex-direction: column; } - .sub-logo-container { - align-self: center; + nav.sub form { + align-self: stretch; } .sub-logo-container > img { diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 20a314a1c00e3..2a111f94e5078 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -102,7 +102,7 @@

{#- -#} {#- -#}
{#- -#}
{#- -#} -
{#- -#} +
{#- -#} +
{#- -#} + {#- -#} + Change settings {#- -#} + {#- -#} +
{#- -#} +
{#- -#} + {#- -#} + {#- -#}
{{- content|safe -}}
{#- -#} {#- -#}
{#- -#} diff --git a/src/test/rustdoc-gui/help-page.goml b/src/test/rustdoc-gui/help-page.goml index 51f089cce747f..521e14748af12 100644 --- a/src/test/rustdoc-gui/help-page.goml +++ b/src/test/rustdoc-gui/help-page.goml @@ -5,12 +5,12 @@ wait-for: "#help" assert-css: ("#help", {"display": "block"}) click: "#help-button > a" assert-css: ("#help", {"display": "block"}) -compare-elements-property: (".sub-container", "#help", ["offsetWidth"]) -compare-elements-position: (".sub-container", "#help", ("x")) +compare-elements-property: (".sub", "#help", ["offsetWidth"]) +compare-elements-position: (".sub", "#help", ("x")) size: (500, 1000) // Try mobile next. assert-css: ("#help", {"display": "block"}) -compare-elements-property: (".sub-container", "#help", ["offsetWidth"]) -compare-elements-position: (".sub-container", "#help", ("x")) +compare-elements-property: (".sub", "#help", ["offsetWidth"]) +compare-elements-position: (".sub", "#help", ("x")) // This test ensures that opening the help popover without switching pages works. goto: "file://" + |DOC_PATH| + "/test_docs/index.html" @@ -20,5 +20,5 @@ click: "#help-button > a" assert-css: ("#help", {"display": "block"}) click: "#help-button > a" assert-css: ("#help", {"display": "none"}) -compare-elements-property-false: (".sub-container", "#help", ["offsetWidth"]) -compare-elements-position-false: (".sub-container", "#help", ("x")) +compare-elements-property-false: (".sub", "#help", ["offsetWidth"]) +compare-elements-position-false: (".sub", "#help", ("x")) diff --git a/src/test/rustdoc-gui/settings.goml b/src/test/rustdoc-gui/settings.goml index ed4e9c2516b0b..f258f4d2a838e 100644 --- a/src/test/rustdoc-gui/settings.goml +++ b/src/test/rustdoc-gui/settings.goml @@ -147,7 +147,7 @@ assert-css: ( ) assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS) -compare-elements-position: (".sub-container", "#settings", ("x")) +compare-elements-position: (".sub form", "#settings", ("x")) // We now check the display with JS disabled. assert-false: "noscript section" diff --git a/src/test/rustdoc-gui/source-code-page.goml b/src/test/rustdoc-gui/source-code-page.goml index 76260d621eae1..29d65fc7ebc7a 100644 --- a/src/test/rustdoc-gui/source-code-page.goml +++ b/src/test/rustdoc-gui/source-code-page.goml @@ -23,7 +23,7 @@ assert-css: (".src-line-numbers", {"text-align": "right"}) show-text: true goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html" // We use this assert-position to know where we will click. -assert-position: ("//*[@id='1']", {"x": 104, "y": 103}) +assert-position: ("//*[@id='1']", {"x": 104, "y": 112}) // We click on the left of the "1" span but still in the "src-line-number" `
`.
 click: (103, 103)
 assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
@@ -47,3 +47,25 @@ assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
 
 // Check the spacing.
 assert-css: ("#source-sidebar > details.dir-entry", {"padding-left": "4px"})
+
+// Check the search form
+assert-css: ("nav.sub", {"flex-direction": "row"})
+// The goal of this test is to ensure the search input is perfectly centered
+// between the top of the page and the top of the gray code block.
+// To check this, we maintain the invariant:
+//
+// offsetTop[nav.sub form] = offsetTop[#main-content] - offsetHeight[nav.sub form] - offsetTop[nav.sub form]
+assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34})
+assert-property: ("#main-content", {"offsetTop": 90})
+// 28 = 90 - 34 - 28
+
+// Now do the same check on moderately-sized mobile.
+size: (700, 700)
+assert-css: ("nav.sub", {"flex-direction": "row"})
+assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34})
+assert-property: ("#main-content", {"offsetTop": 76})
+// 21 = 76 - 34 - 21
+
+// Tiny mobile gets a different display where the logo is stacked on top.
+size: (450, 700)
+assert-css: ("nav.sub", {"flex-direction": "column"})