rustdoc: add a handle that makes sidebar resizing more obvious

src/librustdoc/html/static/css/noscript.css

@@ -43,6 +43,7 @@ nav.sub {
 	--settings-button-border-focus: #717171;
 	--sidebar-background-color: #f5f5f5;
 	--sidebar-background-color-hover: #e0e0e0;
+	--sidebar-border-color: #ddd;
 	--code-block-background-color: #f5f5f5;
 	--scrollbar-track-background-color: #dcdcdc;
 	--scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6);
@@ -135,6 +136,7 @@ nav.sub {
 	--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%);
+	--sidebar-resizer-shadow: #ccc;
 }
 /* End theme: light */
 
@@ -149,6 +151,7 @@ nav.sub {
 		--settings-button-border-focus: #ffb900;
 		--sidebar-background-color: #505050;
 		--sidebar-background-color-hover: #676767;
+		--sidebar-border-color: #2A2A2A;
 		--code-block-background-color: #2A2A2A;
 		--scrollbar-track-background-color: #717171;
 		--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
@@ -244,6 +247,7 @@ nav.sub {
 		--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%);
+		--sidebar-resizer-shadow: #000;
 	}
 /* End theme: dark */
 }

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

@@ -1,4 +1,6 @@
-/* When static files are updated, their suffixes need to be updated.
+/* ignore-tidy-filelength */
+/*
+	When static files are updated, their suffixes need to be updated.
 	1. In the top directory run:
 		./x.py doc --stage 1 library/core
 	2. Find the directory containing files named with updated suffixes:
@@ -493,12 +495,13 @@ img {
 	top: 0;
 	left: 0;
 	z-index: var(--desktop-sidebar-z-index);
+	/* resize indicator: hide this when on touch or mobile */
+	border-right: solid 1px var(--sidebar-border-color);
 }
 
 .rustdoc.src .sidebar {
 	flex-basis: 50px;
 	width: 50px;
-	border-right: 1px solid;
 	overflow-x: hidden;
 	/* The sidebar is by default hidden  */
 	overflow-y: hidden;
@@ -512,12 +515,40 @@ img {
 .sidebar-resizer {
 	touch-action: none;
 	width: 9px;
-	cursor: col-resize;
+	cursor: ew-resize;
 	z-index: calc(var(--desktop-sidebar-z-index) + 1);
 	position: fixed;
 	height: 100%;
-	/* make sure there's a 1px gap between the scrollbar and resize handle */
-	left: calc(var(--desktop-sidebar-width) + 1px);
+	left: var(--desktop-sidebar-width);
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+.sidebar-resizer::after {
+	content: "";
+	background: linear-gradient(
+		0.25turn,
+		transparent 0px,
+		transparent 2px,
+		var(--sidebar-border-color) 2px,
+		var(--sidebar-border-color) 3px,
+		var(--sidebar-resizer-shadow) 3px,
+		var(--sidebar-resizer-shadow) 4px,
+		transparent 4px,
+		transparent 6px,
+		var(--sidebar-border-color) 6px,
+		var(--sidebar-border-color) 7px,
+		var(--sidebar-resizer-shadow) 7px,
+		var(--sidebar-resizer-shadow) 8px,
+		transparent 8px
+	);
+	border: solid 1px var(--sidebar-border-color);
+	border-left: none;
+	border-right: solid 1px var(--sidebar-resizer-shadow);
+	border-bottom: solid 1px var(--sidebar-resizer-shadow);
+	width: 8px;
+	height: 24px;
+	image-rendering: crisp-edges;
 }
 
 .rustdoc.src .sidebar-resizer {
@@ -540,7 +571,7 @@ img {
 }
 
 .sidebar-resizing * {
-	cursor: col-resize !important;
+	cursor: ew-resize !important;
 }
 
 .sidebar-resizing .sidebar {
@@ -558,7 +589,7 @@ img {
 	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);
+	left: calc(var(--desktop-sidebar-width) - 1px);
 	border-left: solid 1px var(--sidebar-resizer-hover);
 }
 
@@ -575,6 +606,10 @@ img {
 		/* too easy to hit the resizer while trying to hit the [-] toggle */
 		display: none !important;
 	}
+	.sidebar {
+		/* resize indicator: hide this when on touch or mobile */
+		border-right: none;
+	}
 }
 
 .sidebar-resizer.active {
@@ -585,7 +620,7 @@ img {
 	margin-left: -140px;
 	border-left: none;
 }
-.sidebar-resizer.active:before {
+.sidebar-resizer.active::before {
 	border-left: solid 2px var(--sidebar-resizer-active);
 	display: block;
 	height: 100%;
@@ -2510,6 +2545,8 @@ in src-script.js and main.js
 		/* Reduce height slightly to account for mobile topbar. */
 		height: calc(100vh - 45px);
 		width: 200px;
+		/* resize indicator: hide this when on touch or mobile */
+		border-right: none;
 	}
 
 	/* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
@@ -2893,6 +2930,7 @@ by default.
 	--settings-button-border-focus: #717171;
 	--sidebar-background-color: #f5f5f5;
 	--sidebar-background-color-hover: #e0e0e0;
+	--sidebar-border-color: #ddd;
 	--code-block-background-color: #f5f5f5;
 	--scrollbar-track-background-color: #dcdcdc;
 	--scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6);
@@ -2985,6 +3023,7 @@ by default.
 	--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%);
+	--sidebar-resizer-shadow: #ccc;
 }
 /* End theme: light */
 
@@ -2998,6 +3037,7 @@ by default.
 	--settings-button-border-focus: #ffb900;
 	--sidebar-background-color: #505050;
 	--sidebar-background-color-hover: #676767;
+	--sidebar-border-color: #999;
 	--code-block-background-color: #2A2A2A;
 	--scrollbar-track-background-color: #717171;
 	--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
@@ -3093,6 +3133,7 @@ by default.
 	--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%);
+	--sidebar-resizer-shadow: #000;
 }
 /* End theme: dark */
 
@@ -3110,6 +3151,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--settings-button-border-focus: #e0e0e0;
 	--sidebar-background-color: #14191f;
 	--sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
+	--sidebar-border-color: #5c6773;
 	--code-block-background-color: #191f26;
 	--scrollbar-track-background-color: transparent;
 	--scrollbar-thumb-background-color: #5c6773;
@@ -3205,6 +3247,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--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%);
+	--sidebar-resizer-shadow: #000;
 }
 
 :root[data-theme="ayu"] h1,

src/librustdoc/html/templates/page.html

@@ -114,7 +114,7 @@ <h2>Files</h2> {# #}
         {% endif %}
         {{ sidebar|safe }}
     </nav> {# #}
-    <div class="sidebar-resizer"></div> {# #}
+    <div class="sidebar-resizer" title="Drag to resize sidebar"></div> {# #}
     <main>
         {% if page.css_class != "src" %}<div class="width-limiter">{% endif %}
             {# defined in storage.js to avoid duplicating complex UI across every page #}

tests/rustdoc-gui/sidebar-resize-close-popover.goml

@@ -1,13 +1,13 @@
 // Checks sidebar resizing close the Settings popover
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 show-text: true
 click: "#settings-menu"
 wait-for: "#settings"
 assert-css: ("#settings", {"display": "block"})
 // normal resizing
 drag-and-drop: ((205, 100), (185, 100))
-assert-property: (".sidebar", {"clientWidth": "182"})
+assert-property: (".sidebar", {"clientWidth": "181"})
 assert-css: ("#settings", {"display": "none"})
 
 // Now same thing, but for source code

tests/rustdoc-gui/sidebar-resize-setting.goml

@@ -1,6 +1,6 @@
 // Checks sidebar resizing stays synced with the setting
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 show-text: true
 
 // Verify that the "hide" option is unchecked

tests/rustdoc-gui/sidebar-resize.goml

@@ -1,13 +1,13 @@
 // Checks sidebar resizing
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 show-text: true
 // normal resizing
 drag-and-drop: ((205, 100), (185, 100))
-assert-property: (".sidebar", {"clientWidth": "182"})
+assert-property: (".sidebar", {"clientWidth": "181"})
 // resize past maximum (don't grow past 500)
 drag-and-drop: ((185, 100), (600, 100))
-assert-property: (".sidebar", {"clientWidth": "500"})
+assert-property: (".sidebar", {"clientWidth": "499"})
 // resize past minimum (hide sidebar)
 drag-and-drop: ((501, 100), (5, 100))
 assert-property: (".sidebar", {"clientWidth": "0"})

tests/rustdoc-gui/sidebar.goml

@@ -1,7 +1,7 @@
 // Checks multiple things on the sidebar display (width of its elements, colors, etc).
 include: "utils.goml"
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 show-text: true
 
 // First, check the sidebar colors.
@@ -84,13 +84,13 @@ assert-property: ("html", {"scrollTop": "0"})
 
 // We now go back to the crate page to click on the "lib2" crate link.
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 assert-css: (".sidebar-elems ul.crate > li:first-child > a", {"color": "#356da4"})
 click: ".sidebar-elems ul.crate > li:first-child > a"
 
 // PAGE: lib2/index.html
 go-to: "file://" + |DOC_PATH| + "/lib2/index.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 assert-text: (".sidebar > .sidebar-crate > h2 > a", "lib2")
 assert-count: (".sidebar .location", 0)
 // We check that we have the crates list and that the "current" on is now "lib2".
@@ -116,7 +116,7 @@ assert-text: (".sidebar-elems ul.block > li.current > a", "foobar")
 assert-false: ".sidebar-elems > .crate"
 
 go-to: "./module/index.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 assert-text: (".sidebar > .sidebar-crate > h2 > a", "lib2")
 assert-text: (".sidebar .location", "Module module")
 assert-count: (".sidebar .location", 1)
@@ -134,7 +134,7 @@ assert-property: (".sidebar > .sidebar-elems > #rustdoc-modnav > h2 > a", {
 assert-false: ".sidebar-elems > .crate"
 
 go-to: "./sub_module/sub_sub_module/index.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 assert-text: (".sidebar > .sidebar-crate > h2 > a", "lib2")
 assert-text: (".sidebar .location", "Module sub_sub_module")
 assert-text: (".sidebar > .sidebar-elems > #rustdoc-modnav > h2", "In lib2::module::sub_module")
@@ -149,24 +149,24 @@ assert-text: ("#functions + .item-table dt > a", "foo")
 
 // Links to trait implementations in the sidebar should not wrap even if they are long.
 go-to: "file://" + |DOC_PATH| + "/lib2/struct.HasALongTraitWithParams.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 assert-property: (".sidebar-elems section .block li > a", {"offsetHeight": 29})
 
 // Test that clicking on of the "In <module>" headings in the sidebar links to the
 // appropriate anchor in index.html.
 go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 click: "//ul[@class='block mod']/preceding-sibling::h3/a"
 // PAGE: index.html
 assert-css: ("#modules", {"background-color": "#fdffd3"})
 
 // Finally, assert that the Summary toggle doesn't affect sidebar width.
 click: "#toggle-all-docs"
 assert-text: ("#toggle-all-docs", "Show all")
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 click: "#toggle-all-docs"
 assert-text: ("#toggle-all-docs", "Summary")
-assert-property: (".sidebar", {"clientWidth": "200"})
+assert-property: (".sidebar", {"clientWidth": "199"})
 
 // Checks that all.html and index.html have their sidebar link in the same place.
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"