<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body>
      <p>
        <div>
            <b><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - Web Inspector: support live editing of rule selectors"
   href="https://bugs.webkit.org/show_bug.cgi?id=139153#c4">Comment # 4</a>
              on <a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - Web Inspector: support live editing of rule selectors"
   href="https://bugs.webkit.org/show_bug.cgi?id=139153">bug 139153</a>
              from <span class="vcard"><a class="email" href="mailto:timothy&#64;apple.com" title="Timothy Hatcher &lt;timothy&#64;apple.com&gt;"> <span class="fn">Timothy Hatcher</span></a>
</span></b>
        <pre>Comment on <span class=""><a href="attachment.cgi?id=257431&amp;action=diff" name="attach_257431" title="[Proposed] Patch">attachment 257431</a> <a href="attachment.cgi?id=257431&amp;action=edit" title="[Proposed] Patch">[details]</a></span>
[Proposed] Patch

View in context: <a href="https://bugs.webkit.org/attachment.cgi?id=257431&amp;action=review">https://bugs.webkit.org/attachment.cgi?id=257431&amp;action=review</a>

I like this! We should do this. Historically we did pin the rule you were editing, and it would disappear if you clicked away (if it no longer applied). That way if you mistyped a selector, you could still edit it to make it apply again.

<span class="quote">&gt; Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:54
&gt; +    this._selectorElement.addEventListener(&quot;keyup&quot;, this._highlightNodesWithSelector.bind(this));</span >

This is risky. If _highlightNodesWithSelector ever starts taking an argument, it will break because this event listener will send an event object as the first argument and it could cause undefined behavior.

<span class="quote">&gt; Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:131
&gt; +    this._highlightConfig = {
&gt; +        borderColor: {r: 255, g: 229, b: 153, a: 0.66},
&gt; +        contentColor: {r: 111, g: 168, b: 220, a: 0.66},
&gt; +        marginColor: {r: 246, g: 178, b: 107, a: 0.66},
&gt; +        paddingColor: {r: 147, g: 196, b: 125, a: 0.66},
&gt; +        showInfo: true
&gt; +    };</span >

We should find a central place for this to be shared with other places we have the config. CSSStyleManager should really encapsulate DOMAgent.highlightSelector and DOMAgent.highlightNode, along with the colors used.</pre>
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>