rustdoc: clean up source sidebar hide button

This is a redesign of the feature, with parts pulled from
https://github.com/rust-lang/rust/pull/119049
but with a button that looks more like a button and matches the
one used on other sidebar pages.
This commit is contained in:
Michael Howell 2023-12-17 23:06:31 -07:00
parent 43dcc9b786
commit 859bbc5def
10 changed files with 92 additions and 196 deletions

View file

@ -366,22 +366,12 @@ img {
max-width: 100%;
}
.sub-logo-container, .logo-container {
.logo-container {
/* zero text boxes so that computed line height = image height exactly */
line-height: 0;
display: block;
}
.sub-logo-container {
margin-right: 32px;
}
.sub-logo-container > img {
height: 60px;
width: 60px;
object-fit: contain;
}
.rust-logo {
filter: var(--rust-logo-filter);
}
@ -424,14 +414,14 @@ img {
}
.rustdoc.src .sidebar-resizer {
/* when closed, place resizer glow on top of the normal src sidebar border (no need to worry
about sidebar) */
left: 49px;
/* src pages have separate closed flag */
display: none;
}
.src-sidebar-expanded .rustdoc.src .sidebar-resizer {
.src-sidebar-expanded .src .sidebar-resizer {
/* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer
to right of it */
display: block;
left: var(--src-sidebar-width);
}
@ -447,7 +437,7 @@ img {
}
.sidebar-resizing .sidebar {
position: fixed;
position: fixed !important;
z-index: 100;
}
.sidebar-resizing > body {
@ -497,28 +487,25 @@ img {
}
.sidebar, .mobile-topbar, .sidebar-menu-toggle,
#src-sidebar-toggle, #src-sidebar {
#src-sidebar {
background-color: var(--sidebar-background-color);
}
#src-sidebar-toggle > button:hover, #src-sidebar-toggle > button:focus {
background-color: var(--sidebar-background-color-hover);
}
.src .sidebar > *:not(#src-sidebar-toggle) {
visibility: hidden;
.src .sidebar {
position: absolute;
top: 0;
bottom: 0;
left: -1000px;
}
.src-sidebar-expanded .src .sidebar {
position: sticky;
left: 0;
overflow-y: auto;
flex-basis: var(--src-sidebar-width);
width: var(--src-sidebar-width);
}
.src-sidebar-expanded .src .sidebar > *:not(#src-sidebar-toggle) {
visibility: visible;
}
#all-types {
margin-top: 1em;
}
@ -1528,18 +1515,6 @@ a.tooltip:hover::after {
font-weight: normal;
}
#src-sidebar-toggle {
position: sticky;
top: 0;
left: 0;
font-size: 1.25rem;
border-bottom: 1px solid;
display: flex;
height: 40px;
justify-content: stretch;
align-items: stretch;
z-index: 10;
}
#src-sidebar {
width: 100%;
overflow: auto;
@ -1557,18 +1532,14 @@ a.tooltip:hover::after {
#src-sidebar div.files > a.selected {
background-color: var(--src-sidebar-background-selected);
}
#src-sidebar-toggle > button {
font-size: inherit;
font-weight: bold;
background: none;
color: inherit;
text-align: center;
border: none;
outline: none;
flex: 1 1;
/* iOS button gradient: https://stackoverflow.com/q/5438567 */
-webkit-appearance: none;
opacity: 1;
.src-sidebar-title {
position: sticky;
top: 0;
display: flex;
padding: 8px;
padding-left: 48px;
background: var(--sidebar-background-color);
}
#settings-menu, #help-button {
@ -1578,7 +1549,8 @@ a.tooltip:hover::after {
#sidebar-button {
display: none;
}
.hide-sidebar #sidebar-button {
.hide-sidebar #sidebar-button,
.src #sidebar-button {
display: flex;
margin-right: 4px;
position: fixed;
@ -1588,6 +1560,16 @@ a.tooltip:hover::after {
background-color: var(--main-background-color);
z-index: 1;
}
.src #sidebar-button {
left: 12px;
z-index: 101;
}
.src .search-form {
margin-left: 40px;
}
.src-sidebar-expanded .src .search-form {
margin-left: 0;
}
#settings-menu > a, #help-button > a, #sidebar-button > a {
display: flex;
align-items: center;
@ -1843,10 +1825,6 @@ in src-script.js and main.js
scroll-margin-top: 45px;
}
.hide-sidebar #sidebar-button {
position: static;
}
.rustdoc {
/* Sidebar should overlay main content, rather than pushing main content to the right.
Turn off `display: flex` on the body element. */
@ -1974,31 +1952,6 @@ in src-script.js and main.js
left: -11px;
}
#src-sidebar-toggle {
position: fixed;
left: 1px;
top: 100px;
width: 30px;
font-size: 1.5rem;
padding: 0;
z-index: 10;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid;
border-left: 0;
}
.src-sidebar-expanded #src-sidebar-toggle {
left: unset;
top: unset;
width: unset;
border-top-right-radius: unset;
border-bottom-right-radius: unset;
position: sticky;
border: 0;
border-bottom: 1px solid;
}
/* We don't display these buttons on mobile devices. */
#copy-path, #help-button {
display: none;
@ -2015,6 +1968,14 @@ in src-script.js and main.js
height: 22px;
}
/* src sidebar button opens modal
use hamburger button */
.src #sidebar-button > a:before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="0 0 22 22" fill="none" stroke="black">\
<path d="M3,5h16M3,11h16M3,17h16" stroke-width="3"/></svg>');
}
/* Display an alternating layout on tablets and phones */
.item-table, .item-row, .item-table > li, .item-table > li > div,
.search-results > a, .search-results > a > div {
@ -2040,9 +2001,19 @@ in src-script.js and main.js
}
.src-sidebar-expanded .src .sidebar {
position: fixed;
max-width: 100vw;
width: 100vw;
}
.src .src-sidebar-title {
padding-top: 0;
}
.hide-sidebar #sidebar-button {
position: static;
}
.src #sidebar-button {
position: fixed;
}
/* Position of the "[-]" element. */
details.toggle:not(.top-doc) > summary {
@ -2114,12 +2085,6 @@ in src-script.js and main.js
.search-form {
align-self: stretch;
}
.sub-logo-container > img {
height: 35px;
width: 35px;
margin-bottom: var(--nav-sub-mobile-padding);
}
}
.variant,

