DevTools/Features/ViewSource: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 8: Line 8:
<section begin="status" />
<section begin="status" />
| [[DevTools/Features/ViewSource|View Source Reboot]]
| [[DevTools/Features/ViewSource|View Source Reboot]]
| {{StatusHealthy|status=Planning}}
| {{StatusHealthy|status=Feedback and discussion on dev-apps-firefox}}
| 2011-05-13
| 2011-05-30
| Kevin Dangoor
| Kevin Dangoor
<section end="status" />
<section end="status" />
Line 17: Line 17:
== Summary ==
== Summary ==


View source is one of the most used features by web developers of all levels, especially those getting started. It's also a very "experienced" piece of code. We want to make View Source:
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.


* easily extendable with new features
We have an opportunity to:
* easily reusable for different contexts (source view for debugging, for example)
* better, with long-requested fixes and enhancements


Notably, View Source will also enter the 21st century by adding the ability to look at both the original (as downloaded from the server) and current (after any modifications by JavaScript) source.
# help users of View Source find their way into more powerful tools
# support workflows where the developer has their code (be it HTML, CSS or JS) on their mind first
# 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 ==
== Release Requirements ==


Candidate features:
* this feature should be behind a pref so that it can be turned on when it's ready
 
* Fast, even on large files
* Fast, even on large files
* Performs well for single line files
* Performs well for single line files
* syntax highlighting
* syntax highlighting
* line numbering
* Navigate to other files referenced in the source file
* Navigate to other files referenced in the source file
* Can view selection source
* Can view selection source
* Can do a find in the source text
* 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 [[DevTools/Features/HTMLTreeEditor|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 [[DevTools/Features/CSSEditor|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?)
* Open in tab rather than window (open in sidebar option?)
* View "Original" (as downloaded) and "Current" source (after JS manipulation)
* Optionally beautify HTML/JS/CSS
* Optionally beautify HTML/JS/CSS
* Be able to view HTML/JS/CSS/XML/JSON
* works without accessing network (a much requested feature for View Source)
* Display the image if pointed to an image
* Block folding
* works without accessing network
* navigate with keyboard and mouse
* quick navigation to other files loaded in that tab
* quick navigation to other files loaded in that tab
* Be able to view JSON/XML (for use as a view elsewhere)


== Next Steps ==
== Next Steps ==


* Evaluate current implementation of view source
* Feedback from dev-apps-firefox
* Determine scope/produce mockups
* Choose developers
** Pick out high-value view source bugs
* Evaluate Ace as a source viewer
* Optionally, make changes at lower levels inside the toolkit module, maybe ViewSourceUtils.jsm, to allow the loading of the new View Source devtool, based on a pref.
* Determine security and QA contacts
* Determine security and QA contacts


Line 63: Line 73:
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!
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!


* Mihai Sucan (irc: msucan), lead developer
* Kyle Simpson (irc: getify), Ace / "current view" developer
* Kevin Dangoor (irc: kdangoor), PM
* Kevin Dangoor (irc: kdangoor), PM


== Designs ==
== Designs ==


TBD
[http://mozilla.github.com/devtools/2011/viewsource.html Rough wireframe]


== Goals/Use Cases ==
== Goals/Use Cases ==
Line 75: Line 83:
* remain simple for new developers
* remain simple for new developers
* lose no features from the current implementation
* lose no features from the current implementation
* provide the basis for source views that will appear elsewhere
* potentially provide the basis for source views that will appear elsewhere


== Non-Goals ==
== Non-Goals ==
Line 89: Line 97:
[[Category:Feature]]
[[Category:Feature]]
[[Category:Firefox]]
[[Category:Firefox]]
[[Category:Priority 1]]
[[Category:DevTools]]

Revision as of 18:34, 19 May 2011

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