From 859bbc5deffbee7870433c541cdbeb4a4a23780f Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Sun, 17 Dec 2023 23:06:31 -0700 Subject: [PATCH 1/6] 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. --- src/librustdoc/html/static/css/rustdoc.css | 139 +++++++----------- src/librustdoc/html/static/js/main.js | 19 ++- src/librustdoc/html/static/js/src-script.js | 42 +----- src/librustdoc/html/templates/page.html | 15 +- tests/rustdoc-gui/code-sidebar-toggle.goml | 4 +- tests/rustdoc-gui/cursor.goml | 2 +- tests/rustdoc-gui/globals.goml | 2 +- .../sidebar-source-code-display.goml | 61 ++------ tests/rustdoc-gui/sidebar-source-code.goml | 2 +- tests/rustdoc-gui/source-code-page.goml | 2 +- 10 files changed, 92 insertions(+), 196 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 6e673aa77c5..0d59d81f62d 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -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,\ + '); + } + /* 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, diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 63ab56053af..410bf2e34ca 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -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) { diff --git a/src/librustdoc/html/static/js/src-script.js b/src/librustdoc/html/static/js/src-script.js index fc1d2d37845..2a3a6e7afb3 100644 --- a/src/librustdoc/html/static/js/src-script.js +++ b/src/librustdoc/html/static/js/src-script.js @@ -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); diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 60ca5660c02..c4d8796623d 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -111,6 +111,10 @@ {% if !display_krate_version_extra.is_empty() %}
{{+ display_krate_version_extra}}
{# #} {% endif %} + {% else %} +
+

Files

{# #} +
{# #} {% endif %} {{ sidebar|safe }} {# #} @@ -118,22 +122,11 @@
{# #} {% if page.css_class != "src" %}
{% endif %}