Bug 1748618 - [devtools] Add blackbox line context menu item r=nchevobbe

This patch adds context menu item to ignore single lines in the editor and in the gutter

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

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

@@ -19,7 +19,11 @@ import {
   breakpointItemActions,
 } from "./menus/breakpoints";
 
-import { continueToHereItem, editorItemActions } from "./menus/editor";
+import {
+  continueToHereItem,
+  editorItemActions,
+  blackBoxLineMenuItem,
+} from "./menus/editor";
 
 import {
   getActiveSearch,
@@ -34,6 +38,7 @@ import {
   getInlinePreview,
   getEditorWrapping,
   getHighlightedCalls,
+  getBlackBoxRanges,
 } from "../../selectors";
 
 // Redux actions
@@ -127,6 +132,7 @@ class Editor extends PureComponent {
       inlinePreviewEnabled: PropTypes.bool,
       editorWrappingEnabled: PropTypes.bool,
       skipPausing: PropTypes.bool,
+      blackboxedRanges: PropTypes.object,
     };
   }
 
@@ -381,6 +387,7 @@ class Editor extends PureComponent {
       isPaused,
       conditionalPanelLocation,
       closeConditionalPanel,
+      blackboxedRanges,
     } = this.props;
     const { editor } = this.state;
     if (!selectedSource || !editor) {
@@ -413,6 +420,15 @@ class Editor extends PureComponent {
         ...createBreakpointItems(cx, location, breakpointActions, lineText),
         { type: "separator" },
         continueToHereItem(cx, location, isPaused, editorActions),
+        { type: "separator" },
+        blackBoxLineMenuItem(
+          cx,
+          selectedSource,
+          editorActions,
+          editor,
+          blackboxedRanges,
+          line
+        ),
       ]);
     }
 
@@ -710,6 +726,7 @@ const mapStateToProps = state => {
     inlinePreviewEnabled: getInlinePreview(state),
     editorWrappingEnabled: getEditorWrapping(state),
     highlightedCalls: getHighlightedCalls(state, getCurrentThread(state)),
+    blackboxedRanges: getBlackBoxRanges(state),
   };
 };
 

devtools/client/debugger/src/components/Editor/menus/editor.js

@@ -112,6 +112,75 @@ function findBlackBoxRange(source, blackboxedRanges, line) {
   );
 }
 
