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.

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	`

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:

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

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

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

`

Feature details

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

Team status notes

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