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.

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 0a19a99abf0..63b35f5d0df 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 746a510c488..afe1ca5d7e5 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 20a314a1c00..2a111f94e50 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -102,7 +102,7 @@
     </nav> {#- -#}
     <main> {#- -#}
         <div class="width-limiter"> {#- -#}
-            <div class="sub-container"> {#- -#}
+            <nav class="sub"> {#- -#}
                 {%- if page.css_class == "source" -%}
                 <a class="sub-logo-container" href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}index.html"> {#- -#}
                     {%- if !layout.logo.is_empty()  %}
@@ -112,30 +112,28 @@
                     {%- endif -%}
                 </a> {#- -#}
                 {%- endif -%}
-                <nav class="sub"> {#- -#}
-                    <form class="search-form"> {#- -#}
-                        <div class="search-container"> {#- -#}
-                            <span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
-                            <input {# -#}
-                                class="search-input" {# -#}
-                                name="search" {# -#}
-                                autocomplete="off" {# -#}
-                                spellcheck="false" {# -#}
-                                placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
-                                type="search"> {#- -#}
-                            <div id="help-button" title="help" tabindex="-1"> {#- -#}
-                                <a href="{{page.root_path|safe}}help.html">?</a> {#- -#}
-                            </div> {#- -#}
-                            <div id="settings-menu" tabindex="-1"> {#- -#}
-                                <a href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
-                                    <img width="22" height="22" alt="Change settings" {# -#}
-                                     src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
-                                </a> {#- -#}
-                            </div> {#- -#}
+                <form class="search-form"> {#- -#}
+                    <div class="search-container"> {#- -#}
+                        <span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
+                        <input {# -#}
+                            class="search-input" {# -#}
+                            name="search" {# -#}
+                            autocomplete="off" {# -#}
+                            spellcheck="false" {# -#}
+                            placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
+                            type="search"> {#- -#}
+                        <div id="help-button" title="help" tabindex="-1"> {#- -#}
+                            <a href="{{page.root_path|safe}}help.html">?</a> {#- -#}
                         </div> {#- -#}
-                    </form> {#- -#}
-                </nav> {#- -#}
-            </div> {#- -#}
+                        <div id="settings-menu" tabindex="-1"> {#- -#}
+                            <a href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
+                                <img width="22" height="22" alt="Change settings" {# -#}
+                                 src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
+                            </a> {#- -#}
+                        </div> {#- -#}
+                    </div> {#- -#}
+                </form> {#- -#}
+            </nav> {#- -#}
             <section id="main-content" class="content">{{- content|safe -}}</section> {#- -#}
         </div> {#- -#}
     </main> {#- -#}
diff --git a/src/test/rustdoc-gui/help-page.goml b/src/test/rustdoc-gui/help-page.goml
index 51f089cce74..521e14748af 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 ed4e9c2516b..f258f4d2a83 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 76260d621ea..29d65fc7ebc 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" `<pre>`.
 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"})