| Index: third_party/WebKit/Source/devtools/front_end/accessibility/ARIAAttributesView.js
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/accessibility/ARIAAttributesView.js b/third_party/WebKit/Source/devtools/front_end/accessibility/ARIAAttributesView.js
|
| index d4f8d15ef240952fcd51d2117c63e8770e91d529..6d975ecabf6c72115a245e520f1f1ff0e86745e4 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/accessibility/ARIAAttributesView.js
|
| +++ b/third_party/WebKit/Source/devtools/front_end/accessibility/ARIAAttributesView.js
|
| @@ -1,287 +1,263 @@
|
| // Copyright 2016 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.AccessibilitySubPane}
|
| + * @unrestricted
|
| */
|
| -WebInspector.ARIAAttributesPane = function()
|
| -{
|
| - WebInspector.AccessibilitySubPane.call(this, WebInspector.UIString("ARIA Attributes"));
|
| +WebInspector.ARIAAttributesPane = class extends WebInspector.AccessibilitySubPane {
|
| + constructor() {
|
| + super(WebInspector.UIString('ARIA Attributes'));
|
|
|
| - this._noPropertiesInfo = this.createInfo(WebInspector.UIString("No ARIA attributes"));
|
| + this._noPropertiesInfo = this.createInfo(WebInspector.UIString('No ARIA attributes'));
|
| this._treeOutline = this.createTreeOutline();
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + * @param {?WebInspector.DOMNode} node
|
| + */
|
| + setNode(node) {
|
| + super.setNode(node);
|
| + this._treeOutline.removeChildren();
|
| + if (!this.node())
|
| + return;
|
| + var target = this.node().target();
|
| + var attributes = node.attributes();
|
| + for (var i = 0; i < attributes.length; ++i) {
|
| + var attribute = attributes[i];
|
| + if (WebInspector.ARIAAttributesPane._attributes.indexOf(attribute.name) < 0)
|
| + continue;
|
| + this._treeOutline.appendChild(new WebInspector.ARIAAttributesTreeElement(this, attribute, target));
|
| + }
|
| +
|
| + var foundAttributes = (this._treeOutline.rootElement().childCount() !== 0);
|
| + this._noPropertiesInfo.classList.toggle('hidden', foundAttributes);
|
| + this._treeOutline.element.classList.toggle('hidden', !foundAttributes);
|
| + }
|
| };
|
|
|
| -
|
| -WebInspector.ARIAAttributesPane.prototype = {
|
| - /**
|
| - * @override
|
| - * @param {?WebInspector.DOMNode} node
|
| - */
|
| - setNode: function(node)
|
| - {
|
| - WebInspector.AccessibilitySubPane.prototype.setNode.call(this, node);
|
| - this._treeOutline.removeChildren();
|
| - if (!this.node())
|
| - return;
|
| - var target = this.node().target();
|
| - var attributes = node.attributes();
|
| - for (var i = 0; i < attributes.length; ++i) {
|
| - var attribute = attributes[i];
|
| - if (WebInspector.ARIAAttributesPane._attributes.indexOf(attribute.name) < 0)
|
| - continue;
|
| - this._treeOutline.appendChild(new WebInspector.ARIAAttributesTreeElement(this, attribute, target));
|
| - }
|
| -
|
| - var foundAttributes = (this._treeOutline.rootElement().childCount() !== 0);
|
| - this._noPropertiesInfo.classList.toggle("hidden", foundAttributes);
|
| - this._treeOutline.element.classList.toggle("hidden", !foundAttributes);
|
| - },
|
| -
|
| - __proto__: WebInspector.AccessibilitySubPane.prototype
|
| -};
|
| -
|
| -
|
| /**
|
| - * @constructor
|
| - * @extends {TreeElement}
|
| - * @param {!WebInspector.ARIAAttributesPane} parentPane
|
| - * @param {!WebInspector.DOMNode.Attribute} attribute
|
| - * @param {!WebInspector.Target} target
|
| + * @unrestricted
|
| */
|
| -WebInspector.ARIAAttributesTreeElement = function(parentPane, attribute, target)
|
| -{
|
| - TreeElement.call(this, "");
|
| +WebInspector.ARIAAttributesTreeElement = class extends TreeElement {
|
| + /**
|
| + * @param {!WebInspector.ARIAAttributesPane} parentPane
|
| + * @param {!WebInspector.DOMNode.Attribute} attribute
|
| + * @param {!WebInspector.Target} target
|
| + */
|
| + constructor(parentPane, attribute, target) {
|
| + super('');
|
|
|
| this._parentPane = parentPane;
|
| this._attribute = attribute;
|
|
|
| this.selectable = false;
|
| -};
|
| -
|
| -WebInspector.ARIAAttributesTreeElement.prototype = {
|
| - /**
|
| - * @override
|
| - */
|
| - onattach: function()
|
| - {
|
| - this._populateListItem();
|
| - this.listItemElement.addEventListener("click", this._mouseClick.bind(this));
|
| - },
|
| -
|
| - _populateListItem: function()
|
| - {
|
| - this.listItemElement.removeChildren();
|
| - this.appendNameElement(this._attribute.name);
|
| - this.listItemElement.createChild("span", "separator").textContent = ":\u00A0";
|
| - this.appendAttributeValueElement(this._attribute.value);
|
| - },
|
| -
|
| - /**
|
| - * @param {string} name
|
| - */
|
| - appendNameElement: function(name)
|
| - {
|
| - this._nameElement = createElement("span");
|
| - this._nameElement.textContent = name;
|
| - this._nameElement.classList.add("ax-name");
|
| - this._nameElement.classList.add("monospace");
|
| - this.listItemElement.appendChild(this._nameElement);
|
| - },
|
| -
|
| - /**
|
| - * @param {string} value
|
| - */
|
| - appendAttributeValueElement: function(value)
|
| - {
|
| - this._valueElement = WebInspector.ARIAAttributesTreeElement.createARIAValueElement(value);
|
| - this.listItemElement.appendChild(this._valueElement);
|
| - },
|
| -
|
| - /**
|
| - * @param {!Event} event
|
| - */
|
| - _mouseClick: function(event)
|
| - {
|
| - if (event.target === this.listItemElement)
|
| - return;
|
| -
|
| - event.consume(true);
|
| -
|
| - this._startEditing();
|
| - },
|
| -
|
| - _startEditing: function()
|
| - {
|
| - var valueElement = this._valueElement;
|
| -
|
| - if (WebInspector.isBeingEdited(valueElement))
|
| - return;
|
| -
|
| - var previousContent = valueElement.textContent;
|
| -
|
| - /**
|
| - * @param {string} previousContent
|
| - * @param {!Event} event
|
| - * @this {WebInspector.ARIAAttributesTreeElement}
|
| - */
|
| - function blurListener(previousContent, event)
|
| - {
|
| - var text = event.target.textContent;
|
| - this._editingCommitted(text, previousContent);
|
| - }
|
| -
|
| - this._prompt = new WebInspector.ARIAAttributesPane.ARIAAttributePrompt(WebInspector.ariaMetadata().valuesForProperty(this._nameElement.textContent), this);
|
| - this._prompt.setAutocompletionTimeout(0);
|
| - var proxyElement = this._prompt.attachAndStartEditing(valueElement, blurListener.bind(this, previousContent));
|
| -
|
| - proxyElement.addEventListener("keydown", this._editingValueKeyDown.bind(this, previousContent), false);
|
| -
|
| - valueElement.getComponentSelection().setBaseAndExtent(valueElement, 0, valueElement, 1);
|
| - },
|
| -
|
| - _removePrompt: function()
|
| - {
|
| - if (!this._prompt)
|
| - return;
|
| - this._prompt.detach();
|
| - delete this._prompt;
|
| - },
|
| -
|
| - /**
|
| - * @param {string} userInput
|
| - * @param {string} previousContent
|
| - */
|
| - _editingCommitted: function(userInput, previousContent)
|
| - {
|
| - this._removePrompt();
|
| -
|
| - // Make the changes to the attribute
|
| - if (userInput !== previousContent)
|
| - this._parentPane.node().setAttributeValue(this._attribute.name, userInput);
|
| - },
|
| -
|
| - _editingCancelled: function()
|
| - {
|
| - this._removePrompt();
|
| - this._populateListItem();
|
| - },
|
| + }
|
| +
|
| + /**
|
| + * @param {string} value
|
| + * @return {!Element}
|
| + */
|
| + static createARIAValueElement(value) {
|
| + var valueElement = createElementWithClass('span', 'monospace');
|
| + // TODO(aboxhall): quotation marks?
|
| + valueElement.setTextContentTruncatedIfNeeded(value || '');
|
| + return valueElement;
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + onattach() {
|
| + this._populateListItem();
|
| + this.listItemElement.addEventListener('click', this._mouseClick.bind(this));
|
| + }
|
| +
|
| + _populateListItem() {
|
| + this.listItemElement.removeChildren();
|
| + this.appendNameElement(this._attribute.name);
|
| + this.listItemElement.createChild('span', 'separator').textContent = ':\u00A0';
|
| + this.appendAttributeValueElement(this._attribute.value);
|
| + }
|
| +
|
| + /**
|
| + * @param {string} name
|
| + */
|
| + appendNameElement(name) {
|
| + this._nameElement = createElement('span');
|
| + this._nameElement.textContent = name;
|
| + this._nameElement.classList.add('ax-name');
|
| + this._nameElement.classList.add('monospace');
|
| + this.listItemElement.appendChild(this._nameElement);
|
| + }
|
| +
|
| + /**
|
| + * @param {string} value
|
| + */
|
| + appendAttributeValueElement(value) {
|
| + this._valueElement = WebInspector.ARIAAttributesTreeElement.createARIAValueElement(value);
|
| + this.listItemElement.appendChild(this._valueElement);
|
| + }
|
| +
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + _mouseClick(event) {
|
| + if (event.target === this.listItemElement)
|
| + return;
|
| +
|
| + event.consume(true);
|
| +
|
| + this._startEditing();
|
| + }
|
| +
|
| + _startEditing() {
|
| + var valueElement = this._valueElement;
|
| +
|
| + if (WebInspector.isBeingEdited(valueElement))
|
| + return;
|
| +
|
| + var previousContent = valueElement.textContent;
|
|
|
| /**
|
| * @param {string} previousContent
|
| * @param {!Event} event
|
| + * @this {WebInspector.ARIAAttributesTreeElement}
|
| */
|
| - _editingValueKeyDown: function(previousContent, event)
|
| - {
|
| - if (event.handled)
|
| - return;
|
| -
|
| - if (isEnterKey(event)) {
|
| - this._editingCommitted(event.target.textContent, previousContent);
|
| - event.consume();
|
| - return;
|
| - }
|
| -
|
| - if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B") {
|
| - this._editingCancelled();
|
| - event.consume();
|
| - return;
|
| - }
|
| - },
|
| -
|
| - __proto__: TreeElement.prototype
|
| + function blurListener(previousContent, event) {
|
| + var text = event.target.textContent;
|
| + this._editingCommitted(text, previousContent);
|
| + }
|
| +
|
| + this._prompt = new WebInspector.ARIAAttributesPane.ARIAAttributePrompt(
|
| + WebInspector.ariaMetadata().valuesForProperty(this._nameElement.textContent), this);
|
| + this._prompt.setAutocompletionTimeout(0);
|
| + var proxyElement = this._prompt.attachAndStartEditing(valueElement, blurListener.bind(this, previousContent));
|
| +
|
| + proxyElement.addEventListener('keydown', this._editingValueKeyDown.bind(this, previousContent), false);
|
| +
|
| + valueElement.getComponentSelection().setBaseAndExtent(valueElement, 0, valueElement, 1);
|
| + }
|
| +
|
| + _removePrompt() {
|
| + if (!this._prompt)
|
| + return;
|
| + this._prompt.detach();
|
| + delete this._prompt;
|
| + }
|
| +
|
| + /**
|
| + * @param {string} userInput
|
| + * @param {string} previousContent
|
| + */
|
| + _editingCommitted(userInput, previousContent) {
|
| + this._removePrompt();
|
| +
|
| + // Make the changes to the attribute
|
| + if (userInput !== previousContent)
|
| + this._parentPane.node().setAttributeValue(this._attribute.name, userInput);
|
| + }
|
| +
|
| + _editingCancelled() {
|
| + this._removePrompt();
|
| + this._populateListItem();
|
| + }
|
| +
|
| + /**
|
| + * @param {string} previousContent
|
| + * @param {!Event} event
|
| + */
|
| + _editingValueKeyDown(previousContent, event) {
|
| + if (event.handled)
|
| + return;
|
| +
|
| + if (isEnterKey(event)) {
|
| + this._editingCommitted(event.target.textContent, previousContent);
|
| + event.consume();
|
| + return;
|
| + }
|
| +
|
| + if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === 'U+001B') {
|
| + this._editingCancelled();
|
| + event.consume();
|
| + return;
|
| + }
|
| + }
|
| };
|
|
|
| -/**
|
| - * @param {string} value
|
| - * @return {!Element}
|
| - */
|
| -WebInspector.ARIAAttributesTreeElement.createARIAValueElement = function(value)
|
| -{
|
| - var valueElement = createElementWithClass("span", "monospace");
|
| - // TODO(aboxhall): quotation marks?
|
| - valueElement.setTextContentTruncatedIfNeeded(value || "");
|
| - return valueElement;
|
| -};
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.TextPrompt}
|
| - * @param {!Array<string>} ariaCompletions
|
| - * @param {!WebInspector.ARIAAttributesTreeElement} treeElement
|
| + * @unrestricted
|
| */
|
| -WebInspector.ARIAAttributesPane.ARIAAttributePrompt = function(ariaCompletions, treeElement)
|
| -{
|
| - WebInspector.TextPrompt.call(this);
|
| +WebInspector.ARIAAttributesPane.ARIAAttributePrompt = class extends WebInspector.TextPrompt {
|
| + /**
|
| + * @param {!Array<string>} ariaCompletions
|
| + * @param {!WebInspector.ARIAAttributesTreeElement} treeElement
|
| + */
|
| + constructor(ariaCompletions, treeElement) {
|
| + super();
|
| this.initialize(this._buildPropertyCompletions.bind(this));
|
|
|
| this.setSuggestBoxEnabled(true);
|
|
|
| this._ariaCompletions = ariaCompletions;
|
| this._treeElement = treeElement;
|
| + }
|
| +
|
| + /**
|
| + * @param {!Element} proxyElement
|
| + * @param {!Range} wordRange
|
| + * @param {boolean} force
|
| + * @param {function(!Array.<string>, number=)} completionsReadyCallback
|
| + */
|
| + _buildPropertyCompletions(proxyElement, wordRange, force, completionsReadyCallback) {
|
| + var prefix = wordRange.toString().toLowerCase();
|
| + if (!prefix && !force && (this._isEditingName || proxyElement.textContent.length)) {
|
| + completionsReadyCallback([]);
|
| + return;
|
| + }
|
| +
|
| + var results = this._ariaCompletions.filter((value) => value.startsWith(prefix));
|
| +
|
| + completionsReadyCallback(results, 0);
|
| + }
|
| };
|
|
|
| -WebInspector.ARIAAttributesPane.ARIAAttributePrompt.prototype = {
|
| - /**
|
| - * @param {!Element} proxyElement
|
| - * @param {!Range} wordRange
|
| - * @param {boolean} force
|
| - * @param {function(!Array.<string>, number=)} completionsReadyCallback
|
| - */
|
| - _buildPropertyCompletions: function(proxyElement, wordRange, force, completionsReadyCallback)
|
| - {
|
| - var prefix = wordRange.toString().toLowerCase();
|
| - if (!prefix && !force && (this._isEditingName || proxyElement.textContent.length)) {
|
| - completionsReadyCallback([]);
|
| - return;
|
| - }
|
| -
|
| - var results = this._ariaCompletions.filter((value) => value.startsWith(prefix));
|
| -
|
| - completionsReadyCallback(results, 0);
|
| - },
|
| -
|
| - __proto__: WebInspector.TextPrompt.prototype
|
| -};
|
| -
|
| -
|
| WebInspector.ARIAAttributesPane._attributes = [
|
| - "role",
|
| - "aria-busy",
|
| - "aria-checked",
|
| - "aria-disabled",
|
| - "aria-expanded",
|
| - "aria-grabbed",
|
| - "aria-hidden",
|
| - "aria-invalid",
|
| - "aria-pressed",
|
| - "aria-selected",
|
| - "aria-activedescendant",
|
| - "aria-atomic",
|
| - "aria-autocomplete",
|
| - "aria-controls",
|
| - "aria-describedby",
|
| - "aria-dropeffect",
|
| - "aria-flowto",
|
| - "aria-haspopup",
|
| - "aria-label",
|
| - "aria-labelledby",
|
| - "aria-level",
|
| - "aria-live",
|
| - "aria-multiline",
|
| - "aria-multiselectable",
|
| - "aria-orientation",
|
| - "aria-owns",
|
| - "aria-posinset",
|
| - "aria-readonly",
|
| - "aria-relevant",
|
| - "aria-required",
|
| - "aria-setsize",
|
| - "aria-sort",
|
| - "aria-valuemax",
|
| - "aria-valuemin",
|
| - "aria-valuenow",
|
| - "aria-valuetext",
|
| + 'role',
|
| + 'aria-busy',
|
| + 'aria-checked',
|
| + 'aria-disabled',
|
| + 'aria-expanded',
|
| + 'aria-grabbed',
|
| + 'aria-hidden',
|
| + 'aria-invalid',
|
| + 'aria-pressed',
|
| + 'aria-selected',
|
| + 'aria-activedescendant',
|
| + 'aria-atomic',
|
| + 'aria-autocomplete',
|
| + 'aria-controls',
|
| + 'aria-describedby',
|
| + 'aria-dropeffect',
|
| + 'aria-flowto',
|
| + 'aria-haspopup',
|
| + 'aria-label',
|
| + 'aria-labelledby',
|
| + 'aria-level',
|
| + 'aria-live',
|
| + 'aria-multiline',
|
| + 'aria-multiselectable',
|
| + 'aria-orientation',
|
| + 'aria-owns',
|
| + 'aria-posinset',
|
| + 'aria-readonly',
|
| + 'aria-relevant',
|
| + 'aria-required',
|
| + 'aria-setsize',
|
| + 'aria-sort',
|
| + 'aria-valuemax',
|
| + 'aria-valuemin',
|
| + 'aria-valuenow',
|
| + 'aria-valuetext',
|
| ];
|
|
|