Opened on 03/20/2018 at 11:15:19 AM

Closed on 03/16/2019 at 03:37:36 PM

#6504 closed change (fixed)

Implement ElemHideEmulation.useInlineStyles property

Reported by: mjethani Assignee: mjethani
Priority: P3 Milestone:
Module: Core Keywords:
Cc: kzar, hfiguiere, sergz, sebastian Blocked By: #6437
Blocking: #6422 Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Ross Verified working: yes
Review URL(s):

Description (last modified by mjethani)


See description in #6422.

What to change

  1. In lib/content/elemHideEmulation.js, add a useInlineStyles flag, which if set to false should cause ElemHideEmulation to always use a selector rather than the style="..." property on the element
  2. Make necessary optimizations (see #6437)

Hints for testers

Only on Firefox 53+ (see #5090), element hiding emulation should use user style sheets rather than setting the style attribute on the element to be hidden. To check whether this is happening or not, open up the Inspector tab in Developer Tools, click on the element in question, and see if the style attribute has been set to display: none !important (it should not be); also see that in the styles column on the right there is a CSS rule for the element that contains display: none !important, hover over the grey text to see that it starts with data:text/css.

Make sure issues like #6458, #6619, and #6680 don't exist and that element hiding emulation works correctly in general as well as with dynamic updates to the DOM and dynamic addition of style sheets.

The change here has been reverted. As of the latest update, element hiding emulation should use the style="display: none !important" technique to hide elements, even on Firefox. Please make sure that this is the case.


We made changes to use style sheets for element hiding emulation, and then we backtracked after realizing that tabs.removeCSS is unlikely to make it to Chromium anytime soon (Chromium bug #608854) for reasons unknown. We realize that it is not necessary to use style sheets for element hiding emulation, at least for now. We might explore this idea in the future should Chromium include support for style sheet removal.

Attachments (0)

Change History (16)

comment:1 Changed on 03/20/2018 at 11:25:42 AM by mjethani

In addition to all of the general optimizations I am proposing for #6437, there is one specific optimization for user style sheets here. Once we have the list of DOM mutations, we can efficiently recompute the CSS selectors for the hidden elements without having to traverse the DOM again.

comment:2 Changed on 03/20/2018 at 11:26:23 AM by mjethani

  • Cc kzar hfiguiere sergz sebastian added

comment:3 Changed on 03/20/2018 at 01:11:19 PM by mjethani

  • Owner set to mjethani
  • Review URL(s) modified (diff)

comment:4 Changed on 03/20/2018 at 01:11:43 PM by mjethani

  • Status changed from new to reviewing

comment:5 Changed on 03/20/2018 at 01:39:31 PM by abpbot

A commit referencing this issue has landed:
Issue 6504 - Add useInlineStyles flag to ElemHideEmulation

comment:6 Changed on 03/21/2018 at 03:37:47 PM by mjethani

  • Review URL(s) modified (diff)

comment:7 Changed on 06/12/2018 at 07:57:41 AM by mjethani

A gentle reminder to all involved that the first patch is no good without the second patch; if we don't land the second one, we'll just have to roll back the first one when someone reports an issue with the wrong elements being hidden.

@hfiguiere has asked me to make it asynchronous so I'm going to give this one more shot.

comment:8 Changed on 08/04/2018 at 12:26:35 PM by mjethani

  • Description modified (diff)
  • Priority changed from Unknown to P3
  • Ready set

comment:9 Changed on 08/04/2018 at 12:37:33 PM by mjethani

There are two reasons why we still cannot use user style sheets for element hiding emulation without compromising on performance. The first one is #6446.

The second one is this comment in lib/content/elemHideEmulation.js:

// Ignore mutation targets when using style sheets, because we may have
// to update all the CSS selectors.
if (!this.useInlineStyles)
  evaluationTargets = null;

We are skipping the optimization introduced in #6437 when user style sheets are being used. Patch #29728690 would fix this, but it will take a while to land it and we have to focus on other things right now.

For now, I am going to make a change to lib/content/elemHideEmulation.js so that we never use user style sheets.

comment:10 Changed on 08/04/2018 at 12:50:09 PM by mjethani

  • Review URL(s) modified (diff)

comment:11 Changed on 08/15/2018 at 12:21:24 PM by abpbot

A commit referencing this issue has landed:
Issue 6504 - Remove useInlineStyles for now

comment:12 Changed on 08/28/2018 at 08:17:16 AM by mjethani

  • Description modified (diff)

comment:13 Changed on 09/29/2018 at 01:53:19 AM by abpbot

comment:14 Changed on 10/24/2018 at 08:00:11 AM by Ross

  • Tester changed from Unknown to Ross
  • Verified working set

Element hiding emulation filters set style="display: none !important" as expected.

Firefox 62 / 51 / Windows 10
Chrome 69 / 49 / Windows 10
Opera 56 / 36 / Windows 10

comment:15 Changed on 02/07/2019 at 03:23:27 AM by abpbot

comment:16 Changed on 03/16/2019 at 03:37:36 PM by mjethani

  • Description modified (diff)
  • Resolution set to fixed
  • Status changed from reviewing to closed

Add Comment

Modify Ticket

Change Properties
as closed .
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from mjethani.
Note: See TracTickets for help on using tickets.