From 2d4b6d9dec790a26f0d52f666796b72fdc233c29 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Fri, 13 Mar 2020 19:13:12 -0300 Subject: [PATCH] Storybook: De-duplicate Shields component Address https://github.com/brave/brave-browser/issues/5180 --- .../background/api/localeAPI.ts | 11 +- .../components/structure/index.ts | 4 +- .../controls/adsTrackersControl.tsx | 6 +- .../controls/httpsUpgradesControl.tsx | 6 +- .../advancedView/controls/scriptsControl.tsx | 36 +---- .../containers/advancedView/header.tsx | 9 +- .../containers/advancedView/index.tsx | 47 +----- .../advancedView/interfaceControls.tsx | 11 +- .../advancedView/overlays/noScriptOverlay.tsx | 40 ++--- .../advancedView/privacyControls.tsx | 34 +---- .../containers/braveShields.tsx | 39 +---- .../noScriptResourcesList.tsx | 22 +-- .../containers/simpleView/index.tsx | 35 +---- .../brave_extension/helpers/shieldsUtils.ts | 5 +- .../controls/adsTrackersControl.tsx | 113 -------------- .../advancedView/controls/cookiesControl.tsx | 32 ---- .../controls/deviceRecognitionControl.tsx | 104 ------------- .../controls/httpsUpgradesControl.tsx | 115 --------------- .../advancedView/controls/scriptsControl.tsx | 122 ---------------- .../components/advancedView/header.tsx | 120 --------------- .../stories/components/advancedView/index.tsx | 103 ------------- .../advancedView/interfaceControls.tsx | 54 ------- .../advancedView/overlays/noScriptOverlay.tsx | 128 ---------------- .../advancedView/overlays/staticOverlay.tsx | 61 -------- .../overlays/webCompatWarningOverlay.tsx | 48 ------ .../advancedView/privacyControls.tsx | 59 -------- .../controls/adsTrackersControl.tsx | 59 -------- .../readOnlyView/controls/cookiesControl.tsx | 26 ---- .../controls/deviceRecognitionControl.tsx | 62 -------- .../controls/httpsUpgradesControl.tsx | 61 -------- .../readOnlyView/controls/scriptsControl.tsx | 65 --------- .../stories/components/readOnlyView/index.tsx | 58 -------- .../readOnlyView/interfaceControls.tsx | 20 --- .../readOnlyView/privacyControls.tsx | 22 --- .../stories/components/shared/footer.tsx | 34 ----- .../scriptResourcesList.tsx | 121 --------------- .../staticResourcesList.tsx | 24 --- .../stories/components/simpleView/header.tsx | 105 ------------- .../stories/components/simpleView/index.tsx | 76 ---------- .../stories/data/storybookState.ts | 121 +++++++++++++++ .../brave_extension/stories/fakeData.ts | 93 ------------ .../brave_extension/stories/fakeLocale.ts | 62 -------- .../brave_extension/stories/helpers.ts | 138 ------------------ .../brave_extension/stories/index.tsx | 89 ----------- .../brave_extension/stories/story.tsx | 116 ++++++++------- .../brave_extension/stories/types.ts | 9 -- .../types/actions/settingsActions.ts | 5 + .../types/actions/shieldsPanelActions.ts | 23 +++ components/definitions/non-js-loaders.d.ts | 5 + .../controls/adsTrackersControl_test.tsx | 7 +- .../controls/httpsUpgradesControl_test.tsx | 7 +- .../controls/scriptsControl_test.tsx | 12 +- .../components/advancedView/header_test.tsx | 8 +- 53 files changed, 313 insertions(+), 2479 deletions(-) delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/adsTrackersControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/cookiesControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/deviceRecognitionControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/httpsUpgradesControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/scriptsControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/header.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/index.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/interfaceControls.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/overlays/noScriptOverlay.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/overlays/staticOverlay.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/overlays/webCompatWarningOverlay.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/advancedView/privacyControls.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/readOnlyView/controls/adsTrackersControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/readOnlyView/controls/cookiesControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/readOnlyView/controls/deviceRecognitionControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/readOnlyView/controls/httpsUpgradesControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/readOnlyView/controls/scriptsControl.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/readOnlyView/index.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/readOnlyView/interfaceControls.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/readOnlyView/privacyControls.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/shared/footer.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/shared/resourcesBlockedList/scriptResourcesList.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/shared/resourcesBlockedList/staticResourcesList.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/simpleView/header.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/components/simpleView/index.tsx create mode 100644 components/brave_extension/extension/brave_extension/stories/data/storybookState.ts delete mode 100644 components/brave_extension/extension/brave_extension/stories/fakeData.ts delete mode 100644 components/brave_extension/extension/brave_extension/stories/fakeLocale.ts delete mode 100644 components/brave_extension/extension/brave_extension/stories/helpers.ts delete mode 100644 components/brave_extension/extension/brave_extension/stories/index.tsx delete mode 100644 components/brave_extension/extension/brave_extension/stories/types.ts 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 5d2cea906087..e467effff342 100644 --- a/components/brave_extension/extension/brave_extension/background/api/localeAPI.ts +++ b/components/brave_extension/extension/brave_extension/background/api/localeAPI.ts @@ -2,14 +2,19 @@ * 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 rawMessages from '../../_locales/en_US/messages.json' + /** * Gets the locale message specified in messages.json * @param {string} message - The locale string */ -export const getLocale = (message: string): string => { +export const getLocale = (messageStr: string): string => { if (chrome.i18n) { - return chrome.i18n.getMessage(message) + return chrome.i18n.getMessage(messageStr) } - return message + // If no string is available then get + // the message from original (en-US) source. + // Otherwise just output the string, which is a bug. + return rawMessages[messageStr].message || messageStr } diff --git a/components/brave_extension/extension/brave_extension/components/structure/index.ts b/components/brave_extension/extension/brave_extension/components/structure/index.ts index 0dc03d24d8bc..e50dca31bc22 100644 --- a/components/brave_extension/extension/brave_extension/components/structure/index.ts +++ b/components/brave_extension/extension/brave_extension/components/structure/index.ts @@ -249,8 +249,8 @@ export const BlockedListContent = styled<{}, 'div'>('div')` top: 0; left: 0; background: ${p => p.theme.color.panelBackground}; - width: 100%; - height: 100%; + width: 370px; + height: fit-content; z-index: 2; cursor: default; ` diff --git a/components/brave_extension/extension/brave_extension/containers/advancedView/controls/adsTrackersControl.tsx b/components/brave_extension/extension/brave_extension/containers/advancedView/controls/adsTrackersControl.tsx index 76a0b423d426..50ef6f46424c 100644 --- a/components/brave_extension/extension/brave_extension/containers/advancedView/controls/adsTrackersControl.tsx +++ b/components/brave_extension/extension/brave_extension/containers/advancedView/controls/adsTrackersControl.tsx @@ -32,7 +32,7 @@ import { } from '../../../helpers/shieldsUtils' // Types -import { BlockAdsTrackers } from '../../../types/actions/shieldsPanelActions' +import { ShieldsPanelActionTypes } from '../../../types/actions/shieldsPanelActions' import { BlockOptions } from '../../../types/other/blockTypes' interface CommonProps { @@ -40,6 +40,7 @@ interface CommonProps { setBlockedListOpen: () => void hostname: string favicon: string + actions: ShieldsPanelActionTypes } interface AdsTrackersProps { @@ -49,7 +50,6 @@ interface AdsTrackersProps { trackers: BlockOptions trackersBlocked: number trackersBlockedResources: Array - blockAdsTrackers: BlockAdsTrackers } export type Props = CommonProps & AdsTrackersProps @@ -114,7 +114,7 @@ export default class AdsTrackersControl extends React.PureComponent) => { const shoudEnableAdsTracks = getToggleStateViaEventTarget(event) - this.props.blockAdsTrackers(shoudEnableAdsTracks) + this.props.actions.blockAdsTrackers(shoudEnableAdsTracks) } render () { diff --git a/components/brave_extension/extension/brave_extension/containers/advancedView/controls/httpsUpgradesControl.tsx b/components/brave_extension/extension/brave_extension/containers/advancedView/controls/httpsUpgradesControl.tsx index ba0ef8f7ad3c..efb8d06add35 100644 --- a/components/brave_extension/extension/brave_extension/containers/advancedView/controls/httpsUpgradesControl.tsx +++ b/components/brave_extension/extension/brave_extension/containers/advancedView/controls/httpsUpgradesControl.tsx @@ -30,7 +30,7 @@ import { } from '../../../helpers/shieldsUtils' // Types -import { HttpsEverywhereToggled } from '../../../types/actions/shieldsPanelActions' +import { ShieldsPanelActionTypes } from '../../../types/actions/shieldsPanelActions' import { BlockOptions } from '../../../types/other/blockTypes' interface CommonProps { @@ -38,13 +38,13 @@ interface CommonProps { setBlockedListOpen: () => void hostname: string favicon: string + actions: ShieldsPanelActionTypes } interface HTTPSUpgradesProps { httpsRedirected: number httpUpgradableResources: BlockOptions httpsRedirectedResources: Array - httpsEverywhereToggled: HttpsEverywhereToggled } export type Props = CommonProps & HTTPSUpgradesProps @@ -101,7 +101,7 @@ export default class HTTPSUpgradesControl extends React.PureComponent) => { const shouldEnableHttpsEverywhere = getToggleStateViaEventTarget(event) - this.props.httpsEverywhereToggled(shouldEnableHttpsEverywhere) + this.props.actions.httpsEverywhereToggled(shouldEnableHttpsEverywhere) } render () { diff --git a/components/brave_extension/extension/brave_extension/containers/advancedView/controls/scriptsControl.tsx b/components/brave_extension/extension/brave_extension/containers/advancedView/controls/scriptsControl.tsx index 8d6a70511f7a..a9d8539bf625 100644 --- a/components/brave_extension/extension/brave_extension/containers/advancedView/controls/scriptsControl.tsx +++ b/components/brave_extension/extension/brave_extension/containers/advancedView/controls/scriptsControl.tsx @@ -33,14 +33,7 @@ import { // Types import { BlockJSOptions } from '../../../types/other/blockTypes' import { NoScriptInfo } from '../../../types/other/noScriptInfo' -import { - BlockJavaScript, - AllowScriptOriginsOnce, - SetScriptBlockedCurrentState, - SetGroupedScriptsBlockedCurrentState, - SetAllScriptsBlockedCurrentState, - SetFinalScriptsBlockedState -} from '../../../types/actions/shieldsPanelActions' +import { ShieldsPanelActionTypes } from '../../../types/actions/shieldsPanelActions' interface CommonProps { // Global props @@ -54,12 +47,7 @@ interface JavaScriptProps { javascript: BlockJSOptions javascriptBlocked: number noScriptInfo: NoScriptInfo - blockJavaScript: BlockJavaScript - allowScriptOriginsOnce: AllowScriptOriginsOnce - setScriptBlockedCurrentState: SetScriptBlockedCurrentState - setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState - setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState - setFinalScriptsBlockedState: SetFinalScriptsBlockedState + actions: ShieldsPanelActionTypes } export type Props = CommonProps & JavaScriptProps @@ -116,13 +104,13 @@ export default class ScriptsControls extends React.PureComponent { onChangeScriptsBlockedEnabled = (event: React.ChangeEvent) => { const shouldBlockJavaScript = getToggleStateViaEventTarget(event) - this.props.blockJavaScript(shouldBlockJavaScript) + this.props.actions.blockJavaScript(shouldBlockJavaScript) } onClickAllowScriptsOnce = () => { - this.props.setAllScriptsBlockedCurrentState(false) - this.props.setFinalScriptsBlockedState() - this.props.allowScriptOriginsOnce() + this.props.actions.setAllScriptsBlockedCurrentState(false) + this.props.actions.setFinalScriptsBlockedState() + this.props.actions.allowScriptOriginsOnce() } render () { @@ -130,12 +118,8 @@ export default class ScriptsControls extends React.PureComponent { favicon, hostname, isBlockedListOpen, - allowScriptOriginsOnce, noScriptInfo, - setScriptBlockedCurrentState, - setGroupedScriptsBlockedCurrentState, - setAllScriptsBlockedCurrentState, - setFinalScriptsBlockedState + actions } = this.props const { scriptsBlockedOpen } = this.state return ( @@ -183,11 +167,7 @@ export default class ScriptsControls extends React.PureComponent { hostname={hostname} noScriptInfo={noScriptInfo} onClose={this.onOpenScriptsBlocked} - allowScriptOriginsOnce={allowScriptOriginsOnce} - setScriptBlockedCurrentState={setScriptBlockedCurrentState} - setGroupedScriptsBlockedCurrentState={setGroupedScriptsBlockedCurrentState} - setAllScriptsBlockedCurrentState={setAllScriptsBlockedCurrentState} - setFinalScriptsBlockedState={setFinalScriptsBlockedState} + actions={actions} /> } diff --git a/components/brave_extension/extension/brave_extension/containers/advancedView/header.tsx b/components/brave_extension/extension/brave_extension/containers/advancedView/header.tsx index eb93af95c57d..6c7cb2bf63fb 100644 --- a/components/brave_extension/extension/brave_extension/containers/advancedView/header.tsx +++ b/components/brave_extension/extension/brave_extension/containers/advancedView/header.tsx @@ -33,15 +33,14 @@ import { // Types import { BlockOptions } from '../../types/other/blockTypes' -import { ShieldsToggled } from '../../types/actions/shieldsPanelActions' +import { ShieldsPanelActionTypes } from '../../types/actions/shieldsPanelActions' interface CommonProps { enabled: boolean favicon: string hostname: string isBlockedListOpen: boolean - shieldsToggled: ShieldsToggled - reportBrokenSite: () => void + actions: ShieldsPanelActionTypes } interface BlockedItemsProps { @@ -73,11 +72,11 @@ export default class Header extends React.PureComponent { onToggleShieldsMain = (event: React.ChangeEvent) => { const shieldsOption: BlockOptions = event.target.checked ? 'allow' : 'block' - this.props.shieldsToggled(shieldsOption) + this.props.actions.shieldsToggled(shieldsOption) } onReportBrokenSite = () => { - this.props.reportBrokenSite() + this.props.actions.reportBrokenSite() window.close() } diff --git a/components/brave_extension/extension/brave_extension/containers/advancedView/index.tsx b/components/brave_extension/extension/brave_extension/containers/advancedView/index.tsx index 187f83b70c82..db4605cc44ef 100644 --- a/components/brave_extension/extension/brave_extension/containers/advancedView/index.tsx +++ b/components/brave_extension/extension/brave_extension/containers/advancedView/index.tsx @@ -20,38 +20,10 @@ import WebCompatWarning from './overlays/webCompatWarningOverlay' // Types import { Tab, PersistentData } from '../../types/state/shieldsPannelState' import { isShieldsEnabled, getFavicon } from '../../helpers/shieldsUtils' -import { - ShieldsToggled, - ReportBrokenSite, - BlockAdsTrackers, - HttpsEverywhereToggled, - BlockJavaScript, - BlockFingerprinting, - BlockCookies, - AllowScriptOriginsOnce, - SetScriptBlockedCurrentState, - SetGroupedScriptsBlockedCurrentState, - SetAllScriptsBlockedCurrentState, - SetFinalScriptsBlockedState, - SetAdvancedViewFirstAccess -} from '../../types/actions/shieldsPanelActions' +import { ShieldsPanelActionTypes } from '../../types/actions/shieldsPanelActions' interface Props { - actions: { - shieldsToggled: ShieldsToggled - reportBrokenSite: ReportBrokenSite - blockAdsTrackers: BlockAdsTrackers - httpsEverywhereToggled: HttpsEverywhereToggled - blockJavaScript: BlockJavaScript - blockFingerprinting: BlockFingerprinting - blockCookies: BlockCookies - allowScriptOriginsOnce: AllowScriptOriginsOnce - setScriptBlockedCurrentState: SetScriptBlockedCurrentState - setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState - setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState - setFinalScriptsBlockedState: SetFinalScriptsBlockedState - setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess - } + actions: ShieldsPanelActionTypes shieldsPanelTabData: Tab persistentData: PersistentData toggleAdvancedView: () => void @@ -105,8 +77,7 @@ export default class Shields extends React.PureComponent { httpsUpgrades={shieldsPanelTabData.httpsRedirected} scriptsBlocked={shieldsPanelTabData.javascriptBlocked} fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked} - shieldsToggled={actions.shieldsToggled} - reportBrokenSite={actions.reportBrokenSite} + actions={actions} /> { this.isShieldsEnabled && ( @@ -117,6 +88,7 @@ export default class Shields extends React.PureComponent { setBlockedListOpen={this.setBlockedListOpen} hostname={shieldsPanelTabData.hostname} favicon={this.favicon} + actions={actions} // Ads/Trackers ads={shieldsPanelTabData.ads} adsBlocked={shieldsPanelTabData.adsBlocked} @@ -124,12 +96,10 @@ export default class Shields extends React.PureComponent { 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} /> { setBlockedListOpen={this.setBlockedListOpen} hostname={shieldsPanelTabData.hostname} favicon={this.favicon} + actions={actions} // JavaScript javascript={shieldsPanelTabData.javascript} javascriptBlocked={shieldsPanelTabData.javascriptBlocked} noScriptInfo={shieldsPanelTabData.noScriptInfo} - blockJavaScript={actions.blockJavaScript} - allowScriptOriginsOnce={actions.allowScriptOriginsOnce} - setScriptBlockedCurrentState={actions.setScriptBlockedCurrentState} - setGroupedScriptsBlockedCurrentState={actions.setGroupedScriptsBlockedCurrentState} - setAllScriptsBlockedCurrentState={actions.setAllScriptsBlockedCurrentState} - setFinalScriptsBlockedState={actions.setFinalScriptsBlockedState} // Cookies - blockCookies={actions.blockCookies} cookies={shieldsPanelTabData.cookies} // Fingerprinting fingerprinting={shieldsPanelTabData.fingerprinting} fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked} fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources} - blockFingerprinting={actions.blockFingerprinting} /> ) diff --git a/components/brave_extension/extension/brave_extension/containers/advancedView/interfaceControls.tsx b/components/brave_extension/extension/brave_extension/containers/advancedView/interfaceControls.tsx index 52ed152b938f..2369142fe615 100644 --- a/components/brave_extension/extension/brave_extension/containers/advancedView/interfaceControls.tsx +++ b/components/brave_extension/extension/brave_extension/containers/advancedView/interfaceControls.tsx @@ -9,7 +9,7 @@ import AdsTrackersControl from './controls/adsTrackersControl' import HTTPSUpgradesControl from './controls/httpsUpgradesControl' // Types -import { BlockAdsTrackers, HttpsEverywhereToggled } from '../../types/actions/shieldsPanelActions' +import { ShieldsPanelActionTypes } from '../../types/actions/shieldsPanelActions' import { BlockOptions } from '../../types/other/blockTypes' interface CommonProps { @@ -17,6 +17,7 @@ interface CommonProps { setBlockedListOpen: () => void hostname: string favicon: string + actions: ShieldsPanelActionTypes } interface AdsTrackersProps { @@ -26,22 +27,20 @@ interface AdsTrackersProps { 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 } + const { favicon, hostname, isBlockedListOpen, setBlockedListOpen, actions } = this.props + return { favicon, hostname, isBlockedListOpen, setBlockedListOpen, actions } } render () { @@ -55,14 +54,12 @@ export default class InterfaceControls extends React.PureComponent { trackers={this.props.trackers} trackersBlocked={this.props.trackersBlocked} trackersBlockedResources={this.props.trackersBlockedResources} - blockAdsTrackers={this.props.blockAdsTrackers} /> ) diff --git a/components/brave_extension/extension/brave_extension/containers/advancedView/overlays/noScriptOverlay.tsx b/components/brave_extension/extension/brave_extension/containers/advancedView/overlays/noScriptOverlay.tsx index f9ab1170845e..5b54d73d30e9 100644 --- a/components/brave_extension/extension/brave_extension/containers/advancedView/overlays/noScriptOverlay.tsx +++ b/components/brave_extension/extension/brave_extension/containers/advancedView/overlays/noScriptOverlay.tsx @@ -7,13 +7,7 @@ import * as React from 'react' // Types import { NoScriptInfo } from '../../../types/other/noScriptInfo' -import { - AllowScriptOriginsOnce, - SetScriptBlockedCurrentState, - SetGroupedScriptsBlockedCurrentState, - SetAllScriptsBlockedCurrentState, - SetFinalScriptsBlockedState -} from '../../../types/actions/shieldsPanelActions' +import { ShieldsPanelActionTypes } from '../../../types/actions/shieldsPanelActions' // Components import NoScriptResourcesList from '../../shared/resourcesBlockedList/noScriptResourcesList' @@ -52,14 +46,10 @@ interface Props { hostname: string noScriptInfo: NoScriptInfo onClose: (event?: React.MouseEvent) => void - allowScriptOriginsOnce: AllowScriptOriginsOnce - setScriptBlockedCurrentState: SetScriptBlockedCurrentState - setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState - setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState - setFinalScriptsBlockedState: SetFinalScriptsBlockedState + actions: ShieldsPanelActionTypes } -export default class CoreFeature extends React.PureComponent { +export default class NoScript extends React.PureComponent { get noScriptInfo () { return this.props.noScriptInfo } @@ -70,7 +60,7 @@ export default class CoreFeature extends React.PureComponent { componentDidMount () { window.addEventListener('blur', () => { - this.props.setFinalScriptsBlockedState() + this.props.actions.setFinalScriptsBlockedState() window.close() }) } @@ -84,13 +74,15 @@ export default class CoreFeature extends React.PureComponent { } blockOrAllowAll (blockOrAllow: boolean) { - this.props.setAllScriptsBlockedCurrentState(blockOrAllow) - this.props.allowScriptOriginsOnce() + this.props.actions.setAllScriptsBlockedCurrentState(blockOrAllow) + this.props.actions.allowScriptOriginsOnce() } setFinalScriptsBlockedState = (event?: React.MouseEvent) => { // indicate local state that those scripts are going to be blocked - this.props.setFinalScriptsBlockedState() + if (chrome.browserAction) { + this.props.actions.setFinalScriptsBlockedState() + } // close the scripts modal layer if (event) { this.props.onClose() @@ -102,7 +94,7 @@ export default class CoreFeature extends React.PureComponent { } render () { - const { favicon, hostname } = this.props + const { favicon, hostname, actions } = this.props return ( @@ -135,11 +127,7 @@ export default class CoreFeature extends React.PureComponent { ) @@ -164,11 +152,7 @@ export default class CoreFeature extends React.PureComponent { ) diff --git a/components/brave_extension/extension/brave_extension/containers/advancedView/privacyControls.tsx b/components/brave_extension/extension/brave_extension/containers/advancedView/privacyControls.tsx index e611184e1796..7a5d1e3cbc6e 100644 --- a/components/brave_extension/extension/brave_extension/containers/advancedView/privacyControls.tsx +++ b/components/brave_extension/extension/brave_extension/containers/advancedView/privacyControls.tsx @@ -10,16 +10,7 @@ import CookiesControl from './controls/cookiesControl' import DeviceRecognitionControl from './controls/deviceRecognitionControl' // Types -import { - BlockJavaScript, - AllowScriptOriginsOnce, - BlockCookies, - BlockFingerprinting, - SetScriptBlockedCurrentState, - SetGroupedScriptsBlockedCurrentState, - SetAllScriptsBlockedCurrentState, - SetFinalScriptsBlockedState -} from '../../types/actions/shieldsPanelActions' +import { ShieldsPanelActionTypes } from '../../types/actions/shieldsPanelActions' import { BlockCookiesOptions, BlockJSOptions, BlockFPOptions } from '../../types/other/blockTypes' import { NoScriptInfo } from '../../types/other/noScriptInfo' @@ -28,22 +19,16 @@ interface CommonProps { setBlockedListOpen: () => void hostname: string favicon: string + actions: ShieldsPanelActionTypes } interface JavaScriptProps { javascript: BlockJSOptions javascriptBlocked: number noScriptInfo: NoScriptInfo - blockJavaScript: BlockJavaScript - allowScriptOriginsOnce: AllowScriptOriginsOnce - setScriptBlockedCurrentState: SetScriptBlockedCurrentState - setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState - setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState - setFinalScriptsBlockedState: SetFinalScriptsBlockedState } interface CookiesProps { - blockCookies: BlockCookies cookies: BlockCookiesOptions } @@ -51,15 +36,14 @@ 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 } + const { favicon, hostname, isBlockedListOpen, setBlockedListOpen, actions } = this.props + return { favicon, hostname, isBlockedListOpen, setBlockedListOpen, actions } } render () { @@ -70,24 +54,18 @@ export default class PrivacyControls extends React.PureComponent { javascript={this.props.javascript} javascriptBlocked={this.props.javascriptBlocked} noScriptInfo={this.props.noScriptInfo} - blockJavaScript={this.props.blockJavaScript} - allowScriptOriginsOnce={this.props.allowScriptOriginsOnce} - setScriptBlockedCurrentState={this.props.setScriptBlockedCurrentState} - setGroupedScriptsBlockedCurrentState={this.props.setGroupedScriptsBlockedCurrentState} - setAllScriptsBlockedCurrentState={this.props.setAllScriptsBlockedCurrentState} - setFinalScriptsBlockedState={this.props.setFinalScriptsBlockedState} /> ) diff --git a/components/brave_extension/extension/brave_extension/containers/braveShields.tsx b/components/brave_extension/extension/brave_extension/containers/braveShields.tsx index 9c9a5e46eb7c..0a5bde1351e2 100644 --- a/components/brave_extension/extension/brave_extension/containers/braveShields.tsx +++ b/components/brave_extension/extension/brave_extension/containers/braveShields.tsx @@ -17,46 +17,15 @@ import * as shieldsAPI from '../background/api/shieldsAPI' // Types import { Tab, PersistentData } from '../types/state/shieldsPannelState' -import { - ShieldsToggled, - ReportBrokenSite, - BlockAdsTrackers, - HttpsEverywhereToggled, - BlockJavaScript, - BlockFingerprinting, - BlockCookies, - AllowScriptOriginsOnce, - SetScriptBlockedCurrentState, - SetGroupedScriptsBlockedCurrentState, - SetAllScriptsBlockedCurrentState, - SetFinalScriptsBlockedState, - SetAdvancedViewFirstAccess, - ShieldsReady -} from '../types/actions/shieldsPanelActions' -import { SetStoreSettingsChange } from '../types/actions/settingsActions' import { SettingsData } from '../types/other/settingsTypes' // Helpers import { shieldsHasFocus } from '../helpers/shieldsUtils' +import { ShieldsPanelActionTypes } from '../types/actions/shieldsPanelActions' +import { SettingsActionsTypes } from '../types/actions/settingsActions' interface Props { - actions: { - shieldsToggled: ShieldsToggled - reportBrokenSite: ReportBrokenSite - blockAdsTrackers: BlockAdsTrackers - httpsEverywhereToggled: HttpsEverywhereToggled - blockJavaScript: BlockJavaScript - blockFingerprinting: BlockFingerprinting - blockCookies: BlockCookies - allowScriptOriginsOnce: AllowScriptOriginsOnce - setScriptBlockedCurrentState: SetScriptBlockedCurrentState - setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState - setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState - setFinalScriptsBlockedState: SetFinalScriptsBlockedState - setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess - setStoreSettingsChange: SetStoreSettingsChange - shieldsReady: ShieldsReady - } + actions: ShieldsPanelActionTypes & SettingsActionsTypes shieldsPanelTabData: Tab persistentData: PersistentData settingsData: SettingsData @@ -94,7 +63,7 @@ export default class Shields extends React.PureComponent { // See https://github.com/brave/brave-browser/issues/6601. const { url }: Tab = this.props.shieldsPanelTabData if (shieldsHasFocus(url) === false) { - window.close() + // window.close() } } diff --git a/components/brave_extension/extension/brave_extension/containers/shared/resourcesBlockedList/noScriptResourcesList.tsx b/components/brave_extension/extension/brave_extension/containers/shared/resourcesBlockedList/noScriptResourcesList.tsx index 9fcc132fffbc..793b9e4183a3 100644 --- a/components/brave_extension/extension/brave_extension/containers/shared/resourcesBlockedList/noScriptResourcesList.tsx +++ b/components/brave_extension/extension/brave_extension/containers/shared/resourcesBlockedList/noScriptResourcesList.tsx @@ -7,13 +7,7 @@ import * as React from 'react' // Types import { NoScriptEntry } from '../../../types/other/noScriptInfo' -import { - AllowScriptOriginsOnce, - SetScriptBlockedCurrentState, - SetGroupedScriptsBlockedCurrentState, - SetAllScriptsBlockedCurrentState, - SetFinalScriptsBlockedState -} from '../../../types/actions/shieldsPanelActions' +import { ShieldsPanelActionTypes } from '../../../types/actions/shieldsPanelActions' // Components import { @@ -34,11 +28,7 @@ import { interface Props { noScriptInfo: Array maybeBlock: boolean - allowScriptOriginsOnce: AllowScriptOriginsOnce - setScriptBlockedCurrentState: SetScriptBlockedCurrentState - setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState - setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState - setFinalScriptsBlockedState: SetFinalScriptsBlockedState + actions: ShieldsPanelActionTypes } export default class NoScriptList extends React.PureComponent { @@ -47,13 +37,13 @@ export default class NoScriptList extends React.PureComponent { } setBlockState (url: string) { - this.props.setScriptBlockedCurrentState(url) - this.props.allowScriptOriginsOnce() + this.props.actions.setScriptBlockedCurrentState(url) + this.props.actions.allowScriptOriginsOnce() } setBlockStateGroup (url: string, maybeBlock: boolean) { - this.props.setGroupedScriptsBlockedCurrentState(url, maybeBlock) - this.props.allowScriptOriginsOnce() + this.props.actions.setGroupedScriptsBlockedCurrentState(url, maybeBlock) + this.props.actions.allowScriptOriginsOnce() } getSingleScriptRow = (url: string, scriptData: NoScriptEntry, key: number, maybeBlock: boolean) => { diff --git a/components/brave_extension/extension/brave_extension/containers/simpleView/index.tsx b/components/brave_extension/extension/brave_extension/containers/simpleView/index.tsx index 9306f3f280ae..4992ee77478f 100644 --- a/components/brave_extension/extension/brave_extension/containers/simpleView/index.tsx +++ b/components/brave_extension/extension/brave_extension/containers/simpleView/index.tsx @@ -11,42 +11,15 @@ import { ShieldsPanel } from '../../components' import Header from './header' import Footer from './footer' -import { - ShieldsToggled, - ReportBrokenSite, - BlockAdsTrackers, - HttpsEverywhereToggled, - BlockJavaScript, - BlockFingerprinting, - BlockCookies, - AllowScriptOriginsOnce, - SetScriptBlockedCurrentState, - SetGroupedScriptsBlockedCurrentState, - SetAllScriptsBlockedCurrentState, - SetFinalScriptsBlockedState, - SetAdvancedViewFirstAccess -} from '../../types/actions/shieldsPanelActions' +// Types +import { Tab, PersistentData } from '../../types/state/shieldsPannelState' +import { ShieldsPanelActionTypes } from '../../types/actions/shieldsPanelActions' // Helpers -import { Tab, PersistentData } from '../../types/state/shieldsPannelState' import { getFavicon, isShieldsEnabled } from '../../helpers/shieldsUtils' interface Props { - actions: { - shieldsToggled: ShieldsToggled - reportBrokenSite: ReportBrokenSite - blockAdsTrackers: BlockAdsTrackers - httpsEverywhereToggled: HttpsEverywhereToggled - blockJavaScript: BlockJavaScript - blockFingerprinting: BlockFingerprinting - blockCookies: BlockCookies - allowScriptOriginsOnce: AllowScriptOriginsOnce - setScriptBlockedCurrentState: SetScriptBlockedCurrentState - setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState - setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState - setFinalScriptsBlockedState: SetFinalScriptsBlockedState - setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess - } + actions: ShieldsPanelActionTypes shieldsPanelTabData: Tab persistentData: PersistentData toggleAdvancedView: () => void diff --git a/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts b/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts index 2bd30d4a3c84..4252adc1b513 100644 --- a/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts +++ b/components/brave_extension/extension/brave_extension/helpers/shieldsUtils.ts @@ -20,7 +20,10 @@ export const getTotalResourcesBlocked = (tabData: Partial) => { } export const getFavicon = (url: string) => { - return `chrome://favicon/size/16@1x/${ url }` + if (chrome.browserAction) { + return `chrome://favicon/size/16@1x/${ url }` + } + return '' } export const blockedResourcesSize = (blockedResources: number) => { diff --git a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/adsTrackersControl.tsx b/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/adsTrackersControl.tsx deleted file mode 100644 index 5e5133529162..000000000000 --- a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/adsTrackersControl.tsx +++ /dev/null @@ -1,113 +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 { - BlockedInfoRow, - BlockedInfoRowData, - ArrowDownIcon, - BlockedInfoRowStats, - BlockedInfoRowText, - Toggle -} from '../../../../components' - -// Group Components -import StaticList from '../overlays/staticOverlay' - -// Fake data -import { getLocale } from '../../../fakeLocale' -import data from '../../../fakeData' - -// Helpers -import { getTabIndexValueBasedOnProps } from '../../../helpers' - -interface Props { - favicon: string - hostname: string - isBlockedListOpen: boolean - setBlockedListOpen: () => void - adsTrackersBlocked: number -} - -interface State { - trackersBlockedOpen: boolean - trackersBlockedEnabled: boolean -} - -export default class AdsTrackersControl extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - trackersBlockedEnabled: true, - trackersBlockedOpen: false - } - } - - get tabIndex () { - const { isBlockedListOpen, adsTrackersBlocked } = this.props - return getTabIndexValueBasedOnProps(isBlockedListOpen, adsTrackersBlocked) - } - - onOpen3rdPartyTrackersBlocked = (event: React.MouseEvent) => { - if (event.currentTarget) { - event.currentTarget.blur() - } - this.props.setBlockedListOpen() - this.setState({ trackersBlockedOpen: !this.state.trackersBlockedOpen }) - } - - onOpen3rdPartyTrackersBlockedViaKeyboard = (event: React.KeyboardEvent) => { - if (event) { - if (event.key === ' ') { - event.currentTarget.blur() - this.props.setBlockedListOpen() - this.setState({ trackersBlockedOpen: !this.state.trackersBlockedOpen }) - } - } - } - - onChange3rdPartyTrackersBlockedEnabled = (event: React.ChangeEvent) => { - this.setState({ trackersBlockedEnabled: event.target.checked }) - } - - render () { - const { favicon, hostname, adsTrackersBlocked, isBlockedListOpen } = this.props - const { trackersBlockedOpen, trackersBlockedEnabled } = this.state - return ( - <> - - - - {adsTrackersBlocked > 99 ? '99+' : adsTrackersBlocked} - {getLocale('thirdPartyTrackersBlocked')} - - - - { - trackersBlockedOpen && - - } - - ) - } -} diff --git a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/cookiesControl.tsx b/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/cookiesControl.tsx deleted file mode 100644 index a292a3dc6239..000000000000 --- a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/cookiesControl.tsx +++ /dev/null @@ -1,32 +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 { BlockedInfoRowSingle, SelectBox } from '../../../../components' - -// Fake data -import { getLocale } from '../../../fakeLocale' - -interface Props { - isBlockedListOpen: boolean -} - -export default class CookiesControl extends React.PureComponent { - render () { - const { isBlockedListOpen } = this.props - return ( - <> - - - - - - - - - ) - } -} diff --git a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/deviceRecognitionControl.tsx b/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/deviceRecognitionControl.tsx deleted file mode 100644 index 48846c5aa96d..000000000000 --- a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/deviceRecognitionControl.tsx +++ /dev/null @@ -1,104 +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 { - BlockedInfoRowForSelect, - BlockedInfoRowDataForSelect, - ArrowDownIcon, - BlockedInfoRowStats, - SelectBox -} from '../../../../components' - -// Group Components -import StaticList from '../overlays/staticOverlay' - -// Fake data -import { getLocale } from '../../../fakeLocale' -import data from '../../../fakeData' - -// Helpers -import { getTabIndexValueBasedOnProps } from '../../../helpers' - -interface Props { - favicon: string - hostname: string - isBlockedListOpen: boolean - setBlockedListOpen: () => void - fingerprintingBlocked: number -} - -interface State { - deviceRecognitionOpen: boolean -} - -export default class DeviceRecognitionControl extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - deviceRecognitionOpen: false - } - } - - get tabIndex () { - const { isBlockedListOpen, fingerprintingBlocked } = this.props - return getTabIndexValueBasedOnProps(isBlockedListOpen, fingerprintingBlocked) - } - - onOpenDeviceRecognitionOpen = (event: React.MouseEvent) => { - if (event.currentTarget) { - event.currentTarget.blur() - } - this.props.setBlockedListOpen() - this.setState({ deviceRecognitionOpen: !this.state.deviceRecognitionOpen }) - } - - onOpenDeviceRecognitionOpenViaKeyboard = (event: React.KeyboardEvent) => { - if (event) { - if (event.key === ' ') { - event.currentTarget.blur() - this.props.setBlockedListOpen() - this.setState({ deviceRecognitionOpen: !this.state.deviceRecognitionOpen }) - } - } - } - - render () { - const { favicon, hostname, isBlockedListOpen, fingerprintingBlocked } = this.props - const { deviceRecognitionOpen } = this.state - return ( - <> - - - - {fingerprintingBlocked > 99 ? '99+' : fingerprintingBlocked} - - - - - - - - { - deviceRecognitionOpen && - - } - - ) - } -} diff --git a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/httpsUpgradesControl.tsx b/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/httpsUpgradesControl.tsx deleted file mode 100644 index 852392f3d284..000000000000 --- a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/httpsUpgradesControl.tsx +++ /dev/null @@ -1,115 +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 { - BlockedInfoRow, - BlockedInfoRowData, - ArrowDownIcon, - BlockedInfoRowStats, - BlockedInfoRowText, - Toggle -} from '../../../../components' - -// Group Components -import StaticList from '../overlays/staticOverlay' - -// Fake data -import { getLocale } from '../../../fakeLocale' -import data from '../../../fakeData' - -// Helpers -import { getTabIndexValueBasedOnProps } from '../../../helpers' - -interface Props { - favicon: string - hostname: string - isBlockedListOpen: boolean - setBlockedListOpen: () => void - httpsUpgrades: number -} - -interface State { - connectionsUpgradedEnabled: boolean - connectionsUpgradedOpen: boolean -} - -export default class HTTPSUpgradesControl extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - connectionsUpgradedEnabled: true, - connectionsUpgradedOpen: false - } - } - - get tabIndex () { - const { isBlockedListOpen, httpsUpgrades } = this.props - return getTabIndexValueBasedOnProps(isBlockedListOpen, httpsUpgrades) - } - - // HTTPS - onOpenConnectionsUpgradedToHTTPS = (event: React.MouseEvent) => { - if (event.currentTarget) { - event.currentTarget.blur() - } - this.props.setBlockedListOpen() - this.setState({ connectionsUpgradedOpen: !this.state.connectionsUpgradedOpen }) - // setNativeProps - } - - onOpenConnectionsUpgradedToHTTPSViaKeyboard = (event: React.KeyboardEvent) => { - if (event) { - if (event.key === ' ') { - event.currentTarget.blur() - this.props.setBlockedListOpen() - this.setState({ connectionsUpgradedOpen: !this.state.connectionsUpgradedOpen }) - } - } - } - - onChangeConnectionsUpgradedToHTTPSEnabled = (event: React.ChangeEvent) => { - this.setState({ connectionsUpgradedEnabled: event.target.checked }) - } - - render () { - const { isBlockedListOpen, favicon, hostname, httpsUpgrades } = this.props - const { connectionsUpgradedOpen, connectionsUpgradedEnabled } = this.state - return ( - <> - - - - {httpsUpgrades > 99 ? '99+' : httpsUpgrades} - {getLocale('connectionsUpgradedHTTPSCapital')} - - - - { - connectionsUpgradedOpen && - - } - - ) - } -} diff --git a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/scriptsControl.tsx b/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/scriptsControl.tsx deleted file mode 100644 index a40cec283c5c..000000000000 --- a/components/brave_extension/extension/brave_extension/stories/components/advancedView/controls/scriptsControl.tsx +++ /dev/null @@ -1,122 +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 { - BlockedInfoRow, - BlockedInfoRowData, - ArrowDownIcon, - BlockedInfoRowStats, - BlockedInfoRowText, - Toggle, - LinkAction -} from '../../../../components' - -// Group Components -import NoScriptOverlay from '../overlays/noScriptOverlay' - -// Fake data -import { getLocale } from '../../../fakeLocale' -import data from '../../../fakeData' - -// Helpers -import { getTabIndexValueBasedOnProps } from '../../../helpers' - -interface Props { - favicon: string - hostname: string - isBlockedListOpen: boolean - setBlockedListOpen: () => void - scriptsBlocked: number -} - -interface State { - scriptsBlockedOpen: boolean - scriptsBlockedEnabled: boolean -} - -export default class ScriptsControls extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - scriptsBlockedOpen: false, - scriptsBlockedEnabled: true - } - } - - get tabIndex () { - const { isBlockedListOpen, scriptsBlocked } = this.props - return getTabIndexValueBasedOnProps(isBlockedListOpen, scriptsBlocked) - } - - onOpenScriptsBlockedOpen = (event: React.MouseEvent) => { - if (event.currentTarget) { - event.currentTarget.blur() - } - this.props.setBlockedListOpen() - this.setState({ scriptsBlockedOpen: !this.state.scriptsBlockedOpen }) - } - - onOpenScriptsBlockedOpenViaKeyboard = (event: React.KeyboardEvent) => { - if (event) { - if (event.key === ' ') { - event.currentTarget.blur() - this.props.setBlockedListOpen() - this.setState({ scriptsBlockedOpen: !this.state.scriptsBlockedOpen }) - } - } - } - - onChangeScriptsBlockedEnabled = (event: React.ChangeEvent) => { - this.setState({ scriptsBlockedEnabled: event.target.checked }) - } - - onAllowScriptsOnceViaShortcut = () => { - return - } - - render () { - const { favicon, hostname, isBlockedListOpen, scriptsBlocked } = this.props - const { scriptsBlockedEnabled, scriptsBlockedOpen } = this.state - return ( - <> - - - - {scriptsBlocked > 99 ? '99+' : scriptsBlocked} - - {getLocale('scriptsBlocked')} - - - - {getLocale('allowScriptsOnce')} - - - - { - scriptsBlockedOpen && - - } - - ) - } -} diff --git a/components/brave_extension/extension/brave_extension/stories/components/advancedView/header.tsx b/components/brave_extension/extension/brave_extension/stories/components/advancedView/header.tsx deleted file mode 100644 index feb3fe023194..000000000000 --- a/components/brave_extension/extension/brave_extension/stories/components/advancedView/header.tsx +++ /dev/null @@ -1,120 +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 '../../../components' - -// Fake data -import { getLocale } from '../../fakeLocale' - -interface Props { - enabled: boolean - favicon: string - hostname: string - isBlockedListOpen: boolean - adsTrackersBlocked: number - scriptsBlocked: number - httpsUpgrades: number - fingerprintingBlocked: number - fakeOnChangeShieldsEnabled: () => void -} - -export default class Header extends React.PureComponent { - get totalBlocked () { - const { adsTrackersBlocked, httpsUpgrades, scriptsBlocked, fingerprintingBlocked } = this.props - const total = adsTrackersBlocked + httpsUpgrades + scriptsBlocked + fingerprintingBlocked - if (!total) { - return 0 - } - return total > 99 ? '99+' : total - } - - get totalBlockedString () { - const { adsTrackersBlocked, scriptsBlocked, fingerprintingBlocked, httpsUpgrades } = this.props - const blockedItems = adsTrackersBlocked + scriptsBlocked + fingerprintingBlocked - - 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('connectionUpgradedHTTPSCapital') - } else if (blockedItems > 1 && httpsUpgrades === 0) { - return getLocale('itemsBlocked') - } else if (blockedItems === 0 && httpsUpgrades > 1) { - return getLocale('connectionsUpgradedHTTPSCapital') - } else { - return `${getLocale('itemsBlocked')} ${getLocale('and')} ${getLocale('connectionsUpgraded')}` - } - } - - render () { - const { - enabled, - favicon, - hostname, - isBlockedListOpen, - fakeOnChangeShieldsEnabled - } = this.props - return ( - - -
- - {getLocale('shields')} - - {enabled ? ` ${getLocale('up')} ` : ` ${getLocale('down')} `} - - {getLocale('forThisSite')} - - {enabled ? {getLocale('enabledMessage')} : null} -
- - - - - - {hostname} - - { - enabled - ? ( - - {this.totalBlocked} - - {this.totalBlockedString} - - - ) - : ( - -
- {getLocale('disabledMessage')} - - ) - } - - - ) - } -} diff --git a/components/brave_extension/extension/brave_extension/stories/components/advancedView/index.tsx b/components/brave_extension/extension/brave_extension/stories/components/advancedView/index.tsx deleted file mode 100644 index b21cc3a5df64..000000000000 --- a/components/brave_extension/extension/brave_extension/stories/components/advancedView/index.tsx +++ /dev/null @@ -1,103 +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 { ShieldsPanel } from '../../../components' - -// Components group -import Header from './header' -import InterfaceControls from './interfaceControls' -import PrivacyControls from './privacyControls' -import Footer from '../shared/footer' -import WebCompatWarning from './overlays/webCompatWarningOverlay' - -interface Props { - enabled: boolean - firstAccess: boolean - hostname: string - advancedView: boolean - favicon: string - adsTrackersBlocked: number - httpsUpgrades: number - scriptsBlocked: number - fingerprintingBlocked: number - fakeOnChangeShieldsEnabled: () => void - fakeOnChangeAdvancedView: () => void - fakeToggleFirstAccess: () => void -} - -interface State { - isBlockedListOpen: boolean -} - -export default class ShieldsAdvancedView extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { isBlockedListOpen: false } - } - setBlockedListOpen = () => { - this.setState({ isBlockedListOpen: !this.state.isBlockedListOpen }) - } - render () { - const { - enabled, - firstAccess, - favicon, - hostname, - adsTrackersBlocked, - httpsUpgrades, - scriptsBlocked, - fingerprintingBlocked, - fakeOnChangeShieldsEnabled, - fakeOnChangeAdvancedView, - fakeToggleFirstAccess - } = this.props - const { isBlockedListOpen } = this.state - return ( - - {firstAccess ? : null} -
- { - enabled ? ( - <> - - - - ) : null - } -