タブのドロップ位置の表示を実装

git-svn-id: http://www.cozmixng.org/repos/piro/treestyletab/trunk@1240 599a83e7-65a4-db11-8015-0010dcdd6dc2

content/treestyletab/treestyletab.css

@@ -1,11 +1,18 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-tab:not([treestyletab-children]) .treestyletab-tab-tree-twisty,
-tab:not([treestyletab-children]) .treestyletab-tab-tree-counter-container,
-tab:not([treestyletab-subtree-collapsed="true"]) .treestyletab-tab-tree-counter-container {
+tab .treestyletab-twisty,
+tab .treestyletab-counter-container,
+tab .treestyletab-drop-marker,
+tab[treestyletab-children]:not([treestyletab-subtree-collapsed="true"]) .treestyletab-counter-container {
 	display: none;
 }
 
-tab[treestyletab-tab-collapsed="true"] {
+tab[treestyletab-children] .treestyletab-twisty,
+tab[treestyletab-children] .treestyletab-counter-container,
+tab[treestyletab-drop-position] .treestyletab-drop-marker {
+	display: -moz-box;
+}
+
+tab[treestyletab-collapsed="true"] {
 	visibility: collapse;
 }

content/treestyletab/treestyletab.js

@@ -6,14 +6,17 @@ var TreeStyleTabService = {
 	kPARENT            : 'treestyletab-parent',
 	kINSERT_BEFORE     : 'treestyletab-insert-before',
 	kSUBTREE_COLLAPSED : 'treestyletab-subtree-collapsed',
-	kCOLLAPSED         : 'treestyletab-tab-collapsed',
+	kCOLLAPSED         : 'treestyletab-collapsed',
 	kNEST              : 'treestyletab-nest',
 	kDROP_POSITION     : 'treestyletab-drop-position',
+	kVERTICAL          : 'treestyletab-vertical',
 
-	kTWISTY            : 'treestyletab-tab-tree-twisty',
-	kTWISTY_CONTAINER  : 'treestyletab-tab-tree-twisty-container',
-	kCOUNTER           : 'treestyletab-tab-tree-counter',
-	kCOUNTER_CONTAINER : 'treestyletab-tab-tree-counter-container',
+	kTWISTY                : 'treestyletab-twisty',
+	kTWISTY_CONTAINER      : 'treestyletab-twisty-container',
+	kDROP_MARKER           : 'treestyletab-drop-marker',
+	kDROP_MARKER_CONTAINER : 'treestyletab-drop-marker-container',
+	kCOUNTER               : 'treestyletab-counter',
+	kCOUNTER_CONTAINER     : 'treestyletab-counter-container',
 
 	kMENUITEM_REMOVESUBTREE_SELECTION : 'multipletab-selection-item-removeTabSubTree',
 	kMENUITEM_REMOVESUBTREE_CONTEXT   : 'context-item-removeTabSubTree',
@@ -79,12 +82,15 @@ var TreeStyleTabService = {
  
 	isEventFiredOnTwisty : function(aEvent) 
 	{
-		var node = aEvent.originalTarget;
-		while (node.getAttribute('class') != this.kTWISTY && node.localName != 'tabs')
-		{
-			node = node.parentNode;
-		}
-		return (node && node.getAttribute('class') == this.kTWISTY) ? true : false ;
+		var tab = this.getTabFromEvent(aEvent);
+		var twisty = document.getAnonymousElementByAttribute(tab, 'class', this.kTWISTY);
+		if (!twisty || !tab.hasAttribute(this.kCHILDREN)) return false;
+
+		var box = twisty.parentNode.parentNode.boxObject;
+		return !(aEvent.screenX < box.screenX ||
+				aEvent.screenX > box.screenX + box.width ||
+				aEvent.screenY < box.screenY ||
+				aEvent.screenY > box.screenY + box.height);
 	},
  
 	get browser() 
@@ -287,6 +293,8 @@ var TreeStyleTabService = {
 		aTabBrowser.mTabContainer.addEventListener('select', this, true);
 		aTabBrowser.mPanelContainer.addEventListener('click', this, true);
 
+		aTabBrowser.setAttribute(this.kVERTICAL, true);
+
 		eval('aTabBrowser.mTabContainer.selectNewTab = '+
 			aTabBrowser.mTabContainer.selectNewTab.toSource().replace(
 				/\{/,
@@ -341,7 +349,7 @@ var TreeStyleTabService = {
 			).replace(
 				/return true;/,
 				<><![CDATA[
-					if (!(function(aEvent, aDragSession, aSelf) {
+					if (!(function(aSelf) {
 try{
 							if (!aDragSession.sourceNode ||
 								aDragSession.sourceNode.parentNode != aSelf.mTabContainer ||
@@ -351,25 +359,14 @@ try{
 							if (aEvent.target.getAttribute(TreeStyleTabService.kCOLLAPSED) == 'true')
 								return false;
 
-							var info = TreeStyleTabService.getDropAction(aEvent);
-							if (!(info.action & TreeStyleTabService.kACTION_ATTACH))
-								return true;
-
-							// is the tab is in the subtree?
-							var orig = aDragSession.sourceNode;
-							var tab  = info.target;
-							while (tab = TreeStyleTabService.getParentTab(tab))
-							{
-								if (tab == orig)
-									return false;
-							}
-							return true;
+							var info = TreeStyleTabService.getDropAction(aEvent, aDragSession);
+							return info.canDrop;
 }
 catch(e) {
 	dump('TreeStyleTabService::canDrop\n'+e+'\n');
 	return false;
 }
-						})(aEvent, aDragSession, this))
+						})(this))
 						return false;
 					return true;
 				]]></>
@@ -381,16 +378,19 @@ catch(e) {
 				'{',
 				<><![CDATA[
 					{
+						(function(aSelf) {
 try{
-						var xpathResult = TreeStyleTabService.evaluateXPath(
+							var info = TreeStyleTabService.getDropAction(aEvent, aDragSession);
+
+							if (!info.target || info.target != TreeStyleTabService.evaluateXPath(
 									'child::xul:tab[@'+TreeStyleTabService.kDROP_POSITION+']',
-								this.mTabContainer
-							);
-						for (var i = 0, maxi = xpathResult.snapshotLength; i < maxi; i++)
-						{
-							xpathResult.snapshotItem(i).removeAttribute(TreeStyleTabService.kDROP_POSITION);
-						}
-						var info = TreeStyleTabService.getDropAction(aEvent);
+									aSelf.mTabContainer,
+									XPathResult.FIRST_ORDERED_NODE_TYPE
+								).singleNodeValue)
+								TreeStyleTabService.clearDropPosition(aSelf);
+
+							if (!aSelf.canDrop(aEvent, aDragSession)) return;
+
 							info.target.setAttribute(
 								TreeStyleTabService.kDROP_POSITION,
 								info.position == TreeStyleTabService.kDROP_BEFORE ? 'before' :
@@ -401,32 +401,46 @@ try{
 catch(e) {
 	dump('TreeStyleTabService::onDragOver\n'+e+'\n');
 }
+						})(this);
 						return;
 				]]></>
 			)
 		);
 
+		eval('aTabBrowser.onDragExit = '+
+			aTabBrowser.onDragExit.toSource().replace(
+				/(this.mTabDropIndicatorBar\.[^;]+;)/,
+				'$1; TreeStyleTabService.clearDropPosition(this);'
+			)
+		);
+
 		eval('aTabBrowser.onDrop = '+
 			aTabBrowser.onDrop.toSource().replace(
+				'{', '{ TreeStyleTabService.clearDropPosition(this);'
+			).replace(
 				/(if \([^\)]+\) \{)/,
 				'$1'+<><![CDATA[
-					var info = TreeStyleTabService.getDropAction(aEvent);
+					if ((function(aSelf) {
+							var info = TreeStyleTabService.getDropAction(aEvent, aDragSession);
 							var tab  = aDragSession.sourceNode;
-					var tabs = this.mTabContainer.childNodes;
+							var tabs = aSelf.mTabContainer.childNodes;
 							if (info.action & TreeStyleTabService.kACTION_PART) {
 								TreeStyleTabService.partTab(tab);
 								if (info.action & TreeStyleTabService.kACTION_MOVE) {
-							this.moveTabTo(tab, (info.insertBefore ? info.insertBefore._tPos : tabs.length - 1 ));
+									aSelf.moveTabTo(tab, (info.insertBefore ? info.insertBefore._tPos : tabs.length - 1 ));
 								}
-						return;
+								return true;
 							}
 							else if (info.action & TreeStyleTabService.kACTION_ATTACH) {
 								TreeStyleTabService.attachTabTo(tab, info.parent);
 								if (info.action & TreeStyleTabService.kACTION_MOVE) {
-							this.moveTabTo(tab, info.insertBefore ? info.insertBefore._tPos : tabs.length - 1 );
+									aSelf.moveTabTo(tab, info.insertBefore ? info.insertBefore._tPos : tabs.length - 1 );
 								}
+								return true;
+							}
+							return false;
+						})(this))
 						return;
-					}
 				]]></>
 			)
 		);
@@ -583,13 +597,20 @@ catch(e) {
 		if (!document.getAnonymousElementByAttribute(aTab, 'class', this.kTWISTY)) {
 			var twisty = document.createElement('image');
 			twisty.setAttribute('class', this.kTWISTY);
-
 			var container = document.createElement('hbox');
 			container.setAttribute('class', this.kTWISTY_CONTAINER);
 			container.appendChild(twisty);
 
 			var icon = document.getAnonymousElementByAttribute(aTab, 'class', 'tab-icon');
 			icon.appendChild(container);
+
+			var marker = document.createElement('image');
+			marker.setAttribute('class', this.kDROP_MARKER);
+			container = document.createElement('hbox');
+			container.setAttribute('class', this.kDROP_MARKER_CONTAINER);
+			container.appendChild(marker);
+
+			icon.appendChild(container);
 		}
 
 		if (!document.getAnonymousElementByAttribute(aTab, 'class', this.kCOUNTER_CONTAINER)) {
@@ -1126,7 +1147,23 @@ catch(e) {
 		return lastChild;
 	},
   
-	getDropAction : function(aEvent) 
+	getDropAction : function(aEvent, aDragSession) 
+	{
+		var info = this.getDropActionInternal(aEvent);
+		info.canDrop = true;
+		if (info.action & this.kACTION_ATTACH) {
+			var orig = aDragSession.sourceNode;
+			var tab  = info.target;
+			while (tab = this.getParentTab(tab))
+			{
+				if (tab != orig) continue;
+				info.canDrop = false;
+				break;
+			}
+		}
+		return info;
+	},
+	getDropActionInternal : function(aEvent) 
 	{
 		var tab        = aEvent.target;
 		var b          = this.getTabBrowserFromChildren(tab);
@@ -1245,6 +1282,19 @@ catch(e) {
 		return info;
 	},
  
+	clearDropPosition : function(aTabBrowser) 
+	{
+		var b = this.getTabBrowserFromChildren(aTabBrowser);
+		var xpathResult = this.evaluateXPath(
+				'child::xul:tab[@'+this.kDROP_POSITION+']',
+				b.mTabContainer
+			);
+		for (var i = 0, maxi = xpathResult.snapshotLength; i < maxi; i++)
+		{
+			xpathResult.snapshotItem(i).removeAttribute(this.kDROP_POSITION);
+		}
+	},
+ 	 
 /* Commands */ 
 	 
 /* attach/part */ 

skin/classic/treestyletab/treestyletab.css

@@ -1,46 +1,64 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-.treestyletab-tab-tree-twisty-container {
+.treestyletab-twisty-container {
 	margin: 0 3px 0 -3px;
 	-moz-box-pack: start;
 	-moz-box-align: center;
 	-moz-box-flex: 1;
 }
 
-.treestyletab-tab-tree-twisty {
-	-moz-appearance: none;
-	border: none;
-	outline: none;
-	background: none;
+.treestyletab-twisty {
 	list-style-image: url("tree-twisty-expanded.png");
 }
 
-tab[treestyletab-subtree-collapsed="true"] .treestyletab-tab-tree-twisty {
+tab[treestyletab-subtree-collapsed="true"] .treestyletab-twisty {
 	list-style-image: url("tree-twisty-collapsed.png");
 }
 
-.treestyletab-tab-tree-counter-container {
+.treestyletab-counter-container {
 	-moz-box-align: center;
 	-moz-box-pack: end;
 }
 
-.treestyletab-tab-tree-counter {
+.treestyletab-counter {
 	font-size: 90%;
 	margin: 0;
 	padding: 0;
 	min-width: 0;
 }
 
-/*
-tab[treestyletab-drop-position="self"] {
-	border: 2px solid black !important;
+
+.treestyletab-drop-marker-container {
+	-moz-box-align: center;
+	-moz-box-pack: center;
 }
 
-tab[treestyletab-drop-position="before"] {
-	border-top: 2px solid black !important;
+tab[treestyletab-drop-position="self"] .treestyletab-drop-marker {
+	list-style-image: url("dropmarker-down.png");
 }
 
-tab[treestyletab-drop-position="after"] {
-	border-bottom: 2px solid black !important;
+tab[treestyletab-drop-position="before"] .treestyletab-drop-marker {
+	list-style-image: url("dropmarker-left.png");
+}
+
+tab[treestyletab-drop-position="after"] .treestyletab-drop-marker {
+	list-style-image: url("dropmarker-right.png");
+}
+
+tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="self"] .treestyletab-drop-marker {
+	list-style-image: url("dropmarker-right.png");
+}
+
+tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="before"] .treestyletab-drop-marker {
+	list-style-image: url("dropmarker-up.png");
+}
+
+tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="after"] .treestyletab-drop-marker {
+	list-style-image: url("dropmarker-down.png");
+}
+
+tab[treestyletab-children][treestyletab-drop-position] .treestyletab-twisty,
+tab[treestyletab-drop-position] .tab-icon-image,
+tab[treestyletab-drop-position] .tab-extra-status {
+	visibility: hidden;
 }
-*/