DevTools/Features/ViewSource

From MozillaWiki
Jump to: navigation, search
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:

  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

`


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