DevTools/Features/CSSSourceMap

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

Status

CSS Source Map
Stage	Definition
Status	`
Release target	`
Health	OK
Status note	`

{{#set:Feature name=CSS Source Map

|Feature stage=Definition |Feature status=` |Feature version=` |Feature health=OK |Feature status note=` }}

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

The Source Map feature adds JavaScript source mapping, which allows JavaScript programmers to get to their original source files for errors, source viewing, etc. The idea is that most deployed JavaScript comes from multiple files that are grouped into one and minified. Sometimes, deployed JavaScript was written in another programming language, such as CoffeeScript.

These same things apply to CSS. LESS, SCSS/SASS and Stylus are alternative languages that compile to CSS and there are tools that will minify CSS files as well.

2. Users & use cases

Minified Files

Users will concatenate and minify their CSS for deployment. If there are errors, they would like to see those errors in the original context. They would also like to be able to use our styling tools with original source as much as possible.

LESS User

Mozilla's webdev group uses LESS.js to assist them in producing CSS. They would like to be able to see errors relative to their LESS files and even edit the LESS files directly in the style editor.

3. Dependencies

`

4. Requirements

1. Support for loading the same Source Mapping format used in DevTools/Features/SourceMap but for CSS
2. Errors in Web Console provide references to the original files
3. Style Inspector links to the original files

Optional:

1. Style Editor support for LESS via add-on

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

`

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |Feature overview=The Source Map feature adds JavaScript source mapping, which allows JavaScript programmers to get to their original source files for errors, source viewing, etc. The idea is that most deployed JavaScript comes from multiple files that are grouped into one and minified. Sometimes, deployed JavaScript was written in another programming language, such as CoffeeScript.

These same things apply to CSS. LESS, SCSS/SASS and Stylus are alternative languages that compile to CSS and there are tools that will minify CSS files as well. |Feature users and use cases===== Minified Files ====

Users will concatenate and minify their CSS for deployment. If there are errors, they would like to see those errors in the original context. They would also like to be able to use our styling tools with original source as much as possible.

LESS User

Mozilla's webdev group uses LESS.js to assist them in producing CSS. They would like to be able to see errors relative to their LESS files and even edit the LESS files directly in the style editor. |Feature dependencies=` |Feature requirements=# Support for loading the same Source Mapping format used in DevTools/Features/SourceMap but for CSS

1. Errors in Web Console provide references to the original files
2. Style Inspector links to the original files

Optional:

1. Style Editor support for LESS via add-on

|Feature non-goals=` |Feature functional spec=` |Feature ux design=` |Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=` |Feature landing criteria=` }}

Feature details

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

{{#set:Feature priority=P3

|Feature rank=2 |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=` }}