Enable CosmeticFilteringJsPerformance by default

[atuchin-m]

The feature was implemented in #25614
Cosmetic in child frames now is enabled by griffin in brave/brave-variations#466
Now the feature should be enabled with the recommended parameters.
Slack thread: https://bravesoftware.slack.com/archives/C01LKMP6X36/p1668103608663869

Steps to verify:

1. Cosmetic filtering should works as before, nothing should be changed. For sites with a lot of DOM changes another algorithm is used, but the results should be the same.
2. Child frames + Speedometer2 score: Enabling/disabling flag BraveAdblockCosmeticFilteringChildFrames shouldn't affect the score on https://browserbench.org/Speedometer2.0/. Pplease take into account that local results will have some deviations.

[LaurenWags]

@atuchin-m

Can you please clarify

1. Cosmetic filtering should works as before, nothing should be changed. For sites with a lot of DOM changes another algorithm is used, but the results should be the same.

from #26861 (comment)? Are there certain tests we should re-run, perhaps from a previous issue? Labelling as QA/Blocked until this is sorted.

cc @kjozwiak @rebron

[atuchin-m]

@LaurenWags
Just to clarify: this PR only enable the fix from #26861.
The original fix changes the algorithm of detection of new elements that should be hidden by cosmetic filters.

As far as I concern we don't have a special test sites set. @pes10k @antonok-edm may be you know?

[atuchin-m]

Also I suggest the following test:

1. add this to brave://adblock custom filters:

##.blocked-class-1
##.blocked-class-2
##.blocked-class-3

2. go to example.com and open dev tools console
3. run this script that creates a bunch of blocked elemets:

