DevTools/Features/ViewSource

From MozillaWiki
< DevTools‎ | Features
Revision as of 18:34, 19 May 2011 by Kdangoor (talk | contribs)
Jump to navigation Jump to search
Feature Status ETA Owner
View Source Reboot Feedback and discussion on dev-apps-firefox 2011-05-30 Kevin Dangoor

Summary

View Source is one of the most used features by web developers of all levels, especially those getting started. For many people who focus on server-side development, View Source is their go-to tool, because it lets them easily see what the server sent their way.

We have an opportunity to:

  1. help users of View Source find their way into more powerful tools
  2. support workflows where the developer has their code (be it HTML, CSS or JS) on their mind first
  3. implement some long-standing feature requests for View Source

As imagined here, a developer can use View Source in Firefox as they always have. Using other developer tools features, they will be able to easily navigate from the original source to:

  • the current DOM structure in the HTML Tree
  • the Highlighter, if they want to switch to working on visual problems
  • CSS files, including the ability to edit via the Style Editor

It's possible to imagine further tool integration with features like the Debugger as those come online.

Release Requirements

  • this feature should be behind a pref so that it can be turned on when it's ready
  • Fast, even on large files
  • Performs well for single line files
  • syntax highlighting
  • Navigate to other files referenced in the source file
  • Can view selection source
  • Can do a find in the source text
  • View "Original" (as downloaded) and "Current" markup (after JS manipulation). The "Current" view would be provided using the HTML Tree
  • Be able to view HTML/JS/CSS
  • Display the image if pointed to an image
  • navigate with keyboard and mouse
  • be able to switch from viewing CSS to editing CSS using the Style Editor

Nice to Have

These features are desirable but do not absolutely need to be there for the first iteration.

  • line numbering
  • Open in tab rather than window (open in sidebar option?)
  • Optionally beautify HTML/JS/CSS
  • works without accessing network (a much requested feature for View Source)
  • quick navigation to other files loaded in that tab
  • Be able to view JSON/XML (for use as a view elsewhere)

Next Steps

  • Feedback from dev-apps-firefox
  • Choose developers
  • Determine security and QA contacts

Related Bugs & Dependencies

View Source Status

Team

Join in on #devtools on irc.mozilla.org or on the dev-apps-firefox newsgroup/mailing list if you'd like to discuss this feature or get involved!

  • Kevin Dangoor (irc: kdangoor), PM

Designs

Rough wireframe

Goals/Use Cases

  • remain simple for new developers
  • lose no features from the current implementation
  • potentially provide the basis for source views that will appear elsewhere

Non-Goals

TBD

Other Documentation

TBD