зеркало из https://github.com/mozilla/gecko-dev.git
Bug 587503 - Improve reordering tabs in groups [r=ian, a=blocking2.0-final+]
This commit is contained in:
Michael Yoshitaka Erlewine
Родитель
09ea9bc676
Коммит
f17852f133
|
|
@ -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++;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <Item>, a DOM element or an iQ object.
|
||||
// The latter two must refer to the container of an <Item>.
|
||||
// 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 <Items.arrange> or <_stackArrange>
|
||||
// options - passed to <Items.arrange> 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 - (<Point>) 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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <Point> 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 <Rect>s
|
||||
// By default, an object with two properties: `rects`, the list of <Rect>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};
|
||||
},
|
||||
|
||||
// ----------
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 \
|
||||
|
|
|
|||
|
|
@ -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 <mitcho@mitcho.com>
|
||||
*
|
||||
* 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);
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче