Bug 1565011 - Un-blackbox a file by adding a gutter breakpoint. r=dav…

…idwalsh

If user clicks gutter to add a breakpoint in tab of a blackboxed file, the file should be un-blackboxed.

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

devtools/client/debugger/src/components/Editor/Breakpoints.css

@@ -36,7 +36,7 @@
   pointer-events: none;
 }
 
-.editor-wrapper:not(.blackboxed) :not(.empty-line):not(.new-breakpoint)
+.editor-wrapper :not(.empty-line):not(.new-breakpoint)
   > .CodeMirror-gutter-wrapper:hover
   > .CodeMirror-linenumber::after {
   content: "";

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

@@ -114,6 +114,7 @@ export type Props = {
   closeTab: typeof actions.closeTab,
   breakpointActions: BreakpointItemActions,
   editorActions: EditorItemActions,
+  toggleBlackBox: typeof actions.toggleBlackBox,
 };
 
 type State = {
@@ -380,19 +381,26 @@ class Editor extends PureComponent<Props, State> {
       closeConditionalPanel,
       addBreakpointAtLine,
       continueToHere,
+      toggleBlackBox,
     } = this.props;
 
     // ignore right clicks in the gutter
     if (
       (ev.ctrlKey && ev.button === 0) ||
       ev.button === 2 ||
-      (selectedSourceWithContent &&
-        selectedSourceWithContent.source.isBlackBoxed) ||
       !selectedSourceWithContent
     ) {
       return;
     }
 
+    // if user clicks gutter to set breakpoint on blackboxed source, un-blackbox the source.
+    if (
+      selectedSourceWithContent &&
+      selectedSourceWithContent.source.isBlackBoxed
+    ) {
+      toggleBlackBox(cx, selectedSourceWithContent.source);
+    }
+
     if (conditionalPanelLocation) {
       return closeConditionalPanel();
     }
@@ -681,6 +689,7 @@ const mapDispatchToProps = dispatch => ({
       traverseResults: actions.traverseResults,
       updateViewport: actions.updateViewport,
       closeTab: actions.closeTab,
+      toggleBlackBox: actions.toggleBlackBox,
     },
     dispatch
   ),

devtools/client/debugger/test/mochitest/browser_dbg-editor-gutter.js

@@ -36,3 +36,37 @@ add_task(async function() {
   is(dbg.selectors.getBreakpointCount(), 0, "No breakpoints exist");
   await assertEditorBreakpoint(dbg, 4, false);
 });
+
+add_task(async function() {
+  info("Ensure clicking on gutter to add breakpoint will un-blackbox source");
+  const dbg = await initDebugger("doc-sourcemaps3.html");
+  dbg.actions.toggleMapScopes();
+  const {
+    selectors: { getBreakpoint, getBreakpointCount },
+    getState
+  } = dbg;
+  await waitForSources(dbg, "bundle.js", "sorted.js", "test.js");
+
+  info("blackbox the source");
+  const sortedSrc = findSource(dbg, "sorted.js");
+  await selectSource(dbg, sortedSrc);
+  await clickElement(dbg, "blackbox");
+  await waitForDispatch(dbg, "BLACKBOX");
+
+  // invoke test
+  invokeInTab("test");
+  // should not pause
+  is(isPaused(dbg), false);
+
+  info("ensure gutter breakpoint gets set with click");
+  clickGutter(dbg, 4);
+  await waitForDispatch(dbg, "SET_BREAKPOINT");
+  is(dbg.selectors.getBreakpointCount(), 1, "One breakpoint exists");
+  await assertEditorBreakpoint(dbg, 4, true);
+
+  // click on test
+  invokeInTab("test");
+  // verify pause at breakpoint.
+  await waitForPaused(dbg);
+  ok(true, "source is un-blackboxed");
+});