Merge pull request #10134 from brave/9779

Add support for dynamic breakpoint for tabs

app/common/state/tabContentState.js

@@ -146,7 +146,7 @@ const tabContentState = {
       isActive &&
       // Larger sizes still have a relative closeIcon
       // We don't resize closeIcon as we do with favicon so don't show it (smallest)
-      !hasBreakpoint(frame.get('breakpoint'), ['default', 'large', 'smallest'])
+      !hasBreakpoint(frame.get('breakpoint'), ['dynamic', 'default', 'large', 'smallest'])
     )
   },
 
@@ -161,7 +161,7 @@ const tabContentState = {
     }
 
     return frameStateUtil.getTabHoverState(state, frameKey) &&
-      hasBreakpoint(frame.get('breakpoint'), ['default', 'large'])
+      hasBreakpoint(frame.get('breakpoint'), ['dynamic', 'default', 'large'])
   },
 
   /**

app/renderer/components/styles/global.js

@@ -35,6 +35,7 @@ const globalStyles = {
     breakpointTinyWin32: '500px',
     breakpointNewPrivateTab: '890px',
     tab: {
+      dynamic: '99999px', // add a large number as new spec will set tab width based on window size
       default: '184px', // match tabArea max-width
       large: '120px',
       largeMedium: '83px',

app/renderer/lib/tabUtil.js

@@ -2,19 +2,19 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-const styles = require('../components/styles/global')
+const tabBreakpoint = require('../components/styles/global').breakpoint.tab
 
 /**
  * Get tab's breakpoint name for current tab size.
  * @param {Number} tabWidth current tab size
  * @returns {String} The matching breakpoint.
  */
 module.exports.getTabBreakpoint = (tabWidth) => {
-  const sizes = ['default', 'large', 'largeMedium', 'medium', 'mediumSmall', 'small', 'extraSmall', 'smallest']
+  const sizes = Object.keys(tabBreakpoint)
   let currentSize
 
   sizes.map(size => {
-    if (tabWidth <= Number.parseInt(styles.breakpoint.tab[size], 10)) {
+    if (tabWidth <= Number.parseInt(tabBreakpoint[size], 10)) {
       currentSize = size
       return false
     }

test/unit/app/common/state/tabContentStateTest.js

@@ -429,6 +429,18 @@ describe('tabContentState unit tests', function () {
       })
       assert.equal(tabContentState.hasFixedCloseIcon(), false)
     })
+
+    it('frame is active and breakpoint is dynamic', function () {
+      getFrameByKeyMock = sinon.stub(frameStateUtil, 'getFrameByKey', () => {
+        return Immutable.fromJS({
+          breakpoint: 'dynamic'
+        })
+      })
+      isFrameKeyActive = sinon.stub(frameStateUtil, 'isFrameKeyActive', () => {
+        return true
+      })
+      assert.equal(tabContentState.hasFixedCloseIcon(), false)
+    })
   })
 
   describe('hasRelativeCloseIcon', function () {
@@ -461,6 +473,16 @@ describe('tabContentState unit tests', function () {
       })
       assert.equal(tabContentState.hasRelativeCloseIcon(state, frameKey), true)
     })
+
+    it('if hovering (tabIndex === hoverTabIndex) and break point is dynamic', function () {
+      const state = defaultWindowStore
+      getFrameByKeyMock = sinon.stub(frameStateUtil, 'getFrameByKey', () => {
+        return Immutable.fromJS({
+          breakpoint: 'dynamic'
+        })
+      })
+      assert.equal(tabContentState.hasRelativeCloseIcon(state, frameKey), true)
+    })
   })
 
   describe('hasVisibleSecondaryIcon', function () {

test/unit/lib/tabUtilTest.js

@@ -0,0 +1,49 @@
+/* global describe, it */
+const tabUtil = require('../../../app/renderer/lib/tabUtil')
+const tabBreakpoint = require('../../../app/renderer/components/styles/global').breakpoint.tab
+const assert = require('assert')
+
+require('../braveUnit')
+
+describe('tabUtil', function () {
+  describe('getTabBreakpoint', function () {
+    let size
+
+    it('returns `dynamic` if `dynamic` size matches', function () {
+      size = Number.parseInt(tabBreakpoint.dynamic, 10)
+      assert.equal(tabUtil.getTabBreakpoint(size), 'dynamic')
+    })
+    it('returns `default` if `default` size matches', function () {
+      size = Number.parseInt(tabBreakpoint.default, 10)
+      assert.equal(tabUtil.getTabBreakpoint(size), 'default')
+    })
+    it('returns `large` if `large` size matches', function () {
+      size = Number.parseInt(tabBreakpoint.large, 10)
+      assert.equal(tabUtil.getTabBreakpoint(size), 'large')
+    })
+    it('returns `largeMedium` if `largeMedium` size matches', function () {
+      size = Number.parseInt(tabBreakpoint.largeMedium, 10)
+      assert.equal(tabUtil.getTabBreakpoint(size), 'largeMedium')
+    })
+    it('returns `medium` if `medium` size matches', function () {
+      size = Number.parseInt(tabBreakpoint.medium, 10)
+      assert.equal(tabUtil.getTabBreakpoint(size), 'medium')
+    })
+    it('returns `mediumSmall` if `mediumSmall` size matches', function () {
+      size = Number.parseInt(tabBreakpoint.mediumSmall, 10)
+      assert.equal(tabUtil.getTabBreakpoint(size), 'mediumSmall')
+    })
+    it('returns `small` if `small` size matches', function () {
+      size = Number.parseInt(tabBreakpoint.small, 10)
+      assert.equal(tabUtil.getTabBreakpoint(size), 'small')
+    })
+    it('returns `extraSmall` if `extraSmall` size matches', function () {
+      size = Number.parseInt(tabBreakpoint.extraSmall, 10)
+      assert.equal(tabUtil.getTabBreakpoint(size), 'extraSmall')
+    })
+    it('returns `smallest` if `smallest` size matches', function () {
+      size = Number.parseInt(tabBreakpoint.smallest, 10)
+      assert.equal(tabUtil.getTabBreakpoint(size), 'smallest')
+    })
+  })
+})