[breakpoints] log points updates (firefox-devtools#7632)

Author: bomsy

src/actions/breakpoints/addBreakpoint.js

@@ -84,6 +84,7 @@ async function addBreakpointPromise(getState, client, sourceMaps, breakpoint) {
     hidden: breakpoint.hidden,
     loading: false,
     condition: breakpoint.condition,
+    log: breakpoint.log,
     location: newLocation,
     astLocation,
     generatedLocation: newGeneratedLocation,
@@ -156,7 +157,7 @@ export function enableBreakpoint(location: SourceLocation) {
 
 export function addBreakpoint(
   location: SourceLocation,
-  { condition, hidden }: addBreakpointOptions = {}
+  { condition, hidden, log = false }: addBreakpointOptions = {}
 ) {
   return async ({ dispatch, getState, sourceMaps, client }: ThunkArgs) => {
     recordEvent("add_breakpoint");
@@ -165,7 +166,7 @@ export function addBreakpoint(
       location = getFirstPausePointLocation(getState(), location);
     }
 
-    const breakpoint = createBreakpoint(location, { condition, hidden });
+    const breakpoint = createBreakpoint(location, { condition, hidden, log });
 
     return dispatch({
       type: "ADD_BREAKPOINT",

src/actions/breakpoints/index.js

@@ -44,7 +44,8 @@ import { recordEvent } from "../../utils/telemetry";
 
 export type addBreakpointOptions = {
   condition?: string,
-  hidden?: boolean
+  hidden?: boolean,
+  log?: boolean
 };
 
 /**
@@ -196,11 +197,10 @@ export function toggleBreakpoints(
   breakpoints: Breakpoint[]
 ) {
   return async ({ dispatch }: ThunkArgs) => {
-    const promises = breakpoints.map(
-      breakpoint =>
-        shouldDisableBreakpoints
-          ? dispatch(disableBreakpoint(breakpoint.location))
-          : dispatch(enableBreakpoint(breakpoint.location))
+    const promises = breakpoints.map(breakpoint =>
+      shouldDisableBreakpoints
+        ? dispatch(disableBreakpoint(breakpoint.location))
+        : dispatch(enableBreakpoint(breakpoint.location))
     );
 
     await Promise.all(promises);
@@ -283,12 +283,12 @@ export function remapBreakpoints(sourceId: string) {
  */
 export function setBreakpointCondition(
   location: SourceLocation,
-  { condition }: addBreakpointOptions = {}
+  { condition, log = false }: addBreakpointOptions = {}
 ) {
   return async ({ dispatch, getState, client, sourceMaps }: ThunkArgs) => {
     const bp = getBreakpoint(getState(), location);
     if (!bp) {
-      return dispatch(addBreakpoint(location, { condition }));
+      return dispatch(addBreakpoint(location, { condition, log }));
     }
 
     if (bp.loading) {
@@ -306,7 +306,7 @@ export function setBreakpointCondition(
       isOriginalId(bp.location.sourceId)
     );
 
-    const newBreakpoint = { ...bp, disabled: false, condition };
+    const newBreakpoint = { ...bp, disabled: false, condition, log };
 
     assertBreakpoint(newBreakpoint);
 

src/actions/breakpoints/tests/__snapshots__/breakpoints.spec.js.snap

@@ -26,6 +26,7 @@ Object {
     "sourceId": "a",
     "sourceUrl": "http://localhost:8000/examples/a",
   },
+  "log": false,
   "originalText": "",
   "text": "",
 }
@@ -39,6 +40,7 @@ Array [
         "condition": null,
         "disabled": false,
         "id": "hi",
+        "log": false,
         "selectedLocation": Object {
           "line": 2,
           "sourceId": "a",
@@ -94,6 +96,7 @@ Object {
     "sourceId": "a.js/originalSource-d6d70368d5c252598541e693a7ad6c27",
     "sourceUrl": "http://localhost:8000/examples/a.js:formatted",
   },
+  "log": false,
   "originalText": "function a() {",
   "text": "function a() {",
 }
@@ -107,6 +110,7 @@ Array [
         "condition": null,
         "disabled": true,
         "id": "hi",
+        "log": false,
         "selectedLocation": Object {
           "line": 5,
           "sourceId": "a",

src/actions/breakpoints/tests/__snapshots__/syncing.spec.js.snap

@@ -26,6 +26,7 @@ Object {
       "sourceId": "magic.js",
       "sourceUrl": "http://localhost:8000/examples/magic.js",
     },
+    "log": false,
     "originalText": "",
     "text": "",
   },
@@ -64,6 +65,7 @@ Object {
       "sourceId": "magic.js",
       "sourceUrl": "http://localhost:8000/examples/magic.js",
     },
+    "log": false,
     "originalText": "",
     "text": "",
   },
@@ -97,6 +99,7 @@ Object {
       "line": 3,
       "sourceUrl": "http://localhost:8000/examples/magic.js",
     },
+    "log": false,
   },
 }
 `;
@@ -127,6 +130,7 @@ Object {
       "sourceId": "magic.js",
       "sourceUrl": "http://localhost:8000/examples/magic.js",
     },
+    "log": false,
     "originalText": "",
     "text": "",
   },
@@ -165,6 +169,7 @@ Object {
       "sourceId": "magic.js",
       "sourceUrl": "http://localhost:8000/magic.js",
     },
+    "log": false,
     "originalText": "",
     "text": "",
   },

src/actions/tests/__snapshots__/pending-breakpoints.spec.js.snap

@@ -50,6 +50,7 @@ Object {
     "line": 7,
     "sourceUrl": "http://localhost:8000/examples/foo.js",
   },
+  "log": false,
 }
 `;
 
@@ -76,6 +77,7 @@ Object {
     "line": 5,
     "sourceUrl": "http://localhost:8000/examples/foo.js",
   },
+  "log": false,
 }
 `;
 
@@ -102,6 +104,7 @@ Object {
     "line": 5,
     "sourceUrl": "http://localhost:8000/examples/foo",
   },
+  "log": false,
 }
 `;
 
@@ -128,5 +131,6 @@ Object {
     "line": 5,
     "sourceUrl": "http://localhost:8000/examples/foo2",
   },
+  "log": false,
 }
 `;

src/components/Editor/Breakpoint.js

@@ -61,7 +61,11 @@ class Breakpoint extends PureComponent<Props> {
 
     editor.codeMirror.addLineClass(line, "line", "new-breakpoint");
     if (breakpoint.condition) {
-      editor.codeMirror.addLineClass(line, "line", "has-condition");
+      if (breakpoint.log) {
+        editor.codeMirror.addLineClass(line, "line", "has-condition log");
+      } else {
+        editor.codeMirror.addLineClass(line, "line", "has-condition");
+      }
     } else {
       editor.codeMirror.removeLineClass(line, "line", "has-condition");
     }

src/components/Editor/ColumnBreakpoints.css

@@ -30,6 +30,11 @@
   stroke: var(--theme-graphs-orange);
 }
 
+.column-breakpoint.has-condition.log svg {
+  fill: var(--theme-graphs-orange);
+  stroke: var(--theme-graphs-yellow);
+}
+
 .theme-dark .column-breakpoint.active svg {
   fill: var(--blue-55);
   stroke: var(--blue-40);

src/components/Editor/ConditionalPanel.js

@@ -67,7 +67,7 @@ export class ConditionalPanel extends PureComponent<Props> {
     if (log) {
       condition = `console.log(${condition})`;
     }
-    return this.props.setBreakpointCondition(location, { condition });
+    return this.props.setBreakpointCondition(location, { condition, log });
   }
 
   clearConditionalPanel() {

src/components/Editor/Editor.css

@@ -159,6 +159,11 @@ html[dir="rtl"] .editor-mount {
   stroke: var(--theme-graphs-orange);
 }
 
+.new-breakpoint.has-condition.log .CodeMirror-gutter-wrapper svg {
+  fill: var(--theme-graphs-orange);
+  stroke: var(--theme-graphs-yellow);
+}
+
 .editor.new-breakpoint.breakpoint-disabled svg {
   fill: var(--breakpoint-fill-disabled);
   stroke: var(--breakpoint-stroke-disabled);

src/components/Editor/GutterMenu.js

@@ -120,7 +120,12 @@ export function gutterMenu({
       : gutterItems.addConditional)
   };
 
-  const items = [toggleBreakpointItem, conditionalBreakpoint, logPoint];
+  let items = [toggleBreakpointItem, conditionalBreakpoint, logPoint];
+
+  if (breakpoint && breakpoint.condition) {
+    const remove = breakpoint.log ? conditionalBreakpoint : logPoint;
+    items = items.filter(item => item !== remove);
+  }
 
   if (isPaused) {
     const continueToHereItem = {