Rollup merge of #103321 - notriddle:notriddle/source-page-top-bar-layout, r=GuillaumeGomez

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.

Preview: https://notriddle.com/notriddle-rustdoc-demos/source-page-header/src/std/lib.rs.html

## Before

![image](https://user-images.githubusercontent.com/1593513/197053420-02a64627-48ed-4bb6-9363-a1863d47b092.png)

## After

![image](https://user-images.githubusercontent.com/1593513/197053355-bd6149f9-0f5c-47da-aeb7-590b5eecb5da.png)

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;
 }

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 {

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> {#- -#}

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"))

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"

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"})