DevTools: reuse computedstylesmodel in the elements sidebar base class.

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 35 matching lines @@
     this.element.classList.add("styles-pane");
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
     this._keyDownBound = this._keyDown.bind(this);
     this._keyUpBound = this._keyUp.bind(this);
 
      /** @type {!Array<!WebInspector.SectionBlock>} */
     this._sectionBlocks = [];
     WebInspector.StylesSidebarPane._instance = this;
 
     WebInspector.targetManager.addModelListener(WebInspector.CSSModel, WebInspector.CSSModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
+    WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this.onUndoOrRedoHappened, this);

[lushnikov, 2016/07/14 00:58:15]

s/onUndoOrRedoHappened/forceUpdate will make it easier to follow

[pfeldman, 2016/07/14 17:26:12]

Done.

 }
 
 /**
  * @param {!WebInspector.CSSProperty} property
  * @return {!Element}
  */
 WebInspector.StylesSidebarPane.createExclamationMark = function(property)
 {
     var exclamationElement = createElement("label", "dt-icon-label");
     exclamationElement.className = "exclamation-mark";
@@ skipping 62 matching lines @@
      */
     revealProperty: function(cssProperty)
     {
         this._decorator = new WebInspector.PropertyRevealHighlighter(this, cssProperty);
         this._decorator.perform();
         this.update();
     },
 
     onUndoOrRedoHappened: function()
     {
-        this.setNode(this.node());
+        this._stylesPopoverHelper.hide();
+        this._resetCache();
+        this.update();
     },
 
     /**
      * @param {!Event} event
      */
     _onAddButtonLongClick: function(event)
     {
         var cssModel = this.cssModel();
         if (!cssModel)
             return;
@@ skipping 45 matching lines @@
     /**
      * @param {?RegExp} regex
      */
     onFilterChanged: function(regex)
     {
         this._filterRegex = regex;
         this._updateFilter();
     },
 
     /**
-     * @override
-     * @param {?WebInspector.DOMNode} node
-     */
-    setNode: function(node)
-    {
-        this._stylesPopoverHelper.hide();
-        node = node ? node.enclosingElementOrSelf() : null;
-
-        this._resetCache();
-        WebInspector.ElementsSidebarPane.prototype.setNode.call(this, node);
-    },
-
-    /**
      * @param {!WebInspector.StylePropertiesSection=} editedSection
      */
     _refreshUpdate: function(editedSection)
     {
         var node = this.node();
         if (!node)
             return;
 
         var fullRefresh = Runtime.experiments.isEnabled("liveSASS");
         for (var section of this.allSections()) {
@@ skipping 57 matching lines @@
         this.element.classList.toggle("is-editing-style", editing);
         this._isEditingStyle = editing;
     },
 
     /**
      * @override
      * @param {!WebInspector.Event=} event
      */
     onCSSModelChanged: function(event)
     {
-        var edit = event && event.data ? /** @type {?WebInspector.CSSModel.Edit} */(event.data.edit) : null;
+        var edit = event && event.data && event.data.data ? /** @type {?WebInspector.CSSModel.Edit} */(event.data.data.edit) : null;
         if (edit) {
             for (var section of this.allSections())
                 section._styleSheetEdited(edit);
             return;
         }
 
         if (this._userOperation || this._isEditingStyle)
             return;
 
         this._resetCache();
         this.update();
     },
 
     /**
-     * @override
-     */
-    onFrameResizedThrottled: function()
-    {
-        this.onCSSModelChanged();
-    },
-
-    /**
-     * @override
-     * @param {!WebInspector.DOMNode} node
-     */
-    onDOMModelChanged: function(node)
-    {
-        // Any attribute removal or modification can affect the styles of "related" nodes.
-        // Do not touch the styles if they are being edited.
-        if (this._isEditingStyle || this._userOperation)
-            return;
-
-        if (!this._canAffectCurrentStyles(node))
-            return;
-
-        this._resetCache();
-        this.update();
-    },
-
-    /**
-     * @param {?WebInspector.DOMNode} node
-     */
-    _canAffectCurrentStyles: function(node)
-    {
-        var currentNode = this.node();
-        return currentNode && (currentNode === node || node.parentNode === currentNode.parentNode || node.isAncestor(currentNode));
-    },
-
-    /**
      * @param {?WebInspector.CSSMatchedStyles} matchedStyles
      */
     _innerRebuildUpdate: function(matchedStyles)
     {
         this._linkifier.reset();
         this._sectionsContainer.removeChildren();
         this._sectionBlocks = [];
 
         var node = this.node();
         if (!matchedStyles || !node)
@@ skipping 1029 matching lines @@
             if (success) {
                 this._matchedStyles.resetActiveProperties();
                 this._parentPane._refreshUpdate(this);
             }
             delete this._parentPane._userOperation;
             this._editingMediaTextCommittedForTest();
         }
 
         // This gets deleted in finishOperation(), which is called both on success and failure.
         this._parentPane._userOperation = true;
-        this._parentPane._cssModel.setMediaText(media.styleSheetId, media.range, newContent)
+        this._parentPane.cssModel().setMediaText(media.styleSheetId, media.range, newContent)
             .then(userCallback.bind(this));
     },
 
     _editingMediaTextCommittedForTest: function() { },
 
     /**
      * @param {!Event} event
      */
     _handleSelectorClick: function(event)
     {
         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event)) && this.navigable && event.target.classList.contains("simple-selector")) {
             this._navigateToSelectorSource(event.target._selectorIndex, true);
             event.consume(true);
             return;
         }
         this._startEditingOnMouseEvent();
         event.consume(true);
     },
 
     /**
      * @param {number} index
      * @param {boolean} focus
      */
     _navigateToSelectorSource: function(index, focus)
     {
-        var cssModel = this._parentPane._cssModel;
+        var cssModel = this._parentPane.cssModel();
         var rule = this._style.parentRule;
         var header = cssModel.styleSheetHeaderForId(/** @type {string} */(rule.styleSheetId));
         if (!header)
             return;
         var rawLocation = new WebInspector.CSSLocation(header, rule.lineNumberInSource(index), rule.columnNumberInSource(index));
         var uiLocation = WebInspector.cssWorkspaceBinding.rawLocationToUILocation(rawLocation);
         if (uiLocation)
             WebInspector.Revealer.reveal(uiLocation, !focus);
     },
 
