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

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

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

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:

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