Bug 455694 - Animate tab reordering & detaching. r=dolske ui-r=limi

browser/base/content/browser.css

@@ -13,6 +13,7 @@ tabbrowser {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tabs");
 }
 
+#tabbrowser-tabs[drag=detach][closebuttons=hidden] > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
 #tabbrowser-tabs:not([overflow="true"]) + #new-tab-button,
 #tabbrowser-tabs[overflow="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
 #TabsToolbar[currentset]:not([currentset*="tabbrowser-tabs,new-tab-button"]) > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
@@ -62,6 +63,39 @@ tabbrowser {
   display: block; /* position:fixed already does this (bug 579776), but let's be explicit */
 }
 
+.tabbrowser-tabs[drag] > .tabbrowser-tab {
+  pointer-events: none; /* suppress tooltips */
+}
+
+.tabbrowser-tabs[drag] > .tabbrowser-tab[selected] {
+  z-index: 2; /* ensure selected tab stays on top despite -moz-transform */
+}
+
+.tabbrowser-tabs[drag] > .tabbrowser-tab[dragged] {
+  -moz-transition: 0s; /* suppress opening animation when reattaching tab */
+}
+
+/* visibility: collapse might collapse the tab bar, so we use this instead */
+.tabbrowser-tabs[drag=detach] > .tabbrowser-tab[dragged]:not(:only-child) {
+  min-width: 0 !important;
+  max-width: 0 !important;
+  border: 0 !important;
+  opacity: 0;
+  overflow: hidden;
+  -moz-transition: max-width 150ms ease-out;
+}
+.tabbrowser-tabs[drag=detach] > .tabbrowser-tab[dragged]:only-child {
+  visibility: hidden;
+}
+
+.tabbrowser-tabs[drag=move] > .tabbrowser-tab[fadein]:not([dragged]) {
+  -moz-transition: -moz-transform 200ms ease-out;
+}
+
+.tabbrowser-tabs[drag=finish] > .tabbrowser-tab[dragged][fadein] {
+  -moz-transition: -moz-transform 100ms ease-out;
+}
+
 #alltabs-popup {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup");
 }

browser/base/content/tabbrowser.css

@@ -38,6 +38,16 @@ tabpanels {
   background-color: transparent;
 }
 
