From 6c276466282a11ec140168298ac5fcfca0470039 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Thu, 29 Jun 2017 13:42:22 +0200
Subject: [PATCH] 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          |  4 ++--
 js/stores/windowStore.js            | 15 +++++++++++++++
 test/lib/selectors.js               |  1 +
 test/tab-components/tabPagesTest.js | 19 +++++++++++++++----
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/js/state/frameStateUtil.js b/js/state/frameStateUtil.js
index ba6ae891c38..0ce523a5d6a 100644
--- a/js/state/frameStateUtil.js
+++ b/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
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
index edd632f6d91..f20c806b749 100644
--- a/js/stores/windowStore.js
+++ b/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
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 7ea7e454b61..0b429493afa 100644
--- a/test/lib/selectors.js
+++ b/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',
diff --git a/test/tab-components/tabPagesTest.js b/test/tab-components/tabPagesTest.js
index 2221b959d35..3972c088cbf 100644
--- a/test/tab-components/tabPagesTest.js
+++ b/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)
       })
     })
   })