Firefox/Projects/Console: Difference between revisions

m
 
(16 intermediate revisions by one other user not shown)
Line 2: Line 2:


== Interactive Console, 'HeadsUpDisplay' ==
== Interactive Console, 'HeadsUpDisplay' ==
NOTE: the "HeadsUpDisplay" moniker is going away soon for L10N reasons among others.


Create an interactive Console to help web developers understand everything that happens during the creation of a web-page. Console entries will be time-stamped objects representing errors, network traffic, javascript events, DOM/HTML mutation and logging output. The Console will also have an interactive command line for evaluating javascript against the current webpage and an interactive Workspace window for entering and evaluating larger blocks of code.  
Create an interactive Console to help web developers understand everything that happens during the creation of a web-page. Console entries will be time-stamped objects representing errors, network traffic, javascript events, DOM/HTML mutation and logging output. The Console will also have an interactive command line for evaluating javascript against the current webpage and an interactive Workspace window for entering and evaluating larger blocks of code.  
Line 7: Line 9:
For web-developers, the Console should include a logging API and a richer interactive environment for executing live javascript against the active webpage.  
For web-developers, the Console should include a logging API and a richer interactive environment for executing live javascript against the active webpage.  


The Console should fully-replace the existing Error Console window.  
The Console should fully-replace the existing Error Console window.
 
HG Repo: [http://hg.mozilla.org/users/ddahl_mozilla.com/heads-up-display/]


== Goals/Use Cases  ==
== Goals/Use Cases  ==
Line 25: Line 29:
== Status  ==
== Status  ==


<onlyinclude>Latest work and patches on {{bug|534398}}. New patch up and needs review. Would be nice top get review from a platform person - perhaps with networking / ImgRequest knowledge</onlyinclude>
<onlyinclude>Fx4b5 includes filtering and object inspection</onlyinclude>
 
* Figuring out ImgRequest logging, where I need to tie an ImgRequest back to the origninating contentWindow.


* Cannot capture all CSS and JS errors: see {{bug|567165}}
Development is ongoing, led by ddahl.


== Timeline / Milestones  ==
== Timeline / Milestones  ==
Line 51: Line 53:
* JS command line history [needs work]
* JS command line history [needs work]


'''milestone 0.4 - CURRENT WORK''' - '''Items that need to be finished before we call this landable or "beta-quality", etc:'''
'''milestone 0.4''' ['''done'''] ['''Landed on Trunk''']
* Exception Listener to surface all exceptions, css warnings, etc... ['''done''']
* Exception Listener to surface all exceptions, css warnings, etc... ['''done''']
* Attach console input to console UI: the "JSTerm" object should be able to be used as either an input for the console or a JS Workspace (modularization) ['''done''']
* Attach console input to console UI: the "JSTerm" object should be able to be used as either an input for the console or a JS Workspace (modularization) ['''done''']
Line 64: Line 66:
* Remove JS Workspace ['''done''']
* Remove JS Workspace ['''done''']


'''Land on trunk after 0.4 reviews''' - '''Estimated Date''': 2010-06-11
== Top Features List ==


'''Re-evaluate the following milestones after review process'''
'''TOP 5 Features [IN FLUX] - (all else is secondary)'''
*1. Logging of tab-specific activity
*2. Deeper inspection of logged data: clickable/inspectable objects
*3. Interactivity in console: command line commands: find, inspect, pprint, etc... / console input expands/shrinks based on user input
*4. Console->Inspector, Inspector->console communication
*5. Console Snippet Editor: keep code snippets around for later editing and execution. (robcee will give a smalltalk demo that will inform this idea at the summit)


'''NEXT/Future TASKS/Feature List'''
== Bug Prioritization ==


'''Top Blockers for release: P1'''
'''Top Blockers for release'''
* Network traffic logging seems is missing image traffic ['''in progress'''] ['''need platform help'''] see {{bug|568034}}
'''P1'''
* Identification of CSS Parser error originating contentWindow ['''need platform help'''] {{bug|567165}}  
* Network traffic logging seems is missing image traffic ['''in progress'''] ['''need platform help'''] see {{bug|568034}} ['''Needs Platform Help''']
* Identification of JS exception originating contentWindow ['''need platform help'''] {{bug|567165}}
* Identification of JS Exception and CSS Parser error originating contentWindow ['''need platform help'''] {{bug|567165}} ['''Needs Platform Help''']
* Storage and removal of DOM Mutation Listeners ['''in progress'''] {{bug|568658}}
* Network activity does not yet identify child iframe network requests as originating from a "watched" loadGroup. {{bug|568643}}
* Always on C++ XPCOM Console Service that can be observed by this console, firebug or any other developer tools. {{bug|568629}} {{bug|578353}} ['''in discussion''']


'''P2'''
'''P2'''
* JS Workspaces polish: key bindings, history, tab completion
* Rename Heads Up Display menu to "Web Console" && rename all identifiers and files from 'HUD*' to "WebConsole*" {{bug|574628}} ['''in progress''']
* UI polish: make the Console input widget blend in better for both Console and JS Workspace.
* JS Workspaces polish: key bindings, history, tab completion {{bug|568652}}, {{bug|568649}} ['''done''']
* Firefox UI front-end implementation (XBL interface creation)
* Copy output to clipboard support {{bug|574036}} ['''done''']
* JS Object property inspector {{bug|573102}} ['''done''']
* console helper commands: find, inspect, pprint {{bug|575789}} ['''in progress''']
* UI polish: make the Console input widget blend in better for both Console and JS Workspace. ['''in progress''']
* add links to view source in console  
* add links to view source in console  
* Firefox UI front-end planning/brainstorm/mockups {{bug|559481}} {{bug|559482}} ['''met with UX''']
* Firefox UI front-end planning/brainstorm/mockups {{bug|559481}} {{bug|559482}} ['''met with UX''']
* Global message interleaving needs to cleanly turn on and off.
* Make sure the preference observer that toggles the HUD on and off works properly.
'''Estimated time:''' 2 weeks
* Popup menus to expose additional functionality
* Popup menus to expose additional functionality
** create popup menu for workspaces, eg file, edit, evaluate
** create popup menu for workspaces, eg file, edit, evaluate
** create popup menu for console content area
** create popup menu for console content area
** edit (copy / paste), save (import(?), apply(?) for later)
** edit (copy / paste) ['''done'''], save (import(?), apply(?) for later)
* Network activity does not yet identify child iframe network requests as originating from a "watched" loadGroup.
 
'''Estimated Time:''' 1 Week
 
* Jetpack Integration: Logging console in a new window
** JS Workspace for Jetpack dev/build tasks


''JS Workspace notes'''
'''P3'''
* We should steal every delicious piece of Jesse's js shell - utility functions (print(obj), blink(domEl), load(scriptURL)), tab completion - all of it.
* Firefox UI front-end implementation (XBL interface creation) ['''needs discussion''']
* We should also steal convenience things like "$ = document.querySelector" and "$$ = document.getElementByID", but post-beta.
* console command line "injection API": make extensibility API


'''Estimated time''' 2 weeks
== Future Concepts ==


* new JSD api integeration, basic debugger - gdb style
'''FUTURE'''
* new JSD api integeration, basic debugger - gdb style?? Perhaps not?
** (dependant on JS module work to create this new api)
** (dependant on JS module work to create this new api)
'''Estimated time:''' No idea: PLATFORM Dependency
* console command line aliases, magic and "injection API": make extensibility API for Gecko apps, Jetpack
* Refactor HeadsUpDisplay.jsm to not be Firefox-specific
* GeckoApplication "Mixins": allow any Gecko application (beginning with Firefox) to insert UI and JS Context hooks
* GeckoApplication "Mixins": allow any Gecko application (beginning with Firefox) to insert UI and JS Context hooks
** {{bug|453650}}
** {{bug|453650}}
'''Estimated time:''' 2 weeks
* Fennec Integration / remote logging/ debugging
* Fennec Integration / remote logging/ debugging
** remote logging interface pushes log entries to remote http server
** remote logging interface pushes log entries to remote http server
 
* Functionality to revisit:
** Storage and removal of DOM Mutation Listeners ['''in progress'''] {{bug|568658}}
** JS Workspace implementation
** Global console and global message interleaving needs to cleanly turn on and off.
** Make sure the preference observer that toggles the HUD on and off works properly.
** Jetpack Integration: Logging console in a new window
*** JS Workspace for Jetpack dev/build tasks
* Refactor HeadsUpDisplay.jsm to not be Firefox-specific
* Create event for Reflow  
* Create event for Reflow  
* more events! (perhaps W3C Timing Spec)


== Delivery Requirements ==
''JS Workspace notes'''
 
* We should steal every delicious piece of Jesse's js shell - utility functions (print(obj), blink(domEl), load(scriptURL)), tab completion - all of it.
* Talked to jst about using an observer to instantiate our console object inside of the nsIDOMWindow's constructor to really make our implementation not have to deal with wrappers (or the details of) so much. This may be a mute point thanks to sicking's patch on {{bug|549539}}
* We should also steal convenience things like "$ = document.querySelector" and "$$ = document.getElementByID", but post-beta.


== Constraints ==
== Constraints ==
Line 133: Line 132:
== Dependencies ==
== Dependencies ==


JSD API: {{bug|560314}}
JSD2 API: {{bug|560314}} - although we are not sure how much debugger integration we will have on round 1.


== Testing ==
== Testing ==
Line 157: Line 156:


* '''Project Lead''': robc
* '''Project Lead''': robc
* '''Participants''': ddahl
* '''Participants''': ddahl, jviereck
 
== Screenshots  ==
 
[[Image:Console.png|Console Screenshot]]


== Screenshot ==


[[Image:JSTerm.png|JS Workspace Screenshot]]<br>
[[Image:Console-screen2.png|Console Screenshot]]


== Additional Thoughts ==
== Additional Thoughts ==
canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093

edits