Add multiline editor mode to console

NEW
Unassigned

Status

()

Firefox
Developer Tools: Console
--
enhancement
2 years ago
a day ago

People

(Reporter: canuckistani, Unassigned)

Tracking

(Depends on: 1 bug, Blocks: 2 bugs)

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [devtools-ux])

Firebug has a multiline editor and our lack of one directly integrated into the console is a common complaint from Firebug users about the tools.

Comment 1

2 years ago
You can already use Ctrl+enter to write a new line, but I agree it's not convenient
Note that there was a request[1] a long time ago to make the Command Editor (multiline editor) independent from the Command Line.
So I suggest to rather allow docking Scratchpad and do so by default. I.e. mark this as duplicate of bug 708213.

Sebastian

[1] https://code.google.com/p/fbug/issues/detail?id=988
Severity: normal → enhancement
OS: Mac OS X → All
Hardware: x86 → All
See Also: → bug 708213
Version: 36 Branch → unspecified
I suggest we integrate the sourceeditor component for the multiline mode.  You could toggle the mode by pressing a new button to the right of the input line and it would copy the current contents of the input into a new editor.  This will get us syntax highlighting and other CodeMirror goodies.  If you press the button again it will copy the current contents of the sourceeditor back into the normal input field.
For comment 3 to work, we would need a new autocomplete mode for the source editor that takes the current global state into account - that might be quite some work
WebKit nightlies have a nice feature where it automatically enters into multiline mode if the input is not valid JS.  So if you type

foo.<ENTER>

it will go into a multiline mode

foo.
<CURSOR>

