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}
             />
         }
       </>