Implement new pseudo-class ':others()'

slavaleleka commented 1 year ago

@iSmokeMid69 commented on Thu Feb 09 2023

Issue Details

Ublock Has :others() Operator..Which Keep Only A Selected Element Of A Page And Remove Everything Else..This Is Very Useful For Link Shortener Sites

Details -

subject:others()

Experimental.

Description: Target all elements outside than the currently selected set of elements.
Chainable: Yes.
subject: Can be a plain CSS selector, or a procedural cosmetic filter.
Examples:
    twitter.com##:matches-path(/^/home/) [data-testid="primaryColumn"]:others()
    nature.com##:matches-path(/^/articles//) :is(.c-breadcrumbs,.c-article-main-column):others()

Introduced in uBO 1.41.1b2

For any element feeding into others(), the resultset of the others() operator will include everything else except:

the descendants of a subject element
the ancestors of a subject element

The resultset will contains the siblings of a subject element except when those siblings are either a descendant or ancestor of another subject element.

Though this operator is unlikely to be used in default lists, it opens the door to create specialized filter lists which purpose is some sort of "reader mode", where everything else than a selected set of elements are hidden from view.

Related discussion:

https://www.reddit.com/r/uBlockOrigin/comments/slyjzp/

Proposed solution

No response

Alternative solution

No response

ameshkov commented 1 year ago

Sounds as if it should be handled via rules conversion isn't it?

[data-testid="primaryColumn"]:others() -> :not([data-testid="primaryColumn"])

ameshkov commented 1 year ago

I might be missing something, but :not(selector) seems to be exactly the same thing as selector:others().

As I recall, :not is not fully supported in uBO, maybe that's the reason why a new modifier was required.

MasterKia commented 1 year ago

AFAIK uBO doesn't do :remove() on the elements.

ameshkov commented 1 year ago

I assumed it does from the issue text:

Ublock Has :others() Operator..Which Keep Only A Selected Element Of A Page And Remove Everything Else..This Is Very Useful For Link Shortener Sites

MasterKia commented 1 year ago

I'm sure he meant "hide".

Ublock Has :others() Operator..Which Keep Only A Selected Element Of A Page And ~~Remove~~ Hide Everything Else..This Is Very Useful For Link Shortener Sites

ameshkov commented 1 year ago

Ah, then it's even easier, { remove: true } is not needed.

krystian3w commented 1 year ago

https://github.com/AdguardTeam/ExtendedCss/issues/164#issuecomment-1428507758 / https://github.com/AdguardTeam/ExtendedCss/issues/164#issuecomment-1428557183: :not(bla-bla-car) don't longer hide parents/siblinghood/childs in CSS?

<body>                         <!-- A simple ":not" should not hide me -->

    <p> uneeded text </p>         <!-- it should be hidden due bla-bla-car:others() -->

    <div>                         <!-- A simple ":not" should not hide me -->

        <bla-bla-car> 

            don't hide my parent "div" and "grandparent" body!

            <p> text </p>               <!-- A simple ":not" should not hide me -->

            <div>                       <!-- A simple ":not" should not hide me -->

                <button type="button"> click </button>   <!-- A simple ":not" should not hide me -->

            </div>

        </bla-bla-car>

        <p> uneeded text </p>       <!-- it should be hidden due bla-bla-car:others() -->

    </div>

    <p> uneeded text </p>         <!-- it should be hidden due bla-bla-car:others() -->

</body>

:others() is written to correctly omit hiding the parents (without listing them).

As for me, rewriting to pure CSS would require ~~scanning the entire DOM tree. So that the body and other parents (with younger "family") of each element are listed after the comma(s) in the :not~~ CSS4: https://github.com/AdguardTeam/ExtendedCss/issues/164#CSS4

ameshkov commented 1 year ago

Ah, now it makes perfect sense to me, thank you!

ameshkov commented 1 year ago

Then I guess it can be rewritten this way, right?

[data-testid="primaryColumn"]:others() -> :not(:has([data-testid="primaryColumn"]))

edit: ah, nope, it cannot, won't cover the elements inside [data-testid="primaryColumn"]

u-RraaLL commented 1 year ago

For only showing .TimelineItem (comments here), this would also work on uBO (just like ##.TimelineItem:others()), but doesn't on Adguard (hides everything, even itself).

##:not(.TimelineItem *):not(:has(.TimelineItem *))

slavaleleka commented 1 year ago

not yet sir

BlazeFTL commented 1 year ago

Any progress update on this ?🙃

slavaleleka commented 1 year ago

@BlazeFTL it hasn't been yet planned to be implemented soon

krystian3w commented 1 year ago

With CSS4 should run at page: ```css body :not(.TimelineItem, .TimelineItem *, :has(.TimelineItem)) { display: none !important } /* First protect element, second child, last one 'root'. */ body :not([data-testid="primaryColumn"], [data-testid="primaryColumn"] *, :has([data-testid="primaryColumn"])) { display: none !important } ``` Gaps gone, looks works based on ExtCSS library. It remains to be assessed whether it is worth replacing comma elements to three "`:not`" and how much more resource-intensive it is than the JavaScript version.

In native CSS3 this seems to be the closest:

> https://caniuse.com/css-not-sel-list (Chromium 88+, Firefox 84+, Safari 9+) ```CSS body :not(.TimelineItem, .TimelineItem *, [data-testid="primaryColumn"], [data-testid="primaryColumn"] *) { visibility: hidden !important; /* at own risk in huge DOM tree: padding: 0 !important; margin: 0 !important; height: 0 !important */ } :root [data-testid="primaryColumn"], :root .TimelineItem { visibility: visible !important } ``` with little chance of hiding gaps left by invisible elements.

RraaLL idea is not CSS "selector" (that is procedural selector - works in legacy browsers or with outdated uBo 1.45+ to 1.54 in modern browsers) so do not works in Chrome 105-109 and Firefox 115 as raw CSS (latter I can check in Safari 17.2, Firefox Nightly and Chrome Canary).

Hiding on Chrome 1*-87, Firefox 1*-83, Safari 1*-8 may need (legacy browsers - mostly CSS 2.1):

```CSS :root { visibility: hidden !important } :root [data-testid="primaryColumn"], :root .TimelineItem { visibility: visible !important } ``` (With harder implementation hide gaps).

AdguardTeam / ExtendedCss