Closed Bug 706755 Opened 8 years ago Closed 6 years ago

want to select code in Web Console

Categories

(DevTools :: Console, defect, P2)

11 Branch
defect

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 26

People

(Reporter: trentm, Unassigned)

References

(Blocks 1 open bug)

Details

(Whiteboard: [copy][fixed by bug 760876])

Attachments

(1 file, 1 obsolete file)

I should be able to select and copy (part of) previously run commands in the Web Console. E.g. selecting "JSON.parse" or whatever here:

http://cl.ly/291A2q3m2s1k0G3s0V2R

I should be able to select any output in the console as well. Currently you can select a whole line in the web console which gives you something like the following:

[22:29:51.569] try { JSON.parse('{"foo": bar}') } catch (e) { console.log(e) }

This is awkward (the timestamp isn't useful for copy/pasting code around) and doesn't allow sub-selection.

"Version" is "9 branch" above, but it is the same in the current Aurora (don't know the branch for that current, sorry). 

I tweeted :paul about this: https://twitter.com/#!/trentmick/status/141770096002613249 https://twitter.com/#!/trentmick/status/141772119552950272
I agree. The current behavior feels wrong. We need to make the message-body selectable, and on ctrl-c, we should copy only the selection, or the whole line if no selection.

Also, that will introduce a style problem. The selection won't be visible. So we need to change the background color of the selected richlistitem.
Severity: enhancement → normal
Status: UNCONFIRMED → NEW
Ever confirmed: true
Whiteboard: [good first bug][mentor=paul][lang=js/css]
Version: 9 Branch → 11 Branch
Whiteboard: [good first bug][mentor=paul][lang=js/css] → [good first bug][mentor=paul][lang=js][lang=css]
By reading the code . It looks it is already implemented but not by dragging mouse. we can select multiple lines on the console using shift+Up key.
filter on pegasus
Priority: -- → P2
Target Milestone: --- → Firefox 12
Duplicate of this bug: 648145
I would like to attempt this.
(In reply to Mel from comment #5)
> I would like to attempt this.

please do :)
Does anyone have a link to the relevant source file to help Mel get started?
(In reply to Josh Matthews [:jdm] from comment #7)
> Does anyone have a link to the relevant source file to help Mel get started?

This function is the copy function to copy the timestamp and the text in the node:
http://mxr.mozilla.org/mozilla-central/source/browser/devtools/webconsole/HUDService.jsm#3113
Target Milestone: Firefox 12 → ---
Blocks: 716976
Whiteboard: [good first bug][mentor=paul][lang=js][lang=css] → [good first bug][mentor=paul][lang=js][lang=css][copy]
(In reply to Jignesh kakadiya from comment #2)
> By reading the code . It looks it is already implemented but not by dragging
> mouse. we can select multiple lines on the console using shift+Up key.

it seems that this is counter intuitive. I wonder if it is possible to make it like the console in the chrome browser. In chrome it is possible to select parts of the console just like a text box.
Yes. The goal of this bug is to make the text selectable like in textbox.

To do so, the richlisitems or their content need this CSS property: "-moz-user-select: text;"
Then it will be selectable. And to get the right cursor: "cursor: text;"

Then some JS will be need to handle when to copy what should be copied on ctrl-C.

This is the theory. Not sure how well this will work :)
(In reply to Jason Yeo(:jyeo) from comment #11)
> The css code is at
> http://mxr.mozilla.org/mozilla-central/source/browser/themes/winstripe/
> devtools/webconsole.css#285 is that right?

(winstripe/pinstripe/gnomestripe)
This is where the style of the console lie.

But in this case, we need to get a content style (https://wiki.mozilla.org/DevTools/CSSTips#Content_or_Theme_CSS).

So we should create /browser/devtools/webconsole/webconsole.css to add these rules.

If we are just talking about one or two rules, we might prefer add them in the JS code (HUDService) via .setAttribute("style", ...).
Attached patch 706755.patch (obsolete) — Splinter Review
Hi,

I have trouble making the changes i have made to show up in FF. This is what I am doing:
1. Make changes to HUDService.jsm
2. cd objdir/browser/devtools/webconsole
3. make

am I doing something wrong here? Anyway, I have attached a patch with the changes I have made to the source.
Attachment #596098 - Flags: review?(paul)
Attached patch 706755.patchSplinter Review
I have added the css rules to the webconsole.css file. I can see the cursor now but still unable to select. I think I need to figure out how to do that.
Attachment #596098 - Attachment is obsolete: true
Attachment #596098 - Flags: review?(paul)
Attachment #596142 - Flags: review?(paul)
Are there any updates on this?
Attachment #596142 - Flags: review?(paul)
So it appears to be much more complicated that I thought.
This is not a good first bug after all :/ Sorry for that.

We probably need to use HTML for the logs.
Whiteboard: [good first bug][mentor=paul][lang=js][lang=css][copy] → [copy]
We will have to rewrite the Web Console output. I believe we need to stick to XUL [1] but we need to use better elements - not a richlist like we do now.

[1] our devtools have gone through being written in HTML then migrated to XUL: this was the case with the style editor, debugger and the web console itself (long history).
(In reply to Mihai Sucan [:msucan] from comment #17)
> We will have to rewrite the Web Console output. I believe we need to stick
> to XUL [1] but we need to use better elements - not a richlist like we do
> now.
> 
> [1] our devtools have gone through being written in HTML then migrated to
> XUL: this was the case with the style editor, debugger and the web console
> itself (long history).

We failed to use HTML in the past for flexible, l10n'able and i18n'able UIs (ltr/rtl). But this is a very different beast. I don't know if we should use XUL or HTML, but the previous failures should not prevent us to use HTML here.

My personal feeling (and this is just a "feeling"), rewriting the output in HTML will help use a lot to fix this bug, and will also give a us a chance to fix the slowness problem.
(In reply to Paul Rouget [:paul] from comment #18)
> (In reply to Mihai Sucan [:msucan] from comment #17)
> > We will have to rewrite the Web Console output. I believe we need to stick
> > to XUL [1] but we need to use better elements - not a richlist like we do
> > now.
> > 
> > [1] our devtools have gone through being written in HTML then migrated to
> > XUL: this was the case with the style editor, debugger and the web console
> > itself (long history).
> 
> We failed to use HTML in the past for flexible, l10n'able and i18n'able UIs
> (ltr/rtl). But this is a very different beast. I don't know if we should use
> XUL or HTML, but the previous failures should not prevent us to use HTML
> here.

l10n and i18n are valid concerns in the Web Console output as well.

> My personal feeling (and this is just a "feeling"), rewriting the output in
> HTML will help use a lot to fix this bug, and will also give a us a chance
> to fix the slowness problem.

I believe XUL allows us to have selection and good performance. On the topic of performance we should ask experts like Neil Deakin if we should choose HTML over XUL. I do not expect too much difference.

If I am not mistaken, our current performance problems are related to how we choose to work with the DOM nodes (as noted by Boris in bug 746869). We have to avoid these problems with HTML elements as well.
Duplicate of this bug: 760876
Depends on: console-output
Blocks: 760876
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Whiteboard: [copy] → [copy][fixed by bug 760876]
Target Milestone: --- → Firefox 26
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.