Merge pull request #275 from ericawright/feature/fadein

Feature/fadein
bwinton · May 27, 2016 · a6217dc · a6217dc
2 parents 7e48e04 + 29d6003
commit a6217dc
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 8 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -7,10 +7,10 @@
     "at-rule-name-case": "lower",
     "at-rule-name-space-after": "always-single-line",
     "at-rule-semicolon-newline-after": "always",
-    "block-closing-brace-newline-after": "always",
-    "block-closing-brace-newline-before": "always",
+    "block-closing-brace-newline-after": "always-multi-line",
+    "block-closing-brace-newline-before": "always-multi-line",
     "block-no-empty": true,
-    "block-opening-brace-newline-after": "always",
+    "block-opening-brace-newline-after": "always-multi-line",
     "block-opening-brace-space-before": "always",
     "color-hex-case": "lower",
     "color-hex-length": "short",
@@ -61,9 +61,8 @@
         "margin-bottom",
         "margin-left"
       ]}], { "unspecified": "bottomAlphabetical" }],
-    "declaration-block-semicolon-newline-after": "always",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
     "declaration-block-semicolon-space-before": "never",
-    "declaration-block-single-line-max-declarations": 1,
     "declaration-block-trailing-semicolon": "always",
     "declaration-colon-newline-after": "always-multi-line",
     "declaration-colon-space-before": "never",

diff --git a/skin/light/light.css b/skin/light/light.css
@@ -1,5 +1,9 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+:root {
+  --tab-animation-time: 150ms;
+}
+
 #main-window[privatebrowsingmode="temporary"] #titlebar-buttonbox-container {
   margin-top: 4px;
 }
@@ -164,9 +168,8 @@
 
 .tabbrowser-tab {
   width: 260px !important;
-  height: 36px !important;
-  min-height: 36px !important;
-  max-height: 36px !important;
+  max-height: 36px;
+  min-height: 36px;
   margin: 0 !important;
   border: 0 !important;
   border-left: 4px solid transparent !important;
@@ -178,6 +181,30 @@
   color: #333 !important;
 }
 
+.tabbrowser-tab.tab-hidden {
+  animation: var(--tab-animation-time) fade-out, var(--tab-animation-time) var(--tab-animation-time) slide-out;
+}
+
+.tabbrowser-tab.tab-visible {
+  animation: 300ms slide-fade-in;
+}
+
+@keyframes fade-out {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes slide-out {
+  0% { max-height: 36px; min-height: 36px; opacity: 0; }
+  100% { max-height: 0; min-height: 0; opacity: 0; }
+}
+
+@keyframes slide-fade-in {
+  0% { max-height: 0; min-height: 0; opacity: 0; }
+  50% { max-height: 36px; min-height: 36px; opacity: 0; }
+  100% { max-height: 36px; min-height: 36px; opacity: 1; }
+}
+
 .tabbrowser-tab[selected="true"],
 .tabbrowser-tab[multiselect="true"] {
   margin: 0 !important;

diff --git a/verticaltabs.jsm b/verticaltabs.jsm
@@ -109,6 +109,7 @@ VerticalTabs.prototype = {
     }.bind(this);
 
     this.window.VerticalTabs = this;
+    this.removeTab = this.window.gBrowser.removeTab;
     this.inferFromText = this.window.ToolbarIconColor.inferFromText;
     let AppConstants = this.AppConstants;
     let window = this.window;
@@ -148,6 +149,7 @@ VerticalTabs.prototype = {
     }.bind(this.window.ToolbarIconColor);
     this.unloaders.push(function () {
       this.window.ToolbarIconColor.inferFromText = this.inferFromText;
+      this.window.gBrowser.removeTab = this.removeTab;
       this.window.BrowserOpenTab = this.BrowserOpenTab;
       delete this.window.VerticalTabs;
     });
@@ -415,11 +417,28 @@ VerticalTabs.prototype = {
     if (this.pushToTop) {
       this.window.gBrowser.moveTabTo(aTab, 0);
     }
+
+    aTab.classList.add('tab-visible');
+    aTab.classList.remove('tab-hidden');
+
     if (this.document.getElementById('main-window').getAttribute('tabspinned') !== 'true') {
       aTab.removeAttribute('crop');
     } else {
       aTab.setAttribute('crop', 'end');
     }
+
+    this.window.gBrowser.removeTab = (aTab) => {
+      aTab.classList.remove('tab-visible');
+      aTab.classList.add('tab-hidden');
+      aTab.addEventListener('animationend', (e) => {
+        if (e.animationName === 'fade-out') {
+          let tabStack = this.document.getAnonymousElementByAttribute(aTab, 'class', 'tab-stack');
+          tabStack.collapsed = true; //there is a visual jump if we do not collapse the tab before the end of the animation
+        } else if (e.animationName === 'slide-out') {
+          this.removeTab.bind(this.window.gBrowser)(aTab);
+        }
+      });
+    };
   },
 
   unload: function () {