How does CSS Inspector Work?

[Garrett Smith]

How does the CSS Inspector find out which rule is in which stylesheet?

When I click "inspect", then select an element, then view the CSS tab,
I see selector text matching each styleSheet.

What is the strategy to accomplish this? I would like to know because
it is related to something that I am trying to figure out. Which files
should I look at?

Thank you,

Garrett

--
Monkey, so they say, is the root of all people today.

[John J Barton]

I don't know much about CSS. The code is in
http://fbug.googlecode.com/svn/branches/firebug1.2/content/firebug/css.js
maybe getElementRules()
Some of the work may come from inIDOMUtils

John.

[Garrett Smith]

On Dec 16, 2007 10:24 AM, John J Barton <johnj...@johnjbarton.com> wrote:
>
> I don't know much about CSS. The code is in
> http://fbug.googlecode.com/svn/branches/firebug1.2/content/firebug/css.js
> maybe getElementRules()
> Some of the work may come from inIDOMUtils
>

Actually, it looks like getCSSStyleRules is defined in inIDOMUtils.

http://people.mozilla.com/~axel/doxygen/html/interfaceinIDOMUtils.html

Where can I find the C++ code implementation of inIDOMUtils? It's
probably very specific code to Mozilla, so probably not possible to
port to x-browser JS, but maybe I can take a look and get an idea.

Basically, I want to find a the most specific matching rule for an
element, without having to parse the stylesheet and sort it by
specificity, et c. That is a lot of work.

Thanks,

Garrett

[Asrail]

Garrett Smith, 16-12-2007 22:08:

> On Dec 16, 2007 10:24 AM, John J Barton <johnj...@johnjbarton.com> wrote:
>>
>> I don't know much about CSS. The code is in
>> http://fbug.googlecode.com/svn/branches/firebug1.2/content/firebug/css.js
>> maybe getElementRules()
>> Some of the work may come from inIDOMUtils
>>
> Actually, it looks like getCSSStyleRules is defined in inIDOMUtils.

inIDOMUtils:
http://mxr.mozilla.org/seamonkey/source/layout/inspector/public/inIDOMUtils.idl

> http://people.mozilla.com/~axel/doxygen/html/interfaceinIDOMUtils.html
>
> Where can I find the C++ code implementation of inIDOMUtils? It's
> probably very specific code to Mozilla, so probably not possible to
> port to x-browser JS, but maybe I can take a look and get an idea.

http://mxr.mozilla.org/seamonkey/source/layout/inspector/src/inDOMUtils.cpp#152

You'll enjoy reading:
http://mxr.mozilla.org/seamonkey/source/layout/style/nsInspectorCSSUtils.cpp#162
and it's chain.

http://mxr.mozilla.org/seamonkey/source/layout/xul/base/src/tree/src/nsTreeStyleCache.cpp#46
is worth reading.

nsInspectorCSSUtils is the interface to DOM inspector (which Firebug
itself enjoys).

Read the comments from here on if you want to understand the way it's
done on Mozilla:
http://mxr.mozilla.org/seamonkey/source/layout/style/nsRuleNode.h#196

Another class of interest, if you wanna know how it work on Mozilla to
apply or port it (take into account the code is MPL/GPL/LGPL):
http://mxr.mozilla.org/seamonkey/source/layout/style/nsCSSProps.cpp
which defines the CSS properties, along with dealing with "-moz-"
properties and it's aliases.

The code inside layout/inspector is for DOM inspector and Firebug also
enjoys a lot (say, it's for a generic DOM inspector).

> Basically, I want to find a the most specific matching rule for an
> element, without having to parse the stylesheet and sort it by
> specificity, et c. That is a lot of work.

Resuming a lot... each element, after the parsing of the DOM and CSS,
has a set (hashtable, which also supports zero-based indexing and
iterating[1]) with the rules applied to it.

So it's only required to query this set when you want to know the
applied style.

1 - http://mxr.mozilla.org/seamonkey/source/xpcom/ds/nsStaticNameTable.h