Fixes tab pages after setting change

Resolves brave#7806

Auditors: @bsclifton @cezaraugusto

Test Plan:
- Open about:preferences#tabs
- Set the number of tabs per tab set to 6
- Open new tabs to create a new tab set, which has just 2 tabs
- Increase the number to 8

js/state/frameStateUtil.js

@@ -451,9 +451,9 @@ function isPinned (state, frameKey) {
  * Updates the tab page index to the specified frameProps
  * @param frameProps Any frame belonging to the page
  */
-function updateTabPageIndex (state, frameProps) {
+function updateTabPageIndex (state, frameProps, tabsPerPage = getSetting(settings.TABS_PER_PAGE)) {
   frameProps = makeImmutable(frameProps)
-  const index = getFrameTabPageIndex(state, frameProps.get('key'))
+  const index = getFrameTabPageIndex(state, frameProps.get('key'), tabsPerPage)
 
   if (index === -1) {
     return state

js/stores/windowStore.js

@@ -229,6 +229,18 @@ const frameGuestInstanceIdChanged = (state, action) => {
   })
 }
 
+function handleChangeSettingAction (state, settingKey, settingValue) {
+  switch (settingKey) {
+    case settings.TABS_PER_PAGE:
+      const activeFrame = frameStateUtil.getActiveFrame(state)
+      state = frameStateUtil.updateTabPageIndex(state, activeFrame, settingValue)
+      break
+    default:
+  }
+
+  return state
+}
+
 const windowStore = new WindowStore()
 const emitChanges = debounce(windowStore.emitChanges.bind(windowStore), 5)
 
@@ -712,6 +724,9 @@ const doAction = (action) => {
       }
       windowState = newFrame(windowState, action.frameOpts)
       break
+    case appConstants.APP_CHANGE_SETTING:
+      windowState = handleChangeSettingAction(windowState, action.key, action.value)
+      break
     case windowConstants.WINDOW_FRAME_MOUSE_ENTER:
       windowState = windowState.setIn(['ui', 'mouseInFrame'], true)
       break

test/lib/selectors.js

@@ -72,6 +72,7 @@ module.exports = {
   securityTab: '[data-l10n-id="security"]',
   paymentsTab: '[data-l10n-id="payments"]',
   syncTab: '[data-l10n-id="sync"]',
+  tabsTab: '[data-l10n-id="tabs"]',
   doneButton: '[data-l10n-id="done"]',
   homepageInput: '[data-l10n-id="homepageInput"]',
   compactBraveryPanelSwitch: '[data-test-id="compactBraveryPanelSwitch"] .switchBackground',

test/tab-components/tabPagesTest.js

@@ -12,7 +12,8 @@ const {
   tabPage1,
   tabPage2,
   activeWebview,
-  activeTab
+  activeTab,
+  tabsTab
 } = require('../lib/selectors')
 
 describe('tab pages', function () {
@@ -90,10 +91,20 @@ describe('tab pages', function () {
 
     describe('tabs per page setting', function () {
       it('takes effect immediately', function * () {
-        const defaultTabsPerPage = appConfig.defaultSettings[settings.TABS_PER_PAGE]
+        const newValue = 6
+        const tabs = appConfig.defaultSettings[settings.TABS_PER_PAGE]
+        const numberOfPages = Math.ceil(tabs / newValue)
+        const numberOfTabs = tabs - (Math.floor(tabs / newValue) * newValue)
         yield this.app.client
-          .changeSetting(settings.TABS_PER_PAGE, 1)
-          .waitForElementCount(tabPage, defaultTabsPerPage)
+          .waitForBrowserWindow()
+          .loadUrl('about:preferences')
+          .waitForVisible(tabsTab)
+          .click(tabsTab)
+          .waitForElementCount('[data-test-id="tabsPerTabPage"]', 1)
+          .click('[data-test-id="tabsPerTabPage"]')
+          .click(`option[value="${newValue}"]`)
+          .waitForElementCount(tabPage, numberOfPages)
+          .waitForElementCount('.tabArea', numberOfTabs)
       })
     })
   })