Firefox/Projects/Console: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
 
(45 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}}. Review requested. Currently working on 'GlobalConsole' bits</onlyinclude>
<onlyinclude>Fx4b5 includes filtering and object inspection</onlyinclude>


Latest Try Build is here: https://build.mozilla.org/tryserver-builds/ddahl@mozilla.com-HUDConsole0415/
Development is ongoing, led by ddahl.


== Timeline / Milestones  ==
== Timeline / Milestones  ==


'''milestone 0.1'''
'''milestone 0.1''' ['''done''']
* Testing, jsm and component scaffolding: {{bug|545266}} {{bug|546708}}
* Testing, jsm and component scaffolding: {{bug|545266}} {{bug|546708}} ['''done''']
* create proper, threadsafe hud-service
* create proper, threadsafe hud-service
** possibly modify/reuse existing console service to serve our purposes - check.
** possibly modify/reuse existing console service to serve our purposes ['''done''']
** {{bug|534398}}
 
'''milestone 0.2''' ['''done''']
* console reattachment on reload, new window creation ['''done''']
* console panel (preliminary XUL widget) ['''done''']
* add global console object / API [in progress]
 
'''milestone 0.3''' ['''done''']
* LogMessage class: abstract all console message types into a LogMessage object ['''done''']
* HTTP traffic observation and logging ['''done''']
* DOM Mutation event logging ['''done''']
* eval JS from command-line (sandbox) ['''done''']
* "Terminal-like" UI for each "JS context" - "JS Workspaces" ['''done''']
* JS command line history [needs work]


'''milestone 0.2'''
'''milestone 0.4''' ['''done'''] ['''Landed on Trunk''']
* console reattachment on reload, new window creation
* Exception Listener to surface all exceptions, css warnings, etc... ['''done''']
* console panel (preliminary XUL widget)
* 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''']
* add global console object / API
* break bigger files down to stand-alone "support" jsms for easier maintainability and review (with isolated tests) ['''done''']
* (submit for toolkit peer feedback/review) - check.
* Commands need to be bound in the correct scope for all filters and other UI buttons, etc. ['''done''']
* Firefox menu Item to launch the HUD. ['''done''']
* Add a "clear' button to the console ['''done''']
* Timestamping should be millisecond resolution ['''done''']
* Filtering mechanism via the filtering toolbar needs to cleanly turn on and off the various activity observers or LogMessages. (basic On/Off filters for Network, CSSParser, console api, exceptions and global consoleMessages) ['''done''']
* UI polish: make the HeadsUpDisplay smoothly resize it's height. The splitter is open or closed - no in between. ['''done''']
* Filter output on string ['''done''']
* Remove JS Workspace ['''done''']


'''milestone 0.3'''
== Top Features List ==
* ConsoleMessage class: abstract all console message types into a ConsoleMessage object
* HTTP traffic observation and logging
* DOM Mutation event logging
* eval JS from command-line
* "Terminal-like" UI for each "JS context" - "JS Workspaces"
* JS command line history
* GeckoApplication "Mixins": allow any Gecko application (beginning with Firefox) to insert UI and JS Context hooks


'''milestone 0.4 - CURRENT WORK 2010-04-19'''
'''TOP 5 Features [IN FLUX] - (all else is secondary)'''
* Preferences to toggle functionality
*1. Logging of tab-specific activity
* Global Console implementation: interleaves global console service messages that are "content js", "CSS Parser", etc...  messages.
*2. Deeper inspection of logged data: clickable/inspectable objects
** Exception Listener to surface all exceptions, css warnings, etc...
*3. Interactivity in console: command line commands: find, inspect, pprint, etc... / console input expands/shrinks based on user input
* 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)
*4. Console->Inspector, Inspector->console communication
* JS Workspaces polish: key bindings, history, tab completion
*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)
* break bigger files down to stand-alone "support" jsms for easier maintainability and review (with isolated tests)
* Firefox UI front-end planning/brainstorm/mockups {{bug|559481}} {{bug|559482}}
* get reviews from platform people, vlad


'''Land on trunk after 0.4 reviews'''
== Bug Prioritization ==


'''End of Q2??'''
'''Top Blockers for release'''
'''P1'''
* Network traffic logging seems is missing image traffic ['''in progress'''] ['''need platform help'''] see {{bug|568034}} ['''Needs Platform Help''']
* Identification of JS Exception and CSS Parser error originating contentWindow ['''need platform help'''] {{bug|567165}} ['''Needs Platform Help''']
* 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''']


'''milestone 0.5'''
'''P2'''
* evaluate nightly web dev user feedback / refactor (milestone cleanup)
* Rename Heads Up Display menu to "Web Console" && rename all identifiers and files from 'HUD*' to "WebConsole*" {{bug|574628}} ['''in progress''']
* Firefox UI front-end implementation
* JS Workspaces polish: key bindings, history, tab completion {{bug|568652}}, {{bug|568649}} ['''done''']
* add links to view source in console
* 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  
* Firefox UI front-end planning/brainstorm/mockups {{bug|559481}} {{bug|559482}} ['''met with UX''']
* 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)
* Create event for Reflow
* Jetpack Integration
* console command line aliases and magic: make extensibility API for Gecko apps, Jetpack


'''milestone 0.6'''
'''P3'''
* Refactor HeadsUpDisplay.jsm to not be Firefox-specific
* Firefox UI front-end implementation (XBL interface creation) ['''needs discussion''']
** {{bug|453650}}
* console command line "injection API": make extensibility API
* Fennec Integration / remote logging/debugging
* Thunderbird Integration
* W3C Timing Spec??
* more events!


'''milestone 0.7'''
== Future Concepts ==
* ...


