Firefox/Projects/Console

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

Interactive Console, 'HeadsUpDisplay'

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.

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

Latest work and patches on bug 534398. Review requested from mrbkap. Currently working on Filtering interface

Latest Try Build is here: http://build.mozilla.org/tryserver-builds/ddahl@mozilla.com-HUDConsole0428

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 - CURRENT WORK 2010-04-26 - Items that need to be finished before we call this landable or "beta-quality", etc:

• 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]
• The network traffic logging seems to be missing image traffic [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 DOM Mutation, Network, CSSParser, console api, exceptions and global consoleMessages) [in progress]
• UI polish: make the HeadsUpDisplay smoothly resize it's height. The splitter is open or closed - no in between. [nice to have]
• UI polish: make the Console input widget blend in better for both Console and JS Workspace. [nice to have]
• JS Workspaces polish: key bindings, history, tab completion [nice to have]
• Filter output on string [not started]
• Remove JS Workspace [not started] - 'quick fix' (revisit 'breakout workspace' after beta)

Land on trunk after 0.4 reviews - Estimated Date: 2010-06-04

Estimated Review cycle time: 3 weeks, maybe 4 (the caveat being I am out of the office for 2 weeks starting May 3rd)

Re-evaluate the following milestones after review process

NEXT/Future TASKS/Feature List

• Firefox UI front-end implementation (XBL interface creation)
• Filtering UI and 'Grep' filtering
• add links to view source in console
• 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
  • create popup menu for workspaces, eg file, edit, evaluate
  • create popup menu for console content area
  • edit (copy / paste), 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'

• 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.

Estimated time 2 weeks

• new JSD api integeration, basic debugger - gdb style
  • (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
  • bug 453650

Estimated time: 2 weeks

• Fennec Integration / remote logging/ debugging
  • remote logging interface pushes log entries to remote http server

• Create event for Reflow
• more events! (perhaps W3C Timing Spec)

Delivery Requirements

• 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

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

JSD API: bug 560314

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: [1] 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

Screenshots

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.