several shields panel improvements

components/brave_extension/extension/brave_extension/BUILD.gn

@@ -40,14 +40,18 @@ transpile_web_ui("brave_extension") {
     "background/reducers/shieldsPanelReducer.ts",
     "background/store.ts",
     "braveShieldsPanel.tsx",
-    "components/braveShields/braveShields.tsx",
-    "components/braveShields/footer.tsx",
-    "components/braveShields/header.tsx",
-    "components/braveShields/interfaceControls.tsx",
-    "components/braveShields/privacyControls.tsx",
-    "components/braveShields/blockedResources/blockedResources.tsx",
-    "components/braveShields/blockedResources/scriptsList.tsx",
-    "components/braveShields/blockedResources/staticList.tsx",
+    "components/braveShields.tsx",
+    "components/footer.tsx",
+    "components/header.tsx",
+    "components/interfaceControls.tsx",
+    "components/privacyControls.tsx",
+    "components/controls/adsTrackersControl.tsx",
+    "components/controls/cookiesControl.tsx",
+    "components/controls/deviceRecognitionControl.tsx",
+    "components/controls/httpsUpgradesControl.tsx",
+    "components/controls/scriptsControl.tsx",
+    "components/list/dynamic.tsx",
+    "components/list/static.tsx",
     "constants/cosmeticFilterTypes.ts",
     "constants/resourceIdentifiers.ts",
     "constants/runtimeActionTypes.ts",

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

@@ -15,10 +15,6 @@
     "message": "down",
     "description": "Message for when shields is disabled"
   },
-  "totalBlocked": {
-    "message": "Total blocked",
-    "description": "Message showing the amount of all blocked resources"
-  },
   "forThisSite": {
     "message": "for this site",
     "description": "Partial string for the phrase `shields is up *for this site*`"
@@ -31,69 +27,65 @@
     "message": "You’re browsing this site without any privacy and security protections.",
     "description": "Message telling the user that shields are disabled"
   },
