Closed Bug 1235603 Opened 4 years ago Closed 4 years ago

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

Categories

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

45 Branch
defect

Tracking

(firefox48 fixed)

RESOLVED FIXED
Firefox 48
Tracking Status
firefox48 --- fixed

People

(Reporter: pmccoy, Assigned: tromey)

References

Details

(Whiteboard: [btpp-fix-now])

Attachments

(1 file)

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)
Component: Untriaged → Developer Tools: CSS Rules Inspector
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)?
Flags: needinfo?(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.
Flags: needinfo?(pmccoy)
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.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P1
Whiteboard: [btpp-fix-now]
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"
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.
Assignee: nobody → ttromey
Status: NEW → ASSIGNED
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
Attachment #8740948 - Flags: review?(pbrosset) → review+
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/7cee6f0b4709
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 48
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]
Depends on: 1328016
Product: Firefox → DevTools
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.
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.
You need to log in before you can comment on or make changes to this bug.