== Delivery Requirements ==
'''FUTURE'''
* new JSD api integeration, basic debugger - gdb style?? Perhaps not?
** (dependant on JS module work to create this new api)
* GeckoApplication "Mixins": allow any Gecko application (beginning with Firefox) to insert UI and JS Context hooks
** {{bug|453650}}
* Fennec Integration / remote logging/ debugging
** 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


* 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}}
''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.
* We should also steal convenience things like "$ = document.querySelector" and "$$ = document.getElementByID", but post-beta.


== Constraints ==
== Constraints ==
Line 100: 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 124: 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 ==
Line 137: Line 166:
Chris Blizzard mentioned the "timing" interface Google is working on with the WC3: http://dev.w3.org/2006/webapi/WebTiming/
Chris Blizzard mentioned the "timing" interface Google is working on with the WC3: http://dev.w3.org/2006/webapi/WebTiming/


It appears as thought the timing interface is implemented in Chromium nightlies, it is cool.
It appears as though the timing interface is implemented in Chromium nightlies, it is cool.

Latest revision as of 13:45, 20 August 2010

Do not edit this page RESTRICTED Do not edit this page
Please do not edit this page without permission; comments should be added to the discussion page.

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.

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.

HG Repo: [1]

Goals/Use Cases

  • Replace Error Console
  • Provide rich logging experience for web developers
  • Provide interactive JS editing environment
  • Provide simple object inspection (either via console or separate UI)

Non Goals

  • chrome manipulation
  • provide enough information to actually recreate the webpage from the logs
    • e.g., displaying images in expanded boxes
  • overly pretty display. it's text!

Status

Fx4b5 includes filtering and object inspection

Development is ongoing, led by ddahl.

Timeline / Milestones

milestone 0.1 [done]

  • Testing, jsm and component scaffolding: bug 545266 bug 546708 [done]
  • create proper, threadsafe hud-service
    • possibly modify/reuse existing console service to serve our purposes [done]

milestone 0.2 [done]

  • console reattachment on reload, new window creation [done]
  • console panel (preliminary XUL widget) [done]
  • add global console object / API [in progress]

milestone 0.3 [done]

  • LogMessage class: abstract all console message types into a LogMessage object [done]
  • HTTP traffic observation and logging [done]
  • DOM Mutation event logging [done]
  • eval JS from command-line (sandbox) [done]
  • "Terminal-like" UI for each "JS context" - "JS Workspaces" [done]
  • JS command line history [needs work]

milestone 0.4 [done] [Landed on Trunk]

  • 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]
  • break bigger files down to stand-alone "support" jsms for easier maintainability and review (with isolated tests) [done]
  • Commands need to be bound in the correct scope for all filters and other UI buttons, etc. [done]
  • Firefox menu Item to launch the HUD. [done]
  • Add a "clear' button to the console [done]
  • Timestamping should be millisecond resolution [done]
  • Filtering mechanism via the filtering toolbar needs to cleanly turn on and off the various activity observers or LogMessages. (basic On/Off filters for Network, CSSParser, console api, exceptions and global consoleMessages) [done]
  • UI polish: make the HeadsUpDisplay smoothly resize it's height. The splitter is open or closed - no in between. [done]
  • Filter output on string [done]
  • Remove JS Workspace [done]

Top Features List

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)

Bug Prioritization

Top Blockers for release P1

  • Network traffic logging seems is missing image traffic [in progress] [need platform help] see bug 568034 [Needs Platform Help]
  • Identification of JS Exception and CSS Parser error originating contentWindow [need platform help] bug 567165 [Needs Platform Help]
  • 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

  • Rename Heads Up Display menu to "Web Console" && rename all identifiers and files from 'HUD*' to "WebConsole*" bug 574628 [in progress]
  • JS Workspaces polish: key bindings, history, tab completion bug 568652, bug 568649 [done]
  • 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
  • Firefox UI front-end planning/brainstorm/mockups bug 559481 bug 559482 [met with UX]
  • Popup menus to expose additional functionality
    • create popup menu for workspaces, eg file, edit, evaluate
    • create popup menu for console content area
    • edit (copy / paste) [done], save (import(?), apply(?) for later)

P3

  • Firefox UI front-end implementation (XBL interface creation) [needs discussion]
  • console command line "injection API": make extensibility API

Future Concepts

FUTURE

  • new JSD api integeration, basic debugger - gdb style?? Perhaps not?
    • (dependant on JS module work to create this new api)
  • GeckoApplication "Mixins": allow any Gecko application (beginning with Firefox) to insert UI and JS Context hooks
  • Fennec Integration / remote logging/ debugging
    • 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

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.
  • We should also steal convenience things like "$ = document.querySelector" and "$$ = document.getElementByID", but post-beta.

Constraints

  • Wrappers, but I think this will be a mute point, as mrbkap is close to landing a patch to make contentWindow property attachment "easy" and "fun"
  • Security reviews early and often?

Dependencies

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

Testing

  • now that the testing scaffolding is up, I plan on testing every method written, and am trying to write all of this code with testing on the "front burner"
  • TDD!

Related Projects

Firefox/Projects/Inspector

new JSD API: [2] bug 560314

Related Bugs

Patches on bug 549539 Tracking bug 529086 UX bugs: bug 559481 bug 559482

bug 545266 bug 546708 bug 551056 bug 552140 bug 552143 bug 552144 JSD API: bug 560314

Team

  • Project Lead: robc
  • Participants: ddahl, jviereck

Screenshot

Console Screenshot

Additional Thoughts

Chris Blizzard mentioned the "timing" interface Google is working on with the WC3: http://dev.w3.org/2006/webapi/WebTiming/

It appears as though the timing interface is implemented in Chromium nightlies, it is cool.

Retrieved from "https://wiki.mozilla.org/index.php?title=Firefox/Projects/Console&oldid=246973"