DevTools: move off WebInspector.css/domModel in sidebars.

Source/devtools/front_end/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 37 matching lines @@
     addButton.id = "add-style-button-test-id";
     addButton.title = WebInspector.UIString("New Style Rule");
     addButton.addEventListener("click", this._createNewRule.bind(this), false);
     this.titleElement.appendChild(addButton);
 
     this._computedStylePane = computedStylePane;
     computedStylePane.setHostingPane(this);
     this._setPseudoClassCallback = setPseudoClassCallback;
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
+    WebInspector.settings.showUserAgentStyles.addChangeListener(this._showUserAgentStylesSettingChanged.bind(this));
 
     this._createElementStatePane();
     this.bodyElement.appendChild(this._elementStatePane);
     this._sectionsContainer = document.createElement("div");
     this.bodyElement.appendChild(this._sectionsContainer);
 
     this._spectrumHelper = new WebInspector.SpectrumPopupHelper();
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._styleSheetOrMediaQueryResultChanged, this);
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._styleSheetOrMediaQueryResultChanged, this);
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this);
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._styleSheetOrMediaQueryResultChanged, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributeChanged, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributeChanged, this);
-    WebInspector.settings.showUserAgentStyles.addChangeListener(this._showUserAgentStylesSettingChanged.bind(this));
-    WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._frameResized, this);
     this.element.classList.add("styles-pane");
     this.element.classList.toggle("show-user-styles", WebInspector.settings.showUserAgentStyles.get());
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
     document.body.addEventListener("keydown", this._keyDown.bind(this), false);
     document.body.addEventListener("keyup", this._keyUp.bind(this), false);
 }
 
 // Keep in sync with RenderStyleConstants.h PseudoId enum. Array below contains pseudo id names for corresponding enum indexes.
 // First item is empty due to its artificial NOPSEUDO nature in the enum.
 // FIXME: find a way of generating this mapping or getting it from combination of RenderStyleConstants and CSSSelector.cpp at
