mirror of
https://github.com/rust-lang/rust
synced 2024-10-14 12:33:57 +00:00
Auto merge of #119066 - notriddle:notriddle/sidebar-source-redesign, r=GuillaumeGomez
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. Preview: * http://notriddle.com/rustdoc-html-demo-8/source-sidebar-resize/src/std/lib.rs.html * http://notriddle.com/rustdoc-html-demo-8/source-sidebar-resize/std/index.html | | Before | After | |--|--|--| | Closed |  |  | Open |  |  | Mobile Closed |  |  | Mobile Open |  | 
This commit is contained in:
bors
commit
67b6975051
|
|
@ -11,7 +11,7 @@ rules.
|
|||
|
||||
#copy-path, #sidebar-button, .sidebar-resizer {
|
||||
/* It requires JS to work so no need to display it in this case. */
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
nav.sub {
|
||||
|
|
@ -54,6 +54,7 @@ nav.sub {
|
|||
--code-attribute-color: #999;
|
||||
--toggles-color: #999;
|
||||
--toggle-filter: none;
|
||||
--mobile-sidebar-menu-filter: none;
|
||||
--search-input-focused-border-color: #66afe9;
|
||||
--copy-path-button-color: #999;
|
||||
--copy-path-img-filter: invert(50%);
|
||||
|
|
@ -159,6 +160,7 @@ nav.sub {
|
|||
--code-attribute-color: #999;
|
||||
--toggles-color: #999;
|
||||
--toggle-filter: invert(100%);
|
||||
--mobile-sidebar-menu-filter: invert(100%);
|
||||
--search-input-focused-border-color: #008dfd;
|
||||
--copy-path-button-color: #999;
|
||||
--copy-path-img-filter: invert(50%);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -401,6 +391,7 @@ img {
|
|||
|
||||
.rustdoc.src .sidebar {
|
||||
flex-basis: 50px;
|
||||
width: 50px;
|
||||
border-right: 1px solid;
|
||||
overflow-x: hidden;
|
||||
/* The sidebar is by default hidden */
|
||||
|
|
@ -424,12 +415,12 @@ img {
|
|||
}
|
||||
|
||||
.rustdoc.src .sidebar-resizer {
|
||||
/* when closed, place resizer glow on top of the normal src sidebar border (no need to worry
|
||||
about sidebar) */
|
||||
/* when closed, place resizer glow on top of the normal src sidebar border (no need to
|
||||
worry about sidebar) */
|
||||
left: 49px;
|
||||
}
|
||||
|
||||
.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 */
|
||||
left: var(--src-sidebar-width);
|
||||
|
|
@ -497,15 +488,11 @@ 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) {
|
||||
.src .sidebar > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -515,7 +502,7 @@ img {
|
|||
width: var(--src-sidebar-width);
|
||||
}
|
||||
|
||||
.src-sidebar-expanded .src .sidebar > *:not(#src-sidebar-toggle) {
|
||||
.src-sidebar-expanded .src .sidebar > * {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
|
@ -1531,28 +1518,10 @@ 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;
|
||||
}
|
||||
#src-sidebar > .title {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
#src-sidebar div.files > a:hover, details.dir-entry summary:hover,
|
||||
#src-sidebar div.files > a:focus, details.dir-entry summary:focus {
|
||||
background-color: var(--src-sidebar-background-hover);
|
||||
|
|
@ -1560,18 +1529,15 @@ 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 8px 0 48px;
|
||||
margin-bottom: 7px;
|
||||
background: var(--sidebar-background-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
#settings-menu, #help-button {
|
||||
|
|
@ -1580,8 +1546,10 @@ a.tooltip:hover::after {
|
|||
}
|
||||
#sidebar-button {
|
||||
display: none;
|
||||
line-height: 0;
|
||||
}
|
||||
.hide-sidebar #sidebar-button {
|
||||
.hide-sidebar #sidebar-button,
|
||||
.src #sidebar-button {
|
||||
display: flex;
|
||||
margin-right: 4px;
|
||||
position: fixed;
|
||||
|
|
@ -1591,6 +1559,13 @@ a.tooltip:hover::after {
|
|||
background-color: var(--main-background-color);
|
||||
z-index: 1;
|
||||
}
|
||||
.src #sidebar-button {
|
||||
left: 8px;
|
||||
z-index: 101;
|
||||
}
|
||||
.hide-sidebar .src #sidebar-button {
|
||||
position: static;
|
||||
}
|
||||
#settings-menu > a, #help-button > a, #sidebar-button > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1823,6 +1798,30 @@ However, it's not needed with smaller screen width because the doc/code block is
|
|||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* sidebar button opens modal
|
||||
use hamburger button */
|
||||
.src #sidebar-button > a:before, .sidebar-menu-toggle: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="2.75"/></svg>');
|
||||
opacity: 0.75;
|
||||
}
|
||||
.sidebar-menu-toggle:hover:before,
|
||||
.sidebar-menu-toggle:active:before,
|
||||
.sidebar-menu-toggle:focus:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* src sidebar button opens a folder view */
|
||||
.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="M16,9v-4h-6v-1l-2,-2h-4l-2,2v16h13L21,9h-15L2,19" stroke-width="1.25"/>\
|
||||
<path d="M15,7h-11v3" stroke-width="0.75"/>\
|
||||
<path d="M3.75,10v1.25" stroke-width="0.375"/></svg>');
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
|
||||
/* Make sure all the buttons line wrap at the same time */
|
||||
|
|
@ -1846,10 +1845,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. */
|
||||
|
|
@ -1904,6 +1899,15 @@ in src-script.js and main.js
|
|||
height: 100vh;
|
||||
border: 0;
|
||||
}
|
||||
.src .search-form {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.hide-sidebar .search-form {
|
||||
margin-left: 32px;
|
||||
}
|
||||
.hide-sidebar .src .search-form {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar.shown,
|
||||
.src-sidebar-expanded .src .sidebar,
|
||||
|
|
@ -1953,11 +1957,8 @@ in src-script.js and main.js
|
|||
|
||||
.sidebar-menu-toggle {
|
||||
width: 45px;
|
||||
/* Rare exception to specifying font sizes in rem. Since this is acting
|
||||
as an icon, it's okay to specify its sizes in pixels. */
|
||||
font-size: 32px;
|
||||
border: none;
|
||||
color: var(--main-color);
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.hide-sidebar .sidebar-menu-toggle {
|
||||
|
|
@ -1977,31 +1978,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;
|
||||
|
|
@ -2017,6 +1993,12 @@ in src-script.js and main.js
|
|||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.sidebar-menu-toggle:before {
|
||||
filter: var(--mobile-sidebar-menu-filter);
|
||||
}
|
||||
.sidebar-menu-toggle:hover {
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
/* Display an alternating layout on tablets and phones */
|
||||
.item-table, .item-row, .item-table > li, .item-table > li > div,
|
||||
|
|
@ -2043,9 +2025,13 @@ 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;
|
||||
}
|
||||
|
||||
/* Position of the "[-]" element. */
|
||||
details.toggle:not(.top-doc) > summary {
|
||||
|
|
@ -2117,12 +2103,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,
|
||||
|
|
@ -2344,6 +2324,7 @@ in src-script.js and main.js
|
|||
--code-attribute-color: #999;
|
||||
--toggles-color: #999;
|
||||
--toggle-filter: none;
|
||||
--mobile-sidebar-menu-filter: none;
|
||||
--search-input-focused-border-color: #66afe9;
|
||||
--copy-path-button-color: #999;
|
||||
--copy-path-img-filter: invert(50%);
|
||||
|
|
@ -2448,6 +2429,7 @@ in src-script.js and main.js
|
|||
--code-attribute-color: #999;
|
||||
--toggles-color: #999;
|
||||
--toggle-filter: invert(100%);
|
||||
--mobile-sidebar-menu-filter: invert(100%);
|
||||
--search-input-focused-border-color: #008dfd;
|
||||
--copy-path-button-color: #999;
|
||||
--copy-path-img-filter: invert(50%);
|
||||
|
|
@ -2559,6 +2541,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
|
|||
--code-attribute-color: #999;
|
||||
--toggles-color: #999;
|
||||
--toggle-filter: invert(100%);
|
||||
--mobile-sidebar-menu-filter: invert(100%);
|
||||
--search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */
|
||||
--copy-path-button-color: #fff;
|
||||
--copy-path-img-filter: invert(70%);
|
||||
|
|
@ -2650,8 +2633,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
|
|||
:root[data-theme="ayu"] h4,
|
||||
:where(:root[data-theme="ayu"]) h1 a,
|
||||
:root[data-theme="ayu"] .sidebar h2 a,
|
||||
:root[data-theme="ayu"] .sidebar h3 a,
|
||||
:root[data-theme="ayu"] #source-sidebar > .title {
|
||||
:root[data-theme="ayu"] .sidebar h3 a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1523,6 +1523,9 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
|
|||
sidebarButton.addEventListener("click", e => {
|
||||
removeClass(document.documentElement, "hide-sidebar");
|
||||
updateLocalStorage("hide-sidebar", "false");
|
||||
if (document.querySelector(".rustdoc.src")) {
|
||||
window.rustdocToggleSrcSidebar();
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
|
@ -1647,7 +1650,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) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
/* global srcIndex */
|
||||
|
||||
// Local js definitions:
|
||||
/* global addClass, getCurrentValue, onEachLazy, removeClass, browserSupportsHistoryApi */
|
||||
/* global addClass, onEachLazy, removeClass, browserSupportsHistoryApi */
|
||||
/* global updateLocalStorage, getVar */
|
||||
|
||||
"use strict";
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
{{ layout.external_html.before_content|safe }}
|
||||
{% if page.css_class != "src" %}
|
||||
<nav class="mobile-topbar"> {# #}
|
||||
<button class="sidebar-menu-toggle">☰</button> {# #}
|
||||
<button class="sidebar-menu-toggle" title="show sidebar"></button> {# #}
|
||||
{% if !layout.logo.is_empty() || page.rust_logo %}
|
||||
<a class="logo-container" href="{{page.root_path|safe}}{{display_krate_with_trailing_slash|safe}}index.html"> {# #}
|
||||
{% if page.rust_logo %}
|
||||
|
|
@ -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" {#+ #}
|
||||
|
|
|
|||
|
|
@ -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" })
|
||||
|
|
|
|||
|
|
@ -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"})
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,3 @@ set-window-size: (400, 600)
|
|||
// offset = size + margin
|
||||
assert-property: (".mobile-topbar .logo-container", {"offsetWidth": "55", "offsetHeight": 45})
|
||||
assert-property: (".mobile-topbar .logo-container img", {"offsetWidth": "35", "offsetHeight": 35})
|
||||
|
||||
go-to: "file://" + |DOC_PATH| + "/src/huge_logo/lib.rs.html"
|
||||
|
||||
set-window-size: (1280, 1024)
|
||||
assert-property: (".sub-logo-container", {"offsetWidth": "60", "offsetHeight": 60})
|
||||
|
||||
set-window-size: (400, 600)
|
||||
// 43 because 35px + 8px of margin
|
||||
assert-css: (".sub-logo-container > img", {"margin-bottom": "8px"})
|
||||
assert-property: (".sub-logo-container", {"offsetWidth": "35", "offsetHeight": 43})
|
||||
|
|
|
|||
|
|
@ -11,12 +11,6 @@ define-function: (
|
|||
set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
|
||||
reload:
|
||||
assert-css: (".rust-logo", {"filter": |filter|})
|
||||
// Going to the source code page.
|
||||
go-to: "file://" + |DOC_PATH| + "/src/staged_api/lib.rs.html"
|
||||
// Changing theme (since it's local files, the local storage works by folder).
|
||||
set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
|
||||
reload:
|
||||
assert-css: (".rust-logo", {"filter": |filter|})
|
||||
// Now we check that the non-rust logos don't have a CSS filter set.
|
||||
go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html"
|
||||
// Changing theme on the new page (again...).
|
||||
|
|
@ -31,10 +25,6 @@ define-function: (
|
|||
assert-false: ".rust-logo"
|
||||
assert-false: ".logo-container"
|
||||
assert-false: ".sub-logo-container"
|
||||
go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
|
||||
assert-false: ".rust-logo"
|
||||
assert-false: ".logo-container"
|
||||
assert-false: ".sub-logo-container"
|
||||
},
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -21,3 +21,31 @@ wait-for-css: ("#settings", {"display": "block"})
|
|||
assert-property: ("#hide-sidebar", {"checked": "true"})
|
||||
click: "#hide-sidebar"
|
||||
wait-for-css: (".sidebar", {"display": "block"})
|
||||
|
||||
// Verify that hiding the sidebar hides the source sidebar
|
||||
// and puts the button in static position mode on mobile
|
||||
go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
|
||||
set-window-size: (600, 600)
|
||||
focus: "#settings-menu a"
|
||||
press-key: "Enter"
|
||||
wait-for-css: ("#settings", {"display": "block"})
|
||||
wait-for-css: ("#sidebar-button", {"position": "fixed"})
|
||||
store-position: ("#sidebar-button", {
|
||||
"y": sidebar_button_y,
|
||||
"x": sidebar_button_x,
|
||||
})
|
||||
assert-property: ("#hide-sidebar", {"checked": "false"})
|
||||
click: "#hide-sidebar"
|
||||
wait-for-css: (".sidebar", {"display": "none"})
|
||||
wait-for-css: ("#sidebar-button", {"position": "static"})
|
||||
assert-position: ("#sidebar-button", {
|
||||
"y": |sidebar_button_y|,
|
||||
"x": |sidebar_button_x|,
|
||||
})
|
||||
assert-property: ("#hide-sidebar", {"checked": "true"})
|
||||
press-key: "Escape"
|
||||
// Clicking the sidebar button should work, and implicitly re-enable
|
||||
// the persistent navigation bar
|
||||
wait-for-css: ("#settings", {"display": "none"})
|
||||
click: "#sidebar-button"
|
||||
wait-for-css: (".sidebar", {"display": "block"})
|
||||
|
|
|
|||
|
|
@ -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 > *", {"visibility": "hidden"})
|
||||
// Let's expand the sidebar now.
|
||||
click: "#src-sidebar-toggle"
|
||||
wait-for-css: ("#src-sidebar-toggle", {"visibility": "visible"})
|
||||
click: "#sidebar-button"
|
||||
wait-for-css: (".src .sidebar > *", {"visibility": "visible"})
|
||||
|
||||
// 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,
|
||||
|
|
@ -33,33 +32,16 @@ define-function: (
|
|||
"check-colors",
|
||||
(
|
||||
theme, color, color_hover, background, background_hover, background_toggle,
|
||||
background_toggle_hover,
|
||||
),
|
||||
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 > *", {"visibility": "visible"})
|
||||
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)",
|
||||
|
|
@ -126,7 +108,6 @@ call-function: ("check-colors", {
|
|||
"background": "#fff",
|
||||
"background_hover": "#e0e0e0",
|
||||
"background_toggle": "rgba(0, 0, 0, 0)",
|
||||
"background_toggle_hover": "#e0e0e0",
|
||||
})
|
||||
call-function: ("check-colors", {
|
||||
"theme": "dark",
|
||||
|
|
@ -135,7 +116,6 @@ call-function: ("check-colors", {
|
|||
"background": "#333",
|
||||
"background_hover": "#444",
|
||||
"background_toggle": "rgba(0, 0, 0, 0)",
|
||||
"background_toggle_hover": "#676767",
|
||||
})
|
||||
call-function: ("check-colors", {
|
||||
"theme": "ayu",
|
||||
|
|
@ -144,41 +124,28 @@ call-function: ("check-colors", {
|
|||
"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 > *", {"visibility": "visible"})
|
||||
|
||||
// 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: (".src .sidebar > *", {"visibility": "hidden"})
|
||||
// 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 +156,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 +167,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"}
|
||||
|
|
|
|||
|
|
@ -48,16 +48,16 @@ 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.
|
||||
click: (10, 10)
|
||||
click: "#sidebar-button"
|
||||
// We wait for the sidebar to be expanded.
|
||||
wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"})
|
||||
assert-css: (".src-sidebar-expanded nav.sidebar a", {"font-size": "14px"})
|
||||
// We collapse the sidebar.
|
||||
click: (10, 10)
|
||||
click: "#sidebar-button"
|
||||
// We ensure that the class has been removed.
|
||||
wait-for: "html:not(.src-sidebar-expanded)"
|
||||
assert: "nav.sidebar"
|
||||
|
|
@ -65,7 +65,7 @@ assert: "nav.sidebar"
|
|||
// Checking that only the path to the current file is "open".
|
||||
go-to: "file://" + |DOC_PATH| + "/src/lib2/another_folder/sub_mod/mod.rs.html"
|
||||
// First we expand the sidebar again.
|
||||
click: (10, 10)
|
||||
click: "#sidebar-button"
|
||||
// We wait for the sidebar to be expanded.
|
||||
wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"})
|
||||
assert: "//*[@class='dir-entry' and @open]/*[text()='lib2']"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -146,14 +146,14 @@ define-function: (
|
|||
)
|
||||
}
|
||||
)
|
||||
store-property: ("#src-sidebar > .title", {
|
||||
store-property: (".src-sidebar-title", {
|
||||
"offsetHeight": source_sidebar_title_height,
|
||||
"offsetTop": source_sidebar_title_y,
|
||||
})
|
||||
call-function: ("check-sidebar-dir-entry", {
|
||||
"x": 0,
|
||||
// border + margin = 6
|
||||
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
|
||||
// margin = 7px
|
||||
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 7,
|
||||
})
|
||||
|
||||
// Check the search form
|
||||
|
|
@ -175,13 +175,14 @@ assert-property: ("#main-content", {"offsetTop": 50})
|
|||
// 8 = 50 - 34 - 8
|
||||
|
||||
// Check the sidebar directory entries have a marker and spacing (tablet).
|
||||
store-property: ("#src-sidebar > .title", {
|
||||
store-property: (".src-sidebar-title", {
|
||||
"offsetHeight": source_sidebar_title_height,
|
||||
"offsetTop": source_sidebar_title_y,
|
||||
})
|
||||
call-function: ("check-sidebar-dir-entry", {
|
||||
"x": 0,
|
||||
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
|
||||
// margin = 7px
|
||||
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 7,
|
||||
})
|
||||
|
||||
// Tiny, phone mobile gets a different display where the logo is stacked on top.
|
||||
|
|
@ -189,21 +190,12 @@ set-window-size: (450, 700)
|
|||
assert-css: ("nav.sub", {"flex-direction": "column"})
|
||||
|
||||
// Check the sidebar directory entries have a marker and spacing (phone).
|
||||
store-property: ("#src-sidebar > .title", {
|
||||
store-property: (".src-sidebar-title", {
|
||||
"offsetHeight": source_sidebar_title_height,
|
||||
"offsetTop": source_sidebar_title_y,
|
||||
})
|
||||
call-function: ("check-sidebar-dir-entry", {
|
||||
"x": 0,
|
||||
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
|
||||
// margin = 7px
|
||||
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 7,
|
||||
})
|
||||
|
||||
// The logo is not present on this page.
|
||||
assert-false: ".sub-logo-container > img"
|
||||
|
||||
// Check the staged-api page instead, which does.
|
||||
// Now we check that the logo has a bottom margin so it's not stuck to the search input.
|
||||
go-to: "file://" + |DOC_PATH| + "/src/staged_api/lib.rs.html"
|
||||
assert-css: (".sub-logo-container > img", {"margin-bottom": "8px"})
|
||||
store-property: (".sub-logo-container", {"clientHeight": logo_height})
|
||||
assert-position: (".search-form", {"y": |logo_height| + 8})
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
--code-attribute-color: #999;
|
||||
--toggles-color: #999;
|
||||
--toggle-filter: none;
|
||||
--mobile-sidebar-menu-filter: none;
|
||||
--search-input-focused-border-color: #66afe9;
|
||||
--copy-path-button-color: #999;
|
||||
--copy-path-img-filter: invert(50%);
|
||||
|
|
|
|||
|
|
@ -3,5 +3,4 @@
|
|||
#![doc(rust_logo)]
|
||||
// Note: this test is paired with logo-class.rs and logo-class-default.rs.
|
||||
// @has logo_class_rust/struct.SomeStruct.html '//*[@class="logo-container"]/img[@class="rust-logo"]' ''
|
||||
// @has src/logo_class_rust/logo-class-rust.rs.html '//*[@class="sub-logo-container"]/img[@class="rust-logo"]' ''
|
||||
pub struct SomeStruct;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,4 @@
|
|||
|
||||
// @has logo_class/struct.SomeStruct.html '//*[@class="logo-container"]/img[@src="https://raw.githubusercontent.com/sagebind/isahc/master/media/isahc.svg.png"]' ''
|
||||
// @!has logo_class/struct.SomeStruct.html '//*[@class="logo-container"]/img[@class="rust-logo"]' ''
|
||||
//
|
||||
// @has src/logo_class/logo-class.rs.html '//*[@class="sub-logo-container"]/img[@src="https://raw.githubusercontent.com/sagebind/isahc/master/media/isahc.svg.png"]' ''
|
||||
// @!has src/logo_class/logo-class.rs.html '//*[@class="sub-logo-container"]/img[@class="rust-logo"]' ''
|
||||
pub struct SomeStruct;
|
||||
|
|
|
|||
Loading…
Reference in a new issue