DevTools: [SSP] fix matched selector highlight for style rules

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 1427 matching lines @@
     this.element = createElementWithClass("div", "styles-section matched-styles monospace" + extraClasses);
     this.element._section = this;
 
     this.titleElement = this.element.createChild("div", "styles-section-title " + (rule ? "styles-selector" : ""));
     this.propertiesElement = this.element.createChild("ol", "style-properties monospace");
     this.propertiesTreeOutline = new TreeOutline(this.propertiesElement, true);
     this.propertiesTreeOutline.setFocusable(false);
     this.propertiesTreeOutline.section = this;
 
     var selectorContainer = createElement("div");
-    this._selectorElement = createElement("span");
+    this._selectorElement = createElementWithClass("span", "selector");
     this._selectorElement.textContent = styleRule.selectorText();
     selectorContainer.appendChild(this._selectorElement);
 
     var openBrace = createElement("span");
     openBrace.textContent = " {";
     selectorContainer.appendChild(openBrace);
     selectorContainer.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false);
     selectorContainer.addEventListener("click", this._handleSelectorContainerClick.bind(this), false);
 
     var closeBrace = createElement("div");
@@ skipping 373 matching lines @@
     },
 
     _markSelectorMatches: function()
     {
         var rule = this.styleRule.rule();
         if (!rule)
             return;
 
         this._mediaListElement.classList.toggle("media-matches", this.styleRule.mediaMatches());
 
-        // .selector is rendered as non-affecting selector by default.
-        if (!this.styleRule.hasMatchingSelectors()) {
-            this._selectorElement.className = "selector";
+        if (!this.styleRule.hasMatchingSelectors())
             return;
-        }
 
         var selectors = rule.selectors;
         var fragment = createDocumentFragment();
         var currentMatch = 0;
         var matchingSelectors = rule.matchingSelectors;
         for (var i = 0; i < selectors.length ; ++i) {
             if (i)
                 fragment.createTextChild(", ");
             var isSelectorMatching = matchingSelectors[currentMatch] === i;
             if (isSelectorMatching)
@@ skipping 2189 matching lines @@
 
 WebInspector.StylesSidebarPane.MatchedRulesPayload.prototype = {
     /**
      * @return {boolean}
      */
     fulfilled: function()
     {
         return !!(this.matchedCSSRules && this.pseudoElements && this.inherited);
     }
 }