DevTools/Features/ViewSource: Difference between revisions

mNo edit summary
No edit summary
 
(11 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{| class="fullwidth-table"
{{FeatureStatus
|-
|Feature name=View Source Reboot
| style="font-weight: bold; background: #DDD;" | Feature
|Feature stage=Draft
| style="font-weight: bold; background: #DDD;" | Status
|Feature health=OK
| style="font-weight: bold; background: #DDD;" | ETA
|Feature status note=Feedback and discussion on dev-apps-firefox.
| style="font-weight: bold; background: #DDD;" | Owner
}}
|-
{{FeatureTeam
<section begin="status" />
|Feature product manager=Kevin Dangoor
| [[DevTools/Features/ViewSource|View Source Reboot]]
|Feature feature manager=Kevin Dangoor
| {{StatusHealthy|status=Planning}}
}}
| YYYY-MM-DD
{{FeaturePageBody
| Kevin Dangoor
|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.
<section end="status" />
|-
|}


== Summary ==
We have an opportunity to:


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:
# 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


* easily extendable with new features
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:
* 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.
* the current DOM structure in the HTML Tree
 
* the Page Inspector, if they want to switch to working on visual problems
== Release Requirements ==
* CSS files, including the ability to edit via the Style Editor
 
Candidate features:


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
* Fast, even on large files
* Performs well for single line files
* Performs well for single line files
* syntax highlighting
* syntax highlighting
* line numbering
** For just HTML and XML? Also for CSS and JS?
* 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
* Open in tab rather than window (open in sidebar option?)
* View "Original" (as downloaded) and "Current" markup (after JS manipulation). The "Current" view would be provided using the [[DevTools/Features/HTMLTreeEditor|HTML Tree]]
* View "Original" (as downloaded) and "Current" source (after JS manipulation)
* Be able to view HTML/JS/CSS
* Optionally beautify HTML/JS/CSS
* Be able to view HTML/JS/CSS/XML/JSON
* Display the image if pointed to an image
* Display the image if pointed to an image
* Block folding
* works without accessing network
* navigate with keyboard and mouse
* navigate with keyboard and mouse
* quick navigation to other files loaded in that tab
* be able to switch from viewing CSS to editing CSS using the [[DevTools/Features/CSSEditor|Style Editor]]


== Next Steps ==
==== Nice to Have ====
These features are desirable but do not absolutely need to be there for the first iteration.


* Evaluate current implementation of view source
* line numbering
* Determine scope/produce mockups
* Open in tab rather than window (open in sidebar option?) <sup>1</sup>
** Pick out high-value view source bugs
* 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)
* Evaluate Ace as a source viewer
* Optionally beautify HTML/JS/CSS
* Determine security and QA contacts
* 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.
== Related Bugs & Dependencies ==
** I believe people want the original source that was loaded, regardless of cache-control
 
* quick navigation to other files loaded in that tab
[http://mozilla.github.com/devtools/2011/status.html#viewsource View Source Status]
* Be able to view JSON/XML (for use as a view elsewhere)
 
* HTML/CSS/JS error reporting <sup>2</sup>
== 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!
 
* Mihai Sucan (irc: msucan), lead developer
* Kyle Simpson (irc: getify), Ace / "current view" developer
* Kevin Dangoor (irc: kdangoor), PM
 
== Designs ==
 
TBD
 
== Goals/Use Cases ==
 
* remain simple for new developers
* lose no features from the current implementation
* provide the basis for source views that will appear elsewhere
 
== Non-Goals ==


TBD
==== More for Further Triage ====


== Other Documentation ==
These came from feedback that Paul Rouget got from Twitter.


TBD
* Disable links so that the text can be selected (view source currently turns all links in the source into active links instead of selectable text... generally the right answer, but some would like to be able to select the text)
* open a link in a new tab (view source in a separate window with this ability sounds very nice!)
* edit source and reload page from edited source
* API for addons to access raw source code
* navigation (awesomebar) in the View Source window
* background color configuration (themes)
* more detailed HTML syntax highlighting (for things like classes and rel which are space separated, for example)
* MDN links for HTML tags, attributes and common microformats
* enable/disable refreshing of the tree if the page is changing
* preview image, video, audio when hovering its link (similar to what Firebug is doing on network panel) with information (dimensions, size, format, compression weight etc.)
* sourcemap support
* beautify compressed source
* search elements with a query selector
* table of contents in a sidebar
* highlight elements on the page if you hover over it in the source
* split window to view multiple sources
* view source in context menu on pages with a canvas covering the page
* some option to show HTTP headers from within view source
* code folding
* url()s in CSS are linked
* ability to jump to the definition of a CSS class on an element
* ability to see the CSS rules applied to an element
* ability to view the event handlers attached to an element
* intra-document navigation via #id URLs
* display favicons as images. right now, view source displays binary data for .ico files
* editing
* breakpoint for DOM mutations
* ability to view source for add-ons


__NOTOC__
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]


[[Category:Feature]]
Other notable bugs:
[[Category:Firefox]]
* {{bug|246620}} add line numbers to view source
[[Category:Priority 1]]
}}
{{FeatureInfo
|Feature priority=Unprioritized
|Feature roadmap=Developer Tools
|Feature list=Desktop
|Feature engineering team=DevTools
}}
{{FeatureTeamStatus}}

