From 67819091658db8d24708be1560db6efab7433875 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Fri, 22 Jun 2018 13:00:13 -0700
Subject: [PATCH] Merge pull request #14516 from
 brave/fix/tab-close-fixed-width-animation-jump

Fix/tab close fixed width animation jump
---
 app/renderer/components/tabs/tab.js  | 18 +++++++++++-------
 app/renderer/components/tabs/tabs.js |  3 ++-
 js/stores/windowStore.js             |  4 +++-
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js
index b201aa1549b..fcab6f12143 100644
--- a/app/renderer/components/tabs/tab.js
+++ b/app/renderer/components/tabs/tab.js
@@ -206,11 +206,11 @@ class Tab extends React.Component {
     const frame = this.frame
 
     if (frame && !frame.isEmpty()) {
-      // do not mimic tab size if closed tab is a pinned tab
+      // do not mimic tab size if closed tab is a pinned tab or last tab
       if (!this.props.isPinnedTab) {
         const tabWidth = this.fixTabWidth
         windowActions.onTabClosedWithMouse({
-          fixTabWidth: tabWidth
+          fixTabWidth: this.props.isLastTabOfPage ? null : tabWidth
         })
       }
       appActions.tabCloseRequested(this.props.tabId)
@@ -299,6 +299,7 @@ class Tab extends React.Component {
     // TODO: this should have its own method
     props.notificationBarActive = notificationBarActive
     props.frameKey = frameKey
+    props.isLastTabOfPage = ownProps.isLastTabOfPage
     props.isPinnedTab = isPinned
     props.isPrivateTab = privateState.isPrivateTab(currentWindow, frameKey)
     props.isActive = !!frameStateUtil.isFrameKeyActive(currentWindow, frameKey)
@@ -332,15 +333,18 @@ class Tab extends React.Component {
 
   componentDidUpdate (prevProps) {
     if (prevProps.tabWidth && !this.props.tabWidth && !this.props.partOfFullPageSet) {
-      this.elementRef.animate([
+      window.requestAnimationFrame(() => {
+        this.elementRef && 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'
+        ], {
+          duration: 250,
+          iterations: 1,
+          easing: 'ease-in-out'
+        })
       })
     }
+
     // no transition between:
     // - active <-> inactive state
     // - no theme color and first theme color
diff --git a/app/renderer/components/tabs/tabs.js b/app/renderer/components/tabs/tabs.js
index 28030b6e44d..e19c159c60f 100644
--- a/app/renderer/components/tabs/tabs.js
+++ b/app/renderer/components/tabs/tabs.js
@@ -174,9 +174,10 @@ class Tabs extends React.Component {
         }
         {
           this.props.currentTabs
-            .map((frameKey) =>
+            .map((frameKey, i) =>
               <Tab
                 key={'tab-' + frameKey}
+                isLastTabOfPage={(i + 1) === this.props.currentTabs.count()}
                 ref={(node) => this.tabRefs.push(node)}
                 frameKey={frameKey}
                 partOfFullPageSet={this.props.partOfFullPageSet}
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
index aa5315a56c0..c9da2edcceb 100644
--- a/js/stores/windowStore.js
+++ b/js/stores/windowStore.js
@@ -755,7 +755,9 @@ const doAction = (action) => {
           action.frameOpts.tabStripWindowId = existingTabStripWindowId
         }
       }
-
+      // if we get a new frame, we're no longer in a close-tab-with-mouse frenzy
+      windowState = windowState.deleteIn(['ui', 'tabs', 'fixTabWidth'])
+      // add the frame to the state
       windowState = newFrame(windowState, action.frameOpts)
       setImmediate(() => {
         // Inform subscribers that we now have a frame