Opened 5 years ago

Closed 5 years ago

Last modified 21 months ago

#1844 closed defect (rejected)

Element hiding filters don't match if they reference root node

Reported by: greiner Assignee:
Priority: P3 Milestone:
Module: Platform Keywords:
Cc: sebastian, trev, mjethani Blocked By:
Blocking: Platform: Chrome
Ready: no Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

Description

Environment

Ubuntu 14.04
Chrome 39

How to reproduce

  1. Add filter youtube.com##:root[data-player-size] #masthead-positioner to hide the YouTube header element only on the video pages
  2. Go to a YouTube video page (e.g. https://www.youtube.com/watch?v=TEPq4xFGzG0)

Observed behaviour

YouTube header is shown.
This is because on Chrome/Opera/Safari the filter is converted into the selector ::content :root[data-player-size] #masthead-positioner. This selector is equivalent to html html[data-player-size] #masthead-positioner and therefore doesn't match.

Expected behaviour

YouTube header is hidden.

Change History (5)

comment:1 Changed 5 years ago by sebastian

  • Blocked By 1802 added
  • Owner set to sebastian
  • Priority changed from Unknown to P3
  • Ready set

comment:2 Changed 5 years ago by sebastian

  • Blocked By 1802 removed
  • Cc sebastian added
  • Owner sebastian deleted
  • Ready unset

Selector conversion

In order to match the element in the light DOM, the shadow root was created for, you have to use the :host() selector. In order to match it's descendants in the light DOM you have to use the ::content pseudo-element. Those can be combined, but it's non-trivial, and will slow down page load, not only on pages where the root element must be considered for element hiding.

For example:

:root[data-player-size] #masthead-positioner

Needs to be convert to (this requires parsing the selector):

:host([data-player-size]) ::content #masthead-positioner

But the selector might as well end after matching the root element:

:root[data-player-size]

In this case, we must not add the ::content pseudo-element:

:host([data-player-size])

And now it gets really funny. If the first element might be the root element or any other element:

*[data-player-size] #masthead-positioner

We have to expand it into two selectors:

:host([data-player-size]) ::content #masthead-positioner
::content *[data-player-size] #masthead-positioner

Skipping shadow DOM

First I thought we could maybe just insert the stylesheet in the light DOM, if one of the selectors might match the root element. But it turned out that this effectively means to not use shadow DOM anywhere, since all of the following selectors matches or might match the root element:

:root
html
*
:not(div)
.any-class
#any-id
[foo=bar]

Conclusion

Fixing this issue will be fairly complicated, and probably not worth it, at least as long as there aren't any issues with popular filters lists on real websites that can't be worked around in a diffrent way. But for now it seems that fixing this issue will lead to more problems than it solves.

comment:3 Changed 5 years ago by greiner

  • Resolution set to rejected
  • Status changed from new to closed

Those are all valid points. I'm resolving this issue as "rejected" for now. In case it becomes necessary at some point to target the root node we can reopen it again.

comment:4 Changed 5 years ago by trev

  • Cc trev added
  • Platform changed from Unknown to Chrome

comment:5 Changed 21 months ago by mjethani

  • Cc mjethani added
  • Tester set to Unknown
  • Verified working unset
Note: See TracTickets for help on using tickets.