diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 477a79d63e948..a3c6bf9816169 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); @@ -149,6 +150,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); diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index f838f3f1106fd..a81d5c9c49b4b 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: @@ -496,12 +498,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; @@ -515,12 +518,27 @@ 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; + color: var(--right-side-color); +} +.sidebar-resizer::before { + content: ""; + border-right: dotted 2px currentColor; + width: 2px; + height: 12px; +} +.sidebar-resizer::after { + content: ""; + border-right: dotted 2px currentColor; + width: 2px; + height: 16px; } .rustdoc.src .sidebar-resizer { @@ -543,11 +561,12 @@ img { } .sidebar-resizing * { - cursor: col-resize !important; + cursor: ew-resize !important; } .sidebar-resizing .sidebar { position: fixed; + border-right: solid 2px var(--sidebar-resizer-active); } .sidebar-resizing > body { padding-left: var(--resizing-sidebar-width); @@ -561,8 +580,9 @@ 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); + color: var(--sidebar-resizer-hover); } .src-sidebar-expanded .rustdoc.src .sidebar-resizer:hover, @@ -578,21 +598,20 @@ 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 { /* make the resize tool bigger when actually resizing, to avoid :hover styles on other stuff while resizing */ padding: 0 140px; - width: 2px; + width: calc(140px + 140px + 9px + 2px); margin-left: -140px; border-left: none; -} -.sidebar-resizer.active::before { - border-left: solid 2px var(--sidebar-resizer-active); - display: block; - height: 100%; - content: ""; + color: var(--sidebar-resizer-active); } .sidebar, .mobile-topbar, .sidebar-menu-toggle, @@ -2509,6 +2528,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, @@ -2897,6 +2918,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); @@ -3002,6 +3024,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); @@ -3114,6 +3137,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; diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 5ef376f4acbc9..7af99e7097c37 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -114,7 +114,7 @@

Files

{# #} {% 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 2a8fbac855e97..2d26caf1a39ef 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 32471f9db4e26..e346fe6aeac0b 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 543d5d390c720..64b0a23757ac3 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 9c66b84165f88..c0fe240e2bed2 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"