Open Bug 1133849 (console-multiline-editor) Opened 9 years ago Updated 3 months ago

[meta] Multiline editor mode to console

Categories

(DevTools :: Console, enhancement)

enhancement

Tracking

(Not tracked)

People

(Reporter: canuckistani, Unassigned)

References

(Depends on 7 open bugs)

Details

(Keywords: meta, 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.
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: → 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: → 1243851
Depends on: 1243851
See Also: 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.
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.
> 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.
(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.
(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: → 1124677
Product: Firefox → DevTools
There are things we should decide here: 

1. How do we trigger the multiline mode

Firebug had an arrow button to switch between single/multi. In our case, we could use the ">>" icon we have in the input to do that.

2. How should this look

Do we want a Firebug like look (input and output side by side), or should we keep the "current" look, with a bigger min-width for the input and the ability to make it resizable ?
For what it's worth, the side by side version would be faster to implement (CSS grid FTW :) )

We also need to think of how it looks with the sidebar enabled, and with the "reverse-search"/"eager-evaluation-result" bar we could have in the future.

3. How trigger input evaluation when in multiline

Multiline should remap Enter to add a new line, so we need a way to evaluate the input.
We could: 
- have Cmd/Ctrl + Enter (which I think was what Firebug had)
- or/and have a dedicated button

Depending on the solution, we also could have a "tour" of the multiline mode when the user enables it for the first time ? Not sure about that, but I'm thinking about accidental activation of the multiline mode.

4. Additional feature when in multiline mode ?

This should gives us more room so maybe we could have additional UI elements ? I'm thinking of dedicated history navigation buttons, but there could be other.
(In reply to Nicolas Chevobbe [:nchevobbe] from comment #19)
> There are things we should decide here: 
> 
> 1. How do we trigger the multiline mode
> 
> Firebug had an arrow button to switch between single/multi. In our case, we
> could use the ">>" icon we have in the input to do that.

Not sure whether that's obvious enough, as ">>" so far just indicates that you can enter the commands there. I'd rather add a new toggle button for this.

> 2. How should this look
> 
> Do we want a Firebug like look (input and output side by side), or should we
> keep the "current" look, with a bigger min-width for the input and the
> ability to make it resizable ?
> For what it's worth, the side by side version would be faster to implement
> (CSS grid FTW :) )
> 
> We also need to think of how it looks with the sidebar enabled, and with the
> "reverse-search"/"eager-evaluation-result" bar we could have in the future.

Also, it should be clarified whether the multi-line and single-line command lines can be used at the same time. I remember there were some requests and discussions for this to implement in Firebug, though there was no final conclusion.

> 3. How trigger input evaluation when in multiline
> 
> Multiline should remap Enter to add a new line, so we need a way to evaluate
> the input.
> We could: 
> - have Cmd/Ctrl + Enter (which I think was what Firebug had)
> - or/and have a dedicated button

I believe, it makes sense to have both. Ctrl/Cmd + Enter is consistent to what other multi-line editors do, e.g. the comment editor on GitHub, and allows for a fast workflow.
Though that shortcut is not obvious, so additionally having a dedicated button for this still makes sense.

> Depending on the solution, we also could have a "tour" of the multiline mode
> when the user enables it for the first time ? Not sure about that, but I'm
> thinking about accidental activation of the multiline mode.

Maybe, though if the only reason to have a tour is the accidental activation of the multi-line mode, I'd rather say it should just be made obvious how to switch back to single-line mode.

> 4. Additional feature when in multiline mode ?
> 
> This should gives us more room so maybe we could have additional UI elements
> ? I'm thinking of dedicated history navigation buttons, but there could be
> other.

A UI for the history is a good thing, in my opinion, because it makes it easy to switch between the entered contents. See also bug 1358383, which is asking to add that feature to the single-line mode, but could be used for the multi-line mode as well.

FWIW, the options available in Firebug were Run, Pretty Print, History, Clear, and Copy. See https://blog.getfirebug.com/2014/05/09/firebug-2-0-beta-5/. And I think it's reasonable to have the first three at least.
Having said that, only Run should block the initial release, the rest could be implemented afterwards.

Sebastian
Summary: Add multiline editor mode to console → [META] Add multiline editor mode to console

Let's use this bug as a META for this work that will be split in multiple smaller bugs

Depends on: 1519104
No longer depends on: 1519104
Depends on: 1519105
Depends on: 1554857
No longer depends on: 1554857
No longer depends on: 1519105
Depends on: 1558198
Depends on: 1558201
Depends on: 1558203
Depends on: 1558417
No longer depends on: 1558203
Depends on: 1565017
Alias: console-multiline-editor
Summary: [META] Add multiline editor mode to console → [meta] Add multiline editor mode to console
No longer depends on: 1558201
No longer depends on: 1558198
No longer depends on: 1558417
Depends on: 1577896
Depends on: 1577898
Depends on: 1577900

Feedback:
I like the multiline editor! Easier to use than the Scratchpad, since it's docked to the correct tab, and it's easier to see which code is selected.

Papercut 1:
Steps to reproduce: 1) Create a long script, 2) Scroll all the way up, 3) Put the cursor on the second line, 4) Press Enter.
Expected result: No scrolling occurs.
Actual result: The script is scrolled so that the second line is the top line.

Papercut 2: Executing a large script multiple times quickly clutters the console panel. Perhaps a long script could be abbreviated, and expanded when clicking "...":

>> function abc() {
      console.log('abc')
   ...

Papercut 3: I'd like some keyboard shortcut for navigating history. Perhaps Ctrl+H and up/down arrows.

Thanks for the feedback Dan!

Papercut 3: I'd like some keyboard shortcut for navigating history. Perhaps Ctrl+H and up/down arrows.

I filed Bug 1578160 for that

Papercut 2: Executing a large script multiple times quickly clutters the console panel. Perhaps a long script could be abbreviated, and expanded when clicking "...":

Filed Bug 1578212 :)

I tried reproducing Papercut 1 but couldn't ? The editor doesn't scroll when adding the new line.

Flags: needinfo?(326374)

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #24)

I tried reproducing Papercut 1 but couldn't ? The editor doesn't scroll when adding the new line.

I was clearly tired when I wrote that. I meant Tab, not Enter. I've filed Bug 1578283 for this papercut.

Flags: needinfo?(326374)
Depends on: 1581641
No longer blocks: firebug-gaps
No longer blocks: 1519103
Depends on: 1584262
Depends on: 1584259
Depends on: 1601347
Depends on: 1603259
Depends on: 1611315
Depends on: 1647509
Severity: normal → S3
Depends on: 1594139, 1578160
Summary: [meta] Add multiline editor mode to console → [meta] Multiline editor mode to console
You need to log in before you can comment on or make changes to this bug.