draw links in the "dummy" tab

content/treestyletab/group.xul

@@ -1,5 +1,6 @@
 <?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
 <?xml-stylesheet type="text/css" href="chrome://treestyletab/skin/group/group.css"?>
+<?xml-stylesheet type="text/css" href="chrome://treestyletab/skin/pseudo-tree.css"?>
 <!DOCTYPE page SYSTEM "chrome://treestyletab/locale/treestyletab.dtd">
 <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	onclick="onClick(event)"
@@ -33,12 +34,19 @@
 					value="&group.default;"/>
 			</hbox>
 		</deck>
+		<vbox id="tree"
+			flex="1"/>
 	</vbox>
 </stack>
 <link xmlns="http://www.w3.org/1999/xhtml" rel="icon"
 	href="chrome://treestyletab/skin/group/group-icon"/>
 <script type="application/javascript"><![CDATA[
 
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+
+Components.utils.import('resource://treestyletab-modules/pseudoTreeBuilder.js');
+
 var gIcon = document.getElementById('icon');
 var gLabel = document.getElementById('label');
 var gEdit = document.getElementById('editor');
@@ -112,5 +120,56 @@ function onKeyPress(aEvent)
 		exitEdit();
 }
 
+function getOwnerTabBrowser()
+{
+	var ownerWindow = window
+					.QueryInterface(Ci.nsIInterfaceRequestor)
+					.getInterface(Ci.nsIWebNavigation)
+					.QueryInterface(Ci.nsIDocShell)
+					.QueryInterface(Ci.nsIDocShellTreeItem)
+					.parent;
+	if (ownerWindow) {
+		ownerWindow = ownerWindow
+						.QueryInterface(Ci.nsIWebNavigation)
+						.document
+						.defaultView;
+		return ownerWindow.gBrowser;
+	}
+	return null;
+}
+
+function onItemClick(aEvent)
+{
+	var id = aEvent.getData('id');
+	var gBrowser = getOwnerTabBrowser();
+	if (id && gBrowser) {
+		let tab = gBrowser.treeStyleTab.getTabById(id);
+		if (tab)
+			gBrowser.selectedTab = tab;
+	}
+}
+
+var treeInitialized = false;
+
+window.addEventListener('load', function(aEvent) {
+	window.removeEventListener(aEvent.type, arguments.callee, false);
+
+	var gBrowser = getOwnerTabBrowser();
+	if (gBrowser) {
+		let tab = gBrowser.treeStyleTab.getTabFromFrame(window);
+		let tree = document.getElementById('tree');
+		tree.appendChild(PseudoTreeBuilder.build(tab));
+		tree.addEventListener(PseudoTreeBuilder.kTAB_LINK_CLICK, onItemClick, false);
+		treeInitialized = true;
+	}
+}, false);
+
+window.addEventListener('unload', function(aEvent) {
+	window.removeEventListener(aEvent.type, arguments.callee, false);
+	if (!treeInitialized)
+		return;
+
+	document.getElementById('tree').removeEventListener(PseudoTreeBuilder.kTAB_LINK_CLICK, onItemClick, false);
+}, false);
 ]]></script>
 </page>

content/treestyletab/treestyletab.css

@@ -519,24 +519,6 @@ window[chromehidden~="toolbar"]
 	opacity: 1;
 }
 
-#treestyletab-full-tree-tooltip .treestyletab-full-tree-tooltip-favicon {
-	max-width: 16px;
-	max-height: 16px;
-}
-
-#treestyletab-full-tree-tooltip .treestyletab-full-tree-tooltip-treerow {
-	-moz-box-align: center;
-}
-
-#treestyletab-full-tree-tooltip .treestyletab-full-tree-tooltip-treerow .text-link {
-	-moz-box-crop: end;
-}
-
-#treestyletab-full-tree-tooltip .treestyletab-full-tree-tooltip-treechildren {
-	margin-left: 1.5em;
-	-moz-box-align: stretch;
-}
-
 
 /* addon compatibility */
 

content/treestyletab/treestyletab.xul

@@ -8,6 +8,7 @@
 <?xml-stylesheet href="chrome://treestyletab/skin/ui.css" type="text/css"?>
 <?xml-stylesheet href="chrome://treestyletab/skin/tmp.css" type="text/css"?><!-- hacks for Tab Mix Plus -->
 <?xml-stylesheet href="chrome://treestyletab/skin/platform-base.css" type="text/css"?>
+<?xml-stylesheet href="chrome://treestyletab/skin/pseudo-tree.css" type="text/css"?>
 
 <?xul-overlay href="res/tabFx2Compatible.xul"?>
 

modules/fullTooltip.js

@@ -39,6 +39,7 @@ const Cc = Components.classes;
 const Ci = Components.interfaces;
 
 Components.utils.import('resource://treestyletab-modules/utils.js');
