rustdoc: add "show sidebar" button

Author: notriddle

src/librustdoc/html/markdown.rs

@@ -1578,6 +1578,7 @@ fn init_id_map() -> FxHashMap<Cow<'static, str>, usize> {
     map.insert("themeStyle".into(), 1);
     map.insert("settings-menu".into(), 1);
     map.insert("help-button".into(), 1);
+    map.insert("sidebar-button".into(), 1);
     map.insert("main-content".into(), 1);
     map.insert("toggle-all-docs".into(), 1);
     map.insert("all-types".into(), 1);

src/librustdoc/html/static/css/noscript.css

@@ -9,7 +9,7 @@ rules.
 	margin-left: 0 !important;
 }
 
-#copy-path {
+#copy-path, #sidebar-button, .sidebar-resizer {
 	/* It requires JS to work so no need to display it in this case. */
 	display: none;
 }

src/librustdoc/html/static/css/rustdoc.css

@@ -1400,7 +1400,14 @@ a.tooltip:hover::after {
 	margin-left: 4px;
 	display: flex;
 }
-#settings-menu > a, #help-button > a {
+#sidebar-button {
+	display: none;
+}
+.hide-sidebar #sidebar-button {
+	display: flex;
+	margin-right: 4px;
+}
+#settings-menu > a, #help-button > a, #sidebar-button > a {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -1415,7 +1422,8 @@ a.tooltip:hover::after {
 }
 
 #settings-menu > a:hover, #settings-menu > a:focus,
-#help-button > a:hover, #help-button > a:focus {
+#help-button > a:hover, #help-button > a:focus,
+#sidebar-button > a:hover, #sidebar-button > a:focus {
 	border-color: var(--settings-button-border-focus);
 }
 

src/librustdoc/html/static/css/themes/ayu.css

@@ -176,6 +176,6 @@ pre, pre > code,
 	border-bottom: 1px solid rgba(242, 151, 24, 0.3);
 }
 
-#settings-menu > a img {
+#settings-menu > a img, #sidebar-button > a img {
 	filter: invert(100);
 }

src/librustdoc/html/static/images/sidebar.svg

@@ -1231,6 +1231,14 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/how-to-read-rustdoc.html\
 }());
 
 (function() {
+    const sidebarButton = document.getElementById("sidebar-button");
+    if (sidebarButton) {
+        sidebarButton.addEventListener("click", e => {
+            removeClass(document.documentElement, "hide-sidebar");
+            updateLocalStorage("hide-sidebar", "false");
+            e.preventDefault();
+        });
+    }
     const resizer = document.getElementsByClassName("sidebar-resizer")[0];
     const sidebar = document.getElementsByClassName("sidebar")[0];
     if (!resizer || !sidebar) {

src/librustdoc/html/static/js/main.js

@@ -101,6 +101,7 @@ static_files! {
     storage_js => "static/js/storage.js",
     scrape_examples_js => "static/js/scrape-examples.js",
     wheel_svg => "static/images/wheel.svg",
+    sidebar_svg => "static/images/sidebar.svg",
     clipboard_svg => "static/images/clipboard.svg",
     copyright => "static/COPYRIGHT.txt",
     license_apache => "static/LICENSE-APACHE.txt",

src/librustdoc/html/static_files.rs

@@ -125,6 +125,14 @@ <h2></h2> {# #}
                 {% 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}}{{krate_with_trailing_slash|safe}}all.html" title="show sidebar"> {# #}
+                            <img width="22" height="22" alt="Show sidebar" {#+ #}
+                            src="{{static_root_path|safe}}{{files.sidebar_svg}}"> {# #}
+                        </a> {# #}
+                    </div> {# #}
+                    {% endif %}
                     <input {#+ #}
                         class="search-input" {#+ #}
                         name="search" {#+ #}
@@ -133,8 +141,8 @@ <h2></h2> {# #}
                         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 id="help-button" tabindex="-1"> {# #}
+                        <a href="{{page.root_path|safe}}help.html" title="help">?</a> {# #}
                     </div> {# #}
                     <div id="settings-menu" tabindex="-1"> {# #}
                         <a href="{{page.root_path|safe}}settings.html" title="settings"> {# #}