Fixes tab pages after setting change

Resolves #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