function addElements(cls, num) {
  for (let i = 0; i < num; i++) {
    const newDiv = document.createElement("div");
    const newContent = document.createTextNode("Bad ad, should be blocked;" + cls);
    newDiv.appendChild(newContent);
    newDiv.classList.add(cls);
    document.body.appendChild(newDiv);
  }
  console.log('Added ', num, 'elements with class', cls);
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function test() {
  addElements("blocked-class-1", 2000);

  await sleep(2000);
  addElements("blocked-class-2", 2000);

  await sleep(11000);
  addElements("blocked-class-3", 10);
  
  console.log('Done! Scroll to the end to check if there is any visible new element');
}
test()

4. Check if you see added element at the end of the document.
5. Remove added custom rules and repeat steps 2-4.

[LaurenWags]

@atuchin-m so should the result from whether you have the custom rules in above case be the same? Not quite clear on what the expected result is for step 5 when we re-run the case from #26861 (comment) without the added rules.

[atuchin-m]

The added elements simulate some unwanted ads and the custom rules simulate adblock files rules.

So if you have those custom rules them all the added element should be hidden.
If you don't have the rules: they should be visible.

[btlechowski]

Verification passed on

Brave	1.47.115 Chromium: 108.0.5359.94 (Official Build) beta (64-bit)
Revision	713576b895246504ccc6b92c2fb8ce2d60194074-refs/branch-heads/5359_71@{#3}
OS	Ubuntu 18.04 LTS

Cosmetic filtering not enabled - PASS

1. open example.com
2. Open dev tools
3. run the script from Enable CosmeticFilteringJsPerformance by default #26861 (comment)
4. Wait till Done! Scroll to the end to check if there is any visible new element is shown in the console

Verified the dynamically added blocks are not blocked

Cosmetic filtering enabled - PASS

1. add this to brave://adblock custom filters:

##.blocked-class-1
##.blocked-class-2
##.blocked-class-3

1. open example.com
2. Open dev tools
3. run the script from Enable CosmeticFilteringJsPerformance by default #26861 (comment)
4. Wait till Done! Scroll to the end to check if there is any visible new element is shown in the console

Verified the dynamically added blocks are blocked

[MadhaviSeelam]

Verification PASSED

Brave | 1.47.115 Chromium: 108.0.5359.94 (Official Build) beta (64-bit)
-- | --
Revision | 713576b895246504ccc6b92c2fb8ce2d60194074-refs/branch-heads/5359_71@{#3}
OS | Windows 11 Version 21H2 (Build 22000.1219)

Cosmetic filtering not enabled - PASSED

1. install 1.47.115
2. launch Brave
3. open example.com
4. Open dev tools console
5. run the script in step 3 from Enable CosmeticFilteringJsPerformance by default #26861 (comment)
6. Wait till Done! Scroll to the end to check if there is any visible new element is shown in the console

Confirmed the dynamically added blocks are not blocked

ex1	ex2	ex3	ex4

Cosmetic filtering enabled - PASSED

1. continue from Case 1
2. open brave://adblock and add following:

   ##.blocked-class-1
   ##.blocked-class-2
   ##.blocked-class-3
   
3. refresh example.com site
4. Open dev tools
5. run the script in step 3 from Enable CosmeticFilteringJsPerformance by default #26861 (comment)
6. Wait till Done! Scroll to the end to check if there is any visible new element is shown in the console

Confirmed dynamically added blocks are blocked

ex1	ex2

Child frames + Speedometer2 score - PASSED

Verified as #26861 (comment)

1. open brave://flags
2. enable #brave-adblock-cosmetic-filtering-child-frames
3. visit https://browserbench.org/Speedometer2.0/
4. click Start Test

Confirmed little variation in the score when BraveAdblockCosmeticFilteringChildFrames flag enabled/disabled

enabled

ex1	ex2	ex3

disabled

1. open brave://flags
2. disable #brave-adblock-cosmetic-filtering-child-frames
3. visit https://browserbench.org/Speedometer2.0/
4. click Start Test

ex1	ex2	ex3

[stephendonner]

Verified PASSED using

Brave	1.47.123 Chromium: 108.0.5359.99 (Official Build) beta (x86_64)
Revision	410951fc34bb4b2cbf182231f9f779efaafaf682-refs/branch-heads/5359_71@{#9}
OS	macOS Version 13.1 (Build 22C65)

Cosmetic filtering not enabled - PASSED

1. install 1.47.123
2. launch Brave
3. open example.com
4. open dev tools console
5. run the script in step 3 from https://github.com/brave/brave-browser/issues/26861#issuecomment-1335605869
6. wait till Done! Scroll to the end to check if there is any visible new element is shown in the console appears

Confirmed dynamically added elements aren't blocked

example	example	example

Cosmetic filtering enabled - PASSED

continue from Case 1

1. open brave://adblock and add following:
   ##.blocked-class-1
   ##.blocked-class-2
   ##.blocked-class-3
2. refresh example.com site
3. open dev tools
4. run the script in step 3 from https://github.com/brave/brave-browser/issues/26861#issuecomment-1335605869
5. wait till Done! Scroll to the end to check if there is any visible new element is shown in the console message appears

Confirmed dynamically added elements are blocked

example	example

Child frames + Speedometer2 score - PASSED

`Enabled`

1. open brave://flags
2. enable #brave-adblock-cosmetic-filtering-child-frames
3. visit https://browserbench.org/Speedometer2.0/
4. click Start Test

run 1	run 2	run 3

Disabled

1. open brave://flags
2. disable #brave-adblock-cosmetic-filtering-child-frames
3. visit https://browserbench.org/Speedometer2.0/
4. click Start Test

run 1	run 2	run 3

[Uni-verse]

Verified on Samsung Galaxy Tab S7 using the following build(s):

Brave	1.47.168 Chromium: 109.0.5414.87 (Official Build) (64-bit) 
Revision	2dc18eb511c56e012081b4abc9e38c81c885f7d4-refs/branch-heads/5414@{#1241}
OS	Android 12; Build/SP2A.220305.013

Cosmetic filtering enabled

1. open example.com
2. Open dev tools
3. run the script from Enable CosmeticFilteringJsPerformance by default #26861 (comment)
4. Wait till Done! Scroll to the end to check if there is any visible new element is shown in the console

• Verified that dynamically generated elements are blocked

Example	Example

Cosmetic filtering NOT enabled

1. open example.com
2. Open dev tools
3. run the script from Enable CosmeticFilteringJsPerformance by default #26861 (comment)
4. Wait till Done! Scroll to the end to check if there is any visible new element is shown in the console

• Verified that dynamically generated elements are NOT blocked

Speedometer Tests

#brave-adblock-cosmetic-filtering-child-frames Enabled	#brave-adblock-cosmetic-filtering-child-frames Disabled

[Uni-verse]

Verified on Samsung Galaxy S21 using the following build(s):

Brave	1.47.168 Chromium: 109.0.5414.87 (Official Build) (64-bit) 
Revision	2dc18eb511c56e012081b4abc9e38c81c885f7d4-refs/branch-heads/5414@{#1241}
OS	Android 12; Build/SP2A.220305.013

Cosmetic filtering enabled

1. open example.com
2. Open dev tools
3. run the script from Enable CosmeticFilteringJsPerformance by default #26861 (comment)
4. Wait till Done! Scroll to the end to check if there is any visible new element is shown in the console

• Verified that dynamically generated elements are blocked

Example	Example

Cosmetic filtering NOT enabled

1. open example.com
2. Open dev tools
3. run the script from Enable CosmeticFilteringJsPerformance by default #26861 (comment)
4. Wait till Done! Scroll to the end to check if there is any visible new element is shown in the console

• Verified that dynamically generated elements are NOT blocked

Speedometer Tests

#brave-adblock-cosmetic-filtering-child-frames Enabled	#brave-adblock-cosmetic-filtering-child-frames Disabled