Devtools: Synchronization state in ElementStatePaneWidget with contextMenu

Source/devtools/front_end/elements/ElementStatePaneWidget.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.StylesSidebarPane.BaseToolbarPaneWidget}
  * @param {!WebInspector.ToolbarItem} toolbarItem
  */
 WebInspector.ElementStatePaneWidget = function(toolbarItem)
@@ skipping 38 matching lines @@
 
     tr = table.createChild("tr");
     tr.appendChild(createCheckbox.call(null, "focus"));
     tr.appendChild(createCheckbox.call(null, "visited"));
 
     this.element.appendChild(table);
 }
 
 WebInspector.ElementStatePaneWidget.prototype = {
     /**
+     * @param {?WebInspector.Target} target
+     */
+    _updateTarget: function(target)
+    {
+        if (this._target === target)
+            return;
+
+        if (this._target) {
+            var cssModel = WebInspector.CSSStyleModel.fromTarget(this._target);
+            cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.PseudoStateForced, this._pseudoStateForced, this)
+        }
+        this._target = target;
+        if (target) {
+            var cssModel = WebInspector.CSSStyleModel.fromTarget(target);
+            cssModel.addEventListener(WebInspector.CSSStyleModel.Events.PseudoStateForced, this._pseudoStateForced, this)
+        }
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _pseudoStateForced: function(event)
+    {
+        var node = /** @type{!WebInspector.DOMNode} */(event.data.node);
+        if (node === WebInspector.context.flavor(WebInspector.DOMNode))
+            this._updateInputs(node);
+    },
+
+    /**
      * @override
      * @param {?WebInspector.DOMNode} newNode
      */
     onNodeChanged: function(newNode)
     {
+        this._updateTarget(newNode? newNode.target() : null);
         this.toolbarItem().setEnabled(!!newNode);
-        if (!newNode && this.isShowing()) {
-            this.detach();
+        if (!newNode) {
+            if (this.isShowing())
+                this.detach();
             return;
         }
+        this._updateInputs(newNode);
+    },
 
-        var nodePseudoState = newNode.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName) || [];
+    /**
+     * @param {!WebInspector.DOMNode} node
+     */
+    _updateInputs: function(node)
+    {
+        var nodePseudoState = node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName) || [];
         var inputs = this._inputs;
         for (var i = 0; i < inputs.length; ++i) {
-            inputs[i].disabled = !!newNode.pseudoType();
+            inputs[i].disabled = !!node.pseudoType();
             inputs[i].checked = nodePseudoState.indexOf(inputs[i].state) >= 0;
         }
     },
 
     __proto__: WebInspector.StylesSidebarPane.BaseToolbarPaneWidget.prototype
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ToolbarItem.Provider}
@@ skipping 14 matching lines @@
 
     /**
      * @override
      * @return {!WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }