Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 23:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 574217: Some touchups based on comments from dolske

Browse Source
This commit is contained in:
Michael Yoshitaka Erlewine 2010-08-11 23:08:33 -04:00
parent 8a35f21530
commit ebcfb5ec75
7 changed files with 98 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
browser/base/content/tabview/drag.js
View File

@ -62,39 +62,35 @@ var drag = {
// isResizing - (boolean) is this a resizing instance? or (if false) dragging? // isResizing - (boolean) is this a resizing instance? or (if false) dragging?
// isFauxDrag - (boolean) true if a faux drag, which is used when simply snapping. // isFauxDrag - (boolean) true if a faux drag, which is used when simply snapping.
var Drag = function(item, event, isResizing, isFauxDrag) { var Drag = function(item, event, isResizing, isFauxDrag) {
try { Utils.assert(item && (item.isAnItem || item.isAFauxItem),
Utils.assert(item && (item.isAnItem || item.isAFauxItem), 'must be an item, or at least a faux item');
'must be an item, or at least a faux item');
this.isResizing = isResizing || false; this.isResizing = isResizing || false;
this.item = item; this.item = item;
this.el = item.container; this.el = item.container;
this.$el = iQ(this.el); this.$el = iQ(this.el);
this.parent = this.item.parent; this.parent = this.item.parent;
this.startPosition = new Point(event.clientX, event.clientY); this.startPosition = new Point(event.clientX, event.clientY);
this.startTime = Date.now(); this.startTime = Date.now();
this.item.isDragging = true; this.item.isDragging = true;
this.item.setZ(999999); this.item.setZ(999999);
this.safeWindowBounds = Items.getSafeWindowBounds(); this.safeWindowBounds = Items.getSafeWindowBounds();
Trenches.activateOthersTrenches(this.el); Trenches.activateOthersTrenches(this.el);
if (!isFauxDrag) { if (!isFauxDrag) {
// When a tab drag starts, make it the focused tab. // When a tab drag starts, make it the focused tab.
if (this.item.isAGroupItem) { if (this.item.isAGroupItem) {
var tab = UI.getActiveTab(); var tab = UI.getActiveTab();
if (!tab || tab.parent != this.item) { if (!tab || tab.parent != this.item) {
if (this.item._children.length) if (this.item._children.length)
UI.setActiveTab(this.item._children[0]); UI.setActiveTab(this.item._children[0]);
}
} else if (this.item.isATabItem) {
UI.setActiveTab(this.item);
} }
} else if (this.item.isATabItem) {
UI.setActiveTab(this.item);
} }
} catch(e) {
Utils.log(e);
} }
}; };
@ -121,27 +117,32 @@ Drag.prototype = {
var snappedTrenches = {}; var snappedTrenches = {};
// OH SNAP! // OH SNAP!
if ( // if we aren't holding down the meta key...
!Keys.meta && // if we aren't holding down the meta key...
(!checkItemStatus || // don't check the item status... if (!Keys.meta) {
// OR we aren't a tab on top of something else, and there's no drop site... // snappable = true if we aren't a tab on top of something else, and
(!(this.item.isATabItem && this.item.overlapsWithOtherItems()) && // there's no active drop site...
!iQ(".acceptsDrop").length)) let snappable = !(this.item.isATabItem &&
) { this.item.overlapsWithOtherItems()) &&
newRect = Trenches.snap(bounds,stationaryCorner,assumeConstantSize,keepProportional); !iQ(".acceptsDrop").length;
if (newRect) { // might be false if no changes were made if (!checkItemStatus || snappable) {
update = true; newRect = Trenches.snap(bounds, stationaryCorner, assumeConstantSize,
snappedTrenches = newRect.snappedTrenches || {}; keepProportional);
bounds = newRect; if (newRect) { // might be false if no changes were made
update = true;
snappedTrenches = newRect.snappedTrenches || {};
bounds = newRect;
}
} }
} }
// make sure the bounds are in the window. // make sure the bounds are in the window.
newRect = this.snapToEdge(bounds,stationaryCorner,assumeConstantSize,keepProportional); newRect = this.snapToEdge(bounds, stationaryCorner, assumeConstantSize,
keepProportional);
if (newRect) { if (newRect) {
update = true; update = true;
bounds = newRect; bounds = newRect;
Utils.extend(snappedTrenches,newRect.snappedTrenches); Utils.extend(snappedTrenches, newRect.snappedTrenches);
} }
Trenches.hideGuides(); Trenches.hideGuides();
@ -150,8 +151,6 @@ Drag.prototype = {
if (typeof trench == 'object') { if (typeof trench == 'object') {
trench.showGuide = true; trench.showGuide = true;
trench.show(); trench.show();
} else if (trench === 'edge') {
// show the edge...?
} }
} }
@ -174,7 +173,7 @@ Drag.prototype = {
var bounds = this.item.getBounds(); var bounds = this.item.getBounds();
bounds = this.snapBounds(bounds, stationaryCorner, assumeConstantSize, keepProportional, true); bounds = this.snapBounds(bounds, stationaryCorner, assumeConstantSize, keepProportional, true);
if (bounds) { if (bounds) {
this.item.setBounds(bounds,true); this.item.setBounds(bounds, true);
return true; return true;
} }
return false; return false;
@ -259,12 +258,11 @@ Drag.prototype = {
// Function: drag // Function: drag
// Called in response to an <Item> draggable "drag" event. // Called in response to an <Item> draggable "drag" event.
drag: function(event) { drag: function(event) {
this.snap('topleft',true); this.snap('topleft', true);
if (this.parent && this.parent.expanded) { if (this.parent && this.parent.expanded) {
var now = Date.now();
var distance = this.startPosition.distance(new Point(event.clientX, event.clientY)); var distance = this.startPosition.distance(new Point(event.clientX, event.clientY));
if (/* now - this.startTime > 500 || */distance > 100) { if (distance > 100) {
this.parent.remove(this.item); this.parent.remove(this.item);
this.parent.collapse(); this.parent.collapse();
} }

76
browser/base/content/tabview/groupitems.js
View File

@ -63,7 +63,7 @@
// container - a DOM element to use as the container for this groupItem; otherwise will create // container - a DOM element to use as the container for this groupItem; otherwise will create
// title - the title for the groupItem; otherwise blank // title - the title for the groupItem; otherwise blank
// dontPush - true if this groupItem shouldn't push away on creation; default is false // dontPush - true if this groupItem shouldn't push away on creation; default is false
window.GroupItem = function GroupItem(listOfEls, options) { let GroupItem = function GroupItem(listOfEls, options) {
try { try {
if (typeof options == 'undefined') if (typeof options == 'undefined')
options = {}; options = {};
@ -123,7 +123,6 @@ window.GroupItem = function GroupItem(listOfEls, options) {
$container $container
.css({zIndex: -100}) .css({zIndex: -100})
.appendTo("body"); .appendTo("body");
/* .dequeue(); */
// ___ New Tab Button // ___ New Tab Button
this.$ntb = iQ("<div>") this.$ntb = iQ("<div>")
@ -140,11 +139,6 @@ window.GroupItem = function GroupItem(listOfEls, options) {
// ___ Resizer // ___ Resizer
this.$resizer = iQ("<div>") this.$resizer = iQ("<div>")
.addClass('resizer') .addClass('resizer')
.css({
position: "absolute",
width: 16, height: 16,
bottom: 0, right: 0,
})
.appendTo($container) .appendTo($container)
.hide(); .hide();
@ -249,8 +243,7 @@ window.GroupItem = function GroupItem(listOfEls, options) {
} }
// ___ Stack Expander // ___ Stack Expander
this.$expander = iQ("<img/>") this.$expander = iQ("<div/>")
.attr("src", "chrome://browser/skin/tabview/stack-expander.png")
.addClass("stackExpander") .addClass("stackExpander")
.appendTo($container) .appendTo($container)
.hide(); .hide();
@ -380,7 +373,11 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
// Used to adjust the width of the title box depending on groupItem width and title size. // Used to adjust the width of the title box depending on groupItem width and title size.
adjustTitleSize: function() { adjustTitleSize: function() {
Utils.assert(this.bounds, 'bounds needs to have been set'); Utils.assert(this.bounds, 'bounds needs to have been set');
var w = Math.min(this.bounds.width - 35, Math.max(150, this.getTitle().length * 6)); let closeButton = iQ('.close', this.container);
var w = Math.min(this.bounds.width - closeButton.width() - closeButton.css('right'),
Math.max(150, this.getTitle().length * 6));
// The * 6 multiplier calculation is assuming that characters in the title
// are approximately 6 pixels wide. Bug 586545
var css = {width: w}; var css = {width: w};
this.$title.css(css); this.$title.css(css);
this.$titleShield.css(css); this.$titleShield.css(css);
@ -394,8 +391,10 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
var titleHeight = this.$titlebar.height(); var titleHeight = this.$titlebar.height();
box.top += titleHeight; box.top += titleHeight;
box.height -= titleHeight; box.height -= titleHeight;
box.inset(6, 6);
// Make the computed bounds' "padding" and new tab button margin actually be
// themeable --OR-- compute this from actual bounds. Bug 586546
box.inset(6, 6);
box.height -= 33; // For new tab button box.height -= 33; // For new tab button
return box; return box;
@ -556,7 +555,7 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
// Adds an item to the groupItem. // Adds an item to the groupItem.
// Parameters: // Parameters:
// //
// a - The item to add. Can be an <Item>, a DOM element or a jQuery 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 location dropped at. Optional. // dropPos - An object with left and top properties referring to the location dropped at. Optional.
// options - An object with optional settings for this call. Currently the only one is dontArrange. // options - An object with optional settings for this call. Currently the only one is dontArrange.
@ -591,8 +590,10 @@ window.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 // TODO: You should be allowed to drop in the white space at the bottom
// (right now it can match the thumbnail above it and go there) // and have it go to the end (right now it can match the thumbnail above
// it and go there)
// Bug 586548
function findInsertionPoint(dropPos) { function findInsertionPoint(dropPos) {
if (self.shouldStack(self._children.length + 1)) if (self.shouldStack(self._children.length + 1))
return 0; return 0;
@ -672,7 +673,7 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
// Removes an item from the groupItem. // Removes an item from the groupItem.
// Parameters: // Parameters:
// //
// a - The item to remove. Can be an <Item>, a DOM element or a jQuery object. // a - The item to remove. 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>.
// options - An object with optional settings for this call. Currently the only one is dontArrange. // options - An object with optional settings for this call. Currently the only one is dontArrange.
remove: function(a, options) { remove: function(a, options) {
@ -763,7 +764,7 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
top: dT + childBB.height + Math.min(7, (this.getBounds().bottom-childBB.bottom)/2), top: dT + childBB.height + Math.min(7, (this.getBounds().bottom-childBB.bottom)/2),
// TODO: Why the magic -6? because the childBB.width seems to be over-sizing itself. // TODO: Why the magic -6? because the childBB.width seems to be over-sizing itself.
// But who can blame an object for being a bit optimistic when self-reporting size. // But who can blame an object for being a bit optimistic when self-reporting size.
// It has to impress the ladies somehow. // It has to impress the ladies somehow. Bug 586549
left: dL + childBB.width/2 - this.$expander.width()/2 - 6, left: dL + childBB.width/2 - this.$expander.width()/2 - 6,
}); });
}, },
@ -892,7 +893,6 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
var zIndex = this.getZ() + count + 1; var zIndex = this.getZ() + count + 1;
var Pi = Math.acos(-1);
var maxRotation = 35; // degress var maxRotation = 35; // degress
var scale = 0.8; var scale = 0.8;
var newTabsPad = 10; var newTabsPad = 10;
@ -981,17 +981,8 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
}; };
} }
// ___ we're stacked, but command isn't held down
/*if (!Keys.meta) {
GroupItems.setActiveGroupItem(self);
return { shouldZoom: true };
}*/
GroupItems.setActiveGroupItem(self); GroupItems.setActiveGroupItem(self);
return { shouldZoom: true }; return { shouldZoom: true };
/*this.expand();
return {};*/
}, },
expand: function() { expand: function() {
@ -1019,13 +1010,17 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
var overlayHeight = Math.min(window.innerHeight - (padding * 2), h*row + padding*(row+1)); var overlayHeight = Math.min(window.innerHeight - (padding * 2), h*row + padding*(row+1));
var pos = {left: startBounds.left, top: startBounds.top}; var pos = {left: startBounds.left, top: startBounds.top};
pos.left -= overlayWidth/3; pos.left -= overlayWidth / 3;
pos.top -= overlayHeight/3; pos.top -= overlayHeight / 3;
if (pos.top < 0) pos.top = 20; if (pos.top < 0)
if (pos.left < 0) pos.left = 20; pos.top = 20;
if (pos.top+overlayHeight > window.innerHeight) pos.top = window.innerHeight-overlayHeight-20; if (pos.left < 0)
if (pos.left+overlayWidth > window.innerWidth) pos.left = window.innerWidth-overlayWidth-20; pos.left = 20;
if (pos.top + overlayHeight > window.innerHeight)
pos.top = window.innerHeight - overlayHeight - 20;
if (pos.left + overlayWidth > window.innerWidth)
pos.left = window.innerWidth - overlayWidth - 20;
$tray $tray
.animate({ .animate({
@ -1044,12 +1039,8 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
}); });
var $shield = iQ('<div>') var $shield = iQ('<div>')
.addClass('shield')
.css({ .css({
left: 0,
top: 0,
width: window.innerWidth,
height: window.innerHeight,
position: 'absolute',
zIndex: 99997 zIndex: 99997
}) })
.appendTo('body') .appendTo('body')
@ -1237,6 +1228,7 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
// of the groupItem's tab. // of the groupItem's tab.
// TODO: This is probably a terrible hack that sets up a race // TODO: This is probably a terrible hack that sets up a race
// condition. We need a better solution. // condition. We need a better solution.
// Bug 586551
setTimeout(function() { setTimeout(function() {
self._sendToSubscribers("tabAdded", { groupItemId: self.id }); self._sendToSubscribers("tabAdded", { groupItemId: self.id });
}, 1); }, 1);
@ -1250,6 +1242,7 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
// sometimes a long delay before the animation occurs. // sometimes a long delay before the animation occurs.
// We need to fix this--immediate response to a users // We need to fix this--immediate response to a users
// actions is necessary for a good user experience. // actions is necessary for a good user experience.
// Bug 586552
self.onNextNewTab(doNextTab); self.onNextNewTab(doNextTab);
}, },
@ -1274,6 +1267,7 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
var currentIndex; var currentIndex;
// ToDo: optimisation is needed to further reduce the tab move. // ToDo: optimisation is needed to further reduce the tab move.
// Bug 586553
this._children.forEach(function(tabItem) { this._children.forEach(function(tabItem) {
tabBarTabs.some(function(tab, i) { tabBarTabs.some(function(tab, i) {
if (tabItem.tab == tab) { if (tabItem.tab == tab) {
@ -1357,10 +1351,6 @@ window.GroupItems = {
// ---------- // ----------
// Function: init // Function: init
init: function() { init: function() {
/*
Utils.log("hello");
Utils.log("Groups", Groups);
*/
}, },
// ---------- // ----------
@ -1452,6 +1442,7 @@ window.GroupItems = {
// Given persistent storage data for a groupItem, returns true if it appears to not be damaged. // Given persistent storage data for a groupItem, returns true if it appears to not be damaged.
groupItemStorageSanity: function(groupItemData) { groupItemStorageSanity: function(groupItemData) {
// TODO: check everything // TODO: check everything
// Bug 586555
var sane = true; var sane = true;
if (!Utils.isRect(groupItemData.bounds)) { if (!Utils.isRect(groupItemData.bounds)) {
Utils.log('GroupItems.groupItemStorageSanity: bad bounds', groupItemData.bounds); Utils.log('GroupItems.groupItemStorageSanity: bad bounds', groupItemData.bounds);
@ -1465,7 +1456,7 @@ window.GroupItems = {
// Function: getGroupItemWithTitle // Function: getGroupItemWithTitle
// Returns the <GroupItem> that has the given title, or null if none found. // Returns the <GroupItem> that has the given title, or null if none found.
// TODO: what if there are multiple groupItems with the same title?? // TODO: what if there are multiple groupItems with the same title??
// Right now, looks like it'll return the last one. // Right now, looks like it'll return the last one. Bug 586557
getGroupItemWithTitle: function(title) { getGroupItemWithTitle: function(title) {
var result = null; var result = null;
this.groupItems.forEach(function(groupItem) { this.groupItems.forEach(function(groupItem) {
@ -1582,6 +1573,7 @@ window.GroupItems = {
// Does what it says on the tin. // Does what it says on the tin.
// TODO: Make more robust and improve documentation, // TODO: Make more robust and improve documentation,
// Also, this probably belongs in tabitems.js // Also, this probably belongs in tabitems.js
// Bug 586558
positionNewTabAtBottom: function(tabItem) { positionNewTabAtBottom: function(tabItem) {
let windowBounds = Items.getSafeWindowBounds(); let windowBounds = Items.getSafeWindowBounds();

6
browser/base/content/tabview/infoitems.js
View File

@ -150,10 +150,7 @@ window.InfoItem.prototype = Utils.extend(new Item(), new Subscribable(), {
return; return;
var data = this.getStorageData(); var data = this.getStorageData();
/*
if (GroupItems.groupItemStorageSanity(data))
Storage.saveGroupItem(Utils.getCurrentWindow(), data);
*/
} catch(e) { } catch(e) {
Utils.log(e); Utils.log(e);
} }
@ -240,7 +237,6 @@ window.InfoItem.prototype = Utils.extend(new Item(), new Subscribable(), {
Items.unsquish(); Items.unsquish();
}); });
/* Storage.deleteGroupItem(Utils.getCurrentWindow(), this.id); */
} catch(e) { } catch(e) {
Utils.log(e); Utils.log(e);
} }

12
browser/base/content/tabview/items.js
View File

@ -949,12 +949,7 @@ window.Items = {
var a; var a;
for (a = 0; a < count; a++) { for (a = 0; a < count; a++) {
/* immediately = !animate;
if (animate == 'sometimes')
immediately = (typeof item.groupItemData.row == 'undefined' || item.groupItemData.row == row);
else
*/
immediately = !animate;
if (rects) if (rects)
rects.push(new Rect(box)); rects.push(new Rect(box));
@ -968,11 +963,6 @@ window.Items = {
} }
} }
/*
item.groupItemData.column = column;
item.groupItemData.row = row;
*/
box.left += box.width + padding; box.left += box.width + padding;
column++; column++;
if (column == columns) { if (column == columns) {

6
browser/base/content/tabview/tabitems.js
View File

@ -350,7 +350,6 @@ window.TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
// a random location (i.e., from [0,0]). Instead, just // a random location (i.e., from [0,0]). Instead, just
// have it appear where it should be. // have it appear where it should be.
if (immediately || (!this._hasBeenDrawn)) { if (immediately || (!this._hasBeenDrawn)) {
/* $container.stop(true, true); */
$container.css(css); $container.css(css);
} else { } else {
TabItems.pausePainting(); TabItems.pausePainting();
@ -361,14 +360,13 @@ window.TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
TabItems.resumePainting(); TabItems.resumePainting();
} }
}); });
/* }).dequeue(); */
} }
if (css.fontSize && !this.inStack()) { if (css.fontSize && !this.inStack()) {
if (css.fontSize < fontSizeRange.min) if (css.fontSize < fontSizeRange.min)
$title.fadeOut();//.dequeue(); $title.fadeOut();
else else
$title.fadeIn();//.dequeue(); $title.fadeIn();
} }
if (css.width) { if (css.width) {

17
browser/base/content/tabview/tabview.css
View File

@ -393,19 +393,32 @@ input.defaultName:hover {
position: absolute; position: absolute;
opacity: .4; opacity: .4;
cursor: pointer; cursor: pointer;
background-image: url(chrome://browser/skin/tabview/stack-expander.png);
width: 24px;
height: 24px;
} }
.stackExpander:hover { .stackExpander:hover {
opacity: .7 !important; opacity: .7 !important;
} }
.shield {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
}
/* Resizable /* Resizable
----------------------------------*/ ----------------------------------*/
.resizer { .resizer {
background-image: url(chrome://global/skin/icons/resizer.png); background-image: url(chrome://global/skin/icons/resizer.png);
position: absolute; position: absolute;
bottom: 6px; width: 16px;
right: 6px; height: 16px;
bottom: 0px;
right: 0px;
opacity: .2; opacity: .2;
} }

4
browser/base/content/tabview/ui.js
View File

@ -344,9 +344,7 @@ var UIManager = {
gBrowser.contentWindow.focus(); gBrowser.contentWindow.focus();
// set the close button on tab // set the close button on tab
/* setTimeout(function() { // Marshal event from chrome thread to DOM thread */ gBrowser.tabContainer.adjustTabstrip();
gBrowser.tabContainer.adjustTabstrip();
/* }, 1); */
gBrowser.updateTitlebar(); gBrowser.updateTitlebar();
#ifdef XP_MACOSX #ifdef XP_MACOSX