Bug 19931 – Input should be printed before the output in the console

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Anthony Ricaud]

Like in Firebug and other "shells", the input should be printed before the output.

Actual behaviour :
foo enter_bug.cgi
> console.log('foo')

Desired behaviour :
> console.log('foo')
foo enter_bug.cgi

[Keishi Hattori]

Created attachment 22148 [details]
initial prototype

Here is a quick patch to see what it might look. 

We could add "if (typeof result === "undefined") return;" to match Firebug completely and not print assigned undefineds.

[Keishi Hattori]

Created attachment 22149 [details]
screenshot

screenshot of patch in action

[Keishi Hattori]

Created attachment 22150 [details]
better screenshot

[Anthony Ricaud]

Thanks, it looks really better.

For undefined, let's talk in bug 19932.

[Adam Roben (:aroben)]

Comment on attachment 22148 [details]
initial prototype

+        Fix for https://bugs.webkit.org/show_bug.cgi?id=19931

We usually include the title of the bug, then the URL, like this:

Fix Bug 19931: Input should be printed before the output in the console

<https://bugs.webkit.org/show_bug.cgi?id=19931>

+        * page/inspector/Console.js: Console command line input gets printed immediately.

We normally try to describe the actual changes made here, not what the problem was that inspired the changes. We also try to break up the changes by function, like this:

(WebInspector.Console.prototype._enterKeyPressed): Split the input/output into two pieces. The input is added to the console before it is evaluated. After evaluation the output is added.

+WebInspector.ConsoleCommandResult = function(command, result, formattedResultElement, level)
+{
+    this.command = command;

I don't think we need to pass in and store the command here.

I think ConsoleCommandInput and ConsoleCommandOutput would be better names fro these types than ConsoleCommand and ConsoleCommandResult. What do you think?

I guess there's a chance that some styling will change as a result of this, but it looks like the common cases stay the same.

r- so that the ChangeLog can be fixed up and the new names can be considered. Looking good!

[Timothy Hatcher]

(In reply to comment #5)
> I guess there's a chance that some styling will change as a result of this, but
> it looks like the common cases stay the same.

The styling did change. There is now a divider line between the input and output, which I think makes the output look confusing and was avoided in the original design. See the attached screenshot.

[Timothy Hatcher]

Created attachment 22158 [details]
Original Design

[Timothy Hatcher]

It is not clear where the line that logs the function result came from. Sometimes it is after any console.logs() that the function did, or it is the line right after the input. Look at the screenshot in bug 19931, and you see:

> console.log("hi")
---------
"hi"
---------
undefined

That undefined could be a console.log(undefined). The result is not clearly marked.

I think we need to mark function result lines some how. Or keep the input and function result grouped, but insert the input into the console before the function executes then update the input with the result.

So:

> console.log("hi")
    undefined
--------
    "hi"

[Keishi Hattori]

Created attachment 22196 [details]
Fixed change log

I fixed the change log.

[Anthony Ricaud]

What about something like that :

>  console.log("hi")
     "hi"
->undefined

with -> an arrow like the one in Mail.app when you answer a mail (but reversed).

You get the same visual order as the order that things happen and you have a visual distinction between console.log output and result.

[Timothy Hatcher]

(In reply to comment #10)
> What about something like that :
> 
> >  console.log("hi")
>      "hi"
> ->undefined
> 
> with -> an arrow like the one in Mail.app when you answer a mail (but
> reversed).
> 
> You get the same visual order as the order that things happen and you have a
> visual distinction between console.log output and result.
> 

That might be enough! Maybe clicking the "curled arrow" would scroll to and highlight the original function call for a couple of seconds. THat way, if there is lots of console.logging in the function, you can find the original call quickly.

[Timothy Hatcher]

Created attachment 28127 [details]
Proposed Patch

[Timothy Hatcher]

Created attachment 28128 [details]
Screenshot of new design

[Timothy Hatcher]

Fixed in r41352.