From 5fc30b857c326dfdb6de7be952ad42192f890b93 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 1 Jul 2024 17:08:49 -0700 Subject: [PATCH 1/3] rustdoc: click target for sidebar items flush left --- src/librustdoc/html/static/css/rustdoc.css | 16 ++++++++++++---- tests/rustdoc-gui/huge-logo.goml | 3 ++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 4c0ba75d26129..940f444dde1f4 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -15,6 +15,7 @@ --desktop-sidebar-width: 200px; --src-sidebar-width: 300px; --desktop-sidebar-z-index: 100; + --sidebar-elems-left-padding: 24px; } /* See FiraSans-LICENSE.txt for the Fira Sans license. */ @@ -559,8 +560,11 @@ ul.block, .block li { .sidebar > h2 a { display: block; padding: 0.25rem; /* 4px */ - margin-left: -0.25rem; margin-right: 0.25rem; + /* extend click target to far edge of screen (mile wide bar) */ + border-left: solid var(--sidebar-elems-left-padding) transparent; + margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding)); + background-clip: padding-box; } .sidebar h2 { @@ -578,7 +582,7 @@ ul.block, .block li { .sidebar-elems, .sidebar > .version, .sidebar > h2 { - padding-left: 24px; + padding-left: var(--sidebar-elems-left-padding); } .sidebar a { @@ -632,13 +636,17 @@ ul.block, .block li { .sidebar-crate .logo-container { /* The logo is expected to have 8px "slop" along its edges, so we can optically center it. */ - margin: 0 -16px 0 -16px; + margin: 0 calc(-16px - var(--sidebar-elems-left-padding)); + padding: 0 var(--sidebar-elems-left-padding); text-align: center; } .sidebar-crate h2 a { display: block; - margin: 0 calc(-24px + 0.25rem) 0 -0.2rem; + /* extend click target to far edge of screen (mile wide bar) */ + border-left: solid var(--sidebar-elems-left-padding) transparent; + background-clip: padding-box; + margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding)); /* Align the sidebar crate link with the search bar, which have different font sizes. diff --git a/tests/rustdoc-gui/huge-logo.goml b/tests/rustdoc-gui/huge-logo.goml index e4e5cb1ec7413..6fc45ede181e5 100644 --- a/tests/rustdoc-gui/huge-logo.goml +++ b/tests/rustdoc-gui/huge-logo.goml @@ -3,8 +3,9 @@ go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html" set-window-size: (1280, 1024) +// offsetWidth = width of sidebar + left and right margins +assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offsetHeight": 48}) // offsetWidth = width of sidebar -assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "48", "offsetHeight": 48}) assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 48}) set-window-size: (400, 600) From 3924493a1070b5407a2203e99e4856af7e37f7d5 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 15 Jul 2024 16:20:37 -0700 Subject: [PATCH 2/3] rustdoc: make sidebar highlight cover whole click target --- src/librustdoc/html/static/css/rustdoc.css | 43 +++++++++++++++++++++- tests/rustdoc-gui/huge-logo.goml | 4 +- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 940f444dde1f4..cb8b82e8bde0a 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -564,7 +564,7 @@ ul.block, .block li { /* extend click target to far edge of screen (mile wide bar) */ border-left: solid var(--sidebar-elems-left-padding) transparent; margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding)); - background-clip: padding-box; + background-clip: border-box; } .sidebar h2 { @@ -641,11 +641,50 @@ ul.block, .block li { text-align: center; } +.sidebar-crate .logo-container img { + /* When in a horizontal logo lockup, the highlight color of the crate name menu item + extends underneath the actual logo (in a vertical lockup, that background highlight + extends to the left edge of the screen). + + To prevent a weird-looking colored band from appearing under the logo, cover it up + with the sidebar's background. Additionally, the crate name extends slightly above + the logo, so that its highlight has a bit of space to let the ascenders breath while + also having those ascenders meet exactly with the top of the logo. + + In ANSI art, make it look like this: + | ┌─────┐ + | (R) │ std │ + | └─────┘ + + Not like this (which would happen without the z-index): + | ┌────────┐ + | (│ std │ + | └────────┘ + + Not like this (which would happen without the background): + | ┌────────┐ + | (R) std │ + | └────────┘ + + Nor like this (which would happen without the negative margin): + | ─────────┐ + | (R) │ std │ + | └─────┘ + */ + margin-top: -16px; + border-top: solid 16px transparent; + box-sizing: content-box; + position: relative; + background-color: var(--sidebar-background-color); + background-clip: border-box; + z-index: 1; +} + .sidebar-crate h2 a { display: block; /* extend click target to far edge of screen (mile wide bar) */ border-left: solid var(--sidebar-elems-left-padding) transparent; - background-clip: padding-box; + background-clip: border-box; margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding)); /* Align the sidebar crate link with the search bar, which have different font sizes. diff --git a/tests/rustdoc-gui/huge-logo.goml b/tests/rustdoc-gui/huge-logo.goml index 6fc45ede181e5..01999401e607d 100644 --- a/tests/rustdoc-gui/huge-logo.goml +++ b/tests/rustdoc-gui/huge-logo.goml @@ -5,8 +5,8 @@ go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html" set-window-size: (1280, 1024) // offsetWidth = width of sidebar + left and right margins assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offsetHeight": 48}) -// offsetWidth = width of sidebar -assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 48}) +// offsetWidth = width of sidebar, offsetHeight = height + top padding +assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 64}) set-window-size: (400, 600) // offset = size + margin From 55149061eaf65df7a31c8c331334b960bd2a1f84 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Tue, 16 Jul 2024 10:04:40 -0700 Subject: [PATCH 3/3] rustdoc: add test cases for mile wide bar --- tests/rustdoc-gui/huge-logo.goml | 1 + tests/rustdoc-gui/sidebar.goml | 15 +++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/tests/rustdoc-gui/huge-logo.goml b/tests/rustdoc-gui/huge-logo.goml index 01999401e607d..d207ab5bb37c2 100644 --- a/tests/rustdoc-gui/huge-logo.goml +++ b/tests/rustdoc-gui/huge-logo.goml @@ -7,6 +7,7 @@ set-window-size: (1280, 1024) assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offsetHeight": 48}) // offsetWidth = width of sidebar, offsetHeight = height + top padding assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 64}) +assert-css: (".sidebar-crate .logo-container img", {"border-top-width": "16px", "margin-top": "-16px"}) set-window-size: (400, 600) // offset = size + margin diff --git a/tests/rustdoc-gui/sidebar.goml b/tests/rustdoc-gui/sidebar.goml index 452545958f961..56453517a55a2 100644 --- a/tests/rustdoc-gui/sidebar.goml +++ b/tests/rustdoc-gui/sidebar.goml @@ -179,3 +179,18 @@ assert-property: (".sidebar .sidebar-crate h2 a", { "offsetTop": |index_sidebar_y|, "offsetLeft": |index_sidebar_x|, }) + +// Check that the sidebar links touch the left side of the box +go-to: "file://" + |DOC_PATH| + "/test_docs/index.html" +assert-position: (".sidebar .block a", {"x": -4}) +assert-position: (".sidebar-crate > h2 > a", {"x": -3}) + +// Check that the main sidebar links touch the left side of the box +// but the crate name doesn't, because the logo takes that space +go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html" +assert-position: (".sidebar .block a", {"x": -4}) +// when side-by-side, it's not line wrapped +assert-position-false: (".sidebar-crate > h2 > a", {"x": -3}) +// when line-wrapped, see that it becomes flush-left again +drag-and-drop: ((205, 100), (108, 100)) +assert-position: (".sidebar-crate > h2 > a", {"x": -3})