diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 390e812772a70..e63502160faed 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -11,7 +11,7 @@ rules. #copy-path, #sidebar-button, .sidebar-resizer { /* It requires JS to work so no need to display it in this case. */ - display: none; + display: none !important; } nav.sub { diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 0d59d81f62de6..ecb800756954d 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -391,6 +391,7 @@ img { .rustdoc.src .sidebar { flex-basis: 50px; + width: 50px; border-right: 1px solid; overflow-x: hidden; /* The sidebar is by default hidden */ @@ -414,14 +415,14 @@ img { } .rustdoc.src .sidebar-resizer { - /* src pages have separate closed flag */ - display: none; + /* when closed, place resizer glow on top of the normal src sidebar border (no need to + worry about sidebar) */ + left: 49px; } .src-sidebar-expanded .src .sidebar-resizer { /* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer to right of it */ - display: block; left: var(--src-sidebar-width); } @@ -437,7 +438,7 @@ img { } .sidebar-resizing .sidebar { - position: fixed !important; + position: fixed; z-index: 100; } .sidebar-resizing > body { @@ -491,21 +492,20 @@ img { background-color: var(--sidebar-background-color); } -.src .sidebar { - position: absolute; - top: 0; - bottom: 0; - left: -1000px; +.src .sidebar > * { + visibility: hidden; } .src-sidebar-expanded .src .sidebar { - position: sticky; - left: 0; overflow-y: auto; flex-basis: var(--src-sidebar-width); width: var(--src-sidebar-width); } +.src-sidebar-expanded .src .sidebar > * { + visibility: visible; +} + #all-types { margin-top: 1em; } @@ -1561,15 +1561,9 @@ a.tooltip:hover::after { z-index: 1; } .src #sidebar-button { - left: 12px; + left: 8px; z-index: 101; } -.src .search-form { - margin-left: 40px; -} -.src-sidebar-expanded .src .search-form { - margin-left: 0; -} #settings-menu > a, #help-button > a, #sidebar-button > a { display: flex; align-items: center; @@ -1879,6 +1873,9 @@ in src-script.js and main.js height: 100vh; border: 0; } + .src .search-form { + margin-left: 40px; + } .sidebar.shown, .src-sidebar-expanded .src .sidebar, diff --git a/src/librustdoc/html/static/js/src-script.js b/src/librustdoc/html/static/js/src-script.js index 2a3a6e7afb398..3003f4c150338 100644 --- a/src/librustdoc/html/static/js/src-script.js +++ b/src/librustdoc/html/static/js/src-script.js @@ -2,7 +2,7 @@ /* global srcIndex */ // Local js definitions: -/* global addClass, getCurrentValue, onEachLazy, removeClass, browserSupportsHistoryApi */ +/* global addClass, onEachLazy, removeClass, browserSupportsHistoryApi */ /* global updateLocalStorage, getVar */ "use strict"; diff --git a/tests/rustdoc-gui/huge-logo.goml b/tests/rustdoc-gui/huge-logo.goml index bfc24c3260d16..e4e5cb1ec7413 100644 --- a/tests/rustdoc-gui/huge-logo.goml +++ b/tests/rustdoc-gui/huge-logo.goml @@ -11,13 +11,3 @@ set-window-size: (400, 600) // offset = size + margin assert-property: (".mobile-topbar .logo-container", {"offsetWidth": "55", "offsetHeight": 45}) assert-property: (".mobile-topbar .logo-container img", {"offsetWidth": "35", "offsetHeight": 35}) - -go-to: "file://" + |DOC_PATH| + "/src/huge_logo/lib.rs.html" - -set-window-size: (1280, 1024) -assert-property: (".sub-logo-container", {"offsetWidth": "60", "offsetHeight": 60}) - -set-window-size: (400, 600) -// 43 because 35px + 8px of margin -assert-css: (".sub-logo-container > img", {"margin-bottom": "8px"}) -assert-property: (".sub-logo-container", {"offsetWidth": "35", "offsetHeight": 43}) diff --git a/tests/rustdoc-gui/rust-logo.goml b/tests/rustdoc-gui/rust-logo.goml index 696cab34dcc10..dcf3d6bab6382 100644 --- a/tests/rustdoc-gui/rust-logo.goml +++ b/tests/rustdoc-gui/rust-logo.goml @@ -11,12 +11,6 @@ define-function: ( set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"} reload: assert-css: (".rust-logo", {"filter": |filter|}) - // Going to the source code page. - go-to: "file://" + |DOC_PATH| + "/src/staged_api/lib.rs.html" - // Changing theme (since it's local files, the local storage works by folder). - set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"} - reload: - assert-css: (".rust-logo", {"filter": |filter|}) // Now we check that the non-rust logos don't have a CSS filter set. go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html" // Changing theme on the new page (again...). @@ -31,10 +25,6 @@ define-function: ( assert-false: ".rust-logo" assert-false: ".logo-container" assert-false: ".sub-logo-container" - go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html" - assert-false: ".rust-logo" - assert-false: ".logo-container" - assert-false: ".sub-logo-container" }, ) diff --git a/tests/rustdoc-gui/sidebar-source-code-display.goml b/tests/rustdoc-gui/sidebar-source-code-display.goml index 44844b5221961..00dd3b974dca3 100644 --- a/tests/rustdoc-gui/sidebar-source-code-display.goml +++ b/tests/rustdoc-gui/sidebar-source-code-display.goml @@ -9,10 +9,10 @@ assert-css: ("#sidebar-button", {"display": "none"}) javascript: true reload: wait-for: "#src-sidebar" -assert-css: ("#src-sidebar", {"position": "absolute", "left": "-1000px"}) +assert-css: (".src .sidebar > *", {"visibility": "hidden"}) // Let's expand the sidebar now. -click: "#src-sidebar" -wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"}) +click: "#sidebar-button" +wait-for-css: (".src .sidebar > *", {"visibility": "visible"}) // We now check that opening the sidebar and clicking a link will leave it open. // The behavior here on desktop is different than the behavior on mobile, @@ -32,12 +32,11 @@ define-function: ( "check-colors", ( theme, color, color_hover, background, background_hover, background_toggle, - background_toggle_hover, ), block { set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"} reload: - wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"}) + wait-for-css: (".src .sidebar > *", {"visibility": "visible"}) assert-css: ( "#src-sidebar details[open] > .files a.selected", {"color": |color_hover|, "background-color": |background|}, @@ -108,6 +107,7 @@ call-function: ("check-colors", { "color_hover": "#000", "background": "#fff", "background_hover": "#e0e0e0", + "background_toggle": "rgba(0, 0, 0, 0)", }) call-function: ("check-colors", { "theme": "dark", @@ -115,6 +115,7 @@ call-function: ("check-colors", { "color_hover": "#ddd", "background": "#333", "background_hover": "#444", + "background_toggle": "rgba(0, 0, 0, 0)", }) call-function: ("check-colors", { "theme": "ayu", @@ -122,6 +123,7 @@ call-function: ("check-colors", { "color_hover": "#ffb44c", "background": "#14191f", "background_hover": "#14191f", + "background_toggle": "rgba(0, 0, 0, 0)", }) // Now checking on mobile devices. diff --git a/tests/rustdoc-gui/sidebar-source-code.goml b/tests/rustdoc-gui/sidebar-source-code.goml index 9e5438a4f001d..d7de43a2243ab 100644 --- a/tests/rustdoc-gui/sidebar-source-code.goml +++ b/tests/rustdoc-gui/sidebar-source-code.goml @@ -52,12 +52,12 @@ wait-for: "#sidebar-button" // We check that the sidebar isn't expanded and has the expected width. assert-css: ("nav.sidebar", {"width": "50px"}) // We now click on the button to expand the sidebar. -click: (10, 10) +click: "#sidebar-button" // We wait for the sidebar to be expanded. wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"}) assert-css: (".src-sidebar-expanded nav.sidebar a", {"font-size": "14px"}) // We collapse the sidebar. -click: (10, 10) +click: "#sidebar-button" // We ensure that the class has been removed. wait-for: "html:not(.src-sidebar-expanded)" assert: "nav.sidebar" @@ -65,7 +65,7 @@ assert: "nav.sidebar" // Checking that only the path to the current file is "open". go-to: "file://" + |DOC_PATH| + "/src/lib2/another_folder/sub_mod/mod.rs.html" // First we expand the sidebar again. -click: (10, 10) +click: "#sidebar-button" // We wait for the sidebar to be expanded. wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"}) assert: "//*[@class='dir-entry' and @open]/*[text()='lib2']" diff --git a/tests/rustdoc-gui/source-code-page.goml b/tests/rustdoc-gui/source-code-page.goml index 1a4600ab0e44d..4e68a9f8165c1 100644 --- a/tests/rustdoc-gui/source-code-page.goml +++ b/tests/rustdoc-gui/source-code-page.goml @@ -146,14 +146,13 @@ define-function: ( ) } ) -store-property: ("#src-sidebar > .title", { +store-property: (".src-sidebar-title", { "offsetHeight": source_sidebar_title_height, "offsetTop": source_sidebar_title_y, }) call-function: ("check-sidebar-dir-entry", { "x": 0, - // border + margin = 6 - "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, + "y": |source_sidebar_title_y| + |source_sidebar_title_height|, }) // Check the search form @@ -175,13 +174,13 @@ assert-property: ("#main-content", {"offsetTop": 50}) // 8 = 50 - 34 - 8 // Check the sidebar directory entries have a marker and spacing (tablet). -store-property: ("#src-sidebar > .title", { +store-property: (".src-sidebar-title", { "offsetHeight": source_sidebar_title_height, "offsetTop": source_sidebar_title_y, }) call-function: ("check-sidebar-dir-entry", { "x": 0, - "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, + "y": |source_sidebar_title_y| + |source_sidebar_title_height|, }) // Tiny, phone mobile gets a different display where the logo is stacked on top. @@ -189,21 +188,11 @@ set-window-size: (450, 700) assert-css: ("nav.sub", {"flex-direction": "column"}) // Check the sidebar directory entries have a marker and spacing (phone). -store-property: ("#src-sidebar > .title", { +store-property: (".src-sidebar-title", { "offsetHeight": source_sidebar_title_height, "offsetTop": source_sidebar_title_y, }) call-function: ("check-sidebar-dir-entry", { "x": 0, - "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, + "y": |source_sidebar_title_y| + |source_sidebar_title_height|, }) - -// The logo is not present on this page. -assert-false: ".sub-logo-container > img" - -// Check the staged-api page instead, which does. -// Now we check that the logo has a bottom margin so it's not stuck to the search input. -go-to: "file://" + |DOC_PATH| + "/src/staged_api/lib.rs.html" -assert-css: (".sub-logo-container > img", {"margin-bottom": "8px"}) -store-property: (".sub-logo-container", {"clientHeight": logo_height}) -assert-position: (".search-form", {"y": |logo_height| + 8})