Element picker

components/brave_extension/extension/brave_extension/BUILD.gn

@@ -25,6 +25,10 @@ transpile_web_ui("brave_extension") {
       "content_cosmetic",
       rebase_path("content_cosmetic.ts"),
     ],
+    [
+      "content_element_picker",
+      rebase_path("content_element_picker.ts"),
+    ],
     [
       "webstore",
       rebase_path("webstore.ts"),

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

@@ -179,6 +179,10 @@
     "message": "Manage custom filters",
     "description": "Message for context menu that opens a page for adding, editing, and removing custom cosmetic filters"
   },
+  "elementPickerMode": {
+    "message": "Enter element picker mode",
+    "description": "Message for context menu that enables the element picker UI on the page."
+  },
   "advancedView": {
     "message": "Advanced View",
     "description": "Message for the advanced view option"

components/brave_extension/extension/brave_extension/background/events/cosmeticFilterEvents.ts

@@ -7,6 +7,21 @@ export let rule = {
   selector: ''
 }
 
+const applyCosmeticFilter = (host: string, selector: string) => {
+  if (selector) {
+    const s: string = selector.trim()
+
+    if (s.length > 0) {
+      chrome.tabs.insertCSS({
+        code: `${s} {display: none !important;}`,
+        cssOrigin: 'user'
+      })
+
+      addSiteCosmeticFilter(host, s)
+    }
+  }
+}
+
 // parent menu
 chrome.contextMenus.create({
   title: 'Brave',
@@ -26,6 +41,12 @@ chrome.contextMenus.create({
   parentId: 'brave',
   contexts: ['all']
 })
+chrome.contextMenus.create({
+  title: getLocale('elementPickerMode'),
+  id: 'elementPickerMode',
+  parentId: 'brave',
+  contexts: ['all']
+})
 // context menu listener emit event -> query -> tabsCallback -> onSelectorReturned
 
 chrome.contextMenus.onClicked.addListener((info: chrome.contextMenus.OnClickData, tab: chrome.tabs.Tab) => {
@@ -70,6 +91,12 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
         break
       }
       shieldsPanelActions.contentScriptsLoaded(tabId, frameId, url)
+      break
+    }
+    case 'cosmeticFilterCreate': {
+      const { host, selector } = msg
+      applyCosmeticFilter(host, selector)
+      break
     }
   }
 })
@@ -82,6 +109,14 @@ export function onContextMenuClicked (info: chrome.contextMenus.OnClickData, tab
     case 'manageCustomFilters':
       openFilterManagementPage()
       break
+    case 'elementPickerMode': {
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs: [chrome.tabs.Tab]) => {
+        if (tabs.length > 0) {
+          chrome.tabs.sendMessage(tabs[0].id!, { type: 'elementPickerLaunch' })
+        }
+      })
+      break
+    }
     default: {
       console.warn('[cosmeticFilterEvents] invalid context menu option: ${info.menuItemId}')
     }
@@ -105,16 +140,5 @@ export function onSelectorReturned (response: any) {
     rule.selector = window.prompt('CSS selector:', `${response}`) || ''
   }
 
-  if (rule.selector) {
-    const selector: string = rule.selector.trim()
-
-    if (selector.length > 0) {
-      chrome.tabs.insertCSS({
-        code: `${selector} {display: none !important;}`,
-        cssOrigin: 'user'
-      })
-
-      addSiteCosmeticFilter(rule.host, selector)
-    }
-  }
+  applyCosmeticFilter(rule.host, rule.selector)
 }

components/brave_extension/extension/brave_extension/content_cosmetic.ts

@@ -95,6 +95,7 @@ const isHTMLElement = (node: Node): boolean => {
   return ('innerText' in node)
 }
 
+// @ts-ignore unused function
 const asHTMLElement = (node: Node): HTMLElement | null => {
   return isHTMLElement(node) ? node as HTMLElement : null
 }