Bug 1328895 - Use clientX/Y instead of screenX/Y when moving devtools splitter. r=Honza, a=jcristau
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 10 Jan 2017 23:13:04 +0100
changeset 353621 2ae2be9972dac2ff7dde5c633a248fe5d0b799bf
parent 353620 db111a9521579272031cf3b95b62e362a4ba7528
child 353622 899b32dcae70e173a3ea0fc7c65af41f7de25d82
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-esr52@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza, jcristau
bugs1328895
milestone52.0a2
Bug 1328895 - Use clientX/Y instead of screenX/Y when moving devtools splitter. r=Honza, a=jcristau 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