Shields: Add setting to hide activity count

fix https://github.com/brave/brave-browser/issues/3121

app/brave_generated_resources.grd

@@ -353,8 +353,14 @@ By installing this extension, you are agreeing to the Google Widevine Terms of U
       <message name="IDS_SETTINGS_BRAVE_SHIELDS_NO_SCRIPT_CONTROL_LABEL" desc="Default Brave script blocking control setting label">
         Block scripts
       </message>
-      <message name="IDS_SETTINGS_BRAVE_SHIELDS_GOOGLE_LOGINS_LABEL" desc="Label for a switch control which allows Google logins">
-        Allow Google logins
+      <message name="IDS_SETTINGS_BRAVE_SHIELDS_LOOK_AND_FEEL_TITLE" desc="The title the settings section with interface options such as showing the resources blocked badge">
+        Look &amp; Feel
+      </message>
+      <message name="IDS_SETTINGS_BRAVE_SHIELDS_SHOW_STATS_BLOCKED_BADGE_LABEL" desc="Default Brave show stats blocked badge control setting label">
+        Show the number of blocked items on the Shields icon
+      </message>
+      <message name="IDS_SETTINGS_BRAVE_SHIELDS_GOOGLE_LOGIN_LABEL" desc="Label for a switch control which allows Google social buttons to be enabled/disabled">
+        Allow Google login buttons on third party sites
       </message>
       <message name="IDS_SETTINGS_BRAVE_SHIELDS_FACEBOOK_EMBEDDED_POSTS_LABEL" desc="Label for a switch control which allows Facebook embedded posts">
         Allow Facebook logins and embedded posts

browser/brave_profile_prefs.cc

@@ -117,8 +117,7 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
 
   registry->RegisterBooleanPref(kShieldsAdvancedViewEnabled,
                                 is_new_user == false);
-
-  // Google-oauth should work by default
+  registry->RegisterBooleanPref(kShieldsStatsBadgeVisible, true);
   registry->RegisterBooleanPref(kGoogleLoginControlType, true);
   registry->RegisterBooleanPref(kFBEmbedControlType, true);
   registry->RegisterBooleanPref(kTwitterEmbedControlType, true);

browser/brave_profile_prefs_browsertest.cc

@@ -39,6 +39,9 @@ IN_PROC_BROWSER_TEST_F(BraveProfilePrefsBrowserTest, MiscBravePrefs) {
       kHTTPSEVerywhereControlType));
   EXPECT_FALSE(
       browser()->profile()->GetPrefs()->GetBoolean(kNoScriptControlType));
+  EXPECT_TRUE(
+      browser()->profile()->GetPrefs()->GetBoolean(
+        kShieldsStatsBadgeVisible));
   EXPECT_TRUE(
       browser()->profile()->GetPrefs()->GetBoolean(kAdControlType));
   EXPECT_TRUE(

browser/extensions/api/settings_private/brave_prefs_util.cc

@@ -47,6 +47,8 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetWhitelistedKeys() {
   // Default Brave shields
   (*s_brave_whitelist)[kShieldsAdvancedViewEnabled] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
+  (*s_brave_whitelist)[kShieldsStatsBadgeVisible] =
+      settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_whitelist)[kAdControlType] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_whitelist)[kHTTPSEVerywhereControlType] =

browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html

@@ -129,6 +129,13 @@
         </template>
       </select>
     </div>
+    <div class="settings-box">
+      <div class="label shields-primary-title">$i18n{shieldsLookFeelTitle}</div>
+    </div>
+    <settings-toggle-button
+        class="continuation"
+        pref="{{prefs.brave.shields.stats_badge_visible}}"
+        label="$i18n{showStatsBlockedBadgeLabel}">
   </template>
   <script src="default_brave_shields_page.js"></script>
 </dom-module>

chromium_src/chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -99,9 +99,13 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
       IDS_SETTINGS_BRAVE_SHIELDS_HTTPS_EVERYWHERE_CONTROL_LABEL},
     {"noScriptControlLabel",
       IDS_SETTINGS_BRAVE_SHIELDS_NO_SCRIPT_CONTROL_LABEL},