Note that you still need to shift+enter if you want to add new lines with 'valid' JS, otherwise it will execute what you have.
To have this Firebug-style button to toggle multiline mode, we would need additional UI to have a 'run' button when in that mode since pressing enter wouldn't automatically run the script anymore.
(In reply to Brian Grinstead [:bgrins] from comment #5)
> WebKit nightlies have a nice feature where it automatically enters into
> multiline mode if the input is not valid JS.  So if you type
> 
> foo.<ENTER>
> 
> it will go into a multiline mode
> 
> foo.
> <CURSOR>
> 
> Note that you still need to shift+enter if you want to add new lines with
> 'valid' JS, otherwise it will execute what you have.

Interesting, this seems like a nice way to do it.
(In reply to Sebastian Zartner [:sebo] from comment #2)
> Note that there was a request[1] a long time ago to make the Command Editor
> (multiline editor) independent from the Command Line.
> So I suggest to rather allow docking Scratchpad and do so by default. I.e.
> mark this as duplicate of bug 708213.
> 
> Sebastian
> 
> [1] https://code.google.com/p/fbug/issues/detail?id=988

FWIW this request is now hosted at https://github.com/firebug/firebug/issues/1128.

I still see a valid use case for having the command line and the multiline editor work mostly independent, i.e. allow to open them both at the same time. There may still be functionality, though, to copy the entered code between them.

Sebastian
Summary: Add mutliline editor mode to console → Add multiline editor mode to console
Whiteboard: [devtools-ux]
For a 'commit' keyboard shortcut if you get in a 'multiline' mode, we could use cmd/ctrl+enter, which is what we use for the HTML editing feature in the markup view
(In reply to Brian Grinstead [:bgrins] from comment #9)
> For a 'commit' keyboard shortcut if you get in a 'multiline' mode, we could
> use cmd/ctrl+enter, which is what we use for the HTML editing feature in the
> markup view

That's definitely the convention for the 'inline mutliline' concept - scratchpad instead has accel+r mapped to run the current buffer or selection, something I've found productive when I've used it.
(In reply to Brian Grinstead [:bgrins] from comment #5)
> WebKit nightlies have a nice feature where it automatically enters into
> multiline mode if the input is not valid JS.  So if you type
> 
> foo.<ENTER>
> 
> it will go into a multiline mode
> 
> foo.
> <CURSOR>
> 
> Note that you still need to shift+enter if you want to add new lines with
> 'valid' JS, otherwise it will execute what you have.

I like this idea. I'm also not entirely opposed to having a UI of some sort for this (a button, say). I think that part of the issue is that our current filtering system takes up a lot of space an is atypical; if we moved toward something that was less-so, adding a button to turn on multi-line editing wouldn't be a big deal.
See Also: → bug 1243851
Depends on: 1243851
See Also: bug 1243851
Depends on: 983473
(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #11)
> (In reply to Brian Grinstead [:bgrins] from comment #5)
> 
> I like this idea. I'm also not entirely opposed to having a UI of some sort
> for this (a button, say). I think that part of the issue is that our current
> filtering system takes up a lot of space an is atypical; if we moved toward
> something that was less-so, adding a button to turn on multi-line editing
> wouldn't be a big deal.

The UI for the filters has changed in the meantime and does use less real estate now.

Comment 13

25 days ago
Hello. Something new in topic? Let me draw some conclusion after using new console and scratchpad features for some time.

Auto multiline mode is not very useful. It's ok on small tests but if you want  test something bigger it has some lacks. Small letters in left corner of the screen, notr very readable. Missing line numberings is not helping also.

Scratchpad feature is ok but  there is no posibility to open this side by side with console. It is  another window which is blocking  visibility of webpage. Also comments wchich are showing after code execution benetah the code are bit confusing. So better solution could be split Scratchpad window on code part and message part. Switching between  two windows/tabs (console and scratchpad) is bit annoying.

To sum up. Code Mirror editor side by side with console, like was in Firebug, could be more usefull and neat, tahn present solution.

Comment 14

25 days ago
> Scratchpad feature is ok but  there is no posibility to open this side by side with console.

It is possible. Open the scratchpad, then open the split console (Escape).
(In reply to Tim Nguyen :ntim from comment #14)
> > Scratchpad feature is ok but  there is no posibility to open this side by side with console.
> 
> It is possible. Open the scratchpad, then open the split console (Escape).
So the problem is scratchpad exists as 2 different tools: one as a separate window (which is what maxm is referring to here I assume), and another one as a tab inside the toolbox (which is what ntim is saying is possible).
You can learn about how to do this here: https://developer.mozilla.org/en-US/docs/Tools/Scratchpad#Opening_Scratchpad_in_the_Toolbox

In this mode, you'll indeed see both the console and scratchpad side by side, which is great. However scratchpad is still going to show comments after code execution, which is a bit annoying.

Comment 16

25 days ago
(In reply to Tim Nguyen :ntim from comment #14)
> > Scratchpad feature is ok but  there is no posibility to open this side by side with console.
> 
> It is possible. Open the scratchpad, then open the split console (Escape).

Nice, i didn't know that. 
Maby there is chance to add some button in scratchpad to switch it on to side by side mode with console?

In side by side view, more webpage and more lines in scratchpad/console could be visible at once.(In reply to Patrick Brosset <:pbro> from comment #15)
> (In reply to Tim Nguyen :ntim from comment #14)
> > > Scratchpad feature is ok but  there is no posibility to open this side by side with console.
> > 
> > It is possible. Open the scratchpad, then open the split console (Escape).
> So the problem is scratchpad exists as 2 different tools: one as a separate
> window (which is what maxm is referring to here I assume), and another one
> as a tab inside the toolbox (which is what ntim is saying is possible).
> You can learn about how to do this here:
> https://developer.mozilla.org/en-US/docs/Tools/
> Scratchpad#Opening_Scratchpad_in_the_Toolbox
> 
> In this mode, you'll indeed see both the console and scratchpad side by
> side, which is great. However scratchpad is still going to show comments
> after code execution, which is a bit annoying.

Thank you.Exactly.

Comment 17

25 days ago
(In reply to maxm from comment #16)
> (In reply to Tim Nguyen :ntim from comment #14)
> > > Scratchpad feature is ok but  there is no posibility to open this side by side with console.
> > 
> > It is possible. Open the scratchpad, then open the split console (Escape).
> 
> Nice, i didn't know that. 
> Maby there is chance to add some button in scratchpad to switch it on to
> side by side mode with console?
> 
> In side by side view, more webpage and more lines in scratchpad/console
> could be visible at once.(In reply to Patrick Brosset <:pbro> from comment
> #15)
> > (In reply to Tim Nguyen :ntim from comment #14)
> > > > Scratchpad feature is ok but  there is no posibility to open this side by side with console.
> > > 
> > > It is possible. Open the scratchpad, then open the split console (Escape).
> > So the problem is scratchpad exists as 2 different tools: one as a separate
> > window (which is what maxm is referring to here I assume), and another one
> > as a tab inside the toolbox (which is what ntim is saying is possible).
> > You can learn about how to do this here:
> > https://developer.mozilla.org/en-US/docs/Tools/
> > Scratchpad#Opening_Scratchpad_in_the_Toolbox
> > 
> > In this mode, you'll indeed see both the console and scratchpad side by
> > side, which is great. However scratchpad is still going to show comments
> > after code execution, which is a bit annoying.
> 
> Thank you.Exactly.

After small research. Ok I agree. It is possible to open console in split mode - and i have seen it earlier. 
But side-by-side? Like it was in Firebug? I mean, Devtools panel on  bottom of the window (not sidebar mode) split in two parts, and there Console left side, scratchpad right side? I can't find it in Mozilla MDN documentation.

Sidebar mode is ok for testing mobile version of website, but for desktop layout it's, in my opinion, not very good view. It can sometimes collapse some of webpage layouts, so it is forcing to change width of devtools panel, what is not very good for readability in the devtools tabs. It is not a problem in big screens but les than 22" it is bit annoying.
Just for reference, bug 1124677 requests to add a console to the Scratchpad window.

Sebastian
See Also: → bug 1124677
Blocks: 1267303
You need to log in before you can comment on or make changes to this bug.