Skip to content

rustdoc: add a handle that makes sidebar resizing more obvious #139562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 10, 2025

Conversation

notriddle
Copy link
Contributor

@notriddle notriddle commented Apr 9, 2025

This aims to make the resizable sidebars more obvious

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

image

image

image

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 of a grip texture:

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

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

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

  • 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

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

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

    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).

@rustbot
Copy link
Collaborator

rustbot commented Apr 9, 2025

r? @GuillaumeGomez

rustbot has assigned @GuillaumeGomez.
They will have a look at your PR within the next two weeks and either review your PR or reassign to another reviewer.

Use r? to explicitly pick a reviewer

@rustbot rustbot added S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. T-rustdoc-frontend Relevant to the rustdoc-frontend team, which will review and decide on the web UI/UX output. labels Apr 9, 2025
@rustbot
Copy link
Collaborator

rustbot commented Apr 9, 2025

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez, @jsha

Some changes occurred in GUI tests.

cc @GuillaumeGomez

@notriddle
Copy link
Contributor Author

cc @lolbinarycat

@rust-log-analyzer

This comment has been minimized.

@notriddle notriddle force-pushed the notriddle/ew-resize branch from 036eee8 to 8780d5f Compare April 9, 2025 05:16
@GuillaumeGomez
Copy link
Member

Can you host a page with this change please?

@notriddle
Copy link
Contributor Author

@lolbinarycat
Copy link
Contributor

Struggling to see the handle as anything other than 4 pokéballs.

image

@lolbinarycat
Copy link
Contributor

here's an attempt using a radial gradient: svg

@GuillaumeGomez
Copy link
Member

I'm also not a big fan. What about no gradient, just plain dots? Also: I like how gimp implemented it, but it requires to have a right border, not sure if it's a good idea or not...

@notriddle
Copy link
Contributor Author

Also: I like how gimp implemented it,

Three dots stacked like that is an ellipses, and could be misinterpreted as a menu button.

here's an attempt using a radial gradient

I would like to avoid using unsubtle Aqua/Aero-ish gradients. They look out of place in Rustdoc, and there's plenty of good cel shading examples to pull from instead.

A radial gradient isn't a bad idea, though. Maybe something like this?

image

image

@lolbinarycat
Copy link
Contributor

The problem I have with the cell shading version is it leads to some pretty bad aliasing on low-resolution screens.

part of why i'm tempted to use a text-based solution is because text rendering is already optimized for looking good at low resolutions. we would of course need to put in a bit of effort to make sure it doesn't mess too much with screen readers.

@notriddle
Copy link
Contributor Author

notriddle commented Apr 10, 2025

I can usually address pixel aliasing by making it lower contrast and also making it bigger. It's important to do both, otherwise things get hard to see.

I don't like making it much bigger, because this feature isn't important enough to make it so prominent, but I could make it bigger without actually making it bigger if I just went with the NeXT/OSX approach and called it good. I could use one spot instead of four.

image

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="12" height="12"> <radialGradient r="1.25" cx="0.5" id="y" cy="0.25"> <stop offset="0.5" stop-color="%23aaa"/><stop offset="0.5" stop-color="%23ccc"/> </radialGradient> <circle cy="4" cx="4" r="2.5" stroke-width="2.5" stroke="url(%23y)" fill="rgba(0, 0, 0, 0.25)"/>%20%20 <radialGradient id="x" r="1.25" cx="0.5" cy="0.75"> <stop offset="0.5" stop-color="transparent"/><stop offset="0.5" stop-color="%23777"/> </radialGradient><circle cy="4" cx="4" stroke="url(%23x)" r="2.5" stroke-width="2.5" fill="none"/></svg>

@lolbinarycat
Copy link
Contributor

what about a handle based on the double-stroke convention?

image

@notriddle
Copy link
Contributor Author

Yes, that's a good idea.

@lolbinarycat
Copy link
Contributor

