Bug 1953415 - [devtools] Remove CM5 code related to the Search Component r=devtools-reviewers,ochameau

Differential Revision: https://phabricator.services.mozilla.com/D250298

devtools/client/debugger/src/actions/file-search.js

@@ -11,14 +11,14 @@ import {
 
 import { closeActiveSearch, clearHighlightLineRange } from "./ui";
 
-export function doSearchForHighlight(query, editor, line, ch) {
+export function doSearchForHighlight(query, editor) {
   return async ({ getState, dispatch }) => {
     const sourceTextContent = getSelectedSourceTextContent(getState());
     if (!sourceTextContent) {
       return;
     }
 
-    dispatch(searchContentsForHighlight(query, editor, line, ch));
+    dispatch(searchContentsForHighlight(query, editor));
   };
 }
 
@@ -29,7 +29,7 @@ export function querySearchWorker(query, text, modifiers) {
   };
 }
 
-export function searchContentsForHighlight(query, editor, line, ch) {
+export function searchContentsForHighlight(query, editor) {
   return async ({ getState }) => {
     const modifiers = getSearchOptions(getState(), "file-search");
     const sourceTextContent = getSelectedSourceTextContent(getState());
@@ -39,7 +39,7 @@ export function searchContentsForHighlight(query, editor, line, ch) {
     }
 
     const ctx = { editor, cm: editor.codeMirror };
-    searchSourceForHighlight(ctx, false, query, true, modifiers, line, ch);
+    searchSourceForHighlight(ctx, false, query, true, modifiers);
   };
 }
 

devtools/client/debugger/src/components/Editor/SearchInFileBar.js

@@ -30,10 +30,8 @@ import {
   find,
   findNext,
   findPrev,
-  removeOverlay,
 } from "../../utils/editor/index";
 import { isFulfilled } from "../../utils/async-value";
-import { features } from "../../utils/prefs";
 
 function getSearchShortcut() {
   return L10N.getStr("sourceSearch.search.key2");
@@ -94,7 +92,7 @@ class SearchInFileBar extends Component {
     ) {
       // Do not scroll to the search location, if we just switched a new source
       // and debugger is already paused on a selelcted line.
-      this.doSearch(query, false, !nextProps.isPaused);
+      this.doSearch(query, !nextProps.isPaused);
     }
   }
 
@@ -123,13 +121,8 @@ class SearchInFileBar extends Component {
     if (!editor) {
       return;
     }
-    if (features.codemirrorNext) {
+    editor.clearSearchMatches();
-      editor.clearSearchMatches();
+    editor.removePositionContentMarker("active-selection-marker");
-      editor.removePositionContentMarker("active-selection-marker");
-      return;
-    }
-    const ctx = { editor, cm: editor.codeMirror };
-    removeOverlay(ctx);
   };
 
   closeSearch = e => {
@@ -168,7 +161,7 @@ class SearchInFileBar extends Component {
     }
   };
 
-  doSearch = async (query, focusFirstResult = true, shouldScroll = true) => {
+  doSearch = async (query, shouldScroll = true) => {
     const { editor, modifiers, selectedSourceTextContent } = this.props;
     if (
       !editor ||
@@ -198,7 +191,6 @@ class SearchInFileBar extends Component {
 
     const matches = await this.props.querySearchWorker(query, text, modifiers);
     const results = find(ctx, query, true, modifiers, {
-      focusFirstResult,
       shouldScroll,
     });
     this.setSearchResults(results, matches);
@@ -259,11 +251,7 @@ class SearchInFileBar extends Component {
       return false;
     });
 
-    // The cursor location is set differently for CM5
+    this.setCursorLocation(line, ch, matchContent);
-    if (features.codemirrorNext) {
-      this.setCursorLocation(line, ch, matchContent);
-    }
-
     this.setState({
       results: {
         matches,

devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js

@@ -151,12 +151,7 @@ export class ProjectSearch extends Component {
       this.tooltip = tooltip;
       return;
     }
-    this.props.doSearchForHighlight(
+    this.props.doSearchForHighlight(this.state.query, getEditor());
-      this.state.query,
-      getEditor(),
-      matchItem.location.line,
-      matchItem.location.column
-    );
   };
 
   highlightMatches = lineMatch => {

devtools/client/debugger/src/utils/editor/source-search.js

@@ -3,18 +3,8 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 import buildQuery from "../build-query";
-import { features } from "../prefs";
 import { markerTypes } from "../../constants";
 
-/**
- * @memberof utils/source-search
- * @static
- */
-function getSearchCursor(cm, query, pos, modifiers) {
-  const regexQuery = buildQuery(query, modifiers, { isGlobal: true });
-  return cm.getSearchCursor(regexQuery, pos);
-}
-
 /**
  * @memberof utils/source-search
  * @static
@@ -38,71 +28,6 @@ function isWhitespace(query) {
   return !query.match(/\S/);
 }
 
-/**
- * This returns a mode object used by CodeMirror's addOverlay function
- * to parse and style tokens in the file.
- * The mode object contains a tokenizer function (token) which takes
- * a character stream as input, advances it a character at a time,
- * and returns style(s) for that token. For more details see
- * https://codemirror.net/5/doc/manual.html#modeapi
- *
- * @memberof utils/source-search
- * @static
- */
-function searchOverlay(query, modifiers) {
-  const regexQuery = buildQuery(query, modifiers, {
-    ignoreSpaces: true,
-    // regex must be global for the overlay
-    isGlobal: true,
-  });
-
-  return {
-    token(stream) {
-      // set the last index to be the current stream position
-      // this acts as an offset
-      regexQuery.lastIndex = stream.pos;
-      const match = regexQuery.exec(stream.string);
-      if (match && match.index === stream.pos) {
-        // if we have a match at the current stream position
-        // set the class for a match
-        stream.pos += match[0].length || 1;
-        return "highlight highlight-full";
-      }
-
-      if (match) {
-        // if we have a match somewhere in the line, go to that point in the
-        // stream
-        stream.pos = match.index;
-      } else {
-        // if we have no matches in this line, skip to the end of the line
-        stream.skipToEnd();
-      }
-
-      return null;
-    },
-  };
-}
-
-/**
- * @memberof utils/source-search
- * @static
- */
-function updateOverlay(cm, state, query, modifiers) {
-  cm.removeOverlay(state.overlay);
-  state.overlay = searchOverlay(query, modifiers);
-  cm.addOverlay(state.overlay, { opaque: false });
-}
-
-function updateCursor(cm, state, keepSelection) {
-  state.posTo = cm.getCursor("anchor");
-  state.posFrom = cm.getCursor("head");
-
-  if (!keepSelection) {
-    state.posTo = { line: 0, ch: 0 };
-    state.posFrom = { line: 0, ch: 0 };
-  }
-}
-
 export function getMatchIndex(count, currentIndex, rev) {
   if (!rev) {
     if (currentIndex == count - 1) {
@@ -133,68 +58,35 @@ function doSearch(
   query,
   keepSelection,
   modifiers,
-  { focusFirstResult = true, shouldScroll = true }
+  { shouldScroll = true }
 ) {
-  const { cm, editor } = ctx;
+  const { editor } = ctx;
-
+  if (!query || isWhitespace(query)) {
-  if (features.codemirrorNext) {
+    editor.clearSearchMatches();
-    if (!query || isWhitespace(query)) {
-      editor.clearSearchMatches();
-      return null;
-    }
-    const regexQuery = buildQuery(query, modifiers, {
-      ignoreSpaces: true,
-      // regex must be global for the overlay
-      isGlobal: true,
-    });
-
-    if (editor.searchState.query?.toString() !== regexQuery.toString()) {
-      editor.highlightSearchMatches(regexQuery, "cm-highlight");
-    }
-    const cursor = editor.getNextSearchCursor(rev);
-    if (!cursor) {
-      return null;
-    }
-    editor.setPositionContentMarker({
-      id: markerTypes.ACTIVE_SELECTION_MARKER,
-      positionClassName: "cm-matchhighlight",
-      positions: [{ from: cursor.from, to: cursor.to }],
-    });
-
-    if (shouldScroll) {
-      editor.scrollToPosition(cursor.from);
-    }
-    return editor.getPositionFromSearchCursor(cursor);
-  }
-
-  if (!cm) {
     return null;
   }
-  const defaultIndex = { line: -1, ch: -1 };
+  const regexQuery = buildQuery(query, modifiers, {
-
+    ignoreSpaces: true,
-  return cm.operation(function () {
+    // regex must be global for the overlay
-    if (!query || isWhitespace(query)) {
+    isGlobal: true,
-      clearSearch(ctx);
-      return null;
-    }
-
-    const state = getSearchState(cm);
-    const isNewQuery = state.query !== query;
-    state.query = query;
-
-    updateOverlay(cm, state, query, modifiers);
-    updateCursor(cm, state, keepSelection);
-    const searchLocation = searchNext(ctx, rev, query, isNewQuery, modifiers);
-
-    // We don't want to jump the editor
-    // when we're selecting text
-    if (!cm.state.selectingText && searchLocation && focusFirstResult) {
-      editor.alignLine(searchLocation.from.line, "center");
-      cm.setSelection(searchLocation.from, searchLocation.to);
-    }
-
-    return searchLocation ? searchLocation.from : defaultIndex;
   });
+
+  if (editor.searchState.query?.toString() !== regexQuery.toString()) {
+    editor.highlightSearchMatches(regexQuery, "cm-highlight");
+  }
+  const cursor = editor.getNextSearchCursor(rev);
+  if (!cursor) {
+    return null;
+  }
+  editor.setPositionContentMarker({
+    id: markerTypes.ACTIVE_SELECTION_MARKER,
+    positionClassName: "cm-matchhighlight",
+    positions: [{ from: cursor.from, to: cursor.to }],
+  });
+  if (shouldScroll) {
+    editor.scrollToPosition(cursor.from);
+  }
+  return editor.getPositionFromSearchCursor(cursor);
 }
 
 export function searchSourceForHighlight(
@@ -202,109 +94,23 @@ export function searchSourceForHighlight(
   rev,
   query,
   keepSelection,
-  modifiers,
+  modifiers
-  line,
-  ch
 ) {
-  const { cm, editor } = ctx;
+  const { editor } = ctx;
-
+  if (!query || isWhitespace(query)) {
-  if (features.codemirrorNext) {
+    editor.clearSearchMatches();
-    if (!query || isWhitespace(query)) {
-      editor.clearSearchMatches();
-      return;
-    }
-
-    const regexQuery = buildQuery(query, modifiers, {
-      ignoreSpaces: true,
-      // regex must be global for the overlay
-      isGlobal: true,
-    });
-
-    if (editor.searchState.query?.toString() !== regexQuery.toString()) {
-      editor.highlightSearchMatches(regexQuery, "cm-highlight");
-    }
     return;
   }
 
-  if (!cm) {
+  const regexQuery = buildQuery(query, modifiers, {
-    return;
+    ignoreSpaces: true,
+    // regex must be global for the overlay
+    isGlobal: true,
+  });
+
+  if (editor.searchState.query?.toString() !== regexQuery.toString()) {
+    editor.highlightSearchMatches(regexQuery, "cm-highlight");
   }
-
-  cm.operation(function () {
-    const state = getSearchState(cm);
-    const isNewQuery = state.query !== query;
-    state.query = query;
-
-    updateOverlay(cm, state, query, modifiers);
-    updateCursor(cm, state, keepSelection);
-    findNextOnLine(ctx, rev, query, isNewQuery, modifiers, line, ch);
-  });
-}
-
-function getCursorPos(newQuery, rev, state) {
-  if (newQuery) {
-    return rev ? state.posFrom : state.posTo;
-  }
-
-  return rev ? state.posTo : state.posFrom;
-}
-
-/**
- * Selects the next result of a saved search.
- *
- * @memberof utils/source-search
- * @static
- */
-function searchNext(ctx, rev, query, newQuery, modifiers) {
-  const { cm } = ctx;
-  let nextMatch;
-  cm.operation(function () {
-    const state = getSearchState(cm);
-    const pos = getCursorPos(newQuery, rev, state);
-
-    if (!state.query) {
-      return;
-    }
-
-    let cursor = getSearchCursor(cm, state.query, pos, modifiers);
-
-    const location = rev
-      ? { line: cm.lastLine(), ch: null }
-      : { line: cm.firstLine(), ch: 0 };
-
-    if (!cursor.find(rev) && state.query) {
-      cursor = getSearchCursor(cm, state.query, location, modifiers);
-      if (!cursor.find(rev)) {
-        return;
-      }
-    }
-
-    nextMatch = { from: cursor.from(), to: cursor.to() };
-  });
-
-  return nextMatch;
-}
-
-function findNextOnLine(ctx, rev, query, newQuery, modifiers, line, ch) {
-  const { cm, editor } = ctx;
-  cm.operation(function () {
-    const pos = { line: line - 1, ch };
-    let cursor = getSearchCursor(cm, query, pos, modifiers);
-
-    if (!cursor.find(rev) && query) {
-      cursor = getSearchCursor(cm, query, pos, modifiers);
-      if (!cursor.find(rev)) {
-        return;
-      }
-    }
-
-    // We don't want to jump the editor
-    // when we're selecting text
-    if (!cm.state.selectingText) {
-      editor.alignLine(cursor.from().line, "center");
-      cm.setSelection(cursor.from(), cursor.to());
-    }
-  });
 }
 
 /**
@@ -327,20 +133,9 @@ export function removeOverlay(ctx) {
  * @static
  */
 export function clearSearch(ctx) {
-  const { cm, editor } = ctx;
+  const { editor } = ctx;
-  if (features.codemirrorNext) {
+  editor.clearSearchMatches();
-    editor.clearSearchMatches();
+  editor.removePositionContentMarker("active-selection-marker");
-    editor.removePositionContentMarker("active-selection-marker");
-    return;
-  }
-  const state = getSearchState(cm);
-  state.results = [];
-
-  if (!state.query) {
-    return;
-  }
-  cm.removeOverlay(state.overlay);
-  state.query = null;
 }
 
 /**

devtools/client/debugger/src/utils/source.js

@@ -18,9 +18,7 @@ import { getRelativePath } from "../utils/sources-tree/utils";
 import { endTruncateStr } from "./utils";
 import { truncateMiddleText } from "../utils/text";
 import { memoizeLast } from "../utils/memoizeLast";
-import { renderWasmText } from "./wasm";
 import { toWasmSourceLine, getEditor } from "./editor/index";
-import { features } from "./prefs";
 export { isMinified } from "./isMinified";
 
 import { isFulfilled } from "./async-value";
@@ -327,9 +325,7 @@ export const getLineText = memoizeLast((sourceId, asyncContent, line) => {
 
   if (content.type === "wasm") {
     const editor = getEditor();
-    const lines = features.codemirrorNext
+    const lines = editor.renderWasmText(content);
-      ? editor.renderWasmText(content)
-      : renderWasmText(sourceId, content);
     return lines[toWasmSourceLine(sourceId, line)] || "";
   }