From bf8da48d2f162073b4b1056f766f4751395cef2b Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Wed, 27 Feb 2019 18:59:37 -0300
Subject: [PATCH 01/16] move shields out of subfolder

---
 .../extension/brave_extension/BUILD.gn           | 16 ++++++++--------
 .../blockedResources/blockedResources.tsx        |  0
 .../blockedResources/scriptsList.tsx             |  0
 .../blockedResources/staticList.tsx              |  0
 .../{braveShields => }/braveShields.tsx          |  0
 .../components/{braveShields => }/footer.tsx     |  0
 .../components/{braveShields => }/header.tsx     |  0
 .../{braveShields => }/interfaceControls.tsx     |  0
 .../{braveShields => }/privacyControls.tsx       |  0
 9 files changed, 8 insertions(+), 8 deletions(-)
 rename components/brave_extension/extension/brave_extension/components/{braveShields => }/blockedResources/blockedResources.tsx (100%)
 rename components/brave_extension/extension/brave_extension/components/{braveShields => }/blockedResources/scriptsList.tsx (100%)
 rename components/brave_extension/extension/brave_extension/components/{braveShields => }/blockedResources/staticList.tsx (100%)
 rename components/brave_extension/extension/brave_extension/components/{braveShields => }/braveShields.tsx (100%)
 rename components/brave_extension/extension/brave_extension/components/{braveShields => }/footer.tsx (100%)
 rename components/brave_extension/extension/brave_extension/components/{braveShields => }/header.tsx (100%)
 rename components/brave_extension/extension/brave_extension/components/{braveShields => }/interfaceControls.tsx (100%)
 rename components/brave_extension/extension/brave_extension/components/{braveShields => }/privacyControls.tsx (100%)

diff --git a/components/brave_extension/extension/brave_extension/BUILD.gn b/components/brave_extension/extension/brave_extension/BUILD.gn
index 571f11ec73cd..5afef7c5f970 100644
--- a/components/brave_extension/extension/brave_extension/BUILD.gn
+++ b/components/brave_extension/extension/brave_extension/BUILD.gn
@@ -40,14 +40,14 @@ transpile_web_ui("brave_extension") {
     "background/reducers/shieldsPanelReducer.ts",
     "background/store.ts",
     "braveShieldsPanel.tsx",
-    "components/braveShields/braveShields.tsx",
-    "components/braveShields/footer.tsx",
-    "components/braveShields/header.tsx",
-    "components/braveShields/interfaceControls.tsx",
-    "components/braveShields/privacyControls.tsx",
-    "components/braveShields/blockedResources/blockedResources.tsx",
-    "components/braveShields/blockedResources/scriptsList.tsx",
-    "components/braveShields/blockedResources/staticList.tsx",
+    "components/braveShields.tsx",
+    "components/footer.tsx",
+    "components/header.tsx",
+    "components/interfaceControls.tsx",
+    "components/privacyControls.tsx",
+    "components/blockedResources/blockedResources.tsx",
+    "components/blockedResources/scriptsList.tsx",
+    "components/blockedResources/staticList.tsx",
     "constants/cosmeticFilterTypes.ts",
     "constants/resourceIdentifiers.ts",
     "constants/runtimeActionTypes.ts",
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields/blockedResources/blockedResources.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx
similarity index 100%
rename from components/brave_extension/extension/brave_extension/components/braveShields/blockedResources/blockedResources.tsx
rename to components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields/blockedResources/scriptsList.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
similarity index 100%
rename from components/brave_extension/extension/brave_extension/components/braveShields/blockedResources/scriptsList.tsx
rename to components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields/blockedResources/staticList.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
similarity index 100%
rename from components/brave_extension/extension/brave_extension/components/braveShields/blockedResources/staticList.tsx
rename to components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields/braveShields.tsx b/components/brave_extension/extension/brave_extension/components/braveShields.tsx
similarity index 100%
rename from components/brave_extension/extension/brave_extension/components/braveShields/braveShields.tsx
rename to components/brave_extension/extension/brave_extension/components/braveShields.tsx
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields/footer.tsx b/components/brave_extension/extension/brave_extension/components/footer.tsx
similarity index 100%
rename from components/brave_extension/extension/brave_extension/components/braveShields/footer.tsx
rename to components/brave_extension/extension/brave_extension/components/footer.tsx
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields/header.tsx b/components/brave_extension/extension/brave_extension/components/header.tsx
similarity index 100%
rename from components/brave_extension/extension/brave_extension/components/braveShields/header.tsx
rename to components/brave_extension/extension/brave_extension/components/header.tsx
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields/interfaceControls.tsx b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
similarity index 100%
rename from components/brave_extension/extension/brave_extension/components/braveShields/interfaceControls.tsx
rename to components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields/privacyControls.tsx b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
similarity index 100%
rename from components/brave_extension/extension/brave_extension/components/braveShields/privacyControls.tsx
rename to components/brave_extension/extension/brave_extension/components/privacyControls.tsx

From 0f97d2b91aeed8d9948faeb0f8e1385568ebd28f Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Wed, 27 Feb 2019 19:43:57 -0300
Subject: [PATCH 02/16] replace getMessage method name with getLocale for
 parity with brave-core

---
 .../background/api/localeAPI.ts               |  2 +-
 .../blockedResources/scriptsList.tsx          | 26 +++++++++----------
 .../blockedResources/staticList.tsx           |  4 +--
 .../brave_extension/components/footer.tsx     |  4 +--
 .../brave_extension/components/header.tsx     | 12 ++++-----
 .../components/interfaceControls.tsx          | 10 +++----
 .../components/privacyControls.tsx            | 22 ++++++++--------
 7 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/components/brave_extension/extension/brave_extension/background/api/localeAPI.ts b/components/brave_extension/extension/brave_extension/background/api/localeAPI.ts
index 6f68f70a50ea..5d2cea906087 100644
--- a/components/brave_extension/extension/brave_extension/background/api/localeAPI.ts
+++ b/components/brave_extension/extension/brave_extension/background/api/localeAPI.ts
@@ -6,7 +6,7 @@
  * Gets the locale message specified in messages.json
  * @param {string} message - The locale string
  */
-export const getMessage = (message: string): string => {
+export const getLocale = (message: string): string => {
   if (chrome.i18n) {
     return chrome.i18n.getMessage(message)
   }
diff --git a/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
index 35a523743676..cfdccbeda370 100644
--- a/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
+++ b/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
@@ -31,7 +31,7 @@ import { BlockJSOptions } from '../../../types/other/blockTypes'
 import { NoScriptInfo } from '../../../types/other/noScriptInfo'
 
 // Utils
-import { getMessage } from '../../../background/api/localeAPI'
+import { getLocale } from '../../../background/api/localeAPI'
 
 interface Props {
   origin: string
@@ -103,13 +103,13 @@ export default class StaticList extends React.PureComponent<Props, State> {
         <ResourcesListGrid hightlighted={true} key={key}>
           {
             list[origin].willBlock
-              ? <ResourcesListBlockedLink>{getMessage('blocked')}</ResourcesListBlockedLink>
-              : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getMessage('allow')}</Link>
+              ? <ResourcesListBlockedLink>{getLocale('blocked')}</ResourcesListBlockedLink>
+              : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('allow')}</Link>
           }
           <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
           {
             list[origin].willBlock
-              ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getMessage('undo')}</Link>
+              ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('undo')}</Link>
               : null
           }
         </ResourcesListGrid>
@@ -126,13 +126,13 @@ export default class StaticList extends React.PureComponent<Props, State> {
         <ResourcesListGrid hightlighted={list[origin].willBlock} key={key}>
           {
             list[origin].willBlock
-              ? <ResourcesListAllowedLink>{getMessage('allowed')}</ResourcesListAllowedLink>
-              : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getMessage('block')}</Link>
+              ? <ResourcesListAllowedLink>{getLocale('allowed')}</ResourcesListAllowedLink>
+              : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('block')}</Link>
           }
           <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
           {
             list[origin].willBlock
-              ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getMessage('undo')}</Link>
+              ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('undo')}</Link>
             : null
           }
         </ResourcesListGrid>