-   {"googleLoginControlLabel",
-      IDS_SETTINGS_BRAVE_SHIELDS_GOOGLE_LOGINS_LABEL},
-   {"fbEmbedControlLabel",
+    {"shieldsLookFeelTitle",
+      IDS_SETTINGS_BRAVE_SHIELDS_LOOK_AND_FEEL_TITLE},
+    {"showStatsBlockedBadgeLabel",
+      IDS_SETTINGS_BRAVE_SHIELDS_SHOW_STATS_BLOCKED_BADGE_LABEL},
+    {"googleLoginControlLabel",
+      IDS_SETTINGS_BRAVE_SHIELDS_GOOGLE_LOGIN_LABEL},
+    {"fbEmbedControlLabel",
       IDS_SETTINGS_BRAVE_SHIELDS_FACEBOOK_EMBEDDED_POSTS_LABEL},
     {"twitterEmbedControlLabel",
       IDS_SETTINGS_BRAVE_SHIELDS_TWITTER_EMBEDDED_TWEETS_LABEL},

common/pref_names.cc

@@ -47,6 +47,8 @@ const char kHTTPSEVerywhereControlType[] = "brave.https_everywhere_default";
 const char kNoScriptControlType[] = "brave.no_script_default";
 const char kShieldsAdvancedViewEnabled[] =
     "brave.shields.advanced_view_enabled";
+const char kShieldsStatsBadgeVisible[] =
+    "brave.shields.stats_badge_visible";
 const char kAdControlType[] = "brave.ad_default";
 const char kGoogleLoginControlType[] = "brave.google_login_default";
 const char kFBEmbedControlType[] = "brave.fb_embed_default";

common/pref_names.h

@@ -40,6 +40,7 @@ extern const char kReferralAndroidFirstRunTimestamp[];
 extern const char kHTTPSEVerywhereControlType[];
 extern const char kNoScriptControlType[];
 extern const char kShieldsAdvancedViewEnabled[];
+extern const char kShieldsStatsBadgeVisible[];
 extern const char kAdControlType[];
 extern const char kGoogleLoginControlType[];
 extern const char kFBEmbedControlType[];

components/brave_extension/extension/brave_extension/actions/settingsActions.ts

@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+// Types
+import * as types from '../constants/settingsTypes'
+import * as actions from '../types/actions/settingsActions'
+import { SettingsOptions, GeneratedSettingsKey, SettingsData } from '../types/other/settingsTypes'
+
+// Helpers
+import * as shieldsAPI from '../background/api/shieldsAPI'
+import * as settingsUtils from '../helpers/settingsUtils'
+import { areObjectsEqual } from '../helpers/objectUtils'
+import { Dispatch } from 'redux'
+import { State } from '../types/state/mainState'
+/**
+ * Inform the store that settings have changed. This action is used only
+ * for storing values in Redux and does not tell which brave settings have changed.
+ */
+export const setStoreSettingsChange: actions.SetStoreSettingsChange = (settingsData) => {
+  return {
+    type: types.SET_STORE_SETTINGS_CHANGE,
+    settingsData
+  }
+}
+
+/**
+ * Perform an update in settings both in brave://settings and Shields store whenever a setting change.
+ * This action is bounded to the settings listener and should not be used outside this scope.
+ */
+export const settingsDidChange: actions.SettingsDidChange = (settings) => {
+  const settingsOptions: SettingsOptions = settingsUtils.settingsOptions
+  const currentSetting: Partial<GeneratedSettingsKey> = settingsOptions[settings.key]
+  return setStoreSettingsChange({ [currentSetting]: settings.value })
+}
+
+/**
+ * Get a list of settings values from brave://settings and update if comparison
+ * against settings values from store deosn't match.
+ */
+interface FetchAndDispatchSettings {
+  (): (dispatch: Dispatch, getState: () => State) => void
+}
+
+export const fetchAndDispatchSettings: FetchAndDispatchSettings = () => {
+  return (dispatch, getState) => {
+    const settingsDataFromStore: SettingsData = getState().shieldsPanel.settingsData
+    shieldsAPI.getViewPreferences()
+      .then(
+        (settingsData: SettingsData) => {
+          if (!areObjectsEqual(settingsDataFromStore, settingsData)) {
+            dispatch(setStoreSettingsChange(settingsData))
+          }
+        },
+        error => console.error('[Shields] error updating settings data', error)
+      )
+  }
+}

components/brave_extension/extension/brave_extension/background/actions.js

@@ -7,3 +7,4 @@ require('./actions/webNavigationActions')
 require('./actions/runtimeActions')
 require('./actions/tabActions')
 require('./actions/windowActions')
+require('./actions/settingsActions')

components/brave_extension/extension/brave_extension/background/actions/settingsActions.ts

@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+import { bindActionCreators } from 'redux'
+import store from '../store'
+import * as settingsActions from '../../actions/settingsActions'
+export default bindActionCreators(settingsActions, store.dispatch)

components/brave_extension/extension/brave_extension/background/api.ts

@@ -7,3 +7,4 @@ require('./api/cosmeticFilterAPI')
 require('./api/localeAPI')
 require('./api/shieldsAPI')
 require('./api/tabsAPI')
+require('./api/storageAPI')

components/brave_extension/extension/brave_extension/background/api/shieldsAPI.ts

@@ -175,23 +175,33 @@ export const reportBrokenSite = (tabId: number) =>
 
 export type GetViewPreferencesData = {
   showAdvancedView: boolean
+  statsBadgeVisible: boolean
 }
 
 const settingsKeys = {
-  showAdvancedView: { key: 'brave.shields.advanced_view_enabled', type: chrome.settingsPrivate.PrefType.BOOLEAN }
+  showAdvancedView: { key: 'brave.shields.advanced_view_enabled', type: chrome.settingsPrivate.PrefType.BOOLEAN },
+  statsBadgeVisible: { key: 'brave.shields.stats_badge_visible', type: chrome.settingsPrivate.PrefType.BOOLEAN }
 }
 export async function getViewPreferences (): Promise<GetViewPreferencesData> {
-  const showAdvancedViewPref = await SettingsPrivate.getPreference(settingsKeys.showAdvancedView.key)
-  if (showAdvancedViewPref.type !== settingsKeys.showAdvancedView.type) {
-    throw new Error(`Unexpected settings type received for "${settingsKeys.showAdvancedView.key}". Expected: ${settingsKeys.showAdvancedView.type}, Received: ${showAdvancedViewPref.type}`)
-  }
-  return {
-    showAdvancedView: showAdvancedViewPref.value
-  }
+  let newSettings = {} as GetViewPreferencesData
+  await Promise.all(
+    Object.keys(settingsKeys).map(async (name) => {
+      // Get setting by internal key
+      const pref = await SettingsPrivate.getPreference(settingsKeys[name].key)
+      // Validate setting type
+      if (pref.type !== settingsKeys[name].type) {
+        throw new Error(`Unexpected settings type received for "${settingsKeys[name].key}". Expected: ${settingsKeys[name].type}, Received: ${pref.type}`)
+      }
+      // Valid
+      newSettings[name] = pref.value
+    })
+  )
+  return newSettings
 }
 
 export type SetViewPreferencesData = {
   showAdvancedView?: boolean
+  statsBadgeVisible?: boolean
 }
 export async function setViewPreferences (preferences: SetViewPreferencesData): Promise<void> {
   const setOps = []
@@ -200,6 +210,11 @@ export async function setViewPreferences (preferences: SetViewPreferencesData):
       SettingsPrivate.setPreference(settingsKeys.showAdvancedView.key, preferences.showAdvancedView)
     )
   }
