Log: Allow selecting logged messages fully to ease copying them

[GoogleCodeExporter]

Right now, when I write up bug reports based on test failures, I often 
copy-paste messages from robot framework log files into tickets in JIRA or 
whatever. Sometimes these messages are pretty long, and copy pasting them can 
be tricky/tedious. 

I've noticed that a lot of websites will have a button/link you can click that 
will copy the contents of a text box to your clipboard through some sort of 
javascript magic, without having to click and drag to select the text. 
Something like this in RF's log messages would be convenient.

This is definitely just a nice-to-have sort of thing, I'd regard it as very low 
priority.

Original issue reported on code.google.com by guy.ki...@gmail.com on 27 Mar 2014 at 5:39

[GoogleCodeExporter]

I agree this would be useful. Do you have any ideas how the UI should look 
like? I would assume implementing this shouldn't be too complicated technically.

Original comment by pekka.klarck on 15 Apr 2014 at 12:06

• Changed state: Pending

[GoogleCodeExporter]

One example I've got in mind is how imgur.com handles embed links. For example, 
at https://imgur.com/ydVG2CQ?tags you can see the text fields on the right side 
of the page, each with a "copy" button. It looks like imgur's copy buttons are 
actually Flash, but maybe there's a unicode character that would suffice? 
Something simple and small, like the anchor link feature you added for me a 
while ago :)

Original comment by beefofa...@gmail.com on 15 Apr 2014 at 4:12

[GoogleCodeExporter]

I investigated this a bit more and it turned out that having a cross-browser 
solution to copy stuff to the clipboard using just Javascript is not possible. 
Using Flash seems to be the most popular solution, but that doesn't work for us 
for various reasons.

What we can do instead if having a way to easily select the whole message. Then 
users can click Ctrl-C themselves. I already have a prototype based on a 
StackOverflow answer [1]. It seems to work fine, but I still need to make the 
UI better. My current plan is adding 'Select Text' text to messages and style 
it similarly as 'Expand All' links are. How does this sound? 

[1] 
http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-ak
in-to-highlighting-with-your-mouse

Original comment by pekka.klarck on 16 Apr 2014 at 9:53

[GoogleCodeExporter]

This issue was updated by revision 14c64a868da9.

Select all functionality is now implemented. We aren't too happy with the UI 
yet and will prototype alternatives.

Original comment by pekka.klarck on 16 Apr 2014 at 10:42

• Changed title: Allow selecting log messages fully to ease copying them
• Changed state: Started
• Added labels: Target-2.8.5

[GoogleCodeExporter]

See the following automatically updated example to see how the implementation 
looks like:
https://robotframework.googlecode.com/hg/src/robot/htmldata/rebot/log.html#s1-s3
-t13

Original comment by pekka.klarck on 16 Apr 2014 at 10:44

[GoogleCodeExporter]

Anyone knows any good icon for "select all" functionality?

Original comment by pekka.klarck on 16 Apr 2014 at 11:14

[GoogleCodeExporter]

What if you could select all by clicking on the log level? As in, click on FAIL 
or INFO or DEBUG to select all text associated with that log block?

Original comment by beefofa...@gmail.com on 16 Apr 2014 at 4:26

[GoogleCodeExporter]

"Select all" is a tough concept to visualize, but I've seen some decent icons 
for it. For instance, android uses a dotted square outline around 4 solid boxes.

In this context, a clipboard icon might do a better job of suggesting what the 
feature is there for. It's a shame there doesn't seem to be an easy 
self-contained way to get javascript to copy to the clipboard for you.

Original comment by Raphael....@gmail.com on 16 Apr 2014 at 5:11

[GoogleCodeExporter]

This issue was updated by revision 0a79064b2e5d.

Changed text to an icon and cleaned up the implementation a little. I made the 
icon myself because couldn't find anything ready-made that would have worked 
too well.

I still have few enhancements in mind:

1) Add some visual notification when the icon, or actually the whole column 
where the icon is situated, is hovered. This tells user that at that point 
clicking selects the text. My current thinking is to implement this by having a 
second icon that has, for example, a yellow background.

2) Enhance the icon slightly. I like the basic idea but I'd like to somehow 
make the icon a bit sharper.

3) Toggle selection. Clicking the icon again could unselect the text. This is 
nice to have.

Original comment by pekka.klarck on 16 Apr 2014 at 6:29

[GoogleCodeExporter]

This issue was updated by revision 2a6587ff68b3.

Tuning:
- Different icon when select-column is hovered.
- Slightly sharper icom.
- Fixed icon disappearing when hovering between columns.

I'll still take a look at toggle functionality. After that this ought to be 
ready otherwise but needs to be tested more thoroughly.

Original comment by pekka.klarck on 16 Apr 2014 at 7:30

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

This is a nice implementation. Thanks!

Original comment by guy.ki...@gmail.com on 16 Apr 2014 at 7:35

[GoogleCodeExporter]

This issue was updated by revision 99d1922d4402.

Minor and hopefully final clean-up.

Original comment by pekka.klarck on 16 Apr 2014 at 8:02

[GoogleCodeExporter]

Implementing toggle turned out to be too complicated compared to benefits. It 
would be easy to store the selection state and either select or clear text 
accordingly, but the problem is that if user clicks anywhere else then the 
aforementioned state should be cleared. Listening for clicks anywhere just for 
this purpose probably isn't worth the effort.

Original comment by pekka.klarck on 16 Apr 2014 at 8:05

[GoogleCodeExporter]

The implementation is now ready for review and testing. At least the original 
submitter seems to like this so things look good in that regard.

I've tested that the functionality both works and looks fine on Linux with 
Chrome and Firefox, and on Windows 7 with Chrome, Firefox and IE11. It would be 
great if others could help by testing with others. Below is a list of browsers, 
in some kind of priority order, that we at least should test this:

- IE 8. Unfortunately we still need to support it.
- Browsers on OS X in general
- Safari
- IE 9
- IE 10
- Opera
- Mobile browsers

Original comment by pekka.klarck on 16 Apr 2014 at 8:28

• Changed state: Review

[GoogleCodeExporter]

This issue was updated by revision d27c7b11c573.

Turned cursor to pointer when hovering the selection column.

Original comment by pekka.klarck on 16 Apr 2014 at 8:29

[GoogleCodeExporter]

Tested and works on Windows using IE 8 and IE 11

On OSX tested and works on Safari, Opera, and GoogleChrome

Original comment by jussi.ao...@gmail.com on 19 Apr 2014 at 4:19

[GoogleCodeExporter]

Seems to work everywhere. Closing.

Original comment by pekka.klarck on 22 Apr 2014 at 8:20

• Changed state: Done

[GoogleCodeExporter]

Original comment by pekka.klarck on 16 Jun 2014 at 12:23

• Changed title: Log: Allow selecting logged messages fully to ease copying them

[GoogleCodeExporter]

Original comment by pekka.klarck on 16 Jun 2014 at 12:29

• Added labels: Priority-High
• Removed labels: Priority-Medium