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;