1288930 - CSS Rules Inspector display is not updated for focus change

Status: NEW

(DevTools :: Inspector: Rules, defect, P2)

Description

[teo8976]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

Steps to reproduce:

Visit http://output.jsbin.com/nafoyo/#

click on the text link.


Actual results:

I notice the horrible default outline as per bug 1288927.

So, I right-click and inspect element to see what is the user agent stylesheet rule that creates this horrible default outline, so that I can override it in my CSS.

However, the style inspector, even checking the "browser styles" checkbox, show this:
  outline-style: none; 
  outline-width: 0px;

so, this is inconsistent with reality and I can't figure out what the rule is.


Expected results:

The information shown in the style inspector should correspond to reality.

Comment 1

[Tooru Fujisawa [:arai]]

looks like, it's because the CSS Rules Inspector is not updated for focus change (or perhaps all pseudo-classes change?)

The scenario is following:

  1. when you click the link, it gains the focus, and *:-moz-focusring rule [1] is applied and outline is set to "1px dotted"
  2. when you focus the CSS Rules Inspector, the link looses the focus, and outline is set to "0px none"
  3. checking the "browser styles" shows outline as "0px none"
  4. when you focus again the link, CSS Rules Inspector display is not updated, and remains "0px none", here the inconsistency happens 

[1] https://dxr.mozilla.org/mozilla-central/rev/4c05938a64a7fde3ac2d7f4493aee1c5f2ad8a0a/layout/style/res/html.css#709

Comment 2

[Tooru Fujisawa [:arai]]

Attachment: CSS Rules Inspector test for focus ring

here's a testcase that visualizes the issue related to update timing.

The page changes the link's opacity style by JavaScript, every 5 seconds.
The outline style is not updated when the link gains or looses the focus, but updated when opacity is changed by JavaScript.

Comment 3

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 4

[Ariel Burone]

Attachment: Expanded the examples of failure

The bug is not only for link.
As far as I can see, the inspector won't show any update until js updates something.
Added a paragraph with :hover color and the style change isn't reflected on the inspector until js updates.

Same if you change something from the style editor.

Can I claim this bug?

Comment 5

[Patrick Brosset <:pbro>]

Yes of course, let us know here on the bug if you have any questions about how to get started! I'll assign the bug to you know.
Feel free to use the "need more info" drop down at the bottom to ping me, or :gl, :miker, :rcaliman if you need anything.

Comment 6

[Patrick Brosset <:pbro>]

2 months with no updates, resetting the assignee field here. Feel free to pick up again if you do intend to work on it after all.