mozilla

Revision 186561 of Content states and the style system

  • Revision slug: Content_states_and_the_style_system
  • Revision title: Content states and the style system
  • Revision id: 186561
  • Created:
  • Creator: Bzbarsky
  • Is current revision? No
  • Comment

Revision Content

Content states are what Gecko uses to implement the various state-dependent pseudo-classes in CSS (examples would be :hover, :active, :focus :checked). We will focus on describing how changes in content state are handled.

Generally, whenever a node's content state changes, style has to be reresolved (recomputed) for that node and all of its descendants. This is an expensive operation, however, so the style system tries to minimize the number of style reresolves it does. To this end, when a ContentStatesChanged notification is dispatched for a content node the first thing that's done is to is to check whether the content state change something could<em> Italic text affect any styles.

{{mediawiki.external('10:41:07')}} <timeless> and it shouldn't hurt code size {{mediawiki.external('10:41:20')}} <timeless> having the same stupid code in multiple places is well ... stupid  :) {{mediawiki.external('10:41:48')}} <bsmedberg> mvl: of course, IMO dump() should go to the JS console, not to stdout... {{mediawiki.external('10:41:57')}} boci^ {{mediawiki.external('boci@boci.dravanet.hu')}} has joined #developers {{mediawiki.external('10:42:00')}} <bsmedberg> so MO is not worth much {{mediawiki.external('10:42:05')}} <timeless> heh {{mediawiki.external('10:42:06')}} <bz> If the something is a content state, it walks the list of all selectors that have a "state-dependent" pseudo in them {{mediawiki.external('10:42:09')}} dmb {{mediawiki.external('chatzilla@204.8.196.2')}} has joined #developers {{mediawiki.external('10:42:15')}} timeless actually has a component to do this /somewhere/ {{mediawiki.external('10:42:21')}} <bz> (which it creates during sheet parsing) {{mediawiki.external('10:42:31')}} <bz> And for each selector checks whether it matches the node. {{mediawiki.external('10:42:42')}} <bz> If it does, then the style could depend on the state and we have to reresolve style. {{mediawiki.external('10:42:55')}} <bz> Now the hitch is what it means for the selector to match the node {{mediawiki.external('10:43:01')}} <bz> Say the selector is a:hover {{mediawiki.external('10:43:06')}} dmb {{mediawiki.external('chatzilla@204.8.196.2')}} is now known as IRCMonkey3840056 {{mediawiki.external('10:43:10')}} <bz> And the hover state on some node changes. {{mediawiki.external('10:43:18')}} <mvl> bsmedberg: that means that i have to hack it myself? {{mediawiki.external('10:43:23')}} <bz> What we need to check is whether the node matches the "a" part of the selector {{mediawiki.external('10:43:29')}} <mvl> which means #ifdef debug in the caller. {{mediawiki.external('10:43:40')}} <bz> So in other words, we want to treat all of the states that changed as matching automatically. {{mediawiki.external('10:43:44')}} <@shaver> or use debug(), in components {{mediawiki.external('10:43:54')}} <IRCMonkey3840056> arrr {{mediawiki.external('10:43:56')}} IRCMonkey3840056 {{mediawiki.external('chatzilla@204.8.196.2')}} has quit IRC: Quit: Chatzilla 0.9.68a {{mediawiki.external('Firefox 1.0/20050106')}} {{mediawiki.external('10:44:09')}} <bz> This means you have to know what states changed, of course. {{mediawiki.external('10:44:12')}} dmb_ {{mediawiki.external('chatzilla@204.8.196.2')}} has joined #developers {{mediawiki.external('10:44:13')}} dmb_ {{mediawiki.external('chatzilla@204.8.196.2')}} is now known as dmb {{mediawiki.external('10:44:35')}} <bz> And this is why the selector-matching code short-circuits to "true" for cases when the state being matched on is in the state mask {{mediawiki.external('10:44:46')}} gavin|away {{mediawiki.external('g@rn-wcs3c04.uwaterloo.ca')}} is now known as gavin {{mediawiki.external('10:44:57')}} <CTho> timeless: ah, so gcc takes -pthread or -lpthread, but ld only takes -lptherad {{mediawiki.external('10:45:10')}} timeless wonders what kind of file is needed to make {{mediawiki.external('10:45:21')}} <timeless> ctho: there are other ld's out there than the one you're using {{mediawiki.external('10:45:28')}} <beaufour> bz: ok, I think I'm following you most of the way {{mediawiki.external('10:45:29')}} <CTho> well, my ld {{mediawiki.external('10:45:39')}} <timeless> ... edit areas reasonably sized (>2px tall) {{mediawiki.external('10:45:47')}} <bz> Now the patch in bug 271720 sends UNSPECIFIED as the state mask, so a dynamic change will be treated as "nothing changed" by the style system {{mediawiki.external('10:45:55')}} <bz> beaufour: which part is unclear? {{mediawiki.external('10:46:28')}} <beaufour> bz: nothing in particular, it's only my own dubious understanding of the entire CSS thing  ;-) {{mediawiki.external('10:46:47')}} CTho {{mediawiki.external('Chris@CTHO.RES.cmu.edu')}} is now known as CTho|away {{mediawiki.external('10:47:12')}} <beaufour> bz: I had a seperate state defined for each class in an earlier patch {{mediawiki.external('10:49:04')}} <beaufour> bz: so having f.x. a NS_EVENT_STATE_PAIR_VALID and sending that as the state mask would be the correct thing todo? {{mediawiki.external('10:49:19')}} beaufour wonders why he trashed those in the first place {{mediawiki.external('10:50:03')}} <bz> beaufour: what would that mean? {{mediawiki.external('10:50:05')}} FUBAr {{mediawiki.external('fubar@212.16.199.122')}} has quit IRC: Quit: �?Ÿ�?¾�?º�?¸�?´�?°ÑŽ {{mediawiki.external('10:50:14')}} smaug {{mediawiki.external('smaug@cs181140114.pp.htv.fi')}} has joined #developers {{mediawiki.external('10:50:21')}} <bz> beaufour: Just not sure what NS_EVENT_STATE_PAIR_VALID would indicate... {{mediawiki.external('10:51:05')}} <beaufour> bz: it would mean that the valid state for the content changed, that it could now match either :valid or :invalid {{mediawiki.external('10:51:14')}} <beaufour> hi smaug {{mediawiki.external('10:51:24')}} <smaug> hi beaufour {{mediawiki.external('10:51:50')}} <bz> beaufour: ah, hm. Let me think about that for a sec. {{mediawiki.external('10:54:05')}} <bz> So that would work with style resolution.... {{mediawiki.external('10:54:11')}} <bz> db48x: want to send me that log?

