diff --git a/modules/fullTooltip.js b/modules/fullTooltip.js index f01f9926..ec76afb4 100644 --- a/modules/fullTooltip.js +++ b/modules/fullTooltip.js @@ -145,38 +145,6 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, { }; }, - getTotalContentSize : function FTM_getTotalContentSize(aContainer) - { - var total = { - width : 0, - height : 0 - }; - var totalHeight = 0; - var orient = this.window.getComputedStyle(aContainer, null).getPropertyValue('orient'); - var isVertical = orient == 'vertical'; - Array.forEach(aContainer.childNodes, function(aNode) { - var width, height; - var box = aNode.boxObject; - if (box) { - width = box.width; - height = box.height; - } - else { - width = aNode.clientWidth; - height = aNode.clientHeight; - } - if (isVertical) { - total.width = Math.max(total.width, width); - total.height += height; - } - else { - total.width += width; - total.height = Math.max(total.height, height); - } - }); - return total; - }, - get currentTooltipMargins() { var tooltip = this.tabFullTooltip; @@ -560,11 +528,6 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, { root.appendChild(container); this.tabFullTooltip.appendChild(root); - - log(' => tree size: ', { - width : tree.clientWidth, - height : tree.clientHeight - }); }, clear : function FTM_clear() @@ -584,23 +547,32 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, { { let basePosition = this.windowBasePosition; let tooltipBox = tooltip.boxObject; - log(' => current tooltip position: ', { + log(' => initial dimension: ', { screenX : tooltipBox.screenX, screenY : tooltipBox.screenY, x : tooltipBox.screenX - basePosition.x, y : tooltipBox.screenY - basePosition.y, width : tooltipBox.width, - height : tooltipBox.height + height : tooltipBox.height, + tree : { + width : tree.clientWidth, + height : tree.clientHeight + } }); } - log(' => tree: ', { - width : tree.clientWidth, - height : tree.clientHeight - }); this.lastScreen = this.getCurrentScreen(tooltip.boxObject); - if (utils.getTreePref('tooltip.columnize')) { + var header = this.tree.previousSibling; + var extraHeight = header && header.boxObject.height || 0; + + var treeBox = { + width : tree.clientWidth, + height : tree.clientHeight + }; + + var columnize = utils.getTreePref('tooltip.columnize'); + if (columnize) { PseudoTreeBuilder.columnizeTree(tree, { containerBox : { width : this.lastScreen.allowedWidth, @@ -608,11 +580,19 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, { }, calculateCount : true }); - this.window.setTimeout(this.expandTooltipInternal.bind(this), 0); } - else { + + this.window.setTimeout((function() { + if (!columnize || tree.columnCount != 1) + treeBox = tree.boxObject; + + var container = this.container; + var containerStyle = container.style; + containerStyle.width = (container.width = treeBox.width)+'px'; + containerStyle.height = (container.height = (treeBox.height + extraHeight))+'px'; + this.expandTooltipInternal(); - } + }).bind(this), 0); }, expandTooltipInternal : function FTM_expandTooltipInternal() { @@ -622,30 +602,24 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, { var tooltip = this.tabFullTooltip; tooltip.setAttribute('popup-shown', true); - var requiredSize = this.getTotalContentSize(this.tree.parentNode); - { - // Let's maximize the container box enough to show the tree. - // If the tree is larger thant the tooltip, - // it becomes scrollable by arrowscrollbox. - let containerStyle = this.container.style; - containerStyle.width = requiredSize.width+'px'; - containerStyle.height = requiredSize.height+'px'; - } - var currentScreen = this.lastScreen || this.getCurrentScreen(box); var box = tooltip.boxObject; var currentX = box.screenX - currentScreen.left; var currentY = box.screenY - currentScreen.top; + var container = this.container; + var maxWidth = Math.min(container.width, currentScreen.allowedWidth); + var maxHeight = Math.min(container.height, currentScreen.allowedHeight); + var style = tooltip.style; - style.maxWidth = currentScreen.allowedWidth+'px'; + style.maxWidth = maxWidth+'px'; style.maxHeight = currentScreen.allowedHeight+'px'; style.minWidth = 0; style.minHeight = 0; var margins = this.currentTooltipMargins; - var maxX = currentScreen.width - Math.min(requiredSize.width, currentScreen.allowedWidth); - var maxY = currentScreen.height - Math.min(requiredSize.height, currentScreen.allowedHeight); + var maxX = currentScreen.width - maxWidth; + var maxY = currentScreen.height - maxHeight; log(' => current dimension: ', { margins : margins, @@ -653,7 +627,12 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, { y : currentY, maxX : maxX, maxY : maxY, - required : requiredSize + container : { + width : container.width, + height : container.height + }, + screen : currentScreen, + columnCount : this.tree.columnCount }); if (currentX > maxX) diff --git a/modules/pseudoTreeBuilder.js b/modules/pseudoTreeBuilder.js index 92a9b6e5..127567eb 100644 --- a/modules/pseudoTreeBuilder.js +++ b/modules/pseudoTreeBuilder.js @@ -152,31 +152,39 @@ var PseudoTreeBuilder = { return; aOptions = aOptions || {}; - var containerBox = aOptions.containerBox || aTree.parentNode.boxObject; - var style = aTree.style; - var height = aTree.clientHeight * (aTree.columnCount || 1); - if (height > containerBox.height && - containerBox.height < containerBox.width) { - let maxWidth = containerBox.width; - aTree.columnWidth = Math.floor(maxWidth * 0.9 / 2.5); - style.columnWidth = style.MozColumnWidth = aTree.columnWidth+'px'; - style.columnGap = style.MozColumnGap = '0'; - style.columnFill = style.MozColumnFill = 'auto'; - if (aOptions.calculateCount) { - let count = Math.ceil( - (Math.max(aTree.clientWidth, maxWidth) * aTree.clientHeight) / - (aTree.columnWidth * aTree.clientHeight) - ); - aTree.columnCount = style.columnCount = style.MozColumnCount = count; - } - else { - aTree.columnCount = 2; - style.columnCount = style.MozColumnCount = 'auto'; - } + style.columnWidth = style.MozColumnWidth = 'calc(20em)'; + { + let computedStyle = aTree.ownerDocument.defaultView.getComputedStyle(aTree, null) + aTree.columnWidth = Number((computedStyle.MozColumnWidth || computedStyle.columnWidth).replace(/px/, '')); + } + style.columnGap = style.MozColumnGap = '0'; + style.columnFill = style.MozColumnFill = 'auto'; + + var containerBox = aOptions.containerBox || aTree.parentNode.boxObject; + var maxWidth = containerBox.width; + if (aOptions.calculateCount) { + let count = Math.ceil( + (Math.max(aTree.clientWidth, maxWidth) * aTree.clientHeight) / + (aTree.columnWidth * aTree.clientHeight) + ); + style.columnCount = style.MozColumnCount = count; + } + else { + style.columnCount = style.MozColumnCount = 'auto'; + } + + if (aTree.columnWidth * 2 <= maxWidth || + aOptions.calculateCount) { + style.height = style.maxHeight = + Math.floor(containerBox.height * 0.9) + 'px'; + + aTree.columnCount = 0; aTree.ownerDocument.defaultView.setTimeout((function() { aTree.columnCount = this.getActualColumnCount(aTree); + if (aTree.columnCount == 1) + style.columnWidth = style.MozColumnWidth = ''; if (aOptions.calculateCount) { style.columnCount = style.MozColumnCount = @@ -184,20 +192,9 @@ var PseudoTreeBuilder = { } }).bind(this), 0); } - else { - aTree.columnCount = 1; - style.columnCount = style.MozColumnCount = - style.columnWidth = style.MozColumnWidth = - style.columnGap = style.MozColumnGap = - style.columnFill = style.MozColumnFill = ''; - } - - if (aTree.columnCount > 1) { - style.height = style.maxHeight = - Math.floor(containerBox.height * 0.9) + 'px'; - } else { style.height = style.maxHeight = ''; + aTree.columnCount = 1; } }, getActualColumnCount : function TB_getActualColumnCount(aTree)