add support for shields simple view

address brave/brave-browser#1196

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

@@ -158,5 +158,29 @@
   "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 advannced 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 deviec (often embedded into ads). They want to work out who you are and follow you accross 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 will 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"
   }
 }

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

@@ -126,3 +126,9 @@ export const setAdvancedViewFirstAccess: actions.SetAdvancedViewFirstAccess = (i
     isFirstAccess
   }
 }
+
+export const toggleAdvancedView: actions.ToggleAdvancedView = () => {
+  return {
+    type: types.TOGGLE_ADVANCED_VIEW
+  }
+}

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

@@ -8,7 +8,8 @@ import * as Shields from '../../types/state/shieldsPannelState'
 const keyName = 'shields-persistent-data'
 
 export const defaultPersistentData: Shields.PersistentData = {
-  isFirstAccess: true
+  isFirstAccess: true,
+  advancedView: false
 }
 
 export const loadPersistentData = (): Shields.PersistentData => {

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

@@ -316,10 +316,17 @@ export default function shieldsPanelReducer (
       state = noScriptState.setFinalScriptsBlockedState(state)
       break
     }
+    // Advanced/simple view functionality
     case shieldsPanelTypes.SET_ADVANCED_VIEW_FIRST_ACCESS: {
       state = shieldsPanelState.updatePersistentData(state, { isFirstAccess: action.isFirstAccess })
       break
     }
+    case shieldsPanelTypes.TOGGLE_ADVANCED_VIEW: {
+      state = shieldsPanelState.updatePersistentData(state, {
+        advancedView: !state.persistentData.advancedView
+      })
+      break
+    }
   }
 
   if (!areObjectsEqual(state.persistentData, initialPersistentData)) {

components/brave_extension/extension/brave_extension/components/advancedView/footer.tsx

@@ -4,6 +4,10 @@
 
 import * as React from 'react'
 
+// Types
+
+import { ToggleAdvancedView } from '../../types/actions/shieldsPanelActions'
+
 // Feature-specific components
 import { MainFooter, Link } from 'brave-ui/features/shields'
 
@@ -15,17 +19,22 @@ import { getLocale } from '../../background/api/localeAPI'
 
 export interface Props {
   isBlockedListOpen: boolean
+  toggleAdvancedView: ToggleAdvancedView
 }
 
 export default class Footer extends React.PureComponent<Props, {}> {
   openSettings = () => {
     tabsAPI.createTab({ url: 'chrome://settings/shields' })
       .catch((err) => console.log('[Unable to open a new tab from Shields]', err))
   }
+
   render () {
-    const { isBlockedListOpen } = this.props
+    const { isBlockedListOpen, toggleAdvancedView } = this.props
     return (
       <MainFooter>
+        <Link disabled={isBlockedListOpen} onClick={toggleAdvancedView}>
+          {getLocale('simpleView')}
+        </Link>
         <Link
           id='braveShieldsFooter'
           onClick={this.openSettings}

components/brave_extension/extension/brave_extension/components/advancedView/header.tsx

@@ -24,7 +24,7 @@ import {
   Toggle
 } from 'brave-ui/features/shields'
 
-// Locale
+// Helpers
 import { getLocale } from '../../background/api/localeAPI'
 import {
   blockedResourcesSize,
@@ -39,7 +39,6 @@ import { ShieldsToggled } from '../../types/actions/shieldsPanelActions'
 interface CommonProps {
   enabled: boolean
   favicon: string
-  origin: string
   hostname: string
   isBlockedListOpen: boolean
   shieldsToggled: ShieldsToggled

components/brave_extension/extension/brave_extension/components/advancedView/index.tsx

@@ -15,6 +15,7 @@ import Header from './header'
 import InterfaceControls from './interfaceControls'
 import PrivacyControls from './privacyControls'
 import Footer from './footer'
+import WebCompatWarning from './overlays/webCompatWarningOverlay'
 
 // Types
 import { Tab, PersistentData } from '../../types/state/shieldsPannelState'
@@ -31,7 +32,8 @@ import {
   SetGroupedScriptsBlockedCurrentState,
   SetAllScriptsBlockedCurrentState,
   SetFinalScriptsBlockedState,
-  SetAdvancedViewFirstAccess
+  SetAdvancedViewFirstAccess,
+  ToggleAdvancedView
 } from '../../types/actions/shieldsPanelActions'
 
 interface Props {
@@ -48,6 +50,7 @@ interface Props {
     setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
     setFinalScriptsBlockedState: SetFinalScriptsBlockedState
     setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess
+    toggleAdvancedView: ToggleAdvancedView
   }
   shieldsPanelTabData: Tab
   persistentData: PersistentData
@@ -78,7 +81,7 @@ export default class Shields extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { shieldsPanelTabData, actions } = this.props
+    const { shieldsPanelTabData, persistentData, actions } = this.props
     const { isBlockedListOpen } = this.state
 
     if (!shieldsPanelTabData) {
@@ -87,10 +90,13 @@ export default class Shields extends React.PureComponent<Props, State> {
 
     return (
       <ShieldsPanel data-test-id='brave-shields-panel' style={{ width: '370px' }}>
+        {
+          persistentData.isFirstAccess
+            && <WebCompatWarning setAdvancedViewFirstAccess={actions.setAdvancedViewFirstAccess} />
+        }
         <Header
           enabled={this.isShieldsEnabled}
           favicon={this.favicon}
-          origin={origin}
           hostname={shieldsPanelTabData.hostname}
           isBlockedListOpen={isBlockedListOpen}
           adsBlocked={shieldsPanelTabData.adsBlocked}
@@ -151,7 +157,10 @@ export default class Shields extends React.PureComponent<Props, State> {
             </>
           )
         }
-        <Footer isBlockedListOpen={isBlockedListOpen} />
+        <Footer
+          isBlockedListOpen={isBlockedListOpen}
+          toggleAdvancedView={actions.toggleAdvancedView}
+        />
       </ShieldsPanel>
     )
   }

components/brave_extension/extension/brave_extension/components/advancedView/overlays/webCompatWarningOverlay.tsx

@@ -0,0 +1,53 @@
+/* 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 React from 'react'
+
+// Types
+import { SetAdvancedViewFirstAccess } from '../../../types/actions/shieldsPanelActions'
+
+// Feature-specific components
+import {
+  Overlay,
+  WarningModal,
+  WarningIcon,
+  WarningText,
+  ShieldsButton
+} from 'brave-ui/features/shields'
+
+// Shared components
+import { Card } from 'brave-ui'
+
+// Locale
+import { getLocale } from '../../../background/api/localeAPI'
+
+interface Props {
+  setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess
+}
+
+export default class WebCompatWarning extends React.PureComponent<Props, {}> {
+  setAdvancedViewFirstAccess = () => {
+    this.props.setAdvancedViewFirstAccess(false)
+  }
+  render () {
+    return (
+      <Overlay>
+        <Card>
+          <WarningModal>
+            <WarningIcon />
+            <WarningText>
+              {getLocale('webCompatWarning')}
+            </WarningText>
+            <ShieldsButton
+              level='primary'
+              type='accent'
+              onClick={this.setAdvancedViewFirstAccess}
+              text={getLocale('gotIt')}
+            />
+          </WarningModal>
+        </Card>
+      </Overlay>
+    )
+  }
+}

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

@@ -9,6 +9,7 @@ import 'emptykit.css'
 
 // Components group
 import AdvancedView from './advancedView'
+import SimpleView from './simpleView'
 
 // Types
 import { Tab, PersistentData } from '../types/state/shieldsPannelState'
@@ -24,7 +25,8 @@ import {
   SetGroupedScriptsBlockedCurrentState,
   SetAllScriptsBlockedCurrentState,
   SetFinalScriptsBlockedState,
-  SetAdvancedViewFirstAccess
+  SetAdvancedViewFirstAccess,
+  ToggleAdvancedView
 } from '../types/actions/shieldsPanelActions'
 
 interface Props {
@@ -41,6 +43,7 @@ interface Props {
     setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
     setFinalScriptsBlockedState: SetFinalScriptsBlockedState
     setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess
+    toggleAdvancedView: ToggleAdvancedView
   }
   shieldsPanelTabData: Tab
   persistentData: PersistentData
@@ -53,12 +56,19 @@ export default class Shields extends React.PureComponent<Props, {}> {
       return null
     }
 
-    return (
+    return persistentData.advancedView
+    ? (
       <AdvancedView
         shieldsPanelTabData={shieldsPanelTabData}
         persistentData={persistentData}
         actions={actions}
       />
+    ) : (
+      <SimpleView
+        shieldsPanelTabData={shieldsPanelTabData}
+        persistentData={persistentData}
+        actions={actions}
+      />
     )
   }
 }

components/brave_extension/extension/brave_extension/components/simpleView/footer.tsx

@@ -0,0 +1,40 @@
+/* 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 React from 'react'
+
+// Feature-specific components
+import { MainFooter, Link } from 'brave-ui/features/shields'
+
+// API
+import * as tabsAPI from '../../background/api/tabsAPI'
+
+// Locale
+import { getLocale } from '../../background/api/localeAPI'
+import { ToggleAdvancedView } from '../../types/actions/shieldsPanelActions'
+
+export interface Props {
+  toggleAdvancedView: ToggleAdvancedView
+}
+
+export default class Footer extends React.PureComponent<Props, {}> {
+  openSettings = () => {
+    tabsAPI.createTab({ url: 'chrome://settings/shields' })
+      .catch((err) => console.log('[Unable to open a new tab from Shields]', err))
+  }
+
+  render () {
+    const { toggleAdvancedView } = this.props
+    return (
+      <MainFooter>
+        <Link onClick={toggleAdvancedView}>
+          {getLocale('advancedView')}
+        </Link>
+        <Link id='braveShieldsFooter' onClick={this.openSettings}>
+          {getLocale('changeDefaults')}
+        </Link>
+      </MainFooter>
+    )
+  }
+}