Stop breakpoint label click from toggling breakpoint (firefox-devtool…

…s#4269) Addresses firefox-devtools#4262 Provides the primary purpose of linking to the breakpoint's location in source.
khal0988 · Oct 13, 2017 · d15a696 · d15a696
1 parent 67cdb34
commit d15a696
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/components/SecondaryPanes/Breakpoints.css b/src/components/SecondaryPanes/Breakpoints.css
@@ -71,6 +71,7 @@ html .breakpoints-list .breakpoint.paused {
   overflow-x: hidden;
   text-overflow: ellipsis;
   padding: 1px 0;
+  vertical-align: bottom;
 }
 
 .breakpoints-list .pause-indicator {

diff --git a/src/components/SecondaryPanes/Breakpoints.js b/src/components/SecondaryPanes/Breakpoints.js
@@ -368,14 +368,14 @@ class Breakpoints extends PureComponent {
         onClick={() => this.selectBreakpoint(breakpoint)}
         onContextMenu={e => this.showContextMenu(e, breakpoint)}
       >
+        <input
+          type="checkbox"
+          className="breakpoint-checkbox"
+          checked={!isDisabled}
+          onChange={() => this.handleCheckbox(breakpoint)}
+          onClick={ev => ev.stopPropagation()}
+        />
         <label className="breakpoint-label" title={breakpoint.text}>
-          <input
-            type="checkbox"
-            className="breakpoint-checkbox"
-            checked={!isDisabled}
-            onChange={() => this.handleCheckbox(breakpoint)}
-            onClick={ev => ev.stopPropagation()}
-          />
           {renderSourceLocation(breakpoint.location.source, line, column)}
         </label>
         <div className="breakpoint-snippet">{snippet}</div>