) => {
- 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 (
-
-
-
- )
- }
-
- renderConnectionsEncryptedList = (url: string, hostname: string, onToggle: () => void) => {
- const { httpsRedirected, httpsRedirectedResources } = this.props
- return (
-
-
-
- )
- }
-
- 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 (
-
- {/* ads toggle */}
-
-
- {blockedResourcesSize(this.totalAdsTrackersBlocked)}
- {getMessage('blockAds')}
-
-
- {
- openTotalAdsTrackersBlockedList
- ? this.renderTotalAdsTrackersBlockedList(url, hostname, this.onToggleTotalAdsTrackersBlocked)
- : null
- }
- {/* connections encrypted toggle */}
-
-
- {blockedResourcesSize(httpsRedirected)}
- {getMessage('connectionsEncrypted')}
-
-
- {
- openConnectionsEncryptedList
- ? this.renderConnectionsEncryptedList(url, hostname, this.onToggleConnectionsEncrypted)
- : null
- }
-
- )
- }
-}
diff --git a/components/brave_extension/extension/brave_extension/components/braveShields/privacyControls.tsx b/components/brave_extension/extension/brave_extension/components/braveShields/privacyControls.tsx
deleted file mode 100644
index 0131507d0e18..000000000000
--- a/components/brave_extension/extension/brave_extension/components/braveShields/privacyControls.tsx
+++ /dev/null
@@ -1,210 +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 {
- 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 { getMessage } 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
- javascript: BlockJSOptions
- javascriptBlocked: number
- blockJavaScript: shieldActions.BlockJavaScript
- javascriptBlockedResources: Array
- 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 {
- 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) => {
- if (!event.target) {
- return
- }
- this.props.blockCookies(event.target.value)
- }
-
- onChangeBlockScripts = (event: React.ChangeEvent) => {
- if (!event.target) {
- return
- }
- this.props.blockJavaScript(event.target.value)
- }
-
- onChangeBlockDeviceRecognition = (event: React.ChangeEvent) => {
- if (!event.target) {
- return
- }
- this.props.blockFingerprinting(event.target.value)
- }
-
- renderScriptsBlockedList = () => {
- const {
- url,
- hostname,
- origin,
- noScriptInfo,
- javascript,
- blockJavaScript,
- changeNoScriptSettings,
- allowScriptOriginsOnce,
- changeAllNoScriptSettings
- } = this.props
- return (
-
-
-
- )
- }
-
- renderDeviceRecognitionList = () => {
- const { url, hostname, fingerprintingBlocked, fingerprintingBlockedResources } = this.props
- return (
-
-
-
- )
- }
-
- render () {
- const {
- braveShields,
- fingerprinting,
- fingerprintingBlocked,
- javascript,
- javascriptBlocked,
- cookies
- } = this.props
- const { openScriptsBlockedList, openDeviceRecognitionList } = this.state
- const enabled = braveShields !== 'block'
-
- if (!enabled) {
- return null
- }
-
- return (
-
- {/* cookies select */}
-
-
-
-
-
-
-
-
-
-
-
- {/* scripts select */}
-
-
- {blockedResourcesSize(javascriptBlocked)}
-
-
-
-
-
- {
- openScriptsBlockedList
- ? this.renderScriptsBlockedList()
- : null
- }
-
-
- {/* fingerprinting select */}
-
-
- {blockedResourcesSize(fingerprintingBlocked)}
-
-
-
-
-
-
- {
- openDeviceRecognitionList
- ? this.renderDeviceRecognitionList()
- : null
- }
-
-
- )
- }
-}
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..6d55600f2771
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/controls/adsTrackersControl.tsx
@@ -0,0 +1,156 @@
+/* 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
+ trackers: BlockOptions
+ trackersBlocked: number
+ trackersBlockedResources: Array
+ blockAdsTrackers: BlockAdsTrackers
+}
+
+export type Props = CommonProps & AdsTrackersProps
+
+interface State {
+ trackersBlockedOpen: boolean
+}
+
+export default class AdsTrackersControl extends React.PureComponent {
+ 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 {
+ 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 | React.KeyboardEvent
+ ) => {
+ event.currentTarget.blur()
+ this.props.setBlockedListOpen()
+ this.setState({ trackersBlockedOpen: !this.state.trackersBlockedOpen })
+ }
+
+ onOpen3rdPartyTrackersBlocked = (event: React.MouseEvent) => {
+ this.triggerOpen3rdPartyTrackersBlocked(event)
+ }
+
+ onOpen3rdPartyTrackersBlockedViaKeyboard = (event: React.KeyboardEvent) => {
+ if (event.key === ' ') {
+ this.triggerOpen3rdPartyTrackersBlocked(event)
+ }
+ }
+
+ onChange3rdPartyTrackersBlockedEnabled = (event: React.ChangeEvent) => {
+ const shoudEnableAdsTracks = getToggleStateViaEventTarget(event)
+ this.props.blockAdsTrackers(shoudEnableAdsTracks)
+ }
+
+ render () {
+ const { favicon, hostname, isBlockedListOpen } = this.props
+ const { trackersBlockedOpen } = this.state
+ return (
+ <>
+
+
+
+ {this.totalAdsTrackersBlockedDisplay}
+ {getLocale('thirdPartyTrackersBlocked')}
+
+
+
+ {
+ trackersBlockedOpen &&
+
+ }
+
+ )
+ }
+}
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..70d6e9d63ea1
--- /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'
+
+export interface Props {
+ isBlockedListOpen: boolean
+ cookies: BlockCookiesOptions
+ blockCookies: BlockCookies
+}
+
+export default class CookiesControl extends React.PureComponent {
+ onChangeBlockCookies = (event: React.ChangeEvent) => {
+ this.props.blockCookies(event.target.value)
+ }
+
+ render () {
+ const { isBlockedListOpen, cookies } = this.props
+ return (
+ <>
+
+
+
+
+
+
+
+
+ )
+ }
+}
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..794e794de046
--- /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
+ blockFingerprinting: BlockFingerprinting
+}
+
+export type Props = CommonProps & HTTPSUpgradesProps
+
+interface State {
+ deviceRecognitionOpen: boolean
+}
+
+export default class DeviceRecognitionControl extends React.PureComponent {
+ 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 | React.KeyboardEvent
+ ) => {
+ event.currentTarget.blur()
+ this.props.setBlockedListOpen()
+ this.setState({ deviceRecognitionOpen: !this.state.deviceRecognitionOpen })
+ }
+
+ onOpenDeviceRecognition = (event: React.MouseEvent) => {
+ this.triggerOpenDeviceRecognition(event)
+ }
+
+ onOpenDeviceRecognitionViaKeyboard = (event: React.KeyboardEvent) => {
+ if (event.key === ' ') {
+ this.triggerOpenDeviceRecognition(event)
+ }
+ }
+
+ onChangeBlockDeviceRecognition = (event: React.ChangeEvent) => {
+ this.props.blockFingerprinting(event.target.value)
+ }
+
+ render () {
+ const {
+ favicon,
+ hostname,
+ isBlockedListOpen,
+ fingerprintingBlocked,
+ fingerprintingBlockedResources,
+ fingerprinting
+ } = this.props
+ const { deviceRecognitionOpen } = this.state
+ return (
+ <>
+
+
+
+ {this.totalDeviceRecognitonAttemptsDisplay}
+
+
+
+
+
+
+
+ {
+ deviceRecognitionOpen &&
+
+ }
+
+ )
+ }
+}
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..baa461642925
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/controls/httpsUpgradesControl.tsx
@@ -0,0 +1,143 @@
+/* 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
+ httpsEverywhereToggled: HttpsEverywhereToggled
+}
+
+export type Props = CommonProps & HTTPSUpgradesProps
+
+interface State {
+ connectionsUpgradedOpen: boolean
+}
+
+export default class HTTPSUpgradesControl extends React.PureComponent {
+ 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 | React.KeyboardEvent
+ ) => {
+ event.currentTarget.blur()
+ this.props.setBlockedListOpen()
+ this.setState({ connectionsUpgradedOpen: !this.state.connectionsUpgradedOpen })
+ }
+
+ onOpenConnectionsUpgradedToHTTPS = (event: React.MouseEvent) => {
+ this.triggerConnectionsUpgradedToHTTPS(event)
+ }
+
+ onOpenConnectionsUpgradedToHTTPSViaKeyboard = (event: React.KeyboardEvent) => {
+ if (event.key === ' ') {
+ this.triggerConnectionsUpgradedToHTTPS(event)
+ }
+ }
+
+ onChangeConnectionsUpgradedToHTTPSEnabled = (event: React.ChangeEvent) => {
+ const shouldEnableHttpsEverywhere = getToggleStateViaEventTarget(event)
+ this.props.httpsEverywhereToggled(shouldEnableHttpsEverywhere)
+ }
+
+ render () {
+ const { isBlockedListOpen, favicon, hostname, httpsRedirected, httpsRedirectedResources } = this.props
+ const { connectionsUpgradedOpen } = this.state
+ return (
+ <>
+
+
+
+ {this.httpsRedirectedDisplay}
+ {getLocale('connectionsUpgradedHTTPS')}
+
+
+
+ {
+ connectionsUpgradedOpen &&
+
+ }
+
+ )
+ }
+}
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..81cf68592ed6
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx
@@ -0,0 +1,166 @@
+/* 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
+}
+
+export type Props = CommonProps & JavaScriptProps
+
+interface State {
+ scriptsBlockedOpen: boolean
+}
+
+export default class ScriptsControls extends React.PureComponent {
+ 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 | React.KeyboardEvent
+ ) => {
+ event.currentTarget.blur()
+ this.props.setBlockedListOpen()
+ this.setState({ scriptsBlockedOpen: !this.state.scriptsBlockedOpen })
+ }
+
+ onOpenScriptsBlocked = (event: React.MouseEvent) => {
+ this.triggerOpenScriptsBlocked(event)
+ }
+
+ onOpenScriptsBlockedViaKeyboard = (event: React.KeyboardEvent) => {
+ if (event.key === ' ') {
+ this.triggerOpenScriptsBlocked(event)
+ }
+ }
+
+ onChangeScriptsBlockedEnabled = (event: React.ChangeEvent) => {
+ const shouldBlockJavaScript = getToggleStateViaEventTarget(event)
+ this.props.blockJavaScript(shouldBlockJavaScript)
+ }
+
+ render () {
+ const {
+ favicon,
+ hostname,
+ isBlockedListOpen,
+ allowScriptOriginsOnce,
+ changeNoScriptSettings,
+ changeAllNoScriptSettings,
+ noScriptInfo
+ } = this.props
+ const { scriptsBlockedOpen } = this.state
+ return (
+ <>
+
+
+
+ {this.javascriptBlockedDisplay}
+ {getLocale('scriptsBlocked')}
+
+
+
+ {
+ scriptsBlockedOpen &&
+
+ }
+
+ )
+ }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/footer.tsx b/components/brave_extension/extension/brave_extension/components/footer.tsx
new file mode 100644
index 000000000000..43b99c5a6562
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/footer.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'
+
+export interface Props {
+ isBlockedListOpen: boolean
+}
+
+export default class Footer extends React.PureComponent {
+ 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 (
+
+
+ {getLocale('changeDefaults')}
+
+
+ )
+ }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/header.tsx b/components/brave_extension/extension/brave_extension/components/header.tsx
new file mode 100644
index 000000000000..c4f15c710979
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/header.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
+}
+
+export type Props = CommonProps & BlockedItemsProps
+
+export default class Header extends React.PureComponent {
+ 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) => {
+ const shieldsOption: BlockOptions = getToggleStateViaEventTarget(event)
+ this.props.shieldsToggled(shieldsOption)
+ }
+
+ render () {
+ const { enabled, favicon, hostname, isBlockedListOpen } = this.props
+ return (
+
+ )
+ }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx b/components/brave_extension/extension/brave_extension/components/interfaceControls.tsx
new file mode 100644
index 000000000000..135c8bf1e0ca
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/interfaceControls.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
+ trackers: BlockOptions
+ trackersBlocked: number
+ trackersBlockedResources: Array
+ blockAdsTrackers: BlockAdsTrackers
+}
+
+interface HTTPSUpgradesProps {
+ httpsRedirected: number
+ httpUpgradableResources: BlockOptions
+ httpsRedirectedResources: Array
+ httpsEverywhereToggled: HttpsEverywhereToggled
+}
+
+export type Props = CommonProps & AdsTrackersProps & HTTPSUpgradesProps
+
+export default class InterfaceControls extends React.PureComponent {
+ get commonProps (): CommonProps {
+ const { favicon, hostname, isBlockedListOpen, setBlockedListOpen } = this.props
+ return { favicon, hostname, isBlockedListOpen, setBlockedListOpen }
+ }
+
+ render () {
+ return (
+ <>
+
+
+
+ )
+ }
+}
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) => void
+ allowScriptOriginsOnce: AllowScriptOriginsOnce
+ changeNoScriptSettings: ChangeNoScriptSettings
+ changeAllNoScriptSettings: ChangeAllNoScriptSettings
+}
+
+export default class DynamicList extends React.PureComponent {
+ getBlockedListSize = (isBlocked: boolean) => {
+ const { list } = this.props
+ return Object.keys(list)
+ .filter((origin: string) => list[origin].willBlock === isBlocked).length
+ }
+
+ onClickBlockOrAllowScript = (event: React.MouseEvent) => {
+ 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 (
+
+ {origin}
+
+ {list[origin].willBlock ? getLocale('allow') : getLocale('block')}
+
+
+ )
+ })
+ }
+
+ render () {
+ const { favicon, hostname, name, onClose } = this.props
+ return (
+
+
+
+ {hostname}
+
+
+
+
+ {name}
+
+
+
+
+ {this.getBlockedListSize(true)}
+
+ {getLocale('blockedScripts')}
+
+ {getLocale('allowAll')}
+
+
+ {this.getList(false)}
+
+
+ {this.getBlockedListSize(false)}
+
+ {getLocale('allowedScripts')}
+
+ {getLocale('blockAll')}
+
+
+ {this.getList(true)}
+
+
+
+ {getLocale('cancel')}
+
+
+
+ )
+ }
+}
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
+ onClose?: (event?: React.MouseEvent) => void
+}
+
+export default class StaticList extends React.PureComponent {
+ get statsDisplay (): string {
+ const { stats } = this.props
+ return blockedResourcesSize(stats)
+ }
+
+ render () {
+ const { favicon, hostname, name, list, onClose } = this.props
+ return (
+
+
+
+ {hostname}
+
+
+
+
+ {this.statsDisplay}
+ {name}
+
+
+ {list.map((item, index) => {item})}
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/components/brave_extension/extension/brave_extension/components/privacyControls.tsx b/components/brave_extension/extension/brave_extension/components/privacyControls.tsx
new file mode 100644
index 000000000000..70666fabdc0d
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/components/privacyControls.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
+ blockFingerprinting: BlockFingerprinting
+}
+
+export type Props = CommonProps & JavaScriptProps & CookiesProps & FingerprintingProps
+
+export default class PrivacyControls extends React.PureComponent {
+ get commonProps (): CommonProps {
+ const { favicon, hostname, isBlockedListOpen, setBlockedListOpen } = this.props
+ return { favicon, hostname, isBlockedListOpen, setBlockedListOpen }
+ }
+
+ render () {
+ return (
+ <>
+
+
+
+
+ )
+ }
+}
diff --git a/components/brave_extension/extension/brave_extension/containers/braveShields.tsx b/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
index 13bcd5c5f5b0..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/braveShields/braveShields'
+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 0860c2f6bc1a..6f91a9b38ae9 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) => {
if (!tabData) {
@@ -17,10 +19,6 @@ export const getTotalResourcesBlocked = (tabData: Partial) => {
)
}
-export const totalAdsTrackersBlocked = (adsBlocked: number, trackersBlocked: number) => {
- return adsBlocked + trackersBlocked
-}
-
export const getFavicon = (url: string) => {
return `chrome://favicon/size/16@1x/${ url }`
}
@@ -29,5 +27,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) => {
+ 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, trackers: Array) => {
+ 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
}
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/footer_test.tsx b/components/test/brave_extension/components/braveShields/footer_test.tsx
index a001e555e4cc..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/braveShields/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 = () =>
+ const baseComponent = () =>
it('renders the component', () => {
const wrapper = shallow(baseComponent())
diff --git a/components/test/brave_extension/components/braveShields/header_test.tsx b/components/test/brave_extension/components/braveShields/header_test.tsx
index a29dfe6fd3b7..0b64345a2739 100644
--- a/components/test/brave_extension/components/braveShields/header_test.tsx
+++ b/components/test/brave_extension/components/braveShields/header_test.tsx
@@ -3,40 +3,23 @@
* 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'
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')
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) => ({ 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) =>
-
-
- 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+')
- })
- })
-})
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) =>
+
+
+ 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+')
+ })
+ })
+})
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) =>
+
+
+ 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()
+ })
+ })
+})
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) =>
+
+
+ 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+')
+ })
+ })
+})
diff --git a/components/test/brave_extension/components/braveShields/interfaceControls_test.tsx b/components/test/brave_extension/components/controls/httpsUpgradesControl_test.tsx
similarity index 54%
rename from components/test/brave_extension/components/braveShields/interfaceControls_test.tsx
rename to components/test/brave_extension/components/controls/httpsUpgradesControl_test.tsx
index e8401665642c..3cc358b79a40 100644
--- a/components/test/brave_extension/components/braveShields/interfaceControls_test.tsx
+++ b/components/test/brave_extension/components/controls/httpsUpgradesControl_test.tsx
@@ -3,80 +3,32 @@
* 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 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 = {
- url: 'https://brave.com',
+ isBlockedListOpen: true,
+ setBlockedListOpen: () => { return },
hostname: 'brave.com',
- braveShields: 'allow',
- adsBlocked: 0,
- adsBlockedResources: [],
- ads: 'allow',
- blockAdsTrackers: (setting: BlockOptions) => ({ type: actionTypes.BLOCK_ADS_TRACKERS, setting }),
- trackers: 'allow',
- trackersBlocked: 0,
- trackersBlockedResources: [],
+ favicon: '',
httpsRedirected: 0,
- httpsRedirectedResources: [],
httpUpgradableResources: 'allow',
+ httpsRedirectedResources: [],
httpsEverywhereToggled: (setting: BlockOptions) => ({ type: actionTypes.HTTPS_EVERYWHERE_TOGGLED, setting })
}
-describe('InterfaceControls component', () => {
+describe('HttpsUpgradesControl component', () => {
const baseComponent = (props: Props) =>
-
+
it('renders the component', () => {
const wrapper = shallow(baseComponent(fakeProps))
- const assertion = wrapper.find('#braveShieldsInterfaceControls').length === 1
+ const assertion = wrapper.find('#httpsUpgradesControl').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 } }
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) =>
+
+
+ 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+')
+ })
+ })
+})
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
}
}
},
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 3ff2d5f719db..49d8d3af296b 100644
--- a/package.json
+++ b/package.json
@@ -236,7 +236,8 @@
"resetModules": true,
"collectCoverage": true,
"collectCoverageFrom": [
- "/components/**/**/*.{ts, tsx}",
+ "/components/**/**/*.ts",
+ "/components/**/**/*.tsx",
"!/components/definitions/*",
"!/components/**/constants/*",
"!/components/**/reducers/index.ts",
@@ -276,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",