Fix internal bindings in ui/
These were some left-over fixes that regressed while doing phase 3 of
ESM. It includes fixing the typedefs in ui-legacy to be in the proper
file and exported.
Bug: 1006759
Change-Id: Ie398fcec632bcaf6462b44581213f5e6c45882de
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2055066
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
diff --git a/front_end/changes/ChangesTextEditor.js b/front_end/changes/ChangesTextEditor.js
index ea114ca..62e9b97 100644
--- a/front_end/changes/ChangesTextEditor.js
+++ b/front_end/changes/ChangesTextEditor.js
@@ -3,6 +3,7 @@
// found in the LICENSE file.
import * as TextEditor from '../text_editor/text_editor.js';
+import * as UI from '../ui/ui.js'; // eslint-disable-line no-unused-vars
import {RowType} from './ChangesView.js';
diff --git a/front_end/ui/Dialog.js b/front_end/ui/Dialog.js
index 2d0ccb5..17aaccc 100644
--- a/front_end/ui/Dialog.js
+++ b/front_end/ui/Dialog.js
@@ -28,6 +28,7 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
+import * as ARIAUtils from './ARIAUtils.js';
import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
import {SplitWidget} from './SplitWidget.js'; // eslint-disable-line no-unused-vars
@@ -45,7 +46,7 @@
this.hide();
event.consume(true);
});
- UI.ARIAUtils.markAsModalDialog(this.contentElement);
+ ARIAUtils.markAsModalDialog(this.contentElement);
/** @type {!OutsideTabIndexBehavior} */
this._tabIndexBehavior = OutsideTabIndexBehavior.DisableAllOutsideTabIndex;
/** @type {!Map<!HTMLElement, number>} */
diff --git a/front_end/ui/FilterBar.js b/front_end/ui/FilterBar.js
index 0c0e0ec..45ed8ef 100644
--- a/front_end/ui/FilterBar.js
+++ b/front_end/ui/FilterBar.js
@@ -31,8 +31,10 @@
import * as Common from '../common/common.js';
import * as Host from '../host/host.js';
+import * as ARIAUtils from './ARIAUtils.js';
import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
import {bindCheckbox} from './SettingsUI.js';
+import {Suggestions} from './SuggestBox.js'; // eslint-disable-line no-unused-vars
import {Events, TextPrompt} from './TextPrompt.js';
import {ToolbarButton, ToolbarSettingToggle} from './Toolbar.js'; // eslint-disable-line no-unused-vars
import {CheckboxLabel} from './UIUtils.js';
@@ -205,7 +207,7 @@
this._prompt.setPlaceholder(Common.UIString.UIString('Filter'));
this._prompt.addEventListener(Events.TextChanged, this._valueChanged.bind(this));
- /** @type {?function(string, string, boolean=):!Promise<!UI.SuggestBox.Suggestions>} */
+ /** @type {?function(string, string, boolean=):!Promise<!Suggestions>} */
this._suggestionProvider = null;
}
@@ -213,7 +215,7 @@
* @param {string} expression
* @param {string} prefix
* @param {boolean=} force
- * @return {!Promise<!UI.SuggestBox.Suggestions>}
+ * @return {!Promise<!Suggestions>}
*/
_completions(expression, prefix, force) {
if (this._suggestionProvider) {
@@ -257,7 +259,7 @@
}
/**
- * @param {(function(string, string, boolean=):!Promise<!UI.SuggestBox.Suggestions>)} suggestionProvider
+ * @param {(function(string, string, boolean=):!Promise<!Suggestions>)} suggestionProvider
*/
setSuggestionProvider(suggestionProvider) {
this._prompt.clearAutocomplete();
@@ -281,8 +283,8 @@
constructor(items, setting) {
super();
this._filtersElement = createElementWithClass('div', 'filter-bitset-filter');
- UI.ARIAUtils.markAsListBox(this._filtersElement);
- UI.ARIAUtils.markAsMultiSelectable(this._filtersElement);
+ ARIAUtils.markAsListBox(this._filtersElement);
+ ARIAUtils.markAsMultiSelectable(this._filtersElement);
this._filtersElement.title = Common.UIString.UIString(
'%sClick to select multiple types', KeyboardShortcut.shortcutToString('', Modifiers.CtrlOrMeta));
@@ -354,7 +356,7 @@
const typeName = element.typeName;
const active = !!this._allowedTypes[typeName];
element.classList.toggle('selected', active);
- UI.ARIAUtils.setSelected(element, active);
+ ARIAUtils.setSelected(element, active);
}
this.dispatchEventToListeners(FilterUI.Events.FilterChanged, null);
}
@@ -369,7 +371,7 @@
typeFilterElement.tabIndex = -1;
typeFilterElement.typeName = name;
typeFilterElement.createTextChild(label);
- UI.ARIAUtils.markAsOption(typeFilterElement);
+ ARIAUtils.markAsOption(typeFilterElement);
if (title) {
typeFilterElement.title = title;
}
diff --git a/front_end/ui/FilterSuggestionBuilder.js b/front_end/ui/FilterSuggestionBuilder.js
index 8bf2453..84cdda4 100644
--- a/front_end/ui/FilterSuggestionBuilder.js
+++ b/front_end/ui/FilterSuggestionBuilder.js
@@ -2,6 +2,8 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
+import {Suggestions} from './SuggestBox.js'; // eslint-disable-line no-unused-vars
+
export class FilterSuggestionBuilder {
/**
* @param {!Array<string>} keys
@@ -18,7 +20,7 @@
* @param {string} expression
* @param {string} prefix
* @param {boolean=} force
- * @return {!Promise<!UI.SuggestBox.Suggestions>}
+ * @return {!Promise<!Suggestions>}
*/
completions(expression, prefix, force) {
if (!prefix && !force) {
diff --git a/front_end/ui/Fragment.js b/front_end/ui/Fragment.js
index e71aaad..aba2f2f 100644
--- a/front_end/ui/Fragment.js
+++ b/front_end/ui/Fragment.js
@@ -53,7 +53,7 @@
/**
* @param {!Array<string>} strings
- * @return {!Fragment._Template}
+ * @return {!_Template}
* @suppressGlobalPropertiesCheck
*/
static _template(strings) {
@@ -143,7 +143,7 @@
}
/**
- * @param {!Fragment._Template} template
+ * @param {!_Template} template
* @param {!Array<*>} values
* @return {!Fragment}
*/
@@ -232,3 +232,26 @@
export const html = (strings, ...vararg) => {
return Fragment.cached(strings, ...vararg).element();
};
+
+/**
+ * @typedef {!{
+ * elementId: (string|undefined),
+ *
+ * attr: (!{
+ * index: number,
+ * names: !Array<string>,
+ * values: !Array<string>
+ * }|undefined),
+ *
+ * replaceNodeIndex: (number|undefined)
+ * }}
+ */
+export let _Bind;
+
+/**
+ * @typedef {!{
+ * template: !Element,
+ * binds: !Array<!_Bind>
+ * }}
+ */
+export let _Template;
diff --git a/front_end/ui/Icon.js b/front_end/ui/Icon.js
index baa0353..a823770 100644
--- a/front_end/ui/Icon.js
+++ b/front_end/ui/Icon.js
@@ -7,9 +7,9 @@
export class Icon extends HTMLSpanElement {
constructor() {
super();
- /** @type {?Icon.Descriptor} */
+ /** @type {?Descriptor} */
this._descriptor = null;
- /** @type {?Icon.SpriteSheet} */
+ /** @type {?SpriteSheet} */
this._spriteSheet = null;
/** @type {string} */
this._iconType = '';
@@ -96,7 +96,7 @@
const _positionRegex = /^[a-z][1-9][0-9]*$/;
-/** @enum {!Icon.SpriteSheet} */
+/** @enum {!SpriteSheet} */
const SpriteSheets = {
'smallicons': {cellWidth: 10, cellHeight: 10, padding: 10},
'mediumicons': {cellWidth: 16, cellHeight: 16, padding: 0},
@@ -104,7 +104,7 @@
'arrowicons': {cellWidth: 19, cellHeight: 19, padding: 0}
};
-/** @enum {!Icon.Descriptor} */
+/** @enum {!Descriptor} */
export const Descriptors = {
'smallicon-bezier': {position: 'a5', spritesheet: 'smallicons', isMask: true},
'smallicon-checkmark': {position: 'b5', spritesheet: 'smallicons'},
@@ -254,3 +254,9 @@
'mediumicon-arrow-left': {position: 'a2', spritesheet: 'arrowicons'},
'mediumicon-arrow-right': {position: 'a1', spritesheet: 'arrowicons'}
};
+
+/** @typedef {{position: string, spritesheet: string, isMask: (boolean|undefined), coordinates: ({x: number, y: number}|undefined), invert: (boolean|undefined)}} */
+export let Descriptor;
+
+/** @typedef {{cellWidth: number, cellHeight: number, padding: number}} */
+export let SpriteSheet;
diff --git a/front_end/ui/InplaceEditor.js b/front_end/ui/InplaceEditor.js
index 8a067fc..e279e7d 100644
--- a/front_end/ui/InplaceEditor.js
+++ b/front_end/ui/InplaceEditor.js
@@ -2,6 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
+import * as ARIAUtils from './ARIAUtils.js';
import {Keys} from './KeyboardShortcut.js';
import {ElementFocusRestorer, markBeingEdited} from './UIUtils.js';
@@ -12,7 +13,7 @@
/**
* @param {!Element} element
* @param {!InplaceEditor.Config=} config
- * @return {?InplaceEditor.Controller}
+ * @return {?Controller}
*/
static startEditing(element, config) {
if (!InplaceEditor._defaultInstance) {
@@ -39,7 +40,7 @@
element.setAttribute('contenteditable', 'plaintext-only');
const oldRole = element.getAttribute('role');
- UI.ARIAUtils.markAsTextBox(element);
+ ARIAUtils.markAsTextBox(element);
editingContext.oldRole = oldRole;
const oldTabIndex = element.getAttribute('tabIndex');
@@ -85,7 +86,7 @@
/**
* @param {!Element} element
* @param {!InplaceEditor.Config=} config
- * @return {?InplaceEditor.Controller}
+ * @return {?Controller}
*/
startEditing(element, config) {
if (!markBeingEdited(element, true)) {
@@ -246,3 +247,8 @@
this.postKeydownFinishHandler = postKeydownFinishHandler;
}
}
+
+/**
+ * @typedef {{cancel: function(), commit: function()}}
+ */
+export let Controller;
diff --git a/front_end/ui/KeyboardShortcut.js b/front_end/ui/KeyboardShortcut.js
index e4e3021..371b791 100644
--- a/front_end/ui/KeyboardShortcut.js
+++ b/front_end/ui/KeyboardShortcut.js
@@ -99,9 +99,9 @@
}
/**
- * @param {string|!UI.KeyboardShortcut.Key} key
+ * @param {string|!Key} key
* @param {number=} modifiers
- * @return {!KeyboardShortcut.Descriptor}
+ * @return {!Descriptor}
*/
static makeDescriptor(key, modifiers) {
return {
@@ -112,7 +112,7 @@
/**
* @param {string} shortcut
- * @return {?KeyboardShortcut.Descriptor}
+ * @return {?Descriptor}
*/
static makeDescriptorFromBindingShortcut(shortcut) {
const parts = shortcut.split(/\+(?!$)/);
@@ -141,7 +141,7 @@
}
/**
- * @param {string|!UI.KeyboardShortcut.Key} key
+ * @param {string|!Key} key
* @param {number=} modifiers
* @return {string}
*/
@@ -150,7 +150,7 @@
}
/**
- * @param {string|!UI.KeyboardShortcut.Key} key
+ * @param {string|!Key} key
* @return {string}
*/
static _keyName(key) {
@@ -223,7 +223,7 @@
}
};
-/** @type {!Object.<string, !UI.KeyboardShortcut.Key>} */
+/** @type {!Object.<string, !Key>} */
export const Keys = {
Backspace: {code: 8, name: '\u21a4'},
Tab: {code: 9, name: {mac: '\u21e5', other: 'Tab'}},
@@ -292,5 +292,8 @@
}
})();
+/** @typedef {!{code: number, name: (string|!Object.<string, string>)}} */
+export let Key;
+
/** @typedef {!{key: number, name: string}} */
export let Descriptor;
diff --git a/front_end/ui/ListControl.js b/front_end/ui/ListControl.js
index 4d8e73c..cb41774 100644
--- a/front_end/ui/ListControl.js
+++ b/front_end/ui/ListControl.js
@@ -2,6 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
+import * as ARIAUtils from './ARIAUtils.js';
import {Events as ListModelEvents, ListModel} from './ListModel.js'; // eslint-disable-line no-unused-vars
import {measurePreferredSize} from './UIUtils.js';
@@ -89,7 +90,7 @@
this.element.tabIndex = -1;
this.element.addEventListener('click', this._onClick.bind(this), false);
this.element.addEventListener('keydown', this._onKeyDown.bind(this), false);
- UI.ARIAUtils.markAsListBox(this.element);
+ ARIAUtils.markAsListBox(this.element);
this._delegate = delegate;
this._mode = mode || ListMode.EqualHeightItems;
@@ -440,8 +441,8 @@
let element = this._itemToElement.get(item);
if (!element) {
element = this._delegate.createElementForItem(item);
- if (!UI.ARIAUtils.hasRole(element)) {
- UI.ARIAUtils.markAsOption(element);
+ if (!ARIAUtils.hasRole(element)) {
+ ARIAUtils.markAsOption(element);
}
this._itemToElement.set(item, element);
}
@@ -495,12 +496,12 @@
this._delegate.selectedItemChanged(oldItem, newItem, /** @type {?Element} */ (oldElement), newElement);
if (!this._delegate.updateSelectedItemARIA(/** @type {?Element} */ (oldElement), newElement)) {
if (oldElement) {
- UI.ARIAUtils.setSelected(oldElement, false);
+ ARIAUtils.setSelected(oldElement, false);
}
if (newElement) {
- UI.ARIAUtils.setSelected(newElement, true);
+ ARIAUtils.setSelected(newElement, true);
}
- UI.ARIAUtils.setActiveDescendant(this.element, newElement);
+ ARIAUtils.setActiveDescendant(this.element, newElement);
}
}
diff --git a/front_end/ui/ListWidget.js b/front_end/ui/ListWidget.js
index 8ca26e6..0a33e8f 100644
--- a/front_end/ui/ListWidget.js
+++ b/front_end/ui/ListWidget.js
@@ -3,6 +3,8 @@
// found in the LICENSE file.
import * as Common from '../common/common.js';
+
+import * as ARIAUtils from './ARIAUtils.js';
import {Toolbar, ToolbarButton} from './Toolbar.js';
import {createInput, createTextButton, ElementFocusRestorer} from './UIUtils.js';
import {VBox} from './Widget.js';
@@ -299,7 +301,7 @@
buttonsRow.appendChild(this._cancelButton);
this._errorMessageContainer = this.element.createChild('div', 'list-widget-input-validation-error');
- UI.ARIAUtils.markAsAlert(this._errorMessageContainer);
+ ARIAUtils.markAsAlert(this._errorMessageContainer);
/**
* @param {function(!Event):boolean} predicate
@@ -317,7 +319,7 @@
this._controls = [];
/** @type {!Map<string, !HTMLInputElement|!HTMLSelectElement>} */
this._controlByName = new Map();
- /** @type {!Array<function(!T, number, (!HTMLInputElement|!HTMLSelectElement)): !UI.ListWidget.ValidatorResult>} */
+ /** @type {!Array<function(!T, number, (!HTMLInputElement|!HTMLSelectElement)): !ValidatorResult>} */
this._validators = [];
/** @type {?function()} */
@@ -341,7 +343,7 @@
* @param {string} name
* @param {string} type
* @param {string} title
- * @param {function(!T, number, (!HTMLInputElement|!HTMLSelectElement)): !UI.ListWidget.ValidatorResult} validator
+ * @param {function(!T, number, (!HTMLInputElement|!HTMLSelectElement)): !ValidatorResult} validator
* @return {!HTMLInputElement}
*/
createInput(name, type, title, validator) {
@@ -349,7 +351,7 @@
input.placeholder = title;
input.addEventListener('input', this._validateControls.bind(this, false), false);
input.addEventListener('blur', this._validateControls.bind(this, false), false);
- UI.ARIAUtils.setAccessibleName(input, title);
+ ARIAUtils.setAccessibleName(input, title);
this._controlByName.set(name, input);
this._controls.push(input);
this._validators.push(validator);
@@ -359,7 +361,7 @@
/**
* @param {string} name
* @param {!Array<string>} options
- * @param {function(!T, number, (!HTMLInputElement|!HTMLSelectElement)): !UI.ListWidget.ValidatorResult} validator
+ * @param {function(!T, number, (!HTMLInputElement|!HTMLSelectElement)): !ValidatorResult} validator
* @param {string=} title
* @return {!HTMLSelectElement}
*/
@@ -372,7 +374,7 @@
}
if (title) {
select.title = title;
- UI.ARIAUtils.setAccessibleName(select, title);
+ ARIAUtils.setAccessibleName(select, title);
}
select.addEventListener('input', this._validateControls.bind(this, false), false);
select.addEventListener('blur', this._validateControls.bind(this, false), false);
@@ -402,9 +404,9 @@
input.classList.toggle('error-input', !valid && !forceValid);
if (valid || forceValid) {
- UI.ARIAUtils.setInvalid(input, false);
+ ARIAUtils.setInvalid(input, false);
} else {
- UI.ARIAUtils.setInvalid(input, true);
+ ARIAUtils.setInvalid(input, true);
}
if (!forceValid && errorMessage && !this._errorMessageContainer.textContent) {
diff --git a/front_end/ui/PopoverHelper.js b/front_end/ui/PopoverHelper.js
index 181d9ca..35a9661 100644
--- a/front_end/ui/PopoverHelper.js
+++ b/front_end/ui/PopoverHelper.js
@@ -33,7 +33,7 @@
export class PopoverHelper {
/**
* @param {!Element} container
- * @param {function(!MouseEvent):?UI.PopoverRequest} getRequest
+ * @param {function(!MouseEvent):?PopoverRequest} getRequest
*/
constructor(container, getRequest) {
this._disableOnClick = false;
@@ -279,3 +279,6 @@
this._container.removeEventListener('mouseout', this._boundMouseOut, false);
}
}
+
+/** @typedef {{box: !AnchorBox, show:(function(!GlassPane):!Promise<boolean>), hide:(function()|undefined)}} */
+export let PopoverRequest;
diff --git a/front_end/ui/ReportView.js b/front_end/ui/ReportView.js
index b1a6657..baf5d47 100644
--- a/front_end/ui/ReportView.js
+++ b/front_end/ui/ReportView.js
@@ -2,6 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
+import * as ARIAUtils from './ARIAUtils.js';
import {Toolbar} from './Toolbar.js';
import {VBox} from './Widget.js';
@@ -20,7 +21,7 @@
this._headerElement = this._contentBox.createChild('div', 'report-header vbox');
this._titleElement = this._headerElement.createChild('div', 'report-title');
this._titleElement.textContent = title;
- UI.ARIAUtils.markAsHeading(this._titleElement, 1);
+ ARIAUtils.markAsHeading(this._titleElement, 1);
this._sectionList = this._contentBox.createChild('div', 'vbox');
}
@@ -130,7 +131,7 @@
this._headerElement = this.element.createChild('div', 'report-section-header');
this._titleElement = this._headerElement.createChild('div', 'report-section-title');
this.setTitle(title);
- UI.ARIAUtils.markAsHeading(this._titleElement, 2);
+ ARIAUtils.markAsHeading(this._titleElement, 2);
this._fieldList = this.element.createChild('div', 'vbox');
/** @type {!Map.<string, !Element>} */
this._fieldMap = new Map();
@@ -158,8 +159,8 @@
* @param {string} groupTitle
*/
setUiGroupTitle(groupTitle) {
- UI.ARIAUtils.markAsGroup(this.element);
- UI.ARIAUtils.setAccessibleName(this.element, groupTitle);
+ ARIAUtils.markAsGroup(this.element);
+ ARIAUtils.setAccessibleName(this.element, groupTitle);
}
/**
@@ -252,8 +253,8 @@
}
markFieldListAsGroup() {
- UI.ARIAUtils.markAsGroup(this._fieldList);
- UI.ARIAUtils.setAccessibleName(this._fieldList, this.title());
+ ARIAUtils.markAsGroup(this._fieldList);
+ ARIAUtils.setAccessibleName(this._fieldList, this.title());
}
/**
diff --git a/front_end/ui/SettingsUI.js b/front_end/ui/SettingsUI.js
index 48a6b65..22a5550 100644
--- a/front_end/ui/SettingsUI.js
+++ b/front_end/ui/SettingsUI.js
@@ -29,6 +29,8 @@
*/
import * as Common from '../common/common.js';
+
+import * as ARIAUtils from './ARIAUtils.js';
import {CheckboxLabel} from './UIUtils.js';
/**
@@ -73,7 +75,7 @@
settingSelectElement.classList.add('chrome-select-label');
label.createChild('p').textContent = subtitle;
}
- UI.ARIAUtils.bindLabelToControl(label, select);
+ ARIAUtils.bindLabelToControl(label, select);
for (let i = 0; i < options.length; ++i) {
// The "raw" flag indicates text is non-i18n-izable.
@@ -133,7 +135,7 @@
const fieldsetElement = p.createChild('fieldset');
const label = fieldsetElement.createChild('label');
label.textContent = name;
- UI.ARIAUtils.bindLabelToControl(label, element);
+ ARIAUtils.bindLabelToControl(label, element);
fieldsetElement.appendChild(element);
return p;
};
diff --git a/front_end/ui/ShortcutRegistry.js b/front_end/ui/ShortcutRegistry.js
index 79a01aa..e3306a9 100644
--- a/front_end/ui/ShortcutRegistry.js
+++ b/front_end/ui/ShortcutRegistry.js
@@ -3,11 +3,12 @@
// found in the LICENSE file.
import * as Host from '../host/host.js';
+
import {Action} from './Action.js'; // eslint-disable-line no-unused-vars
import {ActionRegistry} from './ActionRegistry.js'; // eslint-disable-line no-unused-vars
import {Context} from './Context.js';
import {Dialog} from './Dialog.js';
-import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
+import {Descriptor, KeyboardShortcut, Modifiers} from './KeyboardShortcut.js'; // eslint-disable-line no-unused-vars
import {isEditing} from './UIUtils.js';
/**
@@ -22,7 +23,7 @@
this._actionRegistry = actionRegistry;
/** @type {!Platform.Multimap.<string, string>} */
this._defaultKeyToActions = new Platform.Multimap();
- /** @type {!Platform.Multimap.<string, !UI.KeyboardShortcut.Descriptor>} */
+ /** @type {!Platform.Multimap.<string, !Descriptor>} */
this._defaultActionToShortcut = new Platform.Multimap();
this._registerBindings(document);
}
@@ -60,7 +61,7 @@
/**
* @param {string} actionId
- * @return {!Array.<!UI.KeyboardShortcut.Descriptor>}
+ * @return {!Array.<!Descriptor>}
*/
shortcutDescriptorsForAction(actionId) {
return [...this._defaultActionToShortcut.get(actionId)];
diff --git a/front_end/ui/ShortcutsScreen.js b/front_end/ui/ShortcutsScreen.js
index 372b100..52507c2 100644
--- a/front_end/ui/ShortcutsScreen.js
+++ b/front_end/ui/ShortcutsScreen.js
@@ -31,7 +31,8 @@
import * as Common from '../common/common.js';
import * as Host from '../host/host.js';
-import {KeyboardShortcut, Keys, Modifiers} from './KeyboardShortcut.js';
+import * as ARIAUtils from './ARIAUtils.js';
+import {Descriptor, KeyboardShortcut, Keys, Modifiers} from './KeyboardShortcut.js'; // eslint-disable-line no-unused-vars
import {createDocumentationLink} from './UIUtils.js';
import {Widget} from './Widget.js';
@@ -295,7 +296,7 @@
}
/**
- * @param {!UI.KeyboardShortcut.Descriptor} key
+ * @param {!Descriptor} key
* @param {string} description
*/
addKey(key, description) {
@@ -303,7 +304,7 @@
}
/**
- * @param {!Array.<!UI.KeyboardShortcut.Descriptor>} keys
+ * @param {!Array.<!Descriptor>} keys
* @param {string} description
*/
addRelatedKeys(keys, description) {
@@ -311,7 +312,7 @@
}
/**
- * @param {!Array.<!UI.KeyboardShortcut.Descriptor>} keys
+ * @param {!Array.<!Descriptor>} keys
* @param {string} description
*/
addAlternateKeys(keys, description) {
@@ -335,7 +336,7 @@
const headLine = parent.createChild('div', 'settings-line');
headLine.createChild('div', 'settings-key-cell');
headLine.createChild('div', 'settings-section-title settings-cell').textContent = this.name;
- UI.ARIAUtils.markAsHeading(headLine, /* level */ 2);
+ ARIAUtils.markAsHeading(headLine, /* level */ 2);
for (let i = 0; i < this._lines.length; ++i) {
const line = parent.createChild('div', 'settings-line');
@@ -347,7 +348,7 @@
}
/**
- * @param {!Array.<!UI.KeyboardShortcut.Descriptor>} sequence
+ * @param {!Array.<!Descriptor>} sequence
* @param {string} delimiter
* @return {!Node}
*/
@@ -357,7 +358,7 @@
}
/**
- * @param {!UI.KeyboardShortcut.Descriptor} key
+ * @param {!Descriptor} key
* @return {!Node}
*/
_renderKey(key) {
diff --git a/front_end/ui/SoftContextMenu.js b/front_end/ui/SoftContextMenu.js
index b71e123..3487ac4 100644
--- a/front_end/ui/SoftContextMenu.js
+++ b/front_end/ui/SoftContextMenu.js
@@ -30,6 +30,7 @@
import * as Host from '../host/host.js';
+import * as ARIAUtils from './ARIAUtils.js';
import {AnchorBehavior, GlassPane, MarginBehavior, PointerEventsBehavior, SizeBehavior,} from './GlassPane.js'; // eslint-disable-line no-unused-vars
import {Icon} from './Icon.js';
import {ElementFocusRestorer} from './UIUtils.js';
@@ -73,7 +74,7 @@
this._contextMenuElement = this._glassPane.contentElement.createChild('div', 'soft-context-menu');
this._contextMenuElement.tabIndex = -1;
- UI.ARIAUtils.markAsMenu(this._contextMenuElement);
+ ARIAUtils.markAsMenu(this._contextMenuElement);
this._contextMenuElement.addEventListener('mouseup', e => e.consume(), false);
this._contextMenuElement.addEventListener('keydown', this._menuKeyDown.bind(this), false);
@@ -135,7 +136,7 @@
const menuItemElement = createElementWithClass('div', 'soft-context-menu-item');
menuItemElement.tabIndex = -1;
- UI.ARIAUtils.markAsMenuItem(menuItemElement);
+ ARIAUtils.markAsMenuItem(menuItemElement);
const checkMarkElement = Icon.create('smallicon-checkmark', 'checkmark');
menuItemElement.appendChild(checkMarkElement);
if (!item.checked) {
@@ -176,7 +177,7 @@
} else if (item.shortcut) {
accessibleName = ls`${item.label}, ${item.shortcut}`;
}
- UI.ARIAUtils.setAccessibleName(menuItemElement, accessibleName);
+ ARIAUtils.setAccessibleName(menuItemElement, accessibleName);
return menuItemElement;
}
@@ -185,9 +186,9 @@
const menuItemElement = createElementWithClass('div', 'soft-context-menu-item');
menuItemElement._subItems = item.subItems;
menuItemElement.tabIndex = -1;
- UI.ARIAUtils.markAsMenuItemSubMenu(menuItemElement);
+ ARIAUtils.markAsMenuItemSubMenu(menuItemElement);
// TODO: Once we have AOM, remove the explicit aria-label and use document.queryByAccessibleName
- UI.ARIAUtils.setAccessibleName(menuItemElement, item.label);
+ ARIAUtils.setAccessibleName(menuItemElement, item.label);
// Occupy the same space on the left in all items.
const checkMarkElement = Icon.create('smallicon-checkmark', 'soft-context-menu-item-checkmark');
diff --git a/front_end/ui/SoftDropDown.js b/front_end/ui/SoftDropDown.js
index dfa9b5e..9c76860 100644
--- a/front_end/ui/SoftDropDown.js
+++ b/front_end/ui/SoftDropDown.js
@@ -2,6 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
+import * as ARIAUtils from './ARIAUtils.js';
import {Size} from './Geometry.js';
import {AnchorBehavior, GlassPane, MarginBehavior, PointerEventsBehavior} from './GlassPane.js';
import {Icon} from './Icon.js';
@@ -31,7 +32,7 @@
this._titleElement = this.element.createChild('span', 'title');
const dropdownArrowIcon = Icon.create('smallicon-triangle-down');
this.element.appendChild(dropdownArrowIcon);
- UI.ARIAUtils.setExpanded(this.element, false);
+ ARIAUtils.setExpanded(this.element, false);
this._glassPane = new GlassPane();
this._glassPane.setMarginBehavior(MarginBehavior.NoMargin);
@@ -45,7 +46,7 @@
createShadowRootWithCoreStyles(this._glassPane.contentElement, 'ui/softDropDown.css')
.createChild('slot') // issue #972755
.appendChild(this._list.element);
- UI.ARIAUtils.markAsMenu(this._list.element);
+ ARIAUtils.markAsMenu(this._list.element);
this._listWasShowing200msAgo = false;
this.element.addEventListener('mousedown', event => {
@@ -83,7 +84,7 @@
this._glassPane.setContentAnchorBox(this.element.boxInWindow());
this._glassPane.show(/** @type {!Document} **/ (this.element.ownerDocument));
this._list.element.focus();
- UI.ARIAUtils.setExpanded(this.element, true);
+ ARIAUtils.setExpanded(this.element, true);
this._updateGlasspaneSize();
if (this._selectedItem) {
this._list.selectItem(this._selectedItem);
@@ -105,7 +106,7 @@
setTimeout(() => this._listWasShowing200msAgo = false, 200);
this._glassPane.hide();
this._list.selectItem(null);
- UI.ARIAUtils.setExpanded(this.element, false);
+ ARIAUtils.setExpanded(this.element, false);
this.element.focus();
event.consume(true);
}
@@ -267,7 +268,7 @@
element.classList.toggle('disabled', !this._delegate.isItemSelectable(item));
element.classList.toggle('highlighted', this._list.selectedItem() === item);
- UI.ARIAUtils.markAsMenuItem(element);
+ ARIAUtils.markAsMenuItem(element);
element.appendChild(this._delegate.createElementForItem(item));
return element;
@@ -306,7 +307,7 @@
toElement.classList.add('highlighted');
}
- UI.ARIAUtils.setActiveDescendant(this._list.element, toElement);
+ ARIAUtils.setActiveDescendant(this._list.element, toElement);
this._delegate.highlightedItemChanged(
from, to, fromElement && fromElement.firstElementChild, toElement && toElement.firstElementChild);
}
diff --git a/front_end/ui/SplitWidget.js b/front_end/ui/SplitWidget.js
index c3ba175..42e1dec 100644
--- a/front_end/ui/SplitWidget.js
+++ b/front_end/ui/SplitWidget.js
@@ -29,6 +29,7 @@
*/
import * as Common from '../common/common.js';
+
import {Constraints} from './Geometry.js';
import {Events as ResizerWidgetEvents, SimpleResizerWidget} from './ResizerWidget.js';
import {ToolbarButton} from './Toolbar.js';
@@ -335,7 +336,7 @@
/**
* @param {?Widget} sideToShow
- * @param {?UI.Widget} sideToHide
+ * @param {?Widget} sideToHide
* @param {!Element} shadowToShow
* @param {!Element} shadowToHide
* @param {boolean=} animate
@@ -847,7 +848,7 @@
}
/**
- * @return {?SplitWidget.SettingForOrientation}
+ * @return {?SettingForOrientation}
*/
_settingForOrientation() {
const state = this._setting ? this._setting.get() : {};
@@ -990,3 +991,6 @@
};
const MinPadding = 20;
+
+/** @typedef {{showMode: string, size: number}} */
+export let SettingForOrientation;
diff --git a/front_end/ui/SuggestBox.js b/front_end/ui/SuggestBox.js
index df793d0..5adcdfd 100644
--- a/front_end/ui/SuggestBox.js
+++ b/front_end/ui/SuggestBox.js
@@ -28,6 +28,7 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
+import * as ARIAUtils from './ARIAUtils.js';
import {Size} from './Geometry.js';
import {AnchorBehavior, GlassPane} from './GlassPane.js';
import {Icon} from './Icon.js';
@@ -42,7 +43,7 @@
*/
export class SuggestBoxDelegate {
/**
- * @param {?UI.SuggestBox.Suggestion} suggestion
+ * @param {?Suggestion} suggestion
* @param {boolean=} isIntermediateSuggestion
*/
applySuggestion(suggestion, isIntermediateSuggestion) {
@@ -70,12 +71,12 @@
this._userEnteredText = '';
this._defaultSelectionIsDimmed = false;
- /** @type {?UI.SuggestBox.Suggestion} */
+ /** @type {?Suggestion} */
this._onlyCompletion = null;
- /** @type {!ListModel<!UI.SuggestBox.Suggestion>} */
+ /** @type {!ListModel<!Suggestion>} */
this._items = new ListModel();
- /** @type {!ListControl<!UI.SuggestBox.Suggestion>} */
+ /** @type {!ListControl<!Suggestion>} */
this._list = new ListControl(this._items, this, ListMode.EqualHeightItems);
this._element = this._list.element;
this._element.classList.add('suggest-box');
@@ -111,7 +112,7 @@
}
/**
- * @param {!UI.SuggestBox.Suggestions} items
+ * @param {!Suggestions} items
*/
_updateMaxSize(items) {
const maxWidth = this._maxWidth(items);
@@ -121,7 +122,7 @@
}
/**
- * @param {!UI.SuggestBox.Suggestions} items
+ * @param {!Suggestions} items
* @return {number}
*/
_maxWidth(items) {
@@ -138,7 +139,7 @@
maxItem = items[i];
}
}
- const element = this.createElementForItem(/** @type {!UI.SuggestBox.Suggestion} */ (maxItem));
+ const element = this.createElementForItem(/** @type {!Suggestion} */ (maxItem));
const preferredWidth =
measurePreferredSize(element, this._element).width + measuredScrollbarWidth(this._element.ownerDocument);
return Math.min(kMaxWidth, preferredWidth);
@@ -170,13 +171,13 @@
*/
_applySuggestion(isIntermediateSuggestion) {
if (this._onlyCompletion) {
- UI.ARIAUtils.alert(ls`${this._onlyCompletion.text}, suggestion`, this._element);
+ ARIAUtils.alert(ls`${this._onlyCompletion.text}, suggestion`, this._element);
this._suggestBoxDelegate.applySuggestion(this._onlyCompletion, isIntermediateSuggestion);
return true;
}
const suggestion = this._list.selectedItem();
if (suggestion && suggestion.text) {
- UI.ARIAUtils.alert(ls`${suggestion.title || suggestion.text}, suggestion`, this._element);
+ ARIAUtils.alert(ls`${suggestion.title || suggestion.text}, suggestion`, this._element);
}
this._suggestBoxDelegate.applySuggestion(suggestion, isIntermediateSuggestion);
@@ -200,7 +201,7 @@
/**
* @override
- * @param {!UI.SuggestBox.Suggestion} item
+ * @param {!Suggestion} item
* @return {!Element}
*/
createElementForItem(item) {
@@ -240,7 +241,7 @@
/**
* @override
- * @param {!UI.SuggestBox.Suggestion} item
+ * @param {!Suggestion} item
* @return {number}
*/
heightForItem(item) {
@@ -249,7 +250,7 @@
/**
* @override
- * @param {!UI.SuggestBox.Suggestion} item
+ * @param {!Suggestion} item
* @return {boolean}
*/
isItemSelectable(item) {
@@ -258,8 +259,8 @@
/**
* @override
- * @param {?UI.SuggestBox.Suggestion} from
- * @param {?UI.SuggestBox.Suggestion} to
+ * @param {?Suggestion} from
+ * @param {?Suggestion} to
* @param {?Element} fromElement
* @param {?Element} toElement
*/
@@ -299,8 +300,8 @@
}
/**
- * @param {!UI.SuggestBox.Suggestions} completions
- * @param {?UI.SuggestBox.Suggestion} highestPriorityItem
+ * @param {!Suggestions} completions
+ * @param {?Suggestion} highestPriorityItem
* @param {boolean} canShowForSingleItem
* @param {string} userEnteredText
* @return {boolean}
@@ -325,7 +326,7 @@
/**
* @param {!AnchorBox} anchorBox
- * @param {!UI.SuggestBox.Suggestions} completions
+ * @param {!Suggestions} completions
* @param {boolean} selectHighestPriority
* @param {boolean} canShowForSingleItem
* @param {string} userEnteredText
@@ -416,7 +417,7 @@
* tooltipCallback: ((function(number, number):!Promise<?Element>)|undefined),
* suggestionsCallback: ((function(!TextUtils.TextRange, !TextUtils.TextRange, boolean=):?Promise.<!Suggestions>)|undefined),
* isWordChar: ((function(string):boolean)|undefined),
- * anchorBehavior: (UI.GlassPane.AnchorBehavior|undefined)
+ * anchorBehavior: (AnchorBehavior|undefined)
* }}
*/
export let AutocompleteConfig;
diff --git a/front_end/ui/TabbedPane.js b/front_end/ui/TabbedPane.js
index 0456a47..c576028 100644
--- a/front_end/ui/TabbedPane.js
+++ b/front_end/ui/TabbedPane.js
@@ -29,6 +29,8 @@
*/
import * as Common from '../common/common.js';
+
+import * as ARIAUtils from './ARIAUtils.js';
import {ContextMenu} from './ContextMenu.js';
import {Constraints, Size} from './Geometry.js';
import {Icon} from './Icon.js';
@@ -75,7 +77,7 @@
* @param {string} name
*/
setAccessibleName(name) {
- UI.ARIAUtils.setAccessibleName(this._tabsElement, name);
+ ARIAUtils.setAccessibleName(this._tabsElement, name);
}
/**
@@ -452,7 +454,7 @@
}
if (tab.title !== tabTitle) {
tab.title = tabTitle;
- UI.ARIAUtils.setAccessibleName(tab.tabElement, tabTitle);
+ ARIAUtils.setAccessibleName(tab.tabElement, tabTitle);
this._updateTabElements();
}
}
@@ -612,8 +614,8 @@
_createDropDownButton() {
const dropDownContainer = createElementWithClass('div', 'tabbed-pane-header-tabs-drop-down-container');
const chevronIcon = Icon.create('largeicon-chevron', 'chevron-icon');
- UI.ARIAUtils.markAsMenuButton(dropDownContainer);
- UI.ARIAUtils.setAccessibleName(dropDownContainer, ls`More tabs`);
+ ARIAUtils.markAsMenuButton(dropDownContainer);
+ ARIAUtils.setAccessibleName(dropDownContainer, ls`More tabs`);
dropDownContainer.tabIndex = 0;
dropDownContainer.appendChild(chevronIcon);
dropDownContainer.addEventListener('click', this._dropDownClicked.bind(this));
@@ -877,7 +879,7 @@
_showTab(tab) {
tab.tabElement.tabIndex = 0;
tab.tabElement.classList.add('selected');
- UI.ARIAUtils.setSelected(tab.tabElement, true);
+ ARIAUtils.setSelected(tab.tabElement, true);
tab.view.show(this.element);
this._updateTabSlider();
}
@@ -1199,9 +1201,9 @@
_createTabElement(measuring) {
const tabElement = createElementWithClass('div', 'tabbed-pane-header-tab');
tabElement.id = 'tab-' + this._id;
- UI.ARIAUtils.markAsTab(tabElement);
- UI.ARIAUtils.setSelected(tabElement, false);
- UI.ARIAUtils.setAccessibleName(tabElement, this.title);
+ ARIAUtils.markAsTab(tabElement);
+ ARIAUtils.setSelected(tabElement, false);
+ ARIAUtils.setAccessibleName(tabElement, this.title);
const titleElement = tabElement.createChild('span', 'tabbed-pane-header-tab-title');
titleElement.textContent = this.title;
diff --git a/front_end/ui/TextEditor.js b/front_end/ui/TextEditor.js
index f9ffb1d..4df0a54 100644
--- a/front_end/ui/TextEditor.js
+++ b/front_end/ui/TextEditor.js
@@ -14,7 +14,7 @@
*/
export class TextEditorFactory {
/**
- * @param {!UI.TextEditor.Options} options
+ * @param {!Options} options
* @return {!TextEditor}
*/
createEditor(options) {}
diff --git a/front_end/ui/TextPrompt.js b/front_end/ui/TextPrompt.js
index 68e5925..e4425ed 100644
--- a/front_end/ui/TextPrompt.js
+++ b/front_end/ui/TextPrompt.js
@@ -28,7 +28,9 @@
*/
import * as Common from '../common/common.js';
-import {SuggestBox, SuggestBoxDelegate} from './SuggestBox.js'; // eslint-disable-line no-unused-vars
+
+import * as ARIAUtils from './ARIAUtils.js';
+import {SuggestBox, SuggestBoxDelegate, Suggestion, Suggestions} from './SuggestBox.js'; // eslint-disable-line no-unused-vars
import {ElementFocusRestorer} from './UIUtils.js';
import {appendStyle} from './utils/append-style.js';
@@ -52,11 +54,11 @@
this._completionRequestId = 0;
this._ghostTextElement = createElementWithClass('span', 'auto-complete-text');
this._ghostTextElement.setAttribute('contenteditable', 'false');
- UI.ARIAUtils.markAsHidden(this._ghostTextElement);
+ ARIAUtils.markAsHidden(this._ghostTextElement);
}
/**
- * @param {(function(this:null, string, string, boolean=):!Promise<!UI.SuggestBox.Suggestions>)} completions
+ * @param {(function(this:null, string, string, boolean=):!Promise<!Suggestions>)} completions
* @param {string=} stopCharacters
*/
initialize(completions, stopCharacters) {
@@ -123,7 +125,7 @@
element.parentElement.insertBefore(this._proxyElement, element);
this._contentElement.appendChild(element);
this._element.classList.add('text-prompt');
- UI.ARIAUtils.markAsTextBox(this._element);
+ ARIAUtils.markAsTextBox(this._element);
this._element.setAttribute('contenteditable', 'plaintext-only');
this._element.addEventListener('keydown', this._boundOnKeyDown, false);
this._element.addEventListener('input', this._boundOnInput, false);
@@ -218,10 +220,10 @@
this._element.setAttribute('data-placeholder', placeholder);
// TODO(https://github.com/nvaccess/nvda/issues/10164): Remove ariaPlaceholder once the NVDA bug is fixed
// ariaPlaceholder and placeholder may differ, like in case the placeholder contains a '?'
- UI.ARIAUtils.setPlaceholder(this._element, ariaPlaceholder || placeholder);
+ ARIAUtils.setPlaceholder(this._element, ariaPlaceholder || placeholder);
} else {
this._element.removeAttribute('data-placeholder');
- UI.ARIAUtils.setPlaceholder(this._element, null);
+ ARIAUtils.setPlaceholder(this._element, null);
}
}
@@ -505,7 +507,7 @@
/**
* @param {string} query
- * @return {!UI.SuggestBox.Suggestions}
+ * @return {!Suggestions}
*/
additionalCompletions(query) {
return [];
@@ -516,7 +518,7 @@
* @param {!Selection} selection
* @param {!Range} originalWordQueryRange
* @param {boolean} force
- * @param {!UI.SuggestBox.Suggestions} completions
+ * @param {!Suggestions} completions
*/
_completionsReady(completionRequestId, selection, originalWordQueryRange, force, completions) {
if (this._completionRequestId !== completionRequestId) {
@@ -568,7 +570,7 @@
/**
* @override
- * @param {?UI.SuggestBox.Suggestion} suggestion
+ * @param {?Suggestion} suggestion
* @param {boolean=} isIntermediateSuggestion
*/
applySuggestion(suggestion, isIntermediateSuggestion) {
diff --git a/front_end/ui/Toolbar.js b/front_end/ui/Toolbar.js
index 357d626..b20f2ad 100644
--- a/front_end/ui/Toolbar.js
+++ b/front_end/ui/Toolbar.js
@@ -29,11 +29,14 @@
*/
import * as Common from '../common/common.js';
+
import {Action, Events as ActionEvents} from './Action.js'; // eslint-disable-line no-unused-vars
+import * as ARIAUtils from './ARIAUtils.js';
import {ContextMenu} from './ContextMenu.js';
import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
import {Icon} from './Icon.js';
import {bindCheckbox} from './SettingsUI.js';
+import {Suggestions} from './SuggestBox.js'; // eslint-disable-line no-unused-vars
import {Events as TextPromptEvents, TextPrompt} from './TextPrompt.js';
import {Tooltip} from './Tooltip.js';
import {CheckboxLabel, LongClickController} from './UIUtils.js';
@@ -415,7 +418,7 @@
return;
}
this._title = title;
- UI.ARIAUtils.setAccessibleName(this.element, title);
+ ARIAUtils.setAccessibleName(this.element, title);
Tooltip.install(this.element, title);
}
@@ -603,7 +606,7 @@
* @param {number=} growFactor
* @param {number=} shrinkFactor
* @param {string=} tooltip
- * @param {(function(string, string, boolean=):!Promise<!UI.SuggestBox.Suggestions>)=} completions
+ * @param {(function(string, string, boolean=):!Promise<!Suggestions>)=} completions
*/
constructor(placeholder, accessiblePlaceholder, growFactor, shrinkFactor, tooltip, completions) {
super(createElementWithClass('div', 'toolbar-input'));
@@ -611,7 +614,7 @@
const internalPromptElement = this.element.createChild('div', 'toolbar-input-prompt');
internalPromptElement.addEventListener('focus', () => this.element.classList.add('focused'));
internalPromptElement.addEventListener('blur', () => this.element.classList.remove('focused'));
- UI.ARIAUtils.markAsHidden(internalPromptElement);
+ ARIAUtils.markAsHidden(internalPromptElement);
this._prompt = new TextPrompt();
this._proxyElement = this._prompt.attach(internalPromptElement);
@@ -708,7 +711,7 @@
this._untoggledGlyph = glyph;
this._toggledGlyph = toggledGlyph;
this.element.classList.add('toolbar-state-off');
- UI.ARIAUtils.setPressed(this.element, false);
+ ARIAUtils.setPressed(this.element, false);
}
/**
@@ -728,7 +731,7 @@
this._toggled = toggled;
this.element.classList.toggle('toolbar-state-on', toggled);
this.element.classList.toggle('toolbar-state-off', !toggled);
- UI.ARIAUtils.setPressed(this.element, toggled);
+ ARIAUtils.setPressed(this.element, toggled);
if (this._toggledGlyph && this._untoggledGlyph) {
this.setGlyph(toggled ? this._toggledGlyph : this._untoggledGlyph);
}
@@ -762,7 +765,7 @@
super('', 'largeicon-menu');
this._contextMenuHandler = contextMenuHandler;
this._useSoftMenu = !!useSoftMenu;
- UI.ARIAUtils.markAsMenuButton(this.element);
+ ARIAUtils.markAsMenuButton(this.element);
}
/**
@@ -894,7 +897,7 @@
if (changeHandler) {
this._selectElement.addEventListener('change', changeHandler, false);
}
- UI.ARIAUtils.setAccessibleName(this._selectElement, title);
+ ARIAUtils.setAccessibleName(this._selectElement, title);
super.setTitle(title);
if (className) {
this._selectElement.classList.add(className);
diff --git a/front_end/ui/Treeoutline.js b/front_end/ui/Treeoutline.js
index 9fd87d2..4cc4701 100644
--- a/front_end/ui/Treeoutline.js
+++ b/front_end/ui/Treeoutline.js
@@ -27,6 +27,8 @@
*/
import * as Common from '../common/common.js';
+
+import * as ARIAUtils from './ARIAUtils.js';
import {Icon} from './Icon.js'; // eslint-disable-line no-unused-vars
import {Config, InplaceEditor} from './InplaceEditor.js'; // eslint-disable-line no-unused-vars
import {Keys} from './KeyboardShortcut.js';
@@ -55,7 +57,7 @@
this._showSelectionOnKeyboardFocus = false;
this.setFocusable(true);
this.element = this.contentElement;
- UI.ARIAUtils.markAsTree(this.element);
+ ARIAUtils.markAsTree(this.element);
}
/**
@@ -429,12 +431,12 @@
this._listItemNode.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
this._listItemNode.addEventListener('click', this._treeElementToggled.bind(this), false);
this._listItemNode.addEventListener('dblclick', this._handleDoubleClick.bind(this), false);
- UI.ARIAUtils.markAsTreeitem(this._listItemNode);
+ ARIAUtils.markAsTreeitem(this._listItemNode);
this._childrenListNode = createElement('ol');
this._childrenListNode.parentTreeElement = this;
this._childrenListNode.classList.add('children');
- UI.ARIAUtils.markAsGroup(this._childrenListNode);
+ ARIAUtils.markAsGroup(this._childrenListNode);
this._hidden = false;
this._selectable = true;
@@ -855,9 +857,9 @@
this._listItemNode.classList.toggle('parent', expandable);
if (!expandable) {
this.collapse();
- UI.ARIAUtils.unsetExpandable(this._listItemNode);
+ ARIAUtils.unsetExpandable(this._listItemNode);
} else {
- UI.ARIAUtils.setExpanded(this._listItemNode, false);
+ ARIAUtils.setExpanded(this._listItemNode, false);
}
}
@@ -1000,7 +1002,7 @@
}
this._listItemNode.classList.remove('expanded');
this._childrenListNode.classList.remove('expanded');
- UI.ARIAUtils.setExpanded(this._listItemNode, false);
+ ARIAUtils.setExpanded(this._listItemNode, false);
this.expanded = false;
this.oncollapse();
if (this.treeOutline) {
@@ -1046,7 +1048,7 @@
this._populateIfNeeded();
this._listItemNode.classList.add('expanded');
this._childrenListNode.classList.add('expanded');
- UI.ARIAUtils.setExpanded(this._listItemNode, true);
+ ARIAUtils.setExpanded(this._listItemNode, true);
if (this.treeOutline) {
this.onexpand();
@@ -1226,7 +1228,7 @@
}
this._listItemNode.classList.add('selected');
- UI.ARIAUtils.setSelected(this._listItemNode, true);
+ ARIAUtils.setSelected(this._listItemNode, true);
this.treeOutline.dispatchEventToListeners(Events.ElementSelected, this);
if (lastSelected) {
lastSelected.deselect();
@@ -1279,7 +1281,7 @@
const hadFocus = this._listItemNode.hasFocus();
this.selected = false;
this._listItemNode.classList.remove('selected');
- UI.ARIAUtils.clearSelected(this._listItemNode);
+ ARIAUtils.clearSelected(this._listItemNode);
this._setFocusable(false);
if (this.treeOutline && this.treeOutline.selectedTreeElement === this) {
diff --git a/front_end/ui/UIUtils.js b/front_end/ui/UIUtils.js
index d1fb127..edcc538 100644
--- a/front_end/ui/UIUtils.js
+++ b/front_end/ui/UIUtils.js
@@ -29,9 +29,11 @@
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
+
import * as Common from '../common/common.js';
import * as Host from '../host/host.js';
+import * as ARIAUtils from './ARIAUtils.js';
import {Dialog} from './Dialog.js';
import {Size} from './Geometry.js';
import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
@@ -1303,7 +1305,7 @@
const element = createElementWithClass('label', className || '');
element.textContent = title;
if (associatedControl) {
- UI.ARIAUtils.bindLabelToControl(element, associatedControl);
+ ARIAUtils.bindLabelToControl(element, associatedControl);
}
return element;
@@ -1519,8 +1521,8 @@
super();
const root = createShadowRootWithCoreStyles(this, 'ui/closeButton.css');
this._buttonElement = root.createChild('div', 'close-button');
- UI.ARIAUtils.setAccessibleName(this._buttonElement, ls`Close`);
- UI.ARIAUtils.markAsButton(this._buttonElement);
+ ARIAUtils.setAccessibleName(this._buttonElement, ls`Close`);
+ ARIAUtils.markAsButton(this._buttonElement);
const regularIcon = Icon.create('smallicon-cross', 'default-icon');
this._hoverIcon = Icon.create('mediumicon-red-cross-hover', 'hover-icon');
this._activeIcon = Icon.create('mediumicon-red-cross-active', 'active-icon');
@@ -1548,7 +1550,7 @@
* @this {Element}
*/
setAccessibleName(name) {
- UI.ARIAUtils.setAccessibleName(this._buttonElement, name);
+ ARIAUtils.setAccessibleName(this._buttonElement, name);
}
/**
@@ -2080,7 +2082,7 @@
const dialog = new Dialog();
dialog.setSizeBehavior(SizeBehavior.MeasureContent);
dialog.setDimmed(true);
- UI.ARIAUtils.setAccessibleName(dialog.contentElement, message);
+ ARIAUtils.setAccessibleName(dialog.contentElement, message);
const shadowRoot = createShadowRootWithCoreStyles(dialog.contentElement, 'ui/confirmDialog.css');
const content = shadowRoot.createChild('div', 'widget');
content.createChild('div', 'message').createChild('span').textContent = message;
@@ -2122,7 +2124,7 @@
export class Renderer {
/**
* @param {!Object} object
- * @param {!UI.Renderer.Options=} options
+ * @param {!Options=} options
* @return {!Promise<?{node: !Node, tree: ?TreeOutline}>}
*/
render(object, options) {
@@ -2131,7 +2133,7 @@
/**
* @param {!Object} object
- * @param {!UI.Renderer.Options=} options
+ * @param {!Options=} options
* @return {!Promise<?{node: !Node, tree: ?TreeOutline}>}
*/
Renderer.render = async function(object, options) {
diff --git a/front_end/ui/ViewManager.js b/front_end/ui/ViewManager.js
index fbd238e..11f0699 100644
--- a/front_end/ui/ViewManager.js
+++ b/front_end/ui/ViewManager.js
@@ -3,6 +3,8 @@
// found in the LICENSE file.
import * as Common from '../common/common.js';
+
+import * as ARIAUtils from './ARIAUtils.js';
import {ContextMenu} from './ContextMenu.js'; // eslint-disable-line no-unused-vars
import {Icon} from './Icon.js';
import {Events as TabbedPaneEvents, TabbedPane} from './TabbedPane.js';
@@ -178,8 +180,8 @@
this.element.classList.add('flex-auto', 'view-container', 'overflow-auto');
this._view = view;
this.element.tabIndex = -1;
- UI.ARIAUtils.markAsTabpanel(this.element);
- UI.ARIAUtils.setAccessibleName(this.element, ls`${view.title()} panel`);
+ ARIAUtils.markAsTabpanel(this.element);
+ ARIAUtils.setAccessibleName(this.element, ls`${view.title()} panel`);
this.setDefaultFocusedElement(this.element);
}
@@ -240,19 +242,19 @@
this.registerRequiredCSS('ui/viewContainers.css');
this._titleElement = createElementWithClass('div', 'expandable-view-title');
- UI.ARIAUtils.markAsButton(this._titleElement);
+ ARIAUtils.markAsButton(this._titleElement);
this._titleExpandIcon = Icon.create('smallicon-triangle-right', 'title-expand-icon');
this._titleElement.appendChild(this._titleExpandIcon);
const titleText = view.title();
this._titleElement.createTextChild(titleText);
- UI.ARIAUtils.setAccessibleName(this._titleElement, titleText);
- UI.ARIAUtils.setExpanded(this._titleElement, false);
+ ARIAUtils.setAccessibleName(this._titleElement, titleText);
+ ARIAUtils.setExpanded(this._titleElement, false);
this._titleElement.tabIndex = 0;
self.onInvokeElement(this._titleElement, this._toggleExpanded.bind(this));
this._titleElement.addEventListener('keydown', this._onTitleKeyDown.bind(this), false);
this.contentElement.insertBefore(this._titleElement, this.contentElement.firstChild);
- UI.ARIAUtils.setControls(this._titleElement, this.contentElement.createChild('slot'));
+ ARIAUtils.setControls(this._titleElement, this.contentElement.createChild('slot'));
this._view = view;
view[_ExpandableContainerWidget._symbol] = this;
}
@@ -298,7 +300,7 @@
return this._materialize();
}
this._titleElement.classList.add('expanded');
- UI.ARIAUtils.setExpanded(this._titleElement, true);
+ ARIAUtils.setExpanded(this._titleElement, true);
this._titleExpandIcon.setIconType('smallicon-triangle-down');
return this._materialize().then(() => this._widget.show(this.element));
}
@@ -308,7 +310,7 @@
return;
}
this._titleElement.classList.remove('expanded');
- UI.ARIAUtils.setExpanded(this._titleElement, false);
+ ARIAUtils.setExpanded(this._titleElement, false);
this._titleExpandIcon.setIconType('smallicon-triangle-right');
this._materialize().then(() => this._widget.detach());
}
@@ -511,7 +513,7 @@
/**
* @override
* @param {!View} view
- * @param {?UI.View=} insertBefore
+ * @param {?View=} insertBefore
*/
appendView(view, insertBefore) {
if (this._tabbedPane.hasTab(view.viewId())) {
@@ -559,7 +561,7 @@
/**
* @override
* @param {!View} view
- * @param {?UI.View=} insertBefore
+ * @param {?View=} insertBefore
* @param {boolean=} userGesture
* @param {boolean=} omitFocus
* @return {!Promise}
@@ -662,7 +664,7 @@
/**
* @override
* @param {!View} view
- * @param {?UI.View=} insertBefore
+ * @param {?View=} insertBefore
*/
appendView(view, insertBefore) {
const oldLocation = view[_Location.symbol];
@@ -688,7 +690,7 @@
/**
* @override
* @param {!View} view
- * @param {?UI.View=} insertBefore
+ * @param {?View=} insertBefore
* @return {!Promise}
*/
showView(view, insertBefore) {
diff --git a/front_end/ui/XLink.js b/front_end/ui/XLink.js
index 9e34ff9..d9bdda1 100644
--- a/front_end/ui/XLink.js
+++ b/front_end/ui/XLink.js
@@ -3,6 +3,8 @@
// found in the LICENSE file.
import * as Host from '../host/host.js';
+
+import * as ARIAUtils from './ARIAUtils.js';
import {ContextMenu, Provider} from './ContextMenu.js'; // eslint-disable-line no-unused-vars
import {html} from './Fragment.js';
import {copyLinkAddressLabel, MaxLengthForDisplayedURLs, openLinkExternallyLabel} from './UIUtils.js';
@@ -36,7 +38,7 @@
super();
this.style.setProperty('display', 'inline');
- UI.ARIAUtils.markAsLink(this);
+ ARIAUtils.markAsLink(this);
this.tabIndex = 0;
this.target = '_blank';
this.rel = 'noopener';
diff --git a/front_end/ui/ui-legacy.js b/front_end/ui/ui-legacy.js
index 2ca260e..b3d0aca 100644
--- a/front_end/ui/ui-legacy.js
+++ b/front_end/ui/ui-legacy.js
@@ -228,7 +228,7 @@
*/
UI.KeyboardShortcut.Modifiers = UIModule.KeyboardShortcut.Modifiers;
-/** @type {!Object.<string, !UI.KeyboardShortcut.Key>} */
+/** @type {!Object.<string, !UIModule.KeyboardShortcut.Key>} */
UI.KeyboardShortcut.Keys = UIModule.KeyboardShortcut.Keys;
/** @constructor */
@@ -615,60 +615,11 @@
/** @type {!UI.ActionRegistry} */
self.UI.actionRegistry;
-/** @typedef {{name: string, label: string, title: (string|undefined)}} */
-UI.NamedBitSetFilterUI.Item;
-
-/**
- * @typedef {!{
- * template: !Element,
- * binds: !Array<!UI.Fragment._Bind>
- * }}
- */
-UI.Fragment._Template;
-
-/**
- * @typedef {!{
- * elementId: (string|undefined),
- *
- * attr: (!{
- * index: number,
- * names: !Array<string>,
- * values: !Array<string>
- * }|undefined),
- *
- * replaceNodeIndex: (number|undefined)
- * }}
- */
-UI.Fragment._Bind;
-
-/** @typedef {{position: string, spritesheet: string, isMask: (boolean|undefined), coordinates: ({x: number, y: number}|undefined), invert: (boolean|undefined)}} */
-UI.Icon.Descriptor;
-
-/** @typedef {{cellWidth: number, cellHeight: number, padding: number}} */
-UI.Icon.SpriteSheet;
-
-/**
- * @typedef {{cancel: function(), commit: function()}}
- */
-UI.InplaceEditor.Controller;
-
/**
* @type {!UI.InspectorView}
*/
UI.inspectorView;
-/** @typedef {!{code: number, name: (string|!Object.<string, string>)}} */
-UI.KeyboardShortcut.Key;
-
-/** @typedef {!{key: number, name: string}} */
-UI.KeyboardShortcut.Descriptor;
-
-/** @typedef {{valid: boolean, errorMessage: (string|undefined)}} */
-UI.ListWidget.ValidatorResult;
-
-/** @typedef {{box: !AnchorBox, show:(function(!UI.GlassPane):!Promise<boolean>), hide:(function()|undefined)}} */
-UI.PopoverRequest;
-
/** @type {!UI.ShortcutRegistry} */
self.UI.shortcutRegistry;
@@ -678,61 +629,9 @@
*/
self.UI.shortcutsScreen;
-/** @typedef {{showMode: string, size: number}} */
-UI.SplitWidget.SettingForOrientation;
-
-/**
- * @typedef {{
- * text: string,
- * title: (string|undefined),
- * subtitle: (string|undefined),
- * iconType: (string|undefined),
- * priority: (number|undefined),
- * isSecondary: (boolean|undefined),
- * subtitleRenderer: (function():!Element|undefined),
- * selectionRange: ({startColumn: number, endColumn: number}|undefined),
- * hideGhostText: (boolean|undefined)
- * }}
- */
-UI.SuggestBox.Suggestion;
-
-/**
- * @typedef {!Array<!UI.SuggestBox.Suggestion>}
- */
-UI.SuggestBox.Suggestions;
-
-/**
- * @typedef {{
- * bracketMatchingSetting: (!Common.Setting|undefined),
- * devtoolsAccessibleName: (string|undefined),
- * lineNumbers: boolean,
- * lineWrapping: boolean,
- * mimeType: (string|undefined),
- * autoHeight: (boolean|undefined),
- * padBottom: (boolean|undefined),
- * maxHighlightLength: (number|undefined),
- * placeholder: (string|undefined)
- * }}
- */
-UI.TextEditor.Options;
-
-/**
- * @typedef {{
- * substituteRangeCallback: ((function(number, number):?TextUtils.TextRange)|undefined),
- * tooltipCallback: ((function(number, number):!Promise<?Element>)|undefined),
- * suggestionsCallback: ((function(!TextUtils.TextRange, !TextUtils.TextRange, boolean=):?Promise.<!UI.SuggestBox.Suggestions>)|undefined),
- * isWordChar: ((function(string):boolean)|undefined),
- * anchorBehavior: (UI.GlassPane.AnchorBehavior|undefined)
- * }}
- */
-UI.AutocompleteConfig;
-
/** @type {?UI.ThemeSupport} */
self.UI.themeSupport;
-/** @typedef {!{title: (string|!Element|undefined), editable: (boolean|undefined) }} */
-UI.Renderer.Options;
-
/**
* @type {!UI.ViewManager}
*/