rustdoc: bundle sidebar button icon into CSS

This removes an HTTP request from the loading pipeline, and allows it to be changed with a media query.
rust-lang · Oct 11, 2023 · b46d43f · b46d43f
1 parent c0d5501
commit b46d43f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -1597,6 +1597,16 @@ a.tooltip:hover::after {
 	border-color: var(--settings-button-border-focus);
 }
 
+#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">\
+		<rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5"/>\
+		<circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\
+		<path d="m7.6121 3v16 M5.375 7.625h-2 m2 3h-2 m2 3h-2" stroke-width="1.25"/></svg>');
+	width: 22px;
+	height: 22px;
+}
+
 #copy-path {
 	color: var(--copy-path-button-color);
 	background: var(--main-background-color);
@@ -1983,6 +1993,17 @@ in src-script.js and main.js
 		display: none;
 	}
 
+	/* sidebar button becomes topbar button */
+	#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">\
+			<rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5"/>\
+			<circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\
+			<path d="m3 7.375h16m0-3h-4" stroke-width="1.25"/></svg>');
+		width: 22px;
+		height: 22px;
+	}
+
 	/* 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 {
@@ -2690,7 +2711,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 }
 
 :root[data-theme="ayu"] #settings-menu > a img,
-:root[data-theme="ayu"] #sidebar-button > a img {
+:root[data-theme="ayu"] #sidebar-button > a:before {
 	filter: invert(100);
 }
 /* End theme: ayu */

diff --git a/src/librustdoc/html/static/images/sidebar.svg b/src/librustdoc/html/static/images/sidebar.svg
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
@@ -132,10 +132,7 @@ <h2> {# #}
                     <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> {# #}
+                        <a href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}all.html" title="show sidebar"></a> {# #}
                     </div> {# #}
                     {% endif %}
                     <input {#+ #}