add new noScript interface

-
* scripts now show intermediary state "allowed once" and "blocked once"
* lists with zero items are now hidden
* add ability to see grouped scripts

fix brave/brave-browser#4572
fix brave/brave-browser#4570
fix brave/brave-browser#4567
address brave/brave-browser#2996

components/brave_extension/extension/brave_extension/_locales/en_US/messages.json

@@ -127,6 +127,10 @@
     "message": "Allowed once",
     "description": "Message for the resources blocked *allowed once* option"
   },
+  "allowScriptsOnce": {
+    "message": "Allow scripts once",
+    "description": "Message for the shortcut in the main interface to allow all scripts once"
+  },
   "cancel": {
     "message": "Cancel",
     "description": "Message for the button inside the static list of resources blocked to cancel the operation"

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

@@ -74,17 +74,39 @@ export const allowScriptOriginsOnce: actions.AllowScriptOriginsOnce = () => {
   }
 }
 
-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.SET_SCRIPT_BLOCKED_ONCE_CURRENT_STATE,
+    url
+  }
+}
+
+/**
+ * Set all child resources of a given hostname to be in the allowed/blocked list
+ * @param {string} origin - The blocked resource hostname
+ * @param {boolean} maybeBlock - Whether or not the resource should be blocked
+ */
+export const setGroupedScriptsBlockedCurrentState: actions.SetGroupedScriptsBlockedCurrentState = (origin, maybeBlock) => {
   return {
-    type: types.CHANGE_NO_SCRIPT_SETTINGS,
-    origin
+    type: types.SET_GROUPED_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE,
+    origin,
+    maybeBlock
   }
 }
 
-export const changeAllNoScriptSettings: actions.ChangeAllNoScriptSettings = (shouldBlock) => {
+/**
+ * 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.CHANGE_ALL_NO_SCRIPT_SETTINGS,
-    shouldBlock
+    type: types.SET_ALL_SCRIPTS_BLOCKED_ONCE_CURRENT_STATE,
+    maybeBlock
   }
 }
 

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

@@ -1,27 +1,31 @@
-// /* 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/. */
+/* 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/. */
 
+// 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 {
-  setAllowBraveShields,
-  requestShieldPanelData
-} from '../api/shieldsAPI'
-import { reloadTab } from '../api/tabsAPI'
-import * as shieldsPanelState from '../../state/shieldsPanelState'
+import * as cosmeticFilterTypes from '../../constants/cosmeticFilterTypes'
 import { State } from '../../types/state/shieldsPannelState'
 import { Actions } from '../../types/actions/index'
-import * as cosmeticFilterTypes from '../../constants/cosmeticFilterTypes'
+
+// APIs
+import { setAllowBraveShields, requestShieldPanelData } from '../api/shieldsAPI'
+import { reloadTab } from '../api/tabsAPI'
 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 +58,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

@@ -38,7 +38,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, new window.URL(action.url).origin)
       }
       break
     }
@@ -265,14 +265,37 @@ 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.origin, 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: {

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

@@ -27,8 +27,9 @@ import {
   BlockFingerprinting,
   BlockCookies,
   AllowScriptOriginsOnce,
-  ChangeNoScriptSettings,
-  ChangeAllNoScriptSettings,
+  SetScriptBlockedCurrentState,
+  SetGroupedScriptsBlockedCurrentState,
+  SetAllScriptsBlockedCurrentState,
   SetFinalScriptsBlockedState
 } from '../types/actions/shieldsPanelActions'
 
@@ -41,8 +42,9 @@ interface Props {
     blockFingerprinting: BlockFingerprinting
     blockCookies: BlockCookies
     allowScriptOriginsOnce: AllowScriptOriginsOnce
-    changeNoScriptSettings: ChangeNoScriptSettings
-    changeAllNoScriptSettings: ChangeAllNoScriptSettings
+    setScriptBlockedCurrentState: SetScriptBlockedCurrentState
+    setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState
+    setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
     setFinalScriptsBlockedState: SetFinalScriptsBlockedState
   }
   shieldsPanelTabData: Tab
@@ -128,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}
@@ -140,7 +144,6 @@ export default class Shields extends React.PureComponent<Props, State> {
                 fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
                 fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
                 blockFingerprinting={actions.blockFingerprinting}
-                setFinalScriptsBlockedState={actions.setFinalScriptsBlockedState}
               />
             </>
           )

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

