Issue 2173 - Fixed: "Block element" dialog isn't moved to correct position when dragging

block.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 function init()
 {
   // Attach event listeners
   window.addEventListener("keydown", onKeyDown, false);
   window.addEventListener("dragstart", onDragStart, false);
-  window.addEventListener("drag", onDrag, false);
   window.addEventListener("dragend", onDragEnd, false);
 
   $("#addButton").click(addFilters);
   $("#cancelButton").click(closeDialog.bind(null, false));
 
   // Apply jQuery UI styles
   $("button").button();
 
   ext.backgroundPage.sendMessage(
   {
@@ skipping 54 matching lines @@
       type: "forward",
       payload:
       {
         type: "clickhide-close",
         remove: (typeof success == "boolean" ? success : false)
       }
     }
   );
 }
 
-var dragCoords = null;
+var dragStartX;

[kzar, 2015/03/19 16:15:15]

Nit: probably should set the start coords to null as well to keep it consistent.

[Sebastian Noack, 2015/03/19 16:52:14]

Note that we explicitly check for null when accessing dragEndX and dragEndY
because we might do so before they were set.

However, dragStartX and dragStarY should be set before we access it, otherwise
there is a bug, and it's intended that strict-mode throws a warning then.

[kzar, 2015/03/19 16:55:01]

Wow, it never occurred to me that `10 - null` would not throw an exception...
but I just tried it and it doesn't. Fair enough then.

+var dragStartY;
+var dragEndX = null;
+var dragEndY = null;
+
 function onDragStart(event)
 {
-  dragCoords = [event.screenX, event.screenY];
-}
-
-function onDrag(event)
-{
-  if (!dragCoords)
-    return;
-
-  if (!event.screenX && !event.screenY)
-    return;
-
-  var diff = [event.screenX - dragCoords[0], event.screenY - dragCoords[1]];
-  if (diff[0] || diff[1])
-  {
-    ext.backgroundPage.sendMessage(
-      {
-        type: "forward",
-        payload:
-        {
-          type: "clickhide-move",
-          x: diff[0],
-          y: diff[1]
-        }
-      }
-    );
-    dragCoords = [event.screenX, event.screenY];
-  }
+  dragStartX = event.screenX;
+  dragStartY = event.screenY;
 }
 
 function onDragEnd(event)
 {
-  onDrag(event);
-  dragCoords = null;
+  if (dragEndX == null)
+    dragEndX = event.screenX;
+  if (dragEndY == null)
+    dragEndY = event.screenY;
+
+  ext.backgroundPage.sendMessage({
+    type: "forward",
+    payload:
+    {
+      type: "clickhide-move",
+      x: dragEndX - dragStartX,
+      y: dragEndY - dragStartY
+    }
+  });
+
+  dragStartX = null;
+  dragStartY = null;
+  dragEndX = null;
+  dragEndY = null;
 }
+
+// The coordinates in the dragend event are unreliable on Safari. So we
+// need to get the destination coordinates from the drag event instead.
+// However on Chrome, the coordinates in the drag event are unreliable.
+// So we need to get the coordinates from dragend event there.
+if (navigator.userAgent.indexOf(" Version/") != -1)
+{
+  window.addEventListener("drag", function(event)
+  {
+    dragEndX = event.screenX;
+    dragEndY = event.screenY;
+  }, false);
+}