From f973be9ae54572557f5b7d5174d9ce45da1e9611 Mon Sep 17 00:00:00 2001 From: YUKI Hiroshi Date: Mon, 15 Feb 2016 19:49:09 +0900 Subject: [PATCH] Build pseudo tree based on HTML --- modules/groupTab.js | 32 ++++++++--------------- modules/pseudoTreeBuilder.js | 15 +++++------ skin/classic/treestyletab/group.css | 9 ++++--- skin/classic/treestyletab/pseudo-tree.css | 24 +++++++++++------ 4 files changed, 40 insertions(+), 40 deletions(-) diff --git a/modules/groupTab.js b/modules/groupTab.js index b64e034d..62c13946 100644 --- a/modules/groupTab.js +++ b/modules/groupTab.js @@ -234,6 +234,8 @@ GroupTab.prototype = inherit(TreeStyleTabBase, { var contents = PseudoTreeBuilder.build(this.getOwnerTab()); if (contents) tree.appendChild(contents); + + this.onResize(); }, checkUpdateTreeNow : function GT_checkUpdateTreeNow() @@ -272,10 +274,8 @@ GroupTab.prototype = inherit(TreeStyleTabBase, { case 'TabSelect': return this.onTabSelect(aEvent); - case 'overflow': - return this.onOverflow(aEvent); - case 'underflow': - return this.onUnderflow(aEvent); + case 'resize': + return this.onResize(); case this.kEVENT_TYPE_ATTACHED: return this.onTabAttached(aEvent); @@ -298,8 +298,7 @@ GroupTab.prototype = inherit(TreeStyleTabBase, { this.window.addEventListener('unload', this, false); this.window.addEventListener('click', this, false); this.window.addEventListener('dblclick', this, false); - this.window.addEventListener('overflow', this, false); - this.window.addEventListener('underflow', this, false); + this.window.addEventListener('resize', this, false); tab.addEventListener('TabSelect', this, false); tab.addEventListener('TabClose', this, false); @@ -331,8 +330,7 @@ GroupTab.prototype = inherit(TreeStyleTabBase, { this.window.removeEventListener('unload', this, false); this.window.removeEventListener('click', this, false); this.window.removeEventListener('dblclick', this, false); - this.window.removeEventListener('overflow', this, false); - this.window.removeEventListener('underflow', this, false); + this.window.removeEventListener('resize', this, false); tab.removeEventListener('TabSelect', this, false); tab.removeEventListener('TabClose', this, false); @@ -403,20 +401,12 @@ GroupTab.prototype = inherit(TreeStyleTabBase, { this.shouldUpdate = false; }, - onOverflow : function GT_onOverflow(aEvent) + onResize : function GT_onResize() { - var target = aEvent.originalTarget; - if (target.className != PseudoTreeBuilder.kTREEITEM) - return; - target.style.minHeight = target.lastChild.boxObject.height + 'px'; - }, - - onUnderflow : function GT_onUnderflow(aEvent) - { - var target = aEvent.originalTarget; - if (target.className != PseudoTreeBuilder.kTREEITEM) - return; - target.style.minHeight = ''; + var items = this.document.querySelectorAll('*|*.' + PseudoTreeBuilder.kTREEITEM); + Array.forEach(items, function(aItem) { + aItem.style.minHeight = (aItem.lastChild.boxObject.height + 1) + 'px'; + }, this); }, onTabAttached : function GT_onTabAttached(aEvent) diff --git a/modules/pseudoTreeBuilder.js b/modules/pseudoTreeBuilder.js index 4ce62ee8..40f28435 100644 --- a/modules/pseudoTreeBuilder.js +++ b/modules/pseudoTreeBuilder.js @@ -44,6 +44,7 @@ Components.utils.import('resource://gre/modules/XPCOMUtils.jsm'); XPCOMUtils.defineLazyModuleGetter(this, 'TreeStyleTabBase', 'resource://treestyletab-modules/base.js'); var PseudoTreeBuilder = { + XHTMLNS : 'http://www.w3.org/1999/xhtml', kFAVICON : 'treestyletab-pseudo-tree-favicon', kROOTITEM : 'treestyletab-pseudo-tree-root-item', @@ -60,7 +61,7 @@ var PseudoTreeBuilder = { var tree = this.createTabItem(aTab); - var row = tree.querySelector("."+this.kTREEROW); + var row = tree.querySelector("*|*."+this.kTREEROW); if (!row) return; @@ -95,11 +96,10 @@ var PseudoTreeBuilder = { var doc = aTab.ownerDocument; var w = doc.defaultView; - var item = doc.createElement('hbox'); + var item = doc.createElementNS(this.XHTMLNS, 'div'); item.setAttribute('class', this.kTREEITEM); - item.setAttribute('flex', 1); - var favicon = item.appendChild(doc.createElement('image')); + var favicon = item.appendChild(doc.createElementNS(this.XHTMLNS, 'img')); favicon.setAttribute('src', aTab.getAttribute('image') || 'chrome://mozapps/skin/places/defaultFavicon.png'); favicon.setAttribute('class', this.kFAVICON); @@ -113,14 +113,13 @@ var PseudoTreeBuilder = { label.setAttribute('class', 'text-link'); label.setAttribute('tab-id', TreeStyleTabBase.getTabValue(aTab, TreeStyleTabBase.kID)); - var row = doc.createElement('hbox'); + var row = doc.createElementNS(this.XHTMLNS, 'div'); row.setAttribute('class', this.kTREEROW); - row.setAttribute('flex', 1); row.appendChild(item); var children = this.createTabChildren(aTab); if (children) { - let container = doc.createElement('vbox'); + let container = doc.createElementNS(this.XHTMLNS, 'div'); container.appendChild(row); container.appendChild(children); return container; @@ -138,7 +137,7 @@ var PseudoTreeBuilder = { if (!children.length) return null; - var container = doc.createElement('vbox'); + var container = doc.createElementNS(this.XHTMLNS, 'div'); container.setAttribute('class', this.kTREECHILDREN); for (let i = 0, maxi = children.length; i < maxi; i++) { diff --git a/skin/classic/treestyletab/group.css b/skin/classic/treestyletab/group.css index 0ff9d88c..3cd1bd06 100644 --- a/skin/classic/treestyletab/group.css +++ b/skin/classic/treestyletab/group.css @@ -1,3 +1,6 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace xhtml url("http://www.w3.org/1999/xhtml"); + :root { appearance: window; -moz-appearance: window; @@ -63,10 +66,10 @@ -moz-box-flex: 1; } -.treestyletab-pseudo-tree-root-item { - display: none; +*|*.treestyletab-pseudo-tree-root-item { + display: none !important; } -.treestyletab-pseudo-tree-item { +*|*.treestyletab-pseudo-tree-item { overflow: hidden; } diff --git a/skin/classic/treestyletab/pseudo-tree.css b/skin/classic/treestyletab/pseudo-tree.css index 311bf76a..b71975f3 100644 --- a/skin/classic/treestyletab/pseudo-tree.css +++ b/skin/classic/treestyletab/pseudo-tree.css @@ -1,25 +1,33 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace xhtml url("http://www.w3.org/1999/xhtml"); -.treestyletab-pseudo-tree-favicon { +*|*.treestyletab-pseudo-tree-favicon { height: 16px; max-width: 16px; max-height: 16px; width: 16px; } -.treestyletab-pseudo-tree-row { - box-align: center; - -moz-box-align: center; +*|*.treestyletab-pseudo-tree-item { + display: block; + margin-bottom: 0.15em; + white-space: pre; } -.treestyletab-pseudo-tree-row label.text-link { +*|*.treestyletab-pseudo-tree-row { + display: block; +} + +*|*.treestyletab-pseudo-tree-row label.text-link { box-crop: end; -moz-box-crop: end; + margin: 0; + padding: 0 0 0 0.2em; + vertical-align: text-top; + white-space: pre-wrap; } -.treestyletab-pseudo-tree-children { +*|*.treestyletab-pseudo-tree-children > *|* { margin-left: 1.5em; - box-align: stretch; - -moz-box-align: stretch; }