triple click for one-line console copy ex console prompt

[eecs441staff]

Is your feature request related to a problem? Please describe. It's not obvious that clicking the line number copies a line on the console block. Plus if we choose the no-line-numbers variant, there's no line numbers to click.

Describe the solution you'd like If you can detect triple click on the line, perhaps you can make a triple-click on a line to select the whole line without the console prompt.

If one wants to select the whole line with the console prompt, one can do drag to select or shift-triple-click or something else.

Describe alternatives you've considered One could drag to select whole line without the console prompt, but it's easier to drag to select whole line than to start/stop at the console prompt, especially for those with accessibility issues.

[seshrs]

I think there are two pieces of feedback I can take from this issue:

(1) Not obvious that clicking on the left-margin selects the line.

@awdeorio brought up the same feedback (https://github.com/eecs485staff/primer-spec/pull/131#issuecomment-930198599). At the time, I argued that this is a common UX pattern (in VSCode, MS Word, etc.), but I think it makes sense to make the functionality more discoverable.

Option 1a: Add a "help" button in every code block

• Where would the button go?
• Would it be distracting?
• Could we provide a way to turn it off?

Option 1b: Add a one-time dismissible NUX ("feature tour") using ShepherdJS

• I think it's possible to prevent showing the NUX if a user has already done the tour on any Primer Spec page.
• However, students who use Private-mode browsing will see the NUX every time they open the page. How do we make it less distracting?

Option 2: Add a "copy" button next to each line when you hover over the left edge of each line

• How would you select + copy multiple lines?
• If this button is an "extra feature", then would this prevent students from discovering that click+drag will select multiple lines?

Right now, I'm leaning towards Option 1b, but I need to explore how distracting the experience would be. (I don't want students to get side-tracked by Primer Spec features, the spec content is much more important than the website theme!)

(2) Need to copy a line after clicking it

Good point, I didn't give this much though! I don't have an easy way to detect triple-clicks, but I can detect double clicks. So maybe double-clicking on a line-number should select and copy the entire line. That said, I feel like double-clicking the line may not be an intuitive way to copy to the clipboard.

I wonder how we would make this work for multi-line code blocks. I can detect keyboard presses too, so shift+click, or shift+click+drag could trigger the copy-action. Alternatively, we could use the alt/option key instead of shift

For copying the console-prompt: I would expect most people wouldn't need to do it. If they really need to, they can always select text the old-fashioned way by clicking-and-dragging on the text itself 😄

[awdeorio]

I think Option 1b and 2 are reasonable. Here's a slight variation.

Option 2b Click to select a line. Click and drag to select multiple lines. Just like the GitHub PR interface. After selection, show click-to-copy button. Hovering over any part of an enhanced code block at any time shows a tooltip help text, possibly dismissible.

[seshrs]

I’m beginning to like Option 2b more (I was hesitant before). Thanks! Will prototype it this weekend.