Bug 30553 - Web Inspector: Multiline Code in the Console's History Could be More User Friendly
: Web Inspector: Multiline Code in the Console's History Could be More User Fri...
Status: RESOLVED INVALID
: WebKit
Web Inspector (Deprecated)
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To:
:
:
:
:
  Show dependency treegraph
 
Reported: 2009-10-19 21:33 PST by
Modified: 2014-01-27 15:11 PST (History)


Attachments
[IMAGE] "Console log" vs "Snippet editor" (166.68 KB, image/png)
2009-11-18 15:27 PST, Pavel Feldman
no flags Details
[IMAGE] Snippet editor has debugger capabilities. (90.27 KB, image/png)
2009-11-18 15:36 PST, Pavel Feldman
no flags Details
[IMAGE] Snippet editor is closed (22.58 KB, image/png)
2011-01-27 09:00 PST, Pavel Podivilov
no flags Details
[IMAGE] Snippet editor is opened (45.74 KB, image/png)
2011-01-27 09:00 PST, Pavel Podivilov
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2009-10-19 21:33:21 PST
When moving through the Console's history (up arrow), if a multiline snippet is encountered then the Console View acts in a non-user friendly way, hiding all but the first line of the snippet.

Expected Behavior:
The Console View should scroll down to the bottom revealing as much of the snippet as possible.

Current behavior:
The Console View shows the top line of the snippet and requires that the user manually scroll the Console View to the bottom.

Example Image:
http://grab.by/aLV
------- Comment #1 From 2009-10-19 21:50:46 PST -------
We should let you use the arrow keys inside this code to move between lines. Only going back through history when pressing up on the first line, and only going forward through history when pressign down on the last line.
------- Comment #2 From 2009-11-18 15:27:04 PST -------
Created an attachment (id=43468) [details]
[IMAGE] "Console log" vs "Snippet editor"

Note the tabs in the bottom. First is classical log, rest are multiline snippet editors.
------- Comment #3 From 2009-11-18 15:36:25 PST -------
Created an attachment (id=43469) [details]
[IMAGE] Snippet editor has debugger capabilities.
------- Comment #4 From 2009-11-18 15:39:59 PST -------
(In reply to comment #3)
> Created an attachment (id=43469) [details] [details]
> [IMAGE] Snippet editor has debugger capabilities.

"Elements" panel selected makes things look confusing. Maybe hide toolbar? But given that the user explicitly got there via selecting "Snippet 1" and console animated to full screen, it is no longer that confusing...

Anyway. Thoughts?
------- Comment #5 From 2009-11-18 15:55:45 PST -------
(Last note before the day is over here.)

Let me iterate over the rationale once again:
- I don't think that history is useful of multiline console entries.
- I think of multiline console entries as of snippets, little programs as Joe has shared.
- I'd like user to be able to run such snippets and even debug them (i.e. break on errors)

Now I am not sure that screenshots that I attached describe good solution, but they at least made me think about the problem :) It does not really make much sense to introduce such a complexity in the console view, especially when it is opened for Elements Panel. My second screenshot is especially not good about it. At the same time, it would fit the Scripts panel well.

Imagine that:
- in addition to the existing scripts in the combo box, you have a number of editable ones.
- for them 'play/pause' button is available
- you get full-blown debugging functionality on these
- results are still dumped into the console
------- Comment #6 From 2009-11-19 07:21:58 PST -------
Joseph suggested to jump in here since it might interest me, so here I am!

Some quick observations first:

- when integrating multiline into the actual same state of the console input, navigating through history still needs to be possible, so here I like Timothy's idea of only going through history when the first line has been reached

- it seems there are essentially two things we're doing here:

1. We are making sure the single line state of the console handles multi line input gracefully
2. We might want to introduce another, more textarea like state of the console input, which potential debugging capabilities

Firebug solved the first issue by..well, not solving it :) It just triggers the second state (multiline) as soon as it recognizes multi line input in the console.

Concerning 2):

- One option is to make more use of the horizontal screen real estate, since horizontal screen estate is "cheap" on normal screens, vertical is expensive (one of the reasons bug 30282 is needed) - meaning the multiline console would open as a side pane, as it does in Firebug. However, this approach has the disadvantage that in editor terms, horizontal space is extremely important

- Another option would be to make the little icon in front of the input a toggler, and when toggled, the input would transform into a textarea, effectively hiding the rest (so you'd have a full screen editor). This obviously has the extreme downside that you don't see the output without switching back.

- The third option is to do another vertical pane, so console/input would be split vertically when hitting the toggler - this would possibly work well if the Web Inspector is opened in a new window and the new console full screen mode is used, but in any other modes, it would be pretty unusable

I don't know what's best yet, these are only a couple of reflections. I'll talk to my collegues and see if they have a good idea. This multiline feature of Firebug is btw used a lot in Frontend conference presentations - if we can make it look awesome, it's a win-win situation.
------- Comment #7 From 2009-11-19 08:23:14 PST -------
I agree with Paul, I see us doing two things. Fixing existing multi-line to work better when using the up/down arrow keys. And addign a new snippet feature.
------- Comment #8 From 2009-11-21 09:01:39 PST -------
(In reply to comment #1)
> We should let you use the arrow keys inside this code to move between lines.
> Only going back through history when pressing up on the first line, and only
> going forward through history when pressign down on the last line.

See the patch on:
https://bugs.webkit.org/show_bug.cgi?id=31400

This bug has turned into a Snippet feature, which is a great idea. =)
------- Comment #9 From 2011-01-27 09:00:04 PST -------
Created an attachment (id=80336) [details]
Snippet editor is closed
------- Comment #10 From 2011-01-27 09:00:49 PST -------
Created an attachment (id=80337) [details]
[IMAGE] Snippet editor is opened
------- Comment #11 From 2011-01-27 09:09:00 PST -------
* Add "show/hide snippet editor" button next to "show/hide console".
* Snippet editor is shown on the right side of console drawer and has text are and "run" button
* When snippet editor is visible, you can still see classic console drawer at the left side, and you can also use classic command line to execute short commands while editing the snippet (firebug blocks command line input when editor is visible)