Add support for multiple views on Shields

components/brave_extension/extension/brave_extension/_locales/en_US/messages.json

@@ -158,5 +158,33 @@
   "resetAllFilterSettings": {
     "message": "Clear CSS rules for all sites",
     "description": "Message for context menu that resets all cosmetic filters"
+  },
+  "advancedView": {
+    "message": "Advanced View",
+    "description": "Message for the advanced view option"
+  },
+  "simpleView": {
+    "message": "Simple View",
+    "description": "Message for the simple view option"
+  },
+  "shieldsExplanation": {
+    "message": "Sites often include cookies and scripts which try to identify you and your device (often embedded into ads). They want to work out who you are and follow you across the web — tracking what you do on every site. Brave blocks these things so that you can browse without being followed around.",
+    "description": "Message in read-only view explaining what Brave Shields do"
+  },
+  "blockedResoucesExplanation": {
+    "message": "Cross-site trackers and other creepy things blocked",
+    "description": "Message for the main trackers count in Shields simple view"
+  },
+  "webCompatWarning": {
+    "message": "Changing Shield settings in this view may affect web compatibility on this site.",
+    "description": "Message for web compat warning when switching from simple to advanced view"
+  },
+  "gotIt": {
+    "message": "Got it",
+    "description": "Message for the button that confirms the advanced view"
+  },
+  "learnMore": {
+    "message": "Learn more",
+    "description": "Message inviting the user to learn more about Shields"
   }
 }

components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts

@@ -119,3 +119,15 @@ export const setFinalScriptsBlockedState: actions.SetFinalScriptsBlockedState =
     type: types.SET_FINAL_SCRIPTS_BLOCKED_ONCE_STATE
   }
 }
+
+export const setAdvancedViewFirstAccess: actions.SetAdvancedViewFirstAccess = () => {
+  return {
+    type: types.SET_ADVANCED_VIEW_FIRST_ACCESS
+  }
+}
+
+export const toggleAdvancedView: actions.ToggleAdvancedView = () => {
+  return {
+    type: types.TOGGLE_ADVANCED_VIEW
+  }
+}

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

@@ -0,0 +1,32 @@
+/* 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 { debounce } from '../../../../../common/debounce'
+import * as Shields from '../../types/state/shieldsPannelState'
+
+const keyName = 'shields-persistent-data'
+
+export const defaultPersistentData: Shields.PersistentData = {
+  isFirstAccess: true,
+  advancedView: false
+}
+
+export const loadPersistentData = (): Shields.PersistentData => {
+  const data = window.localStorage.getItem(keyName)
+  let state: Shields.PersistentData = defaultPersistentData
+  if (data) {
+    try {
+      state = JSON.parse(data)
+    } catch (e) {
+      console.error('[Shields] Could not parse local storage data: ', e)
+    }
+  }
+  return state
+}
+
+export const savePersistentDataDebounced = debounce((data: Shields.PersistentData) => {
+  if (data) {
+    window.localStorage.setItem(keyName, JSON.stringify(data))
+  }
+}, 50)

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

@@ -2,13 +2,16 @@
  * 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/. */
 
+// Background
+import * as storageAPI from '../api/storageAPI'
+
 // Types
 import * as shieldsPanelTypes from '../../constants/shieldsPanelTypes'
 import * as windowTypes from '../../constants/windowTypes'
 import * as tabTypes from '../../constants/tabTypes'
 import * as webNavigationTypes from '../../constants/webNavigationTypes'
 import * as cosmeticFilterTypes from '../../constants/cosmeticFilterTypes'
-import { State } from '../../types/state/shieldsPannelState'
+import { State, PersistentData } from '../../types/state/shieldsPannelState'
 import { Actions } from '../../types/actions/index'
 
 // APIs
