Bug 1226362 - Use HTML Drag and Drop API in Chat. r=mkmelin
authorKhushil Mistry <khushil324@gmail.com>
Mon, 27 Jan 2020 09:07:12 +0200
changeset 37135 c5297b226713a283037a6bfa6becb3748717660e
parent 37134 308632c5e7572bdbf04960733b906f49c6e308eb
child 37136 1706fa6a364a9364cfd9e764d4a738350d0b4705
push id2552
push userclokep@gmail.com
push dateMon, 10 Feb 2020 21:24:16 +0000
treeherdercomm-beta@f95a6f4408a3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmkmelin
bugs1226362
Bug 1226362 - Use HTML Drag and Drop API in Chat. r=mkmelin
mail/components/im/content/imAccounts.js
mail/components/im/content/imAccounts.xhtml
mailnews/addrbook/content/abDragDrop.js
--- a/mail/components/im/content/imAccounts.js
+++ b/mail/components/im/content/imAccounts.js
@@ -1,14 +1,13 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-// mail/base/content/nsDragAndDrop.js
-/* globals FlavourSet, TransferData, MozElements */
+/* globals MozElements */
 // imStatusSelector.js
 /* globals statusSelector */
 
 var { Services } = ChromeUtils.import("resource:///modules/imServices.jsm");
 var { fixIterator } = ChromeUtils.import(
   "resource:///modules/iteratorUtils.jsm"
 );
 var { MailServices } = ChromeUtils.import(
@@ -701,64 +700,62 @@ var gAMDragAndDrop = {
     delete this.SCROLL_SPEED;
     this.SCROLL_SPEED = Services.prefs.getIntPref(
       "toolkit.scrollbox.scrollIncrement",
       20
     );
     return this.SCROLL_SPEED;
   },
 
-  onDragStart(aEvent, aTransferData, aAction) {
-    let accountElement = aEvent.target.closest(
+  onDragStart(event) {
+    let target = event.target;
+    if (target.nodeType != Node.ELEMENT_NODE) {
+      target = target.parentNode;
+    }
+    let accountElement = target.closest(
       'richlistitem[is="chat-account-richlistitem"]'
     );
     if (!accountElement) {
       return;
     }
     if (gAccountManager.accountList.itemCount == 1) {
       throw new Error("Can't drag while there is only one account!");
     }
 
-    // Transferdata is never used, but we need to transfer something.
-    aTransferData.data = new TransferData();
-    aTransferData.data.addDataForFlavour(
-      this.ACCOUNT_MIME_TYPE,
-      accountElement
-    );
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.dropEffect = "move";
+    event.dataTransfer.addElement(accountElement);
+    event.dataTransfer.setData(this.ACCOUNT_MIME_TYPE, accountElement);
+    event.stopPropagation();
   },
 
-  onDragOver(aEvent, aFlavour, aSession) {
-    let accountElement = aEvent.target.closest(
+  onDragOver(event) {
+    let target = event.target;
+    if (target.nodeType != Node.ELEMENT_NODE) {
+      target = target.parentNode;
+    }
+    let accountElement = target.closest(
       'richlistitem[is="chat-account-richlistitem"]'
     );
     if (!accountElement) {
       return;
     }
-    // We are dragging over the account manager, consider it is the same as
-    // the last element.
-    if (accountElement == gAccountManager.accountList) {
-      accountElement = gAccountManager.accountList.lastElementChild;
-    }
 
     // Auto scroll the account list if we are dragging at the top/bottom
-    this.checkForMagicScroll(aEvent.clientY);
+    this.checkForMagicScroll(event.clientY);
 
     // The hovered element has changed, change the border too
     if ("_accountElement" in this && this._accountElement != accountElement) {
       this.cleanBorders();
     }
 
-    if (!aSession.canDrop) {
-      aEvent.dataTransfer.dropEffect = "none";
-      return;
-    }
-    aEvent.dataTransfer.dropEffect = "move";
+    event.dataTransfer.dropEffect = "move";
 
     if (
-      aEvent.clientY <
+      event.clientY <
       accountElement.getBoundingClientRect().top +
         accountElement.clientHeight / 2
     ) {
       // we don't want the previous item to show its default bottom-border
       let previousItem = accountElement.previousElementSibling;
       if (previousItem) {
         previousItem.style.borderBottom = "none";
       }
@@ -770,101 +767,82 @@ var gAMDragAndDrop = {
         accountElement.getAttribute("dragover") == "up"
       ) {
         this.cleanBorders();
       }
       accountElement.setAttribute("dragover", "down");
     }
 
     this._accountElement = accountElement;
+    event.stopPropagation();
+    event.preventDefault();
   },
 
-  cleanBorders(aIsEnd) {
+  cleanBorders(isEnd) {
     if (!this._accountElement) {
       return;
     }
     this._accountElement.removeAttribute("dragover");
     // reset the border of the previous element
     let previousItem = this._accountElement.previousElementSibling;
     if (previousItem) {
       if (
-        aIsEnd &&
+        isEnd &&
         !previousItem.style.borderBottom &&
         previousItem.previousElementSibling
       ) {
         previousItem = previousItem.previousElementSibling;
       }
       previousItem.style.borderBottom = "";
     }
 
-    if (aIsEnd) {
+    if (isEnd) {
       delete this._accountElement;
     }
   },
 
-  canDrop(aEvent, aSession) {
-    let accountElement = aEvent.target.closest(
-      'richlistitem[is="chat-account-richlistitem"]'
-    );
-    if (accountElement == gAccountManager.accountList) {
-      accountElement = gAccountManager.accountList.lastElementChild;
-    }
-    return accountElement != gAccountManager.accountList.selectedItem;
-  },
-
-  checkForMagicScroll(aClientY) {
+  checkForMagicScroll(clientY) {
     let accountList = gAccountManager.accountList;
     let listSize = accountList.getBoundingClientRect();
     let direction = 1;
-    if (aClientY < listSize.top + this.MAGIC_SCROLL_HEIGHT) {
+    if (clientY < listSize.top + this.MAGIC_SCROLL_HEIGHT) {
       direction = -1;
-    } else if (aClientY < listSize.bottom - this.MAGIC_SCROLL_HEIGHT) {
+    } else if (clientY < listSize.bottom - this.MAGIC_SCROLL_HEIGHT) {
       // We are not on a scroll zone
       return;
     }
 
     accountList.scrollTop += direction * this.SCROLL_SPEED;
   },
 
-  onDrop(aEvent, aTransferData, aSession) {
-    let accountElement = aEvent.target.closest(
+  onDrop(event) {
+    let target = event.target;
+    if (target.nodeType != Node.ELEMENT_NODE) {
+      target = target.parentNode;
+    }
+    let accountElement = target.closest(
       'richlistitem[is="chat-account-richlistitem"]'
     );
     if (!accountElement) {
       return;
     }
-    if (accountElement == gAccountManager.accountList) {
-      accountElement = gAccountManager.accountList.lastElementChild;
-    }
-
-    if (!aSession.canDrop) {
-      return;
-    }
 
     // compute the destination
     let accountList = gAccountManager.accountList;
     let offset =
       accountList.getIndexOfItem(accountElement) - accountList.selectedIndex;
     let isDroppingAbove =
-      aEvent.clientY <
+      event.clientY <
       accountElement.getBoundingClientRect().top +
         accountElement.clientHeight / 2;
     if (offset > 0) {
       offset -= isDroppingAbove;
     } else {
       offset += !isDroppingAbove;
     }
     gAccountManager.moveCurrentItem(offset);
-  },
-
-  getSupportedFlavours() {
-    var flavours = new FlavourSet();
-    flavours.appendFlavour(
-      this.ACCOUNT_MIME_TYPE,
-      "nsIDOMXULSelectControlItemElement"
-    );
-    return flavours;
+    event.stopPropagation();
   },
 };
 
 window.addEventListener("DOMContentLoaded", () => {
   gAccountManager.load();
 });
--- a/mail/components/im/content/imAccounts.xhtml
+++ b/mail/components/im/content/imAccounts.xhtml
@@ -26,17 +26,16 @@
         title="&accountsWindow.title;"
         style="&accountsWindow2.style;"
         persist="width height screenX screenY">
 
   <script src="chrome://global/content/globalOverlay.js"/>
   <script src="chrome://global/content/editMenuOverlay.js"/>
   <script src="chrome://messenger/content/chat/imAccounts.js"/>
   <script src="chrome://messenger/content/chat/imStatusSelector.js"/>
-  <script src="chrome://global/content/nsDragAndDrop.js" />
   <script src="chrome://global/content/nsTransferable.js" />
   <script src="chrome://chat/content/chat-account-richlistitem.js" />
   <stringbundle id="accountsBundle" src="chrome://messenger/locale/imAccounts.properties"/>
 
   <linkset>
     <html:link rel="localization" href="security/certificates/certManager.ftl"/>
   </linkset>
 
@@ -150,20 +149,20 @@
         </vbox>
       </hbox>
     </vbox>
 
     <vbox id="accounts-notification-box" flex="1">
       <!-- notificationbox will be added here lazily. -->
       <richlistbox id="accountlist" flex="1" context="accountsContextMenu"
                    onselect="gAccountManager.onAccountSelect();"
-                   ondragstart="nsDragAndDrop.startDrag(event, gAMDragAndDrop);"
-                   ondragover="nsDragAndDrop.dragOver(event, gAMDragAndDrop);"
+                   ondragstart="gAMDragAndDrop.onDragStart(event);"
+                   ondragover="gAMDragAndDrop.onDragOver(event);"
                    ondragend="gAMDragAndDrop.cleanBorders(true);"
-                   ondrop="nsDragAndDrop.drop(event, gAMDragAndDrop);"/>
+                   ondrop="gAMDragAndDrop.onDrop(event);"/>
     </vbox>
   </deck>
 
   <hbox id="bottombuttons" align="center">
     <button id="newaccount" command="cmd_new"/>
     <spacer flex="1"/>
     <button id="close" command="cmd_close"/>
   </hbox>
--- a/mailnews/addrbook/content/abDragDrop.js
+++ b/mailnews/addrbook/content/abDragDrop.js
@@ -1,14 +1,13 @@
 /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* import-globals-from ../../../mail/base/content/nsDragAndDrop.js */
 /* import-globals-from ../../../mail/components/addrbook/content/abCommon.js */
 /* import-globals-from ../../../mail/components/compose/content/addressingWidgetOverlay.js */
 /* import-globals-from abResultsPane.js */
 
 var { PluralForm } = ChromeUtils.import(
   "resource://gre/modules/PluralForm.jsm"
 );
 var { MailServices } = ChromeUtils.import(