Merge pull request brave#12719 from brave/fix/tabs-animate-too-wide

Fix tabs briefly animating too wide after finishing closing some tabs (ver. 2)
ryanml · Mar 2, 2018 · ab32f5e · ab32f5e
2 parents 33a6d16 + a650bff
commit ab32f5e
Showing 1 changed file with 11 additions and 21 deletions.
diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js
@@ -189,9 +189,9 @@ class Tab extends React.Component {
     const frame = this.frame
 
     if (frame && !frame.isEmpty()) {
-      const tabWidth = this.fixTabWidth
       // do not mimic tab size if closed tab is a pinned tab
       if (!this.props.isPinnedTab) {
+        const tabWidth = this.fixTabWidth
         windowActions.onTabClosedWithMouse({
           fixTabWidth: tabWidth
         })
@@ -276,7 +276,7 @@ class Tab extends React.Component {
     props.isPinnedTab = isPinned
     props.isPrivateTab = privateState.isPrivateTab(currentWindow, frameKey)
     props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, frameKey)
-    props.tabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
+    props.tabWidth = isPinned ? null : currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
     props.themeColor = tabUIState.getThemeColor(currentWindow, frameKey)
     props.title = frame.get('title')
     props.tabPageIndex = frameStateUtil.getTabPageIndex(currentWindow)
@@ -295,25 +295,15 @@ class Tab extends React.Component {
     return props
   }
 
-  componentWillReceiveProps (nextProps) {
-    if (this.props.tabWidth && !nextProps.tabWidth) {
-      // remember the width so we can transition from it
-      this.originalWidth = this.elementRef.getBoundingClientRect().width
-    }
-  }
-
   componentDidUpdate (prevProps) {
-    if (prevProps.tabWidth && !this.props.tabWidth) {
-      window.requestAnimationFrame(() => {
-        const newWidth = this.elementRef.getBoundingClientRect().width
-        this.elementRef.animate([
-          { flexBasis: `${this.originalWidth}px`, flexGrow: 0, flexShrink: 0 },
-          { flexBasis: `${newWidth}px`, flexGrow: 0, flexShrink: 0 }
-        ], {
-          duration: 250,
-          iterations: 1,
-          easing: 'ease-in-out'
-        })
+    if (prevProps.tabWidth && !this.props.tabWidth && !this.props.partOfFullPageSet) {
+      this.elementRef.animate([
+          { flexBasis: `${prevProps.tabWidth}px`, flexGrow: 0, flexShrink: 0 },
+          { flexBasis: 0, flexGrow: 1, flexShrink: 1 }
+      ], {
+        duration: 250,
+        iterations: 1,
+        easing: 'ease-in-out'
       })
     }
   }
@@ -415,7 +405,7 @@ const styles = StyleSheet.create({
     verticalAlign: 'top',
     overflow: 'hidden',
     height: '-webkit-fill-available',
-    flex: 1,
+    flex: '1 1 0',
 
     // no-drag is applied to the button and tab area
     // ref: tabs__tabStrip__newTabButton on tabs.js