From 1f38211cf71038bc9c2ef19efcebd93965f1a0ec Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 22 Oct 2021 10:20:46 +0900
Subject: [PATCH] Fix: Animate - Pinned tab sideeffect at open, close

---
 userChrome.css | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index e9680dd..867ca27 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1969,27 +1969,29 @@
   }
 
   /*- Pinned Tab -------------------------------------------------------------*/
-  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab,
-  #tabbrowser-tabs:not([movingtab]) .tab-content,
-  #tabbrowser-tabs:not([movingtab]) .tab-content::before,
-  #tabbrowser-tabs:not([movingtab]) .tab-content::after,
-  #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image {
-    transition: 0.2s var(--animation-easing-function) !important;
+  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) {
+    /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
+    transition: -moz-box-flex 0.2s var(--animation-easing-function),
+      margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
+    max-width: var(--tab-max-width, 240px);
+  }
+  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
+    transition: -moz-box-flex 0.2s var(--animation-easing-function),
+      margin-inline-start 0.2s var(--animation-easing-function) !important;
   }
 
-  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab {
-    transition-property: -moz-box-flex, margin-inline !important;
-    max-width: calc(var(--tab-max-width, 240px) + 5px);
-  }
   #tabbrowser-tabs:not([movingtab]) .tab-content {
-    transition-property: padding-inline;
+    transition: padding-inline 0.2s var(--animation-easing-function) !important;
   }
   #tabbrowser-tabs:not([movingtab]) .tab-content::before,
   #tabbrowser-tabs:not([movingtab]) .tab-content::after {
-    transition-property: width, transform;
+    transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
+  }
+  #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container {
+    transition: width 0.3s var(--animation-easing-function) !important;
   }
   #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image {
-    transition-property: margin-inline;
+    transition: all 0.3s var(--animation-easing-function) !important;
   }
 
   /*- URL / Search Bar -------------------------------------------------------*/