Bug 1328895 - use clientX/Y instead of screenX/Y when moving devtools splitter;r=Honza draft
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 10 Jan 2017 23:13:04 +0100
changeset 459287 d6863831aef393be9fdf2a08a29a444aef5d75ed
parent 458610 e68cbc3b5b3d3fba4fe3e17e234713020f44e4a0
child 541846 09e6112d2a80c74e202500d3e70b860e420a335b
push id41171
push userjdescottes@mozilla.com
push dateWed, 11 Jan 2017 17:03:07 +0000
reviewersHonza
bugs1328895
milestone53.0a1
Bug 1328895 - use clientX/Y instead of screenX/Y when moving devtools splitter;r=Honza MozReview-Commit-ID: 54bqux7tE5f
devtools/client/shared/components/splitter/draggable.js
devtools/client/shared/components/splitter/split-box.js
--- a/devtools/client/shared/components/splitter/draggable.js
+++ b/devtools/client/shared/components/splitter/draggable.js
@@ -24,19 +24,19 @@ const Draggable = React.createClass({
     const doc = ReactDOM.findDOMNode(this).ownerDocument;
     doc.addEventListener("mousemove", this.onMove);
     doc.addEventListener("mouseup", this.onUp);
     this.props.onStart && this.props.onStart();
   },
 
   onMove(ev) {
     ev.preventDefault();
-    // Use screen coordinates so, moving mouse over iframes
+    // Use viewport coordinates so, moving mouse over iframes
     // doesn't mangle (relative) coordinates.
-    this.props.onMove(ev.screenX, ev.screenY);
+    this.props.onMove(ev.clientX, ev.clientY);
   },
 
   onUp(ev) {
     ev.preventDefault();
     const doc = ReactDOM.findDOMNode(this).ownerDocument;
     doc.removeEventListener("mousemove", this.onMove);
     doc.removeEventListener("mouseup", this.onUp);
     this.props.onStop && this.props.onStop();
--- a/devtools/client/shared/components/splitter/split-box.js
+++ b/devtools/client/shared/components/splitter/split-box.js
@@ -92,40 +92,37 @@ const SplitBox = React.createClass({
    * the splitter box.
    */
   onMove(x, y) {
     const node = ReactDOM.findDOMNode(this);
     const doc = node.ownerDocument;
     const win = doc.defaultView;
 
     let size;
-    let ratio = win.devicePixelRatio || 1;
     let { endPanelControl } = this.props;
 
     if (this.state.vert) {
       // Switch the control flag in case of RTL. Note that RTL
       // has impact on vertical splitter only.
       let dir = win.getComputedStyle(doc.documentElement).direction;
       if (dir == "rtl") {
         endPanelControl = !endPanelControl;
       }
 
-      let innerOffset = (x / ratio) - win.mozInnerScreenX;
       size = endPanelControl ?
-        (node.offsetLeft + node.offsetWidth) - innerOffset :
-        innerOffset - node.offsetLeft;
+        (node.offsetLeft + node.offsetWidth) - x :
+        x - node.offsetLeft;
 
       this.setState({
         width: size
       });
     } else {
-      let innerOffset = (y / ratio) - win.mozInnerScreenY;
       size = endPanelControl ?
-        (node.offsetTop + node.offsetHeight) - innerOffset :
-        innerOffset - node.offsetTop;
+        (node.offsetTop + node.offsetHeight) - y :
+        y - node.offsetTop;
 
       this.setState({
         height: size
       });
     }
   },
 
   // Rendering