@@ skipping 119 matching lines @@
         function searchHandler(regex)
         {
             this._filterRegex = regex;
         }
 
         return filterInput;
     },
 
     get _forcedPseudoClasses()
     {
-        return this.node ? (this.node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName) || undefined) : undefined;
+        return this._node ? (this._node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName) || undefined) : undefined;
     },
 
     _updateForcedPseudoStateInputs: function()
     {
-        if (!this.node)
+        if (!this._node)
             return;
 
-        var hasPseudoType = !!this.node.pseudoType();
+        var hasPseudoType = !!this._node.pseudoType();
         this._elementStateButton.classList.toggle("hidden", hasPseudoType);
         this._elementStatePane.classList.toggle("expanded", !hasPseudoType && this._elementStateButton.classList.contains("toggled"));
 
         var nodePseudoState = this._forcedPseudoClasses;
         if (!nodePseudoState)
             nodePseudoState = [];
 
         var inputs = this._elementStatePane.inputs;
         for (var i = 0; i < inputs.length; ++i)
             inputs[i].checked = nodePseudoState.indexOf(inputs[i].state) >= 0;
     },
 
     /**
      * @param {?WebInspector.DOMNode} node
      * @param {boolean=} forceUpdate
      */
     update: function(node, forceUpdate)
     {
         this._spectrumHelper.hide();
         this._discardElementUnderMouse();
 
         var refresh = false;
 
         if (forceUpdate)
-            delete this.node;
+            delete this._node;
 
-        if (!forceUpdate && (node === this.node))
+        if (!forceUpdate && (node === this._node))
             refresh = true;
 
         if (node && node.nodeType() === Node.TEXT_NODE && node.parentNode)
             node = node.parentNode;
 
         if (node && node.nodeType() !== Node.ELEMENT_NODE)
             node = null;
 
-        if (node)
-            this.node = node;
-        else
-            node = this.node;
+        if (node) {
+            this._updateTarget(node.target());
+            this._node = node;
+        } else
+            node = this._node;
 
         this._updateForcedPseudoStateInputs();
 
         if (refresh)
             this._refreshUpdate();
         else
             this._rebuildUpdate();
     },
 
     /**
+     * @param {!WebInspector.Target} target
+     */
+    _updateTarget: function(target)
+    {
+        if (this._target === target)
+            return;
+        if (this._target) {
+            this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._styleSheetOrMediaQueryResultChanged, this);
+            this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._styleSheetOrMediaQueryResultChanged, this);
+            this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this);
+            this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._styleSheetOrMediaQueryResultChanged, this);
+            this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributeChanged, this);
+            this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributeChanged, this);
+            this._target.resourceTreeModel.removeEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._frameResized, this);
+        }
+        this._target = target;
+        this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._styleSheetOrMediaQueryResultChanged, this);
+        this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._styleSheetOrMediaQueryResultChanged, this);
+        this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this);
+        this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._styleSheetOrMediaQueryResultChanged, this);
+        this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributeChanged, this);
+        this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributeChanged, this);
+        this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._frameResized, this);
+    },
+
+    /**
      * @param {!WebInspector.StylePropertiesSection=} editedSection
      * @param {boolean=} forceFetchComputedStyle
      * @param {function()=} userCallback
      */
     _refreshUpdate: function(editedSection, forceFetchComputedStyle, userCallback)
     {
         var callbackWrapper = function()
         {
             if (this._filterRegex)
                 this._updateFilter(false);
             if (userCallback)
                 userCallback();
         }.bind(this);
 
         if (this._refreshUpdateInProgress) {
-            this._lastNodeForInnerRefresh = this.node;
+            this._lastNodeForInnerRefresh = this._node;
             return;
         }
 
         var node = this._validateNode(userCallback);
         if (!node)
             return;
 
         /**
          * @param {?WebInspector.CSSStyleDeclaration} computedStyle
          * @this {WebInspector.StylesSidebarPane}
          */
         function computedStyleCallback(computedStyle)
         {
             delete this._refreshUpdateInProgress;
 
             if (this._lastNodeForInnerRefresh) {
                 delete this._lastNodeForInnerRefresh;
                 this._refreshUpdate(editedSection, forceFetchComputedStyle, callbackWrapper);
                 return;
             }
 
-            if (this.node === node && computedStyle)
+            if (this._node === node && computedStyle)
                 this._innerRefreshUpdate(node, computedStyle, editedSection);
 
             callbackWrapper();
         }
 
         if (this._computedStylePane.isShowing() || forceFetchComputedStyle) {
             this._refreshUpdateInProgress = true;
-            WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
+            this._target.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
         } else {
             this._innerRefreshUpdate(node, null, editedSection);
             callbackWrapper();
         }
     },
 
     _rebuildUpdate: function()
     {
         if (this._rebuildUpdateInProgress) {
-            this._lastNodeForInnerRebuild = this.node;
+            this._lastNodeForInnerRebuild = this._node;
             return;
         }
 
         var node = this._validateNode();
         if (!node)
             return;
 
         this._rebuildUpdateInProgress = true;
 
         var resultStyles = {};
 
         /**
          * @param {?*} matchedResult
          * @this {WebInspector.StylesSidebarPane}
          */
         function stylesCallback(matchedResult)
         {
             delete this._rebuildUpdateInProgress;
 
             var lastNodeForRebuild = this._lastNodeForInnerRebuild;
             if (lastNodeForRebuild) {
                 delete this._lastNodeForInnerRebuild;
-                if (lastNodeForRebuild !== this.node) {
+                if (lastNodeForRebuild !== this._node) {
                     this._rebuildUpdate();
                     return;
                 }
             }
 
-            if (matchedResult && this.node === node) {
+            if (matchedResult && this._node === node) {
                 resultStyles.matchedCSSRules = matchedResult.matchedCSSRules;
                 resultStyles.pseudoElements = matchedResult.pseudoElements;
                 resultStyles.inherited = matchedResult.inherited;
                 this._innerRebuildUpdate(node, resultStyles);
             }
 
             if (lastNodeForRebuild) {
                 // lastNodeForRebuild is the same as this.node - another rebuild has been requested.
                 this._rebuildUpdate();
                 return;
@@ skipping 12 matching lines @@
 
         /**
          * @param {?WebInspector.CSSStyleDeclaration} computedStyle
          */
         function computedCallback(computedStyle)
         {
             resultStyles.computedStyle = computedStyle;
         }
 
         if (this._computedStylePane.isShowing())
-            WebInspector.cssModel.getComputedStyleAsync(node.id, computedCallback);
-        WebInspector.cssModel.getInlineStylesAsync(node.id, inlineCallback);
-        WebInspector.cssModel.getMatchedStylesAsync(node.id, true, true, stylesCallback.bind(this));
+            this._target.cssModel.getComputedStyleAsync(node.id, computedCallback);
+        this._target.cssModel.getInlineStylesAsync(node.id, inlineCallback);
+        this._target.cssModel.getMatchedStylesAsync(node.id, true, true, stylesCallback.bind(this));
     },
 
     /**
      * @param {function()=} userCallback
      */
     _validateNode: function(userCallback)
     {
-        if (!this.node) {
+        if (!this._node) {
             this._sectionsContainer.removeChildren();
             this._computedStylePane.bodyElement.removeChildren();
             this.sections = {};
             if (userCallback)
                 userCallback();
             return null;
         }
-        return this.node;
+        return this._node;
     },
 
     _styleSheetOrMediaQueryResultChanged: function()
     {
         if (this._userOperation || this._isEditingStyle)
             return;
 
         this._rebuildUpdate();
     },
 
@@ skipping 22 matching lines @@
             return;
 
         if (!this._canAffectCurrentStyles(event.data.node))
             return;
 
         this._rebuildUpdate();
     },
 
     _canAffectCurrentStyles: function(node)
     {
-        return this.node && (this.node === node || node.parentNode === this.node.parentNode || node.isAncestor(this.node));
+        return this._node && (this._node === node || node.parentNode === this._node.parentNode || node.isAncestor(this._node));
     },
 
     _innerRefreshUpdate: function(node, computedStyle, editedSection)
     {
         for (var pseudoId in this.sections) {
             var styleRules = this._refreshStyleRules(this.sections[pseudoId], computedStyle);
             var usedProperties = {};
             this._markUsedProperties(styleRules, usedProperties);
             this._refreshSectionsForStyleRules(styleRules, usedProperties, editedSection);
         }
@@ skipping 301 matching lines @@
         event.consume();
         this.expand();
         this.addBlankSection().startEditingSelector();
     },
 
     /**
      * @return {!WebInspector.BlankStylePropertiesSection}
      */
     addBlankSection: function()
     {
-        var blankSection = new WebInspector.BlankStylePropertiesSection(this, this.node ? WebInspector.DOMPresentationUtils.simpleSelector(this.node) : "");
+        var blankSection = new WebInspector.BlankStylePropertiesSection(this, this._node ? WebInspector.DOMPresentationUtils.simpleSelector(this._node) : "");
 
         var elementStyleSection = this.sections[0][1];
         this._sectionsContainer.insertBefore(blankSection.element, elementStyleSection.element.nextSibling);
 
         this.sections[0].splice(2, 0, blankSection);
 
         return blankSection;
     },
 
     removeSection: function(section)
@@ skipping 298 matching lines @@
             if (media.sourceURL) {
                 var refElement = mediaDataElement.createChild("div", "subtitle");
                 var rawLocation;
                 var mediaHeader;
                 if (media.range) {
                     mediaHeader = media.header();
                     if (mediaHeader) {
                         var lineNumber = media.lineNumberInSource();
                         var columnNumber = media.columnNumberInSource();
                         console.assert(typeof lineNumber !== "undefined" && typeof columnNumber !== "undefined");
-                        rawLocation = new WebInspector.CSSLocation(WebInspector.cssModel.target(), media.sourceURL, lineNumber, columnNumber);
+                        rawLocation = new WebInspector.CSSLocation(this._parentPane._target, media.sourceURL, lineNumber, columnNumber);
                     }
                 }
 
                 var anchor;
                 if (rawLocation)
                     anchor = this._parentPane._linkifier.linkifyCSSLocation(mediaHeader.id, rawLocation);
                 else {
                     // The "linkedStylesheet" case.
                     anchor = WebInspector.linkifyResourceAsNode(media.sourceURL, undefined, "subtitle", media.sourceURL);
                 }
@@ skipping 51 matching lines @@
         this.element.classList.add("styles-show-inherited"); // This one is related to inherited rules, not computed style.
 
     if (this.navigable)
         this.element.classList.add("navigable");
 
     if (!this.editable)
         this.element.classList.add("read-only");
 }
 
 WebInspector.StylePropertiesSection.prototype = {
-    get pane()
-    {
-        return this._parentPane;
-    },
-
     collapse: function()
     {
         // Overriding with empty body.
     },
 
     handleClick: function()
     {
         // Avoid consuming events.
     },
 
@@ skipping 206 matching lines @@
 
         var selectors = rule.selectors;
         var fragment = document.createDocumentFragment();
         var currentMatch = 0;
         for (var i = 0; i < selectors.length ; ++i) {
             if (i)
                 fragment.appendChild(document.createTextNode(", "));
             var isSelectorMatching = matchingSelectors[currentMatch] === i;
             if (isSelectorMatching)
                 ++currentMatch;
-            var rawLocation = new WebInspector.CSSLocation(WebInspector.cssModel.target(), rule.sourceURL, rule.lineNumberInSource(i), rule.columnNumberInSource(i));
+            var rawLocation = new WebInspector.CSSLocation(this._parentPane._target, rule.sourceURL, rule.lineNumberInSource(i), rule.columnNumberInSource(i));
             var matchingSelectorClass = isSelectorMatching ? " selector-matches" : "";
             var selectorElement = document.createElement("span");
             selectorElement.className = "simple-selector" + matchingSelectorClass;
             if (rule.id)
                 selectorElement._selectorIndex = i;
             selectorElement.textContent = selectors[i].value;
 
             fragment.appendChild(selectorElement);
         }
 
         this._selectorElement.removeChildren();
         this._selectorElement.appendChild(fragment);
         this._markSelectorHighlights();
     },
 
     _markSelectorHighlights: function()
     {
         var selectors = this._selectorElement.getElementsByClassName("simple-selector");
-        var regex = this.pane.filterRegex();
+        var regex = this._parentPane.filterRegex();
         for (var i = 0; i < selectors.length; ++i) {
             var selectorMatchesFilter = regex && regex.test(selectors[i].textContent);
             selectors[i].classList.toggle("filter-match", selectorMatchesFilter);
         }
     },
 
     _checkWillCancelEditing: function()
     {
         var willCauseCancelEditing = this._willCauseCancelEditing;
         delete this._willCauseCancelEditing;
@@ skipping 35 matching lines @@
         {
             var link = WebInspector.linkifyResourceAsNode(url, line, "", url + ":" + (line + 1));
             link.classList.add("webkit-html-resource-link");
             link.setAttribute("data-uncopyable", link.textContent);
             link.textContent = "";
             return link;
         }
 
         if (this.styleRule.sourceURL) {
             var firstMatchingIndex = this.styleRule.rule.matchingSelectors && this.rule.matchingSelectors.length ? this.rule.matchingSelectors[0] : 0;
-            var matchingSelectorLocation = new WebInspector.CSSLocation(WebInspector.cssModel.target(), this.styleRule.sourceURL, this.rule.lineNumberInSource(firstMatchingIndex), this.rule.columnNumberInSource(firstMatchingIndex));
+            var matchingSelectorLocation = new WebInspector.CSSLocation(this._parentPane._target, this.styleRule.sourceURL, this.rule.lineNumberInSource(firstMatchingIndex), this.rule.columnNumberInSource(firstMatchingIndex));
             return this._parentPane._linkifier.linkifyCSSLocation(this.rule.id.styleSheetId, matchingSelectorLocation) || linkifyUncopyable(this.styleRule.sourceURL, this.rule.lineNumberInSource());
         }
 
         if (!this.rule)
             return document.createTextNode("");
 
         if (this.rule.isUserAgent)
             return document.createTextNode(WebInspector.UIString("user agent stylesheet"));
         if (this.rule.isUser)
             return document.createTextNode(WebInspector.UIString("user stylesheet"));
@@ skipping 23 matching lines @@
             return;
         }
         this.expand();
         this.addNewBlankProperty().startEditing();
     },
 
     _handleSelectorClick: function(event)
     {
         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && this.navigable && event.target.classList.contains("simple-selector")) {
             var index = event.target._selectorIndex;
-            var styleSheetHeader = WebInspector.cssModel.styleSheetHeaderForId(this.rule.id.styleSheetId);
+            var styleSheetHeader = this._parentPane._target.cssModel.styleSheetHeaderForId(this.rule.id.styleSheetId);
             var uiLocation = styleSheetHeader.rawLocationToUILocation(this.rule.lineNumberInSource(index), this.rule.columnNumberInSource(index));
             WebInspector.Revealer.reveal(uiLocation);
             return;
         }
         this._startEditingOnMouseEvent();
         event.consume(true);
     },
 
     _startEditingOnMouseEvent: function()
     {
@@ skipping 59 matching lines @@
         this._editingSelectorEnded();
         if (newContent)
             newContent = newContent.trim();
         if (newContent === oldContent) {
             // Revert to a trimmed version of the selector if need be.
             this._selectorElement.textContent = newContent;
             this._moveEditorFromSelector(moveDirection);
             return;
         }
 
-        var selectedNode = this._parentPane.node;
+        var selectedNode = this._parentPane._node;
 
         /**
          * @param {!WebInspector.CSSRule} newRule
          * @this {WebInspector.StylePropertiesSection}
          */
         function successCallback(newRule)
         {
             var doesAffectSelectedNode = newRule.matchingSelectors.length > 0;
             if (!doesAffectSelectedNode) {
                 this.noAffect = true;
@@ skipping 16 matching lines @@
          * @this {WebInspector.StylePropertiesSection}
          */
         function finishOperationAndMoveEditor(direction)
         {
             delete this._parentPane._userOperation;
             this._moveEditorFromSelector(direction);
         }
 
         // This gets deleted in finishOperationAndMoveEditor(), which is called both on success and failure.
         this._parentPane._userOperation = true;
-        WebInspector.cssModel.setRuleSelector(this.rule.id, selectedNode ? selectedNode.id : 0, newContent, successCallback.bind(this), finishOperationAndMoveEditor.bind(this, moveDirection));
+        this._parentPane._target.cssModel.setRuleSelector(this.rule.id, selectedNode ? selectedNode.id : 0, newContent, successCallback.bind(this), finishOperationAndMoveEditor.bind(this, moveDirection));
     },
 
     _updateRuleOrigin: function()
     {
         this._selectorRefElement.removeChildren();
         this._selectorRefElement.appendChild(this._createRuleOriginNode());
     },
 
     _editingSelectorEnded: function()
     {
@@ skipping 218 matching lines @@
 
             delete this._parentPane._userOperation;
             this._editingSelectorEnded();
             this._markSelectorMatches();
         }
 
         if (newContent)
             newContent = newContent.trim();
         this._parentPane._userOperation = true;
 
-        WebInspector.cssModel.requestViaInspectorStylesheet(this.pane.node, viaInspectorCallback.bind(this));
+        var cssModel = this._parentPane._target.cssModel;
+        cssModel.requestViaInspectorStylesheet(this._parentPane._node, viaInspectorCallback.bind(this));
 
         /**
          * @this {WebInspector.BlankStylePropertiesSection}
          * @param {?WebInspector.CSSStyleSheetHeader} styleSheetHeader
          */
         function viaInspectorCallback(styleSheetHeader)
         {
             if (!styleSheetHeader) {
                 this.editingSelectorCancelled();
                 return;
             }
-            WebInspector.cssModel.addRule(styleSheetHeader.id, this.pane.node, newContent, successCallback.bind(this), this.editingSelectorCancelled.bind(this));
+            cssModel.addRule(styleSheetHeader.id, this._parentPane._node, newContent, successCallback.bind(this), this.editingSelectorCancelled.bind(this));
         }
     },
 
     editingSelectorCancelled: function()
     {
         delete this._parentPane._userOperation;
         if (!this.isBlank) {
             WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled.call(this);
             return;
         }
 
         this._editingSelectorEnded();
-        this.pane.removeSection(this);
+        this._parentPane.removeSection(this);
     },
 
     makeNormal: function(styleRule)
     {
         this.element.classList.remove("blank-section");
         this.styleRule = styleRule;
         this.rule = styleRule.rule;
 
         // FIXME: replace this instance by a normal WebInspector.StylePropertiesSection.
         this._normal = true;
@@ skipping 453 matching lines @@
     WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, false, false);
     this._stylesPane = stylesPane;
 }
 
 WebInspector.ComputedStylePropertyTreeElement.prototype = {
     /**
      * @return {?WebInspector.DOMNode}
      */
     node: function()
     {
-        return this._stylesPane.node;
+        return this._stylesPane._node;
     },
 
     /**
      * @return {?WebInspector.StylesSidebarPane}
      */
     editablePane: function()
     {
         return null;
     },
 
@@ skipping 31 matching lines @@
     this._parentPane = stylesPane;
     this.isShorthand = isShorthand;
 }
 
 WebInspector.StylePropertyTreeElement.prototype = {
     /**
      * @return {?WebInspector.DOMNode}
      */
     node: function()
     {
-        return this._parentPane.node;
+        return this._parentPane._node;
     },
 
     /**
      * @return {?WebInspector.StylesSidebarPane}
      */
     editablePane: function()
     {
         return this._parentPane;
     },
 
@@ skipping 12 matching lines @@
     {
         return this.treeOutline && this.treeOutline.section;
     },
 
     /**
      * @param {function()=} userCallback
      */
     _updatePane: function(userCallback)
     {
         var section = this.section();
-        if (section && section.pane)
-            section.pane._refreshUpdate(section, false, userCallback);
+        if (section && section._parentPane)
+            section._parentPane._refreshUpdate(section, false, userCallback);
         else  {
             if (userCallback)
                 userCallback();
         }
     },
 
     /**
      * @param {?Event} event
      */
     toggleEnabled: function(event)
     {
         var disabled = !event.target.checked;
 
         /**
          * @param {?WebInspector.CSSStyleDeclaration} newStyle
          * @this {WebInspector.StylePropertyTreeElement}
          */
         function callback(newStyle)
         {
             delete this._parentPane._userOperation;
 
             if (!newStyle)
                 return;
 
             newStyle.parentRule = this.style.parentRule;
             this.style = newStyle;
             this._styleRule.style = newStyle;
 
             var section = this.section();
-            if (section && section.pane)
-                section.pane.dispatchEventToListeners("style property toggled");
+            if (section && section._parentPane)
+                section._parentPane.dispatchEventToListeners("style property toggled");
 
             this._updatePane();
         }
 
         this._parentPane._userOperation = true;
         this.property.setDisabled(disabled, callback.bind(this));
         event.consume();
     },
 
     onpopulate: function()
@@ skipping 550 matching lines @@
         var section = this.section();
         styleText = styleText.replace(/\s/g, " ").trim(); // Replace &nbsp; with whitespace.
         var styleTextLength = styleText.length;
         if (!styleTextLength && updateInterface && !isRevert && this._newProperty && !this._hasBeenModifiedIncrementally()) {
             // The user deleted everything and never applied a new property value via Up/Down scrolling/live editing, so remove the tree element and update.
             this.parent.removeChild(this);
             section.afterUpdate();
             return;
         }
 
-        var currentNode = this._parentPane.node;
+        var currentNode = this._parentPane._node;
         if (updateInterface)
             this._parentPane._userOperation = true;
 
         /**
          * @param {function()} userCallback
          * @param {string} originalPropertyText
          * @param {?WebInspector.CSSStyleDeclaration} newStyle
          * @this {WebInspector.StylePropertyTreeElement}
          */
         function callback(userCallback, originalPropertyText, newStyle)
         {
             if (!newStyle) {
                 if (updateInterface) {
                     // It did not apply, cancel editing.
                     this._revertStyleUponEditingCanceled(originalPropertyText);
                 }
                 userCallback();
                 return;
             }
 
             if (this._newProperty)
                 this._newPropertyInStyle = true;
             newStyle.parentRule = this.style.parentRule;
             this.style = newStyle;
             this.property = newStyle.propertyAt(this.property.index);
             this._styleRule.style = this.style;
 
-            if (section && section.pane)
-                section.pane.dispatchEventToListeners("style edited");
+            if (section && section._parentPane)
+                section._parentPane.dispatchEventToListeners("style edited");
 
             if (updateInterface && currentNode === this.node()) {
                 this._updatePane(userCallback);
                 return;
             }
 
             userCallback();
         }
 
         // Append a ";" if the new text does not end in ";".
@@ skipping 143 matching lines @@
             return;
         }
 
         var results = this._cssCompletions.startsWith(prefix);
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }