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
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.
Created attachment 22149 [details] screenshot screenshot of patch in action
Created attachment 22150 [details] better screenshot
Thanks, it looks really better. For undefined, let's talk in bug 19932.
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!
(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.
Created attachment 22158 [details] Original Design
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"
Created attachment 22196 [details] Fixed change log I fixed the change log.
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.
(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.
Created attachment 28127 [details] Proposed Patch
Created attachment 28128 [details] Screenshot of new design
Fixed in r41352.