950097 - [ruleview] Existing styles not able to be disabled or modified on stylesheets loaded via @import

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Brian Grinstead [:bgrins]]

There are a bunch of things related to the rule view failing on this page: http://alarecherchedutempsperdu.org/.

When trying to modify a property in the rule view, it doesn't work, and I see this error: 

console.error: 
  Message: TypeError: this.rawRule.parentStyleSheet.ownerNode is null
  Stack:
    StyleRuleActor<.modifyProperties<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/styles.js:672
actorProto/</handler@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/protocol.js:906
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1013
@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transport.js:258
@resource://gre/modules/devtools/DevToolsUtils.jsm -> resource://gre/modules/devtools/DevToolsUtils.js:75

StyleRuleActor<.modifyProperties<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/styles.js:672
actorProto/</handler@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/protocol.js:906
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1013
@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transport.js:258
@resource://gre/modules/devtools/DevToolsUtils.jsm -> resource://gre/modules/devtools/DevToolsUtils.js:75


Another (probably related) problem is that certain properties become reenabled after a page resize.  STR:
* Open http://alarecherchedutempsperdu.org/
* Inspect an element
* Untick one of the properties in the ruleview
* Resize the page

The property becomes reenabled after resizing the page (which causes the ruleview to refresh).  If you select another node and come back, you will see multiple copies of the rule next to each other.

Comment 1

[Brian Grinstead [:bgrins]]

Adding new properties (and modifying them) seems to work, but the error happens when disabling or modifying existing ones.

STR for modifying problem:

* Open http://alarecherchedutempsperdu.org/
* Inspect the body
* Change color: rgb(0, 0, 0) to color: red

Notice that nothing changes (but the ruleview shows that it changed).  Now if you add a new 'color: red' to the element itself the text on the page changes.

Comment 2

[Brian Grinstead [:bgrins]]

Note: this seems to also be a problem on 27.0a2 (2013-12-09).

Comment 3

[Brian Grinstead [:bgrins]]

Looking at the source of the page, I see that the CSS files are loaded with @import:

<style type="text/css" media="all">@import url("http://alarecherchedutempsperdu.org/themes/bartik/css/layout.css?mv49gj");
@import url("http://alarecherchedutempsperdu.org/themes/bartik/css/style.css?mv49gj");
@import url("http://alarecherchedutempsperdu.org/sites/default/files/color/bartik-45f113ee/colors.css?mv49gj");</style>

A quick demo loading just a few of the CSS files seems to confirm this: http://jsbin.com/eYEqEQI/2/edit

Comment 4

[Brian Grinstead [:bgrins]]

Attachment: ruleview-imported-sheet.patch

This patch fixes the problem on the example page by setting parentStyleSheet to the ownerRule's parentStyleSheet if the ownerRule is an import rule.  Still need to add a test and also check multiple levels of @import commands / @import commands coming from external sheets.

Comment 5

[Brian Grinstead [:bgrins]]

Attachment: ruleview-imported-sheet.patch

Paul,
I see that this code in styles.js was originally added for Bug 920509, so I'm wondering if you can review this.  I'm looping while there is a Ci.nsIDOMCSSImportRule as the ownerRule and setting the parentStyleSheet object to support imported sheets.  I've also modified the existing style inspector test that is checking imported sheets to make sure this is working.

Comment 6

[Brian Grinstead [:bgrins]]

Pushed to try: https://tbpl.mozilla.org/?tree=Try&rev=42bd4ae7f132

Comment 7

[Brian Grinstead [:bgrins]]

https://hg.mozilla.org/integration/fx-team/rev/eca72af01ab2
https://tbpl.mozilla.org/?tree=Fx-Team&rev=eca72af01ab2

Comment 8

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/eca72af01ab2

Comment 9

[fabrice.natario]

(In reply to Ryan VanderMeulen [:RyanVM UTC-4] from comment #8)
> https://hg.mozilla.org/mozilla-central/rev/eca72af01ab2

Hi,
i have this issue on my website with an imported css, how i can apply your patch ? where i need to add the file, or the code ?

Please help

Comment 10

[Brian Grinstead [:bgrins]]

This hasn't made it to the release version of Firefox yet (it has landed for version 29).  If you download Firefox Beta or Aurora you should see the imported CSS.