From 65930aad8cd7d7dd1fdcdce6ed284d4e8ad8cd33 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sat, 16 Dec 2023 17:18:59 +0100 Subject: [PATCH 1/3] Simplify source pages sidebar handling --- src/librustdoc/html/static/css/rustdoc.css | 38 +++++++++++++-------- src/librustdoc/html/static/js/src-script.js | 32 +++++------------ 2 files changed, 33 insertions(+), 37 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 6e673aa77c5c8..884ce70a8249f 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1540,6 +1540,30 @@ a.tooltip:hover::after { align-items: stretch; z-index: 10; } +#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; + display: block; +} +#src-sidebar-toggle > button.collapse { + display: none; +} +.src-sidebar-expanded #src-sidebar-toggle > button.expand { + display: none; +} +.src-sidebar-expanded #src-sidebar-toggle > button.collapse { + display: block; +} + #src-sidebar { width: 100%; overflow: auto; @@ -1557,20 +1581,6 @@ 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; -} - #settings-menu, #help-button { margin-left: 4px; display: flex; diff --git a/src/librustdoc/html/static/js/src-script.js b/src/librustdoc/html/static/js/src-script.js index bbb0527a8331c..839b3a76d5e6f 100644 --- a/src/librustdoc/html/static/js/src-script.js +++ b/src/librustdoc/html/static/js/src-script.js @@ -71,48 +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.rustdocCloseSourceSidebar(); - } +function createButton(className, text, onclick) { + const button = document.createElement("button"); + button.className = className; + button.innerText = text; + button.onclick = onclick; + return button; } function createSidebarToggle() { const sidebarToggle = document.createElement("div"); sidebarToggle.id = "src-sidebar-toggle"; - const inner = document.createElement("button"); + sidebarToggle.appendChild(createButton("expand", ">", window.rustdocShowSourceSidebar)); + sidebarToggle.appendChild(createButton("collapse", "<", window.rustdocCloseSourceSidebar)); if (getCurrentValue("source-sidebar-show") === "true") { - inner.innerText = "<"; - } else { - inner.innerText = ">"; + window.rustdocShowSourceSidebar(); } - inner.onclick = toggleSidebar; - - sidebarToggle.appendChild(inner); return sidebarToggle; } From e9faeea250acd658f20ccd86b220a2dc2e2ddf67 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sat, 16 Dec 2023 19:05:06 +0100 Subject: [PATCH 2/3] Update test for source sidebar button change --- tests/rustdoc-gui/sidebar-source-code-display.goml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/rustdoc-gui/sidebar-source-code-display.goml b/tests/rustdoc-gui/sidebar-source-code-display.goml index cea4db1466b69..d857b8cc2f7c4 100644 --- a/tests/rustdoc-gui/sidebar-source-code-display.goml +++ b/tests/rustdoc-gui/sidebar-source-code-display.goml @@ -47,14 +47,14 @@ define-function: ( // Without hover or focus. assert-css: ("#src-sidebar-toggle > button", {"background-color": |background_toggle|}) // With focus. - focus: "#src-sidebar-toggle > button" + focus: "#src-sidebar-toggle > button.collapse" assert-css: ( "#src-sidebar-toggle > button:focus", {"background-color": |background_toggle_hover|}, ) focus: ".search-input" // With hover. - move-cursor-to: "#src-sidebar-toggle > button" + move-cursor-to: "#src-sidebar-toggle > button.collapse" assert-css: ( "#src-sidebar-toggle > button:hover", {"background-color": |background_toggle_hover|}, From 43a45e0c3b5d4314940e91872ca49e52ee0c402e Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sun, 17 Dec 2023 17:36:52 +0100 Subject: [PATCH 3/3] Improve accessibility for source sidebar collapse/expand button --- src/librustdoc/html/static/js/src-script.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/librustdoc/html/static/js/src-script.js b/src/librustdoc/html/static/js/src-script.js index 839b3a76d5e6f..1d6b55fa851c8 100644 --- a/src/librustdoc/html/static/js/src-script.js +++ b/src/librustdoc/html/static/js/src-script.js @@ -81,11 +81,12 @@ window.rustdocShowSourceSidebar = () => { updateLocalStorage("source-sidebar-show", "true"); }; -function createButton(className, text, onclick) { +function createButton(className, text, onclick, ariaLabel) { const button = document.createElement("button"); button.className = className; button.innerText = text; button.onclick = onclick; + button.setAttribute("aria-label", ariaLabel); return button; } @@ -93,8 +94,10 @@ function createSidebarToggle() { const sidebarToggle = document.createElement("div"); sidebarToggle.id = "src-sidebar-toggle"; - sidebarToggle.appendChild(createButton("expand", ">", window.rustdocShowSourceSidebar)); - sidebarToggle.appendChild(createButton("collapse", "<", window.rustdocCloseSourceSidebar)); + sidebarToggle.appendChild( + createButton("expand", ">", window.rustdocShowSourceSidebar, "Expand source sidebar")); + sidebarToggle.appendChild( + createButton("collapse", "<", window.rustdocCloseSourceSidebar, "Collapse source sidebar")); if (getCurrentValue("source-sidebar-show") === "true") { window.rustdocShowSourceSidebar();