+export const blackBoxLineMenuItem = (
+  cx,
+  selectedSource,
+  editorActions,
+  editor,
+  blackboxedRanges,
+  // the clickedLine is passed when the context menu
+  // is opened from the gutter, it is not available when the
+  // the context menu is opened from the editor.
+  clickedLine = null
+) => {
+  const { codeMirror } = editor;
+  const from = codeMirror.getCursor("from");
+  const to = codeMirror.getCursor("to");
+
+  const startLine = clickedLine ?? toSourceLine(selectedSource.id, from.line);
+  const endLine = clickedLine ?? toSourceLine(selectedSource.id, to.line);
+
+  const blackboxRange = findBlackBoxRange(selectedSource, blackboxedRanges, {
+    start: startLine,
+    end: endLine,
+  });
+
+  const selectedLineIsBlackBoxed = !!blackboxRange;
+
+  const isSingleLine = selectedLineIsBlackBoxed
+    ? blackboxRange.start.line == blackboxRange.end.line
+    : startLine == endLine;
+
+  // The ignore/unignore line context menu item should be disabled when
+  // 1) The whole source is blackboxed or
+  // 2) Multiple lines are blackboxed or
+  // 3) Multiple lines are selected in the editor
+  const shouldDisable =
+    (selectedSource.isBlackBoxed &&
+      !blackboxedRanges[selectedSource.url].length) ||
+    !isSingleLine;
+
+  return {
+    id: "node-menu-blackbox-line",
+    label: !selectedLineIsBlackBoxed
+      ? L10N.getStr("ignoreContextItem.ignoreLine")
+      : L10N.getStr("ignoreContextItem.unignoreLine"),
+    accesskey: !selectedLineIsBlackBoxed
+      ? L10N.getStr("ignoreContextItem.ignoreLine.accesskey")
+      : L10N.getStr("ignoreContextItem.unignoreLine.accesskey"),
+    disabled: shouldDisable,
+    click: () => {
+      const selectionRange = {
+        start: {
+          line: startLine,
+          column: clickedLine == null ? from.ch : 0,
+        },
+        end: {
+          line: endLine,
+          column: clickedLine == null ? to.ch : 0,
+        },
+      };
+
+      editorActions.toggleBlackBox(
+        cx,
+        selectedSource,
+        !selectedLineIsBlackBoxed,
+        selectedLineIsBlackBoxed ? [blackboxRange] : [selectionRange]
+      );
+    },
+  };
+};
+
 const blackBoxLinesMenuItem = (
   cx,
   selectedSource,
@@ -126,23 +195,22 @@ const blackBoxLinesMenuItem = (
   const startLine = toSourceLine(selectedSource.id, from.line);
   const endLine = toSourceLine(selectedSource.id, to.line);
 
-  const shouldDisable =
-    selectedSource.isBlackBoxed && !blackboxedRanges[selectedSource.url].length;
-
   const blackboxRange = findBlackBoxRange(selectedSource, blackboxedRanges, {
     start: startLine,
     end: endLine,
   });
 
+  const selectedLinesAreBlackBoxed = !!blackboxRange;
+
   return {
     id: "node-menu-blackbox-lines",
-    label: !blackboxRange
+    label: !selectedLinesAreBlackBoxed
       ? L10N.getStr("ignoreContextItem.ignoreLines")
       : L10N.getStr("ignoreContextItem.unignoreLines"),
-    accesskey: !blackboxRange
+    accesskey: !selectedLinesAreBlackBoxed
       ? L10N.getStr("ignoreContextItem.ignoreLines.accesskey")
       : L10N.getStr("ignoreContextItem.unignoreLines.accesskey"),
-    disabled: shouldDisable,
+    disabled: false,
     click: () => {
       const selectionRange = {
         start: {
@@ -156,15 +224,13 @@ const blackBoxLinesMenuItem = (
       };
 
       // removes the current selection
-      editor.codeMirror.replaceSelection(
-        editor.codeMirror.getSelection(),
-        "start"
-      );
+      codeMirror.replaceSelection(codeMirror.getSelection(), "start");
+
       editorActions.toggleBlackBox(
         cx,
         selectedSource,
-        !blackboxRange,
-        blackboxRange ? [blackboxRange] : [selectionRange]
+        !selectedLinesAreBlackBoxed,
+        selectedLinesAreBlackBoxed ? [blackboxRange] : [selectionRange]
       );
     },
   };
@@ -262,15 +328,44 @@ export function editorMenuItems({
   );
 
   if (features.blackboxLines) {
-    items.push(
-      blackBoxLinesMenuItem(
-        cx,
-        selectedSource,
-        editorActions,
-        editor,
-        blackboxedRanges
-      )
+    const startLine = toSourceLine(
+      selectedSource.id,
+      editor.codeMirror.getCursor("from").line
     );
+    const endLine = toSourceLine(
+      selectedSource.id,
+      editor.codeMirror.getCursor("to").line
+    );
+
+    // Find any blackbox ranges that exist for the selected lines
+    const blackboxRange = findBlackBoxRange(selectedSource, blackboxedRanges, {
+      start: startLine,
+      end: endLine,
+    });
+
+    const isMultiLineSelection = blackboxRange
+      ? blackboxRange.start.line !== blackboxRange.end.line
+      : startLine !== endLine;
+
+    const theWholeSourceIsBlackBoxed =
+      selectedSource.isBlackBoxed &&
+      !blackboxedRanges[selectedSource.url].length;
+
+    if (!theWholeSourceIsBlackBoxed) {
+      const blackBoxSourceLinesMenuItem = isMultiLineSelection
+        ? blackBoxLinesMenuItem
+        : blackBoxLineMenuItem;
+
+      items.push(
+        blackBoxSourceLinesMenuItem(
+          cx,
+          selectedSource,
+          editorActions,
+          editor,
+          blackboxedRanges
+        )
+      );
+    }
   }
 
   if (isTextSelected) {

devtools/client/locales/en-US/debugger.properties

@@ -630,6 +630,16 @@ ignoreContextItem.ignore.accesskey=I
 ignoreContextItem.unignore=Unignore source
 ignoreContextItem.unignore.accesskey=U
 
+# LOCALIZATION NOTE (ignoreContextItem.ignoreLine): Text associated
+# with the ignore line context menu item
+ignoreContextItem.ignoreLine=Ignore line
+ignoreContextItem.ignoreLine.accesskey=l
+
+# LOCALIZATION NOTE (ignoreContextItem.unignoreLine): Text associated
+# with the unignore line context menu item
+ignoreContextItem.unignoreLine=Unignore line
+ignoreContextItem.unignoreLine.accesskey=n
+
 # LOCALIZATION NOTE (ignoreContextItem.ignoreLines): Text associated
 # with the ignore lines context menu item
 ignoreContextItem.ignoreLines=Ignore lines