Latest revision as of 15:43, 18 October 2011

Please use "Edit with form" above to edit this page.

Status

View Source Reboot
Stage Draft
Status `
Release target `
Health OK
Status note Feedback and discussion on dev-apps-firefox.

{{#set:Feature name=View Source Reboot

|Feature stage=Draft |Feature status=` |Feature version=` |Feature health=OK |Feature status note=Feedback and discussion on dev-apps-firefox. }}

Team

Product manager Kevin Dangoor
Directly Responsible Individual Kevin Dangoor
Lead engineer `
Security lead `
Privacy lead `
Localization lead `
Accessibility lead `
QA lead `
UX lead `
Product marketing lead `
Operations lead `
Additional members `

{{#set:Feature product manager=Kevin Dangoor

|Feature feature manager=Kevin Dangoor |Feature lead engineer=` |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=` |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=` }}

Open issues/risks

`

Stage 1: Definition

1. 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:

  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 Page Inspector, 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.

2. Users & use cases

`

3. Dependencies

`

4. 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 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)
    • what's this about? it already does, unless the page uses cache-control:no-store.
    • I believe people want the original source that was loaded, regardless of cache-control
  • 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

More for Further Triage

These came from feedback that Paul Rouget got from Twitter.

  • Disable links so that the text can be selected (view source currently turns all links in the source into active links instead of selectable text... generally the right answer, but some would like to be able to select the text)
  • open a link in a new tab (view source in a separate window with this ability sounds very nice!)
  • edit source and reload page from edited source
  • API for addons to access raw source code
  • navigation (awesomebar) in the View Source window
  • background color configuration (themes)
  • more detailed HTML syntax highlighting (for things like classes and rel which are space separated, for example)
  • MDN links for HTML tags, attributes and common microformats
  • enable/disable refreshing of the tree if the page is changing
  • preview image, video, audio when hovering its link (similar to what Firebug is doing on network panel) with information (dimensions, size, format, compression weight etc.)
  • sourcemap support
  • beautify compressed source
  • search elements with a query selector
  • table of contents in a sidebar
  • highlight elements on the page if you hover over it in the source
  • split window to view multiple sources
  • view source in context menu on pages with a canvas covering the page
  • some option to show HTTP headers from within view source
  • code folding
  • url()s in CSS are linked
  • ability to jump to the definition of a CSS class on an element
  • ability to see the CSS rules applied to an element
  • ability to view the event handlers attached to an element
  • intra-document navigation via #id URLs
  • display favicons as images. right now, view source displays binary data for .ico files
  • editing
  • breakpoint for DOM mutations
  • ability to view source for add-ons

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

Non-goals

`

Stage 2: Design

5. Functional specification

`

6. User experience design

Stage 3: Planning

7. Implementation plan

`

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

`

Operations review

`

Stage 4: Development

9. Implementation

View Source Status

Other notable bugs:

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |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:

  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 Page Inspector, 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 users and use cases=` |Feature dependencies=` |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 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)
    • what's this about? it already does, unless the page uses cache-control:no-store.
    • I believe people want the original source that was loaded, regardless of cache-control
  • 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

More for Further Triage

These came from feedback that Paul Rouget got from Twitter.

  • Disable links so that the text can be selected (view source currently turns all links in the source into active links instead of selectable text... generally the right answer, but some would like to be able to select the text)
  • open a link in a new tab (view source in a separate window with this ability sounds very nice!)
  • edit source and reload page from edited source
  • API for addons to access raw source code
  • navigation (awesomebar) in the View Source window
  • background color configuration (themes)
  • more detailed HTML syntax highlighting (for things like classes and rel which are space separated, for example)
  • MDN links for HTML tags, attributes and common microformats
  • enable/disable refreshing of the tree if the page is changing
  • preview image, video, audio when hovering its link (similar to what Firebug is doing on network panel) with information (dimensions, size, format, compression weight etc.)
  • sourcemap support
  • beautify compressed source
  • search elements with a query selector
  • table of contents in a sidebar
  • highlight elements on the page if you hover over it in the source
  • split window to view multiple sources
  • view source in context menu on pages with a canvas covering the page
  • some option to show HTTP headers from within view source
  • code folding
  • url()s in CSS are linked
  • ability to jump to the definition of a CSS class on an element
  • ability to see the CSS rules applied to an element
  • ability to view the event handlers attached to an element
  • intra-document navigation via #id URLs
  • display favicons as images. right now, view source displays binary data for .ico files
  • editing
  • breakpoint for DOM mutations
  • ability to view source for add-ons

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

|Feature non-goals=` |Feature functional spec=` |Feature ux design=* Rough wireframe |Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=View Source Status

Other notable bugs:

|Feature landing criteria=` }}

Feature details

Priority Unprioritized
Rank 999
Theme / Goal `
Roadmap Developer Tools
Secondary roadmap `
Feature list Desktop
Project `
Engineering team DevTools

{{#set:Feature priority=Unprioritized

|Feature rank=999 |Feature theme=` |Feature roadmap=Developer Tools |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=DevTools }}

Team status notes

  status notes
Products ` `
Engineering ` `
Security ` `
Privacy ` `
Localization ` `
Accessibility ` `
Quality assurance ` `
User experience ` `
Product marketing ` `
Operations ` `

{{#set:Feature products status=`

|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=` |Feature security health=` |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}