Move BreakPointItem elements to their own rendering functions (#5905)

* Move BreakPointItem elements to their own rendering functions

* Rename the BreakpointItem component

* Grr lint

* Unify breakpoint text retrieval for conditional

Author: darkwing

…ponents/SecondaryPanes/BreakpointItem.js …/components/SecondaryPanes/Breakpoint.jssrc/components/SecondaryPanes/BreakpointItem.js renamed to src/components/SecondaryPanes/Breakpoint.js src/components/SecondaryPanes/BreakpointItem.js renamed to src/components/SecondaryPanes/Breakpoint.js

@@ -33,12 +33,13 @@ function getBreakpointLocation(source, line, column) {
   return bpLocation;
 }
 
-class BreakpointItem extends Component<Props> {
+class Breakpoint extends Component<Props> {
   editor: SourceEditor;
 
   componentDidMount() {
     this.setupEditor();
   }
+
   componentDidUpdate() {
     this.setupEditor();
   }
@@ -63,13 +64,17 @@ class BreakpointItem extends Component<Props> {
     );
   }
 
-  setupEditor() {
+  getBreakpointText() {
     const { breakpoint } = this.props;
+    return breakpoint.condition || breakpoint.text;
+  }
+
+  setupEditor() {
     if (this.editor) {
       return;
     }
 
-    this.editor = createEditor(breakpoint.text);
+    this.editor = createEditor(this.getBreakpointText());
 
     // disables the default search shortcuts
     // $FlowIgnore
@@ -87,18 +92,52 @@ class BreakpointItem extends Component<Props> {
     }
   }
 
+  renderCheckbox() {
+    const { onChange, breakpoint } = this.props;
+    const { disabled } = breakpoint;
+
+    return (
+      <input
+        type="checkbox"
+        className="breakpoint-checkbox"
+        checked={!disabled}
+        onChange={onChange}
+        onClick={ev => ev.stopPropagation()}
+      />
+    );
+  }
+
+  renderText() {
+    const text = this.getBreakpointText();
+
+    return (
+      <label className="breakpoint-label" title={text}>
+        {text}
+      </label>
+    );
+  }
+
+  renderLineClose() {
+    const { breakpoint, onCloseClick } = this.props;
+    const { line, column } = breakpoint.location;
+
+    return (
+      <div className="breakpoint-line-close">
+        <div className="breakpoint-line">
+          {getBreakpointLocation(breakpoint.source, line, column)}
+        </div>
+        <CloseButton
+          handleClick={onCloseClick}
+          tooltip={L10N.getStr("breakpoints.removeBreakpointTooltip")}
+        />
+      </div>
+    );
+  }
+
   render() {
-    const {
-      breakpoint,
-      onClick,
-      onChange,
-      onContextMenu,
-      onCloseClick
-    } = this.props;
+    const { breakpoint, onClick, onContextMenu } = this.props;
 
     const locationId = breakpoint.locationId;
-    const line = breakpoint.location.line;
-    const column = breakpoint.location.column;
     const isCurrentlyPaused = breakpoint.isCurrentlyPaused;
     const isDisabled = breakpoint.disabled;
     const isConditional = !!breakpoint.condition;
@@ -115,28 +154,12 @@ class BreakpointItem extends Component<Props> {
         onClick={onClick}
         onContextMenu={onContextMenu}
       >
-        <input
-          type="checkbox"
-          className="breakpoint-checkbox"
-          checked={!isDisabled}
-          onChange={onChange}
-          onClick={ev => ev.stopPropagation()}
-        />
-        <label className="breakpoint-label" title={breakpoint.text}>
-          {breakpoint.text}
-        </label>
-        <div className="breakpoint-line-close">
-          <div className="breakpoint-line">
-            {getBreakpointLocation(breakpoint.source, line, column)}
-          </div>
-          <CloseButton
-            handleClick={onCloseClick}
-            tooltip={L10N.getStr("breakpoints.removeBreakpointTooltip")}
-          />
-        </div>
+        {this.renderCheckbox()}
+        {this.renderText()}
+        {this.renderLineClose()}
       </div>
     );
   }
 }
 
-export default BreakpointItem;
+export default Breakpoint;

src/components/SecondaryPanes/Breakpoints.js

@@ -11,7 +11,7 @@ import * as I from "immutable";
 import { createSelector } from "reselect";
 import { groupBy, sortBy } from "lodash";
 
-import BreakpointItem from "./BreakpointItem";
+import Breakpoint from "./Breakpoint";
 
 import actions from "../../actions";
 import { getFilename } from "../../utils/source";
@@ -26,11 +26,17 @@ import { isInterrupted } from "../../utils/pause";
 import { makeLocationId } from "../../utils/breakpoint";
 import showContextMenu from "./BreakpointsContextMenu";
 
-import type { Breakpoint, Location, Source, Frame, Why } from "../../types";
+import type {
+  Breakpoint as BreakpointType,
+  Location,
+  Source,
+  Frame,
+  Why
+} from "../../types";
 
 import "./Breakpoints.css";
 
-export type LocalBreakpoint = Breakpoint & {
+export type LocalBreakpoint = BreakpointType & {
   location: Location,
   isCurrentlyPaused: boolean,
   locationId: string,
@@ -101,7 +107,7 @@ class Breakpoints extends Component<Props> {
 
   renderBreakpoint(breakpoint) {
     return (
-      <BreakpointItem
+      <Breakpoint
         key={breakpoint.locationId}
         breakpoint={breakpoint}
         onClick={() => this.selectBreakpoint(breakpoint)}