Merge pull request #14516 from brave/fix/tab-close-fixed-width-animat…

…ion-jump Fix/tab close fixed width animation jump
brave · Jun 22, 2018 · 6781909 · 6781909
1 parent 4238d9f
commit 6781909
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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