From c6b78385e63d2e8e7bb9a3404d2c31ef4c176617 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Tue, 8 Apr 2025 11:18:08 -0700 Subject: [PATCH 1/3] rustdoc: add a handle that makes sidebar resizing more obvious This change is based on some discussion on [lolbinarycat's idea], but with a more "traditional" design. Specifically, this is the closest thing I could find to a consensus across many systems I looked at for inspiration: - In Jira, resizable sidebars have a stack of four dots. - In The GIMP, resizable sidebars have a stack of three dots. - In [old Windows], "panes" are defined to have the same border style as a window, which has a raised appearance. - In [NeXT], a drag point usually had an innie, whether the line in a slider or the circle in a scroller; I can also hide and show the favorites bar in Workspace by dragging on a circular "grip spot" - In [old Mac], drag handles for things usually had a "grip track" of parallel lines. - [OSX] kept that, but the "Source List" part of the Finder still had the circle grip for a time the same way Workspace did [lolbinarycat's idea]: https://github.com/rust-lang/rust/pull/139420 [old Windows]: https://archive.org/details/windowsinterface00micr/page/n9/mode/2up [old Mac]: https://archive.org/details/apple-hig/1996_Human_Interface_Guidelines_for_Mac_OS_8_%28WWDC_Release%29/page/16/mode/2up [NeXT]: https://archive.org/details/apple-hig/1993%20NeXTSTEP%20User%20Interface%20Guidelines%20-%20Release%203/page/145/mode/2up [OSX]: https://dn721903.ca.archive.org/0/items/apple-hig/MacOSX_HIG_2005_09_08.pdf#page=267 --- src/librustdoc/html/static/css/noscript.css | 6 ++ src/librustdoc/html/static/css/rustdoc.css | 56 ++++++++++++++++--- .../sidebar-resize-close-popover.goml | 4 +- tests/rustdoc-gui/sidebar-resize-setting.goml | 2 +- tests/rustdoc-gui/sidebar-resize.goml | 6 +- tests/rustdoc-gui/sidebar.goml | 18 +++--- 6 files changed, 69 insertions(+), 23 deletions(-) diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 477a79d63e9..03201336cde 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/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,8 @@ 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-img-filter: opacity(66%); + --sidebar-resizer-img-hover-filter: none; } /* End theme: light */ @@ -149,6 +152,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 +248,8 @@ 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-img-filter: opacity(66%); + --sidebar-resizer-img-hover-filter: none; } /* End theme: dark */ } diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index aa8df35258d..a1b0ee7a8ab 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/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,32 @@ 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: center; +} + +.sidebar-resizer::after { + content: url('data:image/svg+xml,\ + \ + \ + \ + \ + \ + \ + \ + '); + width: 8px; + height: 24px; + filter: var(--sidebar-resizer-img-filter); +} +.sidebar-resizer:hover::after { + filter: var(--sidebar-resizer-img-hover-filter); } .rustdoc.src .sidebar-resizer { @@ -540,7 +563,7 @@ img { } .sidebar-resizing * { - cursor: col-resize !important; + cursor: ew-resize !important; } .sidebar-resizing .sidebar { @@ -558,7 +581,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 +598,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,8 +612,10 @@ img { margin-left: -140px; border-left: none; } -.sidebar-resizer.active:before { +.sidebar-resizer.active::before { border-left: solid 2px var(--sidebar-resizer-active); + margin-left: 8px; + padding-left: 1px; display: block; height: 100%; content: ""; @@ -2510,6 +2539,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 +2924,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 +3017,8 @@ 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-img-filter: opacity(66%); + --sidebar-resizer-img-hover-filter: none; } /* End theme: light */ @@ -2998,6 +3032,7 @@ by default. --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); @@ -3093,6 +3128,8 @@ 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-img-filter: opacity(66%); + --sidebar-resizer-img-hover-filter: none; } /* End theme: dark */ @@ -3110,6 +3147,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: #000; --code-block-background-color: #191f26; --scrollbar-track-background-color: transparent; --scrollbar-thumb-background-color: #5c6773; @@ -3205,6 +3243,8 @@ 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-img-filter: opacity(66%); + --sidebar-resizer-img-hover-filter: none; } :root[data-theme="ayu"] h1, diff --git a/tests/rustdoc-gui/sidebar-resize-close-popover.goml b/tests/rustdoc-gui/sidebar-resize-close-popover.goml index 2a8fbac855e..2d26caf1a39 100644 --- a/tests/rustdoc-gui/sidebar-resize-close-popover.goml +++ b/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 diff --git a/tests/rustdoc-gui/sidebar-resize-setting.goml b/tests/rustdoc-gui/sidebar-resize-setting.goml index 32471f9db4e..e346fe6aeac 100644 --- a/tests/rustdoc-gui/sidebar-resize-setting.goml +++ b/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 diff --git a/tests/rustdoc-gui/sidebar-resize.goml b/tests/rustdoc-gui/sidebar-resize.goml index 543d5d390c7..64b0a23757a 100644 --- a/tests/rustdoc-gui/sidebar-resize.goml +++ b/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"}) diff --git a/tests/rustdoc-gui/sidebar.goml b/tests/rustdoc-gui/sidebar.goml index 38160cc49d0..dd33d20ad2e 100644 --- a/tests/rustdoc-gui/sidebar.goml +++ b/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,13 +149,13 @@ 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 " 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"}) @@ -163,10 +163,10 @@ 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" From 8780d5fd6e9469d36f478736dde1e12d2d6aabe6 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Tue, 8 Apr 2025 18:01:23 -0700 Subject: [PATCH 2/3] rustdoc: add tooltip to resize track --- src/librustdoc/html/templates/page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 5ef376f4acb..7af99e7097c 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -114,7 +114,7 @@ {% endif %} {{ sidebar|safe }} {# #} -
{# #} +
{# #}
{% if page.css_class != "src" %}
{% endif %} {# defined in storage.js to avoid duplicating complex UI across every page #} From 34c1b25ae70ae93b995c9cfb750aaed4a91f8899 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 10 Apr 2025 21:44:35 -0700 Subject: [PATCH 3/3] rustdoc: use a different style of grip track --- src/librustdoc/html/static/css/noscript.css | 6 +-- src/librustdoc/html/static/css/rustdoc.css | 55 +++++++++++---------- 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 03201336cde..40b17c7307f 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -136,8 +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-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; + --sidebar-resizer-shadow: #ccc; } /* End theme: light */ @@ -248,8 +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-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; + --sidebar-resizer-shadow: #000; } /* End theme: dark */ } diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index a1b0ee7a8ab..4b138ce722a 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1,5 +1,5 @@ +/* ignore-tidy-filelength */ /* -// 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 @@ -522,25 +522,33 @@ img { left: var(--desktop-sidebar-width); display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; } - .sidebar-resizer::after { - content: url('data:image/svg+xml,\ - \ - \ - \ - \ - \ - \ - \ - '); + 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; - filter: var(--sidebar-resizer-img-filter); -} -.sidebar-resizer:hover::after { - filter: var(--sidebar-resizer-img-hover-filter); + image-rendering: crisp-edges; } .rustdoc.src .sidebar-resizer { @@ -614,8 +622,6 @@ img { } .sidebar-resizer.active::before { border-left: solid 2px var(--sidebar-resizer-active); - margin-left: 8px; - padding-left: 1px; display: block; height: 100%; content: ""; @@ -3017,8 +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-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; + --sidebar-resizer-shadow: #ccc; } /* End theme: light */ @@ -3032,7 +3037,7 @@ by default. --settings-button-border-focus: #ffb900; --sidebar-background-color: #505050; --sidebar-background-color-hover: #676767; - --sidebar-border-color: #2A2A2A; + --sidebar-border-color: #999; --code-block-background-color: #2A2A2A; --scrollbar-track-background-color: #717171; --scrollbar-thumb-background-color: rgba(32, 34, 37, .6); @@ -3128,8 +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-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; + --sidebar-resizer-shadow: #000; } /* End theme: dark */ @@ -3147,7 +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: #000; + --sidebar-border-color: #5c6773; --code-block-background-color: #191f26; --scrollbar-track-background-color: transparent; --scrollbar-thumb-background-color: #5c6773; @@ -3243,8 +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-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; + --sidebar-resizer-shadow: #000; } :root[data-theme="ayu"] h1,