rustdoc: make the resize handle easier to find

This commit makes two related changes:

* The resize handle is now a bit bigger, 10px specifically.
* A visible indicator appears when you're in the area to tell you that
  you can interact with the border.

Author: notriddle

src/librustdoc/html/static/css/rustdoc.css

@@ -407,22 +407,22 @@ img {
 }
 
 .sidebar-resizer {
-	width: 3px;
-	margin: 0 3px;
+	width: 9px;
 	cursor: col-resize;
 	z-index: 10;
 	position: absolute;
 	height: 100%;
-	left: var(--desktop-sidebar-width, 200px);
+	/* make sure there's a 1px gap between the scrollbar and resize handle */
+	left: calc(var(--desktop-sidebar-width, 200px) + 1px);
 }
 
 .rustdoc.src .sidebar-resizer {
-	left: 50px;
-	width: 6px;
-	margin: 0 3px 0 0;
+	/* when closed, place resizer glow on top of the normal src sidebar border (no need to worry about sidebar) */
+	left: 49px;
 }
 
 .src-sidebar-expanded .rustdoc.src .sidebar-resizer {
+	/* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer to right of it */
 	left: var(--src-sidebar-width, 300px);
 }
 
@@ -439,16 +439,35 @@ img {
 
 .sidebar-resizer:hover,
 .sidebar-resizer:active,
-.sidebar-resizer:focus {
-	width: 9px;
+.sidebar-resizer:focus,
+.sidebar-resizer.active {
+	width: 10px;
 	margin: 0;
+	/* when active or hovered, place resizer glow on top of the sidebar (right next to, or even on top of, the scrollbar) */
+	left: var(--desktop-sidebar-width, 200px);
+	border-left: solid 1px var(--sidebar-resizer-hover);
+}
+
+.src-sidebar-expanded .rustdoc.src .sidebar-resizer:hover,
+.src-sidebar-expanded .rustdoc.src .sidebar-resizer:active,
+.src-sidebar-expanded .rustdoc.src .sidebar-resizer:focus,
+.src-sidebar-expanded .rustdoc.src .sidebar-resizer.active {
+	/* when active or hovered, place resizer glow on top of the normal src sidebar border */
+	left: calc(var(--src-sidebar-width, 300px) - 1px);
 }
 
 .sidebar-resizer.active {
-	/* when dragging the sidebar into nothing, make sure the items inside
-	   don't get hovered over */
-	width: 141px;
-	margin: 0 -66px;
+	/* make the resize tool bigger when actually resizing, to avoid :hover styles on other stuff while resizing */
+	padding: 0 140px;
+	width: 2px;
+	margin-left: -140px;
+	border-left: none;
+}
+.sidebar-resizer.active:before {
+	border-left: solid 2px var(--sidebar-resizer-active);
+	display: block;
+	height: 100%;
+	content: "";
 }
 
 .sidebar, .mobile-topbar, .sidebar-menu-toggle,

src/librustdoc/html/static/css/themes/ayu.css

@@ -104,6 +104,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--scrape-example-help-hover-color: #fff;
 	--scrape-example-code-wrapper-background-start: rgba(15, 20, 25, 1);
 	--scrape-example-code-wrapper-background-end: rgba(15, 20, 25, 0);
+	--sidebar-resizer-hover: hsl(34, 50%, 33%);
+	--sidebar-resizer-active: hsl(34, 100%, 66%);
 }
 
 h1, h2, h3, h4,

src/librustdoc/html/static/css/themes/dark.css

@@ -99,4 +99,6 @@
 	--scrape-example-help-hover-color: #fff;
 	--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
 	--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
+	--sidebar-resizer-hover: hsl(207, 30%, 54%);
+	--sidebar-resizer-active: hsl(207, 90%, 54%);
 }

src/librustdoc/html/static/css/themes/light.css

@@ -96,4 +96,6 @@
 	--scrape-example-help-hover-color: #000;
 	--scrape-example-code-wrapper-background-start: rgba(255, 255, 255, 1);
 	--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
+	--sidebar-resizer-hover: hsl(207, 90%, 66%);
+	--sidebar-resizer-active: hsl(207, 90%, 54%);
 }

tests/rustdoc-gui/sidebar-resize.goml

@@ -12,10 +12,10 @@ set-local-storage: {"rustdoc-hide-sidebar": "false"}
 
 // Now same thing, but for source code
 go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
-assert-property: (".sidebar", {"clientWidth": "49"})
+assert-property: (".sidebar", {"clientWidth": "46"})
 drag-and-drop: ((52, 100), (185, 100))
-assert-property: (".sidebar", {"clientWidth": "181"})
+assert-property: (".sidebar", {"clientWidth": "151"})
 drag-and-drop: ((185, 100), (5, 100))
 // instead of hiding the sidebar entirely, this
 // will switch to the toggle mode
-assert-property: (".sidebar", {"clientWidth": "49"})
+assert-property: (".sidebar", {"clientWidth": "46"})