Show cosmetic rules in the filtering log

[ameshkov]

The idea is to collect cosmetic rules and show them in the filtering log.

Here's how it can be done:

1. We need to add some kind of a "cosmetic rules hits collector" to the content script.
2. It must be disabled by default (unless filtering log is opened).
3. Once it is opened, hits collector should start scanning DOM elements and detect elements hidden by AG.

For scriptlet rules we could rely on hit() calls.

The task is partly implemented since CoreLibs v1.12, but there're issues that need to be resolved before we announce it publicly.

• Extended CSS rules are not reported to console (try example.org#?#body)

• Add a log entry that explains that the content script is in verbose mode:

  console.log('[AdGuard] AdGuard operates in verbose mode due to Filtering Log being open. It will print more information to console.')
  

• Improve the content script logging format so that it was possible to navigate directly to the DOM element that was affected by the rule:

  console.log(
      `[AdGuard] Filter ${filterID}: %c${ruleText}%c: `, 
      'font-weight: bold;', // style for ${ruleText}
      '', // reset style
      element
  );
  

• Improve the way scriptlets report hits, instead of this:

          prefix += `#%#//scriptlet('${source.name}', '${source.args.join(', ')}')`;
  
          log(`${prefix} trace start`);
          if (trace) {
              trace();
          }
          log(`${prefix} trace end`);
  

  Use something like this:

          label = `[AdGuard] ${prefix}#%#//scriptlet('${source.name}', '${source.args.join(', ')}')`;
  
          if (trace) {
              trace(label);
          }
  

[piquark6046]

I think that integrating with AdGuard Assistant web browser extension and using localStorage (or cookie) API helps the issue to resolve.