Add support to block scripts individually

components/brave_extension/extension/brave_extension/BUILD.gn

@@ -50,7 +50,8 @@ transpile_web_ui("brave_extension") {
  "components/controls/deviceRecognitionControl.tsx",
  "components/controls/httpsUpgradesControl.tsx",
  "components/controls/scriptsControl.tsx",
- "components/list/dynamic.tsx",
+ "components/list/noScript.tsx",
+ "components/list/noScriptContent.tsx",
  "components/list/static.tsx",
  "constants/cosmeticFilterTypes.ts",
  "constants/resourceIdentifiers.ts",
@@ -64,7 +65,9 @@ transpile_web_ui("brave_extension") {
  "helpers/arrayUtils.ts",
  "helpers/urlUtils.ts",
  "helpers/shieldsUtils.ts",
+ "helpers/noScriptUtils.ts",
  "state/shieldsPanelState.ts",
+ "state/noScriptState.ts",
  "types/actions/cosmeticFilterActions.ts",
  "types/actions/index.ts",
  "types/actions/runtimeActions.ts",

components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts

@@ -75,16 +75,48 @@ export const allowScriptOriginsOnce: actions.AllowScriptOriginsOnce = (origins)
  }
 }
 
-export const changeNoScriptSettings: actions.ChangeNoScriptSettings = (origin) => {
+/**
+ * Set a given script resource state to be in the allowed/blocked list
+ * @param {string} url - The resource URL
+ * @param {boolean} maybeBlock - Whether or not the resource should be blocked
+ */
+export const setScriptBlockedCurrentState: actions.SetScriptBlockedCurrentState = (url) => {
  return {
- type: types.CHANGE_NO_SCRIPT_SETTINGS,
- origin
+ type: types.SET_SCRIPT_BLOCKED_ONCE_CURRENT_STATE,
+ url
  }
 }
 
-export const changeAllNoScriptSettings: actions.ChangeAllNoScriptSettings = (shouldBlock) => {
+/**
+ * Set all child resources of a given hostname to be in the allowed/blocked list
+ * @param {string} hostname - The blocked resource hostname
+ * @param {boolean} maybeBlock - Whether or not the resource should be blocked
+ */
+export const setGroupedScriptsBlockedCurrentState: actions.SetGroupedScriptsBlockedCurrentState = (hostname, maybeBlock) => {
  return {
- type: types.CHANGE_ALL_NO_SCRIPT_SETTINGS,
- shouldBlock
+ type: types.SET_GROUPED_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE,
+ hostname,
+ maybeBlock
+ }
+}
+
+/**
+ * Set all resources in blocked/allowed state to be in the allowed/blocked list
+ * @param {boolean} maybeBlock - Whether or not the resource should be blocked
+ */
+export const setAllScriptsBlockedCurrentState: actions.SetAllScriptsBlockedCurrentState = (maybeBlock) => {
+ return {
+ type: types.SET_ALL_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE,
+ maybeBlock
+ }
+}
+
+/**
+ * Set the final state to all resources so they could be stored persistently in
+ * the blocked/allowed list
+ */
+export const setFinalScriptsBlockedState: actions.SetFinalScriptsBlockedState = () => {
+ return {
+ type: types.SET_FINAL_SCRIPTS_BLOCKED_ONCE_STATE
  }
 }

components/brave_extension/extension/brave_extension/background/reducers/cosmeticFilterReducer.ts

@@ -2,26 +2,33 @@
 // * 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/. */
 
+// Types
 import * as shieldsPanelTypes from '../../constants/shieldsPanelTypes'
 import * as windowTypes from '../../constants/windowTypes'
 import * as tabTypes from '../../constants/tabTypes'
 import * as webNavigationTypes from '../../constants/webNavigationTypes'
+import * as cosmeticFilterTypes from '../../constants/cosmeticFilterTypes'
+import { State } from '../../types/state/shieldsPannelState'
+import { Actions } from '../../types/actions/index'
+
+// APIs
 import {
  setAllowBraveShields,
  requestShieldPanelData
 } from '../api/shieldsAPI'
 import { reloadTab } from '../api/tabsAPI'
-import * as shieldsPanelState from '../../state/shieldsPanelState'
-import { State } from '../../types/state/shieldsPannelState'
-import { Actions } from '../../types/actions/index'
-import * as cosmeticFilterTypes from '../../constants/cosmeticFilterTypes'
 import {
  removeSiteFilter,
  addSiteCosmeticFilter,
  applySiteFilters,
  removeAllFilters
 } from '../api/cosmeticFilterAPI'
 
+// State helpers
+import * as shieldsPanelState from '../../state/shieldsPanelState'
+import * as noScriptState from '../../state/noScriptState'
+import { getOrigin } from '../../helpers/urlUtils'
+
 const focusedWindowChanged = (state: State, windowId: number): State => {
  if (windowId !== -1) {
  state = shieldsPanelState.updateFocusedWindow(state, windowId)
@@ -54,7 +61,7 @@ export default function cosmeticFilterReducer (state: State = {
  if (action.isMainFrame) {
  state = shieldsPanelState.resetBlockingStats(state, action.tabId)
  state = shieldsPanelState.resetBlockingResources(state, action.tabId)
- state = shieldsPanelState.resetNoScriptInfo(state, action.tabId, new window.URL(action.url).origin)
+ state = noScriptState.resetNoScriptInfo(state, action.tabId, getOrigin(action.url))
  }
  applySiteFilters(tabData.hostname)
  break

components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts

@@ -2,10 +2,15 @@
  * 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/. */
 
+// Types
 import * as shieldsPanelTypes from '../../constants/shieldsPanelTypes'
 import * as windowTypes from '../../constants/windowTypes'
 import * as tabTypes from '../../constants/tabTypes'
 import * as webNavigationTypes from '../../constants/webNavigationTypes'
+import { State, Tab } from '../../types/state/shieldsPannelState'
+import { Actions } from '../../types/actions/index'
+
+// APIs
 import {
  setAllowBraveShields,
  setAllowAds,
@@ -20,10 +25,12 @@ import {
 } from '../api/shieldsAPI'
 import { setBadgeText, setIcon } from '../api/browserActionAPI'
 import { reloadTab } from '../api/tabsAPI'
+
+// Helpers
 import * as shieldsPanelState from '../../state/shieldsPanelState'
-import { State, Tab } from '../../types/state/shieldsPannelState'
-import { Actions } from '../../types/actions/index'
+import * as noScriptState from '../../state/noScriptState'
 import { getTotalResourcesBlocked } from '../../helpers/shieldsUtils'
+import { getOrigin } from '../../helpers/urlUtils'
 
 const updateShieldsIconBadgeText = (state: State) => {
  const tabId: number = shieldsPanelState.getActiveTabId(state)
@@ -74,7 +81,7 @@ export default function shieldsPanelReducer (state: State = { tabs: {}, windows:
  if (action.isMainFrame) {
  state = shieldsPanelState.resetBlockingStats(state, action.tabId)
  state = shieldsPanelState.resetBlockingResources(state, action.tabId)
- state = shieldsPanelState.resetNoScriptInfo(state, action.tabId, new window.URL(action.url).origin)
+ state = noScriptState.resetNoScriptInfo(state, action.tabId, getOrigin(action.url))
  }
  break
  }
@@ -298,16 +305,42 @@ export default function shieldsPanelReducer (state: State = { tabs: {}, windows:
  })
  break
  }
- case shieldsPanelTypes.CHANGE_NO_SCRIPT_SETTINGS: {
- const tabId: number = shieldsPanelState.getActiveTabId(state)
- state = shieldsPanelState.changeNoScriptSettings(state, tabId, action.origin)
+ // NoScriptInfo is the name we call for the list of scripts that are either
+ // blocked or allowed by the user. Each script have three properties:
+ // ....................................................................................
+ // `actuallyBlocked`:
+ // ....................................................................................
+ // When set to `true` it blocks the script immediatelly. This is the initial state
+ // when the user toggle scripts blocked in the main panel screen and also the initial state
+ // for when users toggle `block/allow` or `block all/allow all`
+ // ....................................................................................
+ // `willBlock`:
+ // ....................................................................................
+ // When set to `true` it moves the script to its respective list. This is the final state
+ // when the user choose to close Shields either by clicking `cancel`, moving back to the
+ // main screen, or closing Shields browser action. This state is triggered only after those actions
+ // and its state inherit the state of `actuallyBlocked`.
+ // ....................................................................................
+ // `userInteracted`:
+ // ....................................................................................
+ // This property is for display only. With this we can tell whether or not the user have
+ // interacted with the script which can change the button state to allow/block (no user interaction)
+ // or blocked once/allowed once (user has interacted).
+ case shieldsPanelTypes.SET_SCRIPT_BLOCKED_ONCE_CURRENT_STATE: {
+ state = noScriptState.setScriptBlockedCurrentState(state, action.url)
  break
  }
- case shieldsPanelTypes.CHANGE_ALL_NO_SCRIPT_SETTINGS: {
- const tabId: number = shieldsPanelState.getActiveTabId(state)
- state = shieldsPanelState.changeAllNoScriptSettings(state, tabId, action.shouldBlock)
+ case shieldsPanelTypes.SET_GROUPED_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE: {
+ state = noScriptState.setGroupedScriptsBlockedCurrentState(state, action.hostname, action.maybeBlock)
  break
  }
+ case shieldsPanelTypes.SET_ALL_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE: {
+ state = noScriptState.setAllScriptsBlockedCurrentState(state, action.maybeBlock)
+ break
+ }
+ case shieldsPanelTypes.SET_FINAL_SCRIPTS_BLOCKED_ONCE_STATE: {
+ state = noScriptState.setFinalScriptsBlockedState(state)
+ }
  }
  return state
 }

components/brave_extension/extension/brave_extension/components/braveShields.tsx

@@ -27,8 +27,10 @@ import {
  BlockFingerprinting,
  BlockCookies,
  AllowScriptOriginsOnce,
- ChangeNoScriptSettings,
- ChangeAllNoScriptSettings
+ SetScriptBlockedCurrentState,
+ SetGroupedScriptsBlockedCurrentState,
+ SetAllScriptsBlockedCurrentState,
+ SetFinalScriptsBlockedState
 } from '../types/actions/shieldsPanelActions'
 
 interface Props {
@@ -40,8 +42,10 @@ interface Props {
  blockFingerprinting: BlockFingerprinting
  blockCookies: BlockCookies
  allowScriptOriginsOnce: AllowScriptOriginsOnce
- changeNoScriptSettings: ChangeNoScriptSettings
- changeAllNoScriptSettings: ChangeAllNoScriptSettings
+ setScriptBlockedCurrentState: SetScriptBlockedCurrentState
+ setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState
+ setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
+ setFinalScriptsBlockedState: SetFinalScriptsBlockedState
  }
  shieldsPanelTabData: Tab
 }
@@ -126,10 +130,12 @@ export default class Shields extends React.PureComponent<Props, State> {
  javascript={shieldsPanelTabData.javascript}
  javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
  noScriptInfo={shieldsPanelTabData.noScriptInfo}
- changeNoScriptSettings={actions.changeNoScriptSettings}
  blockJavaScript={actions.blockJavaScript}
- changeAllNoScriptSettings={actions.changeAllNoScriptSettings}
  allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
+ setScriptBlockedCurrentState={actions.setScriptBlockedCurrentState}
+ setGroupedScriptsBlockedCurrentState={actions.setGroupedScriptsBlockedCurrentState}
+ setAllScriptsBlockedCurrentState={actions.setAllScriptsBlockedCurrentState}
+ setFinalScriptsBlockedState={actions.setFinalScriptsBlockedState}
  // Cookies
  blockCookies={actions.blockCookies}
  cookies={shieldsPanelTabData.cookies}

components/brave_extension/extension/brave_extension/components/controls/scriptsControl.tsx

@@ -15,7 +15,7 @@ import {
 } from 'brave-ui/features/shields'
 
 // Group Components
-import DynamicList from '../list/dynamic'
+import NoScript from '../list/noScript'
 
 // Locale
 import { getLocale } from '../../background/api/localeAPI'
@@ -32,11 +32,14 @@ import {
 // Types
 import { BlockJSOptions } from '../../types/other/blockTypes'
 import { NoScriptInfo } from '../../types/other/noScriptInfo'
+
 import {
- ChangeNoScriptSettings,
  BlockJavaScript,
- ChangeAllNoScriptSettings,
- AllowScriptOriginsOnce
+ AllowScriptOriginsOnce,
+ SetScriptBlockedCurrentState,
+ SetGroupedScriptsBlockedCurrentState,
+ SetAllScriptsBlockedCurrentState,
+ SetFinalScriptsBlockedState
 } from '../../types/actions/shieldsPanelActions'
 
 interface CommonProps {
@@ -51,10 +54,12 @@ interface JavaScriptProps {
  javascript: BlockJSOptions
  javascriptBlocked: number
  noScriptInfo: NoScriptInfo
- changeNoScriptSettings: ChangeNoScriptSettings
  blockJavaScript: BlockJavaScript
- changeAllNoScriptSettings: ChangeAllNoScriptSettings
  allowScriptOriginsOnce: AllowScriptOriginsOnce
+ setScriptBlockedCurrentState: SetScriptBlockedCurrentState
+ setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState
+ setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
+ setFinalScriptsBlockedState: SetFinalScriptsBlockedState
 }
 
 export type Props = CommonProps & JavaScriptProps
@@ -120,9 +125,11 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
  hostname,
  isBlockedListOpen,
  allowScriptOriginsOnce,
- changeNoScriptSettings,
- changeAllNoScriptSettings,
- noScriptInfo
+ noScriptInfo,
+ setScriptBlockedCurrentState,
+ setGroupedScriptsBlockedCurrentState,
+ setAllScriptsBlockedCurrentState,
+ setFinalScriptsBlockedState
  } = this.props
  const { scriptsBlockedOpen } = this.state
  return (
@@ -148,16 +155,16 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
  </BlockedInfoRow>
  {
  scriptsBlockedOpen &&
- <DynamicList
+ <NoScript
  favicon={favicon}
  hostname={hostname}
- origin={origin}
- name={getLocale('scriptsOnThisSite')}
- list={noScriptInfo}
+ noScriptInfo={noScriptInfo}
  onClose={this.onOpenScriptsBlocked}
  allowScriptOriginsOnce={allowScriptOriginsOnce}
- changeNoScriptSettings={changeNoScriptSettings}
- changeAllNoScriptSettings={changeAllNoScriptSettings}
+ setScriptBlockedCurrentState={setScriptBlockedCurrentState}
+ setGroupedScriptsBlockedCurrentState={setGroupedScriptsBlockedCurrentState}
+ setAllScriptsBlockedCurrentState={setAllScriptsBlockedCurrentState}
+ setFinalScriptsBlockedState={setFinalScriptsBlockedState}
  />
  }
  </>