Closed
Bug 1235603
Opened 8 years ago
Closed 8 years ago
Developer Edition: CSS Rules Inspector is blank until I type something in Filter Styles box
Categories
(DevTools :: Inspector: Rules, defect, P1)
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)
Comment 1•8 years ago
|
||
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)
Comment 3•8 years ago
|
||
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]
Assignee | ||
Comment 4•8 years ago
|
||
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•8 years ago
|
||
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 | ||
Updated•8 years ago
|
Assignee: nobody → ttromey
Status: NEW → ASSIGNED
Assignee | ||
Comment 6•8 years ago
|
||
Review commit: https://reviewboard.mozilla.org/r/46093/diff/#index_header See other reviews: https://reviewboard.mozilla.org/r/46093/
Attachment #8740948 -
Flags: review?(pbrosset)
Comment 7•8 years ago
|
||
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+
Assignee | ||
Comment 8•8 years ago
|
||
https://treeherder.mozilla.org/#/jobs?repo=try&revision=0f272bdbf040269991758bec37fedf5fb6aafb42
Assignee | ||
Updated•8 years ago
|
Keywords: checkin-needed
Comment 10•8 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/7cee6f0b4709
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
status-firefox48:
--- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 48
Comment 11•8 years ago
|
||
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]
Updated•6 years ago
|
Product: Firefox → DevTools
Comment 12•6 years ago
|
||
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•6 years ago
|
||
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.
Description
•