View file

@ -1519,11 +1519,18 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
// and it can be activated by resizing the sidebar into nothing.
const sidebarButton = document.getElementById("sidebar-button");
if (sidebarButton) {
sidebarButton.addEventListener("click", e => {
removeClass(document.documentElement, "hide-sidebar");
updateLocalStorage("hide-sidebar", "false");
e.preventDefault();
});
if (document.querySelector(".rustdoc.src")) {
sidebarButton.addEventListener("click", e => {
window.rustdocToggleSrcSidebar();
e.preventDefault();
});
} else {
sidebarButton.addEventListener("click", e => {
removeClass(document.documentElement, "hide-sidebar");
updateLocalStorage("hide-sidebar", "false");
e.preventDefault();
});
}
}
// Pointer capture.
@ -1646,7 +1653,7 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
return;
}
e.preventDefault();
const pos = e.clientX - sidebar.offsetLeft - 3;
const pos = e.clientX - 3;
if (pos < SIDEBAR_VANISH_THRESHOLD) {
hideSidebar();
} else if (pos >= SIDEBAR_MIN) {

View file

@ -71,68 +71,34 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
return hasFoundFile;
}
let toggleLabel;
function getToggleLabel() {
toggleLabel = toggleLabel || document.querySelector("#src-sidebar-toggle button");
return toggleLabel;
}
window.rustdocCloseSourceSidebar = () => {
removeClass(document.documentElement, "src-sidebar-expanded");
getToggleLabel().innerText = ">";
updateLocalStorage("source-sidebar-show", "false");
};
window.rustdocShowSourceSidebar = () => {
addClass(document.documentElement, "src-sidebar-expanded");
getToggleLabel().innerText = "<";
updateLocalStorage("source-sidebar-show", "true");
};
function toggleSidebar() {
const child = this.parentNode.children[0];
if (child.innerText === ">") {
window.rustdocShowSourceSidebar();
} else {
window.rustdocToggleSrcSidebar = () => {
if (document.documentElement.classList.contains("src-sidebar-expanded")) {
window.rustdocCloseSourceSidebar();
}
}
function createSidebarToggle() {
const sidebarToggle = document.createElement("div");
sidebarToggle.id = "src-sidebar-toggle";
const inner = document.createElement("button");
if (getCurrentValue("source-sidebar-show") === "true") {
inner.innerText = "<";
} else {
inner.innerText = ">";
window.rustdocShowSourceSidebar();
}
inner.onclick = toggleSidebar;
sidebarToggle.appendChild(inner);
return sidebarToggle;
}
};
// This function is called from "src-files.js", generated in `html/render/write_shared.rs`.
// eslint-disable-next-line no-unused-vars
function createSrcSidebar() {
const container = document.querySelector("nav.sidebar");
const sidebarToggle = createSidebarToggle();
container.insertBefore(sidebarToggle, container.firstChild);
const sidebar = document.createElement("div");
sidebar.id = "src-sidebar";
let hasFoundFile = false;
const title = document.createElement("div");
title.className = "title";
title.innerText = "Files";
sidebar.appendChild(title);
for (const [key, source] of srcIndex) {
source[NAME_OFFSET] = key;
hasFoundFile = createDirEntry(source, sidebar, "", hasFoundFile);

View file

@ -111,6 +111,10 @@
{% if !display_krate_version_extra.is_empty() %}
<div class="version">{{+ display_krate_version_extra}}</div> {# #}
{% endif %}
{% else %}
<div class="src-sidebar-title">
<h2>Files</h2> {# #}
</div> {# #}
{% endif %}
{{ sidebar|safe }}
</nav> {# #}
@ -118,22 +122,11 @@
<main> {# #}
{% if page.css_class != "src" %}<div class="width-limiter">{% endif %}
<nav class="sub"> {# #}
{% if page.css_class == "src" && (!layout.logo.is_empty() || page.rust_logo) %}
<a class="sub-logo-container" href="{{page.root_path|safe}}{{display_krate_with_trailing_slash|safe}}index.html"> {# #}
{% if page.rust_logo %}
<img class="rust-logo" src="{{static_root_path|safe}}{{files.rust_logo_svg}}" alt="{{display_krate}}"> {# #}
{% else if !layout.logo.is_empty() %}
<img src="{{layout.logo}}" alt="{{display_krate}}"> {# #}
{% endif %}
</a> {# #}
{% endif %}
<form class="search-form"> {# #}
<span></span> {# This empty span is a hacky fix for Safari - See #93184 #}
{% if page.css_class != "src" %}
<div id="sidebar-button" tabindex="-1"> {# #}
<a href="{{page.root_path|safe}}{{layout.krate|safe}}/all.html" title="show sidebar"></a> {# #}
</div> {# #}
{% endif %}
<input {#+ #}
class="search-input" {#+ #}
name="search" {#+ #}

View file

@ -1,7 +1,7 @@
// This test checks that the source code pages sidebar toggle is working as expected.
go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
click: "a.src"
wait-for: "#src-sidebar-toggle"
click: "#src-sidebar-toggle"
wait-for: "#src-sidebar"
click: "#sidebar-button"
expect-failure: true
assert-css: ("#src-sidebar", { "left": "-300px" })

View file

@ -21,4 +21,4 @@ assert-css: (".sidebar-menu-toggle", {"cursor": "pointer"})
// the sidebar toggle button on the source code pages
go-to: "file://" + |DOC_PATH| + "/src/lib2/lib.rs.html"
assert-css: ("#src-sidebar-toggle > button", {"cursor": "pointer"})
assert-css: ("#sidebar-button > a", {"cursor": "pointer"})

View file

@ -18,7 +18,7 @@ assert-window-property: {"srcIndex": null}
// source sidebar
go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
click: "#src-sidebar-toggle"
click: "#sidebar-button"
wait-for: "#src-sidebar details"
assert-window-property-false: {"srcIndex": null}
assert-window-property: {"searchIndex": null}

View file

@ -2,18 +2,17 @@
javascript: false
go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
// Since the javascript is disabled, there shouldn't be a toggle.
assert-false: "#src-sidebar-toggle"
wait-for-css: (".sidebar", {"display": "none"})
assert-css: ("#sidebar-button", {"display": "none"})
// Let's retry with javascript enabled.
javascript: true
reload:
wait-for: "#src-sidebar-toggle"
assert-css: ("#src-sidebar-toggle", {"visibility": "visible"})
assert-css: (".sidebar > *:not(#src-sidebar-toggle)", {"visibility": "hidden"})
wait-for: "#src-sidebar"
assert-css: ("#src-sidebar", {"position": "absolute", "left": "-1000px"})
// Let's expand the sidebar now.
click: "#src-sidebar-toggle"
wait-for-css: ("#src-sidebar-toggle", {"visibility": "visible"})
click: "#src-sidebar"
wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"})
// We now check that opening the sidebar and clicking a link will leave it open.
// The behavior here on desktop is different than the behavior on mobile,
@ -38,28 +37,12 @@ define-function: (
block {
set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
reload:
wait-for-css: ("#src-sidebar-toggle", {"visibility": "visible"})
wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"})
assert-css: (
"#src-sidebar details[open] > .files a.selected",
{"color": |color_hover|, "background-color": |background|},
)
// Without hover or focus.
assert-css: ("#src-sidebar-toggle > button", {"background-color": |background_toggle|})
// With focus.
focus: "#src-sidebar-toggle > button"
assert-css: (
"#src-sidebar-toggle > button:focus",
{"background-color": |background_toggle_hover|},
)
focus: ".search-input"
// With hover.
move-cursor-to: "#src-sidebar-toggle > button"
assert-css: (
"#src-sidebar-toggle > button:hover",
{"background-color": |background_toggle_hover|},
)
// Without hover or focus.
assert-css: (
"#src-sidebar details[open] > .files a:not(.selected)",
@ -125,8 +108,6 @@ call-function: ("check-colors", {
"color_hover": "#000",
"background": "#fff",
"background_hover": "#e0e0e0",
"background_toggle": "rgba(0, 0, 0, 0)",
"background_toggle_hover": "#e0e0e0",
})
call-function: ("check-colors", {
"theme": "dark",
@ -134,8 +115,6 @@ call-function: ("check-colors", {
"color_hover": "#ddd",
"background": "#333",
"background_hover": "#444",
"background_toggle": "rgba(0, 0, 0, 0)",
"background_toggle_hover": "#676767",
})
call-function: ("check-colors", {
"theme": "ayu",
@ -143,42 +122,28 @@ call-function: ("check-colors", {
"color_hover": "#ffb44c",
"background": "#14191f",
"background_hover": "#14191f",
"background_toggle": "rgba(0, 0, 0, 0)",
"background_toggle_hover": "rgba(70, 70, 70, 0.33)",
})
// Now checking on mobile devices.
set-window-size: (500, 700)
reload:
// Waiting for the sidebar to be displayed...
wait-for-css: ("#src-sidebar-toggle", {"visibility": "visible"})
wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"})
// We now check it takes the full size of the display.
assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
// We now check the display of the toggle once the sidebar is expanded.
assert-property: ("#src-sidebar-toggle", {"clientWidth": "500", "clientHeight": "39"})
assert-css: (
"#src-sidebar-toggle",
{
"border-top-width": "0px",
"border-right-width": "0px",
"border-left-width": "0px",
"border-bottom-width": "1px",
},
)
// We now check that the scroll position is kept when opening the sidebar.
click: "#src-sidebar-toggle"
wait-for-css: (".sidebar", {"left": "-1000px"})
click: "#sidebar-button"
wait-for-css: (".sidebar", {"position": "absolute", "left": "-1000px"})
// We scroll to line 117 to change the scroll position.
scroll-to: '//*[@id="117"]'
assert-window-property: {"pageYOffset": "2516"}
// Expanding the sidebar...
click: "#src-sidebar-toggle"
click: "#sidebar-button"
wait-for-css: (".sidebar", {"left": "0px"})
click: "#src-sidebar-toggle"
click: "#sidebar-button"
wait-for-css: (".sidebar", {"left": "-1000px"})
// The "scrollTop" property should be the same.
assert-window-property: {"pageYOffset": "2516"}
@ -189,7 +154,7 @@ assert-window-property: {"pageYOffset": "2516"}
// you click one of them, you probably want to actually see the file's contents, and not just
// make it the current selection.
set-window-size: (500, 700)
click: "#src-sidebar-toggle"
click: "#sidebar-button"
wait-for-css: ("#src-sidebar", {"visibility": "visible"})
assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
click: ".sidebar a.selected"
@ -200,6 +165,6 @@ assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
set-window-size: (1000, 1000)
wait-for-css: ("#src-sidebar", {"visibility": "hidden"})
assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
click: "#src-sidebar-toggle"
click: "#sidebar-button"
wait-for-css: ("#src-sidebar", {"visibility": "visible"})
assert-local-storage: {"rustdoc-source-sidebar-show": "true"}

View file

@ -48,7 +48,7 @@ call-function: (
// Next, desktop mode layout.
set-window-size: (1100, 800)
wait-for: "#src-sidebar-toggle"
wait-for: "#sidebar-button"
// We check that the sidebar isn't expanded and has the expected width.
assert-css: ("nav.sidebar", {"width": "50px"})
// We now click on the button to expand the sidebar.

View file

@ -97,7 +97,7 @@ assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
// Checking the source code sidebar.
// First we "open" it.
click: "#src-sidebar-toggle"
click: "#sidebar-button"
assert: ".src-sidebar-expanded"
// We check that the first entry of the sidebar is collapsed