Bug 468808 - Tabs can't be reordered. minor styling fixes, performed as part of review, ui-r=clarkbw, r=asuth
authorAndrew Sutherland <asutherland@asutherland.org>
Thu, 03 Mar 2011 17:38:02 -0800
changeset 7251 33614283e6756b057b026a322b34dfbaa12db5e2
parent 7250 491fbcf7a1b443860503f245f68941d8f7a1306b
child 7252 3f9ac1aeea35b4040debe060a5bd35685b48f0e2
push idunknown
push userunknown
push dateunknown
reviewersclarkbw, asuth
bugs468808
Bug 468808 - Tabs can't be reordered. minor styling fixes, performed as part of review, ui-r=clarkbw, r=asuth
mail/base/content/tabmail.css
mail/base/content/tabmail.xml
mail/themes/gnomestripe/jar.mn
mail/themes/gnomestripe/mail/icons/tabDragIndicator.png
mail/themes/gnomestripe/mail/tabmail.css
mail/themes/pinstripe/mail/tabmail.css
mail/themes/qute/mail/tabmail-aero.css
mail/themes/qute/mail/tabmail.css
--- a/mail/base/content/tabmail.css
+++ b/mail/base/content/tabmail.css
@@ -62,14 +62,19 @@
 .tabmail-tabs:not([closebuttons="noclose"]):not([closebuttons="closeatend"]) > .tabmail-tab[selected="true"]:not(:only-child) > .tab-close-button {
   display: -moz-box;
 }
 
 .tabmail-tabs[closebuttons="alltabs"] > .tabmail-tab:not(:only-child) > .tab-close-button {
   display: -moz-box;
 }
 
+.tab-drop-indicator {
+  position: relative;
+  z-index: 2;
+}
+
 .tab-throbber:not([busy]):not([thinking]),
 .tab-throbber[busy] + .tab-icon-image,
 .tab-throbber[thinking] + .tab-icon-image,
 .tab-throbber[busy][thinking] + .tab-icon-image {
   display: none;
 }
--- a/mail/base/content/tabmail.xml
+++ b/mail/base/content/tabmail.xml
@@ -292,20 +292,16 @@
     <resources>
       <stylesheet src="chrome://messenger/content/tabmail.css"/>
       <stylesheet src="chrome://messenger/skin/tabmail.css"/>
     </resources>
     <content>
       <xul:tabbox anonid="tabbox" flex="1" eventnode="document" xbl:inherits="handleCtrlPageUpDown"
                   onselect="if (!('updateCurrentTab' in this.parentNode) || event.target.localName != 'tabs')
                             return; this.parentNode.updateCurrentTab();">
-        <xul:hbox align="start">
-          <xul:image class="tab-drop-indicator" anonid="tab-drop-indicator" collapsed="true"/>
-        </xul:hbox>        
-        
         <xul:hbox class="tabmail-strip" collapsed="false" tooltip="_child" context="_child"
                   anonid="strip">
           <xul:tooltip onpopupshowing="return CreateToolbarTooltip(document, event);"/>
           <xul:menupopup anonid="tabContextMenu"
                 onpopupshowing="
                   var tabmail = document.getElementById('tabmail');
                   return tabmail.onTabContextMenuShowing(document.popupNode);">
             
@@ -1594,16 +1590,19 @@
     <content>
       <xul:stack flex="1" class="tabs-stack">
         <xul:vbox>
           <xul:spacer flex="1"/>
           <xul:hbox class="tabs-bottom" align="center"/>
         </xul:vbox>
         <xul:vbox>
           <xul:hbox>
+            <xul:hbox align="start">
+              <xul:image class="tab-drop-indicator" anonid="tab-drop-indicator" collapsed="true"/>
+            </xul:hbox>
             <xul:stack>
               <xul:spacer class="tabs-left"/>
             </xul:stack>
             <xul:arrowscrollbox class="tabmail-arrowscrollbox"
                                 anonid="arrowscrollbox"
                                 orient="horizontal"
                                 flex="1"
                                 style="min-width: 1px;">
