1427981 - Add visual indicator in console input to express what pressing "Enter" will do

Status: NEW

(DevTools :: Console, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

In the Firefox console, we do have a mechanism which tests if we should evaluate a string or not when the user press enter. This returns false when an expression is incomplete and the user only wants a line break.

The thing is, I suspect a lot of people doesn't know that (that's just me speaking with people in Austin). And if they do (like me!), it is not really trustable since there are case where we would evaluate when the user wants a linebreak.

We can of course change our implementation to make it work everytime, but I guess there are some pitfalls.

So we could have a really simple indicator somewhere that would tell the user if the string would be evaluated, or if it is safe to hit Enter to have a line break.

This indicator may also serve later as a way to switch to/from a "multiline input" (a-la Firebug).

Victoria, does that make sense to you ? And if it does, do you have an idea where we can position such button/icon ?

Comment 1

[Victoria Wang [:victoria]]

Sounds great! I think the right side of the input field would be natural for this - matches how the Firefox address bar shows an arrow to the right after you type something in.

Maybe a symbol like this for new line: https://thenounproject.com/search/?q=return&i=14107
And I was thinking of a symbol like => for evaluate, but it's pretty overloaded - there must be something better.

We could be extra clear and just show the phrase "new line" or "evaluate" inside a little gray badge that can also work as a button. Perhaps with a tooltip that says "press enter to evaluate," etc.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: a-la-automcpletion hint

The ↩ symbol can be confusing. I saw places where it was used as a meaning of "validate" (in Alfred).
What would be nice is something really explicit ("Pressing Enter will create a new line/evaluate the input expression"),but that's too long for sure :D

Maybe we could show this only when the console would insert a new line ? 

Maybe we could play with the autocomplete string we have ? Like you start typing something : 

function () { <- Enter will create a new line

Where "<- Enter will create a new line" would be in grey ? (See attachment)

Comment 4

[:Harald Kirschner :digitarald]

Matt, related to the reverse search, as this is another overlay that would need to be shown in the input.

Comment 5

[mcroud]

Attachment: Enter Indicator 1_2x.png

Updating this bug with the latest mockups and results of the feedback from Twitter (to which there was a super amount of feedback!):
https://twitter.com/FirefoxDevTools/status/1085245316020858881

B - 43 votes
D - 28 votes
F.b - 15 votes
E - 12 votes
A - 11 votes
C - 7 votes
F.a - 2 votes

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: B - naive implementation

So, I was playing with what the B solution could look like in situation (See attached screencast)

It looks like we should not show the indicator:

• when the autocomplete popup is displayed
• when the input is not focused

Also, this brings some questions:

• does it feel too much ? Maybe this could only be shown after N ms after the last keystroke, so the user is not "annoyed" by this icon
• what should we do when a new line can be created but the cursor is not at the end of the line:

for( var i = 0|; i < 3; i++)

( | represents the cursor here )

This will create a new line, should the new line indicator be at the end of the line ?