Rollup merge of rust-lang#127229 - notriddle:notriddle/mile-wide-bar, r=GuillaumeGomez

rustdoc: click target for sidebar items flush left

This change adjusts the clickable area of sidebar links to touch the leftmost edge of the canvas, making them [much easier](https://www.nngroup.com/articles/fitts-law/) to click (when the browser window is maximized or tiled left, but those cases are common enough to matter).

[Screencast from 2024-07-15 15-31-07.webm](https://github.com/user-attachments/assets/1e952d3a-e9e7-476b-b211-44a17c190b38)

<details><summary>old screencast</summary>

[Screencast from 2024-07-01 17-23-34.webm](https://github.com/rust-lang/rust/assets/1593513/dc6f9c2e-5904-403d-b353-d233e6e1afbc)

</details>

Author: matthiaskrgr

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: border-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,56 @@ 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 .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;
-	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: 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.
 

tests/rustdoc-gui/huge-logo.goml

@@ -3,9 +3,11 @@
 go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html"
 
 set-window-size: (1280, 1024)
-// 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})
+// offsetWidth = width of sidebar + left and right margins
+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

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})