From 1c09c4ab1b86b8bf2d80eae181dc9856507b9715 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Wed, 3 Jul 2019 20:49:11 -0300
Subject: [PATCH] add support for shields simple view address
 https://github.com/brave/brave-browser/issues/1196

---
 .../_locales/en_US/messages.json              |  24 ++++
 .../actions/shieldsPanelActions.ts            |   6 +
 .../background/api/storageAPI.ts              |   3 +-
 .../reducers/shieldsPanelReducer.ts           |   7 +
 .../components/advancedView/footer.tsx        |  11 +-
 .../components/advancedView/header.tsx        |   3 +-
 .../components/advancedView/index.tsx         |  17 ++-
 .../overlays/webCompatWarningOverlay.tsx      |  53 ++++++++
 .../components/braveShields.tsx               |  14 +-
 .../components/simpleView/footer.tsx          |  40 ++++++
 .../components/simpleView/header.tsx          | 122 ++++++++++++++++++
 .../components/simpleView/index.tsx           |  86 ++++++++++++
 .../constants/shieldsPanelTypes.ts            |   1 +
 .../state/shieldsPanelState.ts                |   2 +-
 .../types/actions/shieldsPanelActions.ts      |  11 +-
 .../types/constants/shieldsPanelTypes.ts      |   1 +
 .../types/state/shieldsPannelState.ts         |   3 +-
 .../actions/shieldsPanelActions_test.ts       |   6 +
 .../reducers/cosmeticFilterReducer_test.ts    |   3 +-
 .../reducers/shieldsPanelReducer_test.ts      |   3 +-
 .../components/advancedView/footer_test.tsx   |   1 +
 .../state/shieldsPanelState_test.ts           |  68 +++++++---
 components/test/testData.ts                   |   4 +-
 23 files changed, 451 insertions(+), 38 deletions(-)
 create mode 100644 components/brave_extension/extension/brave_extension/components/advancedView/overlays/webCompatWarningOverlay.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/simpleView/footer.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/simpleView/header.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/simpleView/index.tsx

diff --git a/components/brave_extension/extension/brave_extension/_locales/en_US/messages.json b/components/brave_extension/extension/brave_extension/_locales/en_US/messages.json
index 59c2b2308528..dfa1fb563129 100644
--- a/components/brave_extension/extension/brave_extension/_locales/en_US/messages.json
+++ b/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"
   }
 }
diff --git a/components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts b/components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts
index 938401bd90a3..7a7df7f8bc01 100644
--- a/components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts
+++ b/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
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/background/api/storageAPI.ts b/components/brave_extension/extension/brave_extension/background/api/storageAPI.ts
index 5821814ba8b7..19d84a1c0bfa 100644
--- a/components/brave_extension/extension/brave_extension/background/api/storageAPI.ts
+++ b/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 => {
diff --git a/components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts b/components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts
index b0ea64db78b7..66f3c6cf2048 100644
--- a/components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts
+++ b/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)) {
diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/footer.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/footer.tsx
index e88f57e5b2a9..d9b6620039c7 100644
--- a/components/brave_extension/extension/brave_extension/components/advancedView/footer.tsx
+++ b/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,6 +19,7 @@ import { getLocale } from '../../background/api/localeAPI'
 
 export interface Props {
   isBlockedListOpen: boolean
+  toggleAdvancedView: ToggleAdvancedView
 }
 
 export default class Footer extends React.PureComponent<Props, {}> {
@@ -22,10 +27,14 @@ export default class Footer extends React.PureComponent<Props, {}> {
     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}
diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/header.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/header.tsx
index 5e2d08cdd089..4c1194278b0f 100644
--- a/components/brave_extension/extension/brave_extension/components/advancedView/header.tsx
+++ b/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
diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/index.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/index.tsx
index 22ac614895c7..d932a0b6988c 100644
--- a/components/brave_extension/extension/brave_extension/components/advancedView/index.tsx
+++ b/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>
     )
   }
diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/overlays/webCompatWarningOverlay.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/overlays/webCompatWarningOverlay.tsx
new file mode 100644
index 000000000000..d57f3fb0b0d4
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields.tsx b/components/brave_extension/extension/brave_extension/components/braveShields.tsx
index 0770eb9d2d65..464c8db83f12 100644
--- a/components/brave_extension/extension/brave_extension/components/braveShields.tsx
+++ b/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}
+      />
     )
   }
 }
diff --git a/components/brave_extension/extension/brave_extension/components/simpleView/footer.tsx b/components/brave_extension/extension/brave_extension/components/simpleView/footer.tsx
new file mode 100644
index 000000000000..91539dedbd5c
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/simpleView/header.tsx b/components/brave_extension/extension/brave_extension/components/simpleView/header.tsx
new file mode 100644
index 000000000000..e82cc0fc08dd
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/simpleView/header.tsx
@@ -0,0 +1,122 @@
+/* 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 {
+  ShieldsHeader,
+  MainToggle,
+  TotalBlockedStats,
+  SiteOverview,
+  SiteInfo,
+  MainToggleHeading,
+  MainToggleText,
+  // Link,
+  ToggleStateText,
+  Favicon,
+  SiteInfoText,
+  TotalBlockedStatsNumber,
+  TotalBlockedStatsText,
+  DisabledContentView,
+  ShieldIcon,
+  DisabledContentText,
+  Toggle
+ } from 'brave-ui/features/shields'
+
+// Helpers
+import { getLocale } from '../../background/api/localeAPI'
+import {
+  blockedResourcesSize,
+  getToggleStateViaEventTarget
+} from '../../helpers/shieldsUtils'
+
+// Types
+import { BlockOptions } from '../../types/other/blockTypes'
+import { ShieldsToggled } from '../../types/actions/shieldsPanelActions'
+
+interface CommonProps {
+  enabled: boolean
+  favicon: string
+  hostname: string
+  shieldsToggled: ShieldsToggled
+}
+
+interface BlockedItemsProps {
+  adsBlocked: number
+  trackersBlocked: number
+  httpsUpgrades: number
+  scriptsBlocked: number
+  fingerprintingBlocked: number
+}
+
+export type Props = CommonProps & BlockedItemsProps
+
+export default class Header extends React.PureComponent<Props, {}> {
+  get blockedItemsSize (): number {
+    const { adsBlocked, trackersBlocked, scriptsBlocked, fingerprintingBlocked } = this.props
+    return adsBlocked + trackersBlocked + scriptsBlocked + fingerprintingBlocked
+  }
+
+  get totalBlockedSize (): string {
+    const { httpsUpgrades } = this.props
+    const total = this.blockedItemsSize + httpsUpgrades
+    return blockedResourcesSize(total)
+  }
+
+  onToggleShields = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const shieldsOption: BlockOptions = getToggleStateViaEventTarget(event)
+    this.props.shieldsToggled(shieldsOption)
+  }
+
+  render () {
+    const {
+      enabled,
+      favicon,
+      hostname
+      // onChangeReadOnlyView,
+    } = this.props
+    return (
+      <ShieldsHeader status={enabled ? 'enabled' : 'disabled'}>
+        <MainToggle status={enabled ? 'enabled' : 'disabled'}>
+          <div>
+            <MainToggleHeading>
+              {getLocale('shields')}
+              <ToggleStateText status={enabled ? 'enabled' : 'disabled'}>
+                {enabled ? ` ${getLocale('up')} ` : ` ${getLocale('down')} `}
+              </ToggleStateText>
+              {getLocale('forThisSite')}
+            </MainToggleHeading>
+            {enabled ? <MainToggleText>{getLocale('enabledMessage')}</MainToggleText> : null}
+          </div>
+          <Toggle id='mainToggle' size='large' checked={enabled} onChange={this.onToggleShields} />
+        </MainToggle>
+        <SiteOverview status={enabled ? 'enabled' : 'disabled'}>
+          <SiteInfo>
+            <Favicon src={favicon} />
+            <SiteInfoText>{hostname}</SiteInfoText>
+          </SiteInfo>
+          {
+            enabled
+            ? (
+              <TotalBlockedStats size='large'>
+                <TotalBlockedStatsNumber>{this.totalBlockedSize}</TotalBlockedStatsNumber>
+                <TotalBlockedStatsText>
+                  {`${getLocale('blockedResoucesExplanation')} `}
+                  {/* <Link onClick={onChangeReadOnlyView}>{getLocale('learnMore')}</Link> */}
+                </TotalBlockedStatsText>
+              </TotalBlockedStats>
+            )
+            : (
+              <DisabledContentView>
+                <div><ShieldIcon /></div>
+                <DisabledContentText>{getLocale('disabledMessage')}</DisabledContentText>
+              </DisabledContentView>
+            )
+          }
+        </SiteOverview>
+      </ShieldsHeader>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/simpleView/index.tsx b/components/brave_extension/extension/brave_extension/components/simpleView/index.tsx
new file mode 100644
index 000000000000..4b52dbbdfbfd
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/simpleView/index.tsx
@@ -0,0 +1,86 @@
+/* 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 { ShieldsPanel } from 'brave-ui/features/shields'
+
+// Components group
+import Header from './header'
+import Footer from './footer'
+
+import {
+  ShieldsToggled,
+  BlockAdsTrackers,
+  HttpsEverywhereToggled,
+  BlockJavaScript,
+  BlockFingerprinting,
+  BlockCookies,
+  AllowScriptOriginsOnce,
+  SetScriptBlockedCurrentState,
+  SetGroupedScriptsBlockedCurrentState,
+  SetAllScriptsBlockedCurrentState,
+  SetFinalScriptsBlockedState,
+  SetAdvancedViewFirstAccess,
+  ToggleAdvancedView
+} from '../../types/actions/shieldsPanelActions'
+
+// Helpers
+import { Tab, PersistentData } from '../../types/state/shieldsPannelState'
+import { getFavicon, isShieldsEnabled } from '../../helpers/shieldsUtils'
+
+interface Props {
+  actions: {
+    shieldsToggled: ShieldsToggled
+    blockAdsTrackers: BlockAdsTrackers
+    httpsEverywhereToggled: HttpsEverywhereToggled
+    blockJavaScript: BlockJavaScript
+    blockFingerprinting: BlockFingerprinting
+    blockCookies: BlockCookies
+    allowScriptOriginsOnce: AllowScriptOriginsOnce
+    setScriptBlockedCurrentState: SetScriptBlockedCurrentState
+    setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState
+    setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
+    setFinalScriptsBlockedState: SetFinalScriptsBlockedState
+    setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess
+    toggleAdvancedView: ToggleAdvancedView
+  }
+  shieldsPanelTabData: Tab
+  persistentData: PersistentData
+}
+
+export default class ShieldsSimpleView extends React.PureComponent<Props, {}> {
+  get favicon (): string {
+    const { url } = this.props.shieldsPanelTabData
+    return getFavicon(url)
+  }
+
+  get isShieldsEnabled (): boolean {
+    const { braveShields } = this.props.shieldsPanelTabData
+    return isShieldsEnabled(braveShields)
+  }
+
+  render () {
+    const { shieldsPanelTabData, actions } = this.props
+    return (
+      <ShieldsPanel style={{ width: '370px' }}>
+        <Header
+          enabled={this.isShieldsEnabled}
+          favicon={this.favicon}
+          hostname={shieldsPanelTabData.hostname}
+          adsBlocked={shieldsPanelTabData.adsBlocked}
+          trackersBlocked={shieldsPanelTabData.trackersBlocked}
+          httpsUpgrades={shieldsPanelTabData.httpsRedirected}
+          scriptsBlocked={shieldsPanelTabData.javascriptBlocked}
+          fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
+          shieldsToggled={actions.shieldsToggled}
+        />
+        <Footer
+          toggleAdvancedView={actions.toggleAdvancedView}
+        />
+      </ShieldsPanel>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/constants/shieldsPanelTypes.ts b/components/brave_extension/extension/brave_extension/constants/shieldsPanelTypes.ts
index 735340161706..d1560124762f 100644
--- a/components/brave_extension/extension/brave_extension/constants/shieldsPanelTypes.ts
+++ b/components/brave_extension/extension/brave_extension/constants/shieldsPanelTypes.ts
@@ -17,3 +17,4 @@ export const SET_GROUPED_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE = 'SET_GROUPED_SCRIP
 export const SET_ALL_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE = 'SET_ALL_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE'
 export const SET_FINAL_SCRIPTS_BLOCKED_ONCE_STATE = 'SET_FINAL_SCRIPTS_BLOCKED_ONCE_STATE'
 export const SET_ADVANCED_VIEW_FIRST_ACCESS = 'SET_ADVANCED_VIEW_FIRST_ACCESS'
+export const TOGGLE_ADVANCED_VIEW = 'TOGGLE_ADVANCED_VIEW'
diff --git a/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts b/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts
index 2b345e8707f2..7ffedd1f8f16 100644
--- a/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts
+++ b/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts
@@ -26,7 +26,7 @@ export const isShieldsActive = (state: shieldState.State, tabId: number): boolea
 export const getPersistentData: shieldState.GetPersistentData = (state) => state.persistentData
 
 export const updatePersistentData: shieldState.UpdatePersistentData = (state, persistentData) => {
-  return { ...state, persistentData: { ...persistentData } }
+  return { ...state, persistentData: { ...state.persistentData, ...persistentData } }
 }
 
 export const updateActiveTab: shieldState.UpdateActiveTab = (state, windowId, tabId) => {
diff --git a/components/brave_extension/extension/brave_extension/types/actions/shieldsPanelActions.ts b/components/brave_extension/extension/brave_extension/types/actions/shieldsPanelActions.ts
index d208fd7b9f83..87267a4f34ea 100644
--- a/components/brave_extension/extension/brave_extension/types/actions/shieldsPanelActions.ts
+++ b/components/brave_extension/extension/brave_extension/types/actions/shieldsPanelActions.ts
@@ -157,6 +157,14 @@ export interface SetAdvancedViewFirstAccess {
   (isFirstAccess: boolean): SetAdvancedViewFirstAccessReturn
 }
 
+interface ToggleAdvancedViewReturn {
+  type: types.TOGGLE_ADVANCED_VIEW
+}
+
+export interface ToggleAdvancedView {
+  (): ToggleAdvancedViewReturn
+}
+
 export type shieldPanelActions =
   ShieldsPanelDataUpdatedReturn |
   ShieldsToggledReturn |
@@ -172,4 +180,5 @@ export type shieldPanelActions =
   SetGroupedScriptsBlockedCurrentStateReturn |
   SetAllScriptsBlockedCurrentStateReturn |
   SetFinalScriptsBlockedStateReturn |
-  SetAdvancedViewFirstAccessReturn
+  SetAdvancedViewFirstAccessReturn |
+  ToggleAdvancedViewReturn
diff --git a/components/brave_extension/extension/brave_extension/types/constants/shieldsPanelTypes.ts b/components/brave_extension/extension/brave_extension/types/constants/shieldsPanelTypes.ts
index bb51d5a3e327..4835aea808b8 100644
--- a/components/brave_extension/extension/brave_extension/types/constants/shieldsPanelTypes.ts
+++ b/components/brave_extension/extension/brave_extension/types/constants/shieldsPanelTypes.ts
@@ -19,3 +19,4 @@ export type SET_GROUPED_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE = typeof types.SET_GR
 export type SET_ALL_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE = typeof types.SET_ALL_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE
 export type SET_FINAL_SCRIPTS_BLOCKED_ONCE_STATE = typeof types.SET_FINAL_SCRIPTS_BLOCKED_ONCE_STATE
 export type SET_ADVANCED_VIEW_FIRST_ACCESS = typeof types.SET_ADVANCED_VIEW_FIRST_ACCESS
+export type TOGGLE_ADVANCED_VIEW = typeof types.TOGGLE_ADVANCED_VIEW
diff --git a/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts b/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts
index df0ba2fb9fc6..1d3b95819568 100644
--- a/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts
+++ b/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts
@@ -40,6 +40,7 @@ export interface Windows {
 
 export interface PersistentData {
   isFirstAccess: boolean
+  advancedView: boolean
 }
 
 export interface State {
@@ -62,7 +63,7 @@ export interface GetPersistentData {
 }
 
 export interface UpdatePersistentData {
-  (state: State, persistentData: PersistentData): State
+  (state: State, persistentData: Partial<PersistentData>): State
 }
 
 export interface UpdateActiveTab {
diff --git a/components/test/brave_extension/actions/shieldsPanelActions_test.ts b/components/test/brave_extension/actions/shieldsPanelActions_test.ts
index aa13ce9ed0eb..6cbdb91626dd 100644
--- a/components/test/brave_extension/actions/shieldsPanelActions_test.ts
+++ b/components/test/brave_extension/actions/shieldsPanelActions_test.ts
@@ -145,4 +145,10 @@ describe('shieldsPanelActions', () => {
       isFirstAccess: false
     })
   })
+
+  it('toggleAdvancedView', () => {
+    expect(actions.toggleAdvancedView()).toEqual({
+      type: types.TOGGLE_ADVANCED_VIEW
+    })
+  })
 })
diff --git a/components/test/brave_extension/background/reducers/cosmeticFilterReducer_test.ts b/components/test/brave_extension/background/reducers/cosmeticFilterReducer_test.ts
index 53d57e3dcfee..30ac43fe6971 100644
--- a/components/test/brave_extension/background/reducers/cosmeticFilterReducer_test.ts
+++ b/components/test/brave_extension/background/reducers/cosmeticFilterReducer_test.ts
@@ -323,7 +323,8 @@ describe('cosmeticFilterReducer', () => {
           })).toEqual({
             currentWindowId: -1,
             persistentData: {
-              isFirstAccess: true
+              isFirstAccess: true,
+              advancedView: false
             },
             tabs: {
               [tabId]: {
diff --git a/components/test/brave_extension/background/reducers/shieldsPanelReducer_test.ts b/components/test/brave_extension/background/reducers/shieldsPanelReducer_test.ts
index 94129f2a5644..f72a971feac5 100644
--- a/components/test/brave_extension/background/reducers/shieldsPanelReducer_test.ts
+++ b/components/test/brave_extension/background/reducers/shieldsPanelReducer_test.ts
@@ -325,7 +325,8 @@ describe('braveShieldsPanelReducer', () => {
         })).toEqual({
           currentWindowId: -1,
           persistentData: {
-            isFirstAccess: true
+            isFirstAccess: true,
+            advancedView: false
           },
           tabs: {
             [tabId]: {
diff --git a/components/test/brave_extension/components/advancedView/footer_test.tsx b/components/test/brave_extension/components/advancedView/footer_test.tsx
index 5db7053f5b0d..28387baef071 100644
--- a/components/test/brave_extension/components/advancedView/footer_test.tsx
+++ b/components/test/brave_extension/components/advancedView/footer_test.tsx
@@ -8,6 +8,7 @@ import * as tabsAPI from '../../../../brave_extension/extension/brave_extension/
 import { shallow } from 'enzyme'
 
 const fakeProps: Props = {
+  toggleAdvancedView: () => undefined,
   isBlockedListOpen: false
 }
 
diff --git a/components/test/brave_extension/state/shieldsPanelState_test.ts b/components/test/brave_extension/state/shieldsPanelState_test.ts
index 7675deeb2ba5..246cb7a37bd2 100644
--- a/components/test/brave_extension/state/shieldsPanelState_test.ts
+++ b/components/test/brave_extension/state/shieldsPanelState_test.ts
@@ -11,7 +11,8 @@ import * as shieldsAPI from '../../../brave_extension/extension/brave_extension/
 const state: State = deepFreeze({
   currentWindowId: 1,
   persistentData: {
-    isFirstAccess: true
+    isFirstAccess: true,
+    advancedView: false
   },
   tabs: {
     2: {
@@ -97,11 +98,14 @@ describe('shieldsPanelState test', () => {
   })
   describe('updatePersistentData', () => {
     it('is able to update persistent data', () => {
-      const newPersistentData: PersistentData = {
+      const newPersistentData: Partial<PersistentData> = {
         isFirstAccess: false
       }
       const assertion = shieldsPanelState.updatePersistentData(state, newPersistentData)
-      expect(assertion).toEqual({ ...state, persistentData: newPersistentData })
+      expect(assertion).toEqual({
+        ...state,
+        persistentData: { ...state.persistentData, ...newPersistentData }
+      })
     })
   })
   describe('updateActiveTab', () => {
@@ -109,7 +113,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.updateActiveTab(state, 1, 4)).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -138,7 +143,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.updateActiveTab(state, 2, 4)).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -169,7 +175,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.removeWindowInfo(state, 1)).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -197,7 +204,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.removeWindowInfo(state, 2)).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -227,7 +235,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.updateFocusedWindow(state, 2)).toEqual({
         currentWindowId: 2,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -266,7 +275,8 @@ describe('shieldsPanelState test', () => {
       })).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -310,7 +320,8 @@ describe('shieldsPanelState test', () => {
       const stateWithStats: State = {
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -400,7 +411,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.resetBlockingStats(stateWithStats, this.tabId)).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -487,7 +499,8 @@ describe('shieldsPanelState test', () => {
       const stateWithStats: State = {
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -572,7 +585,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.resetBlockingStats(stateWithStats, this.tabId)).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -661,7 +675,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.updateResourceBlocked(state, this.tabId, 'ads', 'https://test.brave.com')).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -701,7 +716,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.updateResourceBlocked(state, this.tabId, 'trackers', 'https://test.brave.com')).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -741,7 +757,8 @@ describe('shieldsPanelState test', () => {
       expect(shieldsPanelState.updateResourceBlocked(state, this.tabId, 'javascript', 'https://test.brave.com')).toEqual({
         currentWindowId: 1,
         persistentData: {
-          isFirstAccess: true
+          isFirstAccess: true,
+          advancedView: false
         },
         tabs: {
           2: {
@@ -783,7 +800,8 @@ describe('shieldsPanelState test', () => {
     const stateWithAllowedScriptOrigins: State = {
       currentWindowId: 1,
       persistentData: {
-        isFirstAccess: true
+        isFirstAccess: true,
+        advancedView: false
       },
       tabs: {
         2: {
@@ -852,7 +870,8 @@ describe('shieldsPanelState test', () => {
         stateWithAllowedScriptOrigins, this.tabId, 'https://brave.com')).toEqual({
           currentWindowId: 1,
           persistentData: {
-            isFirstAccess: true
+            isFirstAccess: true,
+            advancedView: false
           },
           tabs: {
             2: {
@@ -932,7 +951,8 @@ describe('shieldsPanelState test', () => {
         stateWithAllowedScriptOrigins, this.tabId, 'https://test.brave.com')).toEqual({
           currentWindowId: 1,
           persistentData: {
-            isFirstAccess: true
+            isFirstAccess: true,
+            advancedView: false
           },
           tabs: {
             2: {
@@ -1012,7 +1032,10 @@ describe('shieldsPanelState test', () => {
     it('does not call setBadgeText if tab does not exist', () => {
       const newState: State = deepFreeze({
         currentWindowId: 1,
-        persistentData: { isFirstAccess: true },
+        persistentData: {
+          isFirstAccess: true,
+          advancedView: false
+        },
         tabs: {},
         windows: { 1: 2 }
       })
@@ -1043,7 +1066,10 @@ describe('shieldsPanelState test', () => {
     it('does not call setIcon if tab does not exist', () => {
       const newState: State = deepFreeze({
         currentWindowId: 1,
-        persistentData: { isFirstAccess: true },
+        persistentData: {
+          isFirstAccess: true,
+          advancedView: false
+        },
         tabs: {},
         windows: { 1: 2 }
       })
diff --git a/components/test/testData.ts b/components/test/testData.ts
index cf0c5f0da7b9..734195ec08c1 100644
--- a/components/test/testData.ts
+++ b/components/test/testData.ts
@@ -269,14 +269,14 @@ export const initialState = deepFreeze({
     currentWindowId: -1,
     tabs: {},
     windows: {},
-    persistentData: { isFirstAccess: true }
+    persistentData: { isFirstAccess: true, advancedView: false }
   },
   runtime: {},
   shieldsPanel: {
     currentWindowId: -1,
     tabs: {},
     windows: {},
-    persistentData: { isFirstAccess: true }
+    persistentData: { isFirstAccess: true, advancedView: false }
   }
 })