Revision Source

<p>Content states are what Gecko uses to implement the various state-dependent pseudo-classes in CSS (examples would be :hover, :active, :focus :checked).  We will focus on describing how changes in content state are handled.
</p><p>Generally, whenever a node's content state changes, style has to be reresolved (recomputed) for that node and all of its descendants.  This is an expensive operation, however, so the style system tries to minimize the number of style reresolves it does. To this end, when a <code>ContentStatesChanged</code> notification is dispatched for a content node the first thing that's done is to is to check whether the content state change something <em>could&lt;em&gt; <i>Italic text</i> affect any styles.
</em></p><p>{{mediawiki.external('10:41:07')}} &lt;timeless&gt; and it shouldn't hurt code size
{{mediawiki.external('10:41:20')}} &lt;timeless&gt; having the same stupid code in multiple places is well ... stupid  :) 
{{mediawiki.external('10:41:48')}} &lt;bsmedberg&gt; mvl: of course, IMO dump() should go to the JS console, not to stdout...
{{mediawiki.external('10:41:57')}} boci^ {{mediawiki.external('boci@boci.dravanet.hu')}} has joined #developers
{{mediawiki.external('10:42:00')}} &lt;bsmedberg&gt; so MO is not worth much
{{mediawiki.external('10:42:05')}} &lt;timeless&gt; heh
{{mediawiki.external('10:42:06')}} &lt;bz&gt; If the something is a content state, it walks the list of all selectors that have a "state-dependent" pseudo in them
{{mediawiki.external('10:42:09')}} dmb {{mediawiki.external('chatzilla@204.8.196.2')}} has joined #developers
{{mediawiki.external('10:42:15')}} timeless actually has a component to do this /somewhere/
{{mediawiki.external('10:42:21')}} &lt;bz&gt; (which it creates during sheet parsing)
{{mediawiki.external('10:42:31')}} &lt;bz&gt; And for each selector checks whether it matches the node.
{{mediawiki.external('10:42:42')}} &lt;bz&gt; If it does, then the style could depend on the state and we have to reresolve style.
{{mediawiki.external('10:42:55')}} &lt;bz&gt; Now the hitch is what it means for the selector to match the node
{{mediawiki.external('10:43:01')}} &lt;bz&gt; Say the selector is a:hover
{{mediawiki.external('10:43:06')}} dmb {{mediawiki.external('chatzilla@204.8.196.2')}} is now known as IRCMonkey3840056
{{mediawiki.external('10:43:10')}} &lt;bz&gt; And the hover state on some node changes.
{{mediawiki.external('10:43:18')}} &lt;mvl&gt; bsmedberg: that means that i have to hack it myself?
{{mediawiki.external('10:43:23')}} &lt;bz&gt; What we need to check is whether the node matches the "a" part of the selector
{{mediawiki.external('10:43:29')}} &lt;mvl&gt; which means #ifdef debug in the caller.
{{mediawiki.external('10:43:40')}} &lt;bz&gt; So in other words, we want to treat all of the states that changed as matching automatically.
{{mediawiki.external('10:43:44')}} &lt;@shaver&gt; or use debug(), in components
{{mediawiki.external('10:43:54')}} &lt;IRCMonkey3840056&gt; arrr
{{mediawiki.external('10:43:56')}} IRCMonkey3840056 {{mediawiki.external('chatzilla@204.8.196.2')}} has quit IRC: Quit: Chatzilla 0.9.68a {{mediawiki.external('Firefox 1.0/20050106')}}
{{mediawiki.external('10:44:09')}} &lt;bz&gt; This means you have to know what states changed, of course.
{{mediawiki.external('10:44:12')}} dmb_ {{mediawiki.external('chatzilla@204.8.196.2')}} has joined #developers
{{mediawiki.external('10:44:13')}} dmb_ {{mediawiki.external('chatzilla@204.8.196.2')}} is now known as dmb
{{mediawiki.external('10:44:35')}} &lt;bz&gt; And this is why the selector-matching code short-circuits to "true" for cases when the state being matched on is in the state mask
{{mediawiki.external('10:44:46')}} gavin|away {{mediawiki.external('g@rn-wcs3c04.uwaterloo.ca')}} is now known as gavin
{{mediawiki.external('10:44:57')}} &lt;CTho&gt; timeless: ah, so gcc takes -pthread or -lpthread, but ld only takes -lptherad
{{mediawiki.external('10:45:10')}} timeless wonders what kind of file is needed to make
{{mediawiki.external('10:45:21')}} &lt;timeless&gt; ctho: there are other ld's out there than the one you're using
{{mediawiki.external('10:45:28')}} &lt;beaufour&gt; bz: ok, I think I'm following you most of the way
{{mediawiki.external('10:45:29')}} &lt;CTho&gt; well, my ld
{{mediawiki.external('10:45:39')}} &lt;timeless&gt; ... edit areas reasonably sized (&gt;2px tall)
{{mediawiki.external('10:45:47')}} &lt;bz&gt; Now the patch in bug 271720 sends UNSPECIFIED as the state mask, so a dynamic change will be treated as "nothing changed" by the style system
{{mediawiki.external('10:45:55')}} &lt;bz&gt; beaufour: which part is unclear?
{{mediawiki.external('10:46:28')}} &lt;beaufour&gt; bz: nothing in particular, it's only my own dubious understanding of the entire CSS thing  ;-) 
{{mediawiki.external('10:46:47')}} CTho {{mediawiki.external('Chris@CTHO.RES.cmu.edu')}} is now known as CTho|away
{{mediawiki.external('10:47:12')}} &lt;beaufour&gt; bz: I had a seperate state defined for each class in an earlier patch
{{mediawiki.external('10:49:04')}} &lt;beaufour&gt; bz: so having f.x. a NS_EVENT_STATE_PAIR_VALID and sending that as the state mask would be the correct thing todo?
{{mediawiki.external('10:49:19')}} beaufour wonders why he trashed those in the first place
{{mediawiki.external('10:50:03')}} &lt;bz&gt; beaufour: what would that mean?
{{mediawiki.external('10:50:05')}} FUBAr {{mediawiki.external('fubar@212.16.199.122')}} has quit IRC: Quit: �?Ÿ�?¾�?º�?¸�?´�?°ÑŽ
{{mediawiki.external('10:50:14')}} smaug {{mediawiki.external('smaug@cs181140114.pp.htv.fi')}} has joined #developers
{{mediawiki.external('10:50:21')}} &lt;bz&gt; beaufour: Just not sure what NS_EVENT_STATE_PAIR_VALID would indicate...
{{mediawiki.external('10:51:05')}} &lt;beaufour&gt; bz: it would mean that the valid state for the content changed, that it could now match either :valid or :invalid
{{mediawiki.external('10:51:14')}} &lt;beaufour&gt; hi smaug 
{{mediawiki.external('10:51:24')}} &lt;smaug&gt; hi beaufour 
{{mediawiki.external('10:51:50')}} &lt;bz&gt; beaufour: ah, hm.  Let me think about that for a sec.
{{mediawiki.external('10:54:05')}} &lt;bz&gt; So that would work with style resolution....
{{mediawiki.external('10:54:11')}} &lt;bz&gt; db48x: want to send me that log?
</p>
Revert to this revision