DevTools/Features/ViewSource

< DevTools‎ | Features
Revision as of 14:48, 23 May 2011 by Kdangoor (talk | contribs)
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?) 1
  • Ability to open source links in separate tabs in the view source window (for example, if you want to open the CSS in a separate tab while keeping the HTML source open in the first tab)
  • 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)
  • HTML/CSS/JS error reporting 2

Footnotes:

  1. Opening in a separate window should be the default, with the ability to drag into a tab. If the user does drag to a tab, we should remember that and open in tabs by default.
  2. Henri Sivonen's redo of view source using the HTML5 parser can produce HTML error reports

Next Steps

  • Feedback from dev-apps-firefox
  • Choose developers
  • Performance evaluation of HTML5 view source and Orion
    • Extreme case 1: 10MB HTML file on a single line
    • Extreme case 2: 100000 line HTML file
  • Determine security and QA contacts

Related Bugs & Dependencies

View Source Status

Other notable bugs:

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