DevTools/Features/CodeEditor
| Feature | Status | ETA | Owner |
| Code Editor | evaluating options | TBD | Kevin Dangoor |
Summary
New developer tools features will provide opportunities for users to work directly with their code from within the browser. We would like for our tools to provide an editing interface that is more suited to editing code than a plain textarea or an HTML WYSIWYG interface.
Features that will take advantage of this editor: Scratchpad, CSS Editor, devtools-oriented View Source.
Team
- Feature Manager: Kevin Dangoor
- Lead Developer: TBD
- QA: TBD
- UX: TBD
- Security: TBD
- Privacy: TBD
- Accessibility: TBD
- Internationalization: TBD
Release Requirements
Because there are "off the shelf" choices for this feature and to help guide discussion of the feature, I am listing the requirements as a table showing which of the choices currently offer each requirement. If a requirement is not presently met by a choice, that does not necessarily eliminate the choice from consideration. That just means that additional work will be required to make that choices a suitable one.
In the table below, "Built-in" refers to the editor that is already built in to Gecko.
| Requirement | Built-in | Ace | Orion | CodeMirror |
| License | Tri | Tri | BSD | Zlib |
| Syntax Highlighting (HTML, JS, CSS) | No | Yes | TBD | Yes |
| Code-oriented indentation(1) | No | Yes | Yes | Yes |
| Gutter with line numbers | No | Yes | Yes | Yes |
| Can set/display breakpoints | No | Yes | Yes | Yes |
| Robust international character support | Yes | No | Yes | TBD |
| RTL support | Yes | No | TBD | TBD |
| Accessible | Yes | No | TBD | TBD |
| Responsive editing, even for large files (20,000 lines) | TBD | Yes | Yes | TBD |
Footnotes:
- code oriented indentation means maintaining the indentation level from the previous line and ideally indenting automatically when a new block is started
Desirable qualities, but not required initially:
| Feature | Built-in | Ace | Orion | CodeMirror |
| Bracket/brace matching | No | Yes | TBD | Yes |
| Highlight current line | No | Yes | TBD | Yes |
| Highlight occurrences of word/symbol | No | Yes | TBD | TBD |
| Code folding | No | Yes(1) | No | No |
| Autocompletion | No | No | TBD | Yes |
| JavaScript syntax checking | No | Yes | No | TBD |
| Reconfigurable keybindings (vi/emacs possible) | No | Yes | No | No |
Footnotes:
- "Unstructured" or "user" folding was just contributed during the week of April 25th
Next Steps & Open Issues
- Finish populating the tables in the previous section
- Decide the path forward with the best combination of tradeoffs
Using the User's Editor
The Firefox Add-on "It's All Text!" allows users to launch their editor of choice to edit the contents of any textarea. The external editor is launched with a temporary file and that file is reloaded into the textarea when the user returns to the browser. (I don't know if and when those files are cleaned up.)
The positive aspect of this approach is that the user can use the editor that they're already comfortable with and for which they've developed muscle memory. The downside is that there's no real integration between the developer tools and the editor. You can't, for example, set a breakpoint from within the editor or see CSS changes instantly in the browser.
A hybrid approach where editor plugins connect via a remote debugging protocol to the browser is possible, but would require considerable effort to create and maintain support for each editor. Even with that effort, it will be nearly impossible to provide the same level of integration with the developer tools even for a single editor.
Related Bugs & Dependencies
TBD