What steps will reproduce the problem? 1. Save the following as .html 2. inspect the first td in the table 3. note the color in the styles side panel 4. click on the page 5. Note the color of the td changes, but the Styles side panel does not update. Bug. 6. click in the Elements panel on the selected td element, note that the Styles UI still does not update. Bug. Firebug updates at step #5, so #6 does not matter for it. <head> <style> .row-open > td:first-child{ background-color: red; } .row-closed > td:first-child{ background-color: green; } </style> <script> function swap() { var opens = document.querySelectorAll('.row-open'); var closeds = document.querySelectorAll('.row-closed'); for(var i = 0; i < opens.length; i++) { opens[i].classList.remove("row-open"); opens[i].classList.add("row-closed"); } for(var i = 0; i < closeds.length; i++) { closeds[i].classList.remove("row-closed"); closeds[i].classList.add("row-open"); } } function onLoad() { document.body.addEventListener('click', swap); } window.addEventListener('load', onLoad); </script> </head> <body> <table> <tbody> <tr class="row-open"> <td>1st</td> <td>2nd</td> <td>3rd</td> </tr> <tr class="row-closed"> <td>1st</td> <td>2nd</td> <td>3rd</td> </tr> </tbody> </table> </body> Upstreaming http://code.google.com/p/chromium/issues/detail?id=145348
Created attachment 162002 [details] Patch
Comment on attachment 162002 [details] Patch So how would we deal with the following cases? - other attributes modifications (affects attribute selector [], id selector #) - attribute removals (removed and modified event are separated) - sibling selectors - pseudo-class selectors could be affected by node removing/adding
Created attachment 162032 [details] Patch
Created attachment 163127 [details] Patch
Created attachment 163554 [details] Patch
Comment on attachment 163554 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=163554&action=review > Source/WebCore/inspector/front-end/StylesSidebarPane.js:331 > + return !this.node || this.node === node || node.parentNode === this.node.parentNode || node.isAncestor(this.node); How can it affect style when there is no current node? See first or operand.
(In reply to comment #6) > (From update of attachment 163554 [details]) > View in context: https://bugs.webkit.org/attachment.cgi?id=163554&action=review > > > Source/WebCore/inspector/front-end/StylesSidebarPane.js:331 > > + return !this.node || this.node === node || node.parentNode === this.node.parentNode || node.isAncestor(this.node); > > How can it affect style when there is no current node? See first or operand. This is the case when there is no selected node, so I decided to be on the safe side. I can, however, invert this check, so that this.node is required to be present in order to be affected by a change.
Created attachment 163573 [details] Patch
Committed r128291: <http://trac.webkit.org/changeset/128291>