@@ -25,6 +28,7 @@ import {
 import * as shieldsPanelState from '../../state/shieldsPanelState'
 import * as noScriptState from '../../state/noScriptState'
 import { getOrigin } from '../../helpers/urlUtils'
+import { areObjectsEqual } from '../../helpers/objectUtils'
 
 const focusedWindowChanged = (state: State, windowId: number): State => {
   if (windowId !== -1) {
@@ -43,11 +47,17 @@ const updateActiveTab = (state: State, windowId: number, tabId: number): State =
   return shieldsPanelState.updateActiveTab(state, windowId, tabId)
 }
 
-export default function cosmeticFilterReducer (state: State = {
-  tabs: {},
-  windows: {},
-  currentWindowId: -1 },
-  action: Actions) {
+export default function cosmeticFilterReducer (
+  state: State = {
+    persistentData: storageAPI.loadPersistentData(),
+    tabs: {},
+    windows: {},
+    currentWindowId: -1
+  },
+  action: Actions
+) {
+  const initialPersistentData: PersistentData = state.persistentData
+
   switch (action.type) {
     case webNavigationTypes.ON_COMMITTED: {
       const tabData = shieldsPanelState.getActiveTabData(state)
@@ -143,5 +153,10 @@ export default function cosmeticFilterReducer (state: State = {
       break
     }
   }
+
+  if (!areObjectsEqual(state.persistentData, initialPersistentData)) {
+    storageAPI.savePersistentDataDebounced(state.persistentData)
+  }
+
   return state
 }

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

@@ -2,12 +2,15 @@
  * 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/. */
 
+// Background
+import * as storageAPI from '../api/storageAPI'
+
 // Types
 import * as shieldsPanelTypes from '../../constants/shieldsPanelTypes'
 import * as windowTypes from '../../constants/windowTypes'
 import * as tabTypes from '../../constants/tabTypes'
 import * as webNavigationTypes from '../../constants/webNavigationTypes'
-import { State } from '../../types/state/shieldsPannelState'
+import { State, PersistentData } from '../../types/state/shieldsPannelState'
 import { Actions } from '../../types/actions/index'
 
 // State helpers
@@ -31,8 +34,19 @@ import { reloadTab } from '../api/tabsAPI'
 
 // Helpers
 import { getAllowedScriptsOrigins } from '../../helpers/noScriptUtils'
+import { areObjectsEqual } from '../../helpers/objectUtils'
+
+export default function shieldsPanelReducer (
+  state: State = {
+    persistentData: storageAPI.loadPersistentData(),
+    tabs: {},
+    windows: {},
+    currentWindowId: -1
+  },
+  action: Actions
+) {
+  const initialPersistentData: PersistentData = state.persistentData
 
-export default function shieldsPanelReducer (state: State = { tabs: {}, windows: {}, currentWindowId: -1 }, action: Actions) {
   switch (action.type) {
     case webNavigationTypes.ON_COMMITTED: {
       if (action.isMainFrame) {
@@ -300,7 +314,24 @@ export default function shieldsPanelReducer (state: State = { tabs: {}, windows:
     }
     case shieldsPanelTypes.SET_FINAL_SCRIPTS_BLOCKED_ONCE_STATE: {
       state = noScriptState.setFinalScriptsBlockedState(state)
+      break
+    }
+    // Advanced/simple view functionality
+    case shieldsPanelTypes.SET_ADVANCED_VIEW_FIRST_ACCESS: {
+      state = shieldsPanelState.updatePersistentData(state, { isFirstAccess: false })
+      break
+    }
+    case shieldsPanelTypes.TOGGLE_ADVANCED_VIEW: {
+      state = shieldsPanelState.updatePersistentData(state, {
+        advancedView: !state.persistentData.advancedView
+      })
+      break
     }
   }
+
+  if (!areObjectsEqual(state.persistentData, initialPersistentData)) {
+    storageAPI.savePersistentDataDebounced(state.persistentData)
+  }
+
   return state
 }

components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx → components/brave_extension/extension/brave_extension/components/advancedView/controls/adsTrackersControl.tsx

@@ -15,10 +15,10 @@ import {
 } from 'brave-ui/features/shields'
 
 // Group Components
-import StaticList from '../list/static'
+import StaticList from '../overlays/staticOverlay'
 
 // Locale
-import { getLocale } from '../../background/api/localeAPI'
+import { getLocale } from '../../../background/api/localeAPI'
 
 // Helpers
 import {
@@ -29,11 +29,11 @@ import {
   getTabIndexValueBasedOnProps,
   blockedResourcesSize,
   maybeDisableResourcesRow
-} from '../../helpers/shieldsUtils'
+} from '../../../helpers/shieldsUtils'
 
 // Types
-import { BlockAdsTrackers } from '../../types/actions/shieldsPanelActions'
-import { BlockOptions } from '../../types/other/blockTypes'
+import { BlockAdsTrackers } from '../../../types/actions/shieldsPanelActions'
+import { BlockOptions } from '../../../types/other/blockTypes'
 
 interface CommonProps {
   isBlockedListOpen: boolean

components/brave_extension/extension/brave_extension/components/controls/cookiesControl.tsx → components/brave_extension/extension/brave_extension/components/advancedView/controls/cookiesControl.tsx

@@ -8,20 +8,19 @@ import * as React from 'react'
 import { BlockedInfoRowSingle, SelectBox } from 'brave-ui/features/shields'
 
 // Locale
-import { getLocale } from '../../background/api/localeAPI'
+import { getLocale } from '../../../background/api/localeAPI'
 
 // Types
-import { BlockCookies } from '../../types/actions/shieldsPanelActions'
-import { BlockCookiesOptions } from '../../types/other/blockTypes'
+import { BlockCookiesOptions } from '../../../types/other/blockTypes'
 
 export interface Props {
   isBlockedListOpen: boolean
   cookies: BlockCookiesOptions
-  blockCookies: BlockCookies
+  blockCookies: (event: string) => void
 }
 
 export default class CookiesControl extends React.PureComponent<Props, {}> {
-  onChangeBlockCookies = (event: React.ChangeEvent<any>) => {
+  onChangeBlockCookies = (event: React.ChangeEvent<HTMLSelectElement>) => {
     this.props.blockCookies(event.target.value)
   }
 

components/brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl.tsx → components/brave_extension/extension/brave_extension/components/advancedView/controls/deviceRecognitionControl.tsx

@@ -14,21 +14,20 @@ import {
 } from 'brave-ui/features/shields'
 
 // Group Components
-import StaticList from '../list/static'
+import StaticList from '../overlays/staticOverlay'
 
 // Locale
-import { getLocale } from '../../background/api/localeAPI'
+import { getLocale } from '../../../background/api/localeAPI'
 
 // Helpers
 import {
   maybeDisableResourcesRow,
   getTabIndexValueBasedOnProps,
   blockedResourcesSize
-} from '../../helpers/shieldsUtils'
+} from '../../../helpers/shieldsUtils'
 
 // Types
-import { BlockFingerprinting } from '../../types/actions/shieldsPanelActions'
-import { BlockFPOptions } from '../../types/other/blockTypes'
+import { BlockFPOptions } from '../../../types/other/blockTypes'
 
 interface CommonProps {
   favicon: string
@@ -41,7 +40,7 @@ interface HTTPSUpgradesProps {
   fingerprinting: BlockFPOptions
   fingerprintingBlocked: number
   fingerprintingBlockedResources: Array<string>
-  blockFingerprinting: BlockFingerprinting
+  blockFingerprinting: (event: string) => void
 }
 
 export type Props = CommonProps & HTTPSUpgradesProps
@@ -91,7 +90,7 @@ export default class DeviceRecognitionControl extends React.PureComponent<Props,
     }
   }
 
-  onChangeBlockDeviceRecognition = (event: React.ChangeEvent<any>) => {
+  onChangeBlockDeviceRecognition = (event: React.ChangeEvent<HTMLSelectElement>) => {
     this.props.blockFingerprinting(event.target.value)
   }
 

components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx → components/brave_extension/extension/brave_extension/components/advancedView/controls/httpsUpgradesControl.tsx

@@ -15,10 +15,10 @@ import {
 } from 'brave-ui/features/shields'
 
 // Group Components
-import HTTPSUpgrades from '../list/httpsUpgrades'
+import HTTPSUpgrades from '../overlays/httpsUpgradesOverlay'
 
 // Locale
-import { getLocale } from '../../background/api/localeAPI'
+import { getLocale } from '../../../background/api/localeAPI'
 
 // Helpers
 import {
@@ -27,11 +27,11 @@ import {
   getTabIndexValueBasedOnProps,
   blockedResourcesSize,
   getToggleStateViaEventTarget
-} from '../../helpers/shieldsUtils'
+} from '../../../helpers/shieldsUtils'
 
 // Types
-import { HttpsEverywhereToggled } from '../../types/actions/shieldsPanelActions'
-import { BlockOptions } from '../../types/other/blockTypes'
+import { HttpsEverywhereToggled } from '../../../types/actions/shieldsPanelActions'
+import { BlockOptions } from '../../../types/other/blockTypes'
 
 interface CommonProps {
   isBlockedListOpen: boolean

components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx → components/brave_extension/extension/brave_extension/components/advancedView/controls/scriptsControl.tsx

@@ -16,10 +16,10 @@ import {
 } from 'brave-ui/features/shields'
 
 // Group Components
-import NoScript from '../list/noScript'
+import NoScript from '../overlays/noScriptOverlay'
 
 // Locale
-import { getLocale } from '../../background/api/localeAPI'
+import { getLocale } from '../../../background/api/localeAPI'
 
 // Helpers
 import {
@@ -28,19 +28,19 @@ import {
   maybeBlockResource,
   getTabIndexValueBasedOnProps,
   getToggleStateViaEventTarget
-} from '../../helpers/shieldsUtils'
+} from '../../../helpers/shieldsUtils'
 
 // Types
-import { BlockJSOptions } from '../../types/other/blockTypes'
-import { NoScriptInfo } from '../../types/other/noScriptInfo'
+import { BlockJSOptions } from '../../../types/other/blockTypes'
+import { NoScriptInfo } from '../../../types/other/noScriptInfo'
 import {
   BlockJavaScript,
   AllowScriptOriginsOnce,
   SetScriptBlockedCurrentState,
   SetGroupedScriptsBlockedCurrentState,
   SetAllScriptsBlockedCurrentState,
   SetFinalScriptsBlockedState
-} from '../../types/actions/shieldsPanelActions'
+} from '../../../types/actions/shieldsPanelActions'
 
 interface CommonProps {
   // Global props