+  if (preferences.statsBadgeVisible !== undefined) {
+    setOps.push(
+      SettingsPrivate.setPreference(settingsKeys.statsBadgeVisible.key, preferences.statsBadgeVisible)
+    )
+  }
   await Promise.all(setOps)
 }
 

components/brave_extension/extension/brave_extension/background/api/storageAPI.ts

@@ -2,11 +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/. */
 
-import { debounce } from '../../../../../common/debounce'
+// Types
 import * as Shields from '../../types/state/shieldsPannelState'
+import { SettingsData } from '../../types/other/settingsTypes'
 
+// Helpers
+import { debounce } from '../../../../../common/debounce'
 const keyName = 'shields-persistent-data'
 
+export const initialSettingsData: SettingsData = {
+  showAdvancedView: false,
+  statsBadgeVisible: true
+}
+
 export const defaultPersistentData: Shields.PersistentData = {
   isFirstAccess: true
 }

components/brave_extension/extension/brave_extension/background/events.ts

@@ -8,6 +8,7 @@ require('./events/shieldsEvents')
 require('./events/runtimeEvents')
 require('./events/webNavigationEvents')
 require('./events/cosmeticFilterEvents')
+require('./events/settingsEvents')
 // Only do detection events if the wallet API is available
 if (chrome.braveWallet) {
   require('./events/dappDetectionEvents')

components/brave_extension/extension/brave_extension/background/events/settingsEvents.ts

@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+import settingsActions from '../actions/settingsActions'
+import { settingsKeyList } from '../../helpers/settingsUtils'
+import { SettingsKey } from '../../types/other/settingsTypes'
+
+chrome.settingsPrivate.onPrefsChanged.addListener(function (settings) {
+  const settingsKey = settings[0].key as SettingsKey
+  // only call the store update if the settings change is something we care about
+  if (settingsKeyList.includes(settingsKey)) {
+    settingsActions.settingsDidChange(settings[0])
+  }
+})

components/brave_extension/extension/brave_extension/background/events/webNavigationEvents.ts

@@ -2,14 +2,24 @@
  * 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/. */
 
+// Actions
 import actions from '../actions/webNavigationActions'
+import settingsActions from '../actions/settingsActions'
 
 chrome.webNavigation.onBeforeNavigate.addListener(function ({ tabId, url, frameId }: chrome.webNavigation.WebNavigationParentedCallbackDetails) {
   const isMainFrame: boolean = frameId === 0
   actions.onBeforeNavigate(tabId, url, isMainFrame)
 })
 
+let shouldRequestSettingsData = true
 chrome.webNavigation.onCommitted.addListener(function ({ tabId, url, frameId }: chrome.webNavigation.WebNavigationTransitionCallbackDetails) {
   const isMainFrame: boolean = frameId === 0
   actions.onCommitted(tabId, url, isMainFrame)
+  if (shouldRequestSettingsData) {
+    // check whether or not the settings store should update based on settings changes.
+    // this action is needed in the onCommitted phase for edge cases such as when after Brave is re-launched
+    settingsActions.fetchAndDispatchSettings()
+    // this request only needs to perform once
+    shouldRequestSettingsData = false
+  }
 })

components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts

@@ -9,9 +9,11 @@ import * as storageAPI from '../api/storageAPI'
 import * as shieldsPanelTypes from '../../constants/shieldsPanelTypes'
 import * as windowTypes from '../../constants/windowTypes'
 import * as tabTypes from '../../constants/tabTypes'
+import * as settingsTypes from '../../constants/settingsTypes'
 import * as webNavigationTypes from '../../constants/webNavigationTypes'
 import { State, PersistentData } from '../../types/state/shieldsPannelState'
 import { Actions } from '../../types/actions/index'
+import { SettingsData } from '../../types/other/settingsTypes'
 
 // State helpers
 import * as shieldsPanelState from '../../state/shieldsPanelState'
@@ -28,9 +30,9 @@ import {
   setAllowCookies,
   toggleShieldsValue,
   requestShieldPanelData,
-  setAllowScriptOriginsOnce,
   onShieldsPanelShown,
-  reportBrokenSite
+  reportBrokenSite,
+  setAllowScriptOriginsOnce
 } from '../api/shieldsAPI'
 import { reloadTab } from '../api/tabsAPI'
 import {
@@ -47,6 +49,7 @@ import { getHostname } from '../../helpers/urlUtils'
 export default function shieldsPanelReducer (
   state: State = {
     persistentData: storageAPI.loadPersistentData(),
+    settingsData: storageAPI.initialSettingsData,
     tabs: {},
     windows: {},
     currentWindowId: -1
@@ -299,6 +302,11 @@ export default function shieldsPanelReducer (
         })
       break
     }
+    case settingsTypes.SET_STORE_SETTINGS_CHANGE: {
+      const settingsData: Partial<SettingsData> = action.settingsData
+      state = { ...state, settingsData: { ...state.settingsData, ...settingsData } }
+      break
+    }
     // NoScriptInfo is the name we call for the list of scripts that are either
     // blocked or allowed by the user. Each script have three properties:
     // ....................................................................................

components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx

@@ -45,7 +45,7 @@ Promise.all([
     mountNode
   )
 })
-.catch((e) => {
+.catch((error: any) => {
   console.error('Problem mounting brave shields')
-  console.error(e)
+  console.error(error)
 })

components/brave_extension/extension/brave_extension/constants/settingsTypes.ts

@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+export const SET_STORE_SETTINGS_CHANGE = 'SET_STORE_SETTINGS_CHANGE'

components/brave_extension/extension/brave_extension/containers/app.tsx

@@ -5,6 +5,7 @@
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as shieldsPanelActions from '../actions/shieldsPanelActions'
+import * as settingsActions from '../actions/settingsActions'
 import * as shieldsPanelState from '../state/shieldsPanelState'
 import BraveShields from '../containers/braveShields'
 import { State } from '../types/state/mainState'
@@ -18,12 +19,16 @@ const mapStateToProps = (
   return ({
     shieldsPanelTabData: shieldsPanelState.getActiveTabData(state.shieldsPanel),
     persistentData: shieldsPanelState.getPersistentData(state.shieldsPanel),
-    settings: ownProps.settings
+    settingsData: shieldsPanelState.mergeSettingsData(state.shieldsPanel, ownProps.settings)
   })
 }
 
+// combine all actions used outside background pages.
+// for background action bindings, refer to background/index.js
+const actions = Object.assign({}, shieldsPanelActions, settingsActions)
+
 const mapDispatchToProps = (dispatch: any) => ({
-  actions: bindActionCreators(shieldsPanelActions, dispatch)
+  actions: bindActionCreators(actions, dispatch)
 })
 
 export default connect(

components/brave_extension/extension/brave_extension/containers/braveShields.tsx

@@ -33,6 +33,10 @@ import {
   SetAdvancedViewFirstAccess,
   ShieldsReady
 } from '../types/actions/shieldsPanelActions'
+import { SetStoreSettingsChange } from '../types/actions/settingsActions'
+import { SettingsData } from '../types/other/settingsTypes'
+
+// Helpers
 import { shieldsHasFocus } from '../helpers/shieldsUtils'
 
 interface Props {
@@ -50,24 +54,23 @@ interface Props {
     setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
     setFinalScriptsBlockedState: SetFinalScriptsBlockedState
     setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess
+    setStoreSettingsChange: SetStoreSettingsChange
     shieldsReady: ShieldsReady
   }
   shieldsPanelTabData: Tab
   persistentData: PersistentData
-  settings: any
+  settingsData: SettingsData
 }
 
 interface State {
   showReadOnlyView: boolean
-  showAdvancedView: boolean
 }
 
 export default class Shields extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      showReadOnlyView: false,
-      showAdvancedView: props.settings.showAdvancedView
+      showReadOnlyView: false
     }
   }
 
@@ -76,11 +79,9 @@ export default class Shields extends React.PureComponent<Props, State> {
   }
 
   toggleAdvancedView = () => {
-    const { showAdvancedView } = this.state
+    const { showAdvancedView } = this.props.settingsData
     shieldsAPI.setViewPreferences({ showAdvancedView: !showAdvancedView })
-      // change local state so the component can trigger an update
-      // otherwise change will be visible only after shields closes
-      .then(() => this.setState({ showAdvancedView: !showAdvancedView }))
+      .then(() => this.props.actions.setStoreSettingsChange({ showAdvancedView: !showAdvancedView }))
       .catch((err) => console.log('[Shields] Unable to toggle advanced view interface:', err))
   }
 
@@ -98,12 +99,12 @@ export default class Shields extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { shieldsPanelTabData, persistentData, actions } = this.props
-    const { showAdvancedView, showReadOnlyView } = this.state
+    const { shieldsPanelTabData, persistentData, settingsData, actions } = this.props
+    const { showReadOnlyView } = this.state
     if (!shieldsPanelTabData) {
       return null
     }
-    return showAdvancedView
+    return settingsData.showAdvancedView
       ? (
         <AdvancedView
           shieldsPanelTabData={shieldsPanelTabData}

components/brave_extension/extension/brave_extension/helpers/settingsUtils.ts

@@ -0,0 +1,16 @@
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* 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/. */
+
+import { SettingsOptions, SettingsKey } from '../types/other/settingsTypes'
+
+export const settingsOptions: SettingsOptions = {
+  'brave.shields.stats_badge_visible': 'statsBadgeVisible',
+  'brave.shields.advanced_view_enabled': 'showAdvancedView'
+}
+
+export const settingsKeyList: Array<SettingsKey> = [
+  'brave.shields.stats_badge_visible',
+  'brave.shields.advanced_view_enabled'
+]

components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts

@@ -29,6 +29,10 @@ export const updatePersistentData: shieldState.UpdatePersistentData = (state, pe
   return { ...state, persistentData: { ...state.persistentData, ...persistentData } }
 }
 
+export const mergeSettingsData: shieldState.MergeSettingsData = (state, settingsData) => {
+  return { ...state.settingsData, settingsData }
+}
+
 export const updateActiveTab: shieldState.UpdateActiveTab = (state, windowId, tabId) => {
   let windows: shieldState.Windows = { ...state.windows } || {}
   windows[windowId] = tabId
@@ -135,8 +139,11 @@ export const updateShieldsIconBadgeText: shieldState.UpdateShieldsIconBadgeText
   const tab: shieldState.Tab = state.tabs[tabId]
   if (tab) {
     const total = getTotalResourcesBlocked(tab)
-    // do not show any badge if there are no blocked items
-    setBadgeText(tabId, total > 99 ? '99+' : total > 0 ? total.toString() : '')
+    const text: string = state.settingsData.statsBadgeVisible
+      // do not show any badge if there are no blocked items
+      ? total > 99 ? '99+' : total > 0 ? total.toString() : ''
+      : ''
+    setBadgeText(tabId, text)
   }
 }
 

components/brave_extension/extension/brave_extension/types/actions/index.ts

@@ -3,10 +3,12 @@ import { tabActions } from './tabActions'
 import { webNavigationActions } from './webNavigationActions'
 import { windowActions } from './windowActions'
 import { runtimeActions } from './runtimeActions'
+import { settingsActions } from './settingsActions'
 
 export type Actions =
   shieldPanelActions |
   tabActions |
   webNavigationActions |
   windowActions |
-  runtimeActions
+  runtimeActions |
+  settingsActions

components/brave_extension/extension/brave_extension/types/actions/settingsActions.ts

@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+import * as types from '../../constants/settingsTypes'
+import { Settings, SettingsData } from '../other/settingsTypes'
+
+interface SetStoreSettingsChangeReturn {
+  type: typeof types.SET_STORE_SETTINGS_CHANGE,
+  settingsData: Partial<SettingsData>
+}
+
+export interface SetStoreSettingsChange {
+  (settingsData: Partial<SettingsData>): SetStoreSettingsChangeReturn
+}
+
+export interface SettingsDidChange {
+  (settings: Settings): SetStoreSettingsChangeReturn
+}
+
+export type settingsActions =
+  SetStoreSettingsChangeReturn

components/brave_extension/extension/brave_extension/types/constants/settingsTypes.ts

@@ -0,0 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+import * as types from '../../constants/settingsTypes'
+
+export type SET_STORE_SETTINGS_CHANGE = typeof types.SET_STORE_SETTINGS_CHANGE

components/brave_extension/extension/brave_extension/types/other/settingsTypes.ts

@@ -0,0 +1,26 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+export type Settings = {
+  key: string
+  type: any
+  // TODO: can support multiple types, see PrefType in chromel.d.ts
+  value: boolean
+}
+
+export type SettingsData = {
+  [key in GeneratedSettingsKey]: boolean
+}
+
+export type SettingsOptions = {
+  [key: string]: GeneratedSettingsKey
+}
+
+export type GeneratedSettingsKey =
+  'showAdvancedView' |
+  'statsBadgeVisible'
+
+export type SettingsKey =
+  'brave.shields.advanced_view_enabled' |
+  'brave.shields.stats_badge_visible'

components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts

@@ -5,6 +5,7 @@
 import { BlockOptions, BlockTypes, BlockFPOptions, BlockCookiesOptions } from '../other/blockTypes'
 import { CosmeticFilteringState } from '../adblock/adblockTypes'
 import { NoScriptInfo } from '../other/noScriptInfo'
+import { SettingsData } from '../other/settingsTypes'
 
 export interface Tab {
   cosmeticBlocking: boolean
@@ -47,6 +48,7 @@ export interface PersistentData {
 
 export interface State {
   persistentData: PersistentData
+  settingsData: SettingsData
   currentWindowId: number
   tabs: Tabs
   windows: Windows
@@ -68,6 +70,10 @@ export interface UpdatePersistentData {
   (state: State, persistentData: Partial<PersistentData>): State
 }
 
+export interface MergeSettingsData {
+  (state: State, settingsData: SettingsData): SettingsData
+}
+
 export interface UpdateActiveTab {
   (state: State, windowId: number, tabId: number): State
 }

components/definitions/chromel.d.ts

@@ -56,6 +56,10 @@ declare namespace chrome.settingsPrivate {
 
   type SetDefaultZoomCallback = (success: boolean) => void
   function setDefaultZoom (zoom: number, callback?: SetDefaultZoomCallback): void
+
+  const onPrefsChanged: {
+    addListener: (callback: (prefs: PrefObject[]) => void) => void
+  }
 }
 
 declare namespace chrome.braveRewards {
@@ -225,9 +229,7 @@ declare namespace chrome.braveShields {
 
   type BraveShieldsViewPreferences = {
     showAdvancedView: boolean
-  }
-  type BraveShieldsSetViewPreferencesData = {
-    showAdvancedView?: boolean
+    statsBadgeVisible: boolean
   }
 }
 

components/test/brave_extension/background/reducers/shieldsPanelReducer_test.ts

@@ -60,6 +60,10 @@ const state: State = deepFreeze({
   persistentData: {
     isFirstAccess: true
   },
+  settingsData: {
+    showAdvancedView: false,
+    statsBadgeVisible: true
+  },
   tabs: {
     2: {
       ...details,

components/test/brave_extension/state/shieldsPanelState_test.ts

@@ -13,6 +13,10 @@ const state: State = deepFreeze({
   persistentData: {
     isFirstAccess: true
   },
+  settingsData: {
+    showAdvancedView: false,
+    statsBadgeVisible: true
+  },
   tabs: {
     2: {
       id: 2,

components/test/testData.ts

@@ -123,6 +123,11 @@ let mockSettings: MockSettingsStore = {
     key: 'brave.shields.advanced_view_enabled',
     type: 'BOOLEAN',
     value: false
+  },
+  ['brave.shields.stats_badge_visible']: {
+    key: 'brave.shields.stats_badge_visible',
+    type: 'BOOLEAN',
+    value: true
   }
 }
 
@@ -342,7 +347,8 @@ export const initialState = deepFreeze({
     currentWindowId: -1,
     tabs: {},
     windows: {},
-    persistentData: { isFirstAccess: true }
+    persistentData: { isFirstAccess: true },
+    settingsData: { showAdvancedView: false, statsBadgeVisible: true }
   }
 })