1445171 - rules not showing in inspector

Status: RESOLVED WONTFIX

(DevTools :: Inspector: Rules, defect)

Description

[gael.poupard]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180312220041

Steps to reproduce:

On any webpage, inspect any element.


Actual results:

Nothing is showing up in CSS rules inspector, until I resize devTools manually (not working every time).


Expected results:

CSS rules should show up directly.

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Thanks for the report!

Could you provide more details, such as:

* How are you starting inspection?  Right-click, inspect element, or something else?
* Is the behavior different if the Inspector is already open before choosing an element?
* Can you check the Browser Console[1] to see if any errors are shown while doing this?

[1]: https://developer.mozilla.org/en-US/docs/Tools/Browser_Console

Comment 2

[gael.poupard]

Hi, thanks for replying!

I tried both right-click and inspect tool: same behaviour.

As far as I can tell, there's no difference if the inspector is already opened or if I opened it by inspecting an element directly. the only thing I notice is that *sometimes* the pseudo-elements part shows up directly, and *somùetimes* it only shows up a little moment before element styles.

Watching browser console, I have plenty of errors / warnings. I'm attaching screenshots for details, but here's a summary:
* on browser console opening, 4 exceptions thrown in ThreadSafeDevToolsUtils.js:88:5 (in fact, 2 exceptions, thrown twice);
* trying to inspect element,:
  * multiple TypeError: aBrowser is null, in ZoomUI.jsm:68:7;
  * unsafe node removed from ColorWidget.js;
  * this.colorSelect is null in utils.js:121:3;


And then it seems to repeat a bit.

I also tried in private mode, and without add-ons, but I don't see any improvement.

How might I help more?

Comment 3

[gael.poupard]

Attachment: Capture d’écran de 2018-03-16 09-39-31.png

Screenshot from Browser Console (1)

Comment 4

[gael.poupard]

Attachment: Capture d’écran de 2018-03-16 09-39-50.png

Screenshot from Browser Console (2)

Comment 5

[gael.poupard]

Attachment: Capture d’écran de 2018-03-16 09-39-39.png

Screenshot from Browser Console (3)

Comment 6

[gael.poupard]

Attachment: Capture d’écran de 2018-03-16 09-40-23.png

Screenshot from Browser Console (4)

Comment 7

[Patrick Brosset <:pbro>]

Thank you Gael for these screenshots. Looking at the error, it looks like this is because of the colorWidget failing to initialize correctly.

It looks like in initializeColorWidget (in devtools\client\shared\widgets\ColorWidget.js), we create some markup, insert it into devtools using innerHMTL, and then we query some elements from this markup:
this.colorSelect = this.element.querySelector(".colorwidget-select");

And the error seems to be that this.colorSelect is null, because the element can't be found in the DOM.

Looking at the screenshot again, I can see: "Removing unsafe node" in there, which is coming from this code:
https://searchfox.org/mozilla-central/rev/6e96a3f1e44e286ddae5fdafab737709741d237a/dom/base/nsTreeSanitizer.cpp#1432

freddyb, I think maybe you can help shade some light here. I have a feeling this might be related to what we have been talking about lately related to innerHTML.

Comment 8

[Frederik Braun [:freddy]]

Ah sorry. It looks like bug 1433929 broke it and we didn't catch it in tests :/
Your innerHTML assignment is stripped by the autosanitizer.
We drop form elements, scripting, inline event handlers for all innerHTML assignments.

You'll have to rewrite the code[1] using DOM APIs like document.createElement.
All APIS that turns a string into HTML, will drop form elements.

I realize the code won't be pretty and harder to maintain and I don't have a great solution for you, except doing innerHTML first and then adding form elements manually.
If it helps you at all, you might look at my tool "html2dom" that turns HTML into back into JS code (but it's not ideal for large chunks of HTML like this case)

[1] https://searchfox.org/mozilla-central/rev/6e96a3f1e44e286ddae5fdafab737709741d237a/devtools/client/shared/widgets/ColorWidget.js#290-308
[2] https://freddyb.github.io/html2dom/

Comment 9

[Patrick Brosset <:pbro>]

Thanks a lot freddyb! Looks like we didn't have any test coverage on this, otherwise we would have noticed it when working on bug 1433929.
Looking at the code more closely, this is actually a feature that is OFF by default, which is why no one else noticed (I would have expected a lot of people to notice that the inspector was broken).

So, you can fix this by turning devtools.inspector.colorWidget.enabled to false in about:config and restarting Firefox!
Gael, try this and let me know if it worked for you.

Based on the fact that no one is working on this new color widget feature at the moment, and that it was never finished, I am tempted to close this as WONTFIX.

But feel free to let me know why you were using this new colorpicker.

Comment 10

[gael.poupard]

It works \o/

Thanks a lot! 
I'm not using the new color picker so I don't need a fix for this.

Comment 11

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Should we remove the code then, if we don't intend to fix it?  It's hard to know who else might hit a similar issue to the reporter with this pref flipped...

Comment 12

[Patrick Brosset <:pbro>]

Yup, tracked in bug 1446316.