-  "blockAds": {
-    "message": "Ads and trackers blocked",
-    "description": "Message indicating the number of ads and trackers blocked"
+  "itemsBlocked": {
+    "message": "Items blocked",
+    "description": "Message for the main blocked resources text when there is more than one ad/track/script blocked (plural)"
   },
-  "blockPopups": {
-    "message": "Pop-ups blocked",
-    "description": "Message indicating the number of pop-ups blocked"
+  "itemBlocked": {
+    "message": "Item blocked",
+    "description": "Message for the main blocked resources text when there is one ad/track/script blocked (singular)"
   },
-  "blockImages": {
-    "message": "Images blocked",
-    "description": "Message indicating the number of images blocked"
+  "and": {
+    "message": "and",
+    "description": "Message for the `and` conjunction. Used to connect grammatically the `item blocked and connection upgrades` and its variant phrases"
   },
-  "block3partyCookies": {
-    "message": "3rd-party cookies blocked",
-    "description": "Message for the select option about cookies blocked, blocking 3rd party cookies"
+  "connectionsUpgraded": {
+    "message": "connections upgraded",
+    "description": "Message for the main blocked resources text when there is at least one ad/track/script blocked and more than one connection upgrade (plural)"
   },
-  "allowAllCookies": {
-    "message": "All cookies allowed",
-    "description": "Message for the select option about cookies blocked, allowing all cookies"
+  "connectionUpgraded": {
+    "message": "connection upgraded",
+    "description": "Message for the main blocked resources text when there is at least one ad/track/script blocked and one connection upgrade (singular)"
   },
-  "blockAllCookies": {
-    "message": "Cookies blocked",
-    "description": "Message for the select option about cookies blocked, blocking all cookies"
+  "thirdPartyTrackersBlocked": {
+    "message": "3rd-party trackers blocked",
+    "description": "Message for the scripts blocked row label"
   },
-  "blockSomeScripts": {
-    "message": "Some scripts blocked",
-    "description": "Message for the select option about scripts blocked, blocking 3rd party scripts"
+  "connectionsUpgradedHTTPS": {
+    "message": "Connections upgraded to HTTPS",
+    "description": "Message for the connections upgraded row label and for the main blocked resources text when there is more than one connection upgraded (plural) and no other ads/trackers blocked"
   },
-  "allowAllScripts": {
-    "message": "All scripts allowed",
-    "description": "Message for the select option about scripts blocked, allowing all scripts"
+  "connectionUpgradedHTTPS": {
+    "message": "Connection upgraded to HTTPS",
+    "description": "Message for the main blocked resources text when there is one connection upgraded (singular) and no other ads/trackers blocked"
   },
-  "blockAllScriptsOrigins": {
+  "scriptsBlocked": {
     "message": "Scripts blocked",
-    "description": "Message for the select option about scripts blocked, blocking all scripts"
-  },
-  "block3partyFingerprinting": {
-    "message": "3rd-party device recognition blocked",
-    "description": "Message for the select option about fingerprinting blocked, blocking 3rd party fingerprinting"
+    "description": "Message for the scripts blocked row label"
   },
-  "allowAllFingerprinting": {
-    "message": "All device recognition allowed",
-    "description": "Message for the select option about fingerprinting blocked, allowing all fingerprinting"
+  "thirdPartyCookiesBlocked": {
+    "message": "3rd-party cookies blocked",
+    "description": "Message for the option in the cookies select field to block all 3rd party cookies"
   },
-  "blockAllFingerprinting": {
-    "message": "Device recognition blocked",
-    "description": "Message for the select option about fingerprinting blocked, blocking all fingerprinting"
+  "allCookiesBlocked": {
+    "message": "Cookies blocked",
+    "description": "Message for the option in the cookies select field to block all cookies"
   },
-  "blockPishing": {
-    "message": "Phishing/malware attempts blocked",
-    "description": "Message indicating the number of phishing/malware blocked"
+  "allCookiesAllowed": {
+    "message": "All cookies allowed",
+    "description": "Message for the option in the cookies select field to allow all cookies"
   },
-  "connectionsEncrypted": {
-    "message": "Connections encrypted",
-    "description": "Message indicating the number of connections encrypted"
+  "thirdPartyFingerprintingBlocked": {
+    "message": "3rd-party device recognition blocked",
+    "description": "Message for the option in the device recognition select field to block all 3rd party recognition attempts"
   },
-  "editDefaults": {
-    "message": "Global shield defaults",
-    "description": "Message linking shields to the global shield settings"
+  "allFingerprintingBlocked": {
+    "message": "Device recognition blocked",
+    "description": "Message for the option in the device recognition select field to block all device recognition attempts"
   },
-  "cookiesOnThisSite": {
-    "message": "Cookies on this site",
-    "description": "Message for the cookie resources blocked panel"
+  "allFingerprintingAllowed": {
+    "message": "All device recognition allowed",
+    "description": "Message for the option in the device recognition select field to allow all device recognition attempts"
   },
   "deviceRecognitionAttempts": {
     "message": "Device recognition attempts",
@@ -111,49 +103,21 @@
     "message": "Allowed scripts",
     "description": "Message for the script resources allowed"
   },
-  "allowAll": {
-    "message": "Allow all",
-    "description": "Message for the resources blocked *allow all* option"
-  },
-  "allow": {
-    "message": "Allow",
-    "description": "Message for the resources blocked *allow* option"
-  },
-  "allowed": {
-    "message": "Allowed",
-    "description": "Message for the resources blocked *allowed* option"
-  },
   "blockAll": {
     "message": "Block all",
     "description": "Message for the resources blocked *block all* option"
   },
+  "allowAll": {
+    "message": "Allow all",
+    "description": "Message for the resources blocked *allow all* option"
+  },
   "block": {
     "message": "Block",
     "description": "Message for the resources blocked *block* option"
   },
-  "blocked": {
-    "message": "Blocked",
-    "description": "Message for the resources blocked *blocked* option"
-  },
-  "apply": {
-    "message": "Apply",
-    "description": "Message for the button inside dynamic list of resources blocked"
-  },
-  "applyOnce": {
-    "message": "Apply once",
-    "description": "Message for the dropdown option inside dynamic list of resources blocked to *apply once*"
-  },
-  "applyUntilRestart": {
-    "message": "Apply until restart",
-    "description": "Message for the dropdown option inside dynamic list of resources blocked to *apply until restart*"
-  },
-  "alwaysApply": {
-    "message": "Always apply",
-    "description": "Message for the dropdown option inside dynamic list of resources blocked to *always apply*"
-  },
-  "undo": {
-    "message": "Undo",
-    "description": "Message for the resources blocked *undo* option"
+  "allow": {
+    "message": "Allow",
+    "description": "Message for the resources blocked *allow* option"
   },
   "cancel": {
     "message": "Cancel",
@@ -162,5 +126,13 @@
   "goBack": {
     "message": "Go back",
     "description": "Message for the button inside the static list of resources blocked to go back from the current screen"
+  },
+  "applyOnce": {
+    "message": "Apply once",
+    "description": "Message for action in dynamic list of resources blocked to *apply once*"
+  },
+  "changeDefaults": {
+    "message": "Change global shield defaults",
+    "description": "Message for the button action linking to the settings page"
   }
 }

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

@@ -82,10 +82,9 @@ export const changeNoScriptSettings: actions.ChangeNoScriptSettings = (origin) =
   }
 }
 
-export const changeAllNoScriptSettings: actions.ChangeAllNoScriptSettings = (origin, shouldBlock) => {
+export const changeAllNoScriptSettings: actions.ChangeAllNoScriptSettings = (shouldBlock) => {
   return {
     type: types.CHANGE_ALL_NO_SCRIPT_SETTINGS,
-    origin,
     shouldBlock
   }
 }

components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts

@@ -22,13 +22,15 @@ export const applySiteFilters = (hostname: string) => {
   chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
     if (!storeData.cosmeticFilterList) {
       if (process.env.NODE_ENV === 'shields_development') {
-        console.info('applySiteFilters: no cosmetic filter store yet')
+        console.log('applySiteFilters: no cosmetic filter store yet')
       }
       return
     }
     if (storeData.cosmeticFilterList[hostname] !== undefined) {
       storeData.cosmeticFilterList[hostname].map((rule: string) => {
-        console.log('applying rule', rule)
+        if (process.env.NODE_ENV === 'shields_development') {
+          console.log('applying rule', rule)
+        }
         chrome.tabs.insertCSS({
           code: `${rule} {display: none;}`,
           runAt: 'document_start'

components/brave_extension/extension/brave_extension/background/api/localeAPI.ts

@@ -6,7 +6,7 @@
  * Gets the locale message specified in messages.json
  * @param {string} message - The locale string
  */
-export const getMessage = (message: string): string => {
+export const getLocale = (message: string): string => {
   if (chrome.i18n) {
     return chrome.i18n.getMessage(message)
   }

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

@@ -305,7 +305,7 @@ export default function shieldsPanelReducer (state: State = { tabs: {}, windows:
     }
     case shieldsPanelTypes.CHANGE_ALL_NO_SCRIPT_SETTINGS: {
       const tabId: number = shieldsPanelState.getActiveTabId(state)
-      state = shieldsPanelState.changeAllNoScriptSettings(state, tabId, action.origin, action.shouldBlock)
+      state = shieldsPanelState.changeAllNoScriptSettings(state, tabId, action.shouldBlock)
       break
     }
   }

components/brave_extension/extension/brave_extension/braveShieldsPanel.html

@@ -7,7 +7,7 @@
         <title>Brave Shields Panel</title>
         <style>
             body {
-              width: 330px;
+              width: 370px;
             }
         </style>
     </head>