Stop using the trigram of heaven as a hamburger button

It doesn't look quite right, because the lines are too far apart, and it's not going to be announced by screenreaders as a menu button, since that's not what the symbol means. This adds a real tooltip and uses a better drawing of the icon.
rust-lang · Dec 18, 2023 · 8272eae · 8272eae
1 parent bd14fb6
commit 8272eae
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -1548,6 +1548,7 @@ a.tooltip:hover::after {
 }
 #sidebar-button {
 	display: none;
+	line-height: 0;
 }
 .hide-sidebar #sidebar-button,
 .src #sidebar-button {
@@ -1925,11 +1926,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 {
@@ -1964,13 +1962,25 @@ 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);
+	}
 
-	/* src sidebar button opens modal
+	/* sidebar button opens modal
 		use hamburger button */
-	.src #sidebar-button > a:before {
+	.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="3"/></svg>');
+			<path d="M3,5h16M3,11h16M3,17h16" stroke-width="2.75"/></svg>');
+		opacity: 0.75;
+	}
+	.src #sidebar-button > a:hover:before, .sidebar-menu-toggle:hover:before,
+	.src #sidebar-button > a:active:before, .sidebar-menu-toggle:active:before,
+	.src #sidebar-button > a:focus:before, .sidebar-menu-toggle:focus:before {
+		opacity: 1;
 	}
 
 	/* Display an alternating layout on tablets and phones */
@@ -2303,6 +2313,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%);
@@ -2407,6 +2418,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%);
@@ -2518,6 +2530,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%);

diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
@@ -77,7 +77,7 @@
     {{ layout.external_html.before_content|safe }}
     {% if page.css_class != "src" %}
     <nav class="mobile-topbar"> {# #}
-        <button class="sidebar-menu-toggle">&#9776;</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 %}

diff --git a/tests/rustdoc-gui/sidebar-source-code-display.goml b/tests/rustdoc-gui/sidebar-source-code-display.goml
@@ -130,15 +130,15 @@ call-function: ("check-colors", {
 set-window-size: (500, 700)
 reload:
 // Waiting for the sidebar to be displayed...
-wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"})
+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 that the scroll position is kept when opening the sidebar.
 click: "#sidebar-button"
-wait-for-css: (".sidebar", {"position": "absolute", "left": "-1000px"})
+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"}

diff --git a/tests/rustdoc/logo-class-rust.rs b/tests/rustdoc/logo-class-rust.rs
@@ -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;
diff --git a/tests/rustdoc/logo-class.rs b/tests/rustdoc/logo-class.rs
@@ -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;