DevTools/Features/ViewSource

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

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?) ¹
• 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 ²

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

• Rough wireframe

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:

• bug 246620 add line numbers to view source

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 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 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?) ¹
• 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 ²

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:

• bug 246620 add line numbers to view source

|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=` }}