diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 0a19a99abf05407474c63fee7dad22e6b259486d..63b35f5d0df0d2abfd996a8bb927c041db4f0a41 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 746a510c488f9fb9203a9315f616e9419134943b..afe1ca5d7e520ea13c6955b210ece8033b126af2 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 20a314a1c00e3d628206abcdc30d838d85baa38e..2a111f94e50780eaf1965a71c2131def1ab5245c 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 51f089cce747f5c0a62cfbee8db98db9851414cc..521e14748af12bd431ed5de839657a3a9e5bca99 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 ed4e9c2516b0b3dcef7586c5dd6768f697e43e9a..f258f4d2a838e12fd7588256f3d662c04f46fdf7 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 76260d621eae15aab65288521202fe8a729deef5..29d65fc7ebc7a6f1aa373ee186956fe380f1b70b 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"})