Provide instant user feedback when things are copied to the clipboard

[captainbrosset]

There are several tools in DevTools that allow users to copy things to the clipboard:

• The eyedropper:

• The font URL in the Fonts panel:

• The Copy Rule and Copy Changes from the Changes panel:

There might be other places too that I forgot about. The point of this issue is that DevTools currently does not have a consistent way of signaling users that, indeed, something ended up in their clipboard.

Many websites out there that offer buttons to copy things tend to have a little user feedback mechanism for that.

Tweetdeck for example:

In fact, Firefox itself does have something too:

The eyedropper example from before does have some feedback because the text in the label changes to indicate that the copy succeeded, but the copy rule, copy changes, and copy font url do not have anything. Adding something would help users trust the features a bit more. Ideally, it'd be great if this was consistently done throughout DevTools.

One more thing in DevTools is the screenshot tool. It's great it terms of user feedback with the camera shutter sound and the screen flashing effect. But, if you go in settings, you can also make it save the images in the clipboard. When you do, they are both saved to disk and in clipboard. So you still get the shutter and flash, but you don't have a "saved to clipboard" message.

I would like to propose that we add a message like Firefox does when copying links. This message would be styled to look like a notification, and would appear in the top-right corner of the Toolbox, for a short while, and then slide back to disappear. This would work the same for copying font urls, css changes/rules, eyedropper colors and screenshots.

What do people here think?

[captainbrosset]

Turns out there are many more places where we allow users to copy strings. Here are a few I can think of:

• right-click on a node in the inspector: there are many menu items to copy things from there (html, css path, etc.)
• right-click on a source in the debugger: you can copy the URL to the source from there
• right-click on a stylesheet in the style-editor: same thing there
• right-click on a request in the net-monitor: same
• same in the console
• etc.

Copying from a right-click menu option might be more standard in a way. Users likely understand this because they do it in other applications and operating systems. There might not need to be a notification for those.

[nchevobbe]

we also have the copy command in the console input (e.g. run copy({a: 1}))

[fvsch]

I agree that the lack of feedback right now is problematic. And having a small "toast" notification can be a decent solution.

In a first step I would focus on having that notification for buttons, and leave context-menu actions and the Console's copy() for later consideration.

[fvsch]

Note: the eyedropper already has a little bit of feedback, since we wait a bit to show a tick icon and a "Copied" label.

One option would be to reuse that style and show it as a tooltip near the button, rather than as a toast notification.

[violasong]

Agreed, this would be a huge improvement! I really like how main Firefox’s message is located near the Copy button, but if it’s simpler, top-right corner seems like it would work fine too. It’s basically the same for the Layout panel. We can copy Firefox exactly for the white-on-blue styling.