Provide conditional comment styling (firefox-devtools#7377)

Author: darkwing

src/components/Editor/ColumnBreakpoint.js

@@ -26,11 +26,22 @@ type Props = {
 
 const breakpointImg = document.createElement("div");
 ReactDOM.render(<Svg name={"column-marker"} />, breakpointImg);
-function makeBookmark(isActive, { onClick }) {
+function makeBookmark(isActive, condition, { onClick }) {
   const bp = breakpointImg.cloneNode(true);
   const className = isActive ? "active" : "disabled";
-  bp.className = classnames("column-breakpoint", className);
+
+  bp.className = classnames(
+    "column-breakpoint",
+    {
+      "has-condition": condition
+    },
+    className
+  );
+  if (condition) {
+    bp.setAttribute("title", condition);
+  }
   bp.onclick = onClick;
+
   return bp;
 }
 
@@ -48,9 +59,14 @@ export default class ColumnBreakpoint extends PureComponent<Props> {
     }
 
     const { line, column } = columnBreakpoint.location;
-    const widget = makeBookmark(columnBreakpoint.enabled, {
-      onClick: this.toggleBreakpoint
-    });
+    const widget = makeBookmark(
+      columnBreakpoint.enabled,
+      columnBreakpoint.condition,
+      {
+        onClick: this.toggleBreakpoint
+      }
+    );
+
     this.bookmark = doc.setBookmark({ line: line - 1, ch: column }, { widget });
   };
 

src/components/Editor/ColumnBreakpoints.css

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

src/selectors/test/__snapshots__/visibleColumnBreakpoints.spec.js.snap

@@ -3,13 +3,15 @@
 exports[`visible column breakpoints duplicate generated locations 1`] = `
 Array [
   Object {
+    "condition": undefined,
     "enabled": true,
     "location": Object {
       "column": 1,
       "line": 1,
     },
   },
   Object {
+    "condition": null,
     "enabled": false,
     "location": Object {
       "column": 3,
@@ -22,13 +24,15 @@ Array [
 exports[`visible column breakpoints ignores single breakpoints 1`] = `
 Array [
   Object {
+    "condition": undefined,
     "enabled": true,
     "location": Object {
       "column": 1,
       "line": 1,
     },
   },
   Object {
+    "condition": null,
     "enabled": false,
     "location": Object {
       "column": 3,
@@ -41,13 +45,15 @@ Array [
 exports[`visible column breakpoints only shows visible breakpoints 1`] = `
 Array [
   Object {
+    "condition": undefined,
     "enabled": true,
     "location": Object {
       "column": 1,
       "line": 1,
     },
   },
   Object {
+    "condition": null,
     "enabled": false,
     "location": Object {
       "column": 3,
@@ -60,13 +66,15 @@ Array [
 exports[`visible column breakpoints simple 1`] = `
 Array [
   Object {
+    "condition": undefined,
     "enabled": true,
     "location": Object {
       "column": 1,
       "line": 1,
     },
   },
   Object {
+    "condition": null,
     "enabled": false,
     "location": Object {
       "column": 5,

src/selectors/visibleColumnBreakpoints.js

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-import { groupBy, hasIn, sortedUniqBy } from "lodash";
+import { groupBy, get, sortedUniqBy } from "lodash";
 import { createSelector } from "reselect";
 
 import { getViewport } from "../selectors";
@@ -14,7 +14,8 @@ import type { SourceLocation } from "../types";
 
 export type ColumnBreakpoint = {|
   +location: SourceLocation,
-  +enabled: boolean
+  +enabled: boolean,
+  +condition: ?string
 |};
 
 function contains(location, range) {
@@ -35,9 +36,13 @@ function groupBreakpoints(breakpoints) {
   return map;
 }
 
-function isEnabled(location, breakpointMap) {
+function findBreakpoint(location, breakpointMap) {
   const { line, column } = location;
-  return hasIn(breakpointMap, [line, column]);
+  const breakpoints = get(breakpointMap, [line, column]);
+
+  if (breakpoints) {
+    return breakpoints[0];
+  }
 }
 
 function getLineCount(columnBreakpoints) {
@@ -101,10 +106,16 @@ export function getColumnBreakpoints(pausePoints, breakpoints, viewport) {
     ({ location: { line } }) => lineCount[line] > 1
   );
 
-  return columnBreakpoints.map(({ location }) => ({
-    location,
-    enabled: isEnabled(location, breakpointMap)
-  }));
+  return columnBreakpoints.map(({ location }) => {
+    // Find the breakpoint so if we know it's enabled and has condition
+    const foundBreakpoint = findBreakpoint(location, breakpointMap);
+
+    return {
+      location,
+      enabled: !!foundBreakpoint,
+      condition: foundBreakpoint ? foundBreakpoint.condition : null
+    };
+  });
 }
 
 export const visibleColumnBreakpoints = createSelector(