@@ skipping 222 matching lines @@
  * @extends {WebInspector.StylePropertiesSection}
  * @param {!WebInspector.StylesSidebarPane} stylesPane
  * @param {!WebInspector.CSSMatchedStyles} matchedStyles
  * @param {string} defaultSelectorText
  * @param {string} styleSheetId
  * @param {!WebInspector.TextRange} ruleLocation
  * @param {!WebInspector.CSSStyleDeclaration} insertAfterStyle
  */
 WebInspector.BlankStylePropertiesSection = function(stylesPane, matchedStyles, defaultSelectorText, styleSheetId, ruleLocation, insertAfterStyle)
 {
-    var rule = WebInspector.CSSStyleRule.createDummyRule(stylesPane._cssModel, defaultSelectorText);
+    var cssModel = /** @type {!WebInspector.CSSModel} */(stylesPane.cssModel());
+    var rule = WebInspector.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
     WebInspector.StylePropertiesSection.call(this, stylesPane, matchedStyles, rule.style);
     this._ruleLocation = ruleLocation;
     this._styleSheetId = styleSheetId;
     this._selectorRefElement.removeChildren();
-    this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._linkifyRuleLocation(this._parentPane._cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLocation()));
+    this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._linkifyRuleLocation(cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLocation()));
     if (insertAfterStyle && insertAfterStyle.parentRule)
         this._createMediaList(insertAfterStyle.parentRule.media);
     this.element.classList.add("blank-section");
 }
 
 WebInspector.BlankStylePropertiesSection.prototype = {
     /**
      * @return {!WebInspector.TextRange}
      */
     _actualRuleLocation: function()
@@ skipping 71 matching lines @@
             this._editingSelectorEnded();
             this._markSelectorMatches();
 
             this._editingSelectorCommittedForTest();
         }
 
         if (newContent)
             newContent = newContent.trim();
         this._parentPane._userOperation = true;
 
-        var cssModel = this._parentPane._cssModel;
+        var cssModel = this._parentPane.cssModel();
         var ruleText = this._rulePrefix() + newContent + " {}";
         cssModel.addRule(this._styleSheetId, ruleText, this._ruleLocation)
             .then(onRuleAdded.bind(this));
     },
 
     editingSelectorCancelled: function()
     {
         delete this._parentPane._userOperation;
         if (!this.isBlank) {
             WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled.call(this);
@@ skipping 1383 matching lines @@
 
     /**
      * @override
      * @return {!WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }