Bug 2032758 Comment 0 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

If `devtools.webconsole.codemirrorNext` is set to true, if I open the Inspector and click on a stylesheet, nothing happens, and I'm seeing the following error in the browser toolbox:

```
TypeError: sourceEditor.setSelection is not a function
    load resource://devtools/client/styleeditor/StyleSheetEditor.sys.mjs:541
    showSummaryEditor resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1813
    setActiveSummary resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1793
    summaryPromise resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1156
    promise callback*#selectEditor resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1151
    #sourceLoaded resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1065
    #addStyleSheetEditor resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:750
    promise resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:576
    #addStyleSheet resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:577
    #handleStyleSheetResource resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1637
    initialize resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:194
    open resource://devtools/client/styleeditor/panel.js:48
    onLoad resource://devtools/client/framework/toolbox.js:2866
```

That's because in the source editor, we check `devtools.webconsole.codemirrorNext` to see if cm6 should be enabled https://searchfox.org/firefox-main/rev/0ae2fcae6a70566ab9e13e401480387b34911bad/devtools/client/shared/sourceeditor/editor.js#105
```js
const PREF_CMNEXT_ENABLED = "devtools.webconsole.codemirrorNext";
```
and https://searchfox.org/firefox-main/rev/0ae2fcae6a70566ab9e13e401480387b34911bad/devtools/client/shared/sourceeditor/editor.js#4198-4207
```js
// Since Editor is a thin layer over CodeMirror some methods
// are mapped directly—without any changes.
if (!Services.prefs.getBoolPref(PREF_CMNEXT_ENABLED)) {
  CM_MAPPING.forEach(name => {
    Editor.prototype[name] = function (...args) {
      const cm = editors.get(this);
      return cm[name].apply(cm, args);
    };
  });
}
```

so here, when opening the Style Editor, we'll miss those mapping, but the Style Editor is only working with cm5, so that's causing problems.
We should rather try to use `this.config.cm6` to apply those mapping
If `devtools.webconsole.codemirrorNext` is set to true, if I open the Inspector and click on a stylesheet location, nothing happens, and I'm seeing the following error in the browser toolbox:

```
TypeError: sourceEditor.setSelection is not a function
    load resource://devtools/client/styleeditor/StyleSheetEditor.sys.mjs:541
    showSummaryEditor resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1813
    setActiveSummary resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1793
    summaryPromise resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1156
    promise callback*#selectEditor resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1151
    #sourceLoaded resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1065
    #addStyleSheetEditor resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:750
    promise resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:576
    #addStyleSheet resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:577
    #handleStyleSheetResource resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:1637
    initialize resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs:194
    open resource://devtools/client/styleeditor/panel.js:48
    onLoad resource://devtools/client/framework/toolbox.js:2866
```

That's because in the source editor, we check `devtools.webconsole.codemirrorNext` to see if cm6 should be enabled https://searchfox.org/firefox-main/rev/0ae2fcae6a70566ab9e13e401480387b34911bad/devtools/client/shared/sourceeditor/editor.js#105
```js
const PREF_CMNEXT_ENABLED = "devtools.webconsole.codemirrorNext";
```
and https://searchfox.org/firefox-main/rev/0ae2fcae6a70566ab9e13e401480387b34911bad/devtools/client/shared/sourceeditor/editor.js#4198-4207
```js
// Since Editor is a thin layer over CodeMirror some methods
// are mapped directly—without any changes.
if (!Services.prefs.getBoolPref(PREF_CMNEXT_ENABLED)) {
  CM_MAPPING.forEach(name => {
    Editor.prototype[name] = function (...args) {
      const cm = editors.get(this);
      return cm[name].apply(cm, args);
    };
  });
}
```

so here, when opening the Style Editor, we'll miss those mapping, but the Style Editor is only working with cm5, so that's causing problems.
We should rather try to use `this.config.cm6` to apply those mapping

Back to Bug 2032758 Comment 0