diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 477a79d63e9..40b17c7307f 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,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 */ } diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 74d23b3143f..2dc03eca416 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,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, 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 #} 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"