1099254 - [rule view] selector highlight should respect scoping of the stylesheet

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Brian Grinstead [:bgrins]]

Example: http://jsbin.com/boyamezagu/3/edit

Given this markup:

  <div>
    <style scoped>
      h1 { color: FireBrick;   }
      p  { color: SaddleBrown; }
    </style>
    <h1>Scoped h1</h1>
    <p>Scoped p</p>
  </div>
  
  <p>Unscoped p</p>

When selecting the scoped p tag and hovering the 'p' selector within the scoped style, only the proper node (that the style is actually being applied to) should be highlighted.

Comment 1

[Patrick Brosset <:pbro>]

I don't think it's a big deal to fix.

The SelectorHighlighter already accepts a DOM node input which it uses to access the ownerDocument and run querySelectorAll from there (this is so the whole thing works with iframes).
We could change the logic a little bit here so that we don't do |node.ownerDocument.querySelectorAll(selector)| but instead just |node.querySelectorAll(selector)| if a "scoped" option flag is passed, or something like this.

This other part is finding out in the rule-view whether we should be passing that flag or not.
Assuming we do have the info about the fact that a certain rule in the rule-view is part of a scoped stylesheet, and assuming we have the DOMNode actorID of the <style> node, we should then update the rule-view's getNodeInfo: http://mxr.mozilla.org/mozilla-central/source/browser/devtools/styleinspector/rule-view.js#1236 so that on top of returning the selector in case of VIEW_NODE_SELECTOR_TYPE type, it also returns a scoped boolean + the actorID of the <style> DOMNode.

Or any variation of this anyway. I haven't thought too much about this.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Filter on CLIMBING SHOES