DevTools/Features/ViewSource: Difference between revisions
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= | | {{StatusHealthy|status=Feedback and discussion on dev-apps-firefox}} | ||
| 2011-05- | | 2011-05-30 | ||
| Kevin Dangoor | | Kevin Dangoor | ||
<section end="status" /> | <section end="status" /> | ||
| Line 17: | Line 17: | ||
== Summary == | == Summary == | ||
View | 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: | |||
# 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 == | ||
* 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 | ||
* 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?) | ||
* Optionally beautify HTML/JS/CSS | * Optionally beautify HTML/JS/CSS | ||
* works without accessing network (a much requested feature for View Source) | |||
* works without accessing network | |||
* 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 == | ||
* | * Feedback from dev-apps-firefox | ||
* Choose developers | |||
* | |||
* 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! | ||
* Kevin Dangoor (irc: kdangoor), PM | * Kevin Dangoor (irc: kdangoor), PM | ||
== Designs == | == Designs == | ||
[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: | [[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:
- 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
- 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
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
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