@@ -1737,17 +1736,17 @@
             return this;
           throw Components.results.NS_NOINTERFACE;
         }
         });
       </field>
       
       <field name="_tabDropIndicator">
         document.getAnonymousElementByAttribute(
-            this.parentNode.parentNode.parentNode, 
+            this,
             "anonid", "tab-drop-indicator");
       </field>
       
       <field name="_dragOverDelay">350</field>
       <field name="_dragTime">0</field>
       
       <field name="mTabMinWidth">100</field>
       <field name="mTabMaxWidth">250</field>
@@ -2177,17 +2176,16 @@
         ind.collapsed = false;
  
         newMargin += ind.clientWidth / 2;
         if (!ltr)
           newMargin *= -1;
  
         ind.style.MozTransform = "translate(" + Math.round(newMargin) + "px)";
         ind.style.MozMarginStart = (-ind.clientWidth) + "px";
-        ind.style.marginTop = (-ind.clientHeight) + "px";
       ]]></handler>
       <handler event="drop"><![CDATA[
         let dt = event.dataTransfer;
     
         if (dt.mozItemCount != 1)
           return;
         
         let draggedTab = dt.mozGetDataAt("application/x-moz-tabmail-tab",0);
--- a/mail/themes/gnomestripe/jar.mn
+++ b/mail/themes/gnomestripe/jar.mn
@@ -152,16 +152,17 @@ classic.jar:
   skin/classic/messenger/icons/online.png                     (mail/icons/online.png)
   skin/classic/messenger/icons/offline.png                    (mail/icons/offline.png)
   skin/classic/messenger/icons/row.png                        (mail/icons/row.png)
   skin/classic/messenger/icons/black_pin.png                  (mail/icons/black_pin.png)
   skin/classic/messenger/icons/filter.png                     (mail/icons/filter.png)
   skin/classic/messenger/icons/filterbar.png                  (mail/icons/filterbar.png)
   skin/classic/messenger/icons/red_pin.png                    (mail/icons/red_pin.png)
   skin/classic/messenger/icons/tab.png                        (mail/icons/tab.png)
+  skin/classic/messenger/icons/tabDragIndicator.png           (mail/icons/tabDragIndicator.png)
 % skin communicator classic/1.0 %skin/classic/communicator/
   skin/classic/communicator/communicator.css                      (mail/communicator.css)
   skin/classic/communicator/icons/smileys/smiley-smile.png        (mail/icons/smiley-smile.png)
   skin/classic/communicator/icons/smileys/smiley-frown.png        (mail/icons/smiley-frown.png)
   skin/classic/communicator/icons/smileys/smiley-wink.png         (mail/icons/smiley-wink.png)
   skin/classic/communicator/icons/smileys/smiley-tongue-out.png  (mail/icons/smiley-tongue-out.png)
   skin/classic/communicator/icons/smileys/smiley-laughing.png (mail/icons/smiley-laughing.png)
   skin/classic/communicator/icons/smileys/smiley-embarassed.png  (mail/icons/smiley-embarassed.png)
copy from mail/themes/qute/mail/icons/tabDragIndicator.png
copy to mail/themes/gnomestripe/mail/icons/tabDragIndicator.png
--- a/mail/themes/gnomestripe/mail/tabmail.css
+++ b/mail/themes/gnomestripe/mail/tabmail.css
@@ -155,16 +155,22 @@ tabpanels {
   border: 1px dotted transparent;
   margin: -1px !important; /* let the border not consume any space, like outline */
 }
 
 .tabmail-tab[selected="true"]:focus > .tab-image-middle > .tab-text {
   border: 1px dotted -moz-DialogText;
 }
 
+/* Tab drag and drop */
+.tab-drop-indicator {
+  list-style-image: url(chrome://messenger/skin/icons/tabDragIndicator.png);
+  margin-top: -11px;
+}
+
 /* In-tab close button */
 .tab-close-button > .toolbarbutton-icon {
   /* XXX Buttons have padding in widget/ that we don't want here but can't
      override with good CSS, so we must use evil CSS to give the
      impression of smaller content. */
   margin: -3px !important;
 }
 
--- a/mail/themes/pinstripe/mail/tabmail.css
+++ b/mail/themes/pinstripe/mail/tabmail.css
@@ -213,30 +213,19 @@ tabmail > tabbox > tabpanels {
   -moz-appearance: none !important;
 }
 
 
 /**
  * Tab Drag and Drop
  */
 
-.tab-drop-indicator-bar {
-  height: 10px;
-  margin-top: -10px;
-  position: relative;
-  /* set -moz-margin-start to -1/2 indicator width: */
-  -moz-margin-start: -4px;
-}
-
 .tab-drop-indicator {
-  height: 33px;
-  width: 10px;
-  margin-bottom: -24px;
-  position: relative;
-  background: url('chrome://messenger/skin/tabs/tabDragIndicator.png') 50% 40% no-repeat;
+  list-style-image: url(chrome://messenger/skin/tabs/tabDragIndicator.png);
+  margin-top: -8px;
 }
 
 /**
  * In-tab close button
  */
 
 .tab-close-button > .toolbarbutton-icon {
   -moz-margin-end: 0px !important;
--- a/mail/themes/qute/mail/tabmail-aero.css
+++ b/mail/themes/qute/mail/tabmail-aero.css
@@ -191,38 +191,20 @@ tabpanels {
 .tabmail-tab > .tab-image-middle > .tab-text {
   border: 1px dotted transparent;
 }
 
 .tabmail-tab:focus > .tab-image-middle > .tab-text {
   border: 1px dotted -moz-DialogText;
 }
 
-/**
-* Tab Drag and Drop
-*/
-
-.tab-drop-indicator-bar {
-    visibility: hidden;
-    height: 9px;
-    margin-top: -9px;
-    position: relative;
-}
-
+/* Tab DnD indicator */
 .tab-drop-indicator {
-    height: 9px;
-   width: 9px;
-    margin-bottom: -5px;
-    position: relative;
-    background: url("chrome://messenger/skin/icons/tabDragIndicator.png")
-                50% 50% no-repeat;
-}
-
-.tab-drop-indicator-bar[dragging="true"] {
-    visibility: visible;
+  list-style-image: url(chrome://messenger/skin/icons/tabDragIndicator.png);
+  margin-top: -11px;
 }
 
 /**
 * In-tab close button
 */
 .tab-close-button > .toolbarbutton-icon {
   -moz-margin-end: 0px !important;
   margin-top: 1px;
--- a/mail/themes/qute/mail/tabmail.css
+++ b/mail/themes/qute/mail/tabmail.css
@@ -215,37 +215,20 @@ tabpanels {
 .tabmail-tab >  .tab-image-middle > .tab-text {
   border: 1px dotted transparent;
 }
 
 .tabmail-tab:focus > .tab-image-middle > .tab-text {
   border: 1px dotted -moz-DialogText;
 }
 
-/**
- * Tab Drag and Drop
- */
-
-.tab-drop-indicator-bar {
-    visibility: hidden;
-    height: 9px;
-    margin-top: -9px;
-    position: relative;
-}
-
+/* Tab DnD indicator */
 .tab-drop-indicator {
-    height: 9px;
-   width: 9px;
-    margin-bottom: -5px;
-    position: relative;
-    background: url('chrome://messenger/skin/icons/tabDragIndicator.png') 50% 50% no-repeat;
-}
-
-.tab-drop-indicator-bar[dragging="true"] {
-    visibility: visible;
+  list-style-image: url(chrome://messenger/skin/icons/tabDragIndicator.png);
+  margin-top: -11px;
 }
 
 /**
  * In-tab close button
  */
 .tab-close-button > .toolbarbutton-icon {
   -moz-margin-end: 0px !important;
   margin-top: 1px;