Merge branch 'master' of github.com:piroor/treestyletab
Conflicts: history.en.md history.ja.md
This commit is contained in:
YUKI Hiroshi
commit
4adc6803f9
@ -346,6 +346,7 @@ pref("extensions.treestyletab.tooltip.fullTooltipDelay", 2000);
|
||||
* If true, too many items are shown in multiple columns.
|
||||
*/
|
||||
pref("extensions.treestyletab.tooltip.columnize", true);
|
||||
pref("extensions.treestyletab.tooltip.columnize.width", "20em");
|
||||
|
||||
/**
|
||||
* Visibility of extra menu items for the context menu on tabs, inserted by TST.
|
||||
@ -662,6 +663,7 @@ pref("extensions.treestyletab.pinnedTab.faviconized", true);
|
||||
* If true, too many items are shown in multiple columns in a dummy (group) tab.
|
||||
*/
|
||||
pref("extensions.treestyletab.groupTab.columnize", true);
|
||||
pref("extensions.treestyletab.groupTab.columnize.width", "20em");
|
||||
|
||||
/**
|
||||
* Compatibility hack flags for other addons. They can be disabled by each
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
- master/HEAD
|
||||
* Implement pseudo tree in `about:treestyletab-group` tabs and the rich tooltip without XHTML. (We don't need to mix XHTML and XUL to apply multi-column properties of CSS.)
|
||||
* Activate multi-column layout only when it is required, at tooltip of tabs and dummy group tabs.
|
||||
- 0.17.2016030402
|
||||
* Show rich tooltip with multiple columns even if there are only short title tabs.
|
||||
* Avoid initialization error on newly opened group tabs.
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
- master/HEAD
|
||||
* `about:treestyletab-group`のタブとツールチップにおけるツリーをXHTML無しで実装するようにした（CSSのマルチカラムレイアウトを使うためだけにXHTMLとXULを混在させる必要はない事が分かったため）
|
||||
* タブのツールチップとダミーのグループ化用のタブにおいて、内容が1列に収まらないときだけマルチカラム表示するようにした
|
||||
- 0.17.2016030402
|
||||
* 短いタイトルのタブしかない場合にツールチップの内容が段組表示されない問題を修正
|
||||
* 新しく開かれた空のグループ化用のタブの初期化処理が失敗するようになっていたのを修正
|
||||
|
||||
@ -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()
|
||||
@ -580,36 +543,61 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, {
|
||||
{
|
||||
log('expandTooltip');
|
||||
var tooltip = this.tabFullTooltip;
|
||||
var tree = this.tree;
|
||||
{
|
||||
let tree = this.tree;
|
||||
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
|
||||
});
|
||||
}
|
||||
log(' => tree: ', {
|
||||
height : tooltipBox.height,
|
||||
tree : {
|
||||
width : tree.clientWidth,
|
||||
height : tree.clientHeight
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.lastScreen = this.getCurrentScreen(tooltip.boxObject);
|
||||
|
||||
if (utils.getTreePref('tooltip.columnize')) {
|
||||
this.determineTreeSize();
|
||||
this.expandTooltipInternal();
|
||||
},
|
||||
determineTreeSize : function FTM_determineTreeSize()
|
||||
{
|
||||
var tree = this.tree;
|
||||
|
||||
var columnize = utils.getTreePref('tooltip.columnize');
|
||||
if (columnize) {
|
||||
PseudoTreeBuilder.columnizeTree(tree, {
|
||||
columnWidth : utils.getTreePref('tooltip.columnize.width'),
|
||||
containerBox : {
|
||||
width : this.lastScreen.allowedWidth,
|
||||
height : this.lastScreen.allowedHeight
|
||||
},
|
||||
calculateCount : true
|
||||
});
|
||||
this.window.setTimeout(this.expandTooltipInternal.bind(this), 0);
|
||||
}
|
||||
else {
|
||||
this.expandTooltipInternal();
|
||||
}
|
||||
|
||||
var range = this.document.createRange();
|
||||
range.selectNodeContents(tree);
|
||||
if (tree.previousSibling)
|
||||
range.setStartBefore(tree.previousSibling);
|
||||
var rect = range.getBoundingClientRect();
|
||||
range.detach();
|
||||
|
||||
var container = this.container;
|
||||
|
||||
var arrowScrollBox = container.parentNode;
|
||||
var scrollButtonsMargin = (arrowScrollBox.boxObject.width - arrowScrollBox._scrollbox.boxObject.width);
|
||||
scrollButtonsMargin *= 2; // enough width to deactivate scroll buttons.
|
||||
|
||||
var containerStyle = container.style;
|
||||
containerStyle.width = (container.width = rect.width + scrollButtonsMargin)+'px';
|
||||
containerStyle.height = (container.height = rect.height)+'px';
|
||||
},
|
||||
expandTooltipInternal : function FTM_expandTooltipInternal()
|
||||
{
|
||||
@ -619,30 +607,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,
|
||||
@ -650,7 +632,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)
|
||||
|
||||
@ -411,7 +411,9 @@ GroupTab.prototype = inherit(TreeStyleTabBase, {
|
||||
return;
|
||||
var container = this.document.getElementById('tree');
|
||||
var tree = container.firstChild;
|
||||
PseudoTreeBuilder.columnizeTree(tree);
|
||||
PseudoTreeBuilder.columnizeTree(tree, {
|
||||
columnWidth : utils.getTreePref('groupTab.columnize.width')
|
||||
});
|
||||
},
|
||||
|
||||
onTabAttached : function GT_onTabAttached(aEvent)
|
||||
|
||||
@ -146,45 +146,34 @@ var PseudoTreeBuilder = {
|
||||
return container;
|
||||
},
|
||||
|
||||
columnizeTree : function TB_columnizeTree(aTree, aContainerBox)
|
||||
columnizeTree : function TB_columnizeTree(aTree, aOptions)
|
||||
{
|
||||
if (!aTree)
|
||||
return;
|
||||
|
||||
aContainerBox = aContainerBox || aTree.parentNode.boxObject;
|
||||
aOptions = aOptions || {};
|
||||
aOptions.columnWidth = aOptions.columnWidth || '20em';
|
||||
|
||||
var style = aTree.style;
|
||||
var height = aTree.clientHeight * (aTree.columnCount || 1);
|
||||
if (height > aContainerBox.height &&
|
||||
aContainerBox.height < aContainerBox.width) {
|
||||
let maxWidth = aContainerBox.width;
|
||||
aTree.columnWidth = Math.floor(maxWidth * 0.9 / 2.5);
|
||||
let count = Math.ceil(
|
||||
(Math.max(aTree.clientWidth, maxWidth) * aTree.clientHeight) /
|
||||
(aTree.columnWidth * aTree.clientHeight)
|
||||
);
|
||||
aTree.columnCount = style.columnCount = style.MozColumnCount = count;
|
||||
style.columnWidth = style.MozColumnWidth = aTree.columnWidth+'px';
|
||||
|
||||
style.columnWidth = style.MozColumnWidth = 'calc(' + aOptions.columnWidth + ')';
|
||||
{
|
||||
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';
|
||||
style.columnCount = style.MozColumnCount = 'auto';
|
||||
|
||||
aTree.ownerDocument.defaultView.setTimeout((function() {
|
||||
let columnCount = this.getActualColumnCount(aTree);
|
||||
aTree.columnCount = style.columnCount =
|
||||
style.MozColumnCount = columnCount;
|
||||
}).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) {
|
||||
var containerBox = aOptions.containerBox || aTree.parentNode.boxObject;
|
||||
var maxWidth = containerBox.width;
|
||||
if (aTree.columnWidth * 2 <= maxWidth ||
|
||||
aOptions.calculateCount) {
|
||||
style.height = style.maxHeight =
|
||||
Math.floor(aContainerBox.height * 0.9) + 'px';
|
||||
Math.floor(containerBox.height * 0.9) + 'px';
|
||||
|
||||
if (this.getActualColumnCount(aTree) == 1)
|
||||
style.columnWidth = style.MozColumnWidth = '';
|
||||
}
|
||||
else {
|
||||
style.height = style.maxHeight = '';
|
||||
@ -192,24 +181,10 @@ var PseudoTreeBuilder = {
|
||||
},
|
||||
getActualColumnCount : function TB_getActualColumnCount(aTree)
|
||||
{
|
||||
var rows = aTree.querySelectorAll('*|*.' + this.kTREEROW);
|
||||
if (rows.length <= 1)
|
||||
return 0;
|
||||
|
||||
var firstRow = rows[0];
|
||||
if (rows[0].clientWidth === 0) // ignore hidden item!
|
||||
firstRow = rows[1];
|
||||
var lastRow = rows[rows.length - 1];
|
||||
|
||||
var firstWidth = firstRow.clientWidth;
|
||||
var lastWidth = lastRow.clientWidth;
|
||||
|
||||
// We have to see XUL box object's x instead of HTML element's clientLeft
|
||||
// to get actual position of elements in a multi-column box.
|
||||
var firstX = firstRow.querySelector('label').boxObject.x;
|
||||
var lastX = lastRow.querySelector('label').boxObject.x;
|
||||
|
||||
var totalWidth = lastX + lastWidth - firstX;
|
||||
return Math.floor(totalWidth / firstWidth);
|
||||
var range = aTree.ownerDocument.createRange();
|
||||
range.selectNodeContents(aTree);
|
||||
var rect = range.getBoundingClientRect();
|
||||
range.detach();
|
||||
return Math.floor(rect.width / aTree.columnWidth);
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user