canmove, Confirmed users, Bureaucrats and Sysops emeriti
6,906
edits
DevTools/Features/ViewSource: Difference between revisions
Jump to navigation
Jump to search
m
no edit summary
m (clearing in prep for migration to new feature page format) |
mNo edit summary |
||
| Line 1: | Line 1: | ||
{{FeatureStatus | |||
|Feature name=View Source Reboot | |||
|Feature stage=Definition | |||
|Feature health=OK | |||
|Feature status note=Feedback and discussion on dev-apps-firefox. | |||
}} | |||
{{FeatureTeam | |||
|Feature product manager=Kevin Dangoor | |||
|Feature feature manager=Kevin Dangoor | |||
}} | |||
{{FeaturePageBody | |||
|Feature overview=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. | |||
|Feature 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 | |||
** For just HTML and XML? Also for CSS and JS? | |||
* 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 [[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?) <sup>1</sup> | |||
* 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) | |||
** what's this about? it already does, unless the page uses cache-control:no-store. | |||
* 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 <sup>2</sup> | |||
Footnotes: | |||
# 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. | |||
# Henri Sivonen's redo of view source using the HTML5 parser can produce HTML error reports | |||
|Feature ux design=* [http://mozilla.github.com/devtools/2011/viewsource.html Rough wireframe] | |||
|Feature implementation notes=[http://mozilla.github.com/devtools/2011/status.html#viewsource View Source Status] | |||
Other notable bugs: | |||
* {{bug|246620}} add line numbers to view source | |||
}} | |||
{{FeatureInfo | |||
|Feature priority=P1 | |||
|Feature roadmap=Developer Tools | |||
|Feature list=Desktop | |||
|Feature engineering team=DevTools | |||
}} | |||
{{FeatureTeamStatus}} | |||