[rustdoc] Add copy code feature #125779
[rustdoc] Add copy code feature #125779
Conversation
rustbot
added
S-waiting-on-review
|
Some changes occurred in HTML/CSS/JS. cc @GuillaumeGomez, @jsha |
This comment has been minimized.
This comment has been minimized.
|
The code looked fine to me… |
|
To me as well. 😆 That's why we added such checks. Fixed the warnings :) |
|
Okay, one thing that I would like to change here. Can we make the spacing and size of these buttons the same as the ones in the top toolbar? I'm pretty sure the Run button is as huge as it is to try to draw attention to itself, which isn't as big of a deal now that the copy button is there, too. before
after
|
|
Sounds good to me! It'll also allow me to remove the second clipboard svg. |
|
Updated! I also updated the screenshots and the uploaded docs. |
This comment has been minimized.
This comment has been minimized.
|
Updated the GUI test I forgot. |
|
I'd like to tweak the border-radius of the buttons and the code blocks themselves. There's also an inconsistency with the buttons:
|
|
Applied all suggestions and updated docs and screenshots. |
|
@rfcbot fcp merge |
|
Team member @notriddle has proposed to merge this. The next step is review by the rest of the tagged team members: Concerns:
Once a majority of reviewers approve (and at most 2 approvals are outstanding), this will enter its final comment period. If you spot a major issue that hasn't been raised at any point in this process, please speak up! See this document for info about what commands tagged team members can give me. |
rfcbot
added
proposed-final-comment-period
|
The button doesn't seem to work on my browser. When I click it my clipboard is unchanged. I'm running Firefox on aarch64 macOS. |
|
Does the one at the top of the page work? Does the copy button in the docs.rs mega menu work? Does the one in GitHub work? I'd like to know if it's a bug. |
|
Yes, the one at the top of the page (to copy the item path) works for me, which I tested on the sample page Guillaume posted that also contains this new feature. It also works for me in GitHub. So does the docs.rs menu. The only place it doesn't work is the buttons generated by this new feature. |
Same thing happening here! FF 126.0.1, x86_64 Linux. No JS errors getting logged. |
|
@rfcbot concern should-actually-work let's not land this until it has been thoroughly tested out |
|
This looks good, except can you swap the positioning of the copy code and run button? That would bring us into sync with mdBook, which seems preferable to me. (In a future PR, ideally we'd match mdBook's icons as well since they're simpler and less obtrusive.) |
|
In this case I'd rather not: the run button presence is not constant (depends on a setting) whereas the "copy code" button is always there. Since elements are right-aligned, I'd prefer to keep the button always present on the right so it never moves whether or not the "run button" is present. And yes, in future PR I plan to unify more the buttons with mdBook's. |
|
@rfcbot resolve should-actually-work |
rfcbot
added
the
final-comment-period
|
🔔 This is now entering its final comment period, as per the review above. 🔔 |
rfcbot
removed
the
proposed-final-comment-period
That's true for mdBook as well; it doesn't always show the run button. I understand your concern, but given that mdBook deals with the same issue, it seems quite unfortunate to have the opposite layout as them for the same features. |
|
Hum... I think in this case that we could improve mdBook. This problem can be seen from two angles: the copy button is always on the left or the opposite: is always at the same position but is on the right. Might be worth re-discussing it when we'll unify buttons more with mdBook. Anyway, sounds like fun times incoming. 😆 |
Fixed! Sorry about that. |
|
Awesome, thanks! |
rfcbot
added
finished-final-comment-period
|
The final comment period, with a disposition to merge, as per the review above, is now complete. As the automated representative of the governance process, I would like to thank the author for their work and everyone else who contributed. This will be merged soon. |
|
@bors r=rustdoc-team |
bors
added
S-waiting-on-bors
…c-team [rustdoc] Add copy code feature This PR adds a "copy code" to code blocks. Since this is a JS only feature, the HTML is generated with JS when the user hovers the code block to prevent generating DOM unless needed. Two things to note: 1. I voluntarily kept the current behaviour of the run button (only when hovering a code block with a mouse) so it doesn't do anything on mobile. I plan to send a follow-up where the buttons would "expandable" or something. Still need to think which approach would be the best. 2. I used a picture and not text like the run button to remain consistent with the "copy path" button. I'd also prefer for the run button to use a picture (like what is used in mdbook) but again, that's something to be discussed later on. The rendering looks like this:   It can be tested [here](https://guillaume-gomez.fr/rustdoc/bar/struct.Bar.html) (without the run button) and [here](https://guillaume-gomez.fr/rustdoc/foo/struct.Bar.html) (with the run button). Fixes rust-lang#86851. r? `@notriddle`
…llaumeGomez Rollup of 6 pull requests Successful merges: - rust-lang#125779 ([rustdoc] Add copy code feature) - rust-lang#127765 (Fix doc nits) - rust-lang#127860 (deps: dedup object, wasmparser, wasm-encoder) - rust-lang#128103 (add `is_multiple_of` for unsigned integer types) - rust-lang#128228 (Stabilize `const_waker`) - rust-lang#128240 (Add links from `assert_eq!` docs to `debug_assert_eq!`, etc.) r? `@ghost` `@rustbot` modify labels: rollup
Rollup merge of rust-lang#125779 - GuillaumeGomez:copy-code, r=rustdoc-team [rustdoc] Add copy code feature This PR adds a "copy code" to code blocks. Since this is a JS only feature, the HTML is generated with JS when the user hovers the code block to prevent generating DOM unless needed. Two things to note: 1. I voluntarily kept the current behaviour of the run button (only when hovering a code block with a mouse) so it doesn't do anything on mobile. I plan to send a follow-up where the buttons would "expandable" or something. Still need to think which approach would be the best. 2. I used a picture and not text like the run button to remain consistent with the "copy path" button. I'd also prefer for the run button to use a picture (like what is used in mdbook) but again, that's something to be discussed later on. The rendering looks like this:   It can be tested [here](https://guillaume-gomez.fr/rustdoc/bar/struct.Bar.html) (without the run button) and [here](https://guillaume-gomez.fr/rustdoc/foo/struct.Bar.html) (with the run button). Fixes rust-lang#86851. r? ``@notriddle``
… r=notriddle [rustdoc] Make the buttons remain when code example is clicked Follow-up of rust-lang#125779. One current issue we have with "run" button and the newly added copy code button is that if you're on mobile devices, you can't use them. I took a look at how `mdbook` is handling it and when you click on a code example, they show the buttons. I think it's a really good idea as if you want to copy the code on your mobile device, you will click on it, showing the buttons. Feature can be tested [here](https://rustdoc.crud.net/imperio/click-code-example/foo/struct.Bar.html). r? `@notriddle`
Rollup merge of rust-lang#128339 - GuillaumeGomez:click-code-example, r=notriddle [rustdoc] Make the buttons remain when code example is clicked Follow-up of rust-lang#125779. One current issue we have with "run" button and the newly added copy code button is that if you're on mobile devices, you can't use them. I took a look at how `mdbook` is handling it and when you click on a code example, they show the buttons. I think it's a really good idea as if you want to copy the code on your mobile device, you will click on it, showing the buttons. Feature can be tested [here](https://rustdoc.crud.net/imperio/click-code-example/foo/struct.Bar.html). r? `@notriddle`
This PR adds a "copy code" to code blocks. Since this is a JS only feature, the HTML is generated with JS when the user hovers the code block to prevent generating DOM unless needed.
Two things to note:
The rendering looks like this:
It can be tested here (without the run button) and here (with the run button).
Fixes #86851.
r? @notriddle