New issue
Advanced search Search tips

Issue 673746 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Nov 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Feature



Sign in to add a comment

DevTools: Option to Copy Styled console output for rich text editors

Reported by moni...@gmail.com, Dec 13 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36

Steps to reproduce the problem:
Feature Request:
For the purpose of nicer styling in communication(IM, mail, docs), it'd be awesome to be able to copy console output as styled text (with background, color, font, etc).

What is the expected behavior?
I would see it accessible from contextual menu, without need to have a pre-selected range of text - just hover and context-click.

Of course it should be decided what to copy when it comes to expandable pieces of info (such as error stack or objects) - my vote would be to copy exactly as currently displayed - items that are collapsed show as one-liners.

What went wrong?
Even more awesome would be some kind of integration with Slack, to automatically create snippets for sending, but that's probably a candidate for a DevTools plugin. Having styled text would be needed anyway.

Did this work before? No 

Chrome version: 54.0.2840.98  Channel: n/a
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 24.0 r0
 

Comment 1 by tkent@chromium.org, Dec 13 2016

Components: -Blink Platform>DevTools
Labels: M-57 OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)
Thanks for the report.

Considering this feature request and marking as Untriaged.
Requesting Dev team to check the request and update accordingly.
Owner: l...@chromium.org
Status: Assigned (was: Untriaged)

Comment 4 by moni...@gmail.com, Dec 16 2016

BTW, I also found out it is actually impossible to copy a console log output of an object. Selecting Copy from context menu seems to copy the word "Object" only, highlighting a text range is impossible as the range disappears shortly after the mouseup. This is at least the state of things on Mac.

Maybe you could look into the Copy feature and fix the above...

Comment 5 by l...@chromium.org, Dec 16 2016

Labels: -Type-Bug Type-Feature
Summary: DevTools: Option to Copy Styled console output (was: FR: Option to Copy Styled console output)
The bug you mentioned in #4 with being unable to select + copy/paste is being tracked in another issue.  I have an idea of a fix for that:
 crbug.com/674739 

To the original point of the issue, I'm not exactly sure how feasible it will be to paste styled content into Slack.  After reading Slack's docs, it looks like they support a simple markdown language with bold, italic, code, but not things like font, color, background color unfortunately.
https://api.slack.com/docs/message-formatting
https://get.slack.help/hc/en-us/articles/202288908-How-can-I-add-formatting-to-my-messages-

Perhaps there's some documentation that I've missed?  If you know of a way, please let us know!  Otherwise, I don't see how DevTools can prepare content that Slack will style.  Still, a DevTools extension for Slack integration would be neat!  I think there's opportunity for better ways to share console log data.

Comment 6 by moni...@gmail.com, Dec 16 2016

Frankly, I don't know of any method to integrate with Slack, although I can ask around. However, I wouldn't like the Slack issue to be the main focus for this thicket.

I think there should be a way to copy styled content that could then be recognized upon paste in rich text editors, such as Word or Google mail (is it HTML data behind the scenes?). I sometimes have a need to quote a console error in documentation/manual docs. I thought it'd be easier to copy/drag'n'drop rather than paste in screenshots. If there's too much fuss trying to provide support for this feature in DevTools then feel free to close the ticket.

Comment 7 by l...@chromium.org, Dec 16 2016

Summary: DevTools: Option to Copy Styled console output for rich text editors (was: DevTools: Option to Copy Styled console output)
Ah, okay.  As I understand it, you need to provide some preview of a console error in a document, and today's copy/paste only writes plain text without the rich styling from cases like these:
1) Formatters, e.g. console.log('%cfoo', 'color: blue')
2) The red styled text in errors, e.g. console.error('foo')

The first case should be possible since the color and other styles are directly set on the elements shown.  The second case, however, will not be straightforward since the red color comes from a stylesheet much higher up.

If there's desire for these use cases, let's keep this open.  Thanks for the feature request!

Comment 8 by moni...@gmail.com, Dec 16 2016

Well, the console output is not alwyas authored by me in js. Often times it's HTTP errors, like OPTIONS preflight or 40x, sometimes it's an error or warning from third-party libraries, so in practice this is not alwyas possible to assume that colors have been applied to text on a certain internal level.
Project Member

Comment 9 by bugdroid1@chromium.org, Nov 18 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/80f526543bbe0692624591c0f9ef968fec1d498f

commit 80f526543bbe0692624591c0f9ef968fec1d498f
Author: Erik Luo <luoe@chromium.org>
Date: Sat Nov 18 03:37:31 2017

DevTools: allow copying visible text with styles in console

Console's custom copy handler tries to determine the selected text on
its own. In some cases, the browser's default copy handler offers much
better behavior:
- Include styles and colors
- Include table indentation that can be pasted into spreadsheet editors
- Account for text selections across shadow boundaries

Bug:  673746 ,  697149 ,  649828 
Change-Id: I4b5e3a225234e28fe84197a73f655af9c4c9f418
Reviewed-on: https://chromium-review.googlesource.com/773462
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#517691}
[modify] https://crrev.com/80f526543bbe0692624591c0f9ef968fec1d498f/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
[modify] https://crrev.com/80f526543bbe0692624591c0f9ef968fec1d498f/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewport.js

Comment 10 by l...@chromium.org, Nov 18 2017

Status: Fixed (was: Assigned)
To update this bug: we can offer a partial solution for now, in which users "Copy visible styled text" from the right-click context menu to achieve this functionality.  Performing this right click action should allow you to copy text with color, background color, and font from the console.

While a right click option is not as ideal as I'd like, I'm marking this as fixed, since there are no plans in which we could support this without incurring significant complexity.

Sign in to add a comment