From 6d786b42f6727e1c59198532eb97d50009f097b8 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 7 Apr 2025 15:34:03 +0200 Subject: [PATCH 1/5] Make the source content expand when the sidebade is collapsed --- templates/style/style.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/templates/style/style.scss b/templates/style/style.scss index 99b50fb8c..8879caf30 100644 --- a/templates/style/style.scss +++ b/templates/style/style.scss @@ -453,6 +453,7 @@ div.package-sheet-container { } $sidebar-side-padding: 10px; +$collapsed-side-menu-width: 46px; div.package-page-container { padding-bottom: 50px; @@ -889,7 +890,7 @@ ul.pure-menu-list { } #side-menu.collapsed { - max-width: 46px; + max-width: $collapsed-side-menu-width; ul { li:not(.toggle-source), .text { @@ -907,6 +908,10 @@ ul.pure-menu-list { } } + #side-menu.collapsed + #source-code-container { + width: calc(100% - #{$collapsed-side-menu-width}); + } + #source-warning { height: 100%; } From 331df81672be275a4582d419dea1d18e9d835a64 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 7 Apr 2025 15:37:37 +0200 Subject: [PATCH 2/5] Fix pointer cursor on side menu button --- templates/style/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/templates/style/style.scss b/templates/style/style.scss index 8879caf30..2f48f6988 100644 --- a/templates/style/style.scss +++ b/templates/style/style.scss @@ -819,6 +819,10 @@ ul.pure-menu-list { cursor: pointer; border: 1px solid var(--color-border); display: none; + + button { + cursor: pointer; + } } } From 71c5b5135d7c65921434da6d0cc70b8ff0cec20f Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 7 Apr 2025 15:53:29 +0200 Subject: [PATCH 3/5] Add side menu button border color change on hover --- templates/style/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/templates/style/style.scss b/templates/style/style.scss index 2f48f6988..840f201d0 100644 --- a/templates/style/style.scss +++ b/templates/style/style.scss @@ -820,6 +820,10 @@ ul.pure-menu-list { border: 1px solid var(--color-border); display: none; + &:hover { + border-color: var(--color-standard); + } + button { cursor: pointer; } From abe2edcb0d7e54a698d723545702cd4c055fbe51 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 7 Apr 2025 15:57:13 +0200 Subject: [PATCH 4/5] Ensure that the "documentation link button" is always on one line --- templates/style/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/style/style.scss b/templates/style/style.scss index 840f201d0..ebdb00fe0 100644 --- a/templates/style/style.scss +++ b/templates/style/style.scss @@ -736,6 +736,7 @@ div.docsrs-package-container { padding: 10px; border: 1px solid var(--color-doc-link-background); border-radius: 5px; + min-width: fit-content; .fas { margin-top: 2px; From 8c0aa1e3f19eea80f8853357ecf27e47c913f5c0 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 7 Apr 2025 17:03:14 +0200 Subject: [PATCH 5/5] Add GUI test for docs.rs source code page --- gui-tests/source-viewer.goml | 39 ++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 gui-tests/source-viewer.goml diff --git a/gui-tests/source-viewer.goml b/gui-tests/source-viewer.goml new file mode 100644 index 000000000..89de3aa2a --- /dev/null +++ b/gui-tests/source-viewer.goml @@ -0,0 +1,39 @@ +// Checks that the docs.rs source code viewer page looks as expected. +go-to: |DOC_PATH| + "/crate/sysinfo/latest/source/Cargo.toml" +// We enforce a theme to ensure that the color checks will succeed. +set-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"} +reload: + +// Bugs appears when window size is at maximum given width so we set it. +set-window-size: (800, 800) + +// First we ensure that the "documentation link button" is taking only one line. +store-size: (".doc-link > span", {"height": icon_height}) +store-size: (".doc-link", {"height": button_height}) +assert-css: (".doc-link", {"padding-top": "10px", "padding-bottom": "10px"}) +// As confirmed just above, there is 20px of padding, so we subtract it from the check below. +assert: |button_height| - 20 < |icon_height| * 2 + +// We check that hovering the side menu toggle will update the border color and also change the +// mouse cursor. +assert-css: (".toggle-source", {"border-color": "#4e4e4e", "cursor": "pointer"}) +assert-css: (".toggle-source > button", {"cursor": "pointer"}) +move-cursor-to: ".toggle-source > button" +assert-css: (".toggle-source:hover", {"border-color": "#c0c0c0", "cursor": "pointer"}) +assert-css: (".toggle-source >button:hover", {"cursor": "pointer"}) + +store-size: ("#side-menu", {"width": side_menu_width}) +store-size: ("#source-code-container", {"width": source_width}) + +// Now we hide the side menu. +click: ".toggle-source > button" +wait-for: "#side-menu.collapsed" + +store-size: ("#side-menu", {"width": side_menu_width2}) +store-size: ("#source-code-container", {"width": source_width2}) + +// The elements width should have changed (smaller side menu and bigger source). +assert: |side_menu_width| > |side_menu_width2| +assert: |source_width| < |source_width2| +// The total width should not have changed. +assert: |source_width2| + |side_menu_width2| == |source_width| + |side_menu_width|