adaptations of @Snuupy's MutationObserver work

mutation observer applied only if rule exists

notes

change order

mutation observer WIP

browser tests

isIdempotent

isIdempotent

mutation observer

mutationObserver

mutation observer

mutationObserver

mutation observer commented

mutation observer for anton

cleanup comments

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

@@ -22,7 +22,7 @@ export const removeSiteFilter = (origin: string) => {
   })
 }
 
-export const applySiteFilters = (tabId: number, hostname: string) => {
+export const applyCSSCosmeticFilters = (tabId: number, hostname: string) => {
   chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
     if (!storeData.cosmeticFilterList) {
       if (process.env.NODE_ENV === 'shields_development') {

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

@@ -33,7 +33,7 @@ import {
   reportBrokenSite
 } from '../api/shieldsAPI'
 import { reloadTab } from '../api/tabsAPI'
-import { applySiteFilters } from '../api/cosmeticFilterAPI'
+import { applyCSSCosmeticFilters } from '../api/cosmeticFilterAPI'
 
 // Helpers
 import { getAllowedScriptsOrigins } from '../../helpers/noScriptUtils'
@@ -58,7 +58,7 @@ export default function shieldsPanelReducer (
         state = shieldsPanelState.resetBlockingResources(state, action.tabId)
         state = noScriptState.resetNoScriptInfo(state, action.tabId, new window.URL(action.url).origin)
       }
-      applySiteFilters(action.tabId, getHostname(action.url))
+      applyCSSCosmeticFilters(action.tabId, getHostname(action.url))
       break
     }
     case windowTypes.WINDOW_REMOVED: {

components/brave_extension/extension/brave_extension/content.ts

@@ -1,10 +1,25 @@
 const unique = require('unique-selector').default
+
 let target: EventTarget | null
 
 function getCurrentURL () {
   return window.location.hostname
 }
 
+/*function applyCosmeticFilterMutationObserver (filterList: any) {
+  let targetNode = document.documentElement
+  let observer = new MutationObserver(function (mutations) {
+    console.log('mutation observed')
+    injectIncrementalStyles(mutations)
+  })
+  let observerConfig = {
+    childList: true,
+    subtree: true
+    // characterData: true
+  }
+  observer.observe(targetNode, observerConfig)
+}*/
+
 document.addEventListener('contextmenu', (event) => {
   // send host and store target
   // `target` needed for when background page handles `addBlockElement`