Mirrors/rust
1
0
Fork 0
mirror of https://github.com/rust-lang/rust.git synced 2026-04-27 18:57:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Rollup merge of #139562 - notriddle:notriddle/ew-resize, r=GuillaumeGomez

Browse Source 
rustdoc: add a handle that makes sidebar resizing more obvious

This aims to make the resizable sidebars more obvious

Preview: <https://notriddle.com/rustdoc-html-demo-12/sidebar-resize-handle/std/index.html>

![image](https://github.com/user-attachments/assets/d4d70982-8045-4fed-818a-982108b0d3b3)

![image](https://github.com/user-attachments/assets/4aaa3663-19f3-4e04-89c6-53db0ddb72ed)

![image](https://github.com/user-attachments/assets/3f612c5b-6be1-4383-801a-067c87425eb9)

This change is based on some discussion on [lolbinarycat's idea], but with a more "traditional" design. Specifically, while very few systems use exactly this design, most of them use [a skeumorph](https://ux.stackexchange.com/questions/80463/what-do-the-3-close-horizontal-bars-not-hamburger-menu-represent-and-what-is-t/80591#80591) of a grip texture:

- This design is similar to the one used in the Rust Playground, and almost identical to UX StackExchange:

  <details><img src="https://github.com/user-attachments/assets/39a6bb69-4895-4fd0-87da-b87913bc7309"></details>

  <details><img src="https://github.com/user-attachments/assets/a41942e1-651b-410b-b855-2aafe8fe54f4"></details>

- In Jira, resizable sidebars have a stack of four dots, but only in one row.

  <details><img src="https://github.com/user-attachments/assets/13047998-02bf-47e6-b796-16f393f870b0"></details>

- In The GIMP, resizable sidebars have a stack of three dots.

  <details><img src="https://github.com/user-attachments/assets/138f5c21-3069-4bbe-b306-0bb9a4bf0318"></details>

- In [old Windows], "panes" are defined to have the same border style as a window, which has a raised appearance. To evoke this, the PR adds a lightweight "shadow" border, darker than the sidebar itself

  <details><img src="https://github.com/user-attachments/assets/301da4b8-6c48-4131-b741-1689af84670a"></details>

- 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"

  <details><img src="https://github.com/user-attachments/assets/b13c2d30-a3a8-4672-90fa-58c1fdf19f42"></details>

- In [old Mac], drag handles for things usually had a "grip track" of parallel lines.

  <details><img src="https://github.com/user-attachments/assets/1fbecc67-ffbc-4ed6-a8c5-a9ff085638db"></details>

  *This design is far closer to old Mac than anything else*, though they've put it in the bottom corner instead of the middle.

- [OSX] kept that, but the "Source List" part of the Finder still had the circle grip for a time the same way Workspace did (resulting in an odd mishmash, if you compare the source list sidebar with the other grip tracks embedded in the scrollbars).

  <details><img src="https://github.com/user-attachments/assets/551b8f9d-2dd8-4291-917f-dc88741a2b97"></details>

[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
This commit is contained in:
Matthias Krüger
2025-05-10 16:26:01 +02:00
committed by GitHub
parent c6b9253ad5 e6e52063df
commit 2bce1ad86a
7 changed files with 56 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/librustdoc/html/static/css/noscript.css
+2
View File
@@ -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);
src/librustdoc/html/static/css/rustdoc.css
+38 -14
View File
@@ -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;
src/librustdoc/html/templates/page.html
+1 -1
View File
@@ -114,7 +114,7 @@
{% endif %}
{{ sidebar|safe }}
</nav> {# #}
<div class="sidebar-resizer"></div> {# #}
<div class="sidebar-resizer" title="Drag to resize sidebar"></div> {# #}
<main>
{% if page.css_class != "src" %}<div class="width-limiter">{% endif %}
{# defined in storage.js to avoid duplicating complex UI across every page #}
tests/rustdoc-gui/sidebar-resize-close-popover.goml
+2 -2
View File
@@ -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
tests/rustdoc-gui/sidebar-resize-setting.goml
+1 -1
View File
@@ -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
tests/rustdoc-gui/sidebar-resize.goml
+3 -3
View File
@@ -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"})
tests/rustdoc-gui/sidebar.goml
+9 -9
View File
@@ -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 <module>" 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"