+.tab-drag-preview {
+  background: -moz-element(#content) left top;
+  background-clip: content-box;
+  background-size: cover;
+}
+
+.tab-drag-panel[target] > .tab-drag-preview {
+  display: none;
+}
+
 .tab-drop-indicator {
   position: relative;
   z-index: 2;

browser/base/content/utilityOverlay.js

@@ -42,8 +42,6 @@
 // Services = object with smart getters for common XPCOM services
 Components.utils.import("resource://gre/modules/Services.jsm");
 
-var TAB_DROP_TYPE = "application/x-moz-tabbrowser-tab";
-
 var gBidiUI = false;
 
 function getBrowserURL()

browser/themes/gnomestripe/browser/browser.css

@@ -1600,6 +1600,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 }
 
 /* Tab drag and drop */
+.tab-drag-label {
+  padding: 2px;
+}
+
 .tab-drop-indicator {
   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
   margin-bottom: -11px;

browser/themes/pinstripe/browser/browser.css

@@ -1560,6 +1560,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   height: 26px;
 }
 
+.tab-drag-label,
 .tabbrowser-tab,
 .tabs-newtab-button {
   -moz-appearance: none;
@@ -1837,6 +1838,19 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
  * Tab Drag and Drop
  */
 
+.tab-drag-label {
+  background: -moz-linear-gradient(#eee, #ccc);
+  padding: 4px 8px;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
+}
+
+.tab-drag-panel:not([target]) > .tab-drag-label {
+  background: -moz-linear-gradient(#ddd, #bbb);
+  border-bottom: 1px solid #999;
+  border-radius: 3px 3px 0 0;
+}
+
 .tab-drop-indicator {
   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
   margin-bottom: -8px;

browser/themes/winstripe/browser/browser-aero.css

@@ -11,6 +11,7 @@
     margin-top: 1px;
   }
 
+  .tab-drag-preview::before,
   #appmenu-button {
     border-width: 2px;
     -moz-border-left-colors: @appMenuButtonBorderColor@;
@@ -21,6 +22,7 @@
                 0 0 2px 1px rgba(255,255,255,.25) inset;
   }
 
+  #main-window[privatebrowsingmode=temporary] #tabbrowser-tabs > hbox > .tab-drag-panel > .tab-drag-preview::before,
   #main-window[privatebrowsingmode=temporary] #appmenu-button {
     -moz-border-left-colors: rgba(255,255,255,.5) rgba(43,8,65,.9);
     -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(43,8,65,.9);
@@ -55,6 +57,7 @@
                       -moz-linear-gradient(@customToolbarColor@, @customToolbarColor@);
   }
 
+  .tab-drag-label,
   .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
     background-image: -moz-linear-gradient(white, @toolbarHighlight@ 50%),
                       -moz-linear-gradient(@customToolbarColor@, @customToolbarColor@);
@@ -293,6 +296,31 @@
                       -moz-linear-gradient(rgba(255,255,255,0), #CCD9EA 200px, #C7D5E7);
     background-attachment: fixed;
   }
+
+  .tab-drag-panel {
+    -moz-appearance: -moz-win-borderless-glass;
+  }
+  .tab-drag-label {
+    padding: 4px;
+    background-color: -moz-dialog;
+    border-radius: 3px;
+  }
+  .tab-drag-preview {
+    margin: 15px 7px 7px;
+  }
+  .tab-drag-panel:not([target]) > .tab-drag-preview {
+    display: block;
+  }
+  .tab-drag-preview::before { /* miniature appmenu button */
+    content: "";
+    display: block;
+    margin-top: -15px;
+    -moz-margin-start: -2px;
+    padding: 0;
+    width: 32px;
+    height: 7px;
+    border-radius: 0 0 3px 3px;
+  }
 }
 
 @media not all and (-moz-windows-compositor) {

browser/themes/winstripe/browser/browser.css

@@ -176,6 +176,7 @@
 }
 
 %ifdef MOZ_OFFICIAL_BRANDING
+.tab-drag-preview::before,
 #appmenu-button {
   background-image: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%);
   border-color: rgba(83,42,6,.9);
@@ -199,6 +200,7 @@
 }
 %else
 %if MOZ_UPDATE_CHANNEL == aurora
+.tab-drag-preview::before,
 #appmenu-button {
   background-image: -moz-linear-gradient(hsl(208,99%,37%), hsl(214,90%,23%) 95%);
   border-color: hsla(214,89%,21%,.9);
@@ -221,6 +223,7 @@
               0 1px 1px rgba(0,0,0,.2) inset;
 }
 %else
+.tab-drag-preview::before,
 #appmenu-button {
   background-image: -moz-linear-gradient(hsl(211,33%,32%), hsl(209,53%,10%) 95%);
   border-color: hsla(210,59%,13%,.9);
@@ -245,6 +248,7 @@
 %endif
 %endif
 
+#main-window[privatebrowsingmode=temporary] #tabbrowser-tabs > hbox > .tab-drag-panel > .tab-drag-preview::before,
 #main-window[privatebrowsingmode=temporary] #appmenu-button {
   background-image: -moz-linear-gradient(rgb(153,38,211), rgb(105,19,163) 95%);
   border-color: rgba(43,8,65,.9);
@@ -1806,7 +1810,25 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   outline: 1px dotted;
 }
 
-/* Tab DnD indicator */
+/* Tab drag and drop */
+.tab-drag-panel {
+  border: 0 !important;
+}
+
+.tab-drag-label {
+  margin: 0 !important;
+  padding: 5px;
+  border: 1px solid DimGray;
+}
+
+.tab-drag-panel:not([target]) > .tab-drag-label {
+  display: none;
+}
+
+.tab-drag-preview {
+  border: 1px solid rgba(0,0,0,.5);
+}
+
 .tab-drop-indicator {
   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
   margin-bottom: -11px;