From f17852f1339bd75b1b34fcd1b6c5d9296dc439c0 Mon Sep 17 00:00:00 2001 From: Michael Yoshitaka Erlewine Date: Tue, 11 Jan 2011 14:35:13 -0500 Subject: [PATCH] Bug 587503 - Improve reordering tabs in groups [r=ian, a=blocking2.0-final+] --- browser/base/content/tabview/drag.js | 5 +- browser/base/content/tabview/groupitems.js | 218 ++++++++++------ browser/base/content/tabview/items.js | 54 ++-- browser/base/content/tabview/tabitems.js | 2 +- browser/base/content/tabview/ui.js | 2 +- browser/base/content/test/tabview/Makefile.in | 1 + .../test/tabview/browser_tabview_bug587503.js | 245 ++++++++++++++++++ 7 files changed, 431 insertions(+), 96 deletions(-) create mode 100644 browser/base/content/test/tabview/browser_tabview_bug587503.js diff --git a/browser/base/content/tabview/drag.js b/browser/base/content/tabview/drag.js index 49aef30f893a..d580fe607e33 100644 --- a/browser/base/content/tabview/drag.js +++ b/browser/base/content/tabview/drag.js @@ -296,7 +296,10 @@ Drag.prototype = { if (this.parent && this.parent.expanded) this.parent.arrange(); - if (this.item && !this.item.parent) { + if (this.item.parent) + this.item.parent.arrange(); + + if (!this.item.parent) { this.item.setZ(drag.zIndex); drag.zIndex++; diff --git a/browser/base/content/tabview/groupitems.js b/browser/base/content/tabview/groupitems.js index cb6318e1b5b2..5fc0cb321ac6 100644 --- a/browser/base/content/tabview/groupitems.js +++ b/browser/base/content/tabview/groupitems.js @@ -282,7 +282,7 @@ function GroupItem(listOfEls, options) { // ___ Children Array.prototype.forEach.call(listOfEls, function(el) { - self.add(el, null, options); + self.add(el, options); }); // ___ Finish Up @@ -811,14 +811,14 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), { // // a - The item to add. Can be an , a DOM element or an iQ object. // The latter two must refer to the container of an . - // dropPos - An object with left and top properties referring to the - // location dropped at. Optional. - // options - An optional object with settings for this call. See below. + // options - An object with optional settings for this call. // - // Possible options: - // dontArrange - Don't rearrange the children for the new item - // immediately - Don't animate - add: function GroupItem_add(a, dropPos, options) { + // Options: + // + // index - (int) if set, add this tab at this index + // immediately - (bool) if true, no animation will be used + // dontArrange - (bool) if true, will not trigger an arrange on the group + add: function GroupItem_add(a, options) { try { var item; var $el; @@ -846,48 +846,8 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), { wasAlreadyInThisGroupItem = true; } - // TODO: You should be allowed to drop in the white space at the bottom - // and have it go to the end (right now it can match the thumbnail above - // it and go there) - // Bug 586548 - function findInsertionPoint(dropPos) { - if (self.shouldStack(self._children.length + 1)) - return 0; - - var best = {dist: Infinity, item: null}; - var index = 0; - var box; - self._children.forEach(function(child) { - box = child.getBounds(); - if (box.bottom < dropPos.top || box.top > dropPos.top) - return; - - var dist = Math.sqrt(Math.pow((box.top+box.height/2)-dropPos.top,2) - + Math.pow((box.left+box.width/2)-dropPos.left,2)); - - if (dist <= best.dist) { - best.item = child; - best.dist = dist; - best.index = index; - } - }); - - if (self._children.length) { - if (best.item) { - box = best.item.getBounds(); - var insertLeft = dropPos.left <= box.left + box.width/2; - if (!insertLeft) - return best.index+1; - return best.index; - } - return self._children.length; - } - - return 0; - } - // Insert the tab into the right position. - var index = dropPos ? findInsertionPoint(dropPos) : this._children.length; + var index = ("index" in options) ? options.index : this._children.length; this._children.splice(index, 0, item); item.setZ(this.getZ() + 1); @@ -1120,54 +1080,84 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), { // Lays out all of the children. // // Parameters: - // options - passed to or <_stackArrange> + // options - passed to or <_stackArrange>, except those below + // + // Options: + // addTab - (boolean) if true, we add one to the child count + // oldDropIndex - if set, we will only set any bounds if the dropIndex has + // changed + // dropPos - () a position where a tab is currently positioned, above + // this group. + // animate - (boolean) if true, movement of children will be animated. + // + // Returns: + // dropIndex - an index value for where an item would be dropped, if + // options.dropPos is given. arrange: function GroupItem_arrange(options) { + if (!options) + options = {}; + + let childrenToArrange = []; + this._children.forEach(function(child) { + if (child.isDragging) + options.addTab = true; + else + childrenToArrange.push(child); + }); + if (GroupItems._arrangePaused) { GroupItems.pushArrange(this, options); return; } + var dropIndex = false; if (this.expanded) { this.topChild = null; var box = new Rect(this.expanded.bounds); box.inset(8, 8); - Items.arrange(this._children, box, Utils.extend({}, options, {z: 99999})); + let result = Items.arrange(childrenToArrange, box, Utils.extend({}, options, {z: 99999})); + dropIndex = result.dropIndex; } else { + var count = childrenToArrange.length; var bb = this.getContentBounds(); - if (!this.shouldStack()) { - if (!options) - options = {}; - - this._children.forEach(function(child) { + if (!this.shouldStack(count + (options.addTab ? 1 : 0))) { + childrenToArrange.forEach(function(child) { child.removeClass("stacked") }); this.topChild = null; - if (!this._children.length) + if (!childrenToArrange.length) return; - var arrangeOptions = Utils.copy(options); - Utils.extend(arrangeOptions, { + var arrangeOptions = Utils.extend({}, options, { columns: this._columns }); // Items.arrange will rearrange the children, but also return an array // of the Rect's used. - var rects = Items.arrange(this._children, bb, arrangeOptions); + let result = Items.arrange(childrenToArrange, bb, arrangeOptions); + dropIndex = result.dropIndex; + if ("oldDropIndex" in options && options.oldDropIndex === dropIndex) + return dropIndex; + var rects = result.rects; - // first, find the right of the rightmost tab! luckily, they're in order. - var rightMostRight = 0; - if (UI.rtl) { - rightMostRight = rects[0].right; - } else { - for each (var rect in rects) { - if (rect.right > rightMostRight) - rightMostRight = rect.right; - else - break; + let index = 0; + let self = this; + childrenToArrange.forEach(function GroupItem_arrange_children_each(child, i) { + // If dropIndex spacing is active and this is a child after index, + // bump it up one so we actually use the correct rect + // (and skip one for the dropPos) + if (self._dropSpaceActive && index === dropIndex) + index++; + if (!child.locked.bounds) { + child.setBounds(rects[index], !options.animate); + child.setRotation(0); + if (options.z) + child.setZ(options.z); } - } + index++; + }); this._isStacked = false; } else @@ -1176,6 +1166,8 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), { if (this._isStacked && !this.expanded) this.showExpandControl(); else this.hideExpandControl(); + + return dropIndex; }, // ---------- @@ -1416,15 +1408,87 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), { // Helper routine for the constructor; adds various event handlers to the container. _addHandlers: function GroupItem__addHandlers(container) { var self = this; + var dropIndex = false; + var dropSpaceTimer = null; - this.dropOptions.over = function() { + // When the _dropSpaceActive flag is turned on on a group, and a tab is + // dragged on top, a space will open up. + this._dropSpaceActive = false; + + this.dropOptions.over = function GroupItem_dropOptions_over(event) { iQ(this.container).addClass("acceptsDrop"); }; - this.dropOptions.drop = function(event) { - iQ(this.container).removeClass("acceptsDrop"); - this.add(drag.info.$el, {left:event.pageX, top:event.pageY}); - GroupItems.setActiveGroupItem(this); + this.dropOptions.move = function GroupItem_dropOptions_move(event) { + let oldDropIndex = dropIndex; + let dropPos = drag.info.item.getBounds().center(); + let options = {dropPos: dropPos, + addTab: self._dropSpaceActive && drag.info.item.parent != self, + oldDropIndex: oldDropIndex}; + newDropIndex = self.arrange(options); + // If this is a new drop index, start a timer! + if (newDropIndex !== oldDropIndex) { + dropIndex = newDropIndex; + if (this._dropSpaceActive) + return; + + if (dropSpaceTimer) { + clearTimeout(dropSpaceTimer); + dropSpaceTimer = null; + } + + dropSpaceTimer = setTimeout(function GroupItem_arrange_evaluateDropSpace() { + // Note that dropIndex's scope is GroupItem__addHandlers, but + // newDropIndex's scope is GroupItem_dropOptions_move. Thus, + // dropIndex may change with other movement events before we come + // back and check this. If it's still the same dropIndex, activate + // drop space display! + if (dropIndex === newDropIndex) { + self._dropSpaceActive = true; + dropIndex = self.arrange({dropPos: dropPos, + addTab: drag.info.item.parent != self, + animate: true}); + } + dropSpaceTimer = null; + }, 250); + } }; + this.dropOptions.drop = function GroupItem_dropOptions_drop(event) { + iQ(this.container).removeClass("acceptsDrop"); + let options = {}; + if (this._dropSpaceActive) + this._dropSpaceActive = false; + + if (dropSpaceTimer) { + clearTimeout(dropSpaceTimer); + dropSpaceTimer = null; + // If we drop this item before the timed rearrange was executed, + // we won't have an accurate dropIndex value. Get that now. + let dropPos = drag.info.item.getBounds().center(); + dropIndex = self.arrange({dropPos: dropPos, + addTab: drag.info.item.parent != self, + animate: true}); + } + if (dropIndex !== false) + options = {index: dropIndex} + this.add(drag.info.$el, options); + GroupItems.setActiveGroupItem(this); + dropIndex = false; + }; + this.dropOptions.out = function GroupItem_dropOptions_out(event) { + dropIndex = false; + if (this._dropSpaceActive) + this._dropSpaceActive = false; + + if (dropSpaceTimer) { + clearTimeout(dropSpaceTimer); + dropSpaceTimer = null; + } + self.arrange(); + var groupItem = drag.info.item.parent; + if (groupItem) + groupItem.remove(drag.info.$el, {dontClose: true}); + iQ(this.container).removeClass("acceptsDrop"); + } if (!this.locked.bounds) this.draggable(); @@ -1883,7 +1947,7 @@ let GroupItems = { // tab in question): make a new group if (activeGroupItem) { - activeGroupItem.add(tabItem, null, options); + activeGroupItem.add(tabItem, options); return; } diff --git a/browser/base/content/tabview/items.js b/browser/base/content/tabview/items.js index a2b00d7bb494..141d05eee42d 100644 --- a/browser/base/content/tabview/items.js +++ b/browser/base/content/tabview/items.js @@ -179,6 +179,9 @@ Item.prototype = { start: function(e, ui) { if (this.isAGroupItem) GroupItems.setActiveGroupItem(this); + // if we start dragging a tab within a group, start with dropSpace on. + else if (this.parent != null) + this.parent._dropSpaceActive = true; drag.info = new Drag(this, e); }, drag: function(e) { @@ -200,7 +203,6 @@ Item.prototype = { var groupItem = drag.info.item.parent; if (groupItem) groupItem.remove(drag.info.$el, {dontClose: true}); - iQ(this.container).removeClass("acceptsDrop"); }, drop: function(event) { @@ -617,7 +619,6 @@ Item.prototype = { var box = self.getBounds(); box.left = startPos.x + (mouse.x - startMouse.x); box.top = startPos.y + (mouse.y - startMouse.y); - self.setBounds(box, true); if (typeof self.dragOptions.drag == "function") @@ -663,6 +664,11 @@ Item.prototype = { dropOptions.over.apply(dropTarget, [e]); } } + if (dropTarget) { + dropOptions = dropTarget.dropOptions; + if (dropOptions && typeof dropOptions.move == "function") + dropOptions.move.apply(dropTarget, [e]); + } } e.preventDefault(); @@ -919,10 +925,16 @@ let Items = { // default: the actual item count // padding - pixels between each item // columns - (int) a preset number of columns to use + // dropPos - a which should have a one-tab space left open, used + // when a tab is dragged over. // // Returns: - // an object with the width value of the child items and the number of columns, - // if the return option is set to 'widthAndColumns'; otherwise the list of s + // By default, an object with two properties: `rects`, the list of s, + // and `dropIndex`, the index which a dragged tab should have if dropped + // (null if no `dropPos` was specified); + // If the `return` option is set to 'widthAndColumns', an object with the + // width value of the child items (`childWidth`) and the number of columns + // (`columns`) is returned. arrange: function Items_arrange(items, bounds, options) { if (typeof options == 'undefined') options = {}; @@ -936,8 +948,12 @@ let Items = { var tabAspect = TabItems.tabHeight / TabItems.tabWidth; var count = options.count || (items ? items.length : 0); - if (!count) - return rects; + if (options.addTab) + count++; + if (!count) { + let dropIndex = (Utils.isPoint(options.dropPos)) ? 0 : null; + return {rects: rects, dropIndex: dropIndex}; + } var columns = options.columns || 1; // We'll assume for the time being that all the items have the same styling @@ -981,17 +997,23 @@ let Items = { var column = 0; + var dropIndex = false; + var dropRect = false; + if (Utils.isPoint(options.dropPos)) + dropRect = new Rect(options.dropPos.x, options.dropPos.y, 1, 1); for (let a = 0; a < count; a++) { - rects.push(new Rect(box)); - if (items && a < items.length) { - let item = items[a]; - if (!item.locked.bounds) { - item.setBounds(box, immediately); - item.setRotation(0); - if (options.z) - item.setZ(options.z); - } + // If we had a dropPos, see if this is where we should place it + if (dropRect) { + let activeBox = new Rect(box); + activeBox.inset(-itemMargin - 1, -itemMargin - 1); + // if the designated position (dropRect) is within the active box, + // this is where, if we drop the tab being dragged, it should land! + if (activeBox.contains(dropRect)) + dropIndex = a; } + + // record the box. + rects.push(new Rect(box)); box.left += (UI.rtl ? -1 : 1) * (box.width + padding); column++; @@ -1002,7 +1024,7 @@ let Items = { } } - return rects; + return {rects: rects, dropIndex: dropIndex}; }, // ---------- diff --git a/browser/base/content/tabview/tabitems.js b/browser/base/content/tabview/tabitems.js index 791583b6d943..1de2163a7c18 100644 --- a/browser/base/content/tabview/tabitems.js +++ b/browser/base/content/tabview/tabitems.js @@ -351,7 +351,7 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), { if (tabData.groupID) { var groupItem = GroupItems.groupItem(tabData.groupID); if (groupItem) { - groupItem.add(this, null, {immediately: true}); + groupItem.add(this, {immediately: true}); // if it matches the selected tab or no active tab and the browser // tab is hidden, the active group item would be set. diff --git a/browser/base/content/tabview/ui.js b/browser/base/content/tabview/ui.js index d6f55d4fa237..fce3ab1feb7a 100644 --- a/browser/base/content/tabview/ui.js +++ b/browser/base/content/tabview/ui.js @@ -295,7 +295,7 @@ let UI = { items.forEach(function(item) { if (item.parent) item.parent.remove(item); - groupItem.add(item, null, {immediately: true}); + groupItem.add(item, {immediately: true}); }); if (firstTime) { diff --git a/browser/base/content/test/tabview/Makefile.in b/browser/base/content/test/tabview/Makefile.in index d5571826cb37..09252e60ccb6 100644 --- a/browser/base/content/test/tabview/Makefile.in +++ b/browser/base/content/test/tabview/Makefile.in @@ -51,6 +51,7 @@ _BROWSER_FILES = \ browser_tabview_bug587043.js \ browser_tabview_bug587231.js \ browser_tabview_bug587351.js \ + browser_tabview_bug587503.js \ browser_tabview_bug587990.js \ browser_tabview_bug589324.js \ browser_tabview_bug590606.js \ diff --git a/browser/base/content/test/tabview/browser_tabview_bug587503.js b/browser/base/content/test/tabview/browser_tabview_bug587503.js new file mode 100644 index 000000000000..e4a85cd7f3c1 --- /dev/null +++ b/browser/base/content/test/tabview/browser_tabview_bug587503.js @@ -0,0 +1,245 @@ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is bug 587503 test. + * + * The Initial Developer of the Original Code is + * Mozilla Foundation. + * Portions created by the Initial Developer are Copyright (C) 2010 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * Michael Yoshitaka Erlewine + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + +function test() { + waitForExplicitFinish(); + + window.addEventListener("tabviewshown", onTabViewWindowLoaded, false); + if (TabView.isVisible()) + onTabViewWindowLoaded(); + else + TabView.show(); +} + +function onTabViewWindowLoaded() { + window.removeEventListener("tabviewshown", onTabViewWindowLoaded, false); + + ok(TabView.isVisible(), "Tab View is visible"); + + let contentWindow = document.getElementById("tab-view").contentWindow; + let [originalTab] = gBrowser.visibleTabs; + + let currentGroup = contentWindow.GroupItems.getActiveGroupItem(); + + // Create a group and make it active + let box = new contentWindow.Rect(100, 100, 370, 370); + let group = new contentWindow.GroupItem([], { bounds: box }); + ok(group.isEmpty(), "This group is empty"); + contentWindow.GroupItems.setActiveGroupItem(group); + + // Create a bunch of tabs in the group + let tabs = []; + tabs.push(gBrowser.loadOneTab("about:blank#0", {inBackground: true})); + tabs.push(gBrowser.loadOneTab("about:blank#1", {inBackground: true})); + tabs.push(gBrowser.loadOneTab("about:blank#2", {inBackground: true})); + tabs.push(gBrowser.loadOneTab("about:blank#3", {inBackground: true})); + tabs.push(gBrowser.loadOneTab("about:blank#4", {inBackground: true})); + tabs.push(gBrowser.loadOneTab("about:blank#5", {inBackground: true})); + tabs.push(gBrowser.loadOneTab("about:blank#6", {inBackground: true})); + + ok(!group.shouldStack(group._children.length), "Group should not stack."); + + // PREPARE FINISH: + group.addSubscriber(group, "close", function() { + group.removeSubscriber(group, "close"); + + ok(group.isEmpty(), "The group is empty again"); + + contentWindow.GroupItems.setActiveGroupItem(currentGroup); + isnot(contentWindow.GroupItems.getActiveGroupItem(), null, "There is an active group"); + is(gBrowser.tabs.length, 1, "There is only one tab left"); + is(gBrowser.visibleTabs.length, 1, "There is also only one visible tab"); + + let onTabViewHidden = function() { + window.removeEventListener("tabviewhidden", onTabViewHidden, false); + finish(); + }; + window.addEventListener("tabviewhidden", onTabViewHidden, false); + gBrowser.selectedTab = originalTab; + + TabView.hide(); + }); + + // STAGE 1: move the last tab to the third position + let currentTarget = tabs[6].tabItem; + let currentPos = currentTarget.getBounds().center(); + let targetPos = tabs[2].tabItem.getBounds().center(); + let vector = new contentWindow.Point(targetPos.x - currentPos.x, + targetPos.y - currentPos.y); + checkDropIndexAndDropSpace(currentTarget, group, vector.x, vector.y, contentWindow, + function(index, dropSpaceActiveValues) { + // Now: 0, 1, 6, 2, 3, 4, 5 + is(index, 2, "Tab 6 is now in the third position"); + is(dropSpaceActiveValues[0], true, "dropSpace was always showing"); + + // STAGE 2: move the second tab to the end of the list + let currentTarget = tabs[1].tabItem; + let currentPos = currentTarget.getBounds().center(); + // pick a point in that empty bottom part of the group + let groupBounds = group.getBounds(); + let bottomPos = new contentWindow.Point( + (groupBounds.left + groupBounds.right) / 2, + groupBounds.bottom - 15); + let vector = new contentWindow.Point(bottomPos.x - currentPos.x, + bottomPos.y - currentPos.y); + checkDropIndexAndDropSpace(currentTarget, group, vector.x, vector.y, contentWindow, + function(index, dropSpaceActiveValues) { + // Now: 0, 6, 2, 3, 4, 5, 1 + is(index, 6, "Tab 1 is now at the end of the group"); + is(dropSpaceActiveValues[0], true, "dropSpace was always showing"); + + // STAGE 3: move the fifth tab outside the group + // Note: there should be room below the active group... + let currentTarget = tabs[4].tabItem; + let currentPos = currentTarget.getBounds().center(); + // Pick a point below the group. + let belowPos = new contentWindow.Point( + (groupBounds.left + groupBounds.right) / 2, + groupBounds.bottom + 300); + let vector = new contentWindow.Point(belowPos.x - currentPos.x, + belowPos.y - currentPos.y); + checkDropIndexAndDropSpace(currentTarget, group, vector.x, vector.y, contentWindow, + function(index, dropSpaceActiveValues) { + // Now: 0, 6, 2, 3, 5, 1 + is(index, -1, "Tab 5 is no longer in the group"); + contentWindow.Utils.log('dropSpaceActiveValues',dropSpaceActiveValues); + is(dropSpaceActiveValues[0], true, "The group began by showing a dropSpace"); + is(dropSpaceActiveValues[dropSpaceActiveValues.length - 1], false, "In the end, the group was not showing a dropSpace"); + + // We wrap this in a setTimeout with 1000ms delay in order to wait for the + // tab to resize, as it does after we drop it in stage 3 outside of the group. + setTimeout(function() { + // STAGE 4: move the fifth tab back into the group, on the second row. + let currentTarget = tabs[4].tabItem; + let currentPos = currentTarget.getBounds().center(); + let targetPos = tabs[5].tabItem.getBounds().center(); + // contentWindow.Utils.log(targetPos, currentPos); + vector = new contentWindow.Point(targetPos.x - currentPos.x, + targetPos.y - currentPos.y); + // Call with time = 4000 + checkDropIndexAndDropSpace(currentTarget, group, vector.x, vector.y, contentWindow, + function(index, dropSpaceActiveValues) { + // Now: 0, 6, 2, 3, 4, 5, 1 + is(index, 4, "Tab 5 is back and again the fifth tab."); + contentWindow.Utils.log('dropSpaceActiveValues',dropSpaceActiveValues); + is(dropSpaceActiveValues[0], false, "The group began by not showing a dropSpace"); + is(dropSpaceActiveValues[dropSpaceActiveValues.length - 1], true, "In the end, the group was showing a dropSpace"); + + // Get rid of the group and its children + // The group close will trigger a finish(). + group.closeAll(); + group.closeHidden(); + }, 6000, false); + },1000); + + }); + + }); + + }); +} + +function simulateSlowDragDrop(srcElement, offsetX, offsetY, contentWindow, time) { + // enter drag mode + let dataTransfer; + + // contentWindow.Utils.log('offset', offsetX, offsetY); + let bounds = srcElement.getBoundingClientRect(); + // contentWindow.Utils.log('original center', bounds.left + bounds.width / 2, bounds.top + bounds.height / 2); + + EventUtils.synthesizeMouse( + srcElement, 2, 2, { type: "mousedown" }, contentWindow); + let event = contentWindow.document.createEvent("DragEvents"); + event.initDragEvent( + "dragenter", true, true, contentWindow, 0, 0, 0, 0, 0, + false, false, false, false, 1, null, dataTransfer); + srcElement.dispatchEvent(event); + + let steps = 20; + + // drag over + let moveIncremental = function moveIncremental(i, steps) { + // calculate how much to move + let offsetXDiff = Math.round(i * offsetX / steps) - Math.round((i - 1) * offsetX / steps); + let offsetYDiff = Math.round(i * offsetY / steps) - Math.round((i - 1) * offsetY / steps); + // contentWindow.Utils.log('step', offsetXDiff, offsetYDiff); + // simulate mousemove + EventUtils.synthesizeMouse( + srcElement, offsetXDiff + 2, offsetYDiff + 2, + { type: "mousemove" }, contentWindow); + // simulate dragover + let event = contentWindow.document.createEvent("DragEvents"); + event.initDragEvent( + "dragover", true, true, contentWindow, 0, 0, 0, 0, 0, + false, false, false, false, 0, null, dataTransfer); + srcElement.dispatchEvent(event); + let bounds = srcElement.getBoundingClientRect(); + // contentWindow.Utils.log(i, 'center', bounds.left + bounds.width / 2, bounds.top + bounds.height / 2); + }; + for (let i = 1; i <= steps; i++) + setTimeout(moveIncremental, i / (steps + 1) * time, i, steps); + + // drop + let finalDrop = function finalDrop() { + EventUtils.synthesizeMouseAtCenter(srcElement, { type: "mouseup" }, contentWindow); + event = contentWindow.document.createEvent("DragEvents"); + event.initDragEvent( + "drop", true, true, contentWindow, 0, 0, 0, 0, 0, + false, false, false, false, 0, null, dataTransfer); + srcElement.dispatchEvent(event); + contentWindow.iQ(srcElement).css({border: 'green 1px solid'}); + } + setTimeout(finalDrop, time); +} + +function checkDropIndexAndDropSpace(item, group, offsetX, offsetY, contentWindow, callback, time) { + contentWindow.UI.setActiveTab(item); + let dropSpaceActiveValues = []; + let recordDropSpaceValue = function() { + dropSpaceActiveValues.push(group._dropSpaceActive); + }; +// contentWindow.iQ(item.container).css({border: 'red 1px solid'}); + let onDrop = function() { + item.container.removeEventListener('dragover', recordDropSpaceValue, false); + item.container.removeEventListener('drop', onDrop, false); + let index = group._children.indexOf(item); + callback(index, dropSpaceActiveValues); + }; + item.container.addEventListener('dragover', recordDropSpaceValue, false); + item.container.addEventListener('drop', onDrop, false); + simulateSlowDragDrop(item.container, offsetX, offsetY, contentWindow, time || 1000); +}