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 38a22318de72..e71fdf7dc7f6 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 @@ -182,5 +182,9 @@ "gotIt": { "message": "Got it", "description": "Message for the button that confirms the advanced view" + }, + "learnMore": { + "message": "Learn more", + "description": "Message inviting the user to learn more about Shields" } } diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/controls/adsTrackersControl.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/controls/adsTrackersControl.tsx index 2936ba9c1739..e429291bc7b5 100644 --- a/components/brave_extension/extension/brave_extension/components/advancedView/controls/adsTrackersControl.tsx +++ b/components/brave_extension/extension/brave_extension/components/advancedView/controls/adsTrackersControl.tsx @@ -15,7 +15,7 @@ import { } from 'brave-ui/features/shields' // Group Components -import StaticList from '../overlays/static' +import StaticList from '../overlays/staticOverlay' // Locale import { getLocale } from '../../../background/api/localeAPI' diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/controls/deviceRecognitionControl.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/controls/deviceRecognitionControl.tsx index 338f794cfb0e..448336c457b3 100644 --- a/components/brave_extension/extension/brave_extension/components/advancedView/controls/deviceRecognitionControl.tsx +++ b/components/brave_extension/extension/brave_extension/components/advancedView/controls/deviceRecognitionControl.tsx @@ -14,7 +14,7 @@ import { } from 'brave-ui/features/shields' // Group Components -import StaticList from '../overlays/static' +import StaticList from '../overlays/staticOverlay' // Locale import { getLocale } from '../../../background/api/localeAPI' diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/controls/httpsUpgradesControl.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/controls/httpsUpgradesControl.tsx index 002f6c38c89c..6673ee747ce1 100644 --- a/components/brave_extension/extension/brave_extension/components/advancedView/controls/httpsUpgradesControl.tsx +++ b/components/brave_extension/extension/brave_extension/components/advancedView/controls/httpsUpgradesControl.tsx @@ -15,7 +15,7 @@ import { } from 'brave-ui/features/shields' // Group Components -import HTTPSUpgrades from '../overlays/httpsUpgrades' +import HTTPSUpgrades from '../overlays/httpsUpgradesOverlay' // Locale import { getLocale } from '../../../background/api/localeAPI' diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/controls/scriptsControl.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/controls/scriptsControl.tsx index 9f21e56debb2..b7e4b7104d85 100644 --- a/components/brave_extension/extension/brave_extension/components/advancedView/controls/scriptsControl.tsx +++ b/components/brave_extension/extension/brave_extension/components/advancedView/controls/scriptsControl.tsx @@ -16,7 +16,7 @@ import { } from 'brave-ui/features/shields' // Group Components -import NoScript from '../overlays/noScript' +import NoScript from '../overlays/noScriptOverlay' // Locale import { getLocale } from '../../../background/api/localeAPI' diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/overlays/httpsUpgrades.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/overlays/httpsUpgradesOverlay.tsx similarity index 100% rename from components/brave_extension/extension/brave_extension/components/advancedView/overlays/httpsUpgrades.tsx rename to components/brave_extension/extension/brave_extension/components/advancedView/overlays/httpsUpgradesOverlay.tsx diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/overlays/noScript.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/overlays/noScriptOverlay.tsx similarity index 97% rename from components/brave_extension/extension/brave_extension/components/advancedView/overlays/noScript.tsx rename to components/brave_extension/extension/brave_extension/components/advancedView/overlays/noScriptOverlay.tsx index 4677e8a1f42c..bb28a6bd84fb 100644 --- a/components/brave_extension/extension/brave_extension/components/advancedView/overlays/noScript.tsx +++ b/components/brave_extension/extension/brave_extension/components/advancedView/overlays/noScriptOverlay.tsx @@ -16,7 +16,7 @@ import { } from '../../../types/actions/shieldsPanelActions' // Components -import NoScriptContent from './noScriptContent' +import NoScriptResourcesList from '../../shared/resourcesBlockedList/noScriptResourcesList' // Helpers import { @@ -132,7 +132,7 @@ export default class CoreFeature extends React.PureComponent { {this.getBlockAllText(true)} - { {this.getBlockAllText(false)} - { +interface State { + showReadOnlyView: boolean +} + +export default class Shields extends React.PureComponent { + constructor (props: Props) { + super(props) + this.state = { showReadOnlyView: false } + } + + toggleReadOnlyView = () => { + this.setState({ showReadOnlyView: !this.state.showReadOnlyView }) + } + render () { const { shieldsPanelTabData, persistentData, actions } = this.props + const { showReadOnlyView } = this.state if (!shieldsPanelTabData) { return null } - return persistentData.advancedView - ? ( - - ) : ( - - ) + ? ( + + ) : showReadOnlyView + ? ( + + ) : ( + + ) } } diff --git a/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/adsTrackersControl.tsx b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/adsTrackersControl.tsx new file mode 100644 index 000000000000..0477c787adf6 --- /dev/null +++ b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/adsTrackersControl.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' + +// Feature-specific components +import { + BlockedInfoRowText, + BlockedInfoRowData, + BlockedInfoRowDetails, + BlockedInfoRowSummary, + ArrowUpIcon, + ArrowDownIcon, + BlockedInfoRowStats, + BlockedListStatic, + dummyData +} from 'brave-ui/features/shields' + +// Group components +import StaticResourcesList from '../../shared/resourcesBlockedList/staticResourcesList' + +// Helpers +import { getLocale } from '../../../background/api/localeAPI' + +interface State { + dummyThirdPartyTrackersBlockedOpen: boolean +} + +export default class AdsTrackersControl extends React.PureComponent<{}, State> { + constructor (props: {}) { + super(props) + this.state = { dummyThirdPartyTrackersBlockedOpen: false } + } + onClickFakeThirdPartyTrackersBlocked = () => { + this.setState({ dummyThirdPartyTrackersBlockedOpen: !this.state.dummyThirdPartyTrackersBlockedOpen }) + } + render () { + const { dummyThirdPartyTrackersBlockedOpen } = this.state + return ( + + + + { + dummyThirdPartyTrackersBlockedOpen + ? + : + } + {2} + {getLocale('thirdPartyTrackersBlocked')} + + + + + + + ) + } +} diff --git a/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/cookiesControl.tsx b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/cookiesControl.tsx new file mode 100644 index 000000000000..d681669e3a26 --- /dev/null +++ b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/cookiesControl.tsx @@ -0,0 +1,26 @@ +/* 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 { + BlockedInfoRowSingleText, + BlockedInfoRowText +} from 'brave-ui/features/shields' + +// Helpers +import { getLocale } from '../../../background/api/localeAPI' + +export default class AdsTrackersControl extends React.PureComponent<{}, {}> { + render () { + return ( + + + {getLocale('thirdPartyCookiesBlocked')} + + + ) + } +} diff --git a/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/deviceRecognitionControl.tsx b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/deviceRecognitionControl.tsx new file mode 100644 index 000000000000..0d60eff90639 --- /dev/null +++ b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/deviceRecognitionControl.tsx @@ -0,0 +1,62 @@ +/* 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 { + BlockedInfoRowDetails, + ArrowUpIcon, + ArrowDownIcon, + BlockedInfoRowStats, + BlockedInfoRowForSelectSummary, + BlockedInfoRowDataForSelect, + BlockedListStatic, + BlockedInfoRowText, + dummyData +} from 'brave-ui/features/shields' + +// Group components +import StaticResourcesList from '../../shared/resourcesBlockedList/staticResourcesList' + +// Helpers +import { getLocale } from '../../../background/api/localeAPI' + +interface State { + dummyThirdPartyFingerprintingBlockedOpen: boolean +} + +export default class AdsTrackersControl extends React.PureComponent<{}, State> { + constructor (props: {}) { + super(props) + this.state = { dummyThirdPartyFingerprintingBlockedOpen: false } + } + + onClickFakeThirdPartyFingerprintingBlocked = () => { + this.setState({ dummyThirdPartyFingerprintingBlockedOpen: !this.state.dummyThirdPartyFingerprintingBlockedOpen }) + } + render () { + const { dummyThirdPartyFingerprintingBlockedOpen } = this.state + return ( + + + + { + dummyThirdPartyFingerprintingBlockedOpen + ? + : + } + {2} + + {getLocale('thirdPartyFingerprintingBlocked')} + + + + + + + + ) + } +} diff --git a/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/httpsUpgradesControl.tsx b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/httpsUpgradesControl.tsx new file mode 100644 index 000000000000..14f9eaa87b55 --- /dev/null +++ b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/httpsUpgradesControl.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' + +// Feature-specific components +import { + BlockedInfoRowText, + BlockedInfoRowData, + BlockedInfoRowDetails, + BlockedInfoRowSummary, + ArrowUpIcon, + ArrowDownIcon, + BlockedInfoRowStats, + BlockedListStatic, + dummyData +} from 'brave-ui/features/shields' + +// Group components +import StaticResourcesList from '../../shared/resourcesBlockedList/staticResourcesList' + +// Helpers +import { getLocale } from '../../../background/api/localeAPI' + +interface State { + dummyConnectionsUpgradedHTTPSOpen: boolean +} + +export default class AdsTrackersControl extends React.PureComponent<{}, State> { + constructor (props: {}) { + super(props) + this.state = { dummyConnectionsUpgradedHTTPSOpen: false } + } + + onClickFakeConnectionsUpgradedHTTPS = () => { + this.setState({ dummyConnectionsUpgradedHTTPSOpen: !this.state.dummyConnectionsUpgradedHTTPSOpen }) + } + + render () { + const { dummyConnectionsUpgradedHTTPSOpen } = this.state + return ( + + + + { + dummyConnectionsUpgradedHTTPSOpen + ? + : + } + {2} + {getLocale('connectionsUpgradedHTTPS')} + + + + + + + ) + } +} diff --git a/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/scriptsControl.tsx b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/scriptsControl.tsx new file mode 100644 index 000000000000..ecf3c6bc01d0 --- /dev/null +++ b/components/brave_extension/extension/brave_extension/components/readOnlyView/controls/scriptsControl.tsx @@ -0,0 +1,65 @@ +/* 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 { + BlockedInfoRowText, + BlockedInfoRowData, + BlockedInfoRowDetails, + BlockedInfoRowSummary, + ArrowUpIcon, + ArrowDownIcon, + BlockedInfoRowStats, + BlockedListStatic, + dummyData +} from 'brave-ui/features/shields' + +// Group components +import StaticResourcesList from '../../shared/resourcesBlockedList/staticResourcesList' + +// Helpers +import { getLocale } from '../../../background/api/localeAPI' +import { generateNoScriptInfoDataStructure } from '../../../helpers/noScriptUtils' + +interface State { + dummyScriptsBlockedOpen: boolean +} + +export default class AdsTrackersControl extends React.PureComponent<{}, State> { + constructor (props: {}) { + super(props) + this.state = { dummyScriptsBlockedOpen: false } + } + get generateNoScriptInfo () { + return generateNoScriptInfoDataStructure(dummyData.noScriptsResouces) + } + onClickFakeScriptsBlocked = () => { + this.setState({ dummyScriptsBlockedOpen: !this.state.dummyScriptsBlockedOpen }) + } + render () { + const { dummyScriptsBlockedOpen } = this.state + return ( + + + + { + dummyScriptsBlockedOpen + ? + : + } + {2} + + {getLocale('scriptsBlocked')} + + + + + + + + ) + } +} diff --git a/components/brave_extension/extension/brave_extension/components/readOnlyView/index.tsx b/components/brave_extension/extension/brave_extension/components/readOnlyView/index.tsx new file mode 100644 index 000000000000..a60ecb230632 --- /dev/null +++ b/components/brave_extension/extension/brave_extension/components/readOnlyView/index.tsx @@ -0,0 +1,65 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import * as React from 'react' + +// Types +import { Tab } from '../../types/state/shieldsPannelState' + +// Feature-specific components +import { + ShieldsPanel, + BlockedListHeader, + Favicon, + SiteInfoText, + StaticHeader, + StaticResourcesControls, + StaticResourcesContainer, + BlockedInfoRowText, + BlockedListFooter, + ShieldsButton +} from 'brave-ui/features/shields' + +// Group components +import InterfaceControls from './interfaceControls' +import PrivacyControls from './privacyControls' + +// Helpers +import { getLocale } from '../../background/api/localeAPI' +import { getFavicon } from '../../helpers/shieldsUtils' + +interface Props { + shieldsPanelTabData: Tab + toggleReadOnlyView: (event?: React.MouseEvent) => void +} + +export default class ShieldsReadOnlyView extends React.PureComponent { + get favicon (): string { + const { url } = this.props.shieldsPanelTabData + return getFavicon(url) + } + render () { + const { shieldsPanelTabData, toggleReadOnlyView } = this.props + return ( + + + + {shieldsPanelTabData.hostname} + + + {getLocale('shieldsExplanation')} + + + + + + + + + + + + ) + } +} diff --git a/components/brave_extension/extension/brave_extension/components/readOnlyView/interfaceControls.tsx b/components/brave_extension/extension/brave_extension/components/readOnlyView/interfaceControls.tsx new file mode 100644 index 000000000000..a6790c757109 --- /dev/null +++ b/components/brave_extension/extension/brave_extension/components/readOnlyView/interfaceControls.tsx @@ -0,0 +1,20 @@ +/* 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' + +export default class InterfaceControls extends React.PureComponent<{}, {}> { + render () { + return ( + <> + + + + ) + } +} diff --git a/components/brave_extension/extension/brave_extension/components/readOnlyView/privacyControls.tsx b/components/brave_extension/extension/brave_extension/components/readOnlyView/privacyControls.tsx new file mode 100644 index 000000000000..c4bdc83ec528 --- /dev/null +++ b/components/brave_extension/extension/brave_extension/components/readOnlyView/privacyControls.tsx @@ -0,0 +1,22 @@ +/* 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' + +export default class PrivacyControls extends React.PureComponent<{}, {}> { + render () { + return ( + <> + + + + + ) + } +} diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/overlays/noScriptContent.tsx b/components/brave_extension/extension/brave_extension/components/shared/resourcesBlockedList/noScriptResourcesList.tsx similarity index 100% rename from components/brave_extension/extension/brave_extension/components/advancedView/overlays/noScriptContent.tsx rename to components/brave_extension/extension/brave_extension/components/shared/resourcesBlockedList/noScriptResourcesList.tsx diff --git a/components/brave_extension/extension/brave_extension/components/shared/resourcesBlockedList/staticResourcesList.tsx b/components/brave_extension/extension/brave_extension/components/shared/resourcesBlockedList/staticResourcesList.tsx new file mode 100644 index 000000000000..67850a9f75be --- /dev/null +++ b/components/brave_extension/extension/brave_extension/components/shared/resourcesBlockedList/staticResourcesList.tsx @@ -0,0 +1,24 @@ +/* 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 { BlockedListItem } from 'brave-ui/features/shields' + +// Helpers +import { stripProtocolFromUrl } from '../../../helpers/urlUtils' + +interface Props { + list: Array +} + +export default class StaticResourcesList extends React.PureComponent { + render () { + const { list } = this.props + return list.map((item, index) => + {stripProtocolFromUrl(item)} + ) + } +} diff --git a/components/brave_extension/extension/brave_extension/components/simpleView/header.tsx b/components/brave_extension/extension/brave_extension/components/simpleView/header.tsx index e82cc0fc08dd..4299e6c06b47 100644 --- a/components/brave_extension/extension/brave_extension/components/simpleView/header.tsx +++ b/components/brave_extension/extension/brave_extension/components/simpleView/header.tsx @@ -13,7 +13,7 @@ import { SiteInfo, MainToggleHeading, MainToggleText, - // Link, + Link, ToggleStateText, Favicon, SiteInfoText, @@ -41,6 +41,7 @@ interface CommonProps { favicon: string hostname: string shieldsToggled: ShieldsToggled + toggleReadOnlyView: () => void } interface BlockedItemsProps { @@ -71,12 +72,7 @@ export default class Header extends React.PureComponent { } render () { - const { - enabled, - favicon, - hostname - // onChangeReadOnlyView, - } = this.props + const { enabled, favicon, hostname, toggleReadOnlyView } = this.props return ( @@ -104,7 +100,7 @@ export default class Header extends React.PureComponent { {this.totalBlockedSize} {`${getLocale('blockedResoucesExplanation')} `} - {/* {getLocale('learnMore')} */} + {getLocale('learnMore')} ) diff --git a/components/brave_extension/extension/brave_extension/components/simpleView/index.tsx b/components/brave_extension/extension/brave_extension/components/simpleView/index.tsx index 4b52dbbdfbfd..6f38183d044f 100644 --- a/components/brave_extension/extension/brave_extension/components/simpleView/index.tsx +++ b/components/brave_extension/extension/brave_extension/components/simpleView/index.tsx @@ -49,6 +49,7 @@ interface Props { } shieldsPanelTabData: Tab persistentData: PersistentData + toggleReadOnlyView: () => void } export default class ShieldsSimpleView extends React.PureComponent { @@ -63,7 +64,7 @@ export default class ShieldsSimpleView extends React.PureComponent { } render () { - const { shieldsPanelTabData, actions } = this.props + const { shieldsPanelTabData, actions, toggleReadOnlyView } = this.props return (
{ scriptsBlocked={shieldsPanelTabData.javascriptBlocked} fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked} shieldsToggled={actions.shieldsToggled} + toggleReadOnlyView={toggleReadOnlyView} />