1235603 - Developer Edition: CSS Rules Inspector is blank until I type something in Filter Styles box

Status: RESOLVED FIXED

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

Description

[pmccoy]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36

Steps to reproduce:

Right-clicked on DOM element
Selected 'Inspect Element'



Actual results:

Inspector opened with correct element highlighted
Rules pane in the sidebar was blank
Typed a letter in 'Filter Styles'
Appropriate style rules appeared in Rules pane for the highlighted element
Clicked the 'X' to clear the 'Filter Styles' box
Appropriate style rules remained in Rules pane for the highlighted element


Expected results:

Inspector should open with correct element highlighted
Rules pane should be populated with the styles that are applied to the highlighted element (i.e. no need to type anything in the 'Filter Styles' box)

Comment 1

[Patrick Brosset <:pbro>]

Sorry about getting to this bug really late. It looks like a really major problem, but I can't reproduce it unfortunately. 
Can you try again? If it still occurs to you, can you please provide detailed steps to reproduce? Maybe it only occurs on one particular web page? Maybe with one particular Firefox version. Did you try with a new empty profile? Finally, if it occurs to you again, can you check if there were JS errors in the browser console (ctrl+shift+J)?

Comment 2

[pmccoy]

Using Firefox Developer Edition 47.0a2 (2016-04-11)

Go to http://ragbrai.com
right-click on any element on the page and select 'Inspect element'
I don't see where to create a new empty profile.

Comment 3

[Patrick Brosset <:pbro>]

Thanks for the test case. I can reproduce the issue now.

After a bit of investigation, it looks like one of the stylesheets on the site is malformed, and that causes the rule-view to fail.

The following file:
http://ragbrai.com/wp-content/themes/ragbrai/style.css

contains the following text around line 60:

body {
	background: #fff;
	font-family: sans-serif;
	url(display-table.min.htc);
}

As you can see, the 3rd line has no property name.

I'm surprised that this would cause the rule-view to fail like this, when we worked on displaying authored-styles, a lot of time was spent checking that incomplete properties would work correctly.
Nevertheless, it looks like the code in devtools\client\inspector\rules\models\element-style.js that access a textProp.computed array fails in the case where computed isn't there at all.
I think the server does the right thing here, so it should be a client-side only fix, and a test should be added.

Comment 4

[Tom Tromey :tromey]

It's easy to avoid the error with, for instance, the patch below.
I think the question is how we want the rule view to act when there
is an invalid parse like this.

diff --git a/devtools/client/inspector/rules/models/rule.js b/devtools/client/inspector/rules/models/rule.js
index 8afd88a..04ec192 100644
--- a/devtools/client/inspector/rules/models/rule.js
+++ b/devtools/client/inspector/rules/models/rule.js
@@ -436,6 +436,9 @@ Rule.prototype = {
     let props = parseDeclarations(this.style.authoredText, true);
     for (let prop of props) {
       let name = prop.name;
+      if (!name) {
+        continue;
+      }
       // In an inherited rule, we only show inherited properties.
       // However, we must keep all properties in order for rule
       // rewriting to work properly.  So, compute the "invisible"

Comment 5

[Patrick Brosset <:pbro>]

I think we want the declaration(s) that ended up in an invalid parse to not be displayed at all at the moment. We don't have a good way of displaying them in the rule-view right now, we only support displaying name:value pairs (even if the name and/or value is invalid, as long as they're both present).
So if I'm understanding the code change in comment 4 right, I think that would be what we need.

Comment 6

[Tom Tromey :tromey]

Attachment: MozReview Request: Bug 1235603 - handle invalid authored CSS in rule view; r?pbro

Review commit: https://reviewboard.mozilla.org/r/46093/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/46093/

Comment 7

[Patrick Brosset <:pbro>]

Comment on attachment 8740948 [details]
MozReview Request: Bug 1235603 - handle invalid authored CSS in rule view; r?pbro

https://reviewboard.mozilla.org/r/46093/#review42917

Comment 8

[Tom Tromey :tromey]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=0f272bdbf040269991758bec37fedf5fb6aafb42

Comment 9

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/7cee6f0b4709

Comment 10

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/7cee6f0b4709

Comment 11

[Tanvir Rahman]

I have reproduced this bug with aurora 47.0a2 (2016-04-11) on Windows 10, 64 bit!

The Bug's fix is now verified on Latest Beta 48.0b6

Build ID 	20160706215822
User Agent 	Mozilla/5.0 (Windows NT 10.0; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0

[bugday-20160713]

Comment 12

[Tom]

Using Firefox Developer Edition 
aurora update channel
63.0b4 (64-bit)
macOS High Sierra
10.13.6

Initially FireFox DE displays styles, and this it stops. 
Rules: No element selected

Restart browser and it works again.

Comment 13

[Tom]

Using Firefox Developer Edition 
aurora update channel
63.0b4 (64-bit)
macOS High Sierra
10.13.6

Initially FireFox DE displays styles, and then it stops. 
Rules: No element selected

Restart browser and it works again.