From b43127646f3b052935501cf545ccb260fbe7561e Mon Sep 17 00:00:00 2001 From: Emerick Rogul Date: Tue, 5 Mar 2019 19:36:32 -0500 Subject: [PATCH 1/6] Add CustomFilters component to Adblock page --- browser/ui/webui/brave_webui_source.cc | 2 + components/brave_adblock_ui/BUILD.gn | 1 + .../actions/adblock_actions.ts | 12 +++++ components/brave_adblock_ui/brave_adblock.tsx | 12 +++++ .../brave_adblock_ui/components/app.tsx | 7 ++- .../components/customFilters.tsx | 44 +++++++++++++++++++ .../constants/adblock_types.ts | 5 ++- .../reducers/adblock_reducer.ts | 15 +++++++ components/brave_adblock_ui/storage.ts | 3 ++ components/definitions/adBlock.d.ts | 3 ++ .../resources/brave_components_strings.grd | 2 + 11 files changed, 104 insertions(+), 2 deletions(-) create mode 100644 components/brave_adblock_ui/components/customFilters.tsx diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index 37a9d4f14306..590f51fad4a1 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/browser/ui/webui/brave_webui_source.cc @@ -527,6 +527,8 @@ void CustomizeWebUIHTMLSource(const std::string &name, }, { std::string("adblock"), { { "adsBlocked", IDS_ADBLOCK_TOTAL_ADS_BLOCKED }, + { "customFiltersTitle", IDS_ADBLOCK_CUSTOM_FILTERS_TITLE }, + { "customFiltersInstructions", IDS_ADBLOCK_CUSTOM_FILTERS_INSTRUCTIONS }, // NOLINT { "regionalAdblockEnabledTitle", IDS_ADBLOCK_REGIONAL_AD_BLOCK_ENABLED_TITLE}, // NOLINT { "regionalAdblockEnabled", IDS_ADBLOCK_REGIONAL_AD_BLOCK_ENABLED }, { "regionalAdblockDisabled", IDS_ADBLOCK_REGIONAL_AD_BLOCK_DISABLED }, diff --git a/components/brave_adblock_ui/BUILD.gn b/components/brave_adblock_ui/BUILD.gn index a9eba036bd46..af1194041b1b 100644 --- a/components/brave_adblock_ui/BUILD.gn +++ b/components/brave_adblock_ui/BUILD.gn @@ -8,6 +8,7 @@ transpile_web_ui("brave_adblock_ui") { "store.ts", "actions/adblock_actions.ts", "components/app.tsx", + "components/customFilters.tsx", "components/numBlockedStat.tsx", "components/regionalAdBlockEnabled.tsx", "constants/adblock_types.ts", diff --git a/components/brave_adblock_ui/actions/adblock_actions.ts b/components/brave_adblock_ui/actions/adblock_actions.ts index ca4b394bc6a1..d14e5be51ee5 100644 --- a/components/brave_adblock_ui/actions/adblock_actions.ts +++ b/components/brave_adblock_ui/actions/adblock_actions.ts @@ -7,4 +7,16 @@ import { action } from 'typesafe-actions' // Constants import { types } from '../constants/adblock_types' +export const getCustomFilters = () => action(types.ADBLOCK_GET_CUSTOM_FILTERS) + +export const onGetCustomFilters = (customFilters: string) => + action(types.ADBLOCK_ON_GET_CUSTOM_FILTERS, { + customFilters + }) + export const statsUpdated = () => action(types.ADBLOCK_STATS_UPDATED) + +export const updateCustomFilters = (customFilters: string) => + action(types.ADBLOCK_UPDATE_CUSTOM_FILTERS, { + customFilters + }) diff --git a/components/brave_adblock_ui/brave_adblock.tsx b/components/brave_adblock_ui/brave_adblock.tsx index 734cd944b73c..285a83d85916 100644 --- a/components/brave_adblock_ui/brave_adblock.tsx +++ b/components/brave_adblock_ui/brave_adblock.tsx @@ -17,7 +17,13 @@ import * as adblockActions from './actions/adblock_actions' window.cr.define('brave_adblock', function () { 'use strict' + function getCustomFilters () { + const actions = bindActionCreators(adblockActions, store.dispatch.bind(store)) + actions.getCustomFilters() + } + function initialize () { + getCustomFilters() render( @@ -26,6 +32,11 @@ window.cr.define('brave_adblock', function () { window.i18nTemplate.process(window.document, window.loadTimeData) } + function onGetCustomFilters (customFilters: string) { + const actions = bindActionCreators(adblockActions, store.dispatch.bind(store)) + actions.onGetCustomFilters(customFilters) + } + function statsUpdated () { const actions = bindActionCreators(adblockActions, store.dispatch.bind(store)) actions.statsUpdated() @@ -33,6 +44,7 @@ window.cr.define('brave_adblock', function () { return { initialize, + onGetCustomFilters, statsUpdated } }) diff --git a/components/brave_adblock_ui/components/app.tsx b/components/brave_adblock_ui/components/app.tsx index e9652db8cd3c..6b06bda62037 100644 --- a/components/brave_adblock_ui/components/app.tsx +++ b/components/brave_adblock_ui/components/app.tsx @@ -7,6 +7,7 @@ import { bindActionCreators, Dispatch } from 'redux' import { connect } from 'react-redux' // Components +import { CustomFilters } from './customFilters' import { RegionalAdBlockEnabled } from './regionalAdBlockEnabled' import { NumBlockedStat } from './numBlockedStat' @@ -24,7 +25,7 @@ export class AdblockPage extends React.Component { } render () { - const { adblockData } = this.props + const { actions, adblockData } = this.props return (
@@ -32,6 +33,10 @@ export class AdblockPage extends React.Component { regionalAdBlockEnabled={adblockData.stats.regionalAdBlockEnabled} regionalAdBlockTitle={adblockData.stats.regionalAdBlockTitle || ''} /> +
) } } diff --git a/components/brave_adblock_ui/components/customFilters.tsx b/components/brave_adblock_ui/components/customFilters.tsx new file mode 100644 index 000000000000..424d6efc7d25 --- /dev/null +++ b/components/brave_adblock_ui/components/customFilters.tsx @@ -0,0 +1,44 @@ +/* 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' + +interface Props { + actions: any, + rules: string +} + +export class CustomFilters extends React.Component { + constructor(props: Props) { + super(props) + } + + onChangeCustomFilters = (event: React.ChangeEvent) => { + this.props.actions.updateCustomFilters(event.target.value) + } + + render() { + return ( +
+
+
+