Devtools: Extensible toolbar in SSP

Source/devtools/front_end/elements/ElementStatePane.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.ElementStateView = function(toolbarItem)
+{
+    WebInspector.StylesSidebarPane.BaseToolbarPaneWidget.call(this, toolbarItem);
+    this.element.className = "styles-element-state-pane source-code";
+    var table = createElement("table");
+
+    var inputs = [];
+    this._inputs = inputs;
+
+    /**
+     * @param {!Event} event
+     */
+    function clickListener(event)
+    {
+        var node = WebInspector.context.flavor(WebInspector.DOMNode);
+        if (!node)
+            return;
+        WebInspector.CSSStyleModel.fromNode(node).forcePseudoState(node, event.target.state, event.target.checked);
+    }
+
+    /**
+     * @param {string} state
+     * @return {!Element}
+     */
+    function createCheckbox(state)
+    {
+        var td = createElement("td");
+        var label = createCheckboxLabel(":" + state);
+        var input = label.checkboxElement;
+        input.state = state;
+        input.addEventListener("click", clickListener, false);
+        inputs.push(input);
+        td.appendChild(label);
+        return td;
+    }
+
+    var tr = table.createChild("tr");
+    tr.appendChild(createCheckbox.call(null, "active"));
+    tr.appendChild(createCheckbox.call(null, "hover"));
+
+    tr = table.createChild("tr");
+    tr.appendChild(createCheckbox.call(null, "focus"));
+    tr.appendChild(createCheckbox.call(null, "visited"));
+
+    this.element.appendChild(table);
+}
+
+WebInspector.ElementStateView.prototype = {
+    /**
+     * @override

[lushnikov, 2015/05/29 10:53:12]

param

[sergeyv, 2015/05/29 12:53:40]

Done.

+     */
+    onNodeChanged: function(newNode)
+    {
+        if (!newNode)
+            return;
+
+        var nodePseudoState = newNode.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName);
+        if (!nodePseudoState)
+            nodePseudoState = [];
+
+        var inputs = this._inputs;
+        for (var i = 0; i < inputs.length; ++i)
+            inputs[i].checked = nodePseudoState.indexOf(inputs[i].state) >= 0;
+    },
+
+    __proto__: WebInspector.StylesSidebarPane.BaseToolbarPaneWidget.prototype
+}
+
+/**
+ * @constructor
+ * @implements {WebInspector.ToolbarItem.Provider}
+ */
+WebInspector.ElementStateView.ButtonProvider = function()
+{
+    this._button = new WebInspector.ToolbarButton(WebInspector.UIString("Toggle Element State"), "element-state-toolbar-item");
+    this._button.addEventListener("click", this._clicked, this);
+    WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._nodeChanged, this);
+    this._nodeChanged();
+}
+
+WebInspector.ElementStateView.ButtonProvider.prototype = {
+    _clicked: function()
+    {
+        if (!this._view)
+            this._view = new WebInspector.ElementStateView(this.item());
+
+        var stylesSidebarPane = WebInspector.ElementsPanel.instance().sidebarPanes.styles;
+        stylesSidebarPane.showToolbarPane(!this._view.isShowing() ? this._view : null);
+    },
+
+    _nodeChanged: function()
+    {
+        var node = WebInspector.context.flavor(WebInspector.DOMNode);
+        var enabled = !!node && !node.pseudoType();
+        this._button.setEnabled(!!enabled);

[lushnikov, 2015/05/29 10:53:12]

no need for !!

[sergeyv, 2015/05/29 12:53:40]

Done.

+        if (!enabled && this._view && this._view.isShowing()) {
+            var stylesSidebarPane = WebInspector.ElementsPanel.instance().sidebarPanes.styles;
+            stylesSidebarPane.showToolbarPane(null);
+        }
+    },
+
+    /**
+     * @override
+     * @return {!WebInspector.ToolbarItem}
+     */
+    item: function()
+    {
+        return this._button;
+    }
+}