third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js

   1 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @constructor
   7  * @extends {WebInspector.StylesSidebarPane.BaseToolbarPaneWidget}
   8  * @param {!WebInspector.ToolbarItem} toolbarItem
   9  */
  10 WebInspector.ElementStatePaneWidget = function(toolbarItem)
  11 {
  12     WebInspector.StylesSidebarPane.BaseToolbarPaneWidget.call(this, toolbarItem);
  13     this.element.className = "styles-element-state-pane";
  14     this.element.createChild("div").createTextChild(WebInspector.UIString("Force element state"));
  15     var table = createElementWithClass("table", "source-code");
  16
  17     var inputs = [];
  18     this._inputs = inputs;
  19
  20     /**
  21      * @param {!Event} event
  22      */
  23     function clickListener(event)
  24     {
  25         var node = WebInspector.context.flavor(WebInspector.DOMNode);
  26         if (!node)
  27             return;
  28         WebInspector.CSSStyleModel.fromNode(node).forcePseudoState(node, event.target.state, event.target.checked);
  29     }
  30
  31     /**
  32      * @param {string} state
  33      * @return {!Element}
  34      */
  35     function createCheckbox(state)
  36     {
  37         var td = createElement("td");
  38         var label = createCheckboxLabel(":" + state);
  39         var input = label.checkboxElement;
  40         input.state = state;
  41         input.addEventListener("click", clickListener, false);
  42         inputs.push(input);
  43         td.appendChild(label);
  44         return td;
  45     }
  46
  47     var tr = table.createChild("tr");
  48     tr.appendChild(createCheckbox.call(null, "active"));
  49     tr.appendChild(createCheckbox.call(null, "hover"));
  50
  51     tr = table.createChild("tr");
  52     tr.appendChild(createCheckbox.call(null, "focus"));
  53     tr.appendChild(createCheckbox.call(null, "visited"));
  54
  55     this.element.appendChild(table);
  56 }
  57
  58 WebInspector.ElementStatePaneWidget.prototype = {
  59     /**
  60      * @param {?WebInspector.Target} target
  61      */
  62     _updateTarget: function(target)
  63     {
  64         if (this._target === target)
  65             return;
  66
  67         if (this._target) {
  68             var cssModel = WebInspector.CSSStyleModel.fromTarget(this._target);
  69             cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.PseudoStateForced, this._pseudoStateForced, this)
  70         }
  71         this._target = target;
  72         if (target) {
  73             var cssModel = WebInspector.CSSStyleModel.fromTarget(target);
  74             cssModel.addEventListener(WebInspector.CSSStyleModel.Events.PseudoStateForced, this._pseudoStateForced, this)
  75         }
  76     },
  77
  78     /**
  79      * @param {!WebInspector.Event} event
  80      */
  81     _pseudoStateForced: function(event)
  82     {
  83         var node = /** @type{!WebInspector.DOMNode} */(event.data.node);
  84         if (node === WebInspector.context.flavor(WebInspector.DOMNode))
  85             this._updateInputs(node);
  86     },
  87
  88     /**
  89      * @override
  90      * @param {?WebInspector.DOMNode} newNode
  91      */
  92     onNodeChanged: function(newNode)
  93     {
  94         this._updateTarget(newNode? newNode.target() : null);
  95         if (newNode)
  96             this._updateInputs(newNode);
  97     },
  98
  99     /**
 100      * @param {!WebInspector.DOMNode} node
 101      */
 102     _updateInputs: function(node)
 103     {
 104         var nodePseudoState = WebInspector.CSSStyleModel.fromNode(node).pseudoState(node);
 105         var inputs = this._inputs;
 106         for (var i = 0; i < inputs.length; ++i) {
 107             inputs[i].disabled = !!node.pseudoType();
 108             inputs[i].checked = nodePseudoState.indexOf(inputs[i].state) >= 0;
 109         }
 110     },
 111
 112     __proto__: WebInspector.StylesSidebarPane.BaseToolbarPaneWidget.prototype
 113 }
 114
 115 /**
 116  * @constructor
 117  * @implements {WebInspector.ToolbarItem.Provider}
 118  */
 119 WebInspector.ElementStatePaneWidget.ButtonProvider = function()
 120 {
 121     this._button = new WebInspector.ToolbarButton(WebInspector.UIString("Toggle Element State"), "pin-toolbar-item");
 122     this._button.addEventListener("click", this._clicked, this);
 123     this._view = new WebInspector.ElementStatePaneWidget(this.item());
 124     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._nodeChanged, this);
 125     this._nodeChanged();
 126 }
 127
 128 WebInspector.ElementStatePaneWidget.ButtonProvider.prototype = {
 129     _clicked: function()
 130     {
 131         var stylesSidebarPane = WebInspector.ElementsPanel.instance().sidebarPanes.styles;
 132         stylesSidebarPane.showToolbarPane(!this._view.isShowing() ? this._view : null);
 133     },
 134
 135     /**
 136      * @override
 137      * @return {!WebInspector.ToolbarItem}
 138      */
 139     item: function()
 140     {
 141         return this._button;
 142     },
 143
 144     _nodeChanged: function()
 145     {
 146         var enabled = !!WebInspector.context.flavor(WebInspector.DOMNode);
 147         this._button.setEnabled(enabled);
 148         if (!enabled && this._button.toggled())
 149             WebInspector.ElementsPanel.instance().sidebarPanes.styles.showToolbarPane(null);
 150     }
 151 }