Add scriptlets remove-class and alert-buster-silent

[Crystal-RainSlide]

Prerequisites

• I verified that this is not a filter issue
  • Filter issues MUST be reported at filter issue tracker
• This is not a support issue or a question
  • Support issues and questions are handled at /r/uBlockOrigin
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue
  • Your issue may already be reported.
• I tried to reproduce the issue when...
  • uBlock Origin is the only extension
  • uBlock Origin with default lists/settings
  • using a new, unmodified browser profile
• I am running the latest version of uBlock Origin
• I checked the documentation to understand that the issue I report is not a normal behavior

Description

On wikiHow, there is a class called hasad, and when the ad is blocked, this class causes some small issues on the appearance of the page.

Writing UserStyle or :style rules helps, but remove those class works once for all. So, I hope there is a remove-class scriptlet to deal with what remove-attr can't do.

alert-buster-slient is less important. Maybe it's +js(alert-buster, slient), maybe there will be a scriptlet which can handle alart(), confirm() and prompt().

A specific URL where the issue occurs

https://www.wikihow.com/Prevent-Coronavirus

Steps to Reproduce

N/A

Expected behavior:

hasad can be removed by something succinct.

Actual behavior:

Have to use this:

// ==UserScript==
// @name              Remove class
// @namespace         RainSlide
// @icon              https://*.wikihow.com/*
// @version           1.0
// @grant             none
// @run-at            document-idle
// ==/UserScript==
document.querySelectorAll('.hasad').forEach(
  hasad => hasad.classList.remove("hasad")
);

Your environment

• uBlock Origin version: v1.25.0
• Browser Name and version: Firefox 73
• Operating System and version: Windows 10

[uBlock-user]

this class causes some small issues on the appearance of the page.

What kind of issue ? I tested with my remove-class scriptlet, I see no change in appearance whatsoever.

[Crystal-RainSlide]

@uBlock-user Tiny issue maybe. #intro has this style rule on it:

#intro.hasad {
	padding-bottom: 0px;
	border-bottom: 0;
}

Before:

After:

Mainly I just can tell that, on other sites, this can be a real punch.

[uBlock-user]

Some padding appears at the bottom border ?

Edit: I see the border getting cut out in presence of class .hasad but after removal, bottom border doesn't get cut.

About dialogs: did you tried set-constant?

[Crystal-RainSlide]

Some padding appears at the bottom border ?

Edit: I see the border getting cut out in presence of class .hasad but after removal, bottom border doesn't get cut.

Does it have any border? 🤔

[Crystal-RainSlide]

About dialogs: did you tried set-constant?

set-constant only works on JavaScript properties, it can't touch HTML, HTML attributes or CSS.

[Crystal-RainSlide]

My own implementation to remove-class based on remove-attr.js and Element.classList, not very tested because I don't know how do {{1}} {{2}} works, but every part I modified should behave:

(function() {
    const token = '{{1}}';
    if ( token === '' || token === '{{1}}' ) { return; }
    const tokens = token.split(/\s*\|\s*/);
    let selector = '{{2}}';
    if ( selector === '' || selector === '{{2}}' ) {
        selector = `.${tokens.join(',.')}`;
    }
    const rmclass = function(ev) {
        if ( ev ) {
            window.removeEventListener(ev.type, rmclass, true);
        }
        try {
            const nodes = document.querySelectorAll(selector);
            for ( const node of nodes ) {
                node.classList.remove(...tokens);
            }
        } catch(ex) {
        }
    };
    if ( document.readyState === 'loading' ) {
        window.addEventListener('DOMContentLoaded', rmclass, true);
    } else {
        rmclass();
    }
})();