@@ -11,11 +11,12 @@ import {
   ArrowDownIcon,
   BlockedInfoRowStats,
   BlockedInfoRowText,
+  LinkAction,
   Toggle
 } from 'brave-ui/features/shields'
 
 // Group Components
-import DynamicList from '../list/dynamic'
+import NoScript from '../list/noScript'
 
 // Locale
 import { getLocale } from '../../background/api/localeAPI'
@@ -33,10 +34,11 @@ import {
 import { BlockJSOptions } from '../../types/other/blockTypes'
 import { NoScriptInfo } from '../../types/other/noScriptInfo'
 import {
-  ChangeNoScriptSettings,
   BlockJavaScript,
-  ChangeAllNoScriptSettings,
   AllowScriptOriginsOnce,
+  SetScriptBlockedCurrentState,
+  SetGroupedScriptsBlockedCurrentState,
+  SetAllScriptsBlockedCurrentState,
   SetFinalScriptsBlockedState
 } from '../../types/actions/shieldsPanelActions'
 
@@ -52,10 +54,11 @@ interface JavaScriptProps {
   javascript: BlockJSOptions
   javascriptBlocked: number
   noScriptInfo: NoScriptInfo
-  changeNoScriptSettings: ChangeNoScriptSettings
   blockJavaScript: BlockJavaScript
-  changeAllNoScriptSettings: ChangeAllNoScriptSettings
   allowScriptOriginsOnce: AllowScriptOriginsOnce
+  setScriptBlockedCurrentState: SetScriptBlockedCurrentState
+  setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState
+  setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
   setFinalScriptsBlockedState: SetFinalScriptsBlockedState
 }
 
@@ -116,21 +119,28 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
     this.props.blockJavaScript(shouldBlockJavaScript)
   }
 
+  onClickAllowScriptsOnce = () => {
+    this.props.setAllScriptsBlockedCurrentState(false)
+    this.props.setFinalScriptsBlockedState()
+    this.props.allowScriptOriginsOnce()
+  }
+
   render () {
     const {
       favicon,
       hostname,
       isBlockedListOpen,
       allowScriptOriginsOnce,
-      changeNoScriptSettings,
-      changeAllNoScriptSettings,
-      setFinalScriptsBlockedState,
-      noScriptInfo
+      noScriptInfo,
+      setScriptBlockedCurrentState,
+      setGroupedScriptsBlockedCurrentState,
+      setAllScriptsBlockedCurrentState,
+      setFinalScriptsBlockedState
     } = this.props
     const { scriptsBlockedOpen } = this.state
     return (
       <>
-        <BlockedInfoRow id='scriptsControl'>
+        <BlockedInfoRow id='scriptsControl' extraColumn={true}>
           <BlockedInfoRowData
             disabled={this.maybeDisableResourcesRow}
             tabIndex={this.tabIndex}
@@ -141,6 +151,17 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
             <BlockedInfoRowStats id='blockScriptsStat'>{this.javascriptBlockedDisplay}</BlockedInfoRowStats>
             <BlockedInfoRowText>{getLocale('scriptsBlocked')}</BlockedInfoRowText>
           </BlockedInfoRowData>
+          {
+            this.maybeDisableResourcesRow === false
+              && (
+                <LinkAction
+                  size='small'
+                  onClick={this.onClickAllowScriptsOnce}
+                >
+                  {getLocale('allowScriptsOnce')}
+                </LinkAction>
+              )
+          }
           <Toggle
             id='blockScripts'
             size='small'
@@ -151,16 +172,15 @@ 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}
             />
         }