[DevTools] Migrate StylesSidebarPane to TreeOutlineInShadow.

third_party/WebKit/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 605 matching lines @@
     this._style = style;
     this._matchedStyles = matchedStyles;
     this.editable = !!(style.styleSheetId && style.range);
 
     var rule = style.parentRule;
     this.element = createElementWithClass("div", "styles-section matched-styles monospace");
     this.element._section = this;
 
     this._titleElement = this.element.createChild("div", "styles-section-title " + (rule ? "styles-selector" : ""));
 
-    this.propertiesTreeOutline = new TreeOutline();
-    this.propertiesTreeOutline.element.classList.add("style-properties", "monospace");
+    this.propertiesTreeOutline = new TreeOutlineInShadow();
+    this.propertiesTreeOutline.registerRequiredCSS("elements/stylesSectionTree.css");
+    this.propertiesTreeOutline.element.classList.add("style-properties", "matched-styles", "monospace");
     this.propertiesTreeOutline.section = this;
     this.element.appendChild(this.propertiesTreeOutline.element);
 
     var selectorContainer = createElement("div");
     this._selectorElement = createElementWithClass("span", "selector");
     this._selectorElement.textContent = this._headerText();
     selectorContainer.appendChild(this._selectorElement);
     this._selectorElement.addEventListener("mouseenter", this._onMouseEnterSelector.bind(this), false);
     this._selectorElement.addEventListener("mouseleave", this._onMouseOutSelector.bind(this), false);
 
@@ skipping 28 matching lines @@
     this._mediaListElement = this._titleElement.createChild("div", "media-list media-matches");
     this._selectorRefElement = this._titleElement.createChild("div", "styles-section-subtitle");
     this._updateMediaList();
     this._updateRuleOrigin();
     this._titleElement.appendChild(selectorContainer);
     this._selectorContainer = selectorContainer;
 
     if (this.navigable)
         this.element.classList.add("navigable");
 
-    if (!this.editable)
+    if (!this.editable) {
         this.element.classList.add("read-only");
+        this.propertiesTreeOutline.element.classList.add("read-only");
+    }
 
     this._markSelectorMatches();
     this.onpopulate();
 }
 
 WebInspector.StylePropertiesSection.prototype = {
     /**
      * @param {boolean} isHovered
      */
     _setSectionHovered: function(isHovered)
     {
         this.element.classList.toggle("styles-panel-hovered", isHovered);
+        this.propertiesTreeOutline.element.classList.toggle("styles-panel-hovered", isHovered);
         if (this._hoverableSelectorsMode !== isHovered) {
             this._hoverableSelectorsMode = isHovered;
             this._markSelectorMatches();
         }
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
@@ skipping 402 matching lines @@
     /**
      * @return {boolean}
      */
     _updateFilter: function()
     {
         var hasMatchingChild = false;
         for (var child of this.propertiesTreeOutline.rootElement().children())
             hasMatchingChild |= child._updateFilter();
 
         var regex = this._parentPane.filterRegex();
-        var hideRule = !hasMatchingChild && !!regex && !regex.test(this.element.textContent);
+        var hideRule = !hasMatchingChild && !!regex && !regex.test(this.element.deepTextContent());
         this.element.classList.toggle("hidden", hideRule);
         if (!hideRule && this._style.parentRule)
             this._markSelectorHighlights();
         return !hideRule;
     },
 
     _markSelectorMatches: function()
     {
         var rule = this._style.parentRule;
         if (!rule)
@@ skipping 123 matching lines @@
     },
 
     /**
      * @param {!Event} event
      */
     _handleEmptySpaceClick: function(event)
     {
         if (!this.editable)
             return;
 
+        var targetElement = event.deepElementFromPoint();
+        if (targetElement && !targetElement.isComponentSelectionCollapsed())
+            return;
+
         if (!event.target.isComponentSelectionCollapsed())
             return;
 
         if (this._checkWillCancelEditing())
             return;
 
         if (event.target.enclosingNodeOrSelfWithNodeName("a"))
             return;
 
         if (event.target.classList.contains("header") || this.element.classList.contains("read-only") || event.target.enclosingNodeOrSelfWithClass("media")) {
@@ skipping 262 matching lines @@
                 .then(updateSourceRanges.bind(this, rule));
         }
 
         /**
          * @param {!WebInspector.CSSStyleRule} rule
          * @this {WebInspector.StylePropertiesSection}
          */
         function updateSourceRanges(rule)
         {
             var doesAffectSelectedNode = this._matchedStyles.matchingSelectors(rule).length > 0;
-            this.element.classList.toggle("no-affect", !doesAffectSelectedNode);
+            this.propertiesTreeOutline.element.classList.toggle("no-affect", !doesAffectSelectedNode);
             this._matchedStyles.resetActiveProperties();
             this._parentPane._refreshUpdate(this);
         }
 
         console.assert(rule instanceof WebInspector.CSSStyleRule);
         var oldSelectorRange = rule.selectorRange();
         if (!oldSelectorRange)
             return Promise.resolve();
         var selectedNode = this._parentPane.node();
         return rule.setSelectorText(newContent)
@@ skipping 165 matching lines @@
         /**
          * @param {!WebInspector.CSSStyleRule} newRule
          * @this {WebInspector.StylePropertiesSection}
          */
         function onAddedToCascade(newRule)
         {
             var doesSelectorAffectSelectedNode = this._matchedStyles.matchingSelectors(newRule).length > 0;
             this._makeNormal(newRule);
 
             if (!doesSelectorAffectSelectedNode)
-                this.element.classList.add("no-affect");
+                this.propertiesTreeOutline.element.classList.add("no-affect");
 
             this._updateRuleOrigin();
             if (this.element.parentElement) // Might have been detached already.
                 this._moveEditorFromSelector(moveDirection);
 
             delete this._parentPane._userOperation;
             this._editingSelectorEnded();
             this._markSelectorMatches();
 
             this._editingSelectorCommittedForTest();
@@ skipping 1443 matching lines @@
 
     /**
      * @override
      * @return {!WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }