Canmove, confirm, emeritus
1,093
edits
Changes
Created page with "{| class="fullwidth-table" |- | style="font-weight: bold; background: #DDD;" | Feature | style="font-weight: bold; background: #DDD;" | Status | style="font-weight: bold; backgro..."
{| class="fullwidth-table"
|-
| style="font-weight: bold; background: #DDD;" | Feature
| style="font-weight: bold; background: #DDD;" | Status
| style="font-weight: bold; background: #DDD;" | ETA
| style="font-weight: bold; background: #DDD;" | Owner
|-
<section begin="status" />
| [[DevTools/Features/CodeEditor|Code Editor]]
| {{StatusHealthy|status=evaluating options}}
| TBD
| Kevin Dangoor
<section end="status" />
|-
|}
== 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.
{| class="fullwidth-table"
|-
| style="font-weight: bold; background: #DDD;" | Requirement
| style="font-weight: bold; background: #DDD;" | Built-in
| style="font-weight: bold; background: #DDD;" | [http://ace.ajax.org Ace]
| style="font-weight: bold; background: #DDD;" | [http://eclipse.org/orion Orion]
| style="font-weight: bold; background: #DDD;" | [http://codemirror.net/ CodeMirror]
|-
| License
| Tri
| Tri
| EPL(1)
| MIT
|-
| Syntax Highlighting (HTML, JS, CSS)
| No
| Yes
| TBD
| Yes
|-
| Code-oriented indentation(2)
| 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:
# The Eclipse Public License appears to be incompatible with the tri-license
# 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:
{| class="fullwidth-table"
|-
| style="font-weight: bold; background: #DDD;" | Feature
| style="font-weight: bold; background: #DDD;" | Built-in
| style="font-weight: bold; background: #DDD;" | [http://ace.ajax.org Ace]
| style="font-weight: bold; background: #DDD;" | [http://eclipse.org/orion Orion]
| style="font-weight: bold; background: #DDD;" | [http://codemirror.net/ 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 [https://addons.mozilla.org/en-us/firefox/addon/its-all-text/ "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
__NOTOC__
[[Category:Features]]
[[Category:Firefox]]
[[Category:DevTools]]
|-
| style="font-weight: bold; background: #DDD;" | Feature
| style="font-weight: bold; background: #DDD;" | Status
| style="font-weight: bold; background: #DDD;" | ETA
| style="font-weight: bold; background: #DDD;" | Owner
|-
<section begin="status" />
| [[DevTools/Features/CodeEditor|Code Editor]]
| {{StatusHealthy|status=evaluating options}}
| TBD
| Kevin Dangoor
<section end="status" />
|-
|}
== 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.
{| class="fullwidth-table"
|-
| style="font-weight: bold; background: #DDD;" | Requirement
| style="font-weight: bold; background: #DDD;" | Built-in
| style="font-weight: bold; background: #DDD;" | [http://ace.ajax.org Ace]
| style="font-weight: bold; background: #DDD;" | [http://eclipse.org/orion Orion]
| style="font-weight: bold; background: #DDD;" | [http://codemirror.net/ CodeMirror]
|-
| License
| Tri
| Tri
| EPL(1)
| MIT
|-
| Syntax Highlighting (HTML, JS, CSS)
| No
| Yes
| TBD
| Yes
|-
| Code-oriented indentation(2)
| 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:
# The Eclipse Public License appears to be incompatible with the tri-license
# 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:
{| class="fullwidth-table"
|-
| style="font-weight: bold; background: #DDD;" | Feature
| style="font-weight: bold; background: #DDD;" | Built-in
| style="font-weight: bold; background: #DDD;" | [http://ace.ajax.org Ace]
| style="font-weight: bold; background: #DDD;" | [http://eclipse.org/orion Orion]
| style="font-weight: bold; background: #DDD;" | [http://codemirror.net/ 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 [https://addons.mozilla.org/en-us/firefox/addon/its-all-text/ "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
__NOTOC__
[[Category:Features]]
[[Category:Firefox]]
[[Category:DevTools]]
