1522049 - [experiment] Migrate to Monaco Editor

Status: NEW

(DevTools :: Netmonitor, enhancement, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

The goal is replacing existing CodeMirror editor used to render HTTP responses (with color highlighting) by Monaco Editor and learn which editor is more suitable for DevTools.

Note that there are other panels (e.g. Console, Debugger, Style Editor) that would benefit from better alternative too.

https://github.com/Microsoft/monaco-editor
https://www.npmjs.com/package/monaco-editor

This experiment should answer some questions:

1. Is Monaco good at a11y?
2. Is Monaco's performance better?
3. Does Monaco have some extra features DevTools would benefit from? (search, navigation, auto-completion, etc.)
4. Does Monaco integrate with DevTools well (e.g. does it offer API we need, is it customizable enough?)

--

Some links to the code base:

1. The Network panel implements SourceEditor (React component) that wraps CodeMirror editor

https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/components/SourceEditor.js

(it actually wraps "devtools/client/sourceeditor/editor" that is another wrapper for CodeMirror)

We could try to refactor this component and use Monaco instead.

2. Here is the place where Network monitor is using the SourceEditor component for rendering responses.

https://searchfox.org/mozilla-central/rev/6c784c93cfbd5119ed07773a170b59fbce1377ea/devtools/client/netmonitor/src/components/PropertiesView.js#120

---

There was already one experiment trying to replace CM in the Debugger panel. Could be good source of inspiration:

https://github.com/devtools-html/debugger.html/pull/6906/files

Honza

Comment 1

[Erik Carrillo [:E_Carr]]

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #0)

The goal is replacing existing CodeMirror editor used to render HTTP responses (with color highlighting) by Monaco Editor and learn which editor is more suitable for DevTools.

Note that there are other panels (e.g. Console, Debugger, Style Editor) that would benefit from better alternative too.

https://github.com/Microsoft/monaco-editor
https://www.npmjs.com/package/monaco-editor

This experiment should answer some questions:

1. Is Monaco good at a11y?
2. Is Monaco's performance better?
3. Does Monaco have some extra features DevTools would benefit from? (search, navigation, auto-completion, etc.)
4. Does Monaco integrate with DevTools well (e.g. does it offer API we need, is it customizable enough?)

--

Some links to the code base:

1. The Network panel implements SourceEditor (React component) that wraps CodeMirror editor

https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/components/SourceEditor.js

(it actually wraps "devtools/client/sourceeditor/editor" that is another wrapper for CodeMirror)

We could try to refactor this component and use Monaco instead.

2. Here is the place where Network monitor is using the SourceEditor component for rendering responses.

https://searchfox.org/mozilla-central/rev/6c784c93cfbd5119ed07773a170b59fbce1377ea/devtools/client/netmonitor/src/components/PropertiesView.js#120

---

There was already one experiment trying to replace CM in the Debugger panel. Could be good source of inspiration:

https://github.com/devtools-html/debugger.html/pull/6906/files

Honza

Hello, I am an Outreachy applicant looking to make my first contribution. Would this be ideal as my first bug? If so, I'd love to take on this responsibility. Thanks.

Comment 2

[Patrick Brosset <:pbro>]

Hi Erik. I'm just checking if you are still interested in working on this bug. There hasn't been any activity here for some time. If you just need more time, that's fine. If you, however, are not planning on working on this bug anymore, let us know so it can be made available for others to pick up.