Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rustdoc: improve appearance of source page navigation bar #103321

Merged
merged 1 commit into from
Oct 21, 2022
Merged

rustdoc: improve appearance of source page navigation bar #103321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/librustdoc/html/static/css/noscript.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ rules.
display: none;
}

.sub {
nav.sub {
/* The search bar and related controls don't work without JS */
display: none;
}
38 changes: 19 additions & 19 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -796,7 +796,6 @@ table,
position: relative;
display: flex;
height: 34px;
margin-top: 4px;
}
.search-results-title {
margin-top: 0;
Expand Down Expand Up @@ -1822,10 +1821,6 @@ in storage.js
margin-left: 0px;
}

.source .content {
margin-top: 10px;
}

.anchor {
display: none !important;
}
Expand Down Expand Up @@ -1934,6 +1929,11 @@ in storage.js
.impl-items > .item-info {
margin-left: 34px;
}

.source nav.sub {
margin: 0;
padding: 8px;
}
}

@media print {
Expand Down Expand Up @@ -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 {
Expand Down
46 changes: 22 additions & 24 deletions src/librustdoc/html/templates/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ <h2></h2> {#- -#}
</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() %}
Expand All @@ -112,30 +112,28 @@ <h2></h2> {#- -#}
{%- 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> {#- -#}
Expand Down
12 changes: 6 additions & 6 deletions src/test/rustdoc-gui/help-page.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"))
2 changes: 1 addition & 1 deletion src/test/rustdoc-gui/settings.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
24 changes: 23 additions & 1 deletion src/test/rustdoc-gui/source-code-page.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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"})