Implement pseudo tree only with XUL.

There is no need to use XHTML, just needed to apply "display:block"...
This commit is contained in:
YUKI Hiroshi 2016-03-04 11:35:12 +09:00
parent ea9a9c9978
commit 8506d7e4d7
3 changed files with 20 additions and 11 deletions

View File

@ -690,6 +690,12 @@ window[chromehidden~="toolbar"]
opacity: 1; opacity: 1;
} }
/* required to apply CSS multi columns */
#treestyletab-full-tree-tooltip .treestyletab-pseudo-tree-root,
#treestyletab-full-tree-tooltip .treestyletab-pseudo-tree-root vbox {
display: block;
}
/* addon compatibility */ /* addon compatibility */

View File

@ -44,8 +44,6 @@ Components.utils.import('resource://gre/modules/XPCOMUtils.jsm');
XPCOMUtils.defineLazyModuleGetter(this, 'TreeStyleTabBase', 'resource://treestyletab-modules/base.js'); XPCOMUtils.defineLazyModuleGetter(this, 'TreeStyleTabBase', 'resource://treestyletab-modules/base.js');
var PseudoTreeBuilder = { var PseudoTreeBuilder = {
XHTMLNS : 'http://www.w3.org/1999/xhtml',
kFAVICON : 'treestyletab-pseudo-tree-favicon', kFAVICON : 'treestyletab-pseudo-tree-favicon',
kROOT : 'treestyletab-pseudo-tree-root', kROOT : 'treestyletab-pseudo-tree-root',
kROOTITEM : 'treestyletab-pseudo-tree-root-item', kROOTITEM : 'treestyletab-pseudo-tree-root-item',
@ -98,10 +96,10 @@ var PseudoTreeBuilder = {
var doc = aTab.ownerDocument; var doc = aTab.ownerDocument;
var w = doc.defaultView; var w = doc.defaultView;
var item = doc.createElementNS(this.XHTMLNS, 'div'); var item = doc.createElement('vbox');
item.setAttribute('class', this.kTREEITEM); item.setAttribute('class', this.kTREEITEM);
var favicon = item.appendChild(doc.createElementNS(this.XHTMLNS, 'img')); var favicon = item.appendChild(doc.createElement('image'));
favicon.setAttribute('src', aTab.getAttribute('image') || 'chrome://mozapps/skin/places/defaultFavicon.png'); favicon.setAttribute('src', aTab.getAttribute('image') || 'chrome://mozapps/skin/places/defaultFavicon.png');
favicon.setAttribute('class', this.kFAVICON); favicon.setAttribute('class', this.kFAVICON);
@ -115,13 +113,13 @@ var PseudoTreeBuilder = {
label.setAttribute('class', 'text-link'); label.setAttribute('class', 'text-link');
label.setAttribute('tab-id', TreeStyleTabBase.getTabValue(aTab, TreeStyleTabBase.kID)); label.setAttribute('tab-id', TreeStyleTabBase.getTabValue(aTab, TreeStyleTabBase.kID));
var row = doc.createElementNS(this.XHTMLNS, 'div'); var row = doc.createElement('vbox');
row.setAttribute('class', this.kTREEROW); row.setAttribute('class', this.kTREEROW);
row.appendChild(item); row.appendChild(item);
var children = this.createTabChildren(aTab); var children = this.createTabChildren(aTab);
if (children) { if (children) {
let container = doc.createElementNS(this.XHTMLNS, 'div'); let container = doc.createElement('vbox');
container.appendChild(row); container.appendChild(row);
container.appendChild(children); container.appendChild(children);
return container; return container;
@ -139,7 +137,7 @@ var PseudoTreeBuilder = {
if (!children.length) if (!children.length)
return null; return null;
var container = doc.createElementNS(this.XHTMLNS, 'div'); var container = doc.createElement('vbox');
container.setAttribute('class', this.kTREECHILDREN); container.setAttribute('class', this.kTREECHILDREN);
for (let i = 0, maxi = children.length; i < maxi; i++) for (let i = 0, maxi = children.length; i < maxi; i++)
{ {

View File

@ -1,5 +1,4 @@
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace xhtml url("http://www.w3.org/1999/xhtml");
:root { :root {
appearance: window; appearance: window;
@ -66,10 +65,16 @@
-moz-box-flex: 1; -moz-box-flex: 1;
} }
*|*.treestyletab-pseudo-tree-root-item { /* required to apply CSS multi columns */
.treestyletab-pseudo-tree-root,
.treestyletab-pseudo-tree-root vbox {
display: block;
}
.treestyletab-pseudo-tree-root-item {
display: none !important; display: none !important;
} }
*|*.treestyletab-pseudo-tree-root-item + .treestyletab-pseudo-tree-root-item +
*|*.treestyletab-pseudo-tree-children > *|* { .treestyletab-pseudo-tree-children > * {
margin-left: 0 !important; margin-left: 0 !important;
} }