@@ -151,9 +151,9 @@ export default class StaticList extends React.PureComponent<Props, State> {
           <ResourcesSubTitleGrid>
             <BlockedScriptsIcon />
             <ResourcesSubTitle accent='blocked'>
-              {getMessage('blockedScripts')} ({this.blockedListSize})
+              {getLocale('blockedScripts')} ({this.blockedListSize})
             </ResourcesSubTitle>
-            <Link onClick={this.onClickAllowAll}>{getMessage('allowAll')}</Link>
+            <Link onClick={this.onClickAllowAll}>{getLocale('allowAll')}</Link>
           </ResourcesSubTitleGrid>
           {this.renderEnabledList(noScriptInfo)}
 
@@ -161,22 +161,22 @@ export default class StaticList extends React.PureComponent<Props, State> {
           <ResourcesSubTitleGrid>
             <AllowedScriptsIcon />
             <ResourcesSubTitle accent='allowed'>
-              {getMessage('allowedScripts')} ({this.allowedListSize})
+              {getLocale('allowedScripts')} ({this.allowedListSize})
             </ResourcesSubTitle>
-            <Link onClick={this.onClickBlockAll}>{getMessage('blockAll')}</Link>
+            <Link onClick={this.onClickBlockAll}>{getLocale('blockAll')}</Link>
           </ResourcesSubTitleGrid>
           {this.renderDisabledList(noScriptInfo)}
 
         </ResourcesListScroll>
         <ResourcesFooterGrid>
           <ResourcesFooterGridColumnLeft>
-            <Link onClick={onClickDismiss}>{getMessage('cancel')}</Link>
+            <Link onClick={onClickDismiss}>{getLocale('cancel')}</Link>
           </ResourcesFooterGridColumnLeft>
           <ResourcesFooterGridColumnRight>
             <Button
               level='primary'
               type='accent'
-              text={getMessage('applyOnce')}
+              text={getLocale('applyOnce')}
               onClick={this.onClickApplyScriptsOnce}
             />
           </ResourcesFooterGridColumnRight>
diff --git a/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
index 0be3fba795b3..a8c7307ee04c 100644
--- a/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
+++ b/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
@@ -11,7 +11,7 @@ import { ResourcesListText, ResourcesListScroll, ResourcesFooterFlex } from 'bra
 import { Button } from 'brave-ui/components'
 
 // Utils
-import { getMessage } from '../../../background/api/localeAPI'
+import { getLocale } from '../../../background/api/localeAPI'
 
 interface Props {
   list: Array<string>
@@ -27,7 +27,7 @@ export default class StaticList extends React.PureComponent<Props, {}> {
           {list.map((item: string, index: number) => <ResourcesListText title={item} key={index}>{item}</ResourcesListText>)}
         </ResourcesListScroll>
         <ResourcesFooterFlex>
-          <Button level='primary' type='accent' text={getMessage('goBack')} onClick={onClickDismiss} />
+          <Button level='primary' type='accent' text={getLocale('goBack')} onClick={onClickDismiss} />
         </ResourcesFooterFlex>
       </>
     )
diff --git a/components/brave_extension/extension/brave_extension/components/footer.tsx b/components/brave_extension/extension/brave_extension/components/footer.tsx
index 3524e0103fc7..b5c07e9ea167 100644
--- a/components/brave_extension/extension/brave_extension/components/footer.tsx
+++ b/components/brave_extension/extension/brave_extension/components/footer.tsx
@@ -9,7 +9,7 @@ import { MainFooterLinkFlex, LinkIcon } from 'brave-ui/features/shields'
 
 // Utils
 import * as tabsAPI from '../../background/api/tabsAPI'
-import { getMessage } from '../../background/api/localeAPI'
+import { getLocale } from '../../background/api/localeAPI'
 
 export default class ShieldsFooter extends React.PureComponent<{}, {}> {
   openSettings = (event: React.MouseEvent<HTMLAnchorElement>) => {
@@ -20,7 +20,7 @@ export default class ShieldsFooter extends React.PureComponent<{}, {}> {
   render () {
     return (
       <MainFooterLinkFlex id='braveShieldsFooter' href='#' onClick={this.openSettings}>
-        <span>{getMessage('editDefaults')}</span>
+        <span>{getLocale('editDefaults')}</span>
         <LinkIcon />
       </MainFooterLinkFlex>
     )
diff --git a/components/brave_extension/extension/brave_extension/components/header.tsx b/components/brave_extension/extension/brave_extension/components/header.tsx
index fbecb3ab20b4..d8fbab01e0c1 100644
--- a/components/brave_extension/extension/brave_extension/components/header.tsx
+++ b/components/brave_extension/extension/brave_extension/components/header.tsx
@@ -26,7 +26,7 @@ import { BlockOptions } from '../../types/other/blockTypes'
 
 // Utils
 import * as shieldActions from '../../types/actions/shieldsPanelActions'
-import { getMessage } from '../../background/api/localeAPI'
+import { getLocale } from '../../background/api/localeAPI'
 import { isHttpOrHttps } from '../../helpers/urlUtils'
 import { getFavicon, getTotalResourcesBlocked } from '../../helpers/shieldsUtils'
 
@@ -49,7 +49,7 @@ export default class ShieldsHeader extends React.PureComponent<Props, {}> {
     return (
       <MainSiteInfoGrid>
         <Highlight enabled={true} size='large'>{getTotalResourcesBlocked(this.props.tabData)}</Highlight>
-        <Label size='medium'>{getMessage('totalBlocked')}</Label>
+        <Label size='medium'>{getLocale('totalBlocked')}</Label>
       </MainSiteInfoGrid>
     )
   }
@@ -60,7 +60,7 @@ export default class ShieldsHeader extends React.PureComponent<Props, {}> {
         <ShieldIconFlex>
           <ShieldIcon />
         </ShieldIconFlex>
-        <Description enabled={false}>{getMessage('disabledMessage')}</Description>
+        <Description enabled={false}>{getLocale('disabledMessage')}</Description>
       </DisabledTextGrid>
     )
   }
@@ -73,13 +73,13 @@ export default class ShieldsHeader extends React.PureComponent<Props, {}> {
       <Header id='braveShieldsHeader' enabled={enabled}>
         <MainToggleFlex enabled={enabled}>
           <Label size='medium'>
-            {getMessage('shields')} <Highlight enabled={enabled}> {enabled ? getMessage('up') : getMessage('down')}
+            {getLocale('shields')} <Highlight enabled={enabled}> {enabled ? getLocale('up') : getLocale('down')}
             </Highlight>
-            <UnHighlight> {getMessage('forThisSite')}</UnHighlight>
+            <UnHighlight> {getLocale('forThisSite')}</UnHighlight>
           </Label>
           <Toggle id='mainToggle' checked={enabled} onChange={this.onToggleShields} size='large' />
         </MainToggleFlex>
-        {enabled ? <Description enabled={true}>{getMessage('enabledMessage')}</Description> : null}
+        {enabled ? <Description enabled={true}>{getLocale('enabledMessage')}</Description> : null}
         <SiteInfoCard>
           <MainSiteInfoGrid>
             <img src={getFavicon(url)} />
diff --git a/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
index 7e2eb3f1b6a0..c9bfcfef010f 100644
--- a/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
+++ b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
@@ -23,7 +23,7 @@ import StaticList from './blockedResources/staticList'
 import { BlockOptions } from '../../types/other/blockTypes'
 
 // Utils
-import { getMessage } from '../../background/api/localeAPI'
+import { getLocale } from '../../background/api/localeAPI'
 import * as shieldActions from '../../types/actions/shieldsPanelActions'
 import { totalAdsTrackersBlocked, blockedResourcesSize } from '../../helpers/shieldsUtils'
 
@@ -97,7 +97,7 @@ export default class ShieldsInterfaceControls extends React.PureComponent<Props,
       <BlockedResources
         url={url}
         hostname={hostname}
-        title={getMessage('blockAds')}
+        title={getLocale('blockAds')}
         onToggle={onToggle}
         stats={this.totalAdsTrackersBlocked}
       >
@@ -112,7 +112,7 @@ export default class ShieldsInterfaceControls extends React.PureComponent<Props,
       <BlockedResources
         url={url}
         hostname={hostname}
-        title={getMessage('connectionsEncrypted')}
+        title={getLocale('connectionsEncrypted')}
         onToggle={onToggle}
         stats={httpsRedirected}
       >
@@ -139,7 +139,7 @@ export default class ShieldsInterfaceControls extends React.PureComponent<Props,
         <ToggleGrid>
           <EmptyButton disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}><ShowMoreIcon /></EmptyButton>
           <StatFlex disabled={this.totalAdsTrackersBlocked === 0} id='blockAdsStat' onClick={this.onToggleTotalAdsTrackersBlocked}>{blockedResourcesSize(this.totalAdsTrackersBlocked)}</StatFlex>
-          <ResourcesSwitchLabel disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}>{getMessage('blockAds')}</ResourcesSwitchLabel>
+          <ResourcesSwitchLabel disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}>{getLocale('blockAds')}</ResourcesSwitchLabel>
           <ToggleFlex><Toggle id='blockAds' checked={blockAdsOption} onChange={this.onChangeBlockAds} /></ToggleFlex>
         </ToggleGrid>
         {
@@ -151,7 +151,7 @@ export default class ShieldsInterfaceControls extends React.PureComponent<Props,
         <ToggleGrid>
           <EmptyButton disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}><ShowMoreIcon /></EmptyButton>
           <StatFlex disabled={httpsRedirected === 0} id='connectionsEncryptedStat' onClick={this.onToggleConnectionsEncrypted}>{blockedResourcesSize(httpsRedirected)}</StatFlex>
-          <ResourcesSwitchLabel disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}>{getMessage('connectionsEncrypted')}</ResourcesSwitchLabel>
+          <ResourcesSwitchLabel disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}>{getLocale('connectionsEncrypted')}</ResourcesSwitchLabel>
           <ToggleFlex><Toggle id='connectionsEncrypted' checked={connectionsEncrypted} onChange={this.onChangeConnectionsEncrypted} /></ToggleFlex>
         </ToggleGrid>
         {
diff --git a/components/brave_extension/extension/brave_extension/components/privacyControls.tsx b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
index 0131507d0e18..4f13107f1d61 100644
--- a/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
+++ b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
@@ -25,7 +25,7 @@ import { NoScriptInfo } from '../../types/other/noScriptInfo'
 
 // Utils
 import * as shieldActions from '../../types/actions/shieldsPanelActions'
-import { getMessage } from '../../background/api/localeAPI'
+import { getLocale } from '../../background/api/localeAPI'
 import { blockedResourcesSize } from '../../helpers/shieldsUtils'
 
 export interface Props {
@@ -109,7 +109,7 @@ export default class PrivacyControls extends React.PureComponent<Props, State> {
         dynamic={true}
         url={url}
         hostname={hostname}
-        title={getMessage('scriptsOnThisSite')}
+        title={getLocale('scriptsOnThisSite')}
         onToggle={this.onToggleScriptsBlocked}
         stats={undefined}
       >
@@ -133,7 +133,7 @@ export default class PrivacyControls extends React.PureComponent<Props, State> {
       <BlockedResources
         url={url}
         hostname={hostname}
-        title={getMessage('deviceRecognitionAttempts')}
+        title={getLocale('deviceRecognitionAttempts')}
         onToggle={this.onToggleDeviceRecognition}
         stats={fingerprintingBlocked}
       >
@@ -165,9 +165,9 @@ export default class PrivacyControls extends React.PureComponent<Props, State> {
           <EmptyButton disabled={true} />
           <StatFlex disabled={true} />
           <SelectBox id='blockCookies' value={cookies} onChange={this.onChangeBlockCookies}>
-            <option value='block_third_party'>{getMessage('block3partyCookies')}</option>
-            <option value='block'>{getMessage('blockAllCookies')}</option>
-            <option value='allow'>{getMessage('allowAllCookies')}</option>
+            <option value='block_third_party'>{getLocale('block3partyCookies')}</option>
+            <option value='block'>{getLocale('blockAllCookies')}</option>
+            <option value='allow'>{getLocale('allowAllCookies')}</option>
           </SelectBox>
           <ClickableEmptySpace />
         </SelectGrid>
@@ -177,8 +177,8 @@ export default class PrivacyControls extends React.PureComponent<Props, State> {
           <EmptyButton disabled={javascriptBlocked === 0} onClick={this.onToggleScriptsBlocked}><ShowMoreIcon /></EmptyButton>
           <StatFlex disabled={javascriptBlocked === 0} id='blockScriptsStat' onClick={this.onToggleScriptsBlocked}>{blockedResourcesSize(javascriptBlocked)}</StatFlex>
           <SelectBox id='blockScripts' value={javascript} onChange={this.onChangeBlockScripts}>
-            <option value='block'>{getMessage('blockAllScriptsOrigins')}</option>
-            <option value='allow'>{getMessage('allowAllScripts')}</option>
+            <option value='block'>{getLocale('blockAllScriptsOrigins')}</option>
+            <option value='allow'>{getLocale('allowAllScripts')}</option>
           </SelectBox>
           <ClickableEmptySpace disabled={javascriptBlocked === 0} onClick={this.onToggleScriptsBlocked} />
           {
@@ -193,9 +193,9 @@ export default class PrivacyControls extends React.PureComponent<Props, State> {
           <EmptyButton disabled={fingerprintingBlocked === 0} onClick={this.onToggleDeviceRecognition}><ShowMoreIcon /></EmptyButton>
           <StatFlex disabled={fingerprintingBlocked === 0} id='blockFingerprintingStat' onClick={this.onToggleDeviceRecognition}>{blockedResourcesSize(fingerprintingBlocked)}</StatFlex>
           <SelectBox id='blockFingerprinting' value={fingerprinting} onChange={this.onChangeBlockDeviceRecognition}>
-            <option value='block_third_party'>{getMessage('block3partyFingerprinting')}</option>
-            <option value='block'>{getMessage('blockAllFingerprinting')}</option>
-            <option value='allow'>{getMessage('allowAllFingerprinting')}</option>
+            <option value='block_third_party'>{getLocale('block3partyFingerprinting')}</option>
+            <option value='block'>{getLocale('blockAllFingerprinting')}</option>
+            <option value='allow'>{getLocale('allowAllFingerprinting')}</option>
           </SelectBox>
           <ClickableEmptySpace disabled={fingerprintingBlocked === 0} onClick={this.onToggleDeviceRecognition} />
           {

From c34e21b98abdb0e4b22382ad26e87f03ae308b80 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Mon, 4 Mar 2019 19:28:23 -0300
Subject: [PATCH 03/16]  migrate all new shields components to brave-core

---
 .../extension/brave_extension/BUILD.gn        |  12 +
 .../_locales/en_US/messages.json              | 146 +++---
 .../actions/shieldsPanelActions.ts            |   3 +-
 .../reducers/shieldsPanelReducer.ts           |   2 +-
 .../brave_extension/braveShieldsPanel.html    |   2 +-
 .../blockedResources/blockedResources.tsx     | 110 ++---
 .../blockedResources/scriptsList.tsx          | 374 ++++++++--------
 .../blockedResources/staticList.tsx           |  58 +--
 .../components/braveShields.tsx               | 160 +++----
 .../components/braveShields2.tsx              | 146 ++++++
 .../controls/adsTrackersControl.tsx           | 155 +++++++
 .../components/controls/cookiesControl.tsx    |  47 ++
 .../controls/deviceRecognitionControl.tsx     | 145 ++++++
 .../controls/httpsUpgradesControl.tsx         | 142 ++++++
 .../components/controls/scriptsControl.tsx    | 165 +++++++
 .../brave_extension/components/footer.tsx     |  48 +-
 .../brave_extension/components/footer2.tsx    |  39 ++
 .../brave_extension/components/header.tsx     | 166 +++----
 .../brave_extension/components/header2.tsx    | 123 +++++
 .../components/interfaceControls.tsx          | 330 +++++++-------
 .../components/interfaceControls2.tsx         |  70 +++
 .../components/list/dynamic.tsx               | 135 ++++++
 .../components/list/static.tsx                |  67 +++
 .../components/privacyControls.tsx            | 420 +++++++++---------
 .../components/privacyControls2.tsx           |  89 ++++
 .../containers/braveShields.tsx               |   2 +-
 .../brave_extension/helpers/shieldsUtils.ts   |  50 +++
 .../state/shieldsPanelState.ts                |   5 +-
 .../types/actions/shieldsPanelActions.ts      |   3 +-
 .../types/state/shieldsPannelState.ts         |   2 +-
 30 files changed, 2284 insertions(+), 932 deletions(-)
 create mode 100644 components/brave_extension/extension/brave_extension/components/braveShields2.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/controls/cookiesControl.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/footer2.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/header2.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/interfaceControls2.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/list/dynamic.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/list/static.tsx
 create mode 100644 components/brave_extension/extension/brave_extension/components/privacyControls2.tsx

diff --git a/components/brave_extension/extension/brave_extension/BUILD.gn b/components/brave_extension/extension/brave_extension/BUILD.gn
index 5afef7c5f970..dd6833266dee 100644
--- a/components/brave_extension/extension/brave_extension/BUILD.gn
+++ b/components/brave_extension/extension/brave_extension/BUILD.gn
@@ -41,13 +41,25 @@ transpile_web_ui("brave_extension") {
     "background/store.ts",
     "braveShieldsPanel.tsx",
     "components/braveShields.tsx",
+    "components/braveShields2.tsx",
     "components/footer.tsx",
+    "components/footer2.tsx",
     "components/header.tsx",
+    "components/header2.tsx",
     "components/interfaceControls.tsx",
+    "components/interfaceControls2.tsx",
     "components/privacyControls.tsx",
+    "components/privacyControls2.tsx",
     "components/blockedResources/blockedResources.tsx",
     "components/blockedResources/scriptsList.tsx",
     "components/blockedResources/staticList.tsx",
+    "components/controls/adsTrackersControl.tsx",
+    "components/controls/cookiesControl.tsx",
+    "components/controls/deviceRecognitionControl.tsx",
+    "components/controls/httpsUpgradesControl.tsx",
+    "components/controls/scriptsControl.tsx",
+    "components/list/dynamic.tsx",
+    "components/list/static.tsx",
     "constants/cosmeticFilterTypes.ts",
     "constants/resourceIdentifiers.ts",
     "constants/runtimeActionTypes.ts",
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 eb925256842c..e1be70d452f8 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
@@ -15,10 +15,6 @@
     "message": "down",
     "description": "Message for when shields is disabled"
   },
-  "totalBlocked": {
-    "message": "Total blocked",
-    "description": "Message showing the amount of all blocked resources"
-  },
   "forThisSite": {
     "message": "for this site",
     "description": "Partial string for the phrase `shields is up *for this site*`"
@@ -31,69 +27,65 @@
     "message": "You’re browsing this site without any privacy and security protections.",
     "description": "Message telling the user that shields are disabled"
   },
-  "blockAds": {
-    "message": "Ads and trackers blocked",
-    "description": "Message indicating the number of ads and trackers blocked"
+  "itemsBlocked": {
+    "message": "Items blocked",
+    "description": "Message for the main blocked resources text when there is more than one ad/track/script blocked (plural)"
   },
-  "blockPopups": {
-    "message": "Pop-ups blocked",
-    "description": "Message indicating the number of pop-ups blocked"
+  "itemBlocked": {
+    "message": "Item blocked",
+    "description": "Message for the main blocked resources text when there is one ad/track/script blocked (singular)"
   },
-  "blockImages": {
-    "message": "Images blocked",
-    "description": "Message indicating the number of images blocked"
+  "and": {
+    "message": "and",
+    "description": "Message for the `and` conjunction. Used to connect grammatically the `item blocked and connection upgrades` and its variant phrases"
   },
-  "block3partyCookies": {
-    "message": "3rd-party cookies blocked",
-    "description": "Message for the select option about cookies blocked, blocking 3rd party cookies"
+  "connectionsUpgraded": {
+    "message": "connections upgraded",
+    "description": "Message for the main blocked resources text when there is at least one ad/track/script blocked and more than one connection upgrade (plural)"
   },
-  "allowAllCookies": {
-    "message": "All cookies allowed",
-    "description": "Message for the select option about cookies blocked, allowing all cookies"
+  "connectionUpgraded": {
+    "message": "connection upgraded",
+    "description": "Message for the main blocked resources text when there is at least one ad/track/script blocked and one connection upgrade (singular)"
   },
-  "blockAllCookies": {
-    "message": "Cookies blocked",
-    "description": "Message for the select option about cookies blocked, blocking all cookies"
+  "thirdPartyTrackersBlocked": {
+    "message": "3rd-party trackers blocked",
+    "description": "Message for the scripts blocked row label"
   },
-  "blockSomeScripts": {
-    "message": "Some scripts blocked",
-    "description": "Message for the select option about scripts blocked, blocking 3rd party scripts"
+  "connectionsUpgradedHTTPS": {
+    "message": "Connections upgraded to HTTPS",
+    "description": "Message for the connections upgraded row label and for the main blocked resources text when there is more than one connection upgraded (plural) and no other ads/trackers blocked"
   },
-  "allowAllScripts": {
-    "message": "All scripts allowed",
-    "description": "Message for the select option about scripts blocked, allowing all scripts"
+  "connectionUpgradedHTTPS": {
+    "message": "Connection upgraded to HTTPS",
+    "description": "Message for the main blocked resources text when there is one connection upgraded (singular) and no other ads/trackers blocked"
   },
-  "blockAllScriptsOrigins": {
+  "scriptsBlocked": {
     "message": "Scripts blocked",
-    "description": "Message for the select option about scripts blocked, blocking all scripts"
-  },
-  "block3partyFingerprinting": {
-    "message": "3rd-party device recognition blocked",
-    "description": "Message for the select option about fingerprinting blocked, blocking 3rd party fingerprinting"
+    "description": "Message for the scripts blocked row label"
   },
-  "allowAllFingerprinting": {
-    "message": "All device recognition allowed",
-    "description": "Message for the select option about fingerprinting blocked, allowing all fingerprinting"
+  "thirdPartyCookiesBlocked": {
+    "message": "3rd-party cookies blocked",
+    "description": "Message for the option in the cookies select field to block all 3rd party cookies"
   },
-  "blockAllFingerprinting": {
-    "message": "Device recognition blocked",
-    "description": "Message for the select option about fingerprinting blocked, blocking all fingerprinting"
+  "allCookiesBlocked": {
+    "message": "Cookies blocked",
+    "description": "Message for the option in the cookies select field to block all cookies"
   },
-  "blockPishing": {
-    "message": "Phishing/malware attempts blocked",
-    "description": "Message indicating the number of phishing/malware blocked"
+  "allCookiesAllowed": {
+    "message": "All cookies allowed",
+    "description": "Message for the option in the cookies select field to allow all cookies"
   },
-  "connectionsEncrypted": {
-    "message": "Connections encrypted",
-    "description": "Message indicating the number of connections encrypted"
+  "thirdPartyFingerprintingBlocked": {
+    "message": "3rd-party device recognition blocked",
+    "description": "Message for the option in the device recognition select field to block all 3rd party recognition attempts"
   },
-  "editDefaults": {
-    "message": "Global shield defaults",
-    "description": "Message linking shields to the global shield settings"
+  "allFingerprintingBlocked": {
+    "message": "Device recognition blocked",
+    "description": "Message for the option in the device recognition select field to block all device recognition attempts"
   },
-  "cookiesOnThisSite": {
-    "message": "Cookies on this site",
-    "description": "Message for the cookie resources blocked panel"
+  "allFingerprintingAllowed": {
+    "message": "All device recognition allowed",
+    "description": "Message for the option in the device recognition select field to allow all device recognition attempts"
   },
   "deviceRecognitionAttempts": {
     "message": "Device recognition attempts",
@@ -111,49 +103,21 @@
     "message": "Allowed scripts",
     "description": "Message for the script resources allowed"
   },
-  "allowAll": {
-    "message": "Allow all",
-    "description": "Message for the resources blocked *allow all* option"
-  },
-  "allow": {
-    "message": "Allow",
-    "description": "Message for the resources blocked *allow* option"
-  },
-  "allowed": {
-    "message": "Allowed",
-    "description": "Message for the resources blocked *allowed* option"
-  },
   "blockAll": {
     "message": "Block all",
     "description": "Message for the resources blocked *block all* option"
   },
+  "allowAll": {
+    "message": "Allow all",
+    "description": "Message for the resources blocked *allow all* option"
+  },
   "block": {
     "message": "Block",
     "description": "Message for the resources blocked *block* option"
   },
-  "blocked": {
-    "message": "Blocked",
-    "description": "Message for the resources blocked *blocked* option"
-  },
-  "apply": {
-    "message": "Apply",
-    "description": "Message for the button inside dynamic list of resources blocked"
-  },
-  "applyOnce": {
-    "message": "Apply once",
-    "description": "Message for the dropdown option inside dynamic list of resources blocked to *apply once*"
-  },
-  "applyUntilRestart": {
-    "message": "Apply until restart",
-    "description": "Message for the dropdown option inside dynamic list of resources blocked to *apply until restart*"
-  },
-  "alwaysApply": {
-    "message": "Always apply",
-    "description": "Message for the dropdown option inside dynamic list of resources blocked to *always apply*"
-  },
-  "undo": {
-    "message": "Undo",
-    "description": "Message for the resources blocked *undo* option"
+  "allow": {
+    "message": "Allow",
+    "description": "Message for the resources blocked *allow* option"
   },
   "cancel": {
     "message": "Cancel",
@@ -162,5 +126,13 @@
   "goBack": {
     "message": "Go back",
     "description": "Message for the button inside the static list of resources blocked to go back from the current screen"
+  },
+  "applyOnce": {
+    "message": "Apply once",
+    "description": "Message for action in dynamic list of resources blocked to *apply once*"
+  },
+  "changeDefaults": {
+    "message": "Change global shield defaults",
+    "description": "Message for the button action linking to the settings page"
   }
 }
diff --git a/components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts b/components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts
index 99546feef9b2..c0305bce38f7 100644
--- a/components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts
+++ b/components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts
@@ -82,10 +82,9 @@ export const changeNoScriptSettings: actions.ChangeNoScriptSettings = (origin) =
   }
 }
 
-export const changeAllNoScriptSettings: actions.ChangeAllNoScriptSettings = (origin, shouldBlock) => {
+export const changeAllNoScriptSettings: actions.ChangeAllNoScriptSettings = (shouldBlock) => {
   return {
     type: types.CHANGE_ALL_NO_SCRIPT_SETTINGS,
-    origin,
     shouldBlock
   }
 }
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 e28ff36373c3..76f13ba97317 100644
--- a/components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts
+++ b/components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts
@@ -305,7 +305,7 @@ export default function shieldsPanelReducer (state: State = { tabs: {}, windows:
     }
     case shieldsPanelTypes.CHANGE_ALL_NO_SCRIPT_SETTINGS: {
       const tabId: number = shieldsPanelState.getActiveTabId(state)
-      state = shieldsPanelState.changeAllNoScriptSettings(state, tabId, action.origin, action.shouldBlock)
+      state = shieldsPanelState.changeAllNoScriptSettings(state, tabId, action.shouldBlock)
       break
     }
   }
diff --git a/components/brave_extension/extension/brave_extension/braveShieldsPanel.html b/components/brave_extension/extension/brave_extension/braveShieldsPanel.html
index 1678474edb85..75beeec7aeaf 100644
--- a/components/brave_extension/extension/brave_extension/braveShieldsPanel.html
+++ b/components/brave_extension/extension/brave_extension/braveShieldsPanel.html
@@ -7,7 +7,7 @@
         <title>Brave Shields Panel</title>
         <style>
             body {
-              width: 330px;
+              width: 370px;
             }
         </style>
     </head>
diff --git a/components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx
index fbbeaa912aa9..aa02e471cd03 100644
--- a/components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx
+++ b/components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx
@@ -1,61 +1,61 @@
-/* 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/. */
+// /* 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'
+// import * as React from 'react'
 
-// Feature-specific components
-import {
-  Label,
-  ResourcesGrid,
-  ResourcesSiteInfoGrid,
-  CloseButton,
-  CloseIcon,
-  EmptyButton,
-  StatFlex,
-  ShowLessIcon,
-  ResourcesStatusTitle,
-  ResourcesSiteInfoFlex,
-  ResourcesStatusGrid
-} from 'brave-ui/features/shields'
+// // Feature-specific components
+// import {
+//   Label,
+//   ResourcesGrid,
+//   ResourcesSiteInfoGrid,
+//   CloseButton,
+//   CloseIcon,
+//   EmptyButton,
+//   StatFlex,
+//   ShowLessIcon,
+//   ResourcesStatusTitle,
+//   ResourcesSiteInfoFlex,
+//   ResourcesStatusGrid
+// } from 'brave-ui/features/shields'
 
-// Utils
-import { getFavicon } from '../../../helpers/shieldsUtils'
+// // Utils
+// import { getFavicon } from '../../helpers/shieldsUtils'
 
-interface Props {
-  hostname: string
-  stats: number | undefined
-  title: string
-  url: string
-  onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void
-  dynamic?: boolean
-}
+// interface Props {
+//   hostname: string
+//   stats: number | undefined
+//   title: string
+//   url: string
+//   onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void
+//   dynamic?: boolean
+// }
 
-export default class BlockedResources extends React.PureComponent<Props, {}> {
-  renderHeader = (stats: number | undefined, title: string, onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void) => {
-    return (
-      <ResourcesStatusGrid withStats={stats !== undefined} onClick={onToggle}>
-        <EmptyButton><ShowLessIcon /></EmptyButton>
-        {stats !== undefined ? <StatFlex>{stats}</StatFlex> : null}
-        <ResourcesStatusTitle>{title}</ResourcesStatusTitle>
-      </ResourcesStatusGrid>
-    )
-  }
+// export default class BlockedResources extends React.PureComponent<Props, {}> {
+//   renderHeader = (stats: number | undefined, title: string, onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void) => {
+//     return (
+//       <ResourcesStatusGrid withStats={stats !== undefined} onClick={onToggle}>
+//         <EmptyButton><ShowLessIcon /></EmptyButton>
+//         {stats !== undefined ? <StatFlex>{stats}</StatFlex> : null}
+//         <ResourcesStatusTitle>{title}</ResourcesStatusTitle>
+//       </ResourcesStatusGrid>
+//     )
+//   }
 
-  render () {
-    const { stats, hostname, title, url, onToggle, children } = this.props
-    return (
-      <ResourcesGrid>
-        <ResourcesSiteInfoFlex>
-          <ResourcesSiteInfoGrid>
-            <img src={getFavicon(url)} />
-            <Label size='large'>{hostname}</Label>
-          </ResourcesSiteInfoGrid>
-          <CloseButton onClick={onToggle}><CloseIcon /></CloseButton>
-        </ResourcesSiteInfoFlex>
-        {this.renderHeader(stats, title, onToggle)}
-        {children}
-      </ResourcesGrid>
-    )
-  }
-}
+//   render () {
+//     const { stats, hostname, title, url, onToggle, children } = this.props
+//     return (
+//       <ResourcesGrid>
+//         <ResourcesSiteInfoFlex>
+//           <ResourcesSiteInfoGrid>
+//             <img src={getFavicon(url)} />
+//             <Label size='large'>{hostname}</Label>
+//           </ResourcesSiteInfoGrid>
+//           <CloseButton onClick={onToggle}><CloseIcon /></CloseButton>
+//         </ResourcesSiteInfoFlex>
+//         {this.renderHeader(stats, title, onToggle)}
+//         {children}
+//       </ResourcesGrid>
+//     )
+//   }
+// }
diff --git a/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
index cfdccbeda370..2bb2dd524f73 100644
--- a/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
+++ b/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
@@ -1,187 +1,187 @@
-/* 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 {
-  AllowedScriptsIcon,
-  BlockedScriptsIcon,
-  DismissOverlay,
-  ResourcesListScroll,
-  ResourcesSubTitle,
-  ResourcesFooterGrid,
-  ResourcesFooterGridColumnLeft,
-  ResourcesFooterGridColumnRight,
-  ResourcesListItem,
-  Link,
-  ResourcesListAllowedLink,
-  ResourcesListBlockedLink,
-  ResourcesSubTitleGrid,
-  ResourcesListGrid
-} from 'brave-ui/features/shields'
-
-// Shared components
-import { Button } from 'brave-ui/components'
-
-// Types
-import * as shieldActions from '../../../types/actions/shieldsPanelActions'
-import { BlockJSOptions } from '../../../types/other/blockTypes'
-import { NoScriptInfo } from '../../../types/other/noScriptInfo'
-
-// Utils
-import { getLocale } from '../../../background/api/localeAPI'
-
-interface Props {
-  origin: string
-  noScriptInfo: NoScriptInfo
-  onClickDismiss: () => void
-  javascript: BlockJSOptions
-  blockJavaScript: shieldActions.BlockJavaScript
-  allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
-  changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
-  changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
-}
-
-interface State {
-  showApplyOptions: boolean
-}
-
-export default class StaticList extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = { showApplyOptions: false }
-  }
-
-  get blockedListSize () {
-    const { noScriptInfo } = this.props
-    return Object.keys(noScriptInfo)
-      .filter((origin: string) => noScriptInfo[origin].willBlock === true).length
-  }
-
-  get allowedListSize () {
-    const { noScriptInfo } = this.props
-    return Object.keys(noScriptInfo)
-      .filter((origin: string) => noScriptInfo[origin].willBlock === false).length
-  }
-
-  onClickOutsideBounds = () => {
-    this.setState({ showApplyOptions: false })
-  }
-
-  onClickToggleBlockOrAllowScript = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault()
-    this.props.changeNoScriptSettings(event.currentTarget.id)
-  }
-
-  onClickBlockAll = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault()
-    const { origin } = this.props
-    this.props.changeAllNoScriptSettings(origin, true)
-  }
-
-  onClickAllowAll = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault()
-    const { origin } = this.props
-    this.props.changeAllNoScriptSettings(origin, false)
-    this.setState({ showApplyOptions: false })
-  }
-
-  onClickApplyScriptsOnce = () => {
-    const { noScriptInfo } = this.props
-    const allOrigins = Object.keys(noScriptInfo)
-    this.props.allowScriptOriginsOnce(allOrigins.filter(key => noScriptInfo[key].willBlock === false))
-  }
-
-  renderEnabledList = (list: NoScriptInfo) => {
-    return Object.keys(list).map((origin: string, key: number) => {
-      if (list[origin].willBlock === false) {
-        return null
-      }
-      return (
-        <ResourcesListGrid hightlighted={true} key={key}>
-          {
-            list[origin].willBlock
-              ? <ResourcesListBlockedLink>{getLocale('blocked')}</ResourcesListBlockedLink>
-              : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('allow')}</Link>
-          }
-          <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
-          {
-            list[origin].willBlock
-              ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('undo')}</Link>
-              : null
-          }
-        </ResourcesListGrid>
-      )
-    })
-  }
-
-  renderDisabledList = (list: NoScriptInfo) => {
-    return Object.keys(list).map((origin: string, key: number) => {
-      if (list[origin].willBlock === true) {
-        return null
-      }
-      return (
-        <ResourcesListGrid hightlighted={list[origin].willBlock} key={key}>
-          {
-            list[origin].willBlock
-              ? <ResourcesListAllowedLink>{getLocale('allowed')}</ResourcesListAllowedLink>
-              : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('block')}</Link>
-          }
-          <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
-          {
-            list[origin].willBlock
-              ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('undo')}</Link>
-            : null
-          }
-        </ResourcesListGrid>
-      )
-    })
-  }
-
-  render () {
-    const { showApplyOptions } = this.state
-    const { noScriptInfo, onClickDismiss } = this.props
-    return (
-      <>
-        <ResourcesListScroll>
-          {showApplyOptions ? <DismissOverlay onClick={this.onClickOutsideBounds} /> : null}
-          {/* blocked scripts */}
-          <ResourcesSubTitleGrid>
-            <BlockedScriptsIcon />
-            <ResourcesSubTitle accent='blocked'>
-              {getLocale('blockedScripts')} ({this.blockedListSize})
-            </ResourcesSubTitle>
-            <Link onClick={this.onClickAllowAll}>{getLocale('allowAll')}</Link>
-          </ResourcesSubTitleGrid>
-          {this.renderEnabledList(noScriptInfo)}
-
-          {/* allowed scripts */}
-          <ResourcesSubTitleGrid>
-            <AllowedScriptsIcon />
-            <ResourcesSubTitle accent='allowed'>
-              {getLocale('allowedScripts')} ({this.allowedListSize})
-            </ResourcesSubTitle>
-            <Link onClick={this.onClickBlockAll}>{getLocale('blockAll')}</Link>
-          </ResourcesSubTitleGrid>
-          {this.renderDisabledList(noScriptInfo)}
-
-        </ResourcesListScroll>
-        <ResourcesFooterGrid>
-          <ResourcesFooterGridColumnLeft>
-            <Link onClick={onClickDismiss}>{getLocale('cancel')}</Link>
-          </ResourcesFooterGridColumnLeft>
-          <ResourcesFooterGridColumnRight>
-            <Button
-              level='primary'
-              type='accent'
-              text={getLocale('applyOnce')}
-              onClick={this.onClickApplyScriptsOnce}
-            />
-          </ResourcesFooterGridColumnRight>
-        </ResourcesFooterGrid>
-      </>
-    )
-  }
-}
+// /* 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 {
+//   AllowedScriptsIcon,
+//   BlockedScriptsIcon,
+//   DismissOverlay,
+//   ResourcesListScroll,
+//   ResourcesSubTitle,
+//   ResourcesFooterGrid,
+//   ResourcesFooterGridColumnLeft,
+//   ResourcesFooterGridColumnRight,
+//   ResourcesListItem,
+//   Link,
+//   ResourcesListAllowedLink,
+//   ResourcesListBlockedLink,
+//   ResourcesSubTitleGrid,
+//   ResourcesListGrid
+// } from 'brave-ui/features/shields'
+
+// // Shared components
+// import { Button } from 'brave-ui/components'
+
+// // Types
+// import * as shieldActions from '../../types/actions/shieldsPanelActions'
+// import { BlockJSOptions } from '../../types/other/blockTypes'
+// import { NoScriptInfo } from '../../types/other/noScriptInfo'
+
+// // Utils
+// import { getLocale } from '../../background/api/localeAPI'
+
+// interface Props {
+//   origin: string
+//   noScriptInfo: NoScriptInfo
+//   onClickDismiss: () => void
+//   javascript: BlockJSOptions
+//   blockJavaScript: shieldActions.BlockJavaScript
+//   allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
+//   changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
+//   changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
+// }
+
+// interface State {
+//   showApplyOptions: boolean
+// }
+
+// export default class StaticList extends React.PureComponent<Props, State> {
+//   constructor (props: Props) {
+//     super(props)
+//     this.state = { showApplyOptions: false }
+//   }
+
+//   get blockedListSize () {
+//     const { noScriptInfo } = this.props
+//     return Object.keys(noScriptInfo)
+//       .filter((origin: string) => noScriptInfo[origin].willBlock === true).length
+//   }
+
+//   get allowedListSize () {
+//     const { noScriptInfo } = this.props
+//     return Object.keys(noScriptInfo)
+//       .filter((origin: string) => noScriptInfo[origin].willBlock === false).length
+//   }
+
+//   onClickOutsideBounds = () => {
+//     this.setState({ showApplyOptions: false })
+//   }
+
+//   onClickToggleBlockOrAllowScript = (event: React.MouseEvent<HTMLAnchorElement>) => {
+//     event.preventDefault()
+//     this.props.changeNoScriptSettings(event.currentTarget.id)
+//   }
+
+//   onClickBlockAll = (event: React.MouseEvent<HTMLAnchorElement>) => {
+//     event.preventDefault()
+//     const { origin } = this.props
+//     this.props.changeAllNoScriptSettings(origin, true)
+//   }
+
+//   onClickAllowAll = (event: React.MouseEvent<HTMLAnchorElement>) => {
+//     event.preventDefault()
+//     const { origin } = this.props
+//     this.props.changeAllNoScriptSettings(origin, false)
+//     this.setState({ showApplyOptions: false })
+//   }
+
+//   onClickApplyScriptsOnce = () => {
+//     const { noScriptInfo } = this.props
+//     const allOrigins = Object.keys(noScriptInfo)
+//     this.props.allowScriptOriginsOnce(allOrigins.filter(key => noScriptInfo[key].willBlock === false))
+//   }
+
+//   renderEnabledList = (list: NoScriptInfo) => {
+//     return Object.keys(list).map((origin: string, key: number) => {
+//       if (list[origin].willBlock === false) {
+//         return null
+//       }
+//       return (
+//         <ResourcesListGrid hightlighted={true} key={key}>
+//           {
+//             list[origin].willBlock
+//               ? <ResourcesListBlockedLink>{getLocale('blocked')}</ResourcesListBlockedLink>
+//               : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('allow')}</Link>
+//           }
+//           <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
+//           {
+//             list[origin].willBlock
+//               ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('undo')}</Link>
+//               : null
+//           }
+//         </ResourcesListGrid>
+//       )
+//     })
+//   }
+
+//   renderDisabledList = (list: NoScriptInfo) => {
+//     return Object.keys(list).map((origin: string, key: number) => {
+//       if (list[origin].willBlock === true) {
+//         return null
+//       }
+//       return (
+//         <ResourcesListGrid hightlighted={list[origin].willBlock} key={key}>
+//           {
+//             list[origin].willBlock
+//               ? <ResourcesListAllowedLink>{getLocale('allowed')}</ResourcesListAllowedLink>
+//               : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('block')}</Link>
+//           }
+//           <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
+//           {
+//             list[origin].willBlock
+//               ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('undo')}</Link>
+//             : null
+//           }
+//         </ResourcesListGrid>
+//       )
+//     })
+//   }
+
+//   render () {
+//     const { showApplyOptions } = this.state
+//     const { noScriptInfo, onClickDismiss } = this.props
+//     return (
+//       <>
+//         <ResourcesListScroll>
+//           {showApplyOptions ? <DismissOverlay onClick={this.onClickOutsideBounds} /> : null}
+//           {/* blocked scripts */}
+//           <ResourcesSubTitleGrid>
+//             <BlockedScriptsIcon />
+//             <ResourcesSubTitle accent='blocked'>
+//               {getLocale('blockedScripts')} ({this.blockedListSize})
+//             </ResourcesSubTitle>
+//             <Link onClick={this.onClickAllowAll}>{getLocale('allowAll')}</Link>
+//           </ResourcesSubTitleGrid>
+//           {this.renderEnabledList(noScriptInfo)}
+
+//           {/* allowed scripts */}
+//           <ResourcesSubTitleGrid>
+//             <AllowedScriptsIcon />
+//             <ResourcesSubTitle accent='allowed'>
+//               {getLocale('allowedScripts')} ({this.allowedListSize})
+//             </ResourcesSubTitle>
+//             <Link onClick={this.onClickBlockAll}>{getLocale('blockAll')}</Link>
+//           </ResourcesSubTitleGrid>
+//           {this.renderDisabledList(noScriptInfo)}
+
+//         </ResourcesListScroll>
+//         <ResourcesFooterGrid>
+//           <ResourcesFooterGridColumnLeft>
+//             <Link onClick={onClickDismiss}>{getLocale('cancel')}</Link>
+//           </ResourcesFooterGridColumnLeft>
+//           <ResourcesFooterGridColumnRight>
+//             <Button
+//               level='primary'
+//               type='accent'
+//               text={getLocale('applyOnce')}
+//               onClick={this.onClickApplyScriptsOnce}
+//             />
+//           </ResourcesFooterGridColumnRight>
+//         </ResourcesFooterGrid>
+//       </>
+//     )
+//   }
+// }
diff --git a/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
index a8c7307ee04c..c814eb4fe95e 100644
--- a/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
+++ b/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
@@ -1,35 +1,35 @@
-/* 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/. */
+// /* 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'
+// import * as React from 'react'
 
-// Feature-specific components
-import { ResourcesListText, ResourcesListScroll, ResourcesFooterFlex } from 'brave-ui/features/shields'
+// // Feature-specific components
+// import { ResourcesListText, ResourcesListScroll, ResourcesFooterFlex } from 'brave-ui/features/shields'
 
-// Shared components
-import { Button } from 'brave-ui/components'
+// // Shared components
+// import { Button } from 'brave-ui/components'
 
-// Utils
-import { getLocale } from '../../../background/api/localeAPI'
+// // Utils
+// import { getLocale } from '../../background/api/localeAPI'
 
-interface Props {
-  list: Array<string>
-  onClickDismiss: () => void
-}
+// interface Props {
+//   list: Array<string>
+//   onClickDismiss: () => void
+// }
 
-export default class StaticList extends React.PureComponent<Props, {}> {
-  render () {
-    const { list, onClickDismiss } = this.props
-    return (
-      <>
-        <ResourcesListScroll>
-          {list.map((item: string, index: number) => <ResourcesListText title={item} key={index}>{item}</ResourcesListText>)}
-        </ResourcesListScroll>
-        <ResourcesFooterFlex>
-          <Button level='primary' type='accent' text={getLocale('goBack')} onClick={onClickDismiss} />
-        </ResourcesFooterFlex>
-      </>
-    )
-  }
-}
+// export default class StaticList extends React.PureComponent<Props, {}> {
+//   render () {
+//     const { list, onClickDismiss } = this.props
+//     return (
+//       <>
+//         <ResourcesListScroll>
+//           {list.map((item: string, index: number) => <ResourcesListText title={item} key={index}>{item}</ResourcesListText>)}
+//         </ResourcesListScroll>
+//         <ResourcesFooterFlex>
+//           <Button level='primary' type='accent' text={getLocale('goBack')} onClick={onClickDismiss} />
+//         </ResourcesFooterFlex>
+//       </>
+//     )
+//   }
+// }
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields.tsx b/components/brave_extension/extension/brave_extension/components/braveShields.tsx
index 7e9f7e8e0d93..adec4feeb0bd 100644
--- a/components/brave_extension/extension/brave_extension/components/braveShields.tsx
+++ b/components/brave_extension/extension/brave_extension/components/braveShields.tsx
@@ -1,86 +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/. */
+// /* 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'
+// import * as React from 'react'
 
-// Components group
-import ShieldsHeader from './header'
-import ShieldsInterfaceControls from './interfaceControls'
-import ShieldsPrivacyControls from './privacyControls'
-import ShieldsFooter from './footer'
+// // Components group
+// import ShieldsHeader from './header'
+// import ShieldsInterfaceControls from './interfaceControls'
+// import ShieldsPrivacyControls from './privacyControls'
+// import ShieldsFooter from './footer'
 
-// Utils
-import { ShieldsPanel } from 'brave-ui/features/shields'
-import * as shieldActions from '../../types/actions/shieldsPanelActions'
-import { Tab } from '../../types/state/shieldsPannelState'
+// // Utils
+// import { ShieldsPanel } from 'brave-ui/features/shields'
+// import * as shieldActions from '../types/actions/shieldsPanelActions'
+// import { Tab } from '../types/state/shieldsPannelState'
 
-interface Props {
-  actions: {
-    shieldsToggled: shieldActions.ShieldsToggled
-    blockAdsTrackers: shieldActions.BlockAdsTrackers
-    httpsEverywhereToggled: shieldActions.HttpsEverywhereToggled
-    blockJavaScript: shieldActions.BlockJavaScript
-    blockFingerprinting: shieldActions.BlockFingerprinting
-    blockCookies: shieldActions.BlockCookies
-    allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
-    changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
-    changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
-  }
-  shieldsPanelTabData: Tab
-}
+// interface Props {
+//   actions: {
+//     shieldsToggled: shieldActions.ShieldsToggled
+//     blockAdsTrackers: shieldActions.BlockAdsTrackers
+//     httpsEverywhereToggled: shieldActions.HttpsEverywhereToggled
+//     blockJavaScript: shieldActions.BlockJavaScript
+//     blockFingerprinting: shieldActions.BlockFingerprinting
+//     blockCookies: shieldActions.BlockCookies
+//     allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
+//     changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
+//     changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
+//   }
+//   shieldsPanelTabData: Tab
+// }
 
-export default class BraveShields extends React.Component<Props, {}> {
-  render () {
-    const { shieldsPanelTabData, actions } = this.props
-    if (!shieldsPanelTabData) {
-      return null
-    }
+// export default class BraveShields extends React.Component<Props, {}> {
+//   render () {
+//     const { shieldsPanelTabData, actions } = this.props
+//     if (!shieldsPanelTabData) {
+//       return null
+//     }
 
-    return (
-      <ShieldsPanel data-test-id='brave-shields-panel'>
-        <ShieldsHeader
-          tabData={shieldsPanelTabData}
-          shieldsToggled={actions.shieldsToggled}
-        />
-        <ShieldsInterfaceControls
-          url={shieldsPanelTabData.url}
-          hostname={shieldsPanelTabData.hostname}
-          braveShields={shieldsPanelTabData.braveShields}
-          ads={shieldsPanelTabData.ads}
-          adsBlocked={shieldsPanelTabData.adsBlocked}
-          adsBlockedResources={shieldsPanelTabData.adsBlockedResources}
-          blockAdsTrackers={actions.blockAdsTrackers}
-          trackers={shieldsPanelTabData.trackers}
-          trackersBlocked={shieldsPanelTabData.trackersBlocked}
-          trackersBlockedResources={shieldsPanelTabData.trackersBlockedResources}
-          httpsRedirected={shieldsPanelTabData.httpsRedirected}
-          httpUpgradableResources={shieldsPanelTabData.httpUpgradableResources}
-          httpsRedirectedResources={shieldsPanelTabData.httpsRedirectedResources}
-          httpsEverywhereToggled={actions.httpsEverywhereToggled}
-        />
-        <ShieldsPrivacyControls
-          url={shieldsPanelTabData.url}
-          hostname={shieldsPanelTabData.hostname}
-          origin={shieldsPanelTabData.origin}
-          braveShields={shieldsPanelTabData.braveShields}
-          fingerprinting={shieldsPanelTabData.fingerprinting}
-          fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
-          fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
-          blockFingerprinting={actions.blockFingerprinting}
-          javascript={shieldsPanelTabData.javascript}
-          javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
-          javascriptBlockedResources={shieldsPanelTabData.javascriptBlockedResources}
-          noScriptInfo={shieldsPanelTabData.noScriptInfo}
-          changeAllNoScriptSettings={actions.changeAllNoScriptSettings}
-          allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
-          changeNoScriptSettings={actions.changeNoScriptSettings}
-          blockJavaScript={actions.blockJavaScript}
-          blockCookies={actions.blockCookies}
-          cookies={shieldsPanelTabData.cookies}
-        />
-        <ShieldsFooter />
-      </ShieldsPanel>
-    )
-  }
-}
+//     return (
+//       <ShieldsPanel data-test-id='brave-shields-panel'>
+//         <ShieldsHeader
+//           tabData={shieldsPanelTabData}
+//           shieldsToggled={actions.shieldsToggled}
+//         />
+//         <ShieldsInterfaceControls
+//           url={shieldsPanelTabData.url}
+//           hostname={shieldsPanelTabData.hostname}
+//           braveShields={shieldsPanelTabData.braveShields}
+//           ads={shieldsPanelTabData.ads}
+//           adsBlocked={shieldsPanelTabData.adsBlocked}
+//           adsBlockedResources={shieldsPanelTabData.adsBlockedResources}
+//           trackers={shieldsPanelTabData.trackers}
+//           trackersBlocked={shieldsPanelTabData.trackersBlocked}
+//           trackersBlockedResources={shieldsPanelTabData.trackersBlockedResources}
+//           httpsRedirected={shieldsPanelTabData.httpsRedirected}
+//           httpUpgradableResources={shieldsPanelTabData.httpUpgradableResources}
+//           httpsRedirectedResources={shieldsPanelTabData.httpsRedirectedResources}
+//           blockAdsTrackers={actions.blockAdsTrackers}
+//           httpsEverywhereToggled={actions.httpsEverywhereToggled}
+//         />
+//         <ShieldsPrivacyControls
+//           url={shieldsPanelTabData.url}
+//           hostname={shieldsPanelTabData.hostname}
+//           origin={shieldsPanelTabData.origin}
+//           braveShields={shieldsPanelTabData.braveShields}
+//           fingerprinting={shieldsPanelTabData.fingerprinting}
+//           fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
+//           fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
+//           javascript={shieldsPanelTabData.javascript}
+//           javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
+//           javascriptBlockedResources={shieldsPanelTabData.javascriptBlockedResources}
+//           noScriptInfo={shieldsPanelTabData.noScriptInfo}
+//           blockFingerprinting={actions.blockFingerprinting}
+//           changeAllNoScriptSettings={actions.changeAllNoScriptSettings}
+//           allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
+//           changeNoScriptSettings={actions.changeNoScriptSettings}
+//           blockJavaScript={actions.blockJavaScript}
+//           blockCookies={actions.blockCookies}
+//           cookies={shieldsPanelTabData.cookies}
+//         />
+//         <ShieldsFooter />
+//       </ShieldsPanel>
+//     )
+//   }
+// }
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields2.tsx b/components/brave_extension/extension/brave_extension/components/braveShields2.tsx
new file mode 100644
index 000000000000..bd84ce80db1f
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/braveShields2.tsx
@@ -0,0 +1,146 @@
+/* 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 './header2'
+import InterfaceControls from './interfaceControls2'
+import PrivacyControls from './privacyControls2'
+import Footer from './footer2'
+
+// Types
+import { Tab } from '../types/state/shieldsPannelState'
+import { isShieldsEnabled, getFavicon } from '../helpers/shieldsUtils'
+import {
+  ShieldsToggled,
+  BlockAdsTrackers,
+  HttpsEverywhereToggled,
+  BlockJavaScript,
+  BlockFingerprinting,
+  BlockCookies,
+  AllowScriptOriginsOnce,
+  ChangeNoScriptSettings,
+  ChangeAllNoScriptSettings
+} from '../types/actions/shieldsPanelActions'
+
+interface Props {
+  actions: {
+    shieldsToggled: ShieldsToggled
+    blockAdsTrackers: BlockAdsTrackers
+    httpsEverywhereToggled: HttpsEverywhereToggled
+    blockJavaScript: BlockJavaScript
+    blockFingerprinting: BlockFingerprinting
+    blockCookies: BlockCookies
+    allowScriptOriginsOnce: AllowScriptOriginsOnce
+    changeNoScriptSettings: ChangeNoScriptSettings
+    changeAllNoScriptSettings: ChangeAllNoScriptSettings
+  }
+  shieldsPanelTabData: Tab
+}
+
+interface State {
+  isBlockedListOpen: boolean
+}
+
+export default class Shields extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = { isBlockedListOpen: false }
+  }
+
+  get favicon (): string {
+    const { url } = this.props.shieldsPanelTabData
+    return getFavicon(url)
+  }
+
+  get isShieldsEnabled (): boolean {
+    const { braveShields } = this.props.shieldsPanelTabData
+    return isShieldsEnabled(braveShields)
+  }
+
+  setBlockedListOpen = () => {
+    this.setState({ isBlockedListOpen: !this.state.isBlockedListOpen })
+  }
+
+  render () {
+    const { shieldsPanelTabData, actions } = this.props
+    const { isBlockedListOpen } = this.state
+
+    if (!shieldsPanelTabData) {
+      return null
+    }
+
+    return (
+      <ShieldsPanel data-test-id='brave-shields-panel' style={{ width: '370px' }}>
+        <Header
+          enabled={this.isShieldsEnabled}
+          favicon={this.favicon}
+          origin={origin}
+          hostname={shieldsPanelTabData.hostname}
+          isBlockedListOpen={isBlockedListOpen}
+          adsBlocked={shieldsPanelTabData.adsBlocked}
+          trackersBlocked={shieldsPanelTabData.trackersBlocked}
+          httpsUpgrades={shieldsPanelTabData.httpsRedirected}
+          scriptsBlocked={shieldsPanelTabData.javascriptBlocked}
+          fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
+          shieldsToggled={actions.shieldsToggled}
+        />
+        {
+          this.isShieldsEnabled && (
+            <>
+              <InterfaceControls
+                // Global props
+                isBlockedListOpen={isBlockedListOpen}
+                setBlockedListOpen={this.setBlockedListOpen}
+                hostname={shieldsPanelTabData.hostname}
+                favicon={this.favicon}
+                // Ads/Trackers
+                ads={shieldsPanelTabData.ads}
+                adsBlocked={shieldsPanelTabData.adsBlocked}
+                adsBlockedResources={shieldsPanelTabData.adsBlockedResources}
+                trackers={shieldsPanelTabData.trackers}
+                trackersBlocked={shieldsPanelTabData.trackersBlocked}
+                trackersBlockedResources={shieldsPanelTabData.trackersBlockedResources}
+                blockAdsTrackers={actions.blockAdsTrackers}
+                // HTTPS Upgrades
+                httpsRedirected={shieldsPanelTabData.httpsRedirected}
+                httpUpgradableResources={shieldsPanelTabData.httpUpgradableResources}
+                httpsRedirectedResources={shieldsPanelTabData.httpsRedirectedResources}
+                httpsEverywhereToggled={actions.httpsEverywhereToggled}
+              />
+              <PrivacyControls
+                // Global props
+                isBlockedListOpen={isBlockedListOpen}
+                setBlockedListOpen={this.setBlockedListOpen}
+                hostname={shieldsPanelTabData.hostname}
+                favicon={this.favicon}
+                // JavaScript
+                javascript={shieldsPanelTabData.javascript}
+                javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
+                noScriptInfo={shieldsPanelTabData.noScriptInfo}
+                changeNoScriptSettings={actions.changeNoScriptSettings}
+                blockJavaScript={actions.blockJavaScript}
+                changeAllNoScriptSettings={actions.changeAllNoScriptSettings}
+                allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
+                // Cookies
+                blockCookies={actions.blockCookies}
+                cookies={shieldsPanelTabData.cookies}
+                // Fingerprinting
+                fingerprinting={shieldsPanelTabData.fingerprinting}
+                fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
+                fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
+                blockFingerprinting={actions.blockFingerprinting}
+              />
+            </>
+          )
+        }
+        <Footer isBlockedListOpen={isBlockedListOpen} />
+      </ShieldsPanel>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx
new file mode 100644
index 000000000000..c6eae9f589cd
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx
@@ -0,0 +1,155 @@
+/* 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 {
+  BlockedInfoRow,
+  BlockedInfoRowData,
+  ArrowDownIcon,
+  BlockedInfoRowStats,
+  BlockedInfoRowText,
+  Toggle
+} from 'brave-ui/features/shields'
+
+// Group Components
+import StaticList from '../list/static'
+
+// Locale
+import { getLocale } from '../../background/api/localeAPI'
+
+// Helpers
+import {
+  sumAdsAndTrackers,
+  mergeAdsAndTrackersResources,
+  maybeBlockResource,
+  getToggleStateViaEventTarget,
+  getTabIndexValueBasedOnProps,
+  blockedResourcesSize,
+  maybeDisableResourcesRow
+} from '../../helpers/shieldsUtils'
+
+// Types
+import { BlockAdsTrackers } from '../../types/actions/shieldsPanelActions'
+import { BlockOptions } from '../../types/other/blockTypes'
+
+interface CommonProps {
+  isBlockedListOpen: boolean
+  setBlockedListOpen: () => void
+  hostname: string
+  favicon: string
+}
+
+interface AdsTrackersProps {
+  ads: BlockOptions
+  adsBlocked: number
+  adsBlockedResources: Array<string>
+  trackers: BlockOptions
+  trackersBlocked: number
+  trackersBlockedResources: Array<string>
+  blockAdsTrackers: BlockAdsTrackers
+}
+
+type Props = CommonProps & AdsTrackersProps
+
+interface State {
+  trackersBlockedOpen: boolean
+}
+
+export default class AdsTrackersControl extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = { trackersBlockedOpen: false }
+  }
+
+  get totalAdsTrackersBlocked (): number {
+    const { adsBlocked, trackersBlocked } = this.props
+    return sumAdsAndTrackers(adsBlocked, trackersBlocked)
+  }
+
+  get totalAdsTrackersBlockedDisplay (): string {
+    return blockedResourcesSize(this.totalAdsTrackersBlocked)
+  }
+
+  get totalAdsTrackersBlockedList (): Array<string> {
+    const { adsBlockedResources, trackersBlockedResources } = this.props
+    return mergeAdsAndTrackersResources(adsBlockedResources, trackersBlockedResources)
+  }
+
+  get maybeBlock3rdPartyTrackersBlocked (): boolean {
+    const { ads, trackers } = this.props
+    return maybeBlockResource(ads) && maybeBlockResource(trackers)
+  }
+
+  get maybeDisableResourcesRow (): boolean {
+    return maybeDisableResourcesRow(this.totalAdsTrackersBlocked)
+  }
+
+  get tabIndex (): number {
+    const { isBlockedListOpen } = this.props
+    return getTabIndexValueBasedOnProps(isBlockedListOpen, this.totalAdsTrackersBlocked)
+  }
+
+  triggerOpen3rdPartyTrackersBlocked = (
+    event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
+  ) => {
+    event.currentTarget.blur()
+    this.props.setBlockedListOpen()
+    this.setState({ trackersBlockedOpen: !this.state.trackersBlockedOpen })
+  }
+
+  onOpen3rdPartyTrackersBlocked = (event: React.MouseEvent<HTMLDivElement>) => {
+    this.triggerOpen3rdPartyTrackersBlocked(event)
+  }
+
+  onOpen3rdPartyTrackersBlockedViaKeyboard = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === ' ') {
+      this.triggerOpen3rdPartyTrackersBlocked(event)
+    }
+  }
+
+  onChange3rdPartyTrackersBlockedEnabled = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const shoudEnableAdsTracks = getToggleStateViaEventTarget(event)
+    this.props.blockAdsTrackers(shoudEnableAdsTracks)
+  }
+
+  render () {
+    const { favicon, hostname, isBlockedListOpen } = this.props
+    const { trackersBlockedOpen } = this.state
+    return (
+      <>
+        <BlockedInfoRow>
+          <BlockedInfoRowData
+            disabled={this.maybeDisableResourcesRow}
+            tabIndex={this.tabIndex}
+            onClick={this.onOpen3rdPartyTrackersBlocked}
+            onKeyDown={this.onOpen3rdPartyTrackersBlockedViaKeyboard}
+          >
+            <ArrowDownIcon />
+            <BlockedInfoRowStats>{this.totalAdsTrackersBlockedDisplay}</BlockedInfoRowStats>
+            <BlockedInfoRowText>{getLocale('thirdPartyTrackersBlocked')}</BlockedInfoRowText>
+          </BlockedInfoRowData>
+          <Toggle
+            size='small'
+            disabled={isBlockedListOpen}
+            checked={this.maybeBlock3rdPartyTrackersBlocked}
+            onChange={this.onChange3rdPartyTrackersBlockedEnabled}
+          />
+        </BlockedInfoRow>
+        {
+          trackersBlockedOpen &&
+            <StaticList
+              favicon={favicon}
+              hostname={hostname}
+              stats={this.totalAdsTrackersBlocked}
+              name={getLocale('thirdPartyTrackersBlocked')}
+              list={this.totalAdsTrackersBlockedList}
+              onClose={this.onOpen3rdPartyTrackersBlocked}
+            />
+        }
+      </>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/controls/cookiesControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/cookiesControl.tsx
new file mode 100644
index 000000000000..81ee28be3979
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/controls/cookiesControl.tsx
@@ -0,0 +1,47 @@
+/* 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 { BlockedInfoRowSingle, SelectBox } from 'brave-ui/features/shields'
+
+// Locale
+import { getLocale } from '../../background/api/localeAPI'
+
+// Types
+import { BlockCookies } from '../../types/actions/shieldsPanelActions'
+import { BlockCookiesOptions } from '../../types/other/blockTypes'
+
+interface Props {
+  isBlockedListOpen: boolean
+  cookies: BlockCookiesOptions
+  blockCookies: BlockCookies
+}
+
+export default class CookiesControl extends React.PureComponent<Props, {}> {
+  onChangeBlockCookies = (event: React.ChangeEvent<any>) => {
+    this.props.blockCookies(event.target.value)
+  }
+
+  render () {
+    const { isBlockedListOpen, cookies } = this.props
+    return (
+      <>
+        <BlockedInfoRowSingle>
+          <SelectBox
+            id='blockCookies'
+            disabled={isBlockedListOpen}
+            value={cookies}
+            onChange={this.onChangeBlockCookies}
+          >
+            <option value='block_third_party'>{getLocale('thirdPartyCookiesBlocked')}</option>
+            <option value='block'>{getLocale('allCookiesBlocked')}</option>
+            <option value='allow'>{getLocale('allCookiesAllowed')}</option>
+          </SelectBox>
+        </BlockedInfoRowSingle>
+      </>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl.tsx
new file mode 100644
index 000000000000..8634fecff4bc
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl.tsx
@@ -0,0 +1,145 @@
+/* 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 {
+  BlockedInfoRowForSelect,
+  BlockedInfoRowDataForSelect,
+  ArrowDownIcon,
+  BlockedInfoRowStats,
+  SelectBox
+} from 'brave-ui/features/shields'
+
+// Group Components
+import StaticList from '../list/static'
+
+// Locale
+import { getLocale } from '../../background/api/localeAPI'
+
+// Helpers
+import {
+  maybeDisableResourcesRow,
+  getTabIndexValueBasedOnProps,
+  blockedResourcesSize
+} from '../../helpers/shieldsUtils'
+
+// Types
+import { BlockFingerprinting } from '../../types/actions/shieldsPanelActions'
+import { BlockFPOptions } from '../../types/other/blockTypes'
+
+interface CommonProps {
+  favicon: string
+  hostname: string
+  isBlockedListOpen: boolean
+  setBlockedListOpen: () => void
+}
+
+interface HTTPSUpgradesProps {
+  fingerprinting: BlockFPOptions
+  fingerprintingBlocked: number
+  fingerprintingBlockedResources: Array<string>
+  blockFingerprinting: BlockFingerprinting
+}
+
+type Props = CommonProps & HTTPSUpgradesProps
+
+interface State {
+  deviceRecognitionOpen: boolean
+}
+
+export default class DeviceRecognitionControl extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      deviceRecognitionOpen: false
+    }
+  }
+
+  get totalDeviceRecognitonAttemptsDisplay (): string {
+    const { fingerprintingBlocked } = this.props
+    return blockedResourcesSize(fingerprintingBlocked)
+  }
+
+  get maybeDisableResourcesRow (): boolean {
+    const { fingerprintingBlocked } = this.props
+    return maybeDisableResourcesRow(fingerprintingBlocked)
+  }
+
+  get tabIndex (): number {
+    const { isBlockedListOpen, fingerprintingBlocked } = this.props
+    return getTabIndexValueBasedOnProps(isBlockedListOpen, fingerprintingBlocked)
+  }
+
+  triggerOpenDeviceRecognition = (
+    event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
+  ) => {
+    event.currentTarget.blur()
+    this.props.setBlockedListOpen()
+    this.setState({ deviceRecognitionOpen: !this.state.deviceRecognitionOpen })
+  }
+
+  onOpenDeviceRecognition = (event: React.MouseEvent<HTMLDivElement>) => {
+    this.triggerOpenDeviceRecognition(event)
+  }
+
+  onOpenDeviceRecognitionViaKeyboard = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === ' ') {
+      this.triggerOpenDeviceRecognition(event)
+    }
+  }
+
+  onChangeBlockDeviceRecognition = (event: React.ChangeEvent<any>) => {
+    this.props.blockFingerprinting(event.target.value)
+  }
+
+  render () {
+    const {
+      favicon,
+      hostname,
+      isBlockedListOpen,
+      fingerprintingBlocked,
+      fingerprintingBlockedResources,
+      fingerprinting
+    } = this.props
+    const { deviceRecognitionOpen } = this.state
+    return (
+      <>
+        <BlockedInfoRowForSelect>
+          <BlockedInfoRowDataForSelect
+            disabled={this.maybeDisableResourcesRow}
+            tabIndex={this.tabIndex}
+            onClick={this.onOpenDeviceRecognition}
+            onKeyDown={this.onOpenDeviceRecognitionViaKeyboard}
+          >
+            <ArrowDownIcon />
+            <BlockedInfoRowStats>{this.totalDeviceRecognitonAttemptsDisplay}</BlockedInfoRowStats>
+          </BlockedInfoRowDataForSelect>
+          <SelectBox
+            id='blockFingerprinting'
+            disabled={isBlockedListOpen}
+            value={fingerprinting}
+            onChange={this.onChangeBlockDeviceRecognition}
+          >
+            <option value='block_third_party'>{getLocale('thirdPartyFingerprintingBlocked')}</option>
+            <option value='block'>{getLocale('allFingerprintingBlocked')}</option>
+            <option value='allow'>{getLocale('allFingerprintingAllowed')}</option>
+          </SelectBox>
+        </BlockedInfoRowForSelect>
+        {
+          deviceRecognitionOpen &&
+            <StaticList
+              favicon={favicon}
+              hostname={hostname}
+              stats={fingerprintingBlocked}
+              name={getLocale('deviceRecognitionAttempts')}
+              list={fingerprintingBlockedResources}
+              onClose={this.onOpenDeviceRecognition}
+            />
+        }
+      </>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx
new file mode 100644
index 000000000000..8d4eeeed7f2d
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx
@@ -0,0 +1,142 @@
+/* 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 {
+  BlockedInfoRow,
+  BlockedInfoRowData,
+  ArrowDownIcon,
+  BlockedInfoRowStats,
+  BlockedInfoRowText,
+  Toggle
+} from 'brave-ui/features/shields'
+
+// Group Components
+import StaticList from '../list/static'
+
+// Locale
+import { getLocale } from '../../background/api/localeAPI'
+
+// Helpers
+import {
+  maybeBlockResource,
+  maybeDisableResourcesRow,
+  getTabIndexValueBasedOnProps,
+  blockedResourcesSize,
+  getToggleStateViaEventTarget
+} from '../../helpers/shieldsUtils'
+
+// Types
+import { HttpsEverywhereToggled } from '../../types/actions/shieldsPanelActions'
+import { BlockOptions } from '../../types/other/blockTypes'
+
+interface CommonProps {
+  isBlockedListOpen: boolean
+  setBlockedListOpen: () => void
+  hostname: string
+  favicon: string
+}
+
+interface HTTPSUpgradesProps {
+  httpsRedirected: number
+  httpUpgradableResources: BlockOptions
+  httpsRedirectedResources: Array<string>
+  httpsEverywhereToggled: HttpsEverywhereToggled
+}
+
+type Props = CommonProps & HTTPSUpgradesProps
+
+interface State {
+  connectionsUpgradedOpen: boolean
+}
+
+export default class HTTPSUpgradesControl extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = { connectionsUpgradedOpen: false }
+  }
+
+  get maybeDisableResourcesRow (): boolean {
+    const { httpsRedirected } = this.props
+    return maybeDisableResourcesRow(httpsRedirected)
+  }
+
+  get httpsRedirectedDisplay (): string {
+    const { httpsRedirected } = this.props
+    return blockedResourcesSize(httpsRedirected)
+  }
+
+  get tabIndex (): number {
+    const { isBlockedListOpen, httpsRedirected } = this.props
+    return getTabIndexValueBasedOnProps(isBlockedListOpen, httpsRedirected)
+  }
+
+  get shouldBlockConnectionsUpgradedToHTTPS (): boolean {
+    const { httpUpgradableResources } = this.props
+    return maybeBlockResource(httpUpgradableResources)
+  }
+
+  triggerConnectionsUpgradedToHTTPS = (
+    event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
+  ) => {
+    event.currentTarget.blur()
+    this.props.setBlockedListOpen()
+    this.setState({ connectionsUpgradedOpen: !this.state.connectionsUpgradedOpen })
+  }
+
+  onOpenConnectionsUpgradedToHTTPS = (event: React.MouseEvent<HTMLDivElement>) => {
+    this.triggerConnectionsUpgradedToHTTPS(event)
+  }
+
+  onOpenConnectionsUpgradedToHTTPSViaKeyboard = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === ' ') {
+      this.triggerConnectionsUpgradedToHTTPS(event)
+    }
+  }
+
+  onChangeConnectionsUpgradedToHTTPSEnabled = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const shouldEnableHttpsEverywhere = getToggleStateViaEventTarget(event)
+    this.props.httpsEverywhereToggled(shouldEnableHttpsEverywhere)
+  }
+
+  render () {
+    const { isBlockedListOpen, favicon, hostname, httpsRedirected, httpsRedirectedResources } = this.props
+    const { connectionsUpgradedOpen } = this.state
+    return (
+      <>
+        <BlockedInfoRow>
+          <BlockedInfoRowData
+            disabled={this.maybeDisableResourcesRow}
+            tabIndex={this.tabIndex}
+            onClick={this.onOpenConnectionsUpgradedToHTTPS}
+            onKeyDown={this.onOpenConnectionsUpgradedToHTTPSViaKeyboard}
+          >
+            <ArrowDownIcon />
+            <BlockedInfoRowStats>{this.httpsRedirectedDisplay}</BlockedInfoRowStats>
+            <BlockedInfoRowText>{getLocale('connectionsUpgradedHTTPS')}</BlockedInfoRowText>
+          </BlockedInfoRowData>
+          <Toggle
+            size='small'
+            disabled={isBlockedListOpen}
+            checked={this.shouldBlockConnectionsUpgradedToHTTPS}
+            onChange={this.onChangeConnectionsUpgradedToHTTPSEnabled}
+          />
+        </BlockedInfoRow>
+        {
+          connectionsUpgradedOpen &&
+            <StaticList
+              favicon={favicon}
+              hostname={hostname}
+              stats={httpsRedirected}
+              name={getLocale('connectionsUpgradedHTTPS')}
+              list={httpsRedirectedResources}
+              onClose={this.onOpenConnectionsUpgradedToHTTPS}
+            />
+        }
+      </>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx
new file mode 100644
index 000000000000..9010ab5dcd77
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx
@@ -0,0 +1,165 @@
+/* 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 {
+  BlockedInfoRow,
+  BlockedInfoRowData,
+  ArrowDownIcon,
+  BlockedInfoRowStats,
+  BlockedInfoRowText,
+  Toggle
+} from 'brave-ui/features/shields'
+
+// Group Components
+import DynamicList from '../list/dynamic'
+
+// Locale
+import { getLocale } from '../../background/api/localeAPI'
+
+// Helpers
+import {
+  maybeDisableResourcesRow,
+  blockedResourcesSize,
+  maybeBlockResource,
+  getTabIndexValueBasedOnProps,
+  getToggleStateViaEventTarget
+} from '../../helpers/shieldsUtils'
+
+// Types
+import { BlockJSOptions } from '../../types/other/blockTypes'
+import { NoScriptInfo } from '../../types/other/noScriptInfo'
+import {
+  ChangeNoScriptSettings,
+  BlockJavaScript,
+  ChangeAllNoScriptSettings,
+  AllowScriptOriginsOnce
+} from '../../types/actions/shieldsPanelActions'
+
+interface CommonProps {
+  // Global props
+  isBlockedListOpen: boolean
+  setBlockedListOpen: () => void
+  hostname: string
+  favicon: string
+}
+
+interface JavaScriptProps {
+  javascript: BlockJSOptions
+  javascriptBlocked: number
+  noScriptInfo: NoScriptInfo
+  changeNoScriptSettings: ChangeNoScriptSettings
+  blockJavaScript: BlockJavaScript
+  changeAllNoScriptSettings: ChangeAllNoScriptSettings
+  allowScriptOriginsOnce: AllowScriptOriginsOnce
+}
+
+type Props = CommonProps & JavaScriptProps
+
+interface State {
+  scriptsBlockedOpen: boolean
+}
+
+export default class ScriptsControls extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      scriptsBlockedOpen: false
+    }
+  }
+
+  get maybeDisableResourcesRow (): boolean {
+    const { javascriptBlocked } = this.props
+    return maybeDisableResourcesRow(javascriptBlocked)
+  }
+
+  get javascriptBlockedDisplay (): string {
+    const { javascriptBlocked } = this.props
+    return blockedResourcesSize(javascriptBlocked)
+  }
+
+  get tabIndex (): number {
+    const { isBlockedListOpen, javascriptBlocked } = this.props
+    return getTabIndexValueBasedOnProps(isBlockedListOpen, javascriptBlocked)
+  }
+
+  get shouldBlockJavaScript (): boolean {
+    const { javascript } = this.props
+    return maybeBlockResource(javascript)
+  }
+
+  triggerOpenScriptsBlocked = (
+    event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
+  ) => {
+    event.currentTarget.blur()
+    this.props.setBlockedListOpen()
+    this.setState({ scriptsBlockedOpen: !this.state.scriptsBlockedOpen })
+  }
+
+  onOpenScriptsBlocked = (event: React.MouseEvent<HTMLDivElement>) => {
+    this.triggerOpenScriptsBlocked(event)
+  }
+
+  onOpenScriptsBlockedViaKeyboard = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === ' ') {
+      this.triggerOpenScriptsBlocked(event)
+    }
+  }
+
+  onChangeScriptsBlockedEnabled = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const shouldBlockJavaScript = getToggleStateViaEventTarget(event)
+    this.props.blockJavaScript(shouldBlockJavaScript)
+  }
+
+  render () {
+    const {
+      favicon,
+      hostname,
+      isBlockedListOpen,
+      allowScriptOriginsOnce,
+      changeNoScriptSettings,
+      changeAllNoScriptSettings,
+      noScriptInfo
+    } = this.props
+    const { scriptsBlockedOpen } = this.state
+    return (
+      <>
+        <BlockedInfoRow>
+          <BlockedInfoRowData
+            disabled={this.maybeDisableResourcesRow}
+            tabIndex={this.tabIndex}
+            onClick={this.onOpenScriptsBlocked}
+            onKeyDown={this.onOpenScriptsBlockedViaKeyboard}
+          >
+            <ArrowDownIcon />
+            <BlockedInfoRowStats>{this.javascriptBlockedDisplay}</BlockedInfoRowStats>
+            <BlockedInfoRowText>{getLocale('scriptsBlocked')}</BlockedInfoRowText>
+          </BlockedInfoRowData>
+          <Toggle
+            size='small'
+            disabled={isBlockedListOpen}
+            checked={this.shouldBlockJavaScript}
+            onChange={this.onChangeScriptsBlockedEnabled}
+          />
+        </BlockedInfoRow>
+        {
+          scriptsBlockedOpen &&
+            <DynamicList
+              favicon={favicon}
+              hostname={hostname}
+              origin={origin}
+              name={getLocale('scriptsOnThisSite')}
+              list={noScriptInfo}
+              onClose={this.onOpenScriptsBlocked}
+              allowScriptOriginsOnce={allowScriptOriginsOnce}
+              changeNoScriptSettings={changeNoScriptSettings}
+              changeAllNoScriptSettings={changeAllNoScriptSettings}
+            />
+        }
+      </>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/footer.tsx b/components/brave_extension/extension/brave_extension/components/footer.tsx
index b5c07e9ea167..6ecaf8047c98 100644
--- a/components/brave_extension/extension/brave_extension/components/footer.tsx
+++ b/components/brave_extension/extension/brave_extension/components/footer.tsx
@@ -1,28 +1,28 @@
-/* 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/. */
+// /* 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'
+// import * as React from 'react'
 
-// Feature-specific components
-import { MainFooterLinkFlex, LinkIcon } from 'brave-ui/features/shields'
+// // Feature-specific components
+// import { MainFooterLinkFlex, LinkIcon } from 'brave-ui/features/shields'
 
-// Utils
-import * as tabsAPI from '../../background/api/tabsAPI'
-import { getLocale } from '../../background/api/localeAPI'
+// // Utils
+// import * as tabsAPI from '../background/api/tabsAPI'
+// import { getLocale } from '../background/api/localeAPI'
 
-export default class ShieldsFooter extends React.PureComponent<{}, {}> {
-  openSettings = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault()
-    tabsAPI.createTab({ url: 'chrome://settings/shields' })
-      .catch((err) => console.log(err))
-  }
-  render () {
-    return (
-      <MainFooterLinkFlex id='braveShieldsFooter' href='#' onClick={this.openSettings}>
-        <span>{getLocale('editDefaults')}</span>
-        <LinkIcon />
-      </MainFooterLinkFlex>
-    )
-  }
-}
+// export default class ShieldsFooter extends React.PureComponent<{}, {}> {
+//   openSettings = (event: React.MouseEvent<HTMLAnchorElement>) => {
+//     event.preventDefault()
+//     tabsAPI.createTab({ url: 'chrome://settings/shields' })
+//       .catch((err) => console.log(err))
+//   }
+//   render () {
+//     return (
+//       <MainFooterLinkFlex id='braveShieldsFooter' href='#' onClick={this.openSettings}>
+//         <span>{getLocale('editDefaults')}</span>
+//         <LinkIcon />
+//       </MainFooterLinkFlex>
+//     )
+//   }
+// }
diff --git a/components/brave_extension/extension/brave_extension/components/footer2.tsx b/components/brave_extension/extension/brave_extension/components/footer2.tsx
new file mode 100644
index 000000000000..522a6020baf8
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/footer2.tsx
@@ -0,0 +1,39 @@
+/* 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'
+
+interface Props {
+  isBlockedListOpen: boolean
+}
+
+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
+    return (
+      <MainFooter>
+        <Link
+          id='braveShieldsFooter'
+          onClick={this.openSettings}
+          disabled={isBlockedListOpen}
+        >
+          {getLocale('changeDefaults')}
+        </Link>
+      </MainFooter>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/header.tsx b/components/brave_extension/extension/brave_extension/components/header.tsx
index d8fbab01e0c1..6b6bb39aa4ed 100644
--- a/components/brave_extension/extension/brave_extension/components/header.tsx
+++ b/components/brave_extension/extension/brave_extension/components/header.tsx
@@ -1,93 +1,93 @@
-// /* 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/. */
+// // /* 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'
+// import * as React from 'react'
 
-// Feature-specific components
-import {
-  Header,
-  MainToggleFlex,
-  Description,
-  SiteInfoCard,
-  DisabledTextGrid,
-  Label,
-  Highlight,
-  UnHighlight,
-  Toggle,
-  ShieldIcon,
-  MainSiteInfoGrid,
-  ShieldIconFlex
-} from 'brave-ui/features/shields'
+// // Feature-specific components
+// import {
+//   Header,
+//   MainToggleFlex,
+//   Description,
+//   SiteInfoCard,
+//   DisabledTextGrid,
+//   Label,
+//   Highlight,
+//   UnHighlight,
+//   Toggle,
+//   ShieldIcon,
+//   MainSiteInfoGrid,
+//   ShieldIconFlex
+// } from 'brave-ui/features/shields'
 
-// Types
-import { Tab } from '../../types/state/shieldsPannelState'
-import { BlockOptions } from '../../types/other/blockTypes'
+// // Types
+// import { Tab } from '../types/state/shieldsPannelState'
+// import { BlockOptions } from '../types/other/blockTypes'
 
-// Utils
-import * as shieldActions from '../../types/actions/shieldsPanelActions'
-import { getLocale } from '../../background/api/localeAPI'
-import { isHttpOrHttps } from '../../helpers/urlUtils'
-import { getFavicon, getTotalResourcesBlocked } from '../../helpers/shieldsUtils'
+// // Utils
+// import * as shieldActions from '../types/actions/shieldsPanelActions'
+// import { getLocale } from '../background/api/localeAPI'
+// import { isHttpOrHttps } from '../helpers/urlUtils'
+// import { getFavicon, getTotalResourcesBlocked } from '../helpers/shieldsUtils'
 
-export interface Props {
-  tabData: Tab
-  shieldsToggled: shieldActions.ShieldsToggled
-}
+// export interface Props {
+//   tabData: Tab
+//   shieldsToggled: shieldActions.ShieldsToggled
+// }
 
-export default class ShieldsHeader extends React.PureComponent<Props, {}> {
-  onToggleShields = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { origin } = this.props.tabData
-    if (!isHttpOrHttps(origin)) {
-      return
-    }
-    const shieldsOption: BlockOptions = event.target.checked ? 'allow' : 'block'
-    this.props.shieldsToggled(shieldsOption)
-  }
+// export default class ShieldsHeader extends React.PureComponent<Props, {}> {
+//   onToggleShields = (event: React.ChangeEvent<HTMLInputElement>) => {
+//     const { origin } = this.props.tabData
+//     if (!isHttpOrHttps(origin)) {
+//       return
+//     }
+//     const shieldsOption: BlockOptions = event.target.checked ? 'allow' : 'block'
+//     this.props.shieldsToggled(shieldsOption)
+//   }
 
-  renderEnabledContent = () => {
-    return (
-      <MainSiteInfoGrid>
-        <Highlight enabled={true} size='large'>{getTotalResourcesBlocked(this.props.tabData)}</Highlight>
-        <Label size='medium'>{getLocale('totalBlocked')}</Label>
-      </MainSiteInfoGrid>
-    )
-  }
+//   renderEnabledContent = () => {
+//     return (
+//       <MainSiteInfoGrid>
+//         <Highlight enabled={true} size='large'>{getTotalResourcesBlocked(this.props.tabData)}</Highlight>
+//         <Label size='medium'>{getLocale('totalBlocked')}</Label>
+//       </MainSiteInfoGrid>
+//     )
+//   }
 
-  renderDisabledContent = () => {
-    return (
-      <DisabledTextGrid>
-        <ShieldIconFlex>
-          <ShieldIcon />
-        </ShieldIconFlex>
-        <Description enabled={false}>{getLocale('disabledMessage')}</Description>
-      </DisabledTextGrid>
-    )
-  }
+//   renderDisabledContent = () => {
+//     return (
+//       <DisabledTextGrid>
+//         <ShieldIconFlex>
+//           <ShieldIcon />
+//         </ShieldIconFlex>
+//         <Description enabled={false}>{getLocale('disabledMessage')}</Description>
+//       </DisabledTextGrid>
+//     )
+//   }
 
-  render () {
-    const { braveShields, hostname, url } = this.props.tabData
-    const enabled = braveShields !== 'block'
+//   render () {
+//     const { braveShields, hostname, url } = this.props.tabData
+//     const enabled = braveShields !== 'block'
 
-    return (
-      <Header id='braveShieldsHeader' enabled={enabled}>
-        <MainToggleFlex enabled={enabled}>
-          <Label size='medium'>
-            {getLocale('shields')} <Highlight enabled={enabled}> {enabled ? getLocale('up') : getLocale('down')}
-            </Highlight>
-            <UnHighlight> {getLocale('forThisSite')}</UnHighlight>
-          </Label>
-          <Toggle id='mainToggle' checked={enabled} onChange={this.onToggleShields} size='large' />
-        </MainToggleFlex>
-        {enabled ? <Description enabled={true}>{getLocale('enabledMessage')}</Description> : null}
-        <SiteInfoCard>
-          <MainSiteInfoGrid>
-            <img src={getFavicon(url)} />
-            <Label id='hostname' size='large'>{hostname}</Label>
-          </MainSiteInfoGrid>
-          {enabled ? this.renderEnabledContent() : this.renderDisabledContent()}
-        </SiteInfoCard>
-      </Header>
-    )
-  }
-}
+//     return (
+//       <Header id='braveShieldsHeader' enabled={enabled}>
+//         <MainToggleFlex enabled={enabled}>
+//           <Label size='medium'>
+//             {getLocale('shields')} <Highlight enabled={enabled}> {enabled ? getLocale('up') : getLocale('down')}
+//             </Highlight>
+//             <UnHighlight> {getLocale('forThisSite')}</UnHighlight>
+//           </Label>
+//           <Toggle id='mainToggle' checked={enabled} onChange={this.onToggleShields} size='large' />
+//         </MainToggleFlex>
+//         {enabled ? <Description enabled={true}>{getLocale('enabledMessage')}</Description> : null}
+//         <SiteInfoCard>
+//           <MainSiteInfoGrid>
+//             <img src={getFavicon(url)} />
+//             <Label id='hostname' size='large'>{hostname}</Label>
+//           </MainSiteInfoGrid>
+//           {enabled ? this.renderEnabledContent() : this.renderDisabledContent()}
+//         </SiteInfoCard>
+//       </Header>
+//     )
+//   }
+// }
diff --git a/components/brave_extension/extension/brave_extension/components/header2.tsx b/components/brave_extension/extension/brave_extension/components/header2.tsx
new file mode 100644
index 000000000000..932ca6390cf6
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/header2.tsx
@@ -0,0 +1,123 @@
+/* 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,
+  ToggleStateText,
+  Favicon,
+  SiteInfoText,
+  TotalBlockedStatsNumber,
+  TotalBlockedStatsText,
+  DisabledContentView,
+  ShieldIcon,
+  DisabledContentText,
+  Toggle
+} from 'brave-ui/features/shields'
+
+// Locale
+import { getLocale } from '../background/api/localeAPI'
+import {
+  blockedResourcesSize,
+  getTotalBlockedSizeStrings,
+  getToggleStateViaEventTarget
+} from '../helpers/shieldsUtils'
+
+// Types
+import { BlockOptions } from '../types/other/blockTypes'
+import { ShieldsToggled } from '../types/actions/shieldsPanelActions'
+
+interface CommonProps {
+  enabled: boolean
+  favicon: string
+  origin: string
+  hostname: string
+  isBlockedListOpen: boolean
+  shieldsToggled: ShieldsToggled
+}
+
+interface BlockedItemsProps {
+  adsBlocked: number
+  trackersBlocked: number
+  httpsUpgrades: number
+  scriptsBlocked: number
+  fingerprintingBlocked: number
+}
+
+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)
+  }
+
+  get totalBlockedStrings (): string {
+    const { httpsUpgrades } = this.props
+    return getTotalBlockedSizeStrings(this.blockedItemsSize, httpsUpgrades)
+  }
+
+  onToggleShields = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const shieldsOption: BlockOptions = getToggleStateViaEventTarget(event)
+    this.props.shieldsToggled(shieldsOption)
+  }
+
+  render () {
+    const { enabled, favicon, hostname, isBlockedListOpen } = 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 size='large' checked={enabled} onChange={this.onToggleShields} disabled={isBlockedListOpen} />
+        </MainToggle>
+        <SiteOverview status={enabled ? 'enabled' : 'disabled'}>
+          <SiteInfo>
+            <Favicon src={favicon} />
+            <SiteInfoText>{hostname}</SiteInfoText>
+          </SiteInfo>
+          {
+            enabled
+            ? (
+              <TotalBlockedStats>
+                <TotalBlockedStatsNumber>{this.totalBlockedSize}</TotalBlockedStatsNumber>
+                <TotalBlockedStatsText>
+                  {this.totalBlockedStrings}
+                </TotalBlockedStatsText>
+              </TotalBlockedStats>
+            )
+            : (
+              <DisabledContentView>
+                <div><ShieldIcon /></div>
+                <DisabledContentText>{getLocale('disabledMessage')}</DisabledContentText>
+              </DisabledContentView>
+            )
+          }
+        </SiteOverview>
+      </ShieldsHeader>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
index c9bfcfef010f..2fcb70372e9b 100644
--- a/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
+++ b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
@@ -1,165 +1,165 @@
-/* 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 {
-  ShowMoreIcon,
-  Toggle,
-  StatFlex,
-  ResourcesSwitchLabel,
-  EmptyButton,
-  ToggleFlex,
-  ToggleGrid
-} from 'brave-ui/features/shields'
-
-// Component groups
-import BlockedResources from './blockedResources/blockedResources'
-import StaticList from './blockedResources/staticList'
-
-// Types
-import { BlockOptions } from '../../types/other/blockTypes'
-
-// Utils
-import { getLocale } from '../../background/api/localeAPI'
-import * as shieldActions from '../../types/actions/shieldsPanelActions'
-import { totalAdsTrackersBlocked, blockedResourcesSize } from '../../helpers/shieldsUtils'
-
-export interface Props {
-  braveShields: BlockOptions
-  url: string
-  hostname: string
-  ads: BlockOptions
-  adsBlocked: number
-  adsBlockedResources: Array<string>
-  blockAdsTrackers: shieldActions.BlockAdsTrackers
-  trackers: BlockOptions
-  trackersBlocked: number
-  trackersBlockedResources: Array<string>
-  httpsRedirected: number
-  httpUpgradableResources: BlockOptions
-  httpsRedirectedResources: Array<string>
-  httpsEverywhereToggled: shieldActions.HttpsEverywhereToggled
-}
-
-interface State {
-  openTotalAdsTrackersBlockedList: boolean,
-  openConnectionsEncryptedList: boolean
-}
-
-export default class ShieldsInterfaceControls extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = {
-      openTotalAdsTrackersBlockedList: false,
-      openConnectionsEncryptedList: false
-    }
-  }
-
-  get totalAdsTrackersBlocked (): number {
-    const { adsBlocked, trackersBlocked } = this.props
-    return totalAdsTrackersBlocked(adsBlocked, trackersBlocked)
-  }
-
-  get totalAdsTrackersBlockedList (): Array<string> {
-    const { adsBlockedResources, trackersBlockedResources } = this.props
-    return [...adsBlockedResources, ...trackersBlockedResources]
-  }
-
-  onChangeBlockAds = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!event.target) {
-      return
-    }
-    const shoudEnableAdsTracks = event.target.checked ? 'allow' : 'block'
-    this.props.blockAdsTrackers(shoudEnableAdsTracks)
-  }
-
-  onChangeConnectionsEncrypted = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!event.target) {
-      return
-    }
-    const shouldEnableHttpsEverywhere = event.target.checked ? 'allow' : 'block'
-    this.props.httpsEverywhereToggled(shouldEnableHttpsEverywhere)
-  }
-
-  onToggleTotalAdsTrackersBlocked = () => {
-    this.setState({ openTotalAdsTrackersBlockedList: !this.state.openTotalAdsTrackersBlockedList })
-  }
-
-  onToggleConnectionsEncrypted = () => {
-    this.setState({ openConnectionsEncryptedList: !this.state.openConnectionsEncryptedList })
-  }
-
-  renderTotalAdsTrackersBlockedList = (url: string, hostname: string, onToggle: () => void) => {
-    return (
-      <BlockedResources
-        url={url}
-        hostname={hostname}
-        title={getLocale('blockAds')}
-        onToggle={onToggle}
-        stats={this.totalAdsTrackersBlocked}
-      >
-        <StaticList onClickDismiss={onToggle} list={this.totalAdsTrackersBlockedList} />
-      </BlockedResources>
-    )
-  }
-
-  renderConnectionsEncryptedList = (url: string, hostname: string, onToggle: () => void) => {
-    const { httpsRedirected, httpsRedirectedResources } = this.props
-    return (
-      <BlockedResources
-        url={url}
-        hostname={hostname}
-        title={getLocale('connectionsEncrypted')}
-        onToggle={onToggle}
-        stats={httpsRedirected}
-      >
-        <StaticList onClickDismiss={onToggle} list={httpsRedirectedResources} />
-      </BlockedResources>
-    )
-  }
-
-  render () {
-    const { braveShields, url, hostname, ads, trackers, httpsRedirected, httpUpgradableResources } = this.props
-    const { openTotalAdsTrackersBlockedList, openConnectionsEncryptedList } = this.state
-
-    const enabled = braveShields !== 'block'
-    const blockAdsOption = ads !== 'allow' && trackers !== 'allow'
-    const connectionsEncrypted = httpUpgradableResources !== 'allow'
-
-    if (!enabled) {
-      return null
-    }
-
-    return (
-      <div id='braveShieldsInterfaceControls'>
-        {/* ads toggle */}
-        <ToggleGrid>
-          <EmptyButton disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}><ShowMoreIcon /></EmptyButton>
-          <StatFlex disabled={this.totalAdsTrackersBlocked === 0} id='blockAdsStat' onClick={this.onToggleTotalAdsTrackersBlocked}>{blockedResourcesSize(this.totalAdsTrackersBlocked)}</StatFlex>
-          <ResourcesSwitchLabel disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}>{getLocale('blockAds')}</ResourcesSwitchLabel>
-          <ToggleFlex><Toggle id='blockAds' checked={blockAdsOption} onChange={this.onChangeBlockAds} /></ToggleFlex>
-        </ToggleGrid>
-        {
-          openTotalAdsTrackersBlockedList
-            ? this.renderTotalAdsTrackersBlockedList(url, hostname, this.onToggleTotalAdsTrackersBlocked)
-            : null
-        }
-        {/* connections encrypted toggle */}
-        <ToggleGrid>
-          <EmptyButton disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}><ShowMoreIcon /></EmptyButton>
-          <StatFlex disabled={httpsRedirected === 0} id='connectionsEncryptedStat' onClick={this.onToggleConnectionsEncrypted}>{blockedResourcesSize(httpsRedirected)}</StatFlex>
-          <ResourcesSwitchLabel disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}>{getLocale('connectionsEncrypted')}</ResourcesSwitchLabel>
-          <ToggleFlex><Toggle id='connectionsEncrypted' checked={connectionsEncrypted} onChange={this.onChangeConnectionsEncrypted} /></ToggleFlex>
-        </ToggleGrid>
-        {
-          openConnectionsEncryptedList
-            ? this.renderConnectionsEncryptedList(url, hostname, this.onToggleConnectionsEncrypted)
-            : null
-        }
-      </div>
-    )
-  }
-}
+// /* 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 {
+//   ShowMoreIcon,
+//   Toggle,
+//   StatFlex,
+//   ResourcesSwitchLabel,
+//   EmptyButton,
+//   ToggleFlex,
+//   ToggleGrid
+// } from 'brave-ui/features/shields'
+
+// // Component groups
+// import BlockedResources from './blockedResources/blockedResources'
+// import StaticList from './blockedResources/staticList'
+
+// // Types
+// import { BlockOptions } from '../types/other/blockTypes'
+
+// // Utils
+// import { getLocale } from '../background/api/localeAPI'
+// import * as shieldActions from '../types/actions/shieldsPanelActions'
+// import { totalAdsTrackersBlocked, blockedResourcesSize } from '../helpers/shieldsUtils'
+
+// export interface Props {
+//   braveShields: BlockOptions
+//   url: string
+//   hostname: string
+//   ads: BlockOptions
+//   adsBlocked: number
+//   adsBlockedResources: Array<string>
+//   blockAdsTrackers: shieldActions.BlockAdsTrackers
+//   trackers: BlockOptions
+//   trackersBlocked: number
+//   trackersBlockedResources: Array<string>
+//   httpsRedirected: number
+//   httpUpgradableResources: BlockOptions
+//   httpsRedirectedResources: Array<string>
+//   httpsEverywhereToggled: shieldActions.HttpsEverywhereToggled
+// }
+
+// interface State {
+//   openTotalAdsTrackersBlockedList: boolean,
+//   openConnectionsEncryptedList: boolean
+// }
+
+// export default class ShieldsInterfaceControls extends React.PureComponent<Props, State> {
+//   constructor (props: Props) {
+//     super(props)
+//     this.state = {
+//       openTotalAdsTrackersBlockedList: false,
+//       openConnectionsEncryptedList: false
+//     }
+//   }
+
+//   get totalAdsTrackersBlocked (): number {
+//     const { adsBlocked, trackersBlocked } = this.props
+//     return totalAdsTrackersBlocked(adsBlocked, trackersBlocked)
+//   }
+
+//   get totalAdsTrackersBlockedList (): Array<string> {
+//     const { adsBlockedResources, trackersBlockedResources } = this.props
+//     return [...adsBlockedResources, ...trackersBlockedResources]
+//   }
+
+//   onChangeBlockAds = (event: React.ChangeEvent<HTMLInputElement>) => {
+//     if (!event.target) {
+//       return
+//     }
+//     const shoudEnableAdsTracks = event.target.checked ? 'allow' : 'block'
+//     this.props.blockAdsTrackers(shoudEnableAdsTracks)
+//   }
+
+//   onChangeConnectionsEncrypted = (event: React.ChangeEvent<HTMLInputElement>) => {
+//     if (!event.target) {
+//       return
+//     }
+//     const shouldEnableHttpsEverywhere = event.target.checked ? 'allow' : 'block'
+//     this.props.httpsEverywhereToggled(shouldEnableHttpsEverywhere)
+//   }
+
+//   onToggleTotalAdsTrackersBlocked = () => {
+//     this.setState({ openTotalAdsTrackersBlockedList: !this.state.openTotalAdsTrackersBlockedList })
+//   }
+
+//   onToggleConnectionsEncrypted = () => {
+//     this.setState({ openConnectionsEncryptedList: !this.state.openConnectionsEncryptedList })
+//   }
+
+//   renderTotalAdsTrackersBlockedList = (url: string, hostname: string, onToggle: () => void) => {
+//     return (
+//       <BlockedResources
+//         url={url}
+//         hostname={hostname}
+//         title={getLocale('blockAds')}
+//         onToggle={onToggle}
+//         stats={this.totalAdsTrackersBlocked}
+//       >
+//         <StaticList onClickDismiss={onToggle} list={this.totalAdsTrackersBlockedList} />
+//       </BlockedResources>
+//     )
+//   }
+
+//   renderConnectionsEncryptedList = (url: string, hostname: string, onToggle: () => void) => {
+//     const { httpsRedirected, httpsRedirectedResources } = this.props
+//     return (
+//       <BlockedResources
+//         url={url}
+//         hostname={hostname}
+//         title={getLocale('connectionsEncrypted')}
+//         onToggle={onToggle}
+//         stats={httpsRedirected}
+//       >
+//         <StaticList onClickDismiss={onToggle} list={httpsRedirectedResources} />
+//       </BlockedResources>
+//     )
+//   }
+
+//   render () {
+//     const { braveShields, url, hostname, ads, trackers, httpsRedirected, httpUpgradableResources } = this.props
+//     const { openTotalAdsTrackersBlockedList, openConnectionsEncryptedList } = this.state
+
+//     const enabled = braveShields !== 'block'
+//     const blockAdsOption = ads !== 'allow' && trackers !== 'allow'
+//     const connectionsEncrypted = httpUpgradableResources !== 'allow'
+
+//     if (!enabled) {
+//       return null
+//     }
+
+//     return (
+//       <div id='braveShieldsInterfaceControls'>
+//         {/* ads toggle */}
+//         <ToggleGrid>
+//           <EmptyButton disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}><ShowMoreIcon /></EmptyButton>
+//           <StatFlex disabled={this.totalAdsTrackersBlocked === 0} id='blockAdsStat' onClick={this.onToggleTotalAdsTrackersBlocked}>{blockedResourcesSize(this.totalAdsTrackersBlocked)}</StatFlex>
+//           <ResourcesSwitchLabel disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}>{getLocale('blockAds')}</ResourcesSwitchLabel>
+//           <ToggleFlex><Toggle id='blockAds' checked={blockAdsOption} onChange={this.onChangeBlockAds} /></ToggleFlex>
+//         </ToggleGrid>
+//         {
+//           openTotalAdsTrackersBlockedList
+//             ? this.renderTotalAdsTrackersBlockedList(url, hostname, this.onToggleTotalAdsTrackersBlocked)
+//             : null
+//         }
+//         {/* connections encrypted toggle */}
+//         <ToggleGrid>
+//           <EmptyButton disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}><ShowMoreIcon /></EmptyButton>
+//           <StatFlex disabled={httpsRedirected === 0} id='connectionsEncryptedStat' onClick={this.onToggleConnectionsEncrypted}>{blockedResourcesSize(httpsRedirected)}</StatFlex>
+//           <ResourcesSwitchLabel disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}>{getLocale('connectionsEncrypted')}</ResourcesSwitchLabel>
+//           <ToggleFlex><Toggle id='connectionsEncrypted' checked={connectionsEncrypted} onChange={this.onChangeConnectionsEncrypted} /></ToggleFlex>
+//         </ToggleGrid>
+//         {
+//           openConnectionsEncryptedList
+//             ? this.renderConnectionsEncryptedList(url, hostname, this.onToggleConnectionsEncrypted)
+//             : null
+//         }
+//       </div>
+//     )
+//   }
+// }
diff --git a/components/brave_extension/extension/brave_extension/components/interfaceControls2.tsx b/components/brave_extension/extension/brave_extension/components/interfaceControls2.tsx
new file mode 100644
index 000000000000..2beda173b853
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/interfaceControls2.tsx
@@ -0,0 +1,70 @@
+/* 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'
+
+// Group Components
+import AdsTrackersControl from './controls/adsTrackersControl'
+import HTTPSUpgradesControl from './controls/httpsUpgradesControl'
+
+// Types
+import { BlockAdsTrackers, HttpsEverywhereToggled } from '../types/actions/shieldsPanelActions'
+import { BlockOptions } from '../types/other/blockTypes'
+
+interface CommonProps {
+  isBlockedListOpen: boolean
+  setBlockedListOpen: () => void
+  hostname: string
+  favicon: string
+}
+
+interface AdsTrackersProps {
+  ads: BlockOptions
+  adsBlocked: number
+  adsBlockedResources: Array<string>
+  trackers: BlockOptions
+  trackersBlocked: number
+  trackersBlockedResources: Array<string>
+  blockAdsTrackers: BlockAdsTrackers
+}
+
+interface HTTPSUpgradesProps {
+  httpsRedirected: number
+  httpUpgradableResources: BlockOptions
+  httpsRedirectedResources: Array<string>
+  httpsEverywhereToggled: HttpsEverywhereToggled
+}
+
+type Props = CommonProps & AdsTrackersProps & HTTPSUpgradesProps
+
+export default class InterfaceControls extends React.PureComponent<Props, {}> {
+  get commonProps (): CommonProps {
+    const { favicon, hostname, isBlockedListOpen, setBlockedListOpen } = this.props
+    return { favicon, hostname, isBlockedListOpen, setBlockedListOpen }
+  }
+
+  render () {
+    return (
+      <>
+        <AdsTrackersControl
+          {...this.commonProps}
+          ads={this.props.ads}
+          adsBlocked={this.props.adsBlocked}
+          adsBlockedResources={this.props.adsBlockedResources}
+          trackers={this.props.trackers}
+          trackersBlocked={this.props.trackersBlocked}
+          trackersBlockedResources={this.props.trackersBlockedResources}
+          blockAdsTrackers={this.props.blockAdsTrackers}
+        />
+        <HTTPSUpgradesControl
+          {...this.commonProps}
+          httpsRedirected={this.props.httpsRedirected}
+          httpUpgradableResources={this.props.httpUpgradableResources}
+          httpsRedirectedResources={this.props.httpsRedirectedResources}
+          httpsEverywhereToggled={this.props.httpsEverywhereToggled}
+        />
+      </>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/list/dynamic.tsx b/components/brave_extension/extension/brave_extension/components/list/dynamic.tsx
new file mode 100644
index 000000000000..4f1207b55f31
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/list/dynamic.tsx
@@ -0,0 +1,135 @@
+/* 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'
+
+import {
+  BlockedListHeader,
+  BlockedListSummary,
+  BlockedListContent,
+  BlockedListItemHeader,
+  BlockedListDynamic,
+  BlockedListItemWithOptions,
+  BlockedListFooterWithOptions,
+  ArrowUpIcon,
+  LinkAction,
+  Favicon,
+  SiteInfoText,
+  BlockedListSummaryText,
+  BlockedListItemHeaderStats,
+  BlockedListItemHeaderText,
+  ShieldsButton
+} from 'brave-ui/features/shields'
+
+// Locale
+import { getLocale } from '../../background/api/localeAPI'
+
+// Types
+import { NoScriptInfo } from '../../types/other/noScriptInfo'
+import {
+  AllowScriptOriginsOnce,
+  ChangeNoScriptSettings,
+  ChangeAllNoScriptSettings
+} from '../../types/actions/shieldsPanelActions'
+
+interface Props {
+  favicon: string
+  hostname: string
+  origin: string
+  name: string
+  list: NoScriptInfo
+  onClose?: (event?: React.MouseEvent<any>) => void
+  allowScriptOriginsOnce: AllowScriptOriginsOnce
+  changeNoScriptSettings: ChangeNoScriptSettings
+  changeAllNoScriptSettings: ChangeAllNoScriptSettings
+}
+
+export default class DynamicList extends React.PureComponent<Props, {}> {
+  getBlockedListSize = (isBlocked: boolean) => {
+    const { list } = this.props
+    return Object.keys(list)
+      .filter((origin: string) => list[origin].willBlock === isBlocked).length
+  }
+
+  onClickBlockOrAllowScript = (event: React.MouseEvent<HTMLButtonElement>) => {
+    this.props.changeNoScriptSettings(event.currentTarget.id)
+  }
+
+  onClickAllowOrBlockAll (shouldBlock: boolean) {
+    this.props.changeAllNoScriptSettings(shouldBlock)
+  }
+
+  onClickApplyScriptsOnce = () => {
+    const { list } = this.props
+    const allOrigins = Object.keys(list)
+    const allNonBlockedOrigins = allOrigins.filter(key => list[key].willBlock === false)
+    this.props.allowScriptOriginsOnce(allNonBlockedOrigins)
+  }
+
+  getList = (isBlocked: boolean) => {
+    const { list } = this.props
+    return Object.keys(list).map((origin, index) => {
+      if (list[origin].willBlock === isBlocked) {
+        return null
+      }
+      return (
+        <BlockedListItemWithOptions key={index}>
+          <span title={origin}>{origin}</span>
+          <LinkAction id={origin} onClick={this.onClickBlockOrAllowScript}>
+            {list[origin].willBlock ? getLocale('allow') : getLocale('block')}
+          </LinkAction>
+        </BlockedListItemWithOptions>
+      )
+    })
+  }
+
+  render () {
+    const { favicon, hostname, name, onClose } = this.props
+    return (
+      <BlockedListContent>
+        <BlockedListHeader>
+          <Favicon src={favicon} />
+          <SiteInfoText>{hostname}</SiteInfoText>
+        </BlockedListHeader>
+        <details open={true}>
+          <BlockedListSummary stats={false} onClick={onClose}>
+            <ArrowUpIcon />
+            <BlockedListSummaryText>{name}</BlockedListSummaryText>
+          </BlockedListSummary>
+          <BlockedListDynamic>
+            <BlockedListItemHeader id='blocked'>
+              <BlockedListItemHeaderStats>
+                {this.getBlockedListSize(true)}
+              </BlockedListItemHeaderStats>
+              <BlockedListItemHeaderText>{getLocale('blockedScripts')}</BlockedListItemHeaderText>
+              <LinkAction id='allowAll' onClick={this.onClickAllowOrBlockAll.bind(this, false)}>
+                {getLocale('allowAll')}
+              </LinkAction>
+            </BlockedListItemHeader>
+            {this.getList(false)}
+            <BlockedListItemHeader id='allowed'>
+              <BlockedListItemHeaderStats>
+              {this.getBlockedListSize(false)}
+              </BlockedListItemHeaderStats>
+              <BlockedListItemHeaderText>{getLocale('allowedScripts')}</BlockedListItemHeaderText>
+              <LinkAction id='blockAll' onClick={this.onClickAllowOrBlockAll.bind(this, true)}>
+                {getLocale('blockAll')}
+              </LinkAction>
+            </BlockedListItemHeader>
+            {this.getList(true)}
+          </BlockedListDynamic>
+        </details>
+        <BlockedListFooterWithOptions>
+          <LinkAction onClick={onClose}>{getLocale('cancel')}</LinkAction>
+          <ShieldsButton
+            onClick={this.onClickApplyScriptsOnce}
+            level='primary'
+            type='accent'
+            text={getLocale('applyOnce')}
+          />
+        </BlockedListFooterWithOptions>
+      </BlockedListContent>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/list/static.tsx b/components/brave_extension/extension/brave_extension/components/list/static.tsx
new file mode 100644
index 000000000000..ce6c8c569525
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/list/static.tsx
@@ -0,0 +1,67 @@
+/* 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'
+
+import {
+  BlockedListHeader,
+  BlockedListSummary,
+  BlockedListContent,
+  BlockedListStatic,
+  BlockedListItem,
+  BlockedListFooter,
+  ArrowUpIcon,
+  Favicon,
+  SiteInfoText,
+  BlockedInfoRowStats,
+  BlockedListSummaryText,
+  ShieldsButton
+} from 'brave-ui/features/shields'
+
+// Helpers
+import { blockedResourcesSize } from '../../helpers/shieldsUtils'
+
+// Locale
+import { getLocale } from '../../background/api/localeAPI'
+
+interface Props {
+  favicon: string
+  hostname: string
+  stats: number
+  name: string
+  list: Array<string>
+  onClose?: (event?: React.MouseEvent<any>) => void
+}
+
+export default class StaticList extends React.PureComponent<Props, {}> {
+  get statsDisplay (): string {
+    const { stats } = this.props
+    return blockedResourcesSize(stats)
+  }
+
+  render () {
+    const { favicon, hostname, name, list, onClose } = this.props
+    return (
+      <BlockedListContent>
+        <BlockedListHeader>
+          <Favicon src={favicon} />
+          <SiteInfoText>{hostname}</SiteInfoText>
+        </BlockedListHeader>
+        <details open={true}>
+          <BlockedListSummary onClick={onClose}>
+          <ArrowUpIcon />
+          <BlockedInfoRowStats>{this.statsDisplay}</BlockedInfoRowStats>
+          <BlockedListSummaryText>{name}</BlockedListSummaryText>
+          </BlockedListSummary>
+          <BlockedListStatic>
+            {list.map((item, index) => <BlockedListItem key={index}>{item}</BlockedListItem>)}
+          </BlockedListStatic>
+        </details>
+        <BlockedListFooter>
+          <ShieldsButton level='primary' type='accent' onClick={onClose} text={getLocale('goBack')} />
+        </BlockedListFooter>
+      </BlockedListContent>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/privacyControls.tsx b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
index 4f13107f1d61..28d4312c552b 100644
--- a/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
+++ b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
@@ -1,210 +1,210 @@
-/* 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 {
-  SelectBox,
-  StatFlex,
-  ClickableEmptySpace,
-  EmptyButton,
-  ShowMoreIcon,
-  SelectGrid
-} from 'brave-ui/features/shields'
-
-// Component groups
-import BlockedResources from './blockedResources/blockedResources'
-import StaticList from './blockedResources/staticList'
-import ScriptsList from './blockedResources/scriptsList'
-
-// Types
-import { BlockOptions, BlockCookiesOptions, BlockJSOptions, BlockFPOptions } from '../../types/other/blockTypes'
-import { NoScriptInfo } from '../../types/other/noScriptInfo'
-
-// Utils
-import * as shieldActions from '../../types/actions/shieldsPanelActions'
-import { getLocale } from '../../background/api/localeAPI'
-import { blockedResourcesSize } from '../../helpers/shieldsUtils'
-
-export interface Props {
-  url: string
-  hostname: string
-  origin: string
-  braveShields: BlockOptions
-  fingerprinting: BlockFPOptions
-  fingerprintingBlocked: number
-  blockFingerprinting: shieldActions.BlockFingerprinting
-  fingerprintingBlockedResources: Array<string>
-  javascript: BlockJSOptions
-  javascriptBlocked: number
-  blockJavaScript: shieldActions.BlockJavaScript
-  javascriptBlockedResources: Array<string>
-  noScriptInfo: NoScriptInfo
-  changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
-  changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
-  allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
-  blockCookies: shieldActions.BlockCookies
-  cookies: BlockCookiesOptions
-}
-
-interface State {
-  openScriptsBlockedList: boolean
-  openDeviceRecognitionList: boolean
-}
-
-export default class PrivacyControls extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = {
-      openScriptsBlockedList: false,
-      openDeviceRecognitionList: false
-    }
-  }
-
-  onToggleScriptsBlocked = () => {
-    this.setState({ openScriptsBlockedList: !this.state.openScriptsBlockedList })
-  }
-
-  onToggleDeviceRecognition = () => {
-    this.setState({ openDeviceRecognitionList: !this.state.openDeviceRecognitionList })
-  }
-
-  onChangeBlockCookies = (event: React.ChangeEvent<any>) => {
-    if (!event.target) {
-      return
-    }
-    this.props.blockCookies(event.target.value)
-  }
-
-  onChangeBlockScripts = (event: React.ChangeEvent<any>) => {
-    if (!event.target) {
-      return
-    }
-    this.props.blockJavaScript(event.target.value)
-  }
-
-  onChangeBlockDeviceRecognition = (event: React.ChangeEvent<any>) => {
-    if (!event.target) {
-      return
-    }
-    this.props.blockFingerprinting(event.target.value)
-  }
-
-  renderScriptsBlockedList = () => {
-    const {
-      url,
-      hostname,
-      origin,
-      noScriptInfo,
-      javascript,
-      blockJavaScript,
-      changeNoScriptSettings,
-      allowScriptOriginsOnce,
-      changeAllNoScriptSettings
-    } = this.props
-    return (
-      <BlockedResources
-        dynamic={true}
-        url={url}
-        hostname={hostname}
-        title={getLocale('scriptsOnThisSite')}
-        onToggle={this.onToggleScriptsBlocked}
-        stats={undefined}
-      >
-        <ScriptsList
-          origin={origin}
-          onClickDismiss={this.onToggleScriptsBlocked}
-          changeNoScriptSettings={changeNoScriptSettings}
-          allowScriptOriginsOnce={allowScriptOriginsOnce}
-          noScriptInfo={noScriptInfo}
-          changeAllNoScriptSettings={changeAllNoScriptSettings}
-          javascript={javascript}
-          blockJavaScript={blockJavaScript}
-        />
-      </BlockedResources>
-    )
-  }
-
-  renderDeviceRecognitionList = () => {
-    const { url, hostname, fingerprintingBlocked, fingerprintingBlockedResources } = this.props
-    return (
-      <BlockedResources
-        url={url}
-        hostname={hostname}
-        title={getLocale('deviceRecognitionAttempts')}
-        onToggle={this.onToggleDeviceRecognition}
-        stats={fingerprintingBlocked}
-      >
-        <StaticList onClickDismiss={this.onToggleDeviceRecognition} list={fingerprintingBlockedResources} />
-      </BlockedResources>
-    )
-  }
-
-  render () {
-    const {
-      braveShields,
-      fingerprinting,
-      fingerprintingBlocked,
-      javascript,
-      javascriptBlocked,
-      cookies
-    } = this.props
-    const { openScriptsBlockedList, openDeviceRecognitionList } = this.state
-    const enabled = braveShields !== 'block'
-
-    if (!enabled) {
-      return null
-    }
-
-    return (
-      <div id='braveShieldsPrivacyControls'>
-        {/* cookies select */}
-        <SelectGrid hasUserInteraction={false}>
-          <EmptyButton disabled={true} />
-          <StatFlex disabled={true} />
-          <SelectBox id='blockCookies' value={cookies} onChange={this.onChangeBlockCookies}>
-            <option value='block_third_party'>{getLocale('block3partyCookies')}</option>
-            <option value='block'>{getLocale('blockAllCookies')}</option>
-            <option value='allow'>{getLocale('allowAllCookies')}</option>
-          </SelectBox>
-          <ClickableEmptySpace />
-        </SelectGrid>
-
-        {/* scripts select */}
-        <SelectGrid hasUserInteraction={javascriptBlocked !== 0}>
-          <EmptyButton disabled={javascriptBlocked === 0} onClick={this.onToggleScriptsBlocked}><ShowMoreIcon /></EmptyButton>
-          <StatFlex disabled={javascriptBlocked === 0} id='blockScriptsStat' onClick={this.onToggleScriptsBlocked}>{blockedResourcesSize(javascriptBlocked)}</StatFlex>
-          <SelectBox id='blockScripts' value={javascript} onChange={this.onChangeBlockScripts}>
-            <option value='block'>{getLocale('blockAllScriptsOrigins')}</option>
-            <option value='allow'>{getLocale('allowAllScripts')}</option>
-          </SelectBox>
-          <ClickableEmptySpace disabled={javascriptBlocked === 0} onClick={this.onToggleScriptsBlocked} />
-          {
-            openScriptsBlockedList
-              ? this.renderScriptsBlockedList()
-              : null
-          }
-        </SelectGrid>
-
-        {/* fingerprinting select */}
-        <SelectGrid hasUserInteraction={fingerprintingBlocked !== 0}>
-          <EmptyButton disabled={fingerprintingBlocked === 0} onClick={this.onToggleDeviceRecognition}><ShowMoreIcon /></EmptyButton>
-          <StatFlex disabled={fingerprintingBlocked === 0} id='blockFingerprintingStat' onClick={this.onToggleDeviceRecognition}>{blockedResourcesSize(fingerprintingBlocked)}</StatFlex>
-          <SelectBox id='blockFingerprinting' value={fingerprinting} onChange={this.onChangeBlockDeviceRecognition}>
-            <option value='block_third_party'>{getLocale('block3partyFingerprinting')}</option>
-            <option value='block'>{getLocale('blockAllFingerprinting')}</option>
-            <option value='allow'>{getLocale('allowAllFingerprinting')}</option>
-          </SelectBox>
-          <ClickableEmptySpace disabled={fingerprintingBlocked === 0} onClick={this.onToggleDeviceRecognition} />
-          {
-            openDeviceRecognitionList
-              ? this.renderDeviceRecognitionList()
-              : null
-          }
-        </SelectGrid>
-      </div>
-    )
-  }
-}
+// /* 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 {
+//   SelectBox,
+//   StatFlex,
+//   ClickableEmptySpace,
+//   EmptyButton,
+//   ShowMoreIcon,
+//   SelectGrid
+// } from 'brave-ui/features/shields'
+
+// // Component groups
+// import BlockedResources from './blockedResources/blockedResources'
+// import StaticList from './blockedResources/staticList'
+// import ScriptsList from './blockedResources/scriptsList'
+
+// // Types
+// import { BlockOptions, BlockCookiesOptions, BlockJSOptions, BlockFPOptions } from '../types/other/blockTypes'
+// import { NoScriptInfo } from '../types/other/noScriptInfo'
+
+// // Utils
+// import * as shieldActions from '../types/actions/shieldsPanelActions'
+// import { getLocale } from '../background/api/localeAPI'
+// import { blockedResourcesSize } from '../helpers/shieldsUtils'
+
+// export interface Props {
+//   url: string
+//   hostname: string
+//   origin: string
+//   braveShields: BlockOptions
+//   fingerprinting: BlockFPOptions
+//   fingerprintingBlocked: number
+//   blockFingerprinting: shieldActions.BlockFingerprinting
+//   fingerprintingBlockedResources: Array<string>
+//   javascript: BlockJSOptions
+//   javascriptBlocked: number
+//   blockJavaScript: shieldActions.BlockJavaScript
+//   javascriptBlockedResources: Array<string>
+//   noScriptInfo: NoScriptInfo
+//   changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
+//   changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
+//   allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
+//   blockCookies: shieldActions.BlockCookies
+//   cookies: BlockCookiesOptions
+// }
+
+// interface State {
+//   openScriptsBlockedList: boolean
+//   openDeviceRecognitionList: boolean
+// }
+
+// export default class PrivacyControls extends React.PureComponent<Props, State> {
+//   constructor (props: Props) {
+//     super(props)
+//     this.state = {
+//       openScriptsBlockedList: false,
+//       openDeviceRecognitionList: false
+//     }
+//   }
+
+//   onToggleScriptsBlocked = () => {
+//     this.setState({ openScriptsBlockedList: !this.state.openScriptsBlockedList })
+//   }
+
+//   onToggleDeviceRecognition = () => {
+//     this.setState({ openDeviceRecognitionList: !this.state.openDeviceRecognitionList })
+//   }
+
+//   onChangeBlockCookies = (event: React.ChangeEvent<any>) => {
+//     if (!event.target) {
+//       return
+//     }
+//     this.props.blockCookies(event.target.value)
+//   }
+
+//   onChangeBlockScripts = (event: React.ChangeEvent<any>) => {
+//     if (!event.target) {
+//       return
+//     }
+//     this.props.blockJavaScript(event.target.value)
+//   }
+
+//   onChangeBlockDeviceRecognition = (event: React.ChangeEvent<any>) => {
+//     if (!event.target) {
+//       return
+//     }
+//     this.props.blockFingerprinting(event.target.value)
+//   }
+
+//   renderScriptsBlockedList = () => {
+//     const {
+//       url,
+//       hostname,
+//       origin,
+//       noScriptInfo,
+//       javascript,
+//       blockJavaScript,
+//       changeNoScriptSettings,
+//       allowScriptOriginsOnce,
+//       changeAllNoScriptSettings
+//     } = this.props
+//     return (
+//       <BlockedResources
+//         dynamic={true}
+//         url={url}
+//         hostname={hostname}
+//         title={getLocale('scriptsOnThisSite')}
+//         onToggle={this.onToggleScriptsBlocked}
+//         stats={undefined}
+//       >
+//         <ScriptsList
+//           origin={origin}
+//           onClickDismiss={this.onToggleScriptsBlocked}
+//           changeNoScriptSettings={changeNoScriptSettings}
+//           allowScriptOriginsOnce={allowScriptOriginsOnce}
+//           noScriptInfo={noScriptInfo}
+//           changeAllNoScriptSettings={changeAllNoScriptSettings}
+//           javascript={javascript}
+//           blockJavaScript={blockJavaScript}
+//         />
+//       </BlockedResources>
+//     )
+//   }
+
+//   renderDeviceRecognitionList = () => {
+//     const { url, hostname, fingerprintingBlocked, fingerprintingBlockedResources } = this.props
+//     return (
+//       <BlockedResources
+//         url={url}
+//         hostname={hostname}
+//         title={getLocale('deviceRecognitionAttempts')}
+//         onToggle={this.onToggleDeviceRecognition}
+//         stats={fingerprintingBlocked}
+//       >
+//         <StaticList onClickDismiss={this.onToggleDeviceRecognition} list={fingerprintingBlockedResources} />
+//       </BlockedResources>
+//     )
+//   }
+
+//   render () {
+//     const {
+//       braveShields,
+//       fingerprinting,
+//       fingerprintingBlocked,
+//       javascript,
+//       javascriptBlocked,
+//       cookies
+//     } = this.props
+//     const { openScriptsBlockedList, openDeviceRecognitionList } = this.state
+//     const enabled = braveShields !== 'block'
+
+//     if (!enabled) {
+//       return null
+//     }
+
+//     return (
+//       <div id='braveShieldsPrivacyControls'>
+//         {/* cookies select */}
+//         <SelectGrid hasUserInteraction={false}>
+//           <EmptyButton disabled={true} />
+//           <StatFlex disabled={true} />
+//           <SelectBox id='blockCookies' value={cookies} onChange={this.onChangeBlockCookies}>
+//             <option value='block_third_party'>{getLocale('block3partyCookies')}</option>
+//             <option value='block'>{getLocale('blockAllCookies')}</option>
+//             <option value='allow'>{getLocale('allowAllCookies')}</option>
+//           </SelectBox>
+//           <ClickableEmptySpace />
+//         </SelectGrid>
+
+//         {/* scripts select */}
+//         <SelectGrid hasUserInteraction={javascriptBlocked !== 0}>
+//           <EmptyButton disabled={javascriptBlocked === 0} onClick={this.onToggleScriptsBlocked}><ShowMoreIcon /></EmptyButton>
+//           <StatFlex disabled={javascriptBlocked === 0} id='blockScriptsStat' onClick={this.onToggleScriptsBlocked}>{blockedResourcesSize(javascriptBlocked)}</StatFlex>
+//           <SelectBox id='blockScripts' value={javascript} onChange={this.onChangeBlockScripts}>
+//             <option value='block'>{getLocale('blockAllScriptsOrigins')}</option>
+//             <option value='allow'>{getLocale('allowAllScripts')}</option>
+//           </SelectBox>
+//           <ClickableEmptySpace disabled={javascriptBlocked === 0} onClick={this.onToggleScriptsBlocked} />
+//           {
+//             openScriptsBlockedList
+//               ? this.renderScriptsBlockedList()
+//               : null
+//           }
+//         </SelectGrid>
+
+//         {/* fingerprinting select */}
+//         <SelectGrid hasUserInteraction={fingerprintingBlocked !== 0}>
+//           <EmptyButton disabled={fingerprintingBlocked === 0} onClick={this.onToggleDeviceRecognition}><ShowMoreIcon /></EmptyButton>
+//           <StatFlex disabled={fingerprintingBlocked === 0} id='blockFingerprintingStat' onClick={this.onToggleDeviceRecognition}>{blockedResourcesSize(fingerprintingBlocked)}</StatFlex>
+//           <SelectBox id='blockFingerprinting' value={fingerprinting} onChange={this.onChangeBlockDeviceRecognition}>
+//             <option value='block_third_party'>{getLocale('block3partyFingerprinting')}</option>
+//             <option value='block'>{getLocale('blockAllFingerprinting')}</option>
+//             <option value='allow'>{getLocale('allowAllFingerprinting')}</option>
+//           </SelectBox>
+//           <ClickableEmptySpace disabled={fingerprintingBlocked === 0} onClick={this.onToggleDeviceRecognition} />
+//           {
+//             openDeviceRecognitionList
+//               ? this.renderDeviceRecognitionList()
+//               : null
+//           }
+//         </SelectGrid>
+//       </div>
+//     )
+//   }
+// }
diff --git a/components/brave_extension/extension/brave_extension/components/privacyControls2.tsx b/components/brave_extension/extension/brave_extension/components/privacyControls2.tsx
new file mode 100644
index 000000000000..9e301da169fb
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/privacyControls2.tsx
@@ -0,0 +1,89 @@
+/* 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'
+
+// Group Components
+import ScriptsControl from './controls/scriptsControl'
+import CookiesControl from './controls/cookiesControl'
+import DeviceRecognitionControl from './controls/deviceRecognitionControl'
+
+// Types
+import {
+  ChangeNoScriptSettings,
+  BlockJavaScript,
+  ChangeAllNoScriptSettings,
+  AllowScriptOriginsOnce,
+  BlockCookies,
+  BlockFingerprinting
+} from '../types/actions/shieldsPanelActions'
+import { BlockCookiesOptions, BlockJSOptions, BlockFPOptions } from '../types/other/blockTypes'
+import { NoScriptInfo } from '../types/other/noScriptInfo'
+
+interface CommonProps {
+  isBlockedListOpen: boolean
+  setBlockedListOpen: () => void
+  hostname: string
+  favicon: string
+}
+
+interface JavaScriptProps {
+  javascript: BlockJSOptions
+  javascriptBlocked: number
+  noScriptInfo: NoScriptInfo
+  changeNoScriptSettings: ChangeNoScriptSettings
+  blockJavaScript: BlockJavaScript
+  changeAllNoScriptSettings: ChangeAllNoScriptSettings
+  allowScriptOriginsOnce: AllowScriptOriginsOnce
+}
+
+interface CookiesProps {
+  blockCookies: BlockCookies
+  cookies: BlockCookiesOptions
+}
+
+interface FingerprintingProps {
+  fingerprinting: BlockFPOptions
+  fingerprintingBlocked: number
+  fingerprintingBlockedResources: Array<string>
+  blockFingerprinting: BlockFingerprinting
+}
+
+type Props = CommonProps & JavaScriptProps & CookiesProps & FingerprintingProps
+
+export default class PrivacyControls extends React.PureComponent<Props, {}> {
+  get commonProps (): CommonProps {
+    const { favicon, hostname, isBlockedListOpen, setBlockedListOpen } = this.props
+    return { favicon, hostname, isBlockedListOpen, setBlockedListOpen }
+  }
+
+  render () {
+    return (
+      <>
+        <ScriptsControl
+          {...this.commonProps}
+          javascript={this.props.javascript}
+          javascriptBlocked={this.props.javascriptBlocked}
+          noScriptInfo={this.props.noScriptInfo}
+          changeNoScriptSettings={this.props.changeNoScriptSettings}
+          blockJavaScript={this.props.blockJavaScript}
+          changeAllNoScriptSettings={this.props.changeAllNoScriptSettings}
+          allowScriptOriginsOnce={this.props.allowScriptOriginsOnce}
+        />
+        <CookiesControl
+          isBlockedListOpen={this.props.isBlockedListOpen}
+          cookies={this.props.cookies}
+          blockCookies={this.props.blockCookies}
+        />
+        <DeviceRecognitionControl
+          {...this.commonProps}
+          fingerprintingBlocked={this.props.fingerprintingBlocked}
+          fingerprinting={this.props.fingerprinting}
+          fingerprintingBlockedResources={this.props.fingerprintingBlockedResources}
+          blockFingerprinting={this.props.blockFingerprinting}
+        />
+      </>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/containers/braveShields.tsx b/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
index 13bcd5c5f5b0..3e0e850337ef 100644
--- a/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
+++ b/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
@@ -6,7 +6,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as shieldsPanelActions from '../actions/shieldsPanelActions'
 import * as shieldsPanelState from '../state/shieldsPanelState'
-import BraveShields from '../components/braveShields/braveShields'
+import BraveShields from '../components/braveShields2'
 import { State } from '../types/state/mainState'
 
 const mapStateToProps = (state: State) => ({
diff --git a/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts b/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts
index 0860c2f6bc1a..1c6ace3567c9 100644
--- a/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts
+++ b/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts
@@ -3,6 +3,8 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { Tab } from '../types/state/shieldsPannelState'
+import { BlockOptions } from '../types/other/blockTypes'
+import { getLocale } from '../background/api/localeAPI'
 
 export const getTotalResourcesBlocked = (tabData: Partial<Tab>) => {
   if (!tabData) {
@@ -29,5 +31,53 @@ export const blockedResourcesSize = (blockedResources: number) => {
   if (blockedResources > 99) {
     return '99+'
   }
+  if (!blockedResources) {
+    return '0'
+  }
   return blockedResources.toString()
 }
+
+export const isShieldsEnabled = (braveShields: BlockOptions) => braveShields !== 'block'
+
+export const getTabIndexValueBasedOnProps = (
+  isBlockedListOpen: boolean,
+  numberOfBlockedItems: number
+): number => {
+  return (isBlockedListOpen || numberOfBlockedItems === 0) ? -1 : 0
+}
+
+export const getTotalBlockedSizeStrings = (blockedItems: number, httpsUpgrades: number) => {
+  if (blockedItems === 0 && httpsUpgrades === 0) {
+    return `${getLocale('itemsBlocked')} ${getLocale('and')} ${getLocale('connectionsUpgraded')}`
+  } else if (blockedItems === 1 && httpsUpgrades === 0) {
+    return getLocale('itemBlocked')
+  } else if (blockedItems === 0 && httpsUpgrades === 1) {
+    return getLocale('connectionUpgradedHTTPS')
+  } else if (blockedItems > 1 && httpsUpgrades === 0) {
+    return getLocale('itemsBlocked')
+  } else if (blockedItems === 0 && httpsUpgrades > 1) {
+    return getLocale('connectionsUpgradedHTTPS')
+  } else {
+    return `${getLocale('itemsBlocked')} ${getLocale('and')} ${getLocale('connectionsUpgraded')}`
+  }
+}
+
+export const getToggleStateViaEventTarget = (event: React.ChangeEvent<HTMLInputElement>) => {
+  return event.target.checked ? 'allow' : 'block'
+}
+
+export const maybeBlockResource = (resouce: BlockOptions) => {
+  return resouce !== 'allow'
+}
+
+export const maybeDisableResourcesRow = (resource: number) => {
+  return resource === 0
+}
+
+export const sumAdsAndTrackers = (ads: number, trackers: number) => {
+  return ads + trackers
+}
+
+export const mergeAdsAndTrackersResources = (ads: Array<string>, trackers: Array<string>) => {
+  return [ ...ads, ...trackers ]
+}
diff --git a/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts b/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts
index 80daa868c669..27185feca05c 100644
--- a/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts
+++ b/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts
@@ -118,11 +118,8 @@ export const resetNoScriptInfo: shieldState.ResetNoScriptInfo = (state, tabId, n
   return { ...state, tabs }
 }
 
-export const changeAllNoScriptSettings: shieldState.ChangeAllNoScriptSettings = (state, tabId, newOrigin, shouldBlock) => {
+export const changeAllNoScriptSettings: shieldState.ChangeAllNoScriptSettings = (state, tabId, shouldBlock) => {
   const tabs: shieldState.Tabs = { ...state.tabs }
-  if (newOrigin !== tabs[tabId].origin) { // navigate away
-    tabs[tabId].noScriptInfo = {}
-  }
   Object.keys(tabs[tabId].noScriptInfo).map(key => {
     tabs[tabId].noScriptInfo[key].willBlock = shouldBlock
   })
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 7da6060c82d6..39b2eec91521 100644
--- a/components/brave_extension/extension/brave_extension/types/actions/shieldsPanelActions.ts
+++ b/components/brave_extension/extension/brave_extension/types/actions/shieldsPanelActions.ts
@@ -124,12 +124,11 @@ export interface ChangeNoScriptSettings {
 
 interface ChangeAllNoScriptSettingsReturn {
   type: types.CHANGE_ALL_NO_SCRIPT_SETTINGS,
-  origin: string,
   shouldBlock: boolean
 }
 
 export interface ChangeAllNoScriptSettings {
-  (origin: string, shouldBlock: boolean): ChangeAllNoScriptSettingsReturn
+  (shouldBlock: boolean): ChangeAllNoScriptSettingsReturn
 }
 
 export type shieldPanelActions =
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 36accaa2dc5e..6592bed8b8f8 100644
--- a/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts
+++ b/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts
@@ -90,5 +90,5 @@ export interface ResetNoScriptInfo {
 }
 
 export interface ChangeAllNoScriptSettings {
-  (state: State, tabId: number, newOrigin: string, shouldBlock: boolean): State
+  (state: State, tabId: number, shouldBlock: boolean): State
 }

From adcb11045bcf1f9f033d0a6a85c0e80a75488630 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Thu, 7 Mar 2019 22:04:11 -0300
Subject: [PATCH 04/16] add emptykit.css to shields

---
 .../extension/brave_extension/components/braveShields2.tsx     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/brave_extension/extension/brave_extension/components/braveShields2.tsx b/components/brave_extension/extension/brave_extension/components/braveShields2.tsx
index bd84ce80db1f..d54243aed608 100644
--- a/components/brave_extension/extension/brave_extension/components/braveShields2.tsx
+++ b/components/brave_extension/extension/brave_extension/components/braveShields2.tsx
@@ -4,6 +4,9 @@
 
 import * as React from 'react'
 
+// CSS normalizer
+import 'emptykit.css'
+
 // Feature-specific components
 import { ShieldsPanel } from 'brave-ui/features/shields'
 

From 809859fcba311688f897e61e78a5d4181efaff5c Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Thu, 7 Mar 2019 23:22:09 -0300
Subject: [PATCH 05/16] remove old shields files

---
 .../extension/brave_extension/BUILD.gn        |   8 -
 .../blockedResources/blockedResources.tsx     |  61 ----
 .../blockedResources/scriptsList.tsx          | 187 -----------
 .../blockedResources/staticList.tsx           |  35 --
 .../components/braveShields.tsx               | 223 ++++++++-----
 .../components/braveShields2.tsx              | 149 ---------
 .../brave_extension/components/footer.tsx     |  59 ++--
 .../brave_extension/components/footer2.tsx    |  39 ---
 .../brave_extension/components/header.tsx     | 196 +++++++-----
 .../brave_extension/components/header2.tsx    | 123 -------
 .../components/interfaceControls.tsx          | 235 ++++----------
 .../components/interfaceControls2.tsx         |  70 ----
 .../components/privacyControls.tsx            | 299 ++++++------------
 .../components/privacyControls2.tsx           |  89 ------
 .../containers/braveShields.tsx               |   2 +-
 .../brave_extension/helpers/shieldsUtils.ts   |   4 -
 .../components/braveShields/footer_test.tsx   |   2 +-
 17 files changed, 452 insertions(+), 1329 deletions(-)
 delete mode 100644 components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx
 delete mode 100644 components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
 delete mode 100644 components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
 delete mode 100644 components/brave_extension/extension/brave_extension/components/braveShields2.tsx
 delete mode 100644 components/brave_extension/extension/brave_extension/components/footer2.tsx
 delete mode 100644 components/brave_extension/extension/brave_extension/components/header2.tsx
 delete mode 100644 components/brave_extension/extension/brave_extension/components/interfaceControls2.tsx
 delete mode 100644 components/brave_extension/extension/brave_extension/components/privacyControls2.tsx

diff --git a/components/brave_extension/extension/brave_extension/BUILD.gn b/components/brave_extension/extension/brave_extension/BUILD.gn
index dd6833266dee..10f4e248c874 100644
--- a/components/brave_extension/extension/brave_extension/BUILD.gn
+++ b/components/brave_extension/extension/brave_extension/BUILD.gn
@@ -41,18 +41,10 @@ transpile_web_ui("brave_extension") {
     "background/store.ts",
     "braveShieldsPanel.tsx",
     "components/braveShields.tsx",
-    "components/braveShields2.tsx",
     "components/footer.tsx",
-    "components/footer2.tsx",
     "components/header.tsx",
-    "components/header2.tsx",
     "components/interfaceControls.tsx",
-    "components/interfaceControls2.tsx",
     "components/privacyControls.tsx",
-    "components/privacyControls2.tsx",
-    "components/blockedResources/blockedResources.tsx",
-    "components/blockedResources/scriptsList.tsx",
-    "components/blockedResources/staticList.tsx",
     "components/controls/adsTrackersControl.tsx",
     "components/controls/cookiesControl.tsx",
     "components/controls/deviceRecognitionControl.tsx",
diff --git a/components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx
deleted file mode 100644
index aa02e471cd03..000000000000
--- a/components/brave_extension/extension/brave_extension/components/blockedResources/blockedResources.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// /* 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 {
-//   Label,
-//   ResourcesGrid,
-//   ResourcesSiteInfoGrid,
-//   CloseButton,
-//   CloseIcon,
-//   EmptyButton,
-//   StatFlex,
-//   ShowLessIcon,
-//   ResourcesStatusTitle,
-//   ResourcesSiteInfoFlex,
-//   ResourcesStatusGrid
-// } from 'brave-ui/features/shields'
-
-// // Utils
-// import { getFavicon } from '../../helpers/shieldsUtils'
-
-// interface Props {
-//   hostname: string
-//   stats: number | undefined
-//   title: string
-//   url: string
-//   onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void
-//   dynamic?: boolean
-// }
-
-// export default class BlockedResources extends React.PureComponent<Props, {}> {
-//   renderHeader = (stats: number | undefined, title: string, onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void) => {
-//     return (
-//       <ResourcesStatusGrid withStats={stats !== undefined} onClick={onToggle}>
-//         <EmptyButton><ShowLessIcon /></EmptyButton>
-//         {stats !== undefined ? <StatFlex>{stats}</StatFlex> : null}
-//         <ResourcesStatusTitle>{title}</ResourcesStatusTitle>
-//       </ResourcesStatusGrid>
-//     )
-//   }
-
-//   render () {
-//     const { stats, hostname, title, url, onToggle, children } = this.props
-//     return (
-//       <ResourcesGrid>
-//         <ResourcesSiteInfoFlex>
-//           <ResourcesSiteInfoGrid>
-//             <img src={getFavicon(url)} />
-//             <Label size='large'>{hostname}</Label>
-//           </ResourcesSiteInfoGrid>
-//           <CloseButton onClick={onToggle}><CloseIcon /></CloseButton>
-//         </ResourcesSiteInfoFlex>
-//         {this.renderHeader(stats, title, onToggle)}
-//         {children}
-//       </ResourcesGrid>
-//     )
-//   }
-// }
diff --git a/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
deleted file mode 100644
index 2bb2dd524f73..000000000000
--- a/components/brave_extension/extension/brave_extension/components/blockedResources/scriptsList.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-// /* 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 {
-//   AllowedScriptsIcon,
-//   BlockedScriptsIcon,
-//   DismissOverlay,
-//   ResourcesListScroll,
-//   ResourcesSubTitle,
-//   ResourcesFooterGrid,
-//   ResourcesFooterGridColumnLeft,
-//   ResourcesFooterGridColumnRight,
-//   ResourcesListItem,
-//   Link,
-//   ResourcesListAllowedLink,
-//   ResourcesListBlockedLink,
-//   ResourcesSubTitleGrid,
-//   ResourcesListGrid
-// } from 'brave-ui/features/shields'
-
-// // Shared components
-// import { Button } from 'brave-ui/components'
-
-// // Types
-// import * as shieldActions from '../../types/actions/shieldsPanelActions'
-// import { BlockJSOptions } from '../../types/other/blockTypes'
-// import { NoScriptInfo } from '../../types/other/noScriptInfo'
-
-// // Utils
-// import { getLocale } from '../../background/api/localeAPI'
-
-// interface Props {
-//   origin: string
-//   noScriptInfo: NoScriptInfo
-//   onClickDismiss: () => void
-//   javascript: BlockJSOptions
-//   blockJavaScript: shieldActions.BlockJavaScript
-//   allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
-//   changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
-//   changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
-// }
-
-// interface State {
-//   showApplyOptions: boolean
-// }
-
-// export default class StaticList extends React.PureComponent<Props, State> {
-//   constructor (props: Props) {
-//     super(props)
-//     this.state = { showApplyOptions: false }
-//   }
-
-//   get blockedListSize () {
-//     const { noScriptInfo } = this.props
-//     return Object.keys(noScriptInfo)
-//       .filter((origin: string) => noScriptInfo[origin].willBlock === true).length
-//   }
-
-//   get allowedListSize () {
-//     const { noScriptInfo } = this.props
-//     return Object.keys(noScriptInfo)
-//       .filter((origin: string) => noScriptInfo[origin].willBlock === false).length
-//   }
-
-//   onClickOutsideBounds = () => {
-//     this.setState({ showApplyOptions: false })
-//   }
-
-//   onClickToggleBlockOrAllowScript = (event: React.MouseEvent<HTMLAnchorElement>) => {
-//     event.preventDefault()
-//     this.props.changeNoScriptSettings(event.currentTarget.id)
-//   }
-
-//   onClickBlockAll = (event: React.MouseEvent<HTMLAnchorElement>) => {
-//     event.preventDefault()
-//     const { origin } = this.props
-//     this.props.changeAllNoScriptSettings(origin, true)
-//   }
-
-//   onClickAllowAll = (event: React.MouseEvent<HTMLAnchorElement>) => {
-//     event.preventDefault()
-//     const { origin } = this.props
-//     this.props.changeAllNoScriptSettings(origin, false)
-//     this.setState({ showApplyOptions: false })
-//   }
-
-//   onClickApplyScriptsOnce = () => {
-//     const { noScriptInfo } = this.props
-//     const allOrigins = Object.keys(noScriptInfo)
-//     this.props.allowScriptOriginsOnce(allOrigins.filter(key => noScriptInfo[key].willBlock === false))
-//   }
-
-//   renderEnabledList = (list: NoScriptInfo) => {
-//     return Object.keys(list).map((origin: string, key: number) => {
-//       if (list[origin].willBlock === false) {
-//         return null
-//       }
-//       return (
-//         <ResourcesListGrid hightlighted={true} key={key}>
-//           {
-//             list[origin].willBlock
-//               ? <ResourcesListBlockedLink>{getLocale('blocked')}</ResourcesListBlockedLink>
-//               : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('allow')}</Link>
-//           }
-//           <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
-//           {
-//             list[origin].willBlock
-//               ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('undo')}</Link>
-//               : null
-//           }
-//         </ResourcesListGrid>
-//       )
-//     })
-//   }
-
-//   renderDisabledList = (list: NoScriptInfo) => {
-//     return Object.keys(list).map((origin: string, key: number) => {
-//       if (list[origin].willBlock === true) {
-//         return null
-//       }
-//       return (
-//         <ResourcesListGrid hightlighted={list[origin].willBlock} key={key}>
-//           {
-//             list[origin].willBlock
-//               ? <ResourcesListAllowedLink>{getLocale('allowed')}</ResourcesListAllowedLink>
-//               : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('block')}</Link>
-//           }
-//           <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
-//           {
-//             list[origin].willBlock
-//               ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getLocale('undo')}</Link>
-//             : null
-//           }
-//         </ResourcesListGrid>
-//       )
-//     })
-//   }
-
-//   render () {
-//     const { showApplyOptions } = this.state
-//     const { noScriptInfo, onClickDismiss } = this.props
-//     return (
-//       <>
-//         <ResourcesListScroll>
-//           {showApplyOptions ? <DismissOverlay onClick={this.onClickOutsideBounds} /> : null}
-//           {/* blocked scripts */}
-//           <ResourcesSubTitleGrid>
-//             <BlockedScriptsIcon />
-//             <ResourcesSubTitle accent='blocked'>
-//               {getLocale('blockedScripts')} ({this.blockedListSize})
-//             </ResourcesSubTitle>
-//             <Link onClick={this.onClickAllowAll}>{getLocale('allowAll')}</Link>
-//           </ResourcesSubTitleGrid>
-//           {this.renderEnabledList(noScriptInfo)}
-
-//           {/* allowed scripts */}
-//           <ResourcesSubTitleGrid>
-//             <AllowedScriptsIcon />
-//             <ResourcesSubTitle accent='allowed'>
-//               {getLocale('allowedScripts')} ({this.allowedListSize})
-//             </ResourcesSubTitle>
-//             <Link onClick={this.onClickBlockAll}>{getLocale('blockAll')}</Link>
-//           </ResourcesSubTitleGrid>
-//           {this.renderDisabledList(noScriptInfo)}
-
-//         </ResourcesListScroll>
-//         <ResourcesFooterGrid>
-//           <ResourcesFooterGridColumnLeft>
-//             <Link onClick={onClickDismiss}>{getLocale('cancel')}</Link>
-//           </ResourcesFooterGridColumnLeft>
-//           <ResourcesFooterGridColumnRight>
-//             <Button
-//               level='primary'
-//               type='accent'
-//               text={getLocale('applyOnce')}
-//               onClick={this.onClickApplyScriptsOnce}
-//             />
-//           </ResourcesFooterGridColumnRight>
-//         </ResourcesFooterGrid>
-//       </>
-//     )
-//   }
-// }
diff --git a/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx b/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
deleted file mode 100644
index c814eb4fe95e..000000000000
--- a/components/brave_extension/extension/brave_extension/components/blockedResources/staticList.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// /* 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 { ResourcesListText, ResourcesListScroll, ResourcesFooterFlex } from 'brave-ui/features/shields'
-
-// // Shared components
-// import { Button } from 'brave-ui/components'
-
-// // Utils
-// import { getLocale } from '../../background/api/localeAPI'
-
-// interface Props {
-//   list: Array<string>
-//   onClickDismiss: () => void
-// }
-
-// export default class StaticList extends React.PureComponent<Props, {}> {
-//   render () {
-//     const { list, onClickDismiss } = this.props
-//     return (
-//       <>
-//         <ResourcesListScroll>
-//           {list.map((item: string, index: number) => <ResourcesListText title={item} key={index}>{item}</ResourcesListText>)}
-//         </ResourcesListScroll>
-//         <ResourcesFooterFlex>
-//           <Button level='primary' type='accent' text={getLocale('goBack')} onClick={onClickDismiss} />
-//         </ResourcesFooterFlex>
-//       </>
-//     )
-//   }
-// }
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields.tsx b/components/brave_extension/extension/brave_extension/components/braveShields.tsx
index adec4feeb0bd..bc043f05fb40 100644
--- a/components/brave_extension/extension/brave_extension/components/braveShields.tsx
+++ b/components/brave_extension/extension/brave_extension/components/braveShields.tsx
@@ -1,86 +1,149 @@
-// /* 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/. */
+/* 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'
+import * as React from 'react'
 
-// // Components group
-// import ShieldsHeader from './header'
-// import ShieldsInterfaceControls from './interfaceControls'
-// import ShieldsPrivacyControls from './privacyControls'
-// import ShieldsFooter from './footer'
+// CSS normalizer
+import 'emptykit.css'
 
-// // Utils
-// import { ShieldsPanel } from 'brave-ui/features/shields'
-// import * as shieldActions from '../types/actions/shieldsPanelActions'
-// import { Tab } from '../types/state/shieldsPannelState'
+// Feature-specific components
+import { ShieldsPanel } from 'brave-ui/features/shields'
 
-// interface Props {
-//   actions: {
-//     shieldsToggled: shieldActions.ShieldsToggled
-//     blockAdsTrackers: shieldActions.BlockAdsTrackers
-//     httpsEverywhereToggled: shieldActions.HttpsEverywhereToggled
-//     blockJavaScript: shieldActions.BlockJavaScript
-//     blockFingerprinting: shieldActions.BlockFingerprinting
-//     blockCookies: shieldActions.BlockCookies
-//     allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
-//     changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
-//     changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
-//   }
-//   shieldsPanelTabData: Tab
-// }
+// Components group
+import Header from './header'
+import InterfaceControls from './interfaceControls'
+import PrivacyControls from './privacyControls'
+import Footer from './footer'
 
-// export default class BraveShields extends React.Component<Props, {}> {
-//   render () {
-//     const { shieldsPanelTabData, actions } = this.props
-//     if (!shieldsPanelTabData) {
-//       return null
-//     }
+// Types
+import { Tab } from '../types/state/shieldsPannelState'
+import { isShieldsEnabled, getFavicon } from '../helpers/shieldsUtils'
+import {
+  ShieldsToggled,
+  BlockAdsTrackers,
+  HttpsEverywhereToggled,
+  BlockJavaScript,
+  BlockFingerprinting,
+  BlockCookies,
+  AllowScriptOriginsOnce,
+  ChangeNoScriptSettings,
+  ChangeAllNoScriptSettings
+} from '../types/actions/shieldsPanelActions'
 
-//     return (
-//       <ShieldsPanel data-test-id='brave-shields-panel'>
-//         <ShieldsHeader
-//           tabData={shieldsPanelTabData}
-//           shieldsToggled={actions.shieldsToggled}
-//         />
-//         <ShieldsInterfaceControls
-//           url={shieldsPanelTabData.url}
-//           hostname={shieldsPanelTabData.hostname}
-//           braveShields={shieldsPanelTabData.braveShields}
-//           ads={shieldsPanelTabData.ads}
-//           adsBlocked={shieldsPanelTabData.adsBlocked}
-//           adsBlockedResources={shieldsPanelTabData.adsBlockedResources}
-//           trackers={shieldsPanelTabData.trackers}
-//           trackersBlocked={shieldsPanelTabData.trackersBlocked}
-//           trackersBlockedResources={shieldsPanelTabData.trackersBlockedResources}
-//           httpsRedirected={shieldsPanelTabData.httpsRedirected}
-//           httpUpgradableResources={shieldsPanelTabData.httpUpgradableResources}
-//           httpsRedirectedResources={shieldsPanelTabData.httpsRedirectedResources}
-//           blockAdsTrackers={actions.blockAdsTrackers}
-//           httpsEverywhereToggled={actions.httpsEverywhereToggled}
-//         />
-//         <ShieldsPrivacyControls
-//           url={shieldsPanelTabData.url}
-//           hostname={shieldsPanelTabData.hostname}
-//           origin={shieldsPanelTabData.origin}
-//           braveShields={shieldsPanelTabData.braveShields}
-//           fingerprinting={shieldsPanelTabData.fingerprinting}
-//           fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
-//           fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
-//           javascript={shieldsPanelTabData.javascript}
-//           javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
-//           javascriptBlockedResources={shieldsPanelTabData.javascriptBlockedResources}
-//           noScriptInfo={shieldsPanelTabData.noScriptInfo}
-//           blockFingerprinting={actions.blockFingerprinting}
-//           changeAllNoScriptSettings={actions.changeAllNoScriptSettings}
-//           allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
-//           changeNoScriptSettings={actions.changeNoScriptSettings}
-//           blockJavaScript={actions.blockJavaScript}
-//           blockCookies={actions.blockCookies}
-//           cookies={shieldsPanelTabData.cookies}
-//         />
-//         <ShieldsFooter />
-//       </ShieldsPanel>
-//     )
-//   }
-// }
+interface Props {
+  actions: {
+    shieldsToggled: ShieldsToggled
+    blockAdsTrackers: BlockAdsTrackers
+    httpsEverywhereToggled: HttpsEverywhereToggled
+    blockJavaScript: BlockJavaScript
+    blockFingerprinting: BlockFingerprinting
+    blockCookies: BlockCookies
+    allowScriptOriginsOnce: AllowScriptOriginsOnce
+    changeNoScriptSettings: ChangeNoScriptSettings
+    changeAllNoScriptSettings: ChangeAllNoScriptSettings
+  }
+  shieldsPanelTabData: Tab
+}
+
+interface State {
+  isBlockedListOpen: boolean
+}
+
+export default class Shields extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = { isBlockedListOpen: false }
+  }
+
+  get favicon (): string {
+    const { url } = this.props.shieldsPanelTabData
+    return getFavicon(url)
+  }
+
+  get isShieldsEnabled (): boolean {
+    const { braveShields } = this.props.shieldsPanelTabData
+    return isShieldsEnabled(braveShields)
+  }
+
+  setBlockedListOpen = () => {
+    this.setState({ isBlockedListOpen: !this.state.isBlockedListOpen })
+  }
+
+  render () {
+    const { shieldsPanelTabData, actions } = this.props
+    const { isBlockedListOpen } = this.state
+
+    if (!shieldsPanelTabData) {
+      return null
+    }
+
+    return (
+      <ShieldsPanel data-test-id='brave-shields-panel' style={{ width: '370px' }}>
+        <Header
+          enabled={this.isShieldsEnabled}
+          favicon={this.favicon}
+          origin={origin}
+          hostname={shieldsPanelTabData.hostname}
+          isBlockedListOpen={isBlockedListOpen}
+          adsBlocked={shieldsPanelTabData.adsBlocked}
+          trackersBlocked={shieldsPanelTabData.trackersBlocked}
+          httpsUpgrades={shieldsPanelTabData.httpsRedirected}
+          scriptsBlocked={shieldsPanelTabData.javascriptBlocked}
+          fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
+          shieldsToggled={actions.shieldsToggled}
+        />
+        {
+          this.isShieldsEnabled && (
+            <>
+              <InterfaceControls
+                // Global props
+                isBlockedListOpen={isBlockedListOpen}
+                setBlockedListOpen={this.setBlockedListOpen}
+                hostname={shieldsPanelTabData.hostname}
+                favicon={this.favicon}
+                // Ads/Trackers
+                ads={shieldsPanelTabData.ads}
+                adsBlocked={shieldsPanelTabData.adsBlocked}
+                adsBlockedResources={shieldsPanelTabData.adsBlockedResources}
+                trackers={shieldsPanelTabData.trackers}
+                trackersBlocked={shieldsPanelTabData.trackersBlocked}
+                trackersBlockedResources={shieldsPanelTabData.trackersBlockedResources}
+                blockAdsTrackers={actions.blockAdsTrackers}
+                // HTTPS Upgrades
+                httpsRedirected={shieldsPanelTabData.httpsRedirected}
+                httpUpgradableResources={shieldsPanelTabData.httpUpgradableResources}
+                httpsRedirectedResources={shieldsPanelTabData.httpsRedirectedResources}
+                httpsEverywhereToggled={actions.httpsEverywhereToggled}
+              />
+              <PrivacyControls
+                // Global props
+                isBlockedListOpen={isBlockedListOpen}
+                setBlockedListOpen={this.setBlockedListOpen}
+                hostname={shieldsPanelTabData.hostname}
+                favicon={this.favicon}
+                // JavaScript
+                javascript={shieldsPanelTabData.javascript}
+                javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
+                noScriptInfo={shieldsPanelTabData.noScriptInfo}
+                changeNoScriptSettings={actions.changeNoScriptSettings}
+                blockJavaScript={actions.blockJavaScript}
+                changeAllNoScriptSettings={actions.changeAllNoScriptSettings}
+                allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
+                // Cookies
+                blockCookies={actions.blockCookies}
+                cookies={shieldsPanelTabData.cookies}
+                // Fingerprinting
+                fingerprinting={shieldsPanelTabData.fingerprinting}
+                fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
+                fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
+                blockFingerprinting={actions.blockFingerprinting}
+              />
+            </>
+          )
+        }
+        <Footer isBlockedListOpen={isBlockedListOpen} />
+      </ShieldsPanel>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields2.tsx b/components/brave_extension/extension/brave_extension/components/braveShields2.tsx
deleted file mode 100644
index d54243aed608..000000000000
--- a/components/brave_extension/extension/brave_extension/components/braveShields2.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-/* 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'
-
-// CSS normalizer
-import 'emptykit.css'
-
-// Feature-specific components
-import { ShieldsPanel } from 'brave-ui/features/shields'
-
-// Components group
-import Header from './header2'
-import InterfaceControls from './interfaceControls2'
-import PrivacyControls from './privacyControls2'
-import Footer from './footer2'
-
-// Types
-import { Tab } from '../types/state/shieldsPannelState'
-import { isShieldsEnabled, getFavicon } from '../helpers/shieldsUtils'
-import {
-  ShieldsToggled,
-  BlockAdsTrackers,
-  HttpsEverywhereToggled,
-  BlockJavaScript,
-  BlockFingerprinting,
-  BlockCookies,
-  AllowScriptOriginsOnce,
-  ChangeNoScriptSettings,
-  ChangeAllNoScriptSettings
-} from '../types/actions/shieldsPanelActions'
-
-interface Props {
-  actions: {
-    shieldsToggled: ShieldsToggled
-    blockAdsTrackers: BlockAdsTrackers
-    httpsEverywhereToggled: HttpsEverywhereToggled
-    blockJavaScript: BlockJavaScript
-    blockFingerprinting: BlockFingerprinting
-    blockCookies: BlockCookies
-    allowScriptOriginsOnce: AllowScriptOriginsOnce
-    changeNoScriptSettings: ChangeNoScriptSettings
-    changeAllNoScriptSettings: ChangeAllNoScriptSettings
-  }
-  shieldsPanelTabData: Tab
-}
-
-interface State {
-  isBlockedListOpen: boolean
-}
-
-export default class Shields extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = { isBlockedListOpen: false }
-  }
-
-  get favicon (): string {
-    const { url } = this.props.shieldsPanelTabData
-    return getFavicon(url)
-  }
-
-  get isShieldsEnabled (): boolean {
-    const { braveShields } = this.props.shieldsPanelTabData
-    return isShieldsEnabled(braveShields)
-  }
-
-  setBlockedListOpen = () => {
-    this.setState({ isBlockedListOpen: !this.state.isBlockedListOpen })
-  }
-
-  render () {
-    const { shieldsPanelTabData, actions } = this.props
-    const { isBlockedListOpen } = this.state
-
-    if (!shieldsPanelTabData) {
-      return null
-    }
-
-    return (
-      <ShieldsPanel data-test-id='brave-shields-panel' style={{ width: '370px' }}>
-        <Header
-          enabled={this.isShieldsEnabled}
-          favicon={this.favicon}
-          origin={origin}
-          hostname={shieldsPanelTabData.hostname}
-          isBlockedListOpen={isBlockedListOpen}
-          adsBlocked={shieldsPanelTabData.adsBlocked}
-          trackersBlocked={shieldsPanelTabData.trackersBlocked}
-          httpsUpgrades={shieldsPanelTabData.httpsRedirected}
-          scriptsBlocked={shieldsPanelTabData.javascriptBlocked}
-          fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
-          shieldsToggled={actions.shieldsToggled}
-        />
-        {
-          this.isShieldsEnabled && (
-            <>
-              <InterfaceControls
-                // Global props
-                isBlockedListOpen={isBlockedListOpen}
-                setBlockedListOpen={this.setBlockedListOpen}
-                hostname={shieldsPanelTabData.hostname}
-                favicon={this.favicon}
-                // Ads/Trackers
-                ads={shieldsPanelTabData.ads}
-                adsBlocked={shieldsPanelTabData.adsBlocked}
-                adsBlockedResources={shieldsPanelTabData.adsBlockedResources}
-                trackers={shieldsPanelTabData.trackers}
-                trackersBlocked={shieldsPanelTabData.trackersBlocked}
-                trackersBlockedResources={shieldsPanelTabData.trackersBlockedResources}
-                blockAdsTrackers={actions.blockAdsTrackers}
-                // HTTPS Upgrades
-                httpsRedirected={shieldsPanelTabData.httpsRedirected}
-                httpUpgradableResources={shieldsPanelTabData.httpUpgradableResources}
-                httpsRedirectedResources={shieldsPanelTabData.httpsRedirectedResources}
-                httpsEverywhereToggled={actions.httpsEverywhereToggled}
-              />
-              <PrivacyControls
-                // Global props
-                isBlockedListOpen={isBlockedListOpen}
-                setBlockedListOpen={this.setBlockedListOpen}
-                hostname={shieldsPanelTabData.hostname}
-                favicon={this.favicon}
-                // JavaScript
-                javascript={shieldsPanelTabData.javascript}
-                javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
-                noScriptInfo={shieldsPanelTabData.noScriptInfo}
-                changeNoScriptSettings={actions.changeNoScriptSettings}
-                blockJavaScript={actions.blockJavaScript}
-                changeAllNoScriptSettings={actions.changeAllNoScriptSettings}
-                allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
-                // Cookies
-                blockCookies={actions.blockCookies}
-                cookies={shieldsPanelTabData.cookies}
-                // Fingerprinting
-                fingerprinting={shieldsPanelTabData.fingerprinting}
-                fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
-                fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
-                blockFingerprinting={actions.blockFingerprinting}
-              />
-            </>
-          )
-        }
-        <Footer isBlockedListOpen={isBlockedListOpen} />
-      </ShieldsPanel>
-    )
-  }
-}
diff --git a/components/brave_extension/extension/brave_extension/components/footer.tsx b/components/brave_extension/extension/brave_extension/components/footer.tsx
index 6ecaf8047c98..522a6020baf8 100644
--- a/components/brave_extension/extension/brave_extension/components/footer.tsx
+++ b/components/brave_extension/extension/brave_extension/components/footer.tsx
@@ -1,28 +1,39 @@
-// /* 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/. */
+/* 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'
+import * as React from 'react'
 
-// // Feature-specific components
-// import { MainFooterLinkFlex, LinkIcon } from 'brave-ui/features/shields'
+// Feature-specific components
+import { MainFooter, Link } from 'brave-ui/features/shields'
 
-// // Utils
-// import * as tabsAPI from '../background/api/tabsAPI'
-// import { getLocale } from '../background/api/localeAPI'
+// API
+import * as tabsAPI from '../background/api/tabsAPI'
 
-// export default class ShieldsFooter extends React.PureComponent<{}, {}> {
-//   openSettings = (event: React.MouseEvent<HTMLAnchorElement>) => {
-//     event.preventDefault()
-//     tabsAPI.createTab({ url: 'chrome://settings/shields' })
-//       .catch((err) => console.log(err))
-//   }
-//   render () {
-//     return (
-//       <MainFooterLinkFlex id='braveShieldsFooter' href='#' onClick={this.openSettings}>
-//         <span>{getLocale('editDefaults')}</span>
-//         <LinkIcon />
-//       </MainFooterLinkFlex>
-//     )
-//   }
-// }
+// Locale
+import { getLocale } from '../background/api/localeAPI'
+
+interface Props {
+  isBlockedListOpen: boolean
+}
+
+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
+    return (
+      <MainFooter>
+        <Link
+          id='braveShieldsFooter'
+          onClick={this.openSettings}
+          disabled={isBlockedListOpen}
+        >
+          {getLocale('changeDefaults')}
+        </Link>
+      </MainFooter>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/footer2.tsx b/components/brave_extension/extension/brave_extension/components/footer2.tsx
deleted file mode 100644
index 522a6020baf8..000000000000
--- a/components/brave_extension/extension/brave_extension/components/footer2.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/* 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'
-
-interface Props {
-  isBlockedListOpen: boolean
-}
-
-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
-    return (
-      <MainFooter>
-        <Link
-          id='braveShieldsFooter'
-          onClick={this.openSettings}
-          disabled={isBlockedListOpen}
-        >
-          {getLocale('changeDefaults')}
-        </Link>
-      </MainFooter>
-    )
-  }
-}
diff --git a/components/brave_extension/extension/brave_extension/components/header.tsx b/components/brave_extension/extension/brave_extension/components/header.tsx
index 6b6bb39aa4ed..932ca6390cf6 100644
--- a/components/brave_extension/extension/brave_extension/components/header.tsx
+++ b/components/brave_extension/extension/brave_extension/components/header.tsx
@@ -1,93 +1,123 @@
-// // /* 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/. */
+/* 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'
+import * as React from 'react'
 
-// // Feature-specific components
-// import {
-//   Header,
-//   MainToggleFlex,
-//   Description,
-//   SiteInfoCard,
-//   DisabledTextGrid,
-//   Label,
-//   Highlight,
-//   UnHighlight,
-//   Toggle,
-//   ShieldIcon,
-//   MainSiteInfoGrid,
-//   ShieldIconFlex
-// } from 'brave-ui/features/shields'
+// Feature-specific components
+import {
+  ShieldsHeader,
+  MainToggle,
+  TotalBlockedStats,
+  SiteOverview,
+  SiteInfo,
+  MainToggleHeading,
+  MainToggleText,
+  ToggleStateText,
+  Favicon,
+  SiteInfoText,
+  TotalBlockedStatsNumber,
+  TotalBlockedStatsText,
+  DisabledContentView,
+  ShieldIcon,
+  DisabledContentText,
+  Toggle
+} from 'brave-ui/features/shields'
 
-// // Types
-// import { Tab } from '../types/state/shieldsPannelState'
-// import { BlockOptions } from '../types/other/blockTypes'
+// Locale
+import { getLocale } from '../background/api/localeAPI'
+import {
+  blockedResourcesSize,
+  getTotalBlockedSizeStrings,
+  getToggleStateViaEventTarget
+} from '../helpers/shieldsUtils'
 
-// // Utils
-// import * as shieldActions from '../types/actions/shieldsPanelActions'
-// import { getLocale } from '../background/api/localeAPI'
-// import { isHttpOrHttps } from '../helpers/urlUtils'
-// import { getFavicon, getTotalResourcesBlocked } from '../helpers/shieldsUtils'
+// Types
+import { BlockOptions } from '../types/other/blockTypes'
+import { ShieldsToggled } from '../types/actions/shieldsPanelActions'
 
-// export interface Props {
-//   tabData: Tab
-//   shieldsToggled: shieldActions.ShieldsToggled
-// }
+interface CommonProps {
+  enabled: boolean
+  favicon: string
+  origin: string
+  hostname: string
+  isBlockedListOpen: boolean
+  shieldsToggled: ShieldsToggled
+}
 
-// export default class ShieldsHeader extends React.PureComponent<Props, {}> {
-//   onToggleShields = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     const { origin } = this.props.tabData
-//     if (!isHttpOrHttps(origin)) {
-//       return
-//     }
-//     const shieldsOption: BlockOptions = event.target.checked ? 'allow' : 'block'
-//     this.props.shieldsToggled(shieldsOption)
-//   }
+interface BlockedItemsProps {
+  adsBlocked: number
+  trackersBlocked: number
+  httpsUpgrades: number
+  scriptsBlocked: number
+  fingerprintingBlocked: number
+}
 
-//   renderEnabledContent = () => {
-//     return (
-//       <MainSiteInfoGrid>
-//         <Highlight enabled={true} size='large'>{getTotalResourcesBlocked(this.props.tabData)}</Highlight>
-//         <Label size='medium'>{getLocale('totalBlocked')}</Label>
-//       </MainSiteInfoGrid>
-//     )
-//   }
+type Props = CommonProps & BlockedItemsProps
 
-//   renderDisabledContent = () => {
-//     return (
-//       <DisabledTextGrid>
-//         <ShieldIconFlex>
-//           <ShieldIcon />
-//         </ShieldIconFlex>
-//         <Description enabled={false}>{getLocale('disabledMessage')}</Description>
-//       </DisabledTextGrid>
-//     )
-//   }
+export default class Header extends React.PureComponent<Props, {}> {
+  get blockedItemsSize (): number {
+    const { adsBlocked, trackersBlocked, scriptsBlocked, fingerprintingBlocked } = this.props
+    return adsBlocked + trackersBlocked + scriptsBlocked + fingerprintingBlocked
+  }
 
-//   render () {
-//     const { braveShields, hostname, url } = this.props.tabData
-//     const enabled = braveShields !== 'block'
+  get totalBlockedSize (): string {
+    const { httpsUpgrades } = this.props
+    const total = this.blockedItemsSize + httpsUpgrades
+    return blockedResourcesSize(total)
+  }
 
-//     return (
-//       <Header id='braveShieldsHeader' enabled={enabled}>
-//         <MainToggleFlex enabled={enabled}>
-//           <Label size='medium'>
-//             {getLocale('shields')} <Highlight enabled={enabled}> {enabled ? getLocale('up') : getLocale('down')}
-//             </Highlight>
-//             <UnHighlight> {getLocale('forThisSite')}</UnHighlight>
-//           </Label>
-//           <Toggle id='mainToggle' checked={enabled} onChange={this.onToggleShields} size='large' />
-//         </MainToggleFlex>
-//         {enabled ? <Description enabled={true}>{getLocale('enabledMessage')}</Description> : null}
-//         <SiteInfoCard>
-//           <MainSiteInfoGrid>
-//             <img src={getFavicon(url)} />
-//             <Label id='hostname' size='large'>{hostname}</Label>
-//           </MainSiteInfoGrid>
-//           {enabled ? this.renderEnabledContent() : this.renderDisabledContent()}
-//         </SiteInfoCard>
-//       </Header>
-//     )
-//   }
-// }
+  get totalBlockedStrings (): string {
+    const { httpsUpgrades } = this.props
+    return getTotalBlockedSizeStrings(this.blockedItemsSize, httpsUpgrades)
+  }
+
+  onToggleShields = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const shieldsOption: BlockOptions = getToggleStateViaEventTarget(event)
+    this.props.shieldsToggled(shieldsOption)
+  }
+
+  render () {
+    const { enabled, favicon, hostname, isBlockedListOpen } = 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 size='large' checked={enabled} onChange={this.onToggleShields} disabled={isBlockedListOpen} />
+        </MainToggle>
+        <SiteOverview status={enabled ? 'enabled' : 'disabled'}>
+          <SiteInfo>
+            <Favicon src={favicon} />
+            <SiteInfoText>{hostname}</SiteInfoText>
+          </SiteInfo>
+          {
+            enabled
+            ? (
+              <TotalBlockedStats>
+                <TotalBlockedStatsNumber>{this.totalBlockedSize}</TotalBlockedStatsNumber>
+                <TotalBlockedStatsText>
+                  {this.totalBlockedStrings}
+                </TotalBlockedStatsText>
+              </TotalBlockedStats>
+            )
+            : (
+              <DisabledContentView>
+                <div><ShieldIcon /></div>
+                <DisabledContentText>{getLocale('disabledMessage')}</DisabledContentText>
+              </DisabledContentView>
+            )
+          }
+        </SiteOverview>
+      </ShieldsHeader>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/header2.tsx b/components/brave_extension/extension/brave_extension/components/header2.tsx
deleted file mode 100644
index 932ca6390cf6..000000000000
--- a/components/brave_extension/extension/brave_extension/components/header2.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-/* 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,
-  ToggleStateText,
-  Favicon,
-  SiteInfoText,
-  TotalBlockedStatsNumber,
-  TotalBlockedStatsText,
-  DisabledContentView,
-  ShieldIcon,
-  DisabledContentText,
-  Toggle
-} from 'brave-ui/features/shields'
-
-// Locale
-import { getLocale } from '../background/api/localeAPI'
-import {
-  blockedResourcesSize,
-  getTotalBlockedSizeStrings,
-  getToggleStateViaEventTarget
-} from '../helpers/shieldsUtils'
-
-// Types
-import { BlockOptions } from '../types/other/blockTypes'
-import { ShieldsToggled } from '../types/actions/shieldsPanelActions'
-
-interface CommonProps {
-  enabled: boolean
-  favicon: string
-  origin: string
-  hostname: string
-  isBlockedListOpen: boolean
-  shieldsToggled: ShieldsToggled
-}
-
-interface BlockedItemsProps {
-  adsBlocked: number
-  trackersBlocked: number
-  httpsUpgrades: number
-  scriptsBlocked: number
-  fingerprintingBlocked: number
-}
-
-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)
-  }
-
-  get totalBlockedStrings (): string {
-    const { httpsUpgrades } = this.props
-    return getTotalBlockedSizeStrings(this.blockedItemsSize, httpsUpgrades)
-  }
-
-  onToggleShields = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const shieldsOption: BlockOptions = getToggleStateViaEventTarget(event)
-    this.props.shieldsToggled(shieldsOption)
-  }
-
-  render () {
-    const { enabled, favicon, hostname, isBlockedListOpen } = 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 size='large' checked={enabled} onChange={this.onToggleShields} disabled={isBlockedListOpen} />
-        </MainToggle>
-        <SiteOverview status={enabled ? 'enabled' : 'disabled'}>
-          <SiteInfo>
-            <Favicon src={favicon} />
-            <SiteInfoText>{hostname}</SiteInfoText>
-          </SiteInfo>
-          {
-            enabled
-            ? (
-              <TotalBlockedStats>
-                <TotalBlockedStatsNumber>{this.totalBlockedSize}</TotalBlockedStatsNumber>
-                <TotalBlockedStatsText>
-                  {this.totalBlockedStrings}
-                </TotalBlockedStatsText>
-              </TotalBlockedStats>
-            )
-            : (
-              <DisabledContentView>
-                <div><ShieldIcon /></div>
-                <DisabledContentText>{getLocale('disabledMessage')}</DisabledContentText>
-              </DisabledContentView>
-            )
-          }
-        </SiteOverview>
-      </ShieldsHeader>
-    )
-  }
-}
diff --git a/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
index 2fcb70372e9b..2beda173b853 100644
--- a/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
+++ b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
@@ -1,165 +1,70 @@
-// /* 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 {
-//   ShowMoreIcon,
-//   Toggle,
-//   StatFlex,
-//   ResourcesSwitchLabel,
-//   EmptyButton,
-//   ToggleFlex,
-//   ToggleGrid
-// } from 'brave-ui/features/shields'
-
-// // Component groups
-// import BlockedResources from './blockedResources/blockedResources'
-// import StaticList from './blockedResources/staticList'
-
-// // Types
-// import { BlockOptions } from '../types/other/blockTypes'
-
-// // Utils
-// import { getLocale } from '../background/api/localeAPI'
-// import * as shieldActions from '../types/actions/shieldsPanelActions'
-// import { totalAdsTrackersBlocked, blockedResourcesSize } from '../helpers/shieldsUtils'
-
-// export interface Props {
-//   braveShields: BlockOptions
-//   url: string
-//   hostname: string
-//   ads: BlockOptions
-//   adsBlocked: number
-//   adsBlockedResources: Array<string>
-//   blockAdsTrackers: shieldActions.BlockAdsTrackers
-//   trackers: BlockOptions
-//   trackersBlocked: number
-//   trackersBlockedResources: Array<string>
-//   httpsRedirected: number
-//   httpUpgradableResources: BlockOptions
-//   httpsRedirectedResources: Array<string>
-//   httpsEverywhereToggled: shieldActions.HttpsEverywhereToggled
-// }
-
-// interface State {
-//   openTotalAdsTrackersBlockedList: boolean,
-//   openConnectionsEncryptedList: boolean
-// }
-
-// export default class ShieldsInterfaceControls extends React.PureComponent<Props, State> {
-//   constructor (props: Props) {
-//     super(props)
-//     this.state = {
-//       openTotalAdsTrackersBlockedList: false,
-//       openConnectionsEncryptedList: false
-//     }
-//   }
-
-//   get totalAdsTrackersBlocked (): number {
-//     const { adsBlocked, trackersBlocked } = this.props
-//     return totalAdsTrackersBlocked(adsBlocked, trackersBlocked)
-//   }
-
-//   get totalAdsTrackersBlockedList (): Array<string> {
-//     const { adsBlockedResources, trackersBlockedResources } = this.props
-//     return [...adsBlockedResources, ...trackersBlockedResources]
-//   }
-
-//   onChangeBlockAds = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     if (!event.target) {
-//       return
-//     }
-//     const shoudEnableAdsTracks = event.target.checked ? 'allow' : 'block'
-//     this.props.blockAdsTrackers(shoudEnableAdsTracks)
-//   }
-
-//   onChangeConnectionsEncrypted = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     if (!event.target) {
-//       return
-//     }
-//     const shouldEnableHttpsEverywhere = event.target.checked ? 'allow' : 'block'
-//     this.props.httpsEverywhereToggled(shouldEnableHttpsEverywhere)
-//   }
-
-//   onToggleTotalAdsTrackersBlocked = () => {
-//     this.setState({ openTotalAdsTrackersBlockedList: !this.state.openTotalAdsTrackersBlockedList })
-//   }
-
-//   onToggleConnectionsEncrypted = () => {
-//     this.setState({ openConnectionsEncryptedList: !this.state.openConnectionsEncryptedList })
-//   }
-
-//   renderTotalAdsTrackersBlockedList = (url: string, hostname: string, onToggle: () => void) => {
-//     return (
-//       <BlockedResources
-//         url={url}
-//         hostname={hostname}
-//         title={getLocale('blockAds')}
-//         onToggle={onToggle}
-//         stats={this.totalAdsTrackersBlocked}
-//       >
-//         <StaticList onClickDismiss={onToggle} list={this.totalAdsTrackersBlockedList} />
-//       </BlockedResources>
-//     )
-//   }
-
-//   renderConnectionsEncryptedList = (url: string, hostname: string, onToggle: () => void) => {
-//     const { httpsRedirected, httpsRedirectedResources } = this.props
-//     return (
-//       <BlockedResources
-//         url={url}
-//         hostname={hostname}
-//         title={getLocale('connectionsEncrypted')}
-//         onToggle={onToggle}
-//         stats={httpsRedirected}
-//       >
-//         <StaticList onClickDismiss={onToggle} list={httpsRedirectedResources} />
-//       </BlockedResources>
-//     )
-//   }
-
-//   render () {
-//     const { braveShields, url, hostname, ads, trackers, httpsRedirected, httpUpgradableResources } = this.props
-//     const { openTotalAdsTrackersBlockedList, openConnectionsEncryptedList } = this.state
-
-//     const enabled = braveShields !== 'block'
-//     const blockAdsOption = ads !== 'allow' && trackers !== 'allow'
-//     const connectionsEncrypted = httpUpgradableResources !== 'allow'
-
-//     if (!enabled) {
-//       return null
-//     }
-
-//     return (
-//       <div id='braveShieldsInterfaceControls'>
-//         {/* ads toggle */}
-//         <ToggleGrid>
-//           <EmptyButton disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}><ShowMoreIcon /></EmptyButton>
-//           <StatFlex disabled={this.totalAdsTrackersBlocked === 0} id='blockAdsStat' onClick={this.onToggleTotalAdsTrackersBlocked}>{blockedResourcesSize(this.totalAdsTrackersBlocked)}</StatFlex>
-//           <ResourcesSwitchLabel disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}>{getLocale('blockAds')}</ResourcesSwitchLabel>
-//           <ToggleFlex><Toggle id='blockAds' checked={blockAdsOption} onChange={this.onChangeBlockAds} /></ToggleFlex>
-//         </ToggleGrid>
-//         {
-//           openTotalAdsTrackersBlockedList
-//             ? this.renderTotalAdsTrackersBlockedList(url, hostname, this.onToggleTotalAdsTrackersBlocked)
-//             : null
-//         }
-//         {/* connections encrypted toggle */}
-//         <ToggleGrid>
-//           <EmptyButton disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}><ShowMoreIcon /></EmptyButton>
-//           <StatFlex disabled={httpsRedirected === 0} id='connectionsEncryptedStat' onClick={this.onToggleConnectionsEncrypted}>{blockedResourcesSize(httpsRedirected)}</StatFlex>
-//           <ResourcesSwitchLabel disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}>{getLocale('connectionsEncrypted')}</ResourcesSwitchLabel>
-//           <ToggleFlex><Toggle id='connectionsEncrypted' checked={connectionsEncrypted} onChange={this.onChangeConnectionsEncrypted} /></ToggleFlex>
-//         </ToggleGrid>
-//         {
-//           openConnectionsEncryptedList
-//             ? this.renderConnectionsEncryptedList(url, hostname, this.onToggleConnectionsEncrypted)
-//             : null
-//         }
-//       </div>
-//     )
-//   }
-// }
+/* 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'
+
+// Group Components
+import AdsTrackersControl from './controls/adsTrackersControl'
+import HTTPSUpgradesControl from './controls/httpsUpgradesControl'
+
+// Types
+import { BlockAdsTrackers, HttpsEverywhereToggled } from '../types/actions/shieldsPanelActions'
+import { BlockOptions } from '../types/other/blockTypes'
+
+interface CommonProps {
+  isBlockedListOpen: boolean
+  setBlockedListOpen: () => void
+  hostname: string
+  favicon: string
+}
+
+interface AdsTrackersProps {
+  ads: BlockOptions
+  adsBlocked: number
+  adsBlockedResources: Array<string>
+  trackers: BlockOptions
+  trackersBlocked: number
+  trackersBlockedResources: Array<string>
+  blockAdsTrackers: BlockAdsTrackers
+}
+
+interface HTTPSUpgradesProps {
+  httpsRedirected: number
+  httpUpgradableResources: BlockOptions
+  httpsRedirectedResources: Array<string>
+  httpsEverywhereToggled: HttpsEverywhereToggled
+}
+
+type Props = CommonProps & AdsTrackersProps & HTTPSUpgradesProps
+
+export default class InterfaceControls extends React.PureComponent<Props, {}> {
+  get commonProps (): CommonProps {
+    const { favicon, hostname, isBlockedListOpen, setBlockedListOpen } = this.props
+    return { favicon, hostname, isBlockedListOpen, setBlockedListOpen }
+  }
+
+  render () {
+    return (
+      <>
+        <AdsTrackersControl
+          {...this.commonProps}
+          ads={this.props.ads}
+          adsBlocked={this.props.adsBlocked}
+          adsBlockedResources={this.props.adsBlockedResources}
+          trackers={this.props.trackers}
+          trackersBlocked={this.props.trackersBlocked}
+          trackersBlockedResources={this.props.trackersBlockedResources}
+          blockAdsTrackers={this.props.blockAdsTrackers}
+        />
+        <HTTPSUpgradesControl
+          {...this.commonProps}
+          httpsRedirected={this.props.httpsRedirected}
+          httpUpgradableResources={this.props.httpUpgradableResources}
+          httpsRedirectedResources={this.props.httpsRedirectedResources}
+          httpsEverywhereToggled={this.props.httpsEverywhereToggled}
+        />
+      </>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/interfaceControls2.tsx b/components/brave_extension/extension/brave_extension/components/interfaceControls2.tsx
deleted file mode 100644
index 2beda173b853..000000000000
--- a/components/brave_extension/extension/brave_extension/components/interfaceControls2.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/* 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'
-
-// Group Components
-import AdsTrackersControl from './controls/adsTrackersControl'
-import HTTPSUpgradesControl from './controls/httpsUpgradesControl'
-
-// Types
-import { BlockAdsTrackers, HttpsEverywhereToggled } from '../types/actions/shieldsPanelActions'
-import { BlockOptions } from '../types/other/blockTypes'
-
-interface CommonProps {
-  isBlockedListOpen: boolean
-  setBlockedListOpen: () => void
-  hostname: string
-  favicon: string
-}
-
-interface AdsTrackersProps {
-  ads: BlockOptions
-  adsBlocked: number
-  adsBlockedResources: Array<string>
-  trackers: BlockOptions
-  trackersBlocked: number
-  trackersBlockedResources: Array<string>
-  blockAdsTrackers: BlockAdsTrackers
-}
-
-interface HTTPSUpgradesProps {
-  httpsRedirected: number
-  httpUpgradableResources: BlockOptions
-  httpsRedirectedResources: Array<string>
-  httpsEverywhereToggled: HttpsEverywhereToggled
-}
-
-type Props = CommonProps & AdsTrackersProps & HTTPSUpgradesProps
-
-export default class InterfaceControls extends React.PureComponent<Props, {}> {
-  get commonProps (): CommonProps {
-    const { favicon, hostname, isBlockedListOpen, setBlockedListOpen } = this.props
-    return { favicon, hostname, isBlockedListOpen, setBlockedListOpen }
-  }
-
-  render () {
-    return (
-      <>
-        <AdsTrackersControl
-          {...this.commonProps}
-          ads={this.props.ads}
-          adsBlocked={this.props.adsBlocked}
-          adsBlockedResources={this.props.adsBlockedResources}
-          trackers={this.props.trackers}
-          trackersBlocked={this.props.trackersBlocked}
-          trackersBlockedResources={this.props.trackersBlockedResources}
-          blockAdsTrackers={this.props.blockAdsTrackers}
-        />
-        <HTTPSUpgradesControl
-          {...this.commonProps}
-          httpsRedirected={this.props.httpsRedirected}
-          httpUpgradableResources={this.props.httpUpgradableResources}
-          httpsRedirectedResources={this.props.httpsRedirectedResources}
-          httpsEverywhereToggled={this.props.httpsEverywhereToggled}
-        />
-      </>
-    )
-  }
-}
diff --git a/components/brave_extension/extension/brave_extension/components/privacyControls.tsx b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
index 28d4312c552b..9e301da169fb 100644
--- a/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
+++ b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
@@ -1,210 +1,89 @@
-// /* 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 {
-//   SelectBox,
-//   StatFlex,
-//   ClickableEmptySpace,
-//   EmptyButton,
-//   ShowMoreIcon,
-//   SelectGrid
-// } from 'brave-ui/features/shields'
-
-// // Component groups
-// import BlockedResources from './blockedResources/blockedResources'
-// import StaticList from './blockedResources/staticList'
-// import ScriptsList from './blockedResources/scriptsList'
-
-// // Types
-// import { BlockOptions, BlockCookiesOptions, BlockJSOptions, BlockFPOptions } from '../types/other/blockTypes'
-// import { NoScriptInfo } from '../types/other/noScriptInfo'
-
-// // Utils
-// import * as shieldActions from '../types/actions/shieldsPanelActions'
-// import { getLocale } from '../background/api/localeAPI'
-// import { blockedResourcesSize } from '../helpers/shieldsUtils'
-
-// export interface Props {
-//   url: string
-//   hostname: string
-//   origin: string
-//   braveShields: BlockOptions
-//   fingerprinting: BlockFPOptions
-//   fingerprintingBlocked: number
-//   blockFingerprinting: shieldActions.BlockFingerprinting
-//   fingerprintingBlockedResources: Array<string>
-//   javascript: BlockJSOptions
-//   javascriptBlocked: number
-//   blockJavaScript: shieldActions.BlockJavaScript
-//   javascriptBlockedResources: Array<string>
-//   noScriptInfo: NoScriptInfo
-//   changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
-//   changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
-//   allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
-//   blockCookies: shieldActions.BlockCookies
-//   cookies: BlockCookiesOptions
-// }
-
-// interface State {
-//   openScriptsBlockedList: boolean
-//   openDeviceRecognitionList: boolean
-// }
-
-// export default class PrivacyControls extends React.PureComponent<Props, State> {
-//   constructor (props: Props) {
-//     super(props)
-//     this.state = {
-//       openScriptsBlockedList: false,
-//       openDeviceRecognitionList: false
-//     }
-//   }
-
-//   onToggleScriptsBlocked = () => {
-//     this.setState({ openScriptsBlockedList: !this.state.openScriptsBlockedList })
-//   }
-
-//   onToggleDeviceRecognition = () => {
-//     this.setState({ openDeviceRecognitionList: !this.state.openDeviceRecognitionList })
-//   }
-
-//   onChangeBlockCookies = (event: React.ChangeEvent<any>) => {
-//     if (!event.target) {
-//       return
-//     }
-//     this.props.blockCookies(event.target.value)
-//   }
-
-//   onChangeBlockScripts = (event: React.ChangeEvent<any>) => {
-//     if (!event.target) {
-//       return
-//     }
-//     this.props.blockJavaScript(event.target.value)
-//   }
-
-//   onChangeBlockDeviceRecognition = (event: React.ChangeEvent<any>) => {
-//     if (!event.target) {
-//       return
-//     }
-//     this.props.blockFingerprinting(event.target.value)
-//   }
-
-//   renderScriptsBlockedList = () => {
-//     const {
-//       url,
-//       hostname,
-//       origin,
-//       noScriptInfo,
-//       javascript,
-//       blockJavaScript,
-//       changeNoScriptSettings,
-//       allowScriptOriginsOnce,
-//       changeAllNoScriptSettings
-//     } = this.props
-//     return (
-//       <BlockedResources
-//         dynamic={true}
-//         url={url}
-//         hostname={hostname}
-//         title={getLocale('scriptsOnThisSite')}
-//         onToggle={this.onToggleScriptsBlocked}
-//         stats={undefined}
-//       >
-//         <ScriptsList
-//           origin={origin}
-//           onClickDismiss={this.onToggleScriptsBlocked}
-//           changeNoScriptSettings={changeNoScriptSettings}
-//           allowScriptOriginsOnce={allowScriptOriginsOnce}
-//           noScriptInfo={noScriptInfo}
-//           changeAllNoScriptSettings={changeAllNoScriptSettings}
-//           javascript={javascript}
-//           blockJavaScript={blockJavaScript}
-//         />
-//       </BlockedResources>
-//     )
-//   }
-
-//   renderDeviceRecognitionList = () => {
-//     const { url, hostname, fingerprintingBlocked, fingerprintingBlockedResources } = this.props
-//     return (
-//       <BlockedResources
-//         url={url}
-//         hostname={hostname}
-//         title={getLocale('deviceRecognitionAttempts')}
-//         onToggle={this.onToggleDeviceRecognition}
-//         stats={fingerprintingBlocked}
-//       >
-//         <StaticList onClickDismiss={this.onToggleDeviceRecognition} list={fingerprintingBlockedResources} />
-//       </BlockedResources>
-//     )
-//   }
-
-//   render () {
-//     const {
-//       braveShields,
-//       fingerprinting,
-//       fingerprintingBlocked,
-//       javascript,
-//       javascriptBlocked,
-//       cookies
-//     } = this.props
-//     const { openScriptsBlockedList, openDeviceRecognitionList } = this.state
-//     const enabled = braveShields !== 'block'
-
-//     if (!enabled) {
-//       return null
-//     }
-
-//     return (
-//       <div id='braveShieldsPrivacyControls'>
-//         {/* cookies select */}
-//         <SelectGrid hasUserInteraction={false}>
-//           <EmptyButton disabled={true} />
-//           <StatFlex disabled={true} />
-//           <SelectBox id='blockCookies' value={cookies} onChange={this.onChangeBlockCookies}>
-//             <option value='block_third_party'>{getLocale('block3partyCookies')}</option>
-//             <option value='block'>{getLocale('blockAllCookies')}</option>
-//             <option value='allow'>{getLocale('allowAllCookies')}</option>
-//           </SelectBox>
-//           <ClickableEmptySpace />
-//         </SelectGrid>
-
-//         {/* scripts select */}
-//         <SelectGrid hasUserInteraction={javascriptBlocked !== 0}>
-//           <EmptyButton disabled={javascriptBlocked === 0} onClick={this.onToggleScriptsBlocked}><ShowMoreIcon /></EmptyButton>
-//           <StatFlex disabled={javascriptBlocked === 0} id='blockScriptsStat' onClick={this.onToggleScriptsBlocked}>{blockedResourcesSize(javascriptBlocked)}</StatFlex>
-//           <SelectBox id='blockScripts' value={javascript} onChange={this.onChangeBlockScripts}>
-//             <option value='block'>{getLocale('blockAllScriptsOrigins')}</option>
-//             <option value='allow'>{getLocale('allowAllScripts')}</option>
-//           </SelectBox>
-//           <ClickableEmptySpace disabled={javascriptBlocked === 0} onClick={this.onToggleScriptsBlocked} />
-//           {
-//             openScriptsBlockedList
-//               ? this.renderScriptsBlockedList()
-//               : null
-//           }
-//         </SelectGrid>
-
-//         {/* fingerprinting select */}
-//         <SelectGrid hasUserInteraction={fingerprintingBlocked !== 0}>
-//           <EmptyButton disabled={fingerprintingBlocked === 0} onClick={this.onToggleDeviceRecognition}><ShowMoreIcon /></EmptyButton>
-//           <StatFlex disabled={fingerprintingBlocked === 0} id='blockFingerprintingStat' onClick={this.onToggleDeviceRecognition}>{blockedResourcesSize(fingerprintingBlocked)}</StatFlex>
-//           <SelectBox id='blockFingerprinting' value={fingerprinting} onChange={this.onChangeBlockDeviceRecognition}>
-//             <option value='block_third_party'>{getLocale('block3partyFingerprinting')}</option>
-//             <option value='block'>{getLocale('blockAllFingerprinting')}</option>
-//             <option value='allow'>{getLocale('allowAllFingerprinting')}</option>
-//           </SelectBox>
-//           <ClickableEmptySpace disabled={fingerprintingBlocked === 0} onClick={this.onToggleDeviceRecognition} />
-//           {
-//             openDeviceRecognitionList
-//               ? this.renderDeviceRecognitionList()
-//               : null
-//           }
-//         </SelectGrid>
-//       </div>
-//     )
-//   }
-// }
+/* 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'
+
+// Group Components
+import ScriptsControl from './controls/scriptsControl'
+import CookiesControl from './controls/cookiesControl'
+import DeviceRecognitionControl from './controls/deviceRecognitionControl'
+
+// Types
+import {
+  ChangeNoScriptSettings,
+  BlockJavaScript,
+  ChangeAllNoScriptSettings,
+  AllowScriptOriginsOnce,
+  BlockCookies,
+  BlockFingerprinting
+} from '../types/actions/shieldsPanelActions'
+import { BlockCookiesOptions, BlockJSOptions, BlockFPOptions } from '../types/other/blockTypes'
+import { NoScriptInfo } from '../types/other/noScriptInfo'
+
+interface CommonProps {
+  isBlockedListOpen: boolean
+  setBlockedListOpen: () => void
+  hostname: string
+  favicon: string
+}
+
+interface JavaScriptProps {
+  javascript: BlockJSOptions
+  javascriptBlocked: number
+  noScriptInfo: NoScriptInfo
+  changeNoScriptSettings: ChangeNoScriptSettings
+  blockJavaScript: BlockJavaScript
+  changeAllNoScriptSettings: ChangeAllNoScriptSettings
+  allowScriptOriginsOnce: AllowScriptOriginsOnce
+}
+
+interface CookiesProps {
+  blockCookies: BlockCookies
+  cookies: BlockCookiesOptions
+}
+
+interface FingerprintingProps {
+  fingerprinting: BlockFPOptions
+  fingerprintingBlocked: number
+  fingerprintingBlockedResources: Array<string>
+  blockFingerprinting: BlockFingerprinting
+}
+
+type Props = CommonProps & JavaScriptProps & CookiesProps & FingerprintingProps
+
+export default class PrivacyControls extends React.PureComponent<Props, {}> {
+  get commonProps (): CommonProps {
+    const { favicon, hostname, isBlockedListOpen, setBlockedListOpen } = this.props
+    return { favicon, hostname, isBlockedListOpen, setBlockedListOpen }
+  }
+
+  render () {
+    return (
+      <>
+        <ScriptsControl
+          {...this.commonProps}
+          javascript={this.props.javascript}
+          javascriptBlocked={this.props.javascriptBlocked}
+          noScriptInfo={this.props.noScriptInfo}
+          changeNoScriptSettings={this.props.changeNoScriptSettings}
+          blockJavaScript={this.props.blockJavaScript}
+          changeAllNoScriptSettings={this.props.changeAllNoScriptSettings}
+          allowScriptOriginsOnce={this.props.allowScriptOriginsOnce}
+        />
+        <CookiesControl
+          isBlockedListOpen={this.props.isBlockedListOpen}
+          cookies={this.props.cookies}
+          blockCookies={this.props.blockCookies}
+        />
+        <DeviceRecognitionControl
+          {...this.commonProps}
+          fingerprintingBlocked={this.props.fingerprintingBlocked}
+          fingerprinting={this.props.fingerprinting}
+          fingerprintingBlockedResources={this.props.fingerprintingBlockedResources}
+          blockFingerprinting={this.props.blockFingerprinting}
+        />
+      </>
+    )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/privacyControls2.tsx b/components/brave_extension/extension/brave_extension/components/privacyControls2.tsx
deleted file mode 100644
index 9e301da169fb..000000000000
--- a/components/brave_extension/extension/brave_extension/components/privacyControls2.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/* 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'
-
-// Group Components
-import ScriptsControl from './controls/scriptsControl'
-import CookiesControl from './controls/cookiesControl'
-import DeviceRecognitionControl from './controls/deviceRecognitionControl'
-
-// Types
-import {
-  ChangeNoScriptSettings,
-  BlockJavaScript,
-  ChangeAllNoScriptSettings,
-  AllowScriptOriginsOnce,
-  BlockCookies,
-  BlockFingerprinting
-} from '../types/actions/shieldsPanelActions'
-import { BlockCookiesOptions, BlockJSOptions, BlockFPOptions } from '../types/other/blockTypes'
-import { NoScriptInfo } from '../types/other/noScriptInfo'
-
-interface CommonProps {
-  isBlockedListOpen: boolean
-  setBlockedListOpen: () => void
-  hostname: string
-  favicon: string
-}
-
-interface JavaScriptProps {
-  javascript: BlockJSOptions
-  javascriptBlocked: number
-  noScriptInfo: NoScriptInfo
-  changeNoScriptSettings: ChangeNoScriptSettings
-  blockJavaScript: BlockJavaScript
-  changeAllNoScriptSettings: ChangeAllNoScriptSettings
-  allowScriptOriginsOnce: AllowScriptOriginsOnce
-}
-
-interface CookiesProps {
-  blockCookies: BlockCookies
-  cookies: BlockCookiesOptions
-}
-
-interface FingerprintingProps {
-  fingerprinting: BlockFPOptions
-  fingerprintingBlocked: number
-  fingerprintingBlockedResources: Array<string>
-  blockFingerprinting: BlockFingerprinting
-}
-
-type Props = CommonProps & JavaScriptProps & CookiesProps & FingerprintingProps
-
-export default class PrivacyControls extends React.PureComponent<Props, {}> {
-  get commonProps (): CommonProps {
-    const { favicon, hostname, isBlockedListOpen, setBlockedListOpen } = this.props
-    return { favicon, hostname, isBlockedListOpen, setBlockedListOpen }
-  }
-
-  render () {
-    return (
-      <>
-        <ScriptsControl
-          {...this.commonProps}
-          javascript={this.props.javascript}
-          javascriptBlocked={this.props.javascriptBlocked}
-          noScriptInfo={this.props.noScriptInfo}
-          changeNoScriptSettings={this.props.changeNoScriptSettings}
-          blockJavaScript={this.props.blockJavaScript}
-          changeAllNoScriptSettings={this.props.changeAllNoScriptSettings}
-          allowScriptOriginsOnce={this.props.allowScriptOriginsOnce}
-        />
-        <CookiesControl
-          isBlockedListOpen={this.props.isBlockedListOpen}
-          cookies={this.props.cookies}
-          blockCookies={this.props.blockCookies}
-        />
-        <DeviceRecognitionControl
-          {...this.commonProps}
-          fingerprintingBlocked={this.props.fingerprintingBlocked}
-          fingerprinting={this.props.fingerprinting}
-          fingerprintingBlockedResources={this.props.fingerprintingBlockedResources}
-          blockFingerprinting={this.props.blockFingerprinting}
-        />
-      </>
-    )
-  }
-}
diff --git a/components/brave_extension/extension/brave_extension/containers/braveShields.tsx b/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
index 3e0e850337ef..429b34058ca8 100644
--- a/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
+++ b/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
@@ -6,7 +6,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as shieldsPanelActions from '../actions/shieldsPanelActions'
 import * as shieldsPanelState from '../state/shieldsPanelState'
-import BraveShields from '../components/braveShields2'
+import BraveShields from '../components/braveShields'
 import { State } from '../types/state/mainState'
 
 const mapStateToProps = (state: State) => ({
diff --git a/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts b/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts
index 1c6ace3567c9..6f91a9b38ae9 100644
--- a/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts
+++ b/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts
@@ -19,10 +19,6 @@ export const getTotalResourcesBlocked = (tabData: Partial<Tab>) => {
   )
 }
 
-export const totalAdsTrackersBlocked = (adsBlocked: number, trackersBlocked: number) => {
-  return adsBlocked + trackersBlocked
-}
-
 export const getFavicon = (url: string) => {
   return `chrome://favicon/size/16@1x/${ url }`
 }
diff --git a/components/test/brave_extension/components/braveShields/footer_test.tsx b/components/test/brave_extension/components/braveShields/footer_test.tsx
index a001e555e4cc..a7223ceaf80a 100644
--- a/components/test/brave_extension/components/braveShields/footer_test.tsx
+++ b/components/test/brave_extension/components/braveShields/footer_test.tsx
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import ShieldsFooter from '../../../../brave_extension/extension/brave_extension/components/braveShields/footer'
+import ShieldsFooter from '../../../../brave_extension/extension/brave_extension/components/footer'
 import * as tabsAPI from '../../../../brave_extension/extension/brave_extension/background/api/tabsAPI'
 import { shallow } from 'enzyme'
 

From 952a4966862b7ccfba3548c2349a00e740cf3e0a Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Thu, 7 Mar 2019 23:45:21 -0300
Subject: [PATCH 06/16] fix several shields tests after refactor

---
 .../brave_extension/components/header.tsx     |   2 +-
 .../components/interfaceControls.tsx          |   2 +-
 .../components/privacyControls.tsx            |   2 +-
 .../background/api/localeAPI_test.ts          |   2 +-
 .../components/braveShields/header_test.tsx   |   2 +-
 .../braveShields/interfaceControls_test.tsx   | 121 ------------------
 .../braveShields/privacyControls_test.tsx     | 112 ----------------
 7 files changed, 5 insertions(+), 238 deletions(-)
 delete mode 100644 components/test/brave_extension/components/braveShields/interfaceControls_test.tsx
 delete mode 100644 components/test/brave_extension/components/braveShields/privacyControls_test.tsx

diff --git a/components/brave_extension/extension/brave_extension/components/header.tsx b/components/brave_extension/extension/brave_extension/components/header.tsx
index 932ca6390cf6..758a645e0306 100644
--- a/components/brave_extension/extension/brave_extension/components/header.tsx
+++ b/components/brave_extension/extension/brave_extension/components/header.tsx
@@ -53,7 +53,7 @@ interface BlockedItemsProps {
   fingerprintingBlocked: number
 }
 
-type Props = CommonProps & BlockedItemsProps
+export type Props = CommonProps & BlockedItemsProps
 
 export default class Header extends React.PureComponent<Props, {}> {
   get blockedItemsSize (): number {
diff --git a/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
index 2beda173b853..135c8bf1e0ca 100644
--- a/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
+++ b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
@@ -36,7 +36,7 @@ interface HTTPSUpgradesProps {
   httpsEverywhereToggled: HttpsEverywhereToggled
 }
 
-type Props = CommonProps & AdsTrackersProps & HTTPSUpgradesProps
+export type Props = CommonProps & AdsTrackersProps & HTTPSUpgradesProps
 
 export default class InterfaceControls extends React.PureComponent<Props, {}> {
   get commonProps (): CommonProps {
diff --git a/components/brave_extension/extension/brave_extension/components/privacyControls.tsx b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
index 9e301da169fb..70666fabdc0d 100644
--- a/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
+++ b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
@@ -50,7 +50,7 @@ interface FingerprintingProps {
   blockFingerprinting: BlockFingerprinting
 }
 
-type Props = CommonProps & JavaScriptProps & CookiesProps & FingerprintingProps
+export type Props = CommonProps & JavaScriptProps & CookiesProps & FingerprintingProps
 
 export default class PrivacyControls extends React.PureComponent<Props, {}> {
   get commonProps (): CommonProps {
diff --git a/components/test/brave_extension/background/api/localeAPI_test.ts b/components/test/brave_extension/background/api/localeAPI_test.ts
index e85f881f9c47..0b383ba95383 100644
--- a/components/test/brave_extension/background/api/localeAPI_test.ts
+++ b/components/test/brave_extension/background/api/localeAPI_test.ts
@@ -15,7 +15,7 @@ describe('locale API', () => {
       spy.mockRestore()
     })
     it('calls chrome.i18n.getMessage with the message', () => {
-      localeAPI.getMessage(message)
+      localeAPI.getLocale(message)
       expect(spy).toBeCalledTimes(1)
       expect(spy.mock.calls[0][0]).toBe(message)
     })
diff --git a/components/test/brave_extension/components/braveShields/header_test.tsx b/components/test/brave_extension/components/braveShields/header_test.tsx
index a29dfe6fd3b7..ca82a4cb8b20 100644
--- a/components/test/brave_extension/components/braveShields/header_test.tsx
+++ b/components/test/brave_extension/components/braveShields/header_test.tsx
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import ShieldsHeader, { Props } from '../../../../brave_extension/extension/brave_extension/components/braveShields/header'
+import ShieldsHeader, { Props } from '../../../../brave_extension/extension/brave_extension/components/header'
 import { BlockOptions } from '../../../../brave_extension/extension/brave_extension/types/other/blockTypes'
 import * as actionTypes from '../../../../brave_extension/extension/brave_extension/constants/shieldsPanelTypes'
 import { shallow } from 'enzyme'
diff --git a/components/test/brave_extension/components/braveShields/interfaceControls_test.tsx b/components/test/brave_extension/components/braveShields/interfaceControls_test.tsx
deleted file mode 100644
index e8401665642c..000000000000
--- a/components/test/brave_extension/components/braveShields/interfaceControls_test.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-/* 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'
-import ShieldsInterfaceControls, { Props } from '../../../../brave_extension/extension/brave_extension/components/braveShields/interfaceControls'
-import { BlockOptions } from '../../../../brave_extension/extension/brave_extension/types/other/blockTypes'
-import * as actionTypes from '../../../../brave_extension/extension/brave_extension/constants/shieldsPanelTypes'
-import { shallow } from 'enzyme'
-
-const fakeProps: Props = {
-  url: 'https://brave.com',
-  hostname: 'brave.com',
-  braveShields: 'allow',
-  adsBlocked: 0,
-  adsBlockedResources: [],
-  ads: 'allow',
-  blockAdsTrackers: (setting: BlockOptions) => ({ type: actionTypes.BLOCK_ADS_TRACKERS, setting }),
-  trackers: 'allow',
-  trackersBlocked: 0,
-  trackersBlockedResources: [],
-  httpsRedirected: 0,
-  httpsRedirectedResources: [],
-  httpUpgradableResources: 'allow',
-  httpsEverywhereToggled: (setting: BlockOptions) => ({ type: actionTypes.HTTPS_EVERYWHERE_TOGGLED, setting })
-}
-
-describe('InterfaceControls component', () => {
-  const baseComponent = (props: Props) =>
-    <ShieldsInterfaceControls {...props} />
-
-  it('renders the component', () => {
-    const wrapper = shallow(baseComponent(fakeProps))
-    const assertion = wrapper.find('#braveShieldsInterfaceControls').length === 1
-    expect(assertion).toBe(true)
-  })
-
-  describe('ad control', () => {
-    it('responds to the onChange event', () => {
-      const value = { target: { value: true } }
-      const onChangeAdControlSelectOptions = jest.spyOn(fakeProps, 'blockAdsTrackers')
-      const newProps = Object.assign(fakeProps, {
-        blockAdsTrackers: onChangeAdControlSelectOptions
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#blockAds').simulate('change', value)
-      expect(onChangeAdControlSelectOptions).toBeCalled()
-    })
-
-    it('can toggle ad control on', () => {
-      const newProps = Object.assign(fakeProps, { ads: 'block', trackers: 'block' })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#blockAds').prop('checked')
-      expect(assertion).toBe(true)
-    })
-
-    it('can toggle ad control off', () => {
-      const newProps = Object.assign(fakeProps, { ads: 'allow', trackers: 'allow' })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#blockAds').prop('checked')
-      expect(assertion).toBe(false)
-    })
-
-    it('shows number of ads blocked', () => {
-      const newProps = Object.assign(fakeProps, { adsBlocked: 13 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#blockAdsStat').props().children
-      expect(assertion).toBe('13')
-    })
-
-    it('trim ads blocked to 99+ if number is higher', () => {
-      const newProps = Object.assign(fakeProps, { adsBlocked: 123123123123123 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#blockAdsStat').props().children
-      expect(assertion).toBe('99+')
-    })
-  })
-
-  describe('https everywhere control', () => {
-    it('responds to the onChange event', () => {
-      const value = { target: { value: true } }
-      const onChangeConnectionsEncryptedSwitch = jest.spyOn(fakeProps, 'httpsEverywhereToggled')
-      const newProps = Object.assign(fakeProps, {
-        httpsEverywhereToggled: onChangeConnectionsEncryptedSwitch
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#connectionsEncrypted').simulate('change', value)
-      expect(onChangeConnectionsEncryptedSwitch).toBeCalled()
-    })
-
-    it('can toggle ad control on', () => {
-      const newProps = Object.assign(fakeProps, { httpUpgradableResources: 'block' })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#connectionsEncrypted').prop('checked')
-      expect(assertion).toBe(true)
-    })
-
-    it('can toggle ad control off', () => {
-      const newProps = Object.assign(fakeProps, { httpUpgradableResources: 'allow' })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#connectionsEncrypted').prop('checked')
-      expect(assertion).toBe(false)
-    })
-
-    it('shows number of https redirected', () => {
-      const newProps = Object.assign(fakeProps, { httpsRedirected: 13 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#connectionsEncryptedStat').props().children
-      expect(assertion).toBe('13')
-    })
-
-    it('trim https redirected to 99+ if number is higher', () => {
-      const newProps = Object.assign(fakeProps, { httpsRedirected: 123123123 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#connectionsEncryptedStat').props().children
-      expect(assertion).toBe('99+')
-    })
-  })
-})
diff --git a/components/test/brave_extension/components/braveShields/privacyControls_test.tsx b/components/test/brave_extension/components/braveShields/privacyControls_test.tsx
deleted file mode 100644
index fd48161d9d3a..000000000000
--- a/components/test/brave_extension/components/braveShields/privacyControls_test.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-/* global describe, it */
-/* 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'
-import ShieldsPrivacyControls, { Props } from '../../../../brave_extension/extension/brave_extension/components/braveShields/privacyControls'
-import { BlockJSOptions, BlockCookiesOptions, BlockFPOptions } from '../../../../brave_extension/extension/brave_extension/types/other/blockTypes'
-import * as actionTypes from '../../../../brave_extension/extension/brave_extension/constants/shieldsPanelTypes'
-import { shallow } from 'enzyme'
-
-const fakeProps: Props = {
-  url: 'https://brave.com/jobs',
-  hostname: 'brave.com',
-  origin: 'https://brave.com',
-  braveShields: 'allow',
-  javascript: 'block',
-  javascriptBlocked: 0,
-  blockJavaScript: (setting: BlockJSOptions) => ({ type: actionTypes.JAVASCRIPT_TOGGLED, setting }),
-  javascriptBlockedResources: [],
-  noScriptInfo: {},
-  allowScriptOriginsOnce: (origins: Array<string>) => ({ type: actionTypes.ALLOW_SCRIPT_ORIGINS_ONCE, origins }),
-  changeNoScriptSettings: (origin: string) => ({ type: actionTypes.CHANGE_NO_SCRIPT_SETTINGS, origin }),
-  changeAllNoScriptSettings: (origin: string, shouldBlock: boolean) => ({ type: actionTypes.CHANGE_ALL_NO_SCRIPT_SETTINGS, origin, shouldBlock }),
-  fingerprinting: 'block',
-  fingerprintingBlocked: 0,
-  blockFingerprinting: (setting: BlockFPOptions) => ({ type: actionTypes.BLOCK_FINGERPRINTING, setting }),
-  fingerprintingBlockedResources: [],
-  cookies: 'block',
-  blockCookies: (setting: BlockCookiesOptions) => ({ type: actionTypes.BLOCK_COOKIES, setting })
-}
-
-describe('PrivacyControls component', () => {
-  const baseComponent = (props: Props) =>
-    <ShieldsPrivacyControls {...props} />
-
-  it('renders the component', () => {
-    const wrapper = shallow(baseComponent(fakeProps))
-    const assertion = wrapper.find('#braveShieldsPrivacyControls').length === 1
-    expect(assertion).toBe(true)
-  })
-
-  describe('cookie control', () => {
-    it('responds to the onChange event', () => {
-      const value = { target: { value: true } }
-      const onChangeCookiesControlSelectOptions = jest.spyOn(fakeProps, 'blockCookies')
-      const newProps = Object.assign(fakeProps, {
-        blockCookies: onChangeCookiesControlSelectOptions
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#blockCookies').simulate('change', value)
-      expect(onChangeCookiesControlSelectOptions).toBeCalled()
-    })
-  })
-
-  describe('scripts control', () => {
-    it('responds to the onChange event', () => {
-      const value = { target: { value: true } }
-      const onChangeScriptControlSelectOptions = jest.spyOn(fakeProps, 'blockJavaScript')
-      const newProps = Object.assign(fakeProps, {
-        blockJavaScript: onChangeScriptControlSelectOptions
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#blockScripts').simulate('change', value)
-      expect(onChangeScriptControlSelectOptions).toBeCalled()
-    })
-
-    it('shows number of scripts blocked', () => {
-      const newProps = Object.assign(fakeProps, { javascriptBlocked: 13 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#blockScriptsStat').props().children
-      expect(assertion).toBe('13')
-    })
-
-    it('trim number of scripts blocked to 99+ if number is higher', () => {
-      const newProps = Object.assign(fakeProps, { javascriptBlocked: 123123123 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#blockScriptsStat').props().children
-      expect(assertion).toBe('99+')
-    })
-  })
-
-  describe('fingerprinting control', () => {
-    it('responds to the onChange event', () => {
-      const value = { target: { value: true } }
-      const onChangeFingerprintingProtectionSelectOptions = jest.spyOn(fakeProps, 'blockFingerprinting')
-      const newProps = Object.assign(fakeProps, {
-        blockFingerprinting: onChangeFingerprintingProtectionSelectOptions
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#blockFingerprinting').simulate('change', value)
-      expect(onChangeFingerprintingProtectionSelectOptions).toBeCalled()
-    })
-
-    it('shows number of fingerprinting attempts blocked', () => {
-      const newProps = Object.assign(fakeProps, { fingerprintingBlocked: 13 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#blockFingerprintingStat').props().children
-      expect(assertion).toBe('13')
-    })
-
-    it('trim number of fingerprinting to 99+ if number is higher', () => {
-      const newProps = Object.assign(fakeProps, { fingerprintingBlocked: 123123123 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#blockFingerprintingStat').props().children
-      expect(assertion).toBe('99+')
-    })
-  })
-})

From b8cce944e4fe3dd88b978a0d797db69249e2d13b Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 01:08:21 -0300
Subject: [PATCH 07/16] update footer tests

---
 .../extension/brave_extension/components/footer.tsx       | 2 +-
 .../components/braveShields/footer_test.tsx               | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/brave_extension/extension/brave_extension/components/footer.tsx b/components/brave_extension/extension/brave_extension/components/footer.tsx
index 522a6020baf8..43b99c5a6562 100644
--- a/components/brave_extension/extension/brave_extension/components/footer.tsx
+++ b/components/brave_extension/extension/brave_extension/components/footer.tsx
@@ -13,7 +13,7 @@ import * as tabsAPI from '../background/api/tabsAPI'
 // Locale
 import { getLocale } from '../background/api/localeAPI'
 
-interface Props {
+export interface Props {
   isBlockedListOpen: boolean
 }
 
diff --git a/components/test/brave_extension/components/braveShields/footer_test.tsx b/components/test/brave_extension/components/braveShields/footer_test.tsx
index a7223ceaf80a..871c785d8337 100644
--- a/components/test/brave_extension/components/braveShields/footer_test.tsx
+++ b/components/test/brave_extension/components/braveShields/footer_test.tsx
@@ -3,12 +3,16 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import ShieldsFooter from '../../../../brave_extension/extension/brave_extension/components/footer'
+import ShieldsFooter, { Props } from '../../../../brave_extension/extension/brave_extension/components/footer'
 import * as tabsAPI from '../../../../brave_extension/extension/brave_extension/background/api/tabsAPI'
 import { shallow } from 'enzyme'
 
+const fakeProps: Props = {
+  isBlockedListOpen: false
+}
+
 describe('ShieldsFooter component', () => {
-  const baseComponent = () => <ShieldsFooter />
+  const baseComponent = () => <ShieldsFooter {...fakeProps} />
 
   it('renders the component', () => {
     const wrapper = shallow(baseComponent())

From 488b0b3e301cf0e10cae97d4aaeb2b42ca415b50 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 01:08:29 -0300
Subject: [PATCH 08/16] update header tests

---
 .../brave_extension/components/header.tsx     |  6 +--
 .../components/braveShields/header_test.tsx   | 49 ++++++-------------
 2 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/components/brave_extension/extension/brave_extension/components/header.tsx b/components/brave_extension/extension/brave_extension/components/header.tsx
index 758a645e0306..c4f15c710979 100644
--- a/components/brave_extension/extension/brave_extension/components/header.tsx
+++ b/components/brave_extension/extension/brave_extension/components/header.tsx
@@ -80,7 +80,7 @@ export default class Header extends React.PureComponent<Props, {}> {
   render () {
     const { enabled, favicon, hostname, isBlockedListOpen } = this.props
     return (
-      <ShieldsHeader status={enabled ? 'enabled' : 'disabled'}>
+      <ShieldsHeader id='braveShieldsHeader' status={enabled ? 'enabled' : 'disabled'}>
         <MainToggle status={enabled ? 'enabled' : 'disabled'}>
           <div>
             <MainToggleHeading>
@@ -92,12 +92,12 @@ export default class Header extends React.PureComponent<Props, {}> {
             </MainToggleHeading>
             {enabled ? <MainToggleText>{getLocale('enabledMessage')}</MainToggleText> : null}
           </div>
-          <Toggle size='large' checked={enabled} onChange={this.onToggleShields} disabled={isBlockedListOpen} />
+          <Toggle id='mainToggle' size='large' checked={enabled} onChange={this.onToggleShields} disabled={isBlockedListOpen} />
         </MainToggle>
         <SiteOverview status={enabled ? 'enabled' : 'disabled'}>
           <SiteInfo>
             <Favicon src={favicon} />
-            <SiteInfoText>{hostname}</SiteInfoText>
+            <SiteInfoText id='hostname'>{hostname}</SiteInfoText>
           </SiteInfo>
           {
             enabled
diff --git a/components/test/brave_extension/components/braveShields/header_test.tsx b/components/test/brave_extension/components/braveShields/header_test.tsx
index ca82a4cb8b20..0b64345a2739 100644
--- a/components/test/brave_extension/components/braveShields/header_test.tsx
+++ b/components/test/brave_extension/components/braveShields/header_test.tsx
@@ -9,34 +9,17 @@ import * as actionTypes from '../../../../brave_extension/extension/brave_extens
 import { shallow } from 'enzyme'
 
 const fakeProps: Props = {
-  tabData: {
-    hostname: 'brave.com',
-    origin: 'https://brave.com',
-    url: 'https://brave.com',
-    braveShields: 'allow',
-    adsBlocked: 0,
-    ads: 'block',
-    adsBlockedResources: [],
-    httpsRedirected: 0,
-    httpUpgradableResources: 'block',
-    httpsRedirectedResources: [],
-    id: 0,
-    javascript: 'block',
-    javascriptBlocked: 0,
-    javascriptBlockedResources: [],
-    trackers: 'block',
-    trackersBlocked: 0,
-    trackersBlockedResources: [],
-    fingerprinting: 'block',
-    fingerprintingBlocked: 0,
-    fingerprintingBlockedResources: [],
-    cookies: 'block',
-    noScriptInfo: {},
-    controlsOpen: false
-  },
-  shieldsToggled: (setting: BlockOptions) => {
-    return { type: actionTypes.SHIELDS_TOGGLED, setting }
-  }
+  enabled: false,
+  favicon: '',
+  origin: 'https://brave.com',
+  hostname: 'brave.com',
+  isBlockedListOpen: true,
+  shieldsToggled: (setting: BlockOptions) => ({ type: actionTypes.SHIELDS_TOGGLED, setting }),
+  adsBlocked: 0,
+  trackersBlocked: 0,
+  httpsUpgrades: 0,
+  scriptsBlocked: 0,
+  fingerprintingBlocked: 0
 }
 
 describe('ShieldsHeader component', () => {
@@ -61,7 +44,7 @@ describe('ShieldsHeader component', () => {
   })
 
   it('can toggle shields off', () => {
-    const newProps = Object.assign(fakeProps, { tabData: { braveShields: 'block' } })
+    const newProps = Object.assign(fakeProps, { enabled: false })
     const wrapper = shallow(baseComponent(newProps))
     const assertion = wrapper.find('#mainToggle').prop('checked')
     expect(assertion).toBe(false)
@@ -69,21 +52,19 @@ describe('ShieldsHeader component', () => {
 
   it('can toggle shields on', () => {
     // start with shields off
-    const newProps1 = Object.assign(fakeProps, { tabData: { braveShields: 'block' } })
+    const newProps1 = Object.assign(fakeProps, { enabled: false })
     const wrapper = shallow(baseComponent(newProps1))
     const assertion1 = wrapper.find('#mainToggle').prop('checked')
     expect(assertion1).toBe(false)
     // then turn it on
-    const newProps2 = Object.assign(fakeProps, { tabData: { braveShields: 'allow' } })
+    const newProps2 = Object.assign(fakeProps, { enabled: true })
     const wrapper2 = shallow(baseComponent(newProps2))
     const assertion2 = wrapper2.find('#mainToggle').prop('checked')
     expect(assertion2).toBe(true)
   })
 
   it('displays the hostname', () => {
-    const newProps = Object.assign(fakeProps, {
-      tabData: { hostname: 'https://brian-bondy-canada-do-te-karate.com' }
-    })
+    const newProps = Object.assign(fakeProps, { hostname: 'https://brian-bondy-canada-do-te-karate.com' })
     const wrapper = shallow(baseComponent(newProps))
     const assertion = wrapper.find('#hostname').props().children
     expect(assertion).toBe('https://brian-bondy-canada-do-te-karate.com')

From 08ccbc2bd17fe3bae1229f0813aa15314133b26d Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 00:08:25 -0300
Subject: [PATCH 09/16] add adsTrackersControl test

---
 .../controls/adsTrackersControl.tsx           |  7 +-
 .../controls/adsTrackersControl_test.tsx      | 76 +++++++++++++++++++
 2 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 components/test/brave_extension/components/controls/adsTrackersControl_test.tsx

diff --git a/components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx
index c6eae9f589cd..6d55600f2771 100644
--- a/components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx
+++ b/components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx
@@ -52,7 +52,7 @@ interface AdsTrackersProps {
   blockAdsTrackers: BlockAdsTrackers
 }
 
-type Props = CommonProps & AdsTrackersProps
+export type Props = CommonProps & AdsTrackersProps
 
 interface State {
   trackersBlockedOpen: boolean
@@ -120,7 +120,7 @@ export default class AdsTrackersControl extends React.PureComponent<Props, State
     const { trackersBlockedOpen } = this.state
     return (
       <>
-        <BlockedInfoRow>
+        <BlockedInfoRow id='adsTrackersControl'>
           <BlockedInfoRowData
             disabled={this.maybeDisableResourcesRow}
             tabIndex={this.tabIndex}
@@ -128,10 +128,11 @@ export default class AdsTrackersControl extends React.PureComponent<Props, State
             onKeyDown={this.onOpen3rdPartyTrackersBlockedViaKeyboard}
           >
             <ArrowDownIcon />
-            <BlockedInfoRowStats>{this.totalAdsTrackersBlockedDisplay}</BlockedInfoRowStats>
+            <BlockedInfoRowStats id='blockAdsStat'>{this.totalAdsTrackersBlockedDisplay}</BlockedInfoRowStats>
             <BlockedInfoRowText>{getLocale('thirdPartyTrackersBlocked')}</BlockedInfoRowText>
           </BlockedInfoRowData>
           <Toggle
+            id='blockAds'
             size='small'
             disabled={isBlockedListOpen}
             checked={this.maybeBlock3rdPartyTrackersBlocked}
diff --git a/components/test/brave_extension/components/controls/adsTrackersControl_test.tsx b/components/test/brave_extension/components/controls/adsTrackersControl_test.tsx
new file mode 100644
index 000000000000..725a186ab405
--- /dev/null
+++ b/components/test/brave_extension/components/controls/adsTrackersControl_test.tsx
@@ -0,0 +1,76 @@
+/* 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'
+import AdsTrackersControl, { Props } from '../../../../brave_extension/extension/brave_extension/components/controls/adsTrackersControl'
+import { BlockOptions } from '../../../../brave_extension/extension/brave_extension/types/other/blockTypes'
+import * as actionTypes from '../../../../brave_extension/extension/brave_extension/constants/shieldsPanelTypes'
+import { shallow } from 'enzyme'
+
+const fakeProps: Props = {
+  isBlockedListOpen: true,
+  setBlockedListOpen: () => { return },
+  hostname: 'brave.com',
+  favicon: '',
+  ads: 'allow',
+  adsBlocked: 0,
+  adsBlockedResources: [],
+  trackers: 'allow',
+  trackersBlocked: 0,
+  trackersBlockedResources: [],
+  blockAdsTrackers: (setting: BlockOptions) => ({ type: actionTypes.BLOCK_ADS_TRACKERS, setting })
+}
+
+describe('AdsTrackersControl component', () => {
+  const baseComponent = (props: Props) =>
+    <AdsTrackersControl {...props} />
+
+  it('renders the component', () => {
+    const wrapper = shallow(baseComponent(fakeProps))
+    const assertion = wrapper.find('#adsTrackersControl').length === 1
+    expect(assertion).toBe(true)
+  })
+
+  describe('ad control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeAdControlSelectOptions = jest.spyOn(fakeProps, 'blockAdsTrackers')
+      const newProps = Object.assign(fakeProps, {
+        blockAdsTrackers: onChangeAdControlSelectOptions
+      })
+
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#blockAds').simulate('change', value)
+      expect(onChangeAdControlSelectOptions).toBeCalled()
+    })
+
+    it('can toggle ad control on', () => {
+      const newProps = Object.assign(fakeProps, { ads: 'block', trackers: 'block' })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockAds').prop('checked')
+      expect(assertion).toBe(true)
+    })
+
+    it('can toggle ad control off', () => {
+      const newProps = Object.assign(fakeProps, { ads: 'allow', trackers: 'allow' })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockAds').prop('checked')
+      expect(assertion).toBe(false)
+    })
+
+    it('shows number of ads blocked', () => {
+      const newProps = Object.assign(fakeProps, { adsBlocked: 13 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockAdsStat').props().children
+      expect(assertion).toBe('13')
+    })
+
+    it('trim ads blocked to 99+ if number is higher', () => {
+      const newProps = Object.assign(fakeProps, { adsBlocked: 123123123123123 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockAdsStat').props().children
+      expect(assertion).toBe('99+')
+    })
+  })
+})

From 16a086b52dfbd5766b23e0a85dcf02f00b185501 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 00:20:12 -0300
Subject: [PATCH 10/16] add httpsUpgradesControl test

---
 .../controls/httpsUpgradesControl.tsx         |  7 +-
 .../controls/httpsUpgradesControl_test.tsx    | 73 +++++++++++++++++++
 2 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 components/test/brave_extension/components/controls/httpsUpgradesControl_test.tsx

diff --git a/components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx
index 8d4eeeed7f2d..baa461642925 100644
--- a/components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx
+++ b/components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx
@@ -47,7 +47,7 @@ interface HTTPSUpgradesProps {
   httpsEverywhereToggled: HttpsEverywhereToggled
 }
 
-type Props = CommonProps & HTTPSUpgradesProps
+export type Props = CommonProps & HTTPSUpgradesProps
 
 interface State {
   connectionsUpgradedOpen: boolean
@@ -107,7 +107,7 @@ export default class HTTPSUpgradesControl extends React.PureComponent<Props, Sta
     const { connectionsUpgradedOpen } = this.state
     return (
       <>
-        <BlockedInfoRow>
+        <BlockedInfoRow id='httpsUpgradesControl'>
           <BlockedInfoRowData
             disabled={this.maybeDisableResourcesRow}
             tabIndex={this.tabIndex}
@@ -115,10 +115,11 @@ export default class HTTPSUpgradesControl extends React.PureComponent<Props, Sta
             onKeyDown={this.onOpenConnectionsUpgradedToHTTPSViaKeyboard}
           >
             <ArrowDownIcon />
-            <BlockedInfoRowStats>{this.httpsRedirectedDisplay}</BlockedInfoRowStats>
+            <BlockedInfoRowStats id='connectionsEncryptedStat'>{this.httpsRedirectedDisplay}</BlockedInfoRowStats>
             <BlockedInfoRowText>{getLocale('connectionsUpgradedHTTPS')}</BlockedInfoRowText>
           </BlockedInfoRowData>
           <Toggle
+            id='connectionsEncrypted'
             size='small'
             disabled={isBlockedListOpen}
             checked={this.shouldBlockConnectionsUpgradedToHTTPS}
diff --git a/components/test/brave_extension/components/controls/httpsUpgradesControl_test.tsx b/components/test/brave_extension/components/controls/httpsUpgradesControl_test.tsx
new file mode 100644
index 000000000000..3cc358b79a40
--- /dev/null
+++ b/components/test/brave_extension/components/controls/httpsUpgradesControl_test.tsx
@@ -0,0 +1,73 @@
+/* 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'
+import HttpsUpgradesControl, { Props } from '../../../../brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl'
+import { BlockOptions } from '../../../../brave_extension/extension/brave_extension/types/other/blockTypes'
+import * as actionTypes from '../../../../brave_extension/extension/brave_extension/constants/shieldsPanelTypes'
+import { shallow } from 'enzyme'
+
+const fakeProps: Props = {
+  isBlockedListOpen: true,
+  setBlockedListOpen: () => { return },
+  hostname: 'brave.com',
+  favicon: '',
+  httpsRedirected: 0,
+  httpUpgradableResources: 'allow',
+  httpsRedirectedResources: [],
+  httpsEverywhereToggled: (setting: BlockOptions) => ({ type: actionTypes.HTTPS_EVERYWHERE_TOGGLED, setting })
+}
+
+describe('HttpsUpgradesControl component', () => {
+  const baseComponent = (props: Props) =>
+    <HttpsUpgradesControl {...props} />
+
+  it('renders the component', () => {
+    const wrapper = shallow(baseComponent(fakeProps))
+    const assertion = wrapper.find('#httpsUpgradesControl').length === 1
+    expect(assertion).toBe(true)
+  })
+
+  describe('https everywhere control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeConnectionsEncryptedSwitch = jest.spyOn(fakeProps, 'httpsEverywhereToggled')
+      const newProps = Object.assign(fakeProps, {
+        httpsEverywhereToggled: onChangeConnectionsEncryptedSwitch
+      })
+
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#connectionsEncrypted').simulate('change', value)
+      expect(onChangeConnectionsEncryptedSwitch).toBeCalled()
+    })
+
+    it('can toggle ad control on', () => {
+      const newProps = Object.assign(fakeProps, { httpUpgradableResources: 'block' })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#connectionsEncrypted').prop('checked')
+      expect(assertion).toBe(true)
+    })
+
+    it('can toggle ad control off', () => {
+      const newProps = Object.assign(fakeProps, { httpUpgradableResources: 'allow' })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#connectionsEncrypted').prop('checked')
+      expect(assertion).toBe(false)
+    })
+
+    it('shows number of https redirected', () => {
+      const newProps = Object.assign(fakeProps, { httpsRedirected: 13 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#connectionsEncryptedStat').props().children
+      expect(assertion).toBe('13')
+    })
+
+    it('trim https redirected to 99+ if number is higher', () => {
+      const newProps = Object.assign(fakeProps, { httpsRedirected: 123123123 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#connectionsEncryptedStat').props().children
+      expect(assertion).toBe('99+')
+    })
+  })
+})

From 32359d025ad3e1439c85e68ab7fd845ea379bf56 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 00:25:09 -0300
Subject: [PATCH 11/16] add cookiesControl test

---
 .../components/controls/cookiesControl.tsx    |  4 +-
 .../controls/cookiesControl_test.tsx          | 40 +++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 components/test/brave_extension/components/controls/cookiesControl_test.tsx

diff --git a/components/brave_extension/extension/brave_extension/components/controls/cookiesControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/cookiesControl.tsx
index 81ee28be3979..70d6e9d63ea1 100644
--- a/components/brave_extension/extension/brave_extension/components/controls/cookiesControl.tsx
+++ b/components/brave_extension/extension/brave_extension/components/controls/cookiesControl.tsx
@@ -14,7 +14,7 @@ import { getLocale } from '../../background/api/localeAPI'
 import { BlockCookies } from '../../types/actions/shieldsPanelActions'
 import { BlockCookiesOptions } from '../../types/other/blockTypes'
 
-interface Props {
+export interface Props {
   isBlockedListOpen: boolean
   cookies: BlockCookiesOptions
   blockCookies: BlockCookies
@@ -29,7 +29,7 @@ export default class CookiesControl extends React.PureComponent<Props, {}> {
     const { isBlockedListOpen, cookies } = this.props
     return (
       <>
-        <BlockedInfoRowSingle>
+        <BlockedInfoRowSingle id='cookiesControl'>
           <SelectBox
             id='blockCookies'
             disabled={isBlockedListOpen}
diff --git a/components/test/brave_extension/components/controls/cookiesControl_test.tsx b/components/test/brave_extension/components/controls/cookiesControl_test.tsx
new file mode 100644
index 000000000000..b263a83fdcf8
--- /dev/null
+++ b/components/test/brave_extension/components/controls/cookiesControl_test.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'
+import CookiesControl, { Props } from '../../../../brave_extension/extension/brave_extension/components/controls/cookiesControl'
+import { BlockCookiesOptions } from '../../../../brave_extension/extension/brave_extension/types/other/blockTypes'
+import * as actionTypes from '../../../../brave_extension/extension/brave_extension/constants/shieldsPanelTypes'
+import { shallow } from 'enzyme'
+
+const fakeProps: Props = {
+  isBlockedListOpen: true,
+  cookies: 'allow',
+  blockCookies: (setting: BlockCookiesOptions) => ({ type: actionTypes.BLOCK_COOKIES, setting })
+}
+
+describe('CookiesControl component', () => {
+  const baseComponent = (props: Props) =>
+    <CookiesControl {...props} />
+
+  it('renders the component', () => {
+    const wrapper = shallow(baseComponent(fakeProps))
+    const assertion = wrapper.find('#cookiesControl').length === 1
+    expect(assertion).toBe(true)
+  })
+
+  describe('cookie control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeCookiesControlSelectOptions = jest.spyOn(fakeProps, 'blockCookies')
+      const newProps = Object.assign(fakeProps, {
+        blockCookies: onChangeCookiesControlSelectOptions
+      })
+
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#blockCookies').simulate('change', value)
+      expect(onChangeCookiesControlSelectOptions).toBeCalled()
+    })
+  })
+})

From 7b0d4c216ba0419a0afaf4ac583d4d5710746ad8 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 00:37:16 -0300
Subject: [PATCH 12/16] add deviceRecognitionControl test

---
 .../controls/deviceRecognitionControl.tsx     |  6 +-
 .../deviceRecognitionControl_test.tsx         | 59 +++++++++++++++++++
 2 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 components/test/brave_extension/components/controls/deviceRecognitionControl_test.tsx

diff --git a/components/brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl.tsx
index 8634fecff4bc..794e794de046 100644
--- a/components/brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl.tsx
+++ b/components/brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl.tsx
@@ -44,7 +44,7 @@ interface HTTPSUpgradesProps {
   blockFingerprinting: BlockFingerprinting
 }
 
-type Props = CommonProps & HTTPSUpgradesProps
+export type Props = CommonProps & HTTPSUpgradesProps
 
 interface State {
   deviceRecognitionOpen: boolean
@@ -107,7 +107,7 @@ export default class DeviceRecognitionControl extends React.PureComponent<Props,
     const { deviceRecognitionOpen } = this.state
     return (
       <>
-        <BlockedInfoRowForSelect>
+        <BlockedInfoRowForSelect id='deviceRecognitionControl'>
           <BlockedInfoRowDataForSelect
             disabled={this.maybeDisableResourcesRow}
             tabIndex={this.tabIndex}
@@ -115,7 +115,7 @@ export default class DeviceRecognitionControl extends React.PureComponent<Props,
             onKeyDown={this.onOpenDeviceRecognitionViaKeyboard}
           >
             <ArrowDownIcon />
-            <BlockedInfoRowStats>{this.totalDeviceRecognitonAttemptsDisplay}</BlockedInfoRowStats>
+            <BlockedInfoRowStats id='blockFingerprintingStat'>{this.totalDeviceRecognitonAttemptsDisplay}</BlockedInfoRowStats>
           </BlockedInfoRowDataForSelect>
           <SelectBox
             id='blockFingerprinting'
diff --git a/components/test/brave_extension/components/controls/deviceRecognitionControl_test.tsx b/components/test/brave_extension/components/controls/deviceRecognitionControl_test.tsx
new file mode 100644
index 000000000000..c4f58103b1a7
--- /dev/null
+++ b/components/test/brave_extension/components/controls/deviceRecognitionControl_test.tsx
@@ -0,0 +1,59 @@
+/* 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'
+import DeviceRecognitionControl, { Props } from '../../../../brave_extension/extension/brave_extension/components/controls/deviceRecognitionControl'
+import { BlockOptions } from '../../../../brave_extension/extension/brave_extension/types/other/blockTypes'
+import * as actionTypes from '../../../../brave_extension/extension/brave_extension/constants/shieldsPanelTypes'
+import { shallow } from 'enzyme'
+
+const fakeProps: Props = {
+  favicon: '',
+  hostname: 'brave.com',
+  isBlockedListOpen: true,
+  setBlockedListOpen: () => { return },
+  fingerprinting: 'allow',
+  fingerprintingBlocked: 0,
+  fingerprintingBlockedResources: [],
+  blockFingerprinting: (setting: BlockOptions) => ({ type: actionTypes.BLOCK_FINGERPRINTING, setting })
+}
+
+describe('DeviceRecognitionControl component', () => {
+  const baseComponent = (props: Props) =>
+    <DeviceRecognitionControl {...props} />
+
+  it('renders the component', () => {
+    const wrapper = shallow(baseComponent(fakeProps))
+    const assertion = wrapper.find('#deviceRecognitionControl').length === 1
+    expect(assertion).toBe(true)
+  })
+
+  describe('DeviceRecognitionControl control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeFingerprintingProtectionSelectOptions = jest.spyOn(fakeProps, 'blockFingerprinting')
+      const newProps = Object.assign(fakeProps, {
+        blockFingerprinting: onChangeFingerprintingProtectionSelectOptions
+      })
+
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#blockFingerprinting').simulate('change', value)
+      expect(onChangeFingerprintingProtectionSelectOptions).toBeCalled()
+    })
+
+    it('shows number of fingerprinting attempts blocked', () => {
+      const newProps = Object.assign(fakeProps, { fingerprintingBlocked: 13 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockFingerprintingStat').props().children
+      expect(assertion).toBe('13')
+    })
+
+    it('trim number of fingerprinting to 99+ if number is higher', () => {
+      const newProps = Object.assign(fakeProps, { fingerprintingBlocked: 123123123 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockFingerprintingStat').props().children
+      expect(assertion).toBe('99+')
+    })
+  })
+})

From dee92bdfc888f2ade105c3e7731eb2a298903835 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 00:53:40 -0300
Subject: [PATCH 13/16] add scriptsControl test

---
 .../components/controls/scriptsControl.tsx    |  7 ++-
 .../controls/scriptsControl_test.tsx          | 61 +++++++++++++++++++
 2 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 components/test/brave_extension/components/controls/scriptsControl_test.tsx

diff --git a/components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx b/components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx
index 9010ab5dcd77..81cf68592ed6 100644
--- a/components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx
+++ b/components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx
@@ -57,7 +57,7 @@ interface JavaScriptProps {
   allowScriptOriginsOnce: AllowScriptOriginsOnce
 }
 
-type Props = CommonProps & JavaScriptProps
+export type Props = CommonProps & JavaScriptProps
 
 interface State {
   scriptsBlockedOpen: boolean
@@ -127,7 +127,7 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
     const { scriptsBlockedOpen } = this.state
     return (
       <>
-        <BlockedInfoRow>
+        <BlockedInfoRow id='scriptsControl'>
           <BlockedInfoRowData
             disabled={this.maybeDisableResourcesRow}
             tabIndex={this.tabIndex}
@@ -135,10 +135,11 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
             onKeyDown={this.onOpenScriptsBlockedViaKeyboard}
           >
             <ArrowDownIcon />
-            <BlockedInfoRowStats>{this.javascriptBlockedDisplay}</BlockedInfoRowStats>
+            <BlockedInfoRowStats id='blockScriptsStat'>{this.javascriptBlockedDisplay}</BlockedInfoRowStats>
             <BlockedInfoRowText>{getLocale('scriptsBlocked')}</BlockedInfoRowText>
           </BlockedInfoRowData>
           <Toggle
+            id='blockScripts'
             size='small'
             disabled={isBlockedListOpen}
             checked={this.shouldBlockJavaScript}
diff --git a/components/test/brave_extension/components/controls/scriptsControl_test.tsx b/components/test/brave_extension/components/controls/scriptsControl_test.tsx
new file mode 100644
index 000000000000..b2a93e9bac34
--- /dev/null
+++ b/components/test/brave_extension/components/controls/scriptsControl_test.tsx
@@ -0,0 +1,61 @@
+/* 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'
+import { shallow } from 'enzyme'
+import ScriptsControl, { Props } from '../../../../brave_extension/extension/brave_extension/components/controls/scriptsControl'
+import * as actionTypes from '../../../../brave_extension/extension/brave_extension/constants/shieldsPanelTypes'
+import { BlockJSOptions } from '../../../../brave_extension/extension/brave_extension/types/other/blockTypes'
+
+const fakeProps: Props = {
+  isBlockedListOpen: true,
+  setBlockedListOpen: () => { return },
+  hostname: 'brave.com',
+  favicon: '',
+  javascript: 'allow',
+  javascriptBlocked: 0,
+  noScriptInfo: {},
+  changeNoScriptSettings: (origin: string) => ({ type: actionTypes.CHANGE_NO_SCRIPT_SETTINGS, origin }),
+  blockJavaScript: (setting: BlockJSOptions) => ({ type: actionTypes.JAVASCRIPT_TOGGLED, setting }),
+  changeAllNoScriptSettings: (shouldBlock: boolean) => ({ type: actionTypes.CHANGE_ALL_NO_SCRIPT_SETTINGS, shouldBlock }),
+  allowScriptOriginsOnce: (origins: string[]) => ({ type: actionTypes.ALLOW_SCRIPT_ORIGINS_ONCE, origins })
+}
+
+describe('ScriptsControl component', () => {
+  const baseComponent = (props: Props) =>
+    <ScriptsControl {...props} />
+
+  it('renders the component', () => {
+    const wrapper = shallow(baseComponent(fakeProps))
+    const assertion = wrapper.find('#scriptsControl').length === 1
+    expect(assertion).toBe(true)
+  })
+
+  describe('scripts control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeScriptControlSwitch = jest.spyOn(fakeProps, 'blockJavaScript')
+      const newProps = Object.assign(fakeProps, {
+        blockJavaScript: onChangeScriptControlSwitch
+      })
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#blockScripts').simulate('change', value)
+      expect(onChangeScriptControlSwitch).toBeCalled()
+    })
+
+    it('shows number of scripts blocked', () => {
+      const newProps = Object.assign(fakeProps, { javascriptBlocked: 13 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockScriptsStat').props().children
+      expect(assertion).toBe('13')
+    })
+
+    it('trim number of scripts blocked to 99+ if number is higher', () => {
+      const newProps = Object.assign(fakeProps, { javascriptBlocked: 123123123 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockScriptsStat').props().children
+      expect(assertion).toBe('99+')
+    })
+  })
+})

From be4c79e0f0e0f05bdc7fdfafd00a535e6148c491 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 01:11:11 -0300
Subject: [PATCH 14/16] remove unnecessary logging from shields tests

---
 .../background/api/cosmeticFilterAPI.ts        |  6 ++++--
 components/test/testData.ts                    | 18 +++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts b/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts
index a8905f6f4757..30dfd653893d 100644
--- a/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts
+++ b/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts
@@ -22,13 +22,15 @@ export const applySiteFilters = (hostname: string) => {
   chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
     if (!storeData.cosmeticFilterList) {
       if (process.env.NODE_ENV === 'shields_development') {
-        console.info('applySiteFilters: no cosmetic filter store yet')
+        console.log('applySiteFilters: no cosmetic filter store yet')
       }
       return
     }
     if (storeData.cosmeticFilterList[hostname] !== undefined) {
       storeData.cosmeticFilterList[hostname].map((rule: string) => {
-        console.log('applying rule', rule)
+        if (process.env.NODE_ENV === 'shields_development') {
+          console.log('applying rule', rule)
+        }
         chrome.tabs.insertCSS({
           code: `${rule} {display: none;}`,
           runAt: 'document_start'
diff --git a/components/test/testData.ts b/components/test/testData.ts
index e05e585fd462..3c8974184bf7 100644
--- a/components/test/testData.ts
+++ b/components/test/testData.ts
@@ -94,19 +94,19 @@ export const getMockChrome = () => {
     },
     browserAction: {
       setBadgeBackgroundColor: function (properties: object) {
-        console.log('')
+        return
       },
       setBadgeText: function (textProperties: object) {
-        console.log('')
+        return
       },
       setIcon: function (iconProperties: object) {
-        console.log('')
+        return
       },
       enable: function (tabId?: number) {
-        console.log('')
+        return
       },
       disable: function (tabId?: number) {
-        console.log('')
+        return
       }
     },
     tabs: {
@@ -123,7 +123,7 @@ export const getMockChrome = () => {
         setImmediate(cb)
       },
       insertCSS: function (details: jest.SpyInstance) {
-        console.log('')
+        return
       },
       onActivated: new ChromeEvent(),
       onCreated: new ChromeEvent(),
@@ -165,16 +165,16 @@ export const getMockChrome = () => {
     },
     i18n: {
       getMessage: function (message: string) {
-        console.log('')
+        return
       }
     },
     storage: {
       local: {
         get: function (url: string) {
-          console.log('')
+          return
         },
         set: function (url: string, cssfilter: string) {
-          console.log('')
+          return
         }
       }
     },

From 32e77c6ae020ad3661a777ecc28be5388659e5d4 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 01:13:04 -0300
Subject: [PATCH 15/16] add JSX tests to code coverage

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3ff2d5f719db..89ef656d6ebe 100644
--- a/package.json
+++ b/package.json
@@ -236,7 +236,8 @@
     "resetModules": true,
     "collectCoverage": true,
     "collectCoverageFrom": [
-      "<rootDir>/components/**/**/*.{ts, tsx}",
+      "<rootDir>/components/**/**/*.ts",
+      "<rootDir>/components/**/**/*.tsx",
       "!<rootDir>/components/definitions/*",
       "!<rootDir>/components/**/constants/*",
       "!<rootDir>/components/**/reducers/index.ts",

From 8deacb48240da6e4b7b15a8efee624bde12d463a Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 8 Mar 2019 18:39:30 -0300
Subject: [PATCH 16/16] point sha to brave-ui pull-request branch

---
 package-lock.json | 10 +++++-----
 package.json      |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4da75962d7c7..4e12512c2799 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -216,9 +216,9 @@
       }
     },
     "@ctrl/tinycolor": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-2.2.1.tgz",
-      "integrity": "sha512-HFYW2zo5H9L61it865F/6fMOphYRVxdSztcB3DHn9AoaNOO9G+uIBuNXwkt+BwT7CbjQoJ6N5L6VjF5Mumztkw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-2.4.0.tgz",
+      "integrity": "sha512-ZLjdsst8/ENM6spDmh3qPQSM+iDSerTGjA05KhAXog7o/aOa9tn7qzWMeOtJzGaDMmsBLxh4IuZ5GH7nfda9gg==",
       "dev": true
     },
     "@sinonjs/commons": {
@@ -1337,8 +1337,8 @@
       }
     },
     "brave-ui": {
-      "version": "github:brave/brave-ui#3a0b168d55912353acb71e770b0857b88a432400",
-      "from": "github:brave/brave-ui#3a0b168d55912353acb71e770b0857b88a432400",
+      "version": "github:brave/brave-ui#b714fc006d1d207f9ca16e1f3c1148bb363d8253",
+      "from": "github:brave/brave-ui#b714fc006d1d207f9ca16e1f3c1148bb363d8253",
       "dev": true,
       "requires": {
         "@ctrl/tinycolor": "^2.2.1",
diff --git a/package.json b/package.json
index 89ef656d6ebe..49d8d3af296b 100644
--- a/package.json
+++ b/package.json
@@ -277,7 +277,7 @@
     "@types/react-redux": "6.0.4",
     "@types/redux-logger": "^3.0.7",
     "awesome-typescript-loader": "^5.2.1",
-    "brave-ui": "github:brave/brave-ui#3a0b168d55912353acb71e770b0857b88a432400",
+    "brave-ui": "github:brave/brave-ui#b714fc006d1d207f9ca16e1f3c1148bb363d8253",
     "css-loader": "^0.28.9",
     "csstype": "^2.5.5",
     "deep-freeze-node": "^1.1.3",