+Components.utils.import('resource://treestyletab-modules/pseudoTreeBuilder.js');
 
 function FullTooltipManager(aOwner)
 {
@@ -51,10 +52,6 @@ FullTooltipManager.prototype = {
 	kTOOLTIP_MODE_COLLAPSED : 1,
 	kTOOLTIP_MODE_ALWAYS    : 2,
 
-	kFAVICON      : 'treestyletab-full-tree-tooltip-favicon',
-	kTREEROW      : 'treestyletab-full-tree-tooltip-treerow',
-	kTREECHILDREN : 'treestyletab-full-tree-tooltip-treechildren',
-
 	get window()
 	{
 		return this.owner.window;
@@ -84,7 +81,8 @@ FullTooltipManager.prototype = {
 		this.tabTooltip.addEventListener('popupshowing', this, true);
 		this.tabTooltip.addEventListener('popuphiding', this, true);
 
-		this.tabFullTooltip.addEventListener('click', this, true);
+		this.tabFullTooltip.addEventListener('click', this, false);
+		this.tabFullTooltip.addEventListener(PseudoTreeBuilder.kTAB_LINK_CLICK, this, false);
 		this.tabFullTooltip.addEventListener('popupshown', this, true);
 		this.tabFullTooltip.addEventListener('popuphidden', this, true);
 	},
@@ -97,7 +95,8 @@ FullTooltipManager.prototype = {
 		this.tabTooltip.removeEventListener('popupshowing', this, true);
 		this.tabTooltip.removeEventListener('popuphiding', this, true);
 
-		this.tabFullTooltip.removeEventListener('click', this, true);
+		this.tabFullTooltip.removeEventListener('click', this, false);
+		this.tabFullTooltip.removeEventListener(PseudoTreeBuilder.kTAB_LINK_CLICK, this, false);
 		this.tabFullTooltip.removeEventListener('popupshown', this, true);
 		this.tabFullTooltip.removeEventListener('popuphidden', this, true);
 
@@ -111,6 +110,9 @@ FullTooltipManager.prototype = {
 			case 'click':
 				return this.onClick(aEvent);
 
+			case PseudoTreeBuilder.kTAB_LINK_CLICK:
+				return this.onItemClick(aEvent);
+
 			case 'popupshowing':
 				return this.onDefaultTooltipShowing(aEvent);
 
@@ -148,18 +150,17 @@ FullTooltipManager.prototype = {
 
 	onClick : function FTM_onClick(aEvent)
 	{
-		var label = this.evaluateXPath(
-				'ancestor-or-self::xul:label[@class="text-link"][1]',
-				aEvent.target,
-				Ci.nsIDOMXPathResult.FIRST_ORDERED_NODE_TYPE
-			).singleNodeValue;
-		if (label) {
-			let id = label.getAttribute(this.kID);
+		this.tabFullTooltip.hidePopup();
+	},
+
+	onItemClick : function FTM_onItemClick(aEvent)
+	{
+		var id = aEvent.getData('id');
+		if (id) {
 			let tab = this.getTabById(id, this.owner.browser);
 			if (tab)
 				this.owner.browser.selectedTab = tab;
 		}
-
 		this.tabFullTooltip.hidePopup();
 	},
 
@@ -399,7 +400,7 @@ FullTooltipManager.prototype = {
 	{
 		this.clear();
 
-		var tree = this.createTabItem(aTab);
+		var tree = PseudoTreeBuilder.build(aTab);
 		var root = this.document.createElement('arrowscrollbox');
 		root.setAttribute('orient', 'vertical');
 		root.setAttribute('flex', 1);
@@ -427,49 +428,5 @@ FullTooltipManager.prototype = {
 		range.selectNodeContents(this.tabFullTooltip);
 		range.deleteContents();
 		range.detach();
-	},
-
-	createTabItem : function FTM_createTabItem(aTab)
-	{
-		var item = this.document.createElement('hbox');
-		item.setAttribute('class', this.kTREEROW);
-
-		var favicon = item.appendChild(this.document.createElement('image'));
-		favicon.setAttribute('src', aTab.getAttribute('image') || 'chrome://mozapps/skin/places/defaultFavicon.png');
-		favicon.setAttribute('class', this.kFAVICON);
-
-		var label = item.appendChild(this.document.createElement('label'));
-		label.setAttribute('value', aTab.label);
-		var tooltip = aTab.label;
-		var uri = aTab.linkedBrowser.currentURI.spec;
-		if (uri != 'about:blank') tooltip += '\n' + uri;
-		label.setAttribute('tooltiptext', tooltip);
-		label.setAttribute('class', 'text-link');
-		label.setAttribute(this.kID, this.getTabValue(aTab, this.kID));
-
-		var children = this.createTabChildren(aTab);
-		if (children) {
-			let container = this.document.createElement('vbox');
-			container.appendChild(item);
-			container.appendChild(children);
-			return container;
-		}
-		else {
-			return item;
-		}
-	},
-
-	createTabChildren : function FTM_createTabChildren(aTab)
-	{
-		var children = this.getChildTabs(aTab);
-		if (!children.length)
-			return null;
-
-		var container = this.document.createElement('vbox');
-		children.forEach(function(aChild) {
-			container.appendChild(this.createTabItem(aChild));
-		}, this);
-		container.setAttribute('class', this.kTREECHILDREN);
-		return container;
 	}
 };

modules/pseudoTreeBuilder.js

@@ -0,0 +1,131 @@
+/* ***** BEGIN LICENSE BLOCK ***** 
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is the Tree Style Tab.
+ *
+ * The Initial Developer of the Original Code is SHIMODA Hiroshi.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s): SHIMODA Hiroshi <piro.outsider.reflex@gmail.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ******/
+
+const EXPORTED_SYMBOLS = ['PseudoTreeBuilder'];
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+
+Components.utils.import('resource://treestyletab-modules/utils.js');
+
+var PseudoTreeBuilder = {
+	__proto__ : TreeStyleTabUtils,
+
+	kFAVICON      : 'treestyletab-pseudo-tree-favicon',
+	kROOTITEM     : 'treestyletab-pseudo-tree-root-item',
+	kTREEITEM     : 'treestyletab-pseudo-tree-item',
+	kTREEROW      : 'treestyletab-pseudo-tree-row',
+	kTREECHILDREN : 'treestyletab-pseudo-tree-children',
+
+	kTAB_LINK_CLICK : 'nsDOMTSTPseudoTreeItemClick',
+
+	build : function TB_build(aTab) 
+	{
+		if (!aTab)
+			return null;
+
+		var tree = this.createTabItem(aTab);
+
+		tree.querySelector("."+this.kTREEROW)
+			.className += " "+this.kROOTITEM;
+
+		tree.setAttribute('onclick', <![CDATA[
+			var doc = event.target.ownerDocument;
+			var label = doc.evaluate(
+					'ancestor-or-self::*[local-name()="label" and contains(@class, "text-link")][1]',
+					event.target,
+					null,
+					Components.interfaces.nsIDOMXPathResult.FIRST_ORDERED_NODE_TYPE,
+					null
+				).singleNodeValue;
+			if (label) {
+				var customEvent = doc.createEvent('DataContainerEvent');
+				customEvent.initEvent(%EVENT_TYPE%, true, true);
+				customEvent.setData('id', label.getAttribute('tab-id'));
+				event.target.dispatchEvent(customEvent);
+			}
+		]]>.toString().replace('%EVENT_TYPE%', this.kTAB_LINK_CLICK.quote()));
+
+		return tree;
+	},
+
+	createTabItem : function TB_createTabItem(aTab)
+	{
+		var doc = aTab.ownerDocument;
+
+		var item = doc.createElement('hbox');
+		item.setAttribute('class', this.kTREEROW);
+
+		var favicon = item.appendChild(doc.createElement('image'));
+		favicon.setAttribute('src', aTab.getAttribute('image') || 'chrome://mozapps/skin/places/defaultFavicon.png');
+		favicon.setAttribute('class', this.kFAVICON);
+
+		var label = item.appendChild(doc.createElement('label'));
+		label.setAttribute('value', aTab.label);
+		var tooltip = aTab.label;
+		var uri = aTab.linkedBrowser.currentURI.spec;
+		if (uri != 'about:blank') tooltip += '\n' + uri;
+		label.setAttribute('tooltiptext', tooltip);
+		label.setAttribute('class', 'text-link '+this.kTREEITEM);
+		label.setAttribute('tab-id', this.getTabValue(aTab, this.kID));
+
+		var children = this.createTabChildren(aTab);
+		if (children) {
+			let container = doc.createElement('vbox');
+			container.appendChild(item);
+			container.appendChild(children);
+			return container;
+		}
+		else {
+			return item;
+		}
+	},
+
+	createTabChildren : function TB_createTabChildren(aTab)
+	{
+		var doc = aTab.ownerDocument;
+
+		var children = this.getChildTabs(aTab);
+		if (!children.length)
+			return null;
+
+		var container = doc.createElement('vbox');
+		children.forEach(function(aChild) {
+			container.appendChild(this.createTabItem(aChild));
+		}, this);
+		container.setAttribute('class', this.kTREECHILDREN);
+		return container;
+	}
+};

skin/classic/treestyletab/group/group.css

@@ -57,3 +57,15 @@
 	bottom: 0;
 	left: auto;
 }
+
+
+#tree {
+	margin-top: 1em;
+	max-height: 80%;
+	overflow: auto;
+	-moz-box-flex: 1;
+}
+
+.treestyletab-pseudo-tree-root-item {
+	display: none;
+}

skin/classic/treestyletab/pseudo-tree.css

@@ -0,0 +1,20 @@
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+.treestyletab-pseudo-tree-favicon {
+	max-width: 16px;
+	max-height: 16px;
+}
+
+.treestyletab-pseudo-tree-row {
+	-moz-box-align: center;
+}
+
+.treestyletab-pseudo-tree-row label.text-link {
+	-moz-box-crop: end;
+}
+
+.treestyletab-pseudo-tree-children {
+	margin-left: 1.5em;
+	-moz-box-align: stretch;
+}
+