| Index: third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js b/third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js
|
| index df5923f66e05ff429d867119fa25908dea2ca233..0e316000f1e0671457f8b1023eb17e219705dc3a 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js
|
| +++ b/third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js
|
| @@ -1,17 +1,15 @@
|
| // 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.Widget}
|
| + * @unrestricted
|
| */
|
| -WebInspector.ElementStatePaneWidget = function()
|
| -{
|
| - WebInspector.Widget.call(this);
|
| - this.element.className = "styles-element-state-pane";
|
| - this.element.createChild("div").createTextChild(WebInspector.UIString("Force element state"));
|
| - var table = createElementWithClass("table", "source-code");
|
| +WebInspector.ElementStatePaneWidget = class extends WebInspector.Widget {
|
| + constructor() {
|
| + super();
|
| + this.element.className = 'styles-element-state-pane';
|
| + this.element.createChild('div').createTextChild(WebInspector.UIString('Force element state'));
|
| + var table = createElementWithClass('table', 'source-code');
|
|
|
| var inputs = [];
|
| this._inputs = inputs;
|
| @@ -19,121 +17,111 @@ WebInspector.ElementStatePaneWidget = function()
|
| /**
|
| * @param {!Event} event
|
| */
|
| - function clickListener(event)
|
| - {
|
| - var node = WebInspector.context.flavor(WebInspector.DOMNode);
|
| - if (!node)
|
| - return;
|
| - WebInspector.CSSModel.fromNode(node).forcePseudoState(node, event.target.state, event.target.checked);
|
| + function clickListener(event) {
|
| + var node = WebInspector.context.flavor(WebInspector.DOMNode);
|
| + if (!node)
|
| + return;
|
| + WebInspector.CSSModel.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;
|
| + 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"));
|
| + 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"));
|
| + tr = table.createChild('tr');
|
| + tr.appendChild(createCheckbox.call(null, 'focus'));
|
| + tr.appendChild(createCheckbox.call(null, 'visited'));
|
|
|
| this.element.appendChild(table);
|
| WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._update, this);
|
| -};
|
| -
|
| -WebInspector.ElementStatePaneWidget.prototype = {
|
| - /**
|
| - * @param {?WebInspector.Target} target
|
| - */
|
| - _updateTarget: function(target)
|
| - {
|
| - if (this._target === target)
|
| - return;
|
| -
|
| - if (this._target) {
|
| - var cssModel = WebInspector.CSSModel.fromTarget(this._target);
|
| - cssModel.removeEventListener(WebInspector.CSSModel.Events.PseudoStateForced, this._update, this);
|
| - }
|
| - this._target = target;
|
| - if (target) {
|
| - var cssModel = WebInspector.CSSModel.fromTarget(target);
|
| - cssModel.addEventListener(WebInspector.CSSModel.Events.PseudoStateForced, this._update, this);
|
| - }
|
| - },
|
| -
|
| - /**
|
| - * @override
|
| - */
|
| - wasShown: function()
|
| - {
|
| - this._update();
|
| - },
|
| -
|
| - _update: function()
|
| - {
|
| - if (!this.isShowing())
|
| - return;
|
| -
|
| - var node = WebInspector.context.flavor(WebInspector.DOMNode);
|
| - if (node)
|
| - node = node.enclosingElementOrSelf();
|
| -
|
| - this._updateTarget(node ? node.target() : null);
|
| - if (node) {
|
| - var nodePseudoState = WebInspector.CSSModel.fromNode(node).pseudoState(node);
|
| - for (var input of this._inputs) {
|
| - input.disabled = !!node.pseudoType();
|
| - input.checked = nodePseudoState.indexOf(input.state) >= 0;
|
| - }
|
| - } else {
|
| - for (var input of this._inputs) {
|
| - input.disabled = true;
|
| - input.checked = false;
|
| - }
|
| - }
|
| - },
|
| -
|
| - __proto__: WebInspector.Widget.prototype
|
| + }
|
| +
|
| + /**
|
| + * @param {?WebInspector.Target} target
|
| + */
|
| + _updateTarget(target) {
|
| + if (this._target === target)
|
| + return;
|
| +
|
| + if (this._target) {
|
| + var cssModel = WebInspector.CSSModel.fromTarget(this._target);
|
| + cssModel.removeEventListener(WebInspector.CSSModel.Events.PseudoStateForced, this._update, this);
|
| + }
|
| + this._target = target;
|
| + if (target) {
|
| + var cssModel = WebInspector.CSSModel.fromTarget(target);
|
| + cssModel.addEventListener(WebInspector.CSSModel.Events.PseudoStateForced, this._update, this);
|
| + }
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + wasShown() {
|
| + this._update();
|
| + }
|
| +
|
| + _update() {
|
| + if (!this.isShowing())
|
| + return;
|
| +
|
| + var node = WebInspector.context.flavor(WebInspector.DOMNode);
|
| + if (node)
|
| + node = node.enclosingElementOrSelf();
|
| +
|
| + this._updateTarget(node ? node.target() : null);
|
| + if (node) {
|
| + var nodePseudoState = WebInspector.CSSModel.fromNode(node).pseudoState(node);
|
| + for (var input of this._inputs) {
|
| + input.disabled = !!node.pseudoType();
|
| + input.checked = nodePseudoState.indexOf(input.state) >= 0;
|
| + }
|
| + } else {
|
| + for (var input of this._inputs) {
|
| + input.disabled = true;
|
| + input.checked = false;
|
| + }
|
| + }
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| * @implements {WebInspector.ToolbarItem.Provider}
|
| + * @unrestricted
|
| */
|
| -WebInspector.ElementStatePaneWidget.ButtonProvider = function()
|
| -{
|
| - this._button = new WebInspector.ToolbarToggle(WebInspector.UIString("Toggle Element State"), "", WebInspector.UIString(":hov"));
|
| - this._button.addEventListener("click", this._clicked, this);
|
| - this._button.element.classList.add("monospace");
|
| +WebInspector.ElementStatePaneWidget.ButtonProvider = class {
|
| + constructor() {
|
| + this._button = new WebInspector.ToolbarToggle(
|
| + WebInspector.UIString('Toggle Element State'), '', WebInspector.UIString(':hov'));
|
| + this._button.addEventListener('click', this._clicked, this);
|
| + this._button.element.classList.add('monospace');
|
| this._view = new WebInspector.ElementStatePaneWidget();
|
| -};
|
| -
|
| -WebInspector.ElementStatePaneWidget.ButtonProvider.prototype = {
|
| - _clicked: function()
|
| - {
|
| - WebInspector.ElementsPanel.instance().showToolbarPane(!this._view.isShowing() ? this._view : null, this._button);
|
| - },
|
| -
|
| - /**
|
| - * @override
|
| - * @return {!WebInspector.ToolbarItem}
|
| - */
|
| - item: function()
|
| - {
|
| - return this._button;
|
| - }
|
| + }
|
| +
|
| + _clicked() {
|
| + WebInspector.ElementsPanel.instance().showToolbarPane(!this._view.isShowing() ? this._view : null, this._button);
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + * @return {!WebInspector.ToolbarItem}
|
| + */
|
| + item() {
|
| + return this._button;
|
| + }
|
| };
|
|
|