Drag/release frame text no longer collapses/expands (fixes #2554)

src/sentry/static/sentry/app/components/events/interfaces/frame.jsx

@@ -6,6 +6,7 @@ import {defined, objectIsEmpty, isUrl} from '../../../utils';
 import TooltipMixin from '../../../mixins/tooltip';
 import FrameVariables from './frameVariables';
 import ContextLine from './contextLine';
+import StrictClick from '../../strictClick';
 import {t} from '../../../locale';
 
 function trimPackage(pkg) {
@@ -183,21 +184,22 @@ const Frame = React.createClass({
     if (hasContextSource || hasContextVars) {
       let startLineNo = hasContextSource ? data.context[0][0] : '';
       context = (
-        <ol start={startLineNo} className={outerClassName}
-            onClick={expandable ? this.toggleContext : null}>
-          {defined(data.errors) &&
-          <li className={expandable ? 'expandable error' : 'error'}
-              key="errors">{data.errors.join(', ')}</li>
-          }
-
-          {data.context && contextLines.map((line, index) => {
-            return <ContextLine key={index} line={line} isActive={data.lineNo === line[0]}/>;
-          })}
-
-          {hasContextVars &&
-            <FrameVariables data={data.vars} key="vars" />
-          }
-        </ol>
+        <StrictClick onClick={expandable ? this.toggleContext : null}>
+          <ol start={startLineNo} className={outerClassName}>
+            {defined(data.errors) &&
+            <li className={expandable ? 'expandable error' : 'error'}
+                key="errors">{data.errors.join(', ')}</li>
+            }
+
+            {data.context && contextLines.map((line, index) => {
+              return <ContextLine key={index} line={line} isActive={data.lineNo === line[0]}/>;
+            })}
+
+            {hasContextVars &&
+              <FrameVariables data={data.vars} key="vars" />
+            }
+          </ol>
+        </StrictClick>
       );
     }
     return context;

src/sentry/static/sentry/app/components/strictClick.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+/**
+ * Usage:
+ *   <StrictClick onClick={this.onClickHandler}>
+ *     <button>Some button</button>
+ *   </StrictClick>
+ */
+const StrictClick = React.createClass({
+  propTypes: {
+    onClick: React.PropTypes.func.isRequired
+  },
+
+  mixins: [
+    PureRenderMixin
+  ],
+
+  statics: {
+    MAX_DELTA_X: 10,
+    MAX_DELTA_Y: 10
+  },
+
+  getInitialState() {
+    return {
+      startCoords: null
+    };
+  },
+
+  handleMouseDown: function(evt) {
+    this.setState({
+      startCoords: {
+        x: evt.screenX,
+        y: evt.screenY
+      }
+    });
+  },
+
+  handleMouseClick: function(evt) {
+    // Click happens if mouse down/up in same element - click will
+    // not fire if either initial mouse down OR final ouse up occurs in
+    // different element
+    let {startCoords} = this.state;
+    let deltaX = evt.screenX - startCoords.x;
+    let deltaY = evt.screenY - startCoords.y;
+
+    // If mouse hasn't moved more than 10 pixels in either Y
+    // or X direction, fire onClick
+    if (deltaX < StrictClick.MAX_DELTA_X && deltaY < StrictClick.MAX_DELTA_Y) {
+      this.props.onClick(evt);
+    }
+    this.setState({
+      startCoords: null
+    });
+  },
+
+  render() {
+    return React.cloneElement(this.props.children, {
+      onMouseDown: this.handleMouseDown,
+      onClick: this.handleMouseClick
+    });
+  }
+});
+
+export default StrictClick;
+