зеркало из 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:
Родитель
09ea9bc676
Коммит
f17852f133
|
@ -296,7 +296,10 @@ Drag.prototype = {
|
||||||
if (this.parent && this.parent.expanded)
|
if (this.parent && this.parent.expanded)
|
||||||
this.parent.arrange();
|
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);
|
this.item.setZ(drag.zIndex);
|
||||||
drag.zIndex++;
|
drag.zIndex++;
|
||||||
|
|
||||||
|
|
|
@ -282,7 +282,7 @@ function GroupItem(listOfEls, options) {
|
||||||
|
|
||||||
// ___ Children
|
// ___ Children
|
||||||
Array.prototype.forEach.call(listOfEls, function(el) {
|
Array.prototype.forEach.call(listOfEls, function(el) {
|
||||||
self.add(el, null, options);
|
self.add(el, options);
|
||||||
});
|
});
|
||||||
|
|
||||||
// ___ Finish Up
|
// ___ 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.
|
// 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>.
|
// The latter two must refer to the container of an <Item>.
|
||||||
// dropPos - An object with left and top properties referring to the
|
// options - An object with optional settings for this call.
|
||||||
// location dropped at. Optional.
|
|
||||||
// options - An optional object with settings for this call. See below.
|
|
||||||
//
|
//
|
||||||
// Possible options:
|
// Options:
|
||||||
// dontArrange - Don't rearrange the children for the new item
|
//
|
||||||
// immediately - Don't animate
|
// index - (int) if set, add this tab at this index
|
||||||
add: function GroupItem_add(a, dropPos, options) {
|
// 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 {
|
try {
|
||||||
var item;
|
var item;
|
||||||
var $el;
|
var $el;
|
||||||
|
@ -846,48 +846,8 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
|
||||||
wasAlreadyInThisGroupItem = true;
|
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.
|
// 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);
|
this._children.splice(index, 0, item);
|
||||||
|
|
||||||
item.setZ(this.getZ() + 1);
|
item.setZ(this.getZ() + 1);
|
||||||
|
@ -1120,54 +1080,84 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
|
||||||
// Lays out all of the children.
|
// Lays out all of the children.
|
||||||
//
|
//
|
||||||
// Parameters:
|
// 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) {
|
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) {
|
if (GroupItems._arrangePaused) {
|
||||||
GroupItems.pushArrange(this, options);
|
GroupItems.pushArrange(this, options);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
var dropIndex = false;
|
||||||
if (this.expanded) {
|
if (this.expanded) {
|
||||||
this.topChild = null;
|
this.topChild = null;
|
||||||
var box = new Rect(this.expanded.bounds);
|
var box = new Rect(this.expanded.bounds);
|
||||||
box.inset(8, 8);
|
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 {
|
} else {
|
||||||
|
var count = childrenToArrange.length;
|
||||||
var bb = this.getContentBounds();
|
var bb = this.getContentBounds();
|
||||||
if (!this.shouldStack()) {
|
if (!this.shouldStack(count + (options.addTab ? 1 : 0))) {
|
||||||
if (!options)
|
childrenToArrange.forEach(function(child) {
|
||||||
options = {};
|
|
||||||
|
|
||||||
this._children.forEach(function(child) {
|
|
||||||
child.removeClass("stacked")
|
child.removeClass("stacked")
|
||||||
});
|
});
|
||||||
|
|
||||||
this.topChild = null;
|
this.topChild = null;
|
||||||
|
|
||||||
if (!this._children.length)
|
if (!childrenToArrange.length)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
var arrangeOptions = Utils.copy(options);
|
var arrangeOptions = Utils.extend({}, options, {
|
||||||
Utils.extend(arrangeOptions, {
|
|
||||||
columns: this._columns
|
columns: this._columns
|
||||||
});
|
});
|
||||||
|
|
||||||
// Items.arrange will rearrange the children, but also return an array
|
// Items.arrange will rearrange the children, but also return an array
|
||||||
// of the Rect's used.
|
// 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.
|
let index = 0;
|
||||||
var rightMostRight = 0;
|
let self = this;
|
||||||
if (UI.rtl) {
|
childrenToArrange.forEach(function GroupItem_arrange_children_each(child, i) {
|
||||||
rightMostRight = rects[0].right;
|
// If dropIndex spacing is active and this is a child after index,
|
||||||
} else {
|
// bump it up one so we actually use the correct rect
|
||||||
for each (var rect in rects) {
|
// (and skip one for the dropPos)
|
||||||
if (rect.right > rightMostRight)
|
if (self._dropSpaceActive && index === dropIndex)
|
||||||
rightMostRight = rect.right;
|
index++;
|
||||||
else
|
if (!child.locked.bounds) {
|
||||||
break;
|
child.setBounds(rects[index], !options.animate);
|
||||||
|
child.setRotation(0);
|
||||||
|
if (options.z)
|
||||||
|
child.setZ(options.z);
|
||||||
}
|
}
|
||||||
}
|
index++;
|
||||||
|
});
|
||||||
|
|
||||||
this._isStacked = false;
|
this._isStacked = false;
|
||||||
} else
|
} else
|
||||||
|
@ -1176,6 +1166,8 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
|
||||||
|
|
||||||
if (this._isStacked && !this.expanded) this.showExpandControl();
|
if (this._isStacked && !this.expanded) this.showExpandControl();
|
||||||
else this.hideExpandControl();
|
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.
|
// Helper routine for the constructor; adds various event handlers to the container.
|
||||||
_addHandlers: function GroupItem__addHandlers(container) {
|
_addHandlers: function GroupItem__addHandlers(container) {
|
||||||
var self = this;
|
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");
|
iQ(this.container).addClass("acceptsDrop");
|
||||||
};
|
};
|
||||||
this.dropOptions.drop = function(event) {
|
this.dropOptions.move = function GroupItem_dropOptions_move(event) {
|
||||||
iQ(this.container).removeClass("acceptsDrop");
|
let oldDropIndex = dropIndex;
|
||||||
this.add(drag.info.$el, {left:event.pageX, top:event.pageY});
|
let dropPos = drag.info.item.getBounds().center();
|
||||||
GroupItems.setActiveGroupItem(this);
|
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)
|
if (!this.locked.bounds)
|
||||||
this.draggable();
|
this.draggable();
|
||||||
|
@ -1883,7 +1947,7 @@ let GroupItems = {
|
||||||
// tab in question): make a new group
|
// tab in question): make a new group
|
||||||
|
|
||||||
if (activeGroupItem) {
|
if (activeGroupItem) {
|
||||||
activeGroupItem.add(tabItem, null, options);
|
activeGroupItem.add(tabItem, options);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -179,6 +179,9 @@ Item.prototype = {
|
||||||
start: function(e, ui) {
|
start: function(e, ui) {
|
||||||
if (this.isAGroupItem)
|
if (this.isAGroupItem)
|
||||||
GroupItems.setActiveGroupItem(this);
|
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.info = new Drag(this, e);
|
||||||
},
|
},
|
||||||
drag: function(e) {
|
drag: function(e) {
|
||||||
|
@ -200,7 +203,6 @@ Item.prototype = {
|
||||||
var groupItem = drag.info.item.parent;
|
var groupItem = drag.info.item.parent;
|
||||||
if (groupItem)
|
if (groupItem)
|
||||||
groupItem.remove(drag.info.$el, {dontClose: true});
|
groupItem.remove(drag.info.$el, {dontClose: true});
|
||||||
|
|
||||||
iQ(this.container).removeClass("acceptsDrop");
|
iQ(this.container).removeClass("acceptsDrop");
|
||||||
},
|
},
|
||||||
drop: function(event) {
|
drop: function(event) {
|
||||||
|
@ -617,7 +619,6 @@ Item.prototype = {
|
||||||
var box = self.getBounds();
|
var box = self.getBounds();
|
||||||
box.left = startPos.x + (mouse.x - startMouse.x);
|
box.left = startPos.x + (mouse.x - startMouse.x);
|
||||||
box.top = startPos.y + (mouse.y - startMouse.y);
|
box.top = startPos.y + (mouse.y - startMouse.y);
|
||||||
|
|
||||||
self.setBounds(box, true);
|
self.setBounds(box, true);
|
||||||
|
|
||||||
if (typeof self.dragOptions.drag == "function")
|
if (typeof self.dragOptions.drag == "function")
|
||||||
|
@ -663,6 +664,11 @@ Item.prototype = {
|
||||||
dropOptions.over.apply(dropTarget, [e]);
|
dropOptions.over.apply(dropTarget, [e]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (dropTarget) {
|
||||||
|
dropOptions = dropTarget.dropOptions;
|
||||||
|
if (dropOptions && typeof dropOptions.move == "function")
|
||||||
|
dropOptions.move.apply(dropTarget, [e]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -919,10 +925,16 @@ let Items = {
|
||||||
// default: the actual item count
|
// default: the actual item count
|
||||||
// padding - pixels between each item
|
// padding - pixels between each item
|
||||||
// columns - (int) a preset number of columns to use
|
// 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:
|
// Returns:
|
||||||
// an object with the width value of the child items and the number of columns,
|
// By default, an object with two properties: `rects`, the list of <Rect>s,
|
||||||
// if the return option is set to 'widthAndColumns'; otherwise 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) {
|
arrange: function Items_arrange(items, bounds, options) {
|
||||||
if (typeof options == 'undefined')
|
if (typeof options == 'undefined')
|
||||||
options = {};
|
options = {};
|
||||||
|
@ -936,8 +948,12 @@ let Items = {
|
||||||
|
|
||||||
var tabAspect = TabItems.tabHeight / TabItems.tabWidth;
|
var tabAspect = TabItems.tabHeight / TabItems.tabWidth;
|
||||||
var count = options.count || (items ? items.length : 0);
|
var count = options.count || (items ? items.length : 0);
|
||||||
if (!count)
|
if (options.addTab)
|
||||||
return rects;
|
count++;
|
||||||
|
if (!count) {
|
||||||
|
let dropIndex = (Utils.isPoint(options.dropPos)) ? 0 : null;
|
||||||
|
return {rects: rects, dropIndex: dropIndex};
|
||||||
|
}
|
||||||
|
|
||||||
var columns = options.columns || 1;
|
var columns = options.columns || 1;
|
||||||
// We'll assume for the time being that all the items have the same styling
|
// We'll assume for the time being that all the items have the same styling
|
||||||
|
@ -981,18 +997,24 @@ let Items = {
|
||||||
|
|
||||||
var column = 0;
|
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++) {
|
for (let a = 0; a < count; a++) {
|
||||||
rects.push(new Rect(box));
|
// If we had a dropPos, see if this is where we should place it
|
||||||
if (items && a < items.length) {
|
if (dropRect) {
|
||||||
let item = items[a];
|
let activeBox = new Rect(box);
|
||||||
if (!item.locked.bounds) {
|
activeBox.inset(-itemMargin - 1, -itemMargin - 1);
|
||||||
item.setBounds(box, immediately);
|
// if the designated position (dropRect) is within the active box,
|
||||||
item.setRotation(0);
|
// this is where, if we drop the tab being dragged, it should land!
|
||||||
if (options.z)
|
if (activeBox.contains(dropRect))
|
||||||
item.setZ(options.z);
|
dropIndex = a;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// record the box.
|
||||||
|
rects.push(new Rect(box));
|
||||||
|
|
||||||
box.left += (UI.rtl ? -1 : 1) * (box.width + padding);
|
box.left += (UI.rtl ? -1 : 1) * (box.width + padding);
|
||||||
column++;
|
column++;
|
||||||
if (column == columns) {
|
if (column == columns) {
|
||||||
|
@ -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) {
|
if (tabData.groupID) {
|
||||||
var groupItem = GroupItems.groupItem(tabData.groupID);
|
var groupItem = GroupItems.groupItem(tabData.groupID);
|
||||||
if (groupItem) {
|
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
|
// if it matches the selected tab or no active tab and the browser
|
||||||
// tab is hidden, the active group item would be set.
|
// tab is hidden, the active group item would be set.
|
||||||
|
|
|
@ -295,7 +295,7 @@ let UI = {
|
||||||
items.forEach(function(item) {
|
items.forEach(function(item) {
|
||||||
if (item.parent)
|
if (item.parent)
|
||||||
item.parent.remove(item);
|
item.parent.remove(item);
|
||||||
groupItem.add(item, null, {immediately: true});
|
groupItem.add(item, {immediately: true});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (firstTime) {
|
if (firstTime) {
|
||||||
|
|
|
@ -51,6 +51,7 @@ _BROWSER_FILES = \
|
||||||
browser_tabview_bug587043.js \
|
browser_tabview_bug587043.js \
|
||||||
browser_tabview_bug587231.js \
|
browser_tabview_bug587231.js \
|
||||||
browser_tabview_bug587351.js \
|
browser_tabview_bug587351.js \
|
||||||
|
browser_tabview_bug587503.js \
|
||||||
browser_tabview_bug587990.js \
|
browser_tabview_bug587990.js \
|
||||||
browser_tabview_bug589324.js \
|
browser_tabview_bug589324.js \
|
||||||
browser_tabview_bug590606.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);
|
||||||
|
}
|
Загрузка…
Ссылка в новой задаче