1890205 - Create Codemirror 6 inline editors for breakpoints panel

Status: RESOLVED FIXED

(DevTools :: Debugger, enhancement)

Description

[Hubert Boma Manilla (:bomsy)]

Create and use Codemirror 6 inline editors for the Conditional Panel and breakpoints list panel.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

for the Breakpoints list panel, maybe we could take the console's approach, which uses a custom element instead of spawning a CodeMirror instance:
Declaration of the custom element: https://searchfox.org/mozilla-central/rev/d23849dd6d83edbe681d3b4828700256ea34a654/devtools/client/webconsole/webconsole-ui.js#592-630
Usage https://searchfox.org/mozilla-central/rev/d23849dd6d83edbe681d3b4828700256ea34a654/devtools/client/webconsole/components/Output/message-types/ConsoleCommand.js#58-64

// This uses a Custom Element to syntax highlight when possible. If it's not
// (no CodeMirror editor), then it will just render text.
const messageBody = createElement(
  "syntax-highlighted",
  null,
  visibleMessageText
);

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1890205 - [devtools] Use CodeMirror 6 to highlight syntax of breakpoint line in Breakpoints panel when cm6 is enabled. r=#devtools-reviewers.

A method is added to the source editor to handle syntax highlighting so we can
handle both cm5 and cm6.

As the rules for syntax highlighting in CodeMirror 6 were all defined in the cm-editor
class, we have to add a specific class that we can target for the previews,
and handle it in the light and dark CSS files.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f9936ec0c851
[devtools] Use CodeMirror 6 to highlight syntax of breakpoint line in Breakpoints panel when cm6 is enabled. r=devtools-reviewers,bomsy.

Comment 4

[tszentpeteri]

https://hg.mozilla.org/mozilla-central/rev/f9936ec0c851