lolbinarycat commented Apr 11, 2025

BTW, i finally found a solid inspiration for my original arrow-based design: blender

blender screenshot

in this case it's the faint upward pointing chevron.

(at least i assume that's a resize handle, i haven't used blender in a while, and right now I can't check because it isn't launching)

@GuillaumeGomez
Copy link
Member

what about a handle based on the double-stroke convention?

image

It's by far my preferred solution too. :)

@GuillaumeGomez
Copy link
Member

Renders a bit weird in dark mode:

image

But otherwise I see this as a pure improvement over the current situation. So let's approve it and we can always improve the handle look later on.

Thanks!

@bors r+ rollup

@bors
Copy link
Collaborator

bors commented May 9, 2025

📌 Commit 34c1b25 has been approved by GuillaumeGomez

It is now in the queue for this repository.

@bors bors added S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. and removed S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. labels May 9, 2025
GuillaumeGomez added a commit to GuillaumeGomez/rust that referenced this pull request May 9, 2025
…uillaumeGomez

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/9602380d-ad92-4b41-8070-e16659d7d445)

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 of "grip notching"](https://ux.stackexchange.com/questions/80463/what-do-the-3-close-horizontal-bars-not-hamburger-menu-represent-and-what-is-t/80591#80591):

- In Jira, resizable sidebars have a stack of four dots.

  <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]: rust-lang#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
GuillaumeGomez added a commit to GuillaumeGomez/rust that referenced this pull request May 9, 2025
…uillaumeGomez

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/9602380d-ad92-4b41-8070-e16659d7d445)

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 of "grip notching"](https://ux.stackexchange.com/questions/80463/what-do-the-3-close-horizontal-bars-not-hamburger-menu-represent-and-what-is-t/80591#80591):

- In Jira, resizable sidebars have a stack of four dots.

  <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]: rust-lang#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
@GuillaumeGomez
Copy link
Member

Oh indeed. Like this one the best!

@GuillaumeGomez
Copy link
Member

Then please use this one, add some screenshots and then r=me. I'd really like this improvement to be merged. :)

@bors r-

@bors bors added S-waiting-on-author Status: This is awaiting some action (such as code changes or more information) from the author. and removed S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. labels May 9, 2025
@lolbinarycat
Copy link
Contributor

The playground is nice, but for completeness I'll add another point of reference: discourse

specifically, the handle that lets you resize the comment box.

discourse resize bar

@notriddle notriddle force-pushed the notriddle/ew-resize branch 2 times, most recently from 9b9f23f to 1a9e469 Compare May 9, 2025 19:34
notriddle added 2 commits May 9, 2025 12:38
This change is based on some discussion on [lolbinarycat's idea],
but with a more "traditional" design. Specifically, this is the
closest thing I could find to a consensus across many systems I
looked at for inspiration:

- In Jira, resizable sidebars have a stack of four dots.
- In The GIMP, resizable sidebars have a stack of three dots.
- In [old Windows], "panes" are defined to have the same border
  style as a window, which has a raised appearance.
- 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"
- In [old Mac], drag handles for things usually had a "grip track"
  of parallel lines.
- [OSX] kept that, but the "Source List" part of the Finder still had
  the circle grip for a time the same way Workspace did

[lolbinarycat's idea]: rust-lang#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
@notriddle notriddle force-pushed the notriddle/ew-resize branch from 1a9e469 to 4cc6dca Compare May 9, 2025 19:40
@notriddle notriddle force-pushed the notriddle/ew-resize branch from 4cc6dca to e6e5206 Compare May 9, 2025 19:57
@notriddle
Copy link
Contributor Author

@bors r=GuillaumeGomez

@bors
Copy link
Collaborator

bors commented May 9, 2025

📌 Commit e6e5206 has been approved by GuillaumeGomez

It is now in the queue for this repository.

@bors bors added S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. and removed S-waiting-on-author Status: This is awaiting some action (such as code changes or more information) from the author. labels May 9, 2025
GuillaumeGomez added a commit to GuillaumeGomez/rust that referenced this pull request May 9, 2025
…uillaumeGomez

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]: rust-lang#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
Zalathar added a commit to Zalathar/rust that referenced this pull request May 10, 2025
…uillaumeGomez

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]: rust-lang#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
bors added a commit to rust-lang-ci/rust that referenced this pull request May 10, 2025
Rollup of 10 pull requests

Successful merges:

 - rust-lang#129334 (Implement (part of) ACP 429: add `DerefMut` to `Lazy[Cell/Lock]`)
 - rust-lang#135015 (Partially stabilize LoongArch target features)
 - rust-lang#138736 (Sanitizers target modificators)
 - rust-lang#139562 (rustdoc: add a handle that makes sidebar resizing more obvious)
 - rust-lang#140151 (remove intrinsics::drop_in_place)
 - rust-lang#140660 (remove 'unordered' atomic intrinsics)
 - rust-lang#140783 (Update documentation of OnceLock::get_or_init.)
 - rust-lang#140789 (Update hermit-abi to 0.5.1)
 - rust-lang#140792 (Use intrinsics for `{f16,f32,f64,f128}::{minimum,maximum}` operations)
 - rust-lang#140862 (Enable non-leaf Frame Pointers for Arm64EC Windows)

r? `@ghost`
`@rustbot` modify labels: rollup
matthiaskrgr added a commit to matthiaskrgr/rust that referenced this pull request May 10, 2025
…uillaumeGomez

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]: rust-lang#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
bors added a commit to rust-lang-ci/rust that referenced this pull request May 10, 2025
…iaskrgr

Rollup of 8 pull requests

Successful merges:

 - rust-lang#129334 (Implement (part of) ACP 429: add `DerefMut` to `Lazy[Cell/Lock]`)
 - rust-lang#139562 (rustdoc: add a handle that makes sidebar resizing more obvious)
 - rust-lang#140151 (remove intrinsics::drop_in_place)
 - rust-lang#140660 (remove 'unordered' atomic intrinsics)
 - rust-lang#140783 (Update documentation of OnceLock::get_or_init.)
 - rust-lang#140789 (Update hermit-abi to 0.5.1)
 - rust-lang#140792 (Use intrinsics for `{f16,f32,f64,f128}::{minimum,maximum}` operations)
 - rust-lang#140879 (1.87.0 release notes: remove nonsensical `~` operator)

r? `@ghost`
`@rustbot` modify labels: rollup
bors added a commit to rust-lang-ci/rust that referenced this pull request May 10, 2025
…iaskrgr

Rollup of 7 pull requests

Successful merges:

 - rust-lang#129334 (Implement (part of) ACP 429: add `DerefMut` to `Lazy[Cell/Lock]`)
 - rust-lang#139562 (rustdoc: add a handle that makes sidebar resizing more obvious)
 - rust-lang#140151 (remove intrinsics::drop_in_place)
 - rust-lang#140660 (remove 'unordered' atomic intrinsics)
 - rust-lang#140783 (Update documentation of OnceLock::get_or_init.)
 - rust-lang#140789 (Update hermit-abi to 0.5.1)
 - rust-lang#140879 (1.87.0 release notes: remove nonsensical `~` operator)

r? `@ghost`
`@rustbot` modify labels: rollup
@bors bors merged commit 2bce1ad into rust-lang:master May 10, 2025
6 checks passed
@rustbot rustbot added this to the 1.89.0 milestone May 10, 2025
rust-timer added a commit to rust-lang-ci/rust that referenced this pull request May 10, 2025
Rollup merge of rust-lang#139562 - notriddle:notriddle/ew-resize, r=GuillaumeGomez

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]: rust-lang#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. T-rustdoc-frontend Relevant to the rustdoc-frontend team, which will review and decide on the web UI/UX output.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants