commit 6d6b71f2b65384bf812007b9dee9b2a9c899efc2
parent e835bebd765921bb897870f6c5f861761f4e3289
Author: Hubert Boma Manilla <hmanilla@mozilla.com>
Date: Tue, 30 Sep 2025 15:18:45 +0000
Bug 1979902 - [devtools] Enable codemirror 6 default search for the source preview r=devtools-reviewers,nchevobbe
To test, check the codemirror view in the Netmonitor's response panel
Differential Revision: https://phabricator.services.mozilla.com/D259086
Diffstat:
6 files changed, 56 insertions(+), 6 deletions(-)
diff --git a/devtools/client/debugger/src/utils/editor/create-editor.js b/devtools/client/debugger/src/utils/editor/create-editor.js
@@ -21,6 +21,8 @@ export function createEditor(config = { cm6: false }) {
return new SourceEditor({
mode: SourceEditor.modes.javascript,
foldGutter: features.codeFolding,
+ disableSearchAddon: false,
+ useSearchAddonPanel: false,
enableCodeFolding: features.codeFolding,
readOnly: true,
lineNumbers: true,
diff --git a/devtools/client/netmonitor/src/components/TabboxPanel.js b/devtools/client/netmonitor/src/components/TabboxPanel.js
@@ -109,6 +109,11 @@ class TabboxPanel extends Component {
closeOnEsc(event) {
if (event.key == "Escape") {
event.preventDefault();
+ // Don't take focus when the keyboard shortcut is triggered in a CodeMirror instance,
+ // so the CodeMirror search UI is closed.
+ if (event.target.closest(".cm-search")) {
+ return;
+ }
this.props.openNetworkDetails(false);
}
}
diff --git a/devtools/client/netmonitor/src/components/previews/SourcePreview.js b/devtools/client/netmonitor/src/components/previews/SourcePreview.js
@@ -72,6 +72,8 @@ class SourcePreview extends Component {
cm6: true,
lineNumbers: true,
lineWrapping: false,
+ disableSearchAddon: false,
+ useSearchAddonPanel: true,
mode: null, // Disable auto syntax detection, but then we set the mode later
readOnly: true,
theme: "mozilla",
diff --git a/devtools/client/netmonitor/test/browser_net_large-response.js b/devtools/client/netmonitor/test/browser_net_large-response.js
@@ -77,7 +77,7 @@ add_task(async function () {
getCMEditor(monitor).focus();
synthesizeKeyShortcut("CmdOrCtrl+F");
const searchInput = await waitFor(() =>
- document.querySelector(".cm-editor input[type=search]")
+ document.querySelector(".cm-editor .cm-search input.cm-textfield")
);
Assert.equal(
searchInput.ownerDocument.activeElement,
diff --git a/devtools/client/shared/sourceeditor/codemirror/mozilla.css b/devtools/client/shared/sourceeditor/codemirror/mozilla.css
@@ -112,9 +112,9 @@
}
/* Search highlight style
- * cm-searching is used in Style Editor, and cm-highlight in Debugger */
+ * cm-searching is used in Style Editor, cm-highlight in Debugger and searchMatch in Netmonitor */
.cm-searching,
-.cm-highlight {
+.cm-highlight, .cm-editor .cm-searchMatch {
border-bottom: 1px solid var(--theme-contrast-border);
/* Use the translucent yellow background, because we want the text selection
background (CodeMirror-selected) to show through this. */
@@ -377,7 +377,7 @@
}
/* CodeMirror matchhighlight styling */
-.cm-matchhighlight, .cm-selectionMatch {
+.cm-matchhighlight, .cm-searchMatch-selected {
outline: 1px solid var(--theme-contrast-border);
border-radius: 2px;
/* Override cm6 inline */
@@ -453,6 +453,12 @@
font-family: unset;
}
+/* Remove the default selection match background, as search results might have the
+.cm-selectionMatch class after the current search term has been removed, these should not be styled`` */
+.cm-editor .cm-selectionMatch {
+ background-color: transparent;
+}
+
.cm-editor .cm-selectionBackground {
background: var(--theme-text-selection-background) !important;
}
@@ -549,3 +555,26 @@
background-color: transparent;
}
}
+
+.cm-editor .cm-panels {
+ background-color: var(--theme-toolbar-background);
+ color: var(--theme-body-color);
+}
+
+.cm-editor .cm-panels-top {
+ border-color: var(--theme-splitter-color);
+}
+
+/* Default search panel */
+.cm-search .cm-textfield {
+ width: 100%;
+ font-size: inherit;
+ background-color: transparent;
+ border-color: var(--theme-splitter-color);
+ margin: 0 !important;
+}
+
+/* Hide all other elements of the search except the text input */
+.cm-search .cm-button, .cm-search label, .cm-search button[name="close"] {
+ display: none;
+}
diff --git a/devtools/client/shared/sourceeditor/editor.js b/devtools/client/shared/sourceeditor/editor.js
@@ -273,8 +273,13 @@ class Editor extends EventEmitter {
autocompleteOpts: {},
// Expect a CssProperties object (see devtools/client/fronts/css-properties.js)
cssProperties: null,
- // Set to true to prevent the search addon to be activated.
+ // Set to `true` to prevent the search addon to be activated.
disableSearchAddon: false,
+ // When the search addon is activated (i.e disableSearchAddon == false),
+ // `useSearchAddonPanel` determines if the default search panel for the search addon should be used.
+ // Set to `false` when a custom search panel is used.
+ // Note: This can probably be removed when Bug 1941575 is fixed, and custom search panel is used everywhere
+ useSearchAddonPanel: true,
maxHighlightLength: 1000,
// Disable codeMirror setTimeout-based cursor blinking (will be replaced by a CSS animation)
cursorBlinkRate: 0,
@@ -739,7 +744,7 @@ class Editor extends EventEmitter {
placeholder,
},
codemirrorState: { EditorState, Compartment, Prec },
- codemirrorSearch: { highlightSelectionMatches },
+ codemirrorSearch: { search, searchKeymap, highlightSelectionMatches },
codemirrorLanguage: {
syntaxTreeAvailable,
indentUnit,
@@ -845,6 +850,13 @@ class Editor extends EventEmitter {
codemirror.minimalSetup,
];
+ if (!this.config.disableSearchAddon && this.config.useSearchAddonPanel) {
+ this.config.keyMap = this.config.keyMap
+ ? [...this.config.keyMap, ...searchKeymap]
+ : [...searchKeymap];
+ extensions.push(search({ top: true }));
+ }
+
if (this.config.placeholder) {
extensions.push(placeholder(this.config.placeholder));
}
