[Underscore Migration] Migrate ui/legacy
This patch is part of the underscore migration that adds the private
keyword to all properties that start with an underscore and removes the
underscore.
R=tvanderlippe@chromium.org
Bug:chromium:1207342
Change-Id: I5ffc2c13077016933e6a77c34e94b279212ce004
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3093160
Commit-Queue: Jan Scheffler <janscheffler@chromium.org>
Auto-Submit: Jan Scheffler <janscheffler@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
diff --git a/front_end/Tests.js b/front_end/Tests.js
index b730103..66ef54d 100644
--- a/front_end/Tests.js
+++ b/front_end/Tests.js
@@ -772,7 +772,7 @@
TestSuite.prototype.testForwardedKeysChanged = function() {
this.takeControl();
- this.addSniffer(self.UI.shortcutRegistry, '_registerBindings', () => {
+ this.addSniffer(self.UI.shortcutRegistry, 'registerBindings', () => {
self.SDK.targetManager.mainTarget().inputAgent().invoke_dispatchKeyEvent(
{type: 'rawKeyDown', key: 'F1', windowsVirtualKeyCode: 112, nativeVirtualKeyCode: 112});
});
diff --git a/front_end/legacy/legacy-defs.d.ts b/front_end/legacy/legacy-defs.d.ts
index cfd6fdb..042cd01 100644
--- a/front_end/legacy/legacy-defs.d.ts
+++ b/front_end/legacy/legacy-defs.d.ts
@@ -119,6 +119,7 @@
deepTextContent(): string
window(): Window;
childTextNodes(): Node[];
+ __widget?: any;
}
declare function isEnterOrSpaceKey(event: Event): boolean;
diff --git a/front_end/panels/application/ApplicationPanelSidebar.ts b/front_end/panels/application/ApplicationPanelSidebar.ts
index 4c88045..4097e5b 100644
--- a/front_end/panels/application/ApplicationPanelSidebar.ts
+++ b/front_end/panels/application/ApplicationPanelSidebar.ts
@@ -1608,7 +1608,7 @@
constructor(storagePanel: ResourcesPanel, treeElement: UI.TreeOutline.TreeElement) {
this.panel = storagePanel;
this.treeElement = treeElement;
- UI.ARIAUtils.setAccessibleName(this.treeElement._listItemNode, 'Resources Section');
+ UI.ARIAUtils.setAccessibleName(this.treeElement.listItemNode, 'Resources Section');
this.treeElementForFrameId = new Map();
this.treeElementForTargetId = new Map();
diff --git a/front_end/panels/elements/AccessibilityTreeView.ts b/front_end/panels/elements/AccessibilityTreeView.ts
index e25448a..dbd5606 100644
--- a/front_end/panels/elements/AccessibilityTreeView.ts
+++ b/front_end/panels/elements/AccessibilityTreeView.ts
@@ -154,7 +154,7 @@
// unloaded.
async selectedNodeChanged(inspectedNode: SDK.DOMModel.DOMNode): Promise<void> {
// We only want to do this when the AccessibilityTree is visible.
- if (!this._visible) {
+ if (!this.visibleInternal) {
return;
}
if (inspectedNode === this.inspectedDOMNode) {
diff --git a/front_end/panels/elements/StylesSidebarPane.ts b/front_end/panels/elements/StylesSidebarPane.ts
index 07eeb84..4379702 100644
--- a/front_end/panels/elements/StylesSidebarPane.ts
+++ b/front_end/panels/elements/StylesSidebarPane.ts
@@ -1457,7 +1457,7 @@
}
private getFocused(): HTMLElement|null {
- return (this.propertiesTreeOutline._shadowRoot.activeElement as HTMLElement) || null;
+ return (this.propertiesTreeOutline.shadowRoot.activeElement as HTMLElement) || null;
}
private focusNext(element: HTMLElement): void {
@@ -1469,7 +1469,7 @@
// Focus the next item and remember it (if in our subtree).
element.focus();
- if (this.propertiesTreeOutline._shadowRoot.contains(element)) {
+ if (this.propertiesTreeOutline.shadowRoot.contains(element)) {
element.tabIndex = 0;
}
}
@@ -1483,7 +1483,7 @@
let focusNext: HTMLElement|null = null;
const focusable =
- Array.from((this.propertiesTreeOutline._shadowRoot.querySelectorAll('[tabindex]') as NodeListOf<HTMLElement>));
+ Array.from((this.propertiesTreeOutline.shadowRoot.querySelectorAll('[tabindex]') as NodeListOf<HTMLElement>));
if (focusable.length === 0) {
return;
diff --git a/front_end/ui/legacy/ARIAUtils.ts b/front_end/ui/legacy/ARIAUtils.ts
index 7fcaa17..538a09a 100644
--- a/front_end/ui/legacy/ARIAUtils.ts
+++ b/front_end/ui/legacy/ARIAUtils.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Platform from '../../core/platform/platform.js';
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
diff --git a/front_end/ui/legacy/ActionRegistration.ts b/front_end/ui/legacy/ActionRegistration.ts
index 022be80..4b7c64a 100644
--- a/front_end/ui/legacy/ActionRegistration.ts
+++ b/front_end/ui/legacy/ActionRegistration.ts
@@ -13,8 +13,8 @@
}
export class Action extends Common.ObjectWrapper.ObjectWrapper {
- _enabled = true;
- _toggled = false;
+ private enabledInternal = true;
+ private toggledInternal = false;
private actionRegistration: ActionRegistration;
constructor(actionRegistration: ActionRegistration) {
super();
@@ -47,16 +47,16 @@
}
setEnabled(enabled: boolean): void {
- if (this._enabled === enabled) {
+ if (this.enabledInternal === enabled) {
return;
}
- this._enabled = enabled;
+ this.enabledInternal = enabled;
this.dispatchEventToListeners(Events.Enabled, enabled);
}
enabled(): boolean {
- return this._enabled;
+ return this.enabledInternal;
}
category(): string {
@@ -84,7 +84,7 @@
// with the 'value' of the options are used to determine which one it is.
for (const pair of options) {
- if (pair.value !== this._toggled) {
+ if (pair.value !== this.toggledInternal) {
title = pair.title();
}
}
@@ -93,16 +93,16 @@
}
toggled(): boolean {
- return this._toggled;
+ return this.toggledInternal;
}
setToggled(toggled: boolean): void {
console.assert(this.toggleable(), 'Shouldn\'t be toggling an untoggleable action', this.id());
- if (this._toggled === toggled) {
+ if (this.toggledInternal === toggled) {
return;
}
- this._toggled = toggled;
+ this.toggledInternal = toggled;
this.dispatchEventToListeners(Events.Toggled, toggled);
}
diff --git a/front_end/ui/legacy/ActionRegistry.ts b/front_end/ui/legacy/ActionRegistry.ts
index deafd48..fcb9ffe 100644
--- a/front_end/ui/legacy/ActionRegistry.ts
+++ b/front_end/ui/legacy/ActionRegistry.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type {Action} from './ActionRegistration.js';
import {getRegisteredActionExtensions} from './ActionRegistration.js';
import {Context} from './Context.js';
@@ -11,10 +9,10 @@
let actionRegistryInstance: ActionRegistry|undefined;
export class ActionRegistry {
- _actionsById: Map<string, Action>;
+ private readonly actionsById: Map<string, Action>;
private constructor() {
- this._actionsById = new Map();
- this._registerActions();
+ this.actionsById = new Map();
+ this.registerActions();
}
static instance(opts: {
@@ -32,9 +30,9 @@
actionRegistryInstance = undefined;
}
- _registerActions(): void {
+ private registerActions(): void {
for (const action of getRegisteredActionExtensions()) {
- this._actionsById.set(action.id(), action);
+ this.actionsById.set(action.id(), action);
if (!action.canInstantiate()) {
action.setEnabled(false);
}
@@ -42,17 +40,17 @@
}
availableActions(): Action[] {
- return this.applicableActions([...this._actionsById.keys()], Context.instance());
+ return this.applicableActions([...this.actionsById.keys()], Context.instance());
}
actions(): Action[] {
- return [...this._actionsById.values()];
+ return [...this.actionsById.values()];
}
applicableActions(actionIds: string[], context: Context): Action[] {
const applicableActions: Action[] = [];
for (const actionId of actionIds) {
- const action = this._actionsById.get(actionId);
+ const action = this.actionsById.get(actionId);
if (action && action.enabled()) {
if (isActionApplicableToContextTypes((action as Action), context.flavors())) {
applicableActions.push((action as Action));
@@ -78,6 +76,6 @@
}
action(actionId: string): Action|null {
- return this._actionsById.get(actionId) || null;
+ return this.actionsById.get(actionId) || null;
}
}
diff --git a/front_end/ui/legacy/Context.ts b/front_end/ui/legacy/Context.ts
index dddb73f..5929557 100644
--- a/front_end/ui/legacy/Context.ts
+++ b/front_end/ui/legacy/Context.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Root from '../../core/root/root.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -18,12 +16,12 @@
}
export class Context {
- _flavors: Map<ConstructorFn<unknown>, Object>;
- _eventDispatchers: Map<ConstructorFn<unknown>, Common.ObjectWrapper.ObjectWrapper>;
+ private readonly flavorsInternal: Map<ConstructorFn<unknown>, Object>;
+ private readonly eventDispatchers: Map<ConstructorFn<unknown>, Common.ObjectWrapper.ObjectWrapper>;
private constructor() {
- this._flavors = new Map();
- this._eventDispatchers = new Map();
+ this.flavorsInternal = new Map();
+ this.eventDispatchers = new Map();
}
static instance(opts: {
@@ -38,26 +36,26 @@
}
setFlavor<T>(flavorType: ConstructorFn<T>, flavorValue: T|null): void {
- const value = this._flavors.get(flavorType) || null;
+ const value = this.flavorsInternal.get(flavorType) || null;
if (value === flavorValue) {
return;
}
if (flavorValue) {
- this._flavors.set(flavorType, flavorValue);
+ this.flavorsInternal.set(flavorType, flavorValue);
} else {
- this._flavors.delete(flavorType);
+ this.flavorsInternal.delete(flavorType);
}
- this._dispatchFlavorChange(flavorType, flavorValue);
+ this.dispatchFlavorChange(flavorType, flavorValue);
}
- _dispatchFlavorChange<T>(flavorType: ConstructorFn<T>, flavorValue: T|null): void {
+ private dispatchFlavorChange<T>(flavorType: ConstructorFn<T>, flavorValue: T|null): void {
for (const extension of getRegisteredListeners()) {
if (extension.contextTypes().includes(flavorType)) {
extension.loadListener().then(instance => instance.flavorChanged(flavorValue));
}
}
- const dispatcher = this._eventDispatchers.get(flavorType);
+ const dispatcher = this.eventDispatchers.get(flavorType);
if (!dispatcher) {
return;
}
@@ -67,10 +65,10 @@
addFlavorChangeListener<T>(
flavorType: ConstructorFn<T>, listener: (arg0: Common.EventTarget.EventTargetEvent) => void,
thisObject?: Object): void {
- let dispatcher = this._eventDispatchers.get(flavorType);
+ let dispatcher = this.eventDispatchers.get(flavorType);
if (!dispatcher) {
dispatcher = new Common.ObjectWrapper.ObjectWrapper();
- this._eventDispatchers.set(flavorType, dispatcher);
+ this.eventDispatchers.set(flavorType, dispatcher);
}
dispatcher.addEventListener(Events.FlavorChanged, listener, thisObject);
}
@@ -78,22 +76,22 @@
removeFlavorChangeListener<T>(
flavorType: ConstructorFn<T>, listener: (arg0: Common.EventTarget.EventTargetEvent) => void,
thisObject?: Object): void {
- const dispatcher = this._eventDispatchers.get(flavorType);
+ const dispatcher = this.eventDispatchers.get(flavorType);
if (!dispatcher) {
return;
}
dispatcher.removeEventListener(Events.FlavorChanged, listener, thisObject);
if (!dispatcher.hasEventListeners(Events.FlavorChanged)) {
- this._eventDispatchers.delete(flavorType);
+ this.eventDispatchers.delete(flavorType);
}
}
flavor<T>(flavorType: ConstructorFn<T>): T|null {
- return (this._flavors.get(flavorType) as T | null) || null;
+ return (this.flavorsInternal.get(flavorType) as T | null) || null;
}
flavors(): Set<ConstructorFn<unknown>> {
- return new Set(this._flavors.keys());
+ return new Set(this.flavorsInternal.keys());
}
}
diff --git a/front_end/ui/legacy/ContextFlavorListener.ts b/front_end/ui/legacy/ContextFlavorListener.ts
index 4bd5874..84cd8bd 100644
--- a/front_end/ui/legacy/ContextFlavorListener.ts
+++ b/front_end/ui/legacy/ContextFlavorListener.ts
@@ -5,7 +5,6 @@
/**
* @interface
*/
-/* eslint-disable rulesdir/no_underscored_properties */
export interface ContextFlavorListener {
flavorChanged(object: Object|null): void;
diff --git a/front_end/ui/legacy/ContextMenu.ts b/front_end/ui/legacy/ContextMenu.ts
index a9918bc..924bf6b 100644
--- a/front_end/ui/legacy/ContextMenu.ts
+++ b/front_end/ui/legacy/ContextMenu.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as Root from '../../core/root/root.js';
@@ -41,64 +39,64 @@
import {deepElementFromEvent} from './UIUtils.js';
export class Item {
- _type: string;
- _label: string|undefined;
- _disabled: boolean|undefined;
- _checked: boolean|undefined;
- _contextMenu: ContextMenu|null;
- _id: number|undefined;
- _customElement?: Element;
- _shortcut?: string;
+ private readonly typeInternal: string;
+ protected readonly label: string|undefined;
+ protected disabled: boolean|undefined;
+ private readonly checked: boolean|undefined;
+ protected contextMenu: ContextMenu|null;
+ protected idInternal: number|undefined;
+ customElement?: Element;
+ private shortcut?: string;
constructor(contextMenu: ContextMenu|null, type: string, label?: string, disabled?: boolean, checked?: boolean) {
- this._type = type;
- this._label = label;
- this._disabled = disabled;
- this._checked = checked;
- this._contextMenu = contextMenu;
- this._id = undefined;
+ this.typeInternal = type;
+ this.label = label;
+ this.disabled = disabled;
+ this.checked = checked;
+ this.contextMenu = contextMenu;
+ this.idInternal = undefined;
if (type === 'item' || type === 'checkbox') {
- this._id = contextMenu ? contextMenu._nextId() : 0;
+ this.idInternal = contextMenu ? contextMenu.nextId() : 0;
}
}
id(): number {
- if (this._id === undefined) {
+ if (this.idInternal === undefined) {
throw new Error('Tried to access a ContextMenu Item ID but none was set.');
}
- return this._id;
+ return this.idInternal;
}
type(): string {
- return this._type;
+ return this.typeInternal;
}
isEnabled(): boolean {
- return !this._disabled;
+ return !this.disabled;
}
setEnabled(enabled: boolean): void {
- this._disabled = !enabled;
+ this.disabled = !enabled;
}
- _buildDescriptor(): SoftContextMenuDescriptor|Host.InspectorFrontendHostAPI.ContextMenuDescriptor {
- switch (this._type) {
+ buildDescriptor(): SoftContextMenuDescriptor|Host.InspectorFrontendHostAPI.ContextMenuDescriptor {
+ switch (this.typeInternal) {
case 'item': {
const result = {
type: 'item',
- id: this._id,
- label: this._label,
- enabled: !this._disabled,
+ id: this.idInternal,
+ label: this.label,
+ enabled: !this.disabled,
checked: undefined,
subItems: undefined,
};
- if (this._customElement) {
+ if (this.customElement) {
const resultAsSoftContextMenuItem = (result as SoftContextMenuDescriptor);
- resultAsSoftContextMenuItem.element = (this._customElement as Element);
+ resultAsSoftContextMenuItem.element = (this.customElement as Element);
}
- if (this._shortcut) {
+ if (this.shortcut) {
const resultAsSoftContextMenuItem = (result as SoftContextMenuDescriptor);
- resultAsSoftContextMenuItem.shortcut = this._shortcut;
+ resultAsSoftContextMenuItem.shortcut = this.shortcut;
}
return result;
}
@@ -115,49 +113,49 @@
case 'checkbox': {
return {
type: 'checkbox',
- id: this._id,
- label: this._label,
- checked: Boolean(this._checked),
- enabled: !this._disabled,
+ id: this.idInternal,
+ label: this.label,
+ checked: Boolean(this.checked),
+ enabled: !this.disabled,
subItems: undefined,
};
}
}
- throw new Error('Invalid item type:' + this._type);
+ throw new Error('Invalid item type:' + this.typeInternal);
}
setShortcut(shortcut: string): void {
- this._shortcut = shortcut;
+ this.shortcut = shortcut;
}
}
export class Section {
- _contextMenu: ContextMenu|null;
- _items: Item[];
+ private readonly contextMenu: ContextMenu|null;
+ readonly items: Item[];
constructor(contextMenu: ContextMenu|null) {
- this._contextMenu = contextMenu;
- this._items = [];
+ this.contextMenu = contextMenu;
+ this.items = [];
}
appendItem(label: string, handler: () => void, disabled?: boolean): Item {
- const item = new Item(this._contextMenu, 'item', label, disabled);
- this._items.push(item);
- if (this._contextMenu) {
- this._contextMenu._setHandler(item.id(), handler);
+ const item = new Item(this.contextMenu, 'item', label, disabled);
+ this.items.push(item);
+ if (this.contextMenu) {
+ this.contextMenu.setHandler(item.id(), handler);
}
return item;
}
appendCustomItem(element: Element): Item {
- const item = new Item(this._contextMenu, 'item', '<custom>');
- item._customElement = element;
- this._items.push(item);
+ const item = new Item(this.contextMenu, 'item', '<custom>');
+ item.customElement = element;
+ this.items.push(item);
return item;
}
appendSeparator(): Item {
- const item = new Item(this._contextMenu, 'separator');
- this._items.push(item);
+ const item = new Item(this.contextMenu, 'separator');
+ this.items.push(item);
return item;
}
@@ -180,45 +178,45 @@
}
appendSubMenuItem(label: string, disabled?: boolean): SubMenu {
- const item = new SubMenu(this._contextMenu, label, disabled);
- item._init();
- this._items.push(item);
+ const item = new SubMenu(this.contextMenu, label, disabled);
+ item.init();
+ this.items.push(item);
return item;
}
appendCheckboxItem(label: string, handler: () => void, checked?: boolean, disabled?: boolean): Item {
- const item = new Item(this._contextMenu, 'checkbox', label, disabled, checked);
- this._items.push(item);
- if (this._contextMenu) {
- this._contextMenu._setHandler(item.id(), handler);
+ const item = new Item(this.contextMenu, 'checkbox', label, disabled, checked);
+ this.items.push(item);
+ if (this.contextMenu) {
+ this.contextMenu.setHandler(item.id(), handler);
}
return item;
}
}
export class SubMenu extends Item {
- _sections: Map<string, Section>;
- _sectionList: Section[];
+ private readonly sections: Map<string, Section>;
+ private readonly sectionList: Section[];
constructor(contextMenu: ContextMenu|null, label?: string, disabled?: boolean) {
super(contextMenu, 'subMenu', label, disabled);
- this._sections = new Map();
- this._sectionList = [];
+ this.sections = new Map();
+ this.sectionList = [];
}
- _init(): void {
- ContextMenu._groupWeights.forEach(name => this.section(name));
+ init(): void {
+ ContextMenu.groupWeights.forEach(name => this.section(name));
}
section(name?: string): Section {
- let section: Section|(Section | null | undefined) = name ? this._sections.get(name) : null;
+ let section: Section|(Section | null | undefined) = name ? this.sections.get(name) : null;
if (!section) {
- section = new Section(this._contextMenu);
+ section = new Section(this.contextMenu);
if (name) {
- this._sections.set(name, section);
- this._sectionList.push(section);
+ this.sections.set(name, section);
+ this.sectionList.push(section);
} else {
- this._sectionList.splice(ContextMenu._groupWeights.indexOf('default'), 0, section);
+ this.sectionList.splice(ContextMenu.groupWeights.indexOf('default'), 0, section);
}
}
return section;
@@ -264,23 +262,23 @@
return this.section('footer');
}
- _buildDescriptor(): SoftContextMenuDescriptor|Host.InspectorFrontendHostAPI.ContextMenuDescriptor {
+ buildDescriptor(): SoftContextMenuDescriptor|Host.InspectorFrontendHostAPI.ContextMenuDescriptor {
const result: Host.InspectorFrontendHostAPI.ContextMenuDescriptor|SoftContextMenuDescriptor = {
type: 'subMenu',
- label: this._label,
- enabled: !this._disabled,
+ label: this.label,
+ enabled: !this.disabled,
subItems: [],
id: undefined,
checked: undefined,
};
- const nonEmptySections = this._sectionList.filter(section => Boolean(section._items.length));
+ const nonEmptySections = this.sectionList.filter(section => Boolean(section.items.length));
for (const section of nonEmptySections) {
- for (const item of section._items) {
+ for (const item of section.items) {
if (!result.subItems) {
result.subItems = [];
}
- result.subItems.push(item._buildDescriptor());
+ result.subItems.push(item.buildDescriptor());
}
if (section !== nonEmptySections[nonEmptySections.length - 1]) {
if (!result.subItems) {
@@ -328,36 +326,36 @@
}
}
- static _uniqueSectionName: number = 0;
+ private static uniqueSectionName: number = 0;
}
export class ContextMenu extends SubMenu {
- _contextMenu: this;
- _defaultSection: Section;
- _pendingPromises: Promise<Provider[]>[];
- _pendingTargets: Object[];
- _event: MouseEvent;
- _useSoftMenu: boolean;
- _x: number;
- _y: number;
- _handlers: Map<number, () => void>;
- _id: number;
- _softMenu?: SoftContextMenu;
+ protected contextMenu: this;
+ private readonly defaultSectionInternal: Section;
+ private pendingPromises: Promise<Provider[]>[];
+ private pendingTargets: Object[];
+ private readonly event: MouseEvent;
+ private readonly useSoftMenu: boolean;
+ private x: number;
+ private y: number;
+ private readonly handlers: Map<number, () => void>;
+ idInternal: number;
+ private softMenu?: SoftContextMenu;
constructor(event: Event, useSoftMenu?: boolean, x?: number, y?: number) {
super(null);
const mouseEvent = (event as MouseEvent);
- this._contextMenu = this;
- super._init();
- this._defaultSection = this.defaultSection();
- this._pendingPromises = [];
- this._pendingTargets = [];
- this._event = mouseEvent;
- this._useSoftMenu = Boolean(useSoftMenu);
- this._x = x === undefined ? mouseEvent.x : x;
- this._y = y === undefined ? mouseEvent.y : y;
- this._handlers = new Map();
- this._id = 0;
+ this.contextMenu = this;
+ super.init();
+ this.defaultSectionInternal = this.defaultSection();
+ this.pendingPromises = [];
+ this.pendingTargets = [];
+ this.event = mouseEvent;
+ this.useSoftMenu = Boolean(useSoftMenu);
+ this.x = x === undefined ? mouseEvent.x : x;
+ this.y = y === undefined ? mouseEvent.y : y;
+ this.handlers = new Map();
+ this.idInternal = 0;
const target = deepElementFromEvent(event);
if (target) {
@@ -369,7 +367,7 @@
Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
Host.InspectorFrontendHostAPI.Events.SetUseSoftMenu, setUseSoftMenu);
function setUseSoftMenu(event: Common.EventTarget.EventTargetEvent): void {
- ContextMenu._useSoftMenu = (event.data as boolean);
+ ContextMenu.useSoftMenu = (event.data as boolean);
}
}
@@ -382,62 +380,62 @@
}
}
- _nextId(): number {
- return this._id++;
+ nextId(): number {
+ return this.idInternal++;
}
async show(): Promise<void> {
- ContextMenu._pendingMenu = this;
- this._event.consume(true);
- const loadedProviders: Provider[][] = await Promise.all(this._pendingPromises);
+ ContextMenu.pendingMenu = this;
+ this.event.consume(true);
+ const loadedProviders: Provider[][] = await Promise.all(this.pendingPromises);
// After loading all providers, the contextmenu might be hidden again, so bail out.
- if (ContextMenu._pendingMenu !== this) {
+ if (ContextMenu.pendingMenu !== this) {
return;
}
- ContextMenu._pendingMenu = null;
+ ContextMenu.pendingMenu = null;
for (let i = 0; i < loadedProviders.length; ++i) {
const providers = loadedProviders[i];
- const target = this._pendingTargets[i];
+ const target = this.pendingTargets[i];
for (const provider of providers) {
- provider.appendApplicableItems(this._event, this, target);
+ provider.appendApplicableItems(this.event, this, target);
}
}
- this._pendingPromises = [];
- this._pendingTargets = [];
+ this.pendingPromises = [];
+ this.pendingTargets = [];
- this._innerShow();
+ this.innerShow();
}
discard(): void {
- if (this._softMenu) {
- this._softMenu.discard();
+ if (this.softMenu) {
+ this.softMenu.discard();
}
}
- _innerShow(): void {
- const menuObject = this._buildMenuDescriptors();
- const eventTarget = this._event.target;
+ private innerShow(): void {
+ const menuObject = this.buildMenuDescriptors();
+ const eventTarget = this.event.target;
if (!eventTarget) {
return;
}
const ownerDocument = (eventTarget as HTMLElement).ownerDocument;
- if (this._useSoftMenu || ContextMenu._useSoftMenu ||
+ if (this.useSoftMenu || ContextMenu.useSoftMenu ||
Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {
- this._softMenu = new SoftContextMenu((menuObject as SoftContextMenuDescriptor[]), this._itemSelected.bind(this));
- this._softMenu.show((ownerDocument as Document), new AnchorBox(this._x, this._y, 0, 0));
+ this.softMenu = new SoftContextMenu((menuObject as SoftContextMenuDescriptor[]), this.itemSelected.bind(this));
+ this.softMenu.show((ownerDocument as Document), new AnchorBox(this.x, this.y, 0, 0));
} else {
Host.InspectorFrontendHost.InspectorFrontendHostInstance.showContextMenuAtPoint(
- this._x, this._y, menuObject, (ownerDocument as Document));
+ this.x, this.y, menuObject, (ownerDocument as Document));
function listenToEvents(this: ContextMenu): void {
Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
- Host.InspectorFrontendHostAPI.Events.ContextMenuCleared, this._menuCleared, this);
+ Host.InspectorFrontendHostAPI.Events.ContextMenuCleared, this.menuCleared, this);
Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
- Host.InspectorFrontendHostAPI.Events.ContextMenuItemSelected, this._onItemSelected, this);
+ Host.InspectorFrontendHostAPI.Events.ContextMenuItemSelected, this.onItemSelected, this);
}
// showContextMenuAtPoint call above synchronously issues a clear event for previous context menu (if any),
@@ -447,58 +445,58 @@
}
setX(x: number): void {
- this._x = x;
+ this.x = x;
}
setY(y: number): void {
- this._y = y;
+ this.y = y;
}
- _setHandler(id: number, handler: () => void): void {
+ setHandler(id: number, handler: () => void): void {
if (handler) {
- this._handlers.set(id, handler);
+ this.handlers.set(id, handler);
}
}
- _buildMenuDescriptors(): (SoftContextMenuDescriptor|Host.InspectorFrontendHostAPI.ContextMenuDescriptor)[] {
+ private buildMenuDescriptors(): (SoftContextMenuDescriptor|Host.InspectorFrontendHostAPI.ContextMenuDescriptor)[] {
return /** @type {!Array.<!Host.InspectorFrontendHostAPI.ContextMenuDescriptor|!SoftContextMenuDescriptor>} */ super
- ._buildDescriptor()
+ .buildDescriptor()
.subItems as (SoftContextMenuDescriptor | Host.InspectorFrontendHostAPI.ContextMenuDescriptor)[];
}
- _onItemSelected(event: Common.EventTarget.EventTargetEvent): void {
- this._itemSelected((event.data as number));
+ private onItemSelected(event: Common.EventTarget.EventTargetEvent): void {
+ this.itemSelected((event.data as number));
}
- _itemSelected(id: number): void {
- const handler = this._handlers.get(id);
+ private itemSelected(id: number): void {
+ const handler = this.handlers.get(id);
if (handler) {
handler.call(this);
}
- this._menuCleared();
+ this.menuCleared();
}
- _menuCleared(): void {
+ private menuCleared(): void {
Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
- Host.InspectorFrontendHostAPI.Events.ContextMenuCleared, this._menuCleared, this);
+ Host.InspectorFrontendHostAPI.Events.ContextMenuCleared, this.menuCleared, this);
Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
- Host.InspectorFrontendHostAPI.Events.ContextMenuItemSelected, this._onItemSelected, this);
+ Host.InspectorFrontendHostAPI.Events.ContextMenuItemSelected, this.onItemSelected, this);
}
containsTarget(target: Object): boolean {
- return this._pendingTargets.indexOf(target) >= 0;
+ return this.pendingTargets.indexOf(target) >= 0;
}
appendApplicableItems(target: Object): void {
- this._pendingPromises.push(loadApplicableRegisteredProviders(target));
- this._pendingTargets.push(target);
+ this.pendingPromises.push(loadApplicableRegisteredProviders(target));
+ this.pendingTargets.push(target);
}
- static _pendingMenu: ContextMenu|null = null;
- static _useSoftMenu = false;
+ private static pendingMenu: ContextMenu|null = null;
+ private static useSoftMenu = false;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
- static readonly _groupWeights =
+ static readonly groupWeights =
['header', 'new', 'reveal', 'edit', 'clipboard', 'debug', 'view', 'default', 'save', 'footer'];
}
diff --git a/front_end/ui/legacy/Dialog.ts b/front_end/ui/legacy/Dialog.ts
index 82801ec..f9d8ca7 100644
--- a/front_end/ui/legacy/Dialog.ts
+++ b/front_end/ui/legacy/Dialog.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as ARIAUtils from './ARIAUtils.js';
import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
import {InspectorView} from './InspectorView.js';
@@ -40,13 +38,13 @@
import {WidgetFocusRestorer} from './Widget.js';
export class Dialog extends GlassPane {
- _tabIndexBehavior: OutsideTabIndexBehavior;
- _tabIndexMap: Map<HTMLElement, number>;
- _focusRestorer: WidgetFocusRestorer|null;
- _closeOnEscape: boolean;
- _targetDocument!: Document|null;
- _targetDocumentKeyDownHandler: (event: Event) => void;
- _escapeKeyCallback: ((arg0: Event) => void)|null;
+ private tabIndexBehavior: OutsideTabIndexBehavior;
+ private tabIndexMap: Map<HTMLElement, number>;
+ private focusRestorer: WidgetFocusRestorer|null;
+ private closeOnEscape: boolean;
+ private targetDocument!: Document|null;
+ private readonly targetDocumentKeyDownHandler: (event: Event) => void;
+ private escapeKeyCallback: ((arg0: Event) => void)|null;
constructor() {
super();
@@ -60,52 +58,52 @@
event.consume(true);
});
ARIAUtils.markAsModalDialog(this.contentElement);
- this._tabIndexBehavior = OutsideTabIndexBehavior.DisableAllOutsideTabIndex;
- this._tabIndexMap = new Map();
- this._focusRestorer = null;
- this._closeOnEscape = true;
- this._targetDocumentKeyDownHandler = this._onKeyDown.bind(this);
- this._escapeKeyCallback = null;
+ this.tabIndexBehavior = OutsideTabIndexBehavior.DisableAllOutsideTabIndex;
+ this.tabIndexMap = new Map();
+ this.focusRestorer = null;
+ this.closeOnEscape = true;
+ this.targetDocumentKeyDownHandler = this.onKeyDown.bind(this);
+ this.escapeKeyCallback = null;
}
static hasInstance(): boolean {
- return Boolean(Dialog._instance);
+ return Boolean(Dialog.instance);
}
show(where?: Document | Element): void {
const document = (where instanceof Document ? where : (where || InspectorView.instance().element).ownerDocument as Document);
- this._targetDocument = document;
- this._targetDocument.addEventListener('keydown', this._targetDocumentKeyDownHandler, true);
+ this.targetDocument = document;
+ this.targetDocument.addEventListener('keydown', this.targetDocumentKeyDownHandler, true);
- if (Dialog._instance) {
- Dialog._instance.hide();
+ if (Dialog.instance) {
+ Dialog.instance.hide();
}
- Dialog._instance = this;
- this._disableTabIndexOnElements(document);
+ Dialog.instance = this;
+ this.disableTabIndexOnElements(document);
super.show(document);
- this._focusRestorer = new WidgetFocusRestorer(this.widget());
+ this.focusRestorer = new WidgetFocusRestorer(this.widget());
}
hide(): void {
- if (this._focusRestorer) {
- this._focusRestorer.restore();
+ if (this.focusRestorer) {
+ this.focusRestorer.restore();
}
super.hide();
- if (this._targetDocument) {
- this._targetDocument.removeEventListener('keydown', this._targetDocumentKeyDownHandler, true);
+ if (this.targetDocument) {
+ this.targetDocument.removeEventListener('keydown', this.targetDocumentKeyDownHandler, true);
}
- this._restoreTabIndexOnElements();
+ this.restoreTabIndexOnElements();
this.dispatchEventToListeners('hidden');
- Dialog._instance = null;
+ Dialog.instance = null;
}
setCloseOnEscape(close: boolean): void {
- this._closeOnEscape = close;
+ this.closeOnEscape = close;
}
setEscapeKeyCallback(callback: (arg0: Event) => void): void {
- this._escapeKeyCallback = callback;
+ this.escapeKeyCallback = callback;
}
addCloseButton(): void {
@@ -116,34 +114,34 @@
}
setOutsideTabIndexBehavior(tabIndexBehavior: OutsideTabIndexBehavior): void {
- this._tabIndexBehavior = tabIndexBehavior;
+ this.tabIndexBehavior = tabIndexBehavior;
}
- _disableTabIndexOnElements(document: Document): void {
- if (this._tabIndexBehavior === OutsideTabIndexBehavior.PreserveTabIndex) {
+ private disableTabIndexOnElements(document: Document): void {
+ if (this.tabIndexBehavior === OutsideTabIndexBehavior.PreserveTabIndex) {
return;
}
let exclusionSet: Set<HTMLElement>|(Set<HTMLElement>| null) = (null as Set<HTMLElement>| null);
- if (this._tabIndexBehavior === OutsideTabIndexBehavior.PreserveMainViewTabIndex) {
- exclusionSet = this._getMainWidgetTabIndexElements(InspectorView.instance().ownerSplit());
+ if (this.tabIndexBehavior === OutsideTabIndexBehavior.PreserveMainViewTabIndex) {
+ exclusionSet = this.getMainWidgetTabIndexElements(InspectorView.instance().ownerSplit());
}
- this._tabIndexMap.clear();
+ this.tabIndexMap.clear();
let node: (Node|null)|Document = document;
for (; node; node = node.traverseNextNode(document)) {
if (node instanceof HTMLElement) {
const element = (node as HTMLElement);
const tabIndex = element.tabIndex;
if (tabIndex >= 0 && (!exclusionSet || !exclusionSet.has(element))) {
- this._tabIndexMap.set(element, tabIndex);
+ this.tabIndexMap.set(element, tabIndex);
element.tabIndex = -1;
}
}
}
}
- _getMainWidgetTabIndexElements(splitWidget: SplitWidget|null): Set<HTMLElement> {
+ private getMainWidgetTabIndexElements(splitWidget: SplitWidget|null): Set<HTMLElement> {
const elementSet = (new Set() as Set<HTMLElement>);
if (!splitWidget) {
return elementSet;
@@ -172,32 +170,32 @@
return elementSet;
}
- _restoreTabIndexOnElements(): void {
- for (const element of this._tabIndexMap.keys()) {
- element.tabIndex = (this._tabIndexMap.get(element) as number);
+ private restoreTabIndexOnElements(): void {
+ for (const element of this.tabIndexMap.keys()) {
+ element.tabIndex = (this.tabIndexMap.get(element) as number);
}
- this._tabIndexMap.clear();
+ this.tabIndexMap.clear();
}
- _onKeyDown(event: Event): void {
+ private onKeyDown(event: Event): void {
const keyboardEvent = (event as KeyboardEvent);
if (keyboardEvent.keyCode === Keys.Esc.code && KeyboardShortcut.hasNoModifiers(event)) {
- if (this._escapeKeyCallback) {
- this._escapeKeyCallback(event);
+ if (this.escapeKeyCallback) {
+ this.escapeKeyCallback(event);
}
if (event.handled) {
return;
}
- if (this._closeOnEscape) {
+ if (this.closeOnEscape) {
event.consume(true);
this.hide();
}
}
}
- static _instance: Dialog|null = null;
+ private static instance: Dialog|null = null;
}
// TODO(crbug.com/1167717): Make this a const enum again
diff --git a/front_end/ui/legacy/DockController.ts b/front_end/ui/legacy/DockController.ts
index 96e5816..5fc988e 100644
--- a/front_end/ui/legacy/DockController.ts
+++ b/front_end/ui/legacy/DockController.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
@@ -66,40 +64,40 @@
let dockControllerInstance: DockController;
export class DockController extends Common.ObjectWrapper.ObjectWrapper {
- _canDock: boolean;
- _closeButton: ToolbarButton;
- _currentDockStateSetting: Common.Settings.Setting<string>;
- _lastDockStateSetting: Common.Settings.Setting<string>;
- _dockSide!: string;
- _titles?: Common.UIString.LocalizedString[];
- _savedFocus?: Element|null;
+ private canDockInternal: boolean;
+ readonly closeButton: ToolbarButton;
+ private readonly currentDockStateSetting: Common.Settings.Setting<string>;
+ private readonly lastDockStateSetting: Common.Settings.Setting<string>;
+ private dockSideInternal!: string;
+ private titles?: Common.UIString.LocalizedString[];
+ private savedFocus?: Element|null;
constructor(canDock: boolean) {
super();
- this._canDock = canDock;
+ this.canDockInternal = canDock;
- this._closeButton = new ToolbarButton(i18nString(UIStrings.close), 'largeicon-delete');
- this._closeButton.element.classList.add('close-devtools');
- this._closeButton.addEventListener(
+ this.closeButton = new ToolbarButton(i18nString(UIStrings.close), 'largeicon-delete');
+ this.closeButton.element.classList.add('close-devtools');
+ this.closeButton.addEventListener(
ToolbarButton.Events.Click,
Host.InspectorFrontendHost.InspectorFrontendHostInstance.closeWindow.bind(
Host.InspectorFrontendHost.InspectorFrontendHostInstance));
- this._currentDockStateSetting = Common.Settings.Settings.instance().moduleSetting('currentDockState');
- this._lastDockStateSetting = Common.Settings.Settings.instance().createSetting('lastDockState', 'bottom');
+ this.currentDockStateSetting = Common.Settings.Settings.instance().moduleSetting('currentDockState');
+ this.lastDockStateSetting = Common.Settings.Settings.instance().createSetting('lastDockState', 'bottom');
if (!canDock) {
- this._dockSide = State.Undocked;
- this._closeButton.setVisible(false);
+ this.dockSideInternal = State.Undocked;
+ this.closeButton.setVisible(false);
return;
}
- this._currentDockStateSetting.addChangeListener(this._dockSideChanged, this);
- if (states.indexOf(this._currentDockStateSetting.get()) === -1) {
- this._currentDockStateSetting.set('right');
+ this.currentDockStateSetting.addChangeListener(this.dockSideChanged, this);
+ if (states.indexOf(this.currentDockStateSetting.get()) === -1) {
+ this.currentDockStateSetting.set('right');
}
- if (states.indexOf(this._lastDockStateSetting.get()) === -1) {
- this._currentDockStateSetting.set('bottom');
+ if (states.indexOf(this.lastDockStateSetting.get()) === -1) {
+ this.currentDockStateSetting.set('bottom');
}
}
@@ -116,33 +114,33 @@
}
initialize(): void {
- if (!this._canDock) {
+ if (!this.canDockInternal) {
return;
}
- this._titles = [
+ this.titles = [
i18nString(UIStrings.dockToRight),
i18nString(UIStrings.dockToBottom),
i18nString(UIStrings.dockToLeft),
i18nString(UIStrings.undockIntoSeparateWindow),
];
- this._dockSideChanged();
+ this.dockSideChanged();
}
- _dockSideChanged(): void {
- this.setDockSide(this._currentDockStateSetting.get());
+ private dockSideChanged(): void {
+ this.setDockSide(this.currentDockStateSetting.get());
}
dockSide(): string {
- return this._dockSide;
+ return this.dockSideInternal;
}
canDock(): boolean {
- return this._canDock;
+ return this.canDockInternal;
}
isVertical(): boolean {
- return this._dockSide === State.DockedToRight || this._dockSide === State.DockedToLeft;
+ return this.dockSideInternal === State.DockedToRight || this.dockSideInternal === State.DockedToLeft;
}
setDockSide(dockSide: string): void {
@@ -150,46 +148,46 @@
dockSide = states[0];
}
- if (this._dockSide === dockSide) {
+ if (this.dockSideInternal === dockSide) {
return;
}
- document.body.classList.remove(this._dockSide);
+ document.body.classList.remove(this.dockSideInternal);
document.body.classList.add(dockSide);
- if (this._dockSide) {
- this._lastDockStateSetting.set(this._dockSide);
+ if (this.dockSideInternal) {
+ this.lastDockStateSetting.set(this.dockSideInternal);
}
- this._savedFocus = document.deepActiveElement();
- const eventData = {from: this._dockSide, to: dockSide};
+ this.savedFocus = document.deepActiveElement();
+ const eventData = {from: this.dockSideInternal, to: dockSide};
this.dispatchEventToListeners(Events.BeforeDockSideChanged, eventData);
console.timeStamp('DockController.setIsDocked');
- this._dockSide = dockSide;
- this._currentDockStateSetting.set(dockSide);
+ this.dockSideInternal = dockSide;
+ this.currentDockStateSetting.set(dockSide);
Host.InspectorFrontendHost.InspectorFrontendHostInstance.setIsDocked(
- dockSide !== State.Undocked, this._setIsDockedResponse.bind(this, eventData));
- this._closeButton.setVisible(this._dockSide !== State.Undocked);
+ dockSide !== State.Undocked, this.setIsDockedResponse.bind(this, eventData));
+ this.closeButton.setVisible(this.dockSideInternal !== State.Undocked);
this.dispatchEventToListeners(Events.DockSideChanged, eventData);
}
- _setIsDockedResponse(eventData: {
+ private setIsDockedResponse(eventData: {
from: string,
to: string,
}): void {
this.dispatchEventToListeners(Events.AfterDockSideChanged, eventData);
- if (this._savedFocus) {
- (this._savedFocus as HTMLElement).focus();
- this._savedFocus = null;
+ if (this.savedFocus) {
+ (this.savedFocus as HTMLElement).focus();
+ this.savedFocus = null;
}
}
- _toggleDockSide(): void {
- if (this._lastDockStateSetting.get() === this._currentDockStateSetting.get()) {
- const index = states.indexOf(this._currentDockStateSetting.get()) || 0;
- this._lastDockStateSetting.set(states[(index + 1) % states.length]);
+ toggleDockSide(): void {
+ if (this.lastDockStateSetting.get() === this.currentDockStateSetting.get()) {
+ const index = states.indexOf(this.currentDockStateSetting.get()) || 0;
+ this.lastDockStateSetting.set(states[(index + 1) % states.length]);
}
- this.setDockSide(this._lastDockStateSetting.get());
+ this.setDockSide(this.lastDockStateSetting.get());
}
}
@@ -227,7 +225,7 @@
}
handleAction(_context: Context, _actionId: string): boolean {
- DockController.instance()._toggleDockSide();
+ DockController.instance().toggleDockSide();
return true;
}
}
@@ -247,6 +245,6 @@
}
item(): ToolbarItem|null {
- return DockController.instance()._closeButton;
+ return DockController.instance().closeButton;
}
}
diff --git a/front_end/ui/legacy/DropTarget.ts b/front_end/ui/legacy/DropTarget.ts
index 93764f5..951b95a 100644
--- a/front_end/ui/legacy/DropTarget.ts
+++ b/front_end/ui/legacy/DropTarget.ts
@@ -2,20 +2,18 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import {createShadowRootWithCoreStyles} from './utils/create-shadow-root-with-core-styles.js';
export class DropTarget {
- _element: Element;
- _transferTypes: {
+ private element: Element;
+ private readonly transferTypes: {
kind: string,
type: RegExp,
}[];
- _messageText: string;
- _handleDrop: (arg0: DataTransfer) => void;
- _enabled: boolean;
- _dragMaskElement: Element|null;
+ private messageText: string;
+ private readonly handleDrop: (arg0: DataTransfer) => void;
+ private enabled: boolean;
+ private dragMaskElement: Element|null;
constructor(
element: Element, transferTypes: {
@@ -23,32 +21,32 @@
type: RegExp,
}[],
messageText: string, handleDrop: (arg0: DataTransfer) => void) {
- element.addEventListener('dragenter', this._onDragEnter.bind(this), true);
- element.addEventListener('dragover', this._onDragOver.bind(this), true);
- this._element = element;
- this._transferTypes = transferTypes;
- this._messageText = messageText;
- this._handleDrop = handleDrop;
- this._enabled = true;
- this._dragMaskElement = null;
+ element.addEventListener('dragenter', this.onDragEnter.bind(this), true);
+ element.addEventListener('dragover', this.onDragOver.bind(this), true);
+ this.element = element;
+ this.transferTypes = transferTypes;
+ this.messageText = messageText;
+ this.handleDrop = handleDrop;
+ this.enabled = true;
+ this.dragMaskElement = null;
}
setEnabled(enabled: boolean): void {
- this._enabled = enabled;
+ this.enabled = enabled;
}
- _onDragEnter(event: Event): void {
- if (this._enabled && this._hasMatchingType(event)) {
+ private onDragEnter(event: Event): void {
+ if (this.enabled && this.hasMatchingType(event)) {
event.consume(true);
}
}
- _hasMatchingType(ev: Event): boolean {
+ private hasMatchingType(ev: Event): boolean {
const event = (ev as DragEvent);
if (!event.dataTransfer) {
return false;
}
- for (const transferType of this._transferTypes) {
+ for (const transferType of this.transferTypes) {
const found = Array.from(event.dataTransfer.items).find(item => {
return transferType.kind === item.kind && Boolean(transferType.type.exec(item.type));
});
@@ -59,44 +57,44 @@
return false;
}
- _onDragOver(ev: Event): void {
+ private onDragOver(ev: Event): void {
const event = (ev as DragEvent);
- if (!this._enabled || !this._hasMatchingType(event)) {
+ if (!this.enabled || !this.hasMatchingType(event)) {
return;
}
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'copy';
}
event.consume(true);
- if (this._dragMaskElement) {
+ if (this.dragMaskElement) {
return;
}
- this._dragMaskElement = this._element.createChild('div', '');
+ this.dragMaskElement = this.element.createChild('div', '');
const shadowRoot = createShadowRootWithCoreStyles(
- this._dragMaskElement, {cssFile: 'ui/legacy/dropTarget.css', delegatesFocus: undefined});
- shadowRoot.createChild('div', 'drop-target-message').textContent = this._messageText;
- this._dragMaskElement.addEventListener('drop', this._onDrop.bind(this), true);
- this._dragMaskElement.addEventListener('dragleave', this._onDragLeave.bind(this), true);
+ this.dragMaskElement, {cssFile: 'ui/legacy/dropTarget.css', delegatesFocus: undefined});
+ shadowRoot.createChild('div', 'drop-target-message').textContent = this.messageText;
+ this.dragMaskElement.addEventListener('drop', this.onDrop.bind(this), true);
+ this.dragMaskElement.addEventListener('dragleave', this.onDragLeave.bind(this), true);
}
- _onDrop(ev: Event): void {
+ private onDrop(ev: Event): void {
const event = (ev as DragEvent);
event.consume(true);
- this._removeMask();
- if (this._enabled && event.dataTransfer) {
- this._handleDrop(event.dataTransfer);
+ this.removeMask();
+ if (this.enabled && event.dataTransfer) {
+ this.handleDrop(event.dataTransfer);
}
}
- _onDragLeave(event: Event): void {
+ private onDragLeave(event: Event): void {
event.consume(true);
- this._removeMask();
+ this.removeMask();
}
- _removeMask(): void {
- if (this._dragMaskElement) {
- this._dragMaskElement.remove();
- this._dragMaskElement = null;
+ private removeMask(): void {
+ if (this.dragMaskElement) {
+ this.dragMaskElement.remove();
+ this.dragMaskElement = null;
}
}
}
diff --git a/front_end/ui/legacy/EmptyWidget.ts b/front_end/ui/legacy/EmptyWidget.ts
index 15fbae8..e493a90 100644
--- a/front_end/ui/legacy/EmptyWidget.ts
+++ b/front_end/ui/legacy/EmptyWidget.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as i18n from '../../core/i18n/i18n.js';
import {VBox} from './Widget.js';
@@ -45,27 +43,26 @@
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class EmptyWidget extends VBox {
- _contentElement: HTMLElement;
- _textElement: HTMLElement;
+ private textElement: HTMLElement;
constructor(text: string) {
super();
this.registerRequiredCSS('ui/legacy/emptyWidget.css');
this.element.classList.add('empty-view-scroller');
- this._contentElement = this.element.createChild('div', 'empty-view');
- this._textElement = this._contentElement.createChild('div', 'empty-bold-text');
- this._textElement.textContent = text;
+ this.contentElement = this.element.createChild('div', 'empty-view') as HTMLDivElement;
+ this.textElement = this.contentElement.createChild('div', 'empty-bold-text');
+ this.textElement.textContent = text;
}
appendParagraph(): Element {
- return this._contentElement.createChild('p');
+ return this.contentElement.createChild('p');
}
appendLink(link: string): HTMLElement {
- return this._contentElement.appendChild(XLink.create(link, i18nString(UIStrings.learnMore))) as HTMLElement;
+ return this.contentElement.appendChild(XLink.create(link, i18nString(UIStrings.learnMore))) as HTMLElement;
}
set text(text: string) {
- this._textElement.textContent = text;
+ this.textElement.textContent = text;
}
}
diff --git a/front_end/ui/legacy/FilterBar.ts b/front_end/ui/legacy/FilterBar.ts
index bdc526e..41d57ef 100644
--- a/front_end/ui/legacy/FilterBar.ts
+++ b/front_end/ui/legacy/FilterBar.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
@@ -72,109 +70,110 @@
const str_ = i18n.i18n.registerUIStrings('ui/legacy/FilterBar.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class FilterBar extends HBox {
- _enabled: boolean;
- _stateSetting: Common.Settings.Setting<boolean>;
- _filterButton: ToolbarSettingToggle;
- _filters: FilterUI[];
- _alwaysShowFilters?: boolean;
- _showingWidget?: boolean;
+ private enabled: boolean;
+ private readonly stateSetting: Common.Settings.Setting<boolean>;
+ private readonly filterButtonInternal: ToolbarSettingToggle;
+ private filters: FilterUI[];
+ private alwaysShowFilters?: boolean;
+ private showingWidget?: boolean;
constructor(name: string, visibleByDefault?: boolean) {
super();
this.registerRequiredCSS('ui/legacy/filter.css');
- this._enabled = true;
+ this.enabled = true;
this.element.classList.add('filter-bar');
- this._stateSetting =
+ this.stateSetting =
Common.Settings.Settings.instance().createSetting('filterBar-' + name + '-toggled', Boolean(visibleByDefault));
- this._filterButton = new ToolbarSettingToggle(this._stateSetting, 'largeicon-filter', i18nString(UIStrings.filter));
+ this.filterButtonInternal =
+ new ToolbarSettingToggle(this.stateSetting, 'largeicon-filter', i18nString(UIStrings.filter));
- this._filters = [];
+ this.filters = [];
- this._updateFilterBar();
- this._stateSetting.addChangeListener(this._updateFilterBar.bind(this));
+ this.updateFilterBar();
+ this.stateSetting.addChangeListener(this.updateFilterBar.bind(this));
}
filterButton(): ToolbarButton {
- return this._filterButton;
+ return this.filterButtonInternal;
}
addFilter(filter: FilterUI): void {
- this._filters.push(filter);
+ this.filters.push(filter);
this.element.appendChild(filter.element());
- filter.addEventListener(FilterUIEvents.FilterChanged, this._filterChanged, this);
- this._updateFilterButton();
+ filter.addEventListener(FilterUIEvents.FilterChanged, this.filterChanged, this);
+ this.updateFilterButton();
}
setEnabled(enabled: boolean): void {
- this._enabled = enabled;
- this._filterButton.setEnabled(enabled);
- this._updateFilterBar();
+ this.enabled = enabled;
+ this.filterButtonInternal.setEnabled(enabled);
+ this.updateFilterBar();
}
forceShowFilterBar(): void {
- this._alwaysShowFilters = true;
- this._updateFilterBar();
+ this.alwaysShowFilters = true;
+ this.updateFilterBar();
}
showOnce(): void {
- this._stateSetting.set(true);
+ this.stateSetting.set(true);
}
- _filterChanged(_event: Common.EventTarget.EventTargetEvent): void {
- this._updateFilterButton();
+ private filterChanged(_event: Common.EventTarget.EventTargetEvent): void {
+ this.updateFilterButton();
this.dispatchEventToListeners(FilterBarEvents.Changed);
}
wasShown(): void {
super.wasShown();
- this._updateFilterBar();
+ this.updateFilterBar();
}
- _updateFilterBar(): void {
- if (!this.parentWidget() || this._showingWidget) {
+ private updateFilterBar(): void {
+ if (!this.parentWidget() || this.showingWidget) {
return;
}
if (this.visible()) {
- this._showingWidget = true;
+ this.showingWidget = true;
this.showWidget();
- this._showingWidget = false;
+ this.showingWidget = false;
} else {
this.hideWidget();
}
}
focus(): void {
- for (let i = 0; i < this._filters.length; ++i) {
- if (this._filters[i] instanceof TextFilterUI) {
- const textFilterUI = (this._filters[i] as TextFilterUI);
+ for (let i = 0; i < this.filters.length; ++i) {
+ if (this.filters[i] instanceof TextFilterUI) {
+ const textFilterUI = (this.filters[i] as TextFilterUI);
textFilterUI.focus();
break;
}
}
}
- _updateFilterButton(): void {
+ private updateFilterButton(): void {
let isActive = false;
- for (const filter of this._filters) {
+ for (const filter of this.filters) {
isActive = isActive || filter.isActive();
}
- this._filterButton.setDefaultWithRedColor(isActive);
- this._filterButton.setToggleWithRedColor(isActive);
+ this.filterButtonInternal.setDefaultWithRedColor(isActive);
+ this.filterButtonInternal.setToggleWithRedColor(isActive);
}
clear(): void {
this.element.removeChildren();
- this._filters = [];
- this._updateFilterButton();
+ this.filters = [];
+ this.updateFilterButton();
}
setting(): Common.Settings.Setting<boolean> {
- return this._stateSetting;
+ return this.stateSetting;
}
visible(): boolean {
- return this._alwaysShowFilters || (this._stateSetting.get() && this._enabled);
+ return this.alwaysShowFilters || (this.stateSetting.get() && this.enabled);
}
}
@@ -192,27 +191,27 @@
}
export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper implements FilterUI {
- _filterElement: HTMLDivElement;
- _filterInputElement: HTMLElement;
- _prompt: TextPrompt;
- _proxyElement: HTMLElement;
- _suggestionProvider: ((arg0: string, arg1: string, arg2?: boolean|undefined) => Promise<Suggestions>)|null;
+ private readonly filterElement: HTMLDivElement;
+ private readonly filterInputElement: HTMLElement;
+ private prompt: TextPrompt;
+ private readonly proxyElement: HTMLElement;
+ private suggestionProvider: ((arg0: string, arg1: string, arg2?: boolean|undefined) => Promise<Suggestions>)|null;
constructor() {
super();
- this._filterElement = document.createElement('div');
- this._filterElement.className = 'filter-text-filter';
+ this.filterElement = document.createElement('div');
+ this.filterElement.className = 'filter-text-filter';
- const container = this._filterElement.createChild('div', 'filter-input-container');
- this._filterInputElement = container.createChild('span', 'filter-input-field');
+ const container = this.filterElement.createChild('div', 'filter-input-container');
+ this.filterInputElement = container.createChild('span', 'filter-input-field');
- this._prompt = new TextPrompt();
- this._prompt.initialize(this._completions.bind(this), ' ', true);
- this._proxyElement = (this._prompt.attach(this._filterInputElement) as HTMLElement);
- Tooltip.install(this._proxyElement, i18nString(UIStrings.egSmalldUrlacomb));
- this._prompt.setPlaceholder(i18nString(UIStrings.filter));
- this._prompt.addEventListener(Events.TextChanged, this._valueChanged.bind(this));
+ this.prompt = new TextPrompt();
+ this.prompt.initialize(this.completions.bind(this), ' ', true);
+ this.proxyElement = (this.prompt.attach(this.filterInputElement) as HTMLElement);
+ Tooltip.install(this.proxyElement, i18nString(UIStrings.egSmalldUrlacomb));
+ this.prompt.setPlaceholder(i18nString(UIStrings.filter));
+ this.prompt.addEventListener(Events.TextChanged, this.valueChanged.bind(this));
- this._suggestionProvider = null;
+ this.suggestionProvider = null;
const clearButton = container.createChild('div', 'filter-input-clear-button');
Tooltip.install(clearButton, i18nString(UIStrings.clearFilter));
@@ -221,49 +220,49 @@
this.clear();
this.focus();
});
- this._updateEmptyStyles();
+ this.updateEmptyStyles();
}
- _completions(expression: string, prefix: string, force?: boolean): Promise<Suggestions> {
- if (this._suggestionProvider) {
- return this._suggestionProvider(expression, prefix, force);
+ private completions(expression: string, prefix: string, force?: boolean): Promise<Suggestions> {
+ if (this.suggestionProvider) {
+ return this.suggestionProvider(expression, prefix, force);
}
return Promise.resolve([]);
}
isActive(): boolean {
- return Boolean(this._prompt.text());
+ return Boolean(this.prompt.text());
}
element(): Element {
- return this._filterElement;
+ return this.filterElement;
}
value(): string {
- return this._prompt.textWithCurrentSuggestion();
+ return this.prompt.textWithCurrentSuggestion();
}
setValue(value: string): void {
- this._prompt.setText(value);
- this._valueChanged();
+ this.prompt.setText(value);
+ this.valueChanged();
}
focus(): void {
- this._filterInputElement.focus();
+ this.filterInputElement.focus();
}
setSuggestionProvider(
suggestionProvider: (arg0: string, arg1: string, arg2?: boolean|undefined) => Promise<Suggestions>): void {
- this._prompt.clearAutocomplete();
- this._suggestionProvider = suggestionProvider;
+ this.prompt.clearAutocomplete();
+ this.suggestionProvider = suggestionProvider;
}
- _valueChanged(): void {
+ private valueChanged(): void {
this.dispatchEventToListeners(FilterUIEvents.FilterChanged, null);
- this._updateEmptyStyles();
+ this.updateEmptyStyles();
}
- _updateEmptyStyles(): void {
- this._filterElement.classList.toggle('filter-text-empty', !this._prompt.text());
+ private updateEmptyStyles(): void {
+ this.filterElement.classList.toggle('filter-text-empty', !this.prompt.text());
}
clear(): void {
@@ -272,99 +271,99 @@
}
export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper implements FilterUI {
- _filtersElement: HTMLDivElement;
- _typeFilterElementTypeNames: WeakMap<HTMLElement, string>;
- _allowedTypes: Set<string>;
- _typeFilterElements: HTMLElement[];
- _setting: Common.Settings.Setting<{[key: string]: boolean}>|undefined;
+ private readonly filtersElement: HTMLDivElement;
+ private readonly typeFilterElementTypeNames: WeakMap<HTMLElement, string>;
+ private allowedTypes: Set<string>;
+ private readonly typeFilterElements: HTMLElement[];
+ private readonly setting: Common.Settings.Setting<{[key: string]: boolean}>|undefined;
constructor(items: Item[], setting?: Common.Settings.Setting<{[key: string]: boolean}>) {
super();
- this._filtersElement = document.createElement('div');
- this._filtersElement.classList.add('filter-bitset-filter');
- ARIAUtils.markAsListBox(this._filtersElement);
- ARIAUtils.markAsMultiSelectable(this._filtersElement);
- Tooltip.install(this._filtersElement, i18nString(UIStrings.sclickToSelectMultipleTypes, {
+ this.filtersElement = document.createElement('div');
+ this.filtersElement.classList.add('filter-bitset-filter');
+ ARIAUtils.markAsListBox(this.filtersElement);
+ ARIAUtils.markAsMultiSelectable(this.filtersElement);
+ Tooltip.install(this.filtersElement, i18nString(UIStrings.sclickToSelectMultipleTypes, {
PH1: KeyboardShortcut.shortcutToString('', Modifiers.CtrlOrMeta),
}));
- this._typeFilterElementTypeNames = new WeakMap();
- this._allowedTypes = new Set();
- this._typeFilterElements = [];
- this._addBit(NamedBitSetFilterUI.ALL_TYPES, i18nString(UIStrings.allStrings));
- this._typeFilterElements[0].tabIndex = 0;
- this._filtersElement.createChild('div', 'filter-bitset-filter-divider');
+ this.typeFilterElementTypeNames = new WeakMap();
+ this.allowedTypes = new Set();
+ this.typeFilterElements = [];
+ this.addBit(NamedBitSetFilterUI.ALL_TYPES, i18nString(UIStrings.allStrings));
+ this.typeFilterElements[0].tabIndex = 0;
+ this.filtersElement.createChild('div', 'filter-bitset-filter-divider');
for (let i = 0; i < items.length; ++i) {
- this._addBit(items[i].name, items[i].label(), items[i].title);
+ this.addBit(items[i].name, items[i].label(), items[i].title);
}
if (setting) {
- this._setting = setting;
- setting.addChangeListener(this._settingChanged.bind(this));
- this._settingChanged();
+ this.setting = setting;
+ setting.addChangeListener(this.settingChanged.bind(this));
+ this.settingChanged();
} else {
- this._toggleTypeFilter(NamedBitSetFilterUI.ALL_TYPES, false /* allowMultiSelect */);
+ this.toggleTypeFilter(NamedBitSetFilterUI.ALL_TYPES, false /* allowMultiSelect */);
}
}
reset(): void {
- this._toggleTypeFilter(NamedBitSetFilterUI.ALL_TYPES, false /* allowMultiSelect */);
+ this.toggleTypeFilter(NamedBitSetFilterUI.ALL_TYPES, false /* allowMultiSelect */);
}
isActive(): boolean {
- return !this._allowedTypes.has(NamedBitSetFilterUI.ALL_TYPES);
+ return !this.allowedTypes.has(NamedBitSetFilterUI.ALL_TYPES);
}
element(): Element {
- return this._filtersElement;
+ return this.filtersElement;
}
accept(typeName: string): boolean {
- return this._allowedTypes.has(NamedBitSetFilterUI.ALL_TYPES) || this._allowedTypes.has(typeName);
+ return this.allowedTypes.has(NamedBitSetFilterUI.ALL_TYPES) || this.allowedTypes.has(typeName);
}
- _settingChanged(): void {
- const allowedTypesFromSetting = (this._setting as Common.Settings.Setting<{[key: string]: boolean}>).get();
- this._allowedTypes = new Set();
- for (const element of this._typeFilterElements) {
- const typeName = this._typeFilterElementTypeNames.get(element);
+ private settingChanged(): void {
+ const allowedTypesFromSetting = (this.setting as Common.Settings.Setting<{[key: string]: boolean}>).get();
+ this.allowedTypes = new Set();
+ for (const element of this.typeFilterElements) {
+ const typeName = this.typeFilterElementTypeNames.get(element);
if (typeName && allowedTypesFromSetting[typeName]) {
- this._allowedTypes.add(typeName);
+ this.allowedTypes.add(typeName);
}
}
- this._update();
+ this.update();
}
- _update(): void {
- if (this._allowedTypes.size === 0 || this._allowedTypes.has(NamedBitSetFilterUI.ALL_TYPES)) {
- this._allowedTypes = new Set();
- this._allowedTypes.add(NamedBitSetFilterUI.ALL_TYPES);
+ private update(): void {
+ if (this.allowedTypes.size === 0 || this.allowedTypes.has(NamedBitSetFilterUI.ALL_TYPES)) {
+ this.allowedTypes = new Set();
+ this.allowedTypes.add(NamedBitSetFilterUI.ALL_TYPES);
}
- for (const element of this._typeFilterElements) {
- const typeName = this._typeFilterElementTypeNames.get(element);
- const active = this._allowedTypes.has(typeName || '');
+ for (const element of this.typeFilterElements) {
+ const typeName = this.typeFilterElementTypeNames.get(element);
+ const active = this.allowedTypes.has(typeName || '');
element.classList.toggle('selected', active);
ARIAUtils.setSelected(element, active);
}
this.dispatchEventToListeners(FilterUIEvents.FilterChanged, null);
}
- _addBit(name: string, label: string, title?: string): void {
- const typeFilterElement = (this._filtersElement.createChild('span', name) as HTMLElement);
+ private addBit(name: string, label: string, title?: string): void {
+ const typeFilterElement = (this.filtersElement.createChild('span', name) as HTMLElement);
typeFilterElement.tabIndex = -1;
- this._typeFilterElementTypeNames.set(typeFilterElement, name);
+ this.typeFilterElementTypeNames.set(typeFilterElement, name);
createTextChild(typeFilterElement, label);
ARIAUtils.markAsOption(typeFilterElement);
if (title) {
typeFilterElement.title = title;
}
- typeFilterElement.addEventListener('click', this._onTypeFilterClicked.bind(this), false);
- typeFilterElement.addEventListener('keydown', this._onTypeFilterKeydown.bind(this), false);
- this._typeFilterElements.push(typeFilterElement);
+ typeFilterElement.addEventListener('click', this.onTypeFilterClicked.bind(this), false);
+ typeFilterElement.addEventListener('keydown', this.onTypeFilterKeydown.bind(this), false);
+ this.typeFilterElements.push(typeFilterElement);
}
- _onTypeFilterClicked(event: Event): void {
+ private onTypeFilterClicked(event: Event): void {
const e = (event as KeyboardEvent);
let toggle;
if (Host.Platform.isMac()) {
@@ -374,12 +373,12 @@
}
if (e.target) {
const element = (e.target as HTMLElement);
- const typeName = (this._typeFilterElementTypeNames.get(element) as string);
- this._toggleTypeFilter(typeName, toggle);
+ const typeName = (this.typeFilterElementTypeNames.get(element) as string);
+ this.toggleTypeFilter(typeName, toggle);
}
}
- _onTypeFilterKeydown(ev: Event): void {
+ private onTypeFilterKeydown(ev: Event): void {
const event = (ev as KeyboardEvent);
const element = (event.target as HTMLElement | null);
if (!element) {
@@ -387,57 +386,57 @@
}
if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
- if (this._keyFocusNextBit(element, true /* selectPrevious */)) {
+ if (this.keyFocusNextBit(element, true /* selectPrevious */)) {
event.consume(true);
}
} else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
- if (this._keyFocusNextBit(element, false /* selectPrevious */)) {
+ if (this.keyFocusNextBit(element, false /* selectPrevious */)) {
event.consume(true);
}
} else if (isEnterOrSpaceKey(event)) {
- this._onTypeFilterClicked(event);
+ this.onTypeFilterClicked(event);
}
}
- _keyFocusNextBit(target: HTMLElement, selectPrevious: boolean): boolean {
- const index = this._typeFilterElements.indexOf(target);
+ private keyFocusNextBit(target: HTMLElement, selectPrevious: boolean): boolean {
+ const index = this.typeFilterElements.indexOf(target);
if (index === -1) {
return false;
}
const nextIndex = selectPrevious ? index - 1 : index + 1;
- if (nextIndex < 0 || nextIndex >= this._typeFilterElements.length) {
+ if (nextIndex < 0 || nextIndex >= this.typeFilterElements.length) {
return false;
}
- const nextElement = this._typeFilterElements[nextIndex];
+ const nextElement = this.typeFilterElements[nextIndex];
nextElement.tabIndex = 0;
target.tabIndex = -1;
nextElement.focus();
return true;
}
- _toggleTypeFilter(typeName: string, allowMultiSelect: boolean): void {
+ private toggleTypeFilter(typeName: string, allowMultiSelect: boolean): void {
if (allowMultiSelect && typeName !== NamedBitSetFilterUI.ALL_TYPES) {
- this._allowedTypes.delete(NamedBitSetFilterUI.ALL_TYPES);
+ this.allowedTypes.delete(NamedBitSetFilterUI.ALL_TYPES);
} else {
- this._allowedTypes = new Set();
+ this.allowedTypes = new Set();
}
- if (this._allowedTypes.has(typeName)) {
- this._allowedTypes.delete(typeName);
+ if (this.allowedTypes.has(typeName)) {
+ this.allowedTypes.delete(typeName);
} else {
- this._allowedTypes.add(typeName);
+ this.allowedTypes.add(typeName);
}
- if (this._setting) {
+ if (this.setting) {
// Settings do not support `Sets` so convert it back to the Map-like object.
const updatedSetting = ({} as {[key: string]: boolean});
- for (const type of this._allowedTypes) {
+ for (const type of this.allowedTypes) {
updatedSetting[type] = true;
}
- this._setting.set(updatedSetting);
+ this.setting.set(updatedSetting);
} else {
- this._update();
+ this.update();
}
}
@@ -445,54 +444,54 @@
}
export class CheckboxFilterUI extends Common.ObjectWrapper.ObjectWrapper implements FilterUI {
- _filterElement: HTMLDivElement;
- _activeWhenChecked: boolean;
- _label: CheckboxLabel;
- _checkboxElement: HTMLInputElement;
+ private readonly filterElement: HTMLDivElement;
+ private readonly activeWhenChecked: boolean;
+ private label: CheckboxLabel;
+ private checkboxElement: HTMLInputElement;
constructor(
className: string, title: string, activeWhenChecked?: boolean, setting?: Common.Settings.Setting<boolean>) {
super();
- this._filterElement = document.createElement('div');
- this._filterElement.classList.add('filter-checkbox-filter');
- this._activeWhenChecked = Boolean(activeWhenChecked);
- this._label = CheckboxLabel.create(title);
- this._filterElement.appendChild(this._label);
- this._checkboxElement = this._label.checkboxElement;
+ this.filterElement = document.createElement('div');
+ this.filterElement.classList.add('filter-checkbox-filter');
+ this.activeWhenChecked = Boolean(activeWhenChecked);
+ this.label = CheckboxLabel.create(title);
+ this.filterElement.appendChild(this.label);
+ this.checkboxElement = this.label.checkboxElement;
if (setting) {
- bindCheckbox(this._checkboxElement, setting);
+ bindCheckbox(this.checkboxElement, setting);
} else {
- this._checkboxElement.checked = true;
+ this.checkboxElement.checked = true;
}
- this._checkboxElement.addEventListener('change', this._fireUpdated.bind(this), false);
+ this.checkboxElement.addEventListener('change', this.fireUpdated.bind(this), false);
}
isActive(): boolean {
- return this._activeWhenChecked === this._checkboxElement.checked;
+ return this.activeWhenChecked === this.checkboxElement.checked;
}
checked(): boolean {
- return this._checkboxElement.checked;
+ return this.checkboxElement.checked;
}
setChecked(checked: boolean): void {
- this._checkboxElement.checked = checked;
+ this.checkboxElement.checked = checked;
}
element(): HTMLDivElement {
- return this._filterElement;
+ return this.filterElement;
}
labelElement(): Element {
- return this._label;
+ return this.label;
}
- _fireUpdated(): void {
+ private fireUpdated(): void {
this.dispatchEventToListeners(FilterUIEvents.FilterChanged, null);
}
setColor(backgroundColor: string, borderColor: string): void {
- this._label.backgroundColor = backgroundColor;
- this._label.borderColor = borderColor;
+ this.label.backgroundColor = backgroundColor;
+ this.label.borderColor = borderColor;
}
}
export interface Item {
diff --git a/front_end/ui/legacy/FilterSuggestionBuilder.ts b/front_end/ui/legacy/FilterSuggestionBuilder.ts
index a3a851d..f3650bb 100644
--- a/front_end/ui/legacy/FilterSuggestionBuilder.ts
+++ b/front_end/ui/legacy/FilterSuggestionBuilder.ts
@@ -2,21 +2,20 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Platform from '../../core/platform/platform.js';
import type {Suggestion} from './SuggestBox.js';
export class FilterSuggestionBuilder {
- _keys: string[];
- _valueSorter: ((arg0: string, arg1: Array<string>) => void)|((key: string, result: string[]) => string[]);
- _valuesMap: Map<string, Set<string>>;
+ private readonly keys: string[];
+ private readonly valueSorter: ((arg0: string, arg1: Array<string>) => void)|
+ ((key: string, result: string[]) => string[]);
+ private readonly valuesMap: Map<string, Set<string>>;
constructor(keys: string[], valueSorter?: ((arg0: string, arg1: Array<string>) => void)) {
- this._keys = keys;
- this._valueSorter = valueSorter || ((key: string, result: string[]): string[] => result.sort());
- this._valuesMap = new Map();
+ this.keys = keys;
+ this.valueSorter = valueSorter || ((key: string, result: string[]): string[] => result.sort());
+ this.valuesMap = new Map();
}
completions(expression: string, prefix: string, force?: boolean): Promise<Suggestion[]> {
@@ -34,7 +33,7 @@
const suggestions: Suggestion[] = [];
if (valueDelimiterIndex === -1) {
const matcher = new RegExp('^' + Platform.StringUtilities.escapeForRegExp(prefix), 'i');
- for (const key of this._keys) {
+ for (const key of this.keys) {
if (matcher.test(key)) {
suggestions.push(({text: modifier + key + ':'} as Suggestion));
}
@@ -43,8 +42,8 @@
const key = prefix.substring(0, valueDelimiterIndex).toLowerCase();
const value = prefix.substring(valueDelimiterIndex + 1);
const matcher = new RegExp('^' + Platform.StringUtilities.escapeForRegExp(value), 'i');
- const values = Array.from(this._valuesMap.get(key) || new Set<string>());
- this._valueSorter(key, values);
+ const values = Array.from(this.valuesMap.get(key) || new Set<string>());
+ this.valueSorter(key, values);
for (const item of values) {
if (matcher.test(item) && (item !== value)) {
suggestions.push(({text: modifier + key + ':' + item} as Suggestion));
@@ -59,15 +58,15 @@
return;
}
- let set = this._valuesMap.get(key);
+ let set = this.valuesMap.get(key);
if (!set) {
set = (new Set() as Set<string>);
- this._valuesMap.set(key, set);
+ this.valuesMap.set(key, set);
}
set.add(value);
}
clear(): void {
- this._valuesMap.clear();
+ this.valuesMap.clear();
}
}
diff --git a/front_end/ui/legacy/ForwardedInputEventHandler.ts b/front_end/ui/legacy/ForwardedInputEventHandler.ts
index 40f6b7d..4432c40 100644
--- a/front_end/ui/legacy/ForwardedInputEventHandler.ts
+++ b/front_end/ui/legacy/ForwardedInputEventHandler.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
@@ -14,10 +12,10 @@
export class ForwardedInputEventHandler {
constructor() {
Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
- Host.InspectorFrontendHostAPI.Events.KeyEventUnhandled, this._onKeyEventUnhandled, this);
+ Host.InspectorFrontendHostAPI.Events.KeyEventUnhandled, this.onKeyEventUnhandled, this);
}
- _onKeyEventUnhandled(event: Common.EventTarget.EventTargetEvent): void {
+ private onKeyEventUnhandled(event: Common.EventTarget.EventTargetEvent): void {
const data = event.data;
const type = (data.type as string);
const key = (data.key as string);
diff --git a/front_end/ui/legacy/Fragment.ts b/front_end/ui/legacy/Fragment.ts
index f10d3cc..b81f030 100644
--- a/front_end/ui/legacy/Fragment.ts
+++ b/front_end/ui/legacy/Fragment.ts
@@ -2,7 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties, @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-explicit-any */
function getNodeData(node: Node): string {
return (node as unknown as {
@@ -18,37 +18,37 @@
}
export class Fragment {
- _element: Element;
- _elementsById: Map<string, Element>;
+ private readonly elementInternal: Element;
+ private readonly elementsById: Map<string, Element>;
constructor(element: Element) {
- this._element = element;
+ this.elementInternal = element;
- this._elementsById = new Map();
+ this.elementsById = new Map();
}
element(): Element {
- return this._element;
+ return this.elementInternal;
}
$(elementId: string): Element {
- return this._elementsById.get(elementId) as Element;
+ return this.elementsById.get(elementId) as Element;
}
static build(strings: TemplateDefinition, ...values: any[]): Fragment {
- return Fragment._render(Fragment._template(strings), values);
+ return Fragment.render(Fragment.template(strings), values);
}
static cached(strings: TemplateDefinition, ...values: any[]): Fragment {
- let template = _templateCache.get(strings);
+ let template = templateCache.get(strings);
if (!template) {
- template = Fragment._template(strings);
- _templateCache.set(strings, template);
+ template = Fragment.template(strings);
+ templateCache.set(strings, template);
}
- return Fragment._render(template, values);
+ return Fragment.render(template, values);
}
- static _template(strings: TemplateDefinition): _Template {
+ private static template(strings: TemplateDefinition): Template {
let html = '';
let insideText = true;
for (let i = 0; i < strings.length - 1; i++) {
@@ -60,7 +60,7 @@
} else if (open !== -1) {
insideText = false;
}
- html += insideText ? _textMarker : _attributeMarker(i);
+ html += insideText ? textMarker : attributeMarker(i);
}
html += strings[strings.length - 1];
@@ -70,7 +70,7 @@
template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false);
let valueIndex = 0;
const emptyTextNodes = [];
- const binds: _Bind[] = [];
+ const binds: Bind[] = [];
const nodesToMark = [];
while (walker.nextNode()) {
const node = (walker.currentNode as HTMLElement);
@@ -85,7 +85,7 @@
for (let i = 0; i < node.attributes.length; i++) {
const name = node.attributes[i].name;
- if (!_attributeMarkerRegex.test(name) && !_attributeMarkerRegex.test(node.attributes[i].value)) {
+ if (!attributeMarkerRegex.test(name) && !attributeMarkerRegex.test(node.attributes[i].value)) {
continue;
}
@@ -94,12 +94,12 @@
const attr = {
index: valueIndex,
- names: name.split(_attributeMarkerRegex),
- values: node.attributes[i].value.split(_attributeMarkerRegex),
+ names: name.split(attributeMarkerRegex),
+ values: node.attributes[i].value.split(attributeMarkerRegex),
};
valueIndex += attr.names.length - 1;
valueIndex += attr.values.length - 1;
- const bind: _Bind = {
+ const bind: Bind = {
elementId: undefined,
replaceNodeIndex: undefined,
attr,
@@ -111,8 +111,8 @@
}
}
- if (node.nodeType === Node.TEXT_NODE && getNodeData(node).indexOf(_textMarker) !== -1) {
- const texts = getNodeData(node).split(_textMarkerRegex);
+ if (node.nodeType === Node.TEXT_NODE && getNodeData(node).indexOf(textMarker) !== -1) {
+ const texts = getNodeData(node).split(textMarkerRegex);
setNodeData(node, texts[texts.length - 1]);
const parentNode = (node.parentNode as HTMLElement);
for (let i = 0; i < texts.length - 1; i++) {
@@ -134,7 +134,7 @@
}
for (let i = 0; i < nodesToMark.length; i++) {
- nodesToMark[i].classList.add(_class(i));
+ nodesToMark[i].classList.add(generateClassName(i));
}
for (const emptyTextNode of emptyTextNodes) {
@@ -143,14 +143,14 @@
return {template, binds};
}
- static _render(template: _Template, values: any[]): Fragment {
+ private static render(template: Template, values: any[]): Fragment {
const content = template.template.ownerDocument.importNode(template.template.content, true);
const resultElement = (content.firstChild === content.lastChild ? content.firstChild : content) as Element;
const result = new Fragment(resultElement);
const boundElements = [];
for (let i = 0; i < template.binds.length; i++) {
- const className = _class(i);
+ const className = generateClassName(i);
const element = (content.querySelector('.' + className) as Element);
element.classList.remove(className);
boundElements.push(element);
@@ -160,10 +160,10 @@
const bind = template.binds[bindIndex];
const element = boundElements[bindIndex];
if (bind.elementId !== undefined) {
- result._elementsById.set(bind.elementId, element);
+ result.elementsById.set(bind.elementId, element);
} else if (bind.replaceNodeIndex !== undefined) {
const value = values[bind.replaceNodeIndex];
- (element.parentNode as HTMLElement).replaceChild(this._nodeForValue(value), element);
+ (element.parentNode as HTMLElement).replaceChild(this.nodeForValue(value), element);
} else if (bind.attr !== undefined) {
if (bind.attr.names.length === 2 && bind.attr.values.length === 1 &&
typeof values[bind.attr.index] === 'function') {
@@ -190,17 +190,17 @@
return result;
}
- static _nodeForValue(value: any): Node {
+ private static nodeForValue(value: any): Node {
if (value instanceof Node) {
return value;
}
if (value instanceof Fragment) {
- return value._element;
+ return value.elementInternal;
}
if (Array.isArray(value)) {
const node = document.createDocumentFragment();
for (const v of value) {
- node.appendChild(this._nodeForValue(v));
+ node.appendChild(this.nodeForValue(v));
}
return node;
}
@@ -208,24 +208,12 @@
}
}
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const _textMarker = '{{template-text}}';
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _textMarkerRegex = /{{template-text}}/;
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const _attributeMarker = (index: number): string => 'template-attribute' + index;
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _attributeMarkerRegex = /template-attribute\d+/;
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _class = (index: number): string => 'template-class-' + index;
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _templateCache = new Map<TemplateDefinition, _Template>();
+export const textMarker = '{{template-text}}';
+const textMarkerRegex = /{{template-text}}/;
+export const attributeMarker = (index: number): string => 'template-attribute' + index;
+const attributeMarkerRegex = /template-attribute\d+/;
+const generateClassName = (index: number): string => 'template-class-' + index;
+const templateCache = new Map<TemplateDefinition, Template>();
export const html = (strings: TemplateDefinition, ...vararg: any[]): Element => {
return Fragment.cached(strings, ...vararg).element();
@@ -233,9 +221,7 @@
export type TemplateDefinition = string[]|TemplateStringsArray;
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export interface _Bind {
+export interface Bind {
elementId?: string;
attr?: {
index: number,
@@ -245,9 +231,7 @@
replaceNodeIndex?: number;
}
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export interface _Template {
+export interface Template {
template: HTMLTemplateElement;
- binds: _Bind[];
+ binds: Bind[];
}
diff --git a/front_end/ui/legacy/Geometry.ts b/front_end/ui/legacy/Geometry.ts
index 089ff60..5c492ae 100644
--- a/front_end/ui/legacy/Geometry.ts
+++ b/front_end/ui/legacy/Geometry.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
export const _Eps: number = 1e-5;
diff --git a/front_end/ui/legacy/GlassPane.ts b/front_end/ui/legacy/GlassPane.ts
index e5f1f29..4f006e7 100644
--- a/front_end/ui/legacy/GlassPane.ts
+++ b/front_end/ui/legacy/GlassPane.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Platform from '../../core/platform/platform.js';
@@ -15,55 +13,55 @@
import {Widget} from './Widget.js';
export class GlassPane extends Common.ObjectWrapper.ObjectWrapper {
- _widget: Widget;
+ private readonly widgetInternal: Widget;
element: WidgetElement;
contentElement: HTMLDivElement;
- _arrowElement: Icon;
- _onMouseDownBound: (event: Event) => void;
- _onClickOutsideCallback: ((arg0: Event) => void)|null;
- _maxSize: Size|null;
- _positionX: number|null;
- _positionY: number|null;
- _anchorBox: AnchorBox|null;
- _anchorBehavior: AnchorBehavior;
- _sizeBehavior: SizeBehavior;
- _marginBehavior: MarginBehavior;
+ private readonly arrowElement: Icon;
+ private readonly onMouseDownBound: (event: Event) => void;
+ private onClickOutsideCallback: ((arg0: Event) => void)|null;
+ private maxSize: Size|null;
+ private positionX: number|null;
+ private positionY: number|null;
+ private anchorBox: AnchorBox|null;
+ private anchorBehavior: AnchorBehavior;
+ private sizeBehavior: SizeBehavior;
+ private marginBehavior: MarginBehavior;
constructor() {
super();
- this._widget = new Widget(true);
- this._widget.markAsRoot();
- this.element = this._widget.element;
- this.contentElement = this._widget.contentElement;
- this._arrowElement = Icon.create('', 'arrow hidden');
+ this.widgetInternal = new Widget(true);
+ this.widgetInternal.markAsRoot();
+ this.element = this.widgetInternal.element;
+ this.contentElement = this.widgetInternal.contentElement;
+ this.arrowElement = Icon.create('', 'arrow hidden');
if (this.element.shadowRoot) {
- this.element.shadowRoot.appendChild(this._arrowElement);
+ this.element.shadowRoot.appendChild(this.arrowElement);
}
this.registerRequiredCSS('ui/legacy/glassPane.css');
this.setPointerEventsBehavior(PointerEventsBehavior.PierceGlassPane);
- this._onMouseDownBound = this._onMouseDown.bind(this);
- this._onClickOutsideCallback = null;
- this._maxSize = null;
- this._positionX = null;
- this._positionY = null;
- this._anchorBox = null;
- this._anchorBehavior = AnchorBehavior.PreferTop;
- this._sizeBehavior = SizeBehavior.SetExactSize;
- this._marginBehavior = MarginBehavior.DefaultMargin;
+ this.>
+ this.>
+ this.maxSize = null;
+ this.positionX = null;
+ this.positionY = null;
+ this.anchorBox = null;
+ this.anchorBehavior = AnchorBehavior.PreferTop;
+ this.sizeBehavior = SizeBehavior.SetExactSize;
+ this.marginBehavior = MarginBehavior.DefaultMargin;
}
isShowing(): boolean {
- return this._widget.isShowing();
+ return this.widgetInternal.isShowing();
}
registerRequiredCSS(cssFile: string): void {
- this._widget.registerRequiredCSS(cssFile);
+ this.widgetInternal.registerRequiredCSS(cssFile);
}
setDefaultFocusedElement(element: Element|null): void {
- this._widget.setDefaultFocusedElement(element);
+ this.widgetInternal.setDefaultFocusedElement(element);
}
setDimmed(dimmed: boolean): void {
@@ -78,37 +76,37 @@
}
setOutsideClickCallback(callback: ((arg0: Event) => void)|null): void {
- this._onClickOutsideCallback = callback;
+ this.>
}
setMaxContentSize(size: Size|null): void {
- this._maxSize = size;
+ this.maxSize = size;
this.positionContent();
}
setSizeBehavior(sizeBehavior: SizeBehavior): void {
- this._sizeBehavior = sizeBehavior;
+ this.sizeBehavior = sizeBehavior;
this.positionContent();
}
setContentPosition(x: number|null, y: number|null): void {
- this._positionX = x;
- this._positionY = y;
+ this.positionX = x;
+ this.positionY = y;
this.positionContent();
}
setContentAnchorBox(anchorBox: AnchorBox|null): void {
- this._anchorBox = anchorBox;
+ this.anchorBox = anchorBox;
this.positionContent();
}
setAnchorBehavior(behavior: AnchorBehavior): void {
- this._anchorBehavior = behavior;
+ this.anchorBehavior = behavior;
}
setMarginBehavior(behavior: MarginBehavior): void {
- this._marginBehavior = behavior;
- this._arrowElement.classList.toggle('hidden', behavior !== MarginBehavior.Arrow);
+ this.marginBehavior = behavior;
+ this.arrowElement.classList.toggle('hidden', behavior !== MarginBehavior.Arrow);
}
show(document: Document): void {
@@ -118,8 +116,8 @@
// TODO(crbug.com/1006759): Extract the magic number
// Deliberately starts with 3000 to hide other z-indexed elements below.
this.element.style.zIndex = `${3000 + 1000 * _panes.size}`;
- document.body.addEventListener('mousedown', this._onMouseDownBound, true);
- this._widget.show(document.body);
+ document.body.addEventListener('mousedown', this.onMouseDownBound, true);
+ this.widgetInternal.show(document.body);
_panes.add(this);
this.positionContent();
}
@@ -129,19 +127,19 @@
return;
}
_panes.delete(this);
- this.element.ownerDocument.body.removeEventListener('mousedown', this._onMouseDownBound, true);
- this._widget.detach();
+ this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
+ this.widgetInternal.detach();
}
- _onMouseDown(event: Event): void {
- if (!this._onClickOutsideCallback) {
+ private onMouseDown(event: Event): void {
+ if (!this.onClickOutsideCallback) {
return;
}
const node = deepElementFromEvent(event);
if (!node || this.contentElement.isSelfOrAncestor(node)) {
return;
}
- this._onClickOutsideCallback.call(null, event);
+ this.onClickOutsideCallback.call(null, event);
}
positionContent(): void {
@@ -149,13 +147,13 @@
return;
}
- const showArrow = this._marginBehavior === MarginBehavior.Arrow;
- const gutterSize = showArrow ? 8 : (this._marginBehavior === MarginBehavior.NoMargin ? 0 : 3);
+ const showArrow = this.marginBehavior === MarginBehavior.Arrow;
+ const gutterSize = showArrow ? 8 : (this.marginBehavior === MarginBehavior.NoMargin ? 0 : 3);
const scrollbarSize = measuredScrollbarWidth(this.element.ownerDocument);
const arrowSize = 10;
const container = (_containers.get((this.element.ownerDocument as Document))) as HTMLElement;
- if (this._sizeBehavior === SizeBehavior.MeasureContent) {
+ if (this.sizeBehavior === SizeBehavior.MeasureContent) {
this.contentElement.positionAt(0, 0);
this.contentElement.style.width = '';
this.contentElement.style.maxWidth = '';
@@ -171,12 +169,12 @@
let positionX = gutterSize;
let positionY = gutterSize;
- if (this._maxSize) {
- width = Math.min(width, this._maxSize.width);
- height = Math.min(height, this._maxSize.height);
+ if (this.maxSize) {
+ width = Math.min(width, this.maxSize.width);
+ height = Math.min(height, this.maxSize.height);
}
- if (this._sizeBehavior === SizeBehavior.MeasureContent) {
+ if (this.sizeBehavior === SizeBehavior.MeasureContent) {
const measuredRect = this.contentElement.getBoundingClientRect();
const widthOverflow = height < measuredRect.height ? scrollbarSize : 0;
const heightOverflow = width < measuredRect.width ? scrollbarSize : 0;
@@ -184,11 +182,11 @@
height = Math.min(height, measuredRect.height + heightOverflow);
}
- if (this._anchorBox) {
- const anchorBox = this._anchorBox.relativeToElement(container);
+ if (this.anchorBox) {
+ const anchorBox = this.anchorBox.relativeToElement(container);
let behavior: AnchorBehavior.PreferBottom|AnchorBehavior.PreferTop|AnchorBehavior.PreferRight|
- AnchorBehavior.PreferLeft|AnchorBehavior = this._anchorBehavior;
- this._arrowElement.classList.remove('arrow-none', 'arrow-top', 'arrow-bottom', 'arrow-left', 'arrow-right');
+ AnchorBehavior.PreferLeft|AnchorBehavior = this.anchorBehavior;
+ this.arrowElement.classList.remove('arrow-none', 'arrow-top', 'arrow-bottom', 'arrow-left', 'arrow-right');
if (behavior === AnchorBehavior.PreferTop || behavior === AnchorBehavior.PreferBottom) {
const top = anchorBox.y - 2 * gutterSize;
@@ -205,31 +203,31 @@
if (behavior === AnchorBehavior.PreferTop) {
positionY = Math.max(gutterSize, anchorBox.y - height - gutterSize);
const spaceTop = anchorBox.y - positionY - gutterSize;
- if (this._sizeBehavior === SizeBehavior.MeasureContent) {
+ if (this.sizeBehavior === SizeBehavior.MeasureContent) {
if (height > spaceTop) {
- this._arrowElement.classList.add('arrow-none');
+ this.arrowElement.classList.add('arrow-none');
enoughHeight = false;
}
} else {
height = Math.min(height, spaceTop);
}
- this._arrowElement.setIconType('mediumicon-arrow-bottom');
- this._arrowElement.classList.add('arrow-bottom');
+ this.arrowElement.setIconType('mediumicon-arrow-bottom');
+ this.arrowElement.classList.add('arrow-bottom');
arrowY = anchorBox.y - gutterSize;
} else {
positionY = anchorBox.y + anchorBox.height + gutterSize;
const spaceBottom = containerHeight - positionY - gutterSize;
- if (this._sizeBehavior === SizeBehavior.MeasureContent) {
+ if (this.sizeBehavior === SizeBehavior.MeasureContent) {
if (height > spaceBottom) {
- this._arrowElement.classList.add('arrow-none');
+ this.arrowElement.classList.add('arrow-none');
positionY = containerHeight - gutterSize - height;
enoughHeight = false;
}
} else {
height = Math.min(height, spaceBottom);
}
- this._arrowElement.setIconType('mediumicon-arrow-top');
- this._arrowElement.classList.add('arrow-top');
+ this.arrowElement.setIconType('mediumicon-arrow-top');
+ this.arrowElement.classList.add('arrow-top');
arrowY = anchorBox.y + anchorBox.height + gutterSize;
}
@@ -241,11 +239,11 @@
}
width = Math.min(width, containerWidth - positionX - gutterSize);
if (2 * arrowSize >= width) {
- this._arrowElement.classList.add('arrow-none');
+ this.arrowElement.classList.add('arrow-none');
} else {
let arrowX: number = anchorBox.x + Math.min(50, Math.floor(anchorBox.width / 2));
arrowX = Platform.NumberUtilities.clamp(arrowX, positionX + arrowSize, positionX + width - arrowSize);
- this._arrowElement.positionAt(arrowX, arrowY, container);
+ this.arrowElement.positionAt(arrowX, arrowY, container);
}
} else {
const left = anchorBox.x - 2 * gutterSize;
@@ -262,31 +260,31 @@
if (behavior === AnchorBehavior.PreferLeft) {
positionX = Math.max(gutterSize, anchorBox.x - width - gutterSize);
const spaceLeft = anchorBox.x - positionX - gutterSize;
- if (this._sizeBehavior === SizeBehavior.MeasureContent) {
+ if (this.sizeBehavior === SizeBehavior.MeasureContent) {
if (width > spaceLeft) {
- this._arrowElement.classList.add('arrow-none');
+ this.arrowElement.classList.add('arrow-none');
enoughWidth = false;
}
} else {
width = Math.min(width, spaceLeft);
}
- this._arrowElement.setIconType('mediumicon-arrow-right');
- this._arrowElement.classList.add('arrow-right');
+ this.arrowElement.setIconType('mediumicon-arrow-right');
+ this.arrowElement.classList.add('arrow-right');
arrowX = anchorBox.x - gutterSize;
} else {
positionX = anchorBox.x + anchorBox.width + gutterSize;
const spaceRight = containerWidth - positionX - gutterSize;
- if (this._sizeBehavior === SizeBehavior.MeasureContent) {
+ if (this.sizeBehavior === SizeBehavior.MeasureContent) {
if (width > spaceRight) {
- this._arrowElement.classList.add('arrow-none');
+ this.arrowElement.classList.add('arrow-none');
positionX = containerWidth - gutterSize - width;
enoughWidth = false;
}
} else {
width = Math.min(width, spaceRight);
}
- this._arrowElement.setIconType('mediumicon-arrow-left');
- this._arrowElement.classList.add('arrow-left');
+ this.arrowElement.setIconType('mediumicon-arrow-left');
+ this.arrowElement.classList.add('arrow-left');
arrowX = anchorBox.x + anchorBox.width + gutterSize;
}
@@ -298,34 +296,34 @@
}
height = Math.min(height, containerHeight - positionY - gutterSize);
if (2 * arrowSize >= height) {
- this._arrowElement.classList.add('arrow-none');
+ this.arrowElement.classList.add('arrow-none');
} else {
let arrowY: number = anchorBox.y + Math.min(50, Math.floor(anchorBox.height / 2));
arrowY = Platform.NumberUtilities.clamp(arrowY, positionY + arrowSize, positionY + height - arrowSize);
- this._arrowElement.positionAt(arrowX, arrowY, container);
+ this.arrowElement.positionAt(arrowX, arrowY, container);
}
}
} else {
- positionX = this._positionX !== null ? this._positionX : (containerWidth - width) / 2;
- positionY = this._positionY !== null ? this._positionY : (containerHeight - height) / 2;
+ positionX = this.positionX !== null ? this.positionX : (containerWidth - width) / 2;
+ positionY = this.positionY !== null ? this.positionY : (containerHeight - height) / 2;
width = Math.min(width, containerWidth - positionX - gutterSize);
height = Math.min(height, containerHeight - positionY - gutterSize);
- this._arrowElement.classList.add('arrow-none');
+ this.arrowElement.classList.add('arrow-none');
}
this.contentElement.style.width = width + 'px';
- if (this._sizeBehavior === SizeBehavior.SetExactWidthMaxHeight) {
+ if (this.sizeBehavior === SizeBehavior.SetExactWidthMaxHeight) {
this.contentElement.style.maxHeight = height + 'px';
} else {
this.contentElement.style.height = height + 'px';
}
this.contentElement.positionAt(positionX, positionY, container);
- this._widget.doResize();
+ this.widgetInternal.doResize();
}
widget(): Widget {
- return this._widget;
+ return this.widgetInternal;
}
static setContainer(element: Element): void {
diff --git a/front_end/ui/legacy/HistoryInput.ts b/front_end/ui/legacy/HistoryInput.ts
index 9352051..141a42a 100644
--- a/front_end/ui/legacy/HistoryInput.ts
+++ b/front_end/ui/legacy/HistoryInput.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import {Keys} from './KeyboardShortcut.js';
import {registerCustomElement} from './utils/register-custom-element.js';
@@ -12,15 +10,15 @@
let _constructor: (() => Element)|null = null;
export class HistoryInput extends HTMLInputElement {
- _history: string[];
- _historyPosition: number;
+ private history: string[];
+ private historyPosition: number;
constructor() {
super();
- this._history = [''];
- this._historyPosition = 0;
- this.addEventListener('keydown', this._onKeyDown.bind(this), false);
- this.addEventListener('input', this._onInput.bind(this), false);
+ this.history = [''];
+ this.historyPosition = 0;
+ this.addEventListener('keydown', this.onKeyDown.bind(this), false);
+ this.addEventListener('input', this.onInput.bind(this), false);
}
static create(): HistoryInput {
@@ -31,35 +29,35 @@
return _constructor() as HistoryInput;
}
- _onInput(_event: Event): void {
- if (this._history.length === this._historyPosition + 1) {
- this._history[this._history.length - 1] = this.value;
+ private onInput(_event: Event): void {
+ if (this.history.length === this.historyPosition + 1) {
+ this.history[this.history.length - 1] = this.value;
}
}
- _onKeyDown(ev: Event): void {
+ private onKeyDown(ev: Event): void {
const event = (ev as KeyboardEvent);
if (event.keyCode === Keys.Up.code) {
- this._historyPosition = Math.max(this._historyPosition - 1, 0);
- this.value = this._history[this._historyPosition];
+ this.historyPosition = Math.max(this.historyPosition - 1, 0);
+ this.value = this.history[this.historyPosition];
this.dispatchEvent(new Event('input', {'bubbles': true, 'cancelable': true}));
event.consume(true);
} else if (event.keyCode === Keys.Down.code) {
- this._historyPosition = Math.min(this._historyPosition + 1, this._history.length - 1);
- this.value = this._history[this._historyPosition];
+ this.historyPosition = Math.min(this.historyPosition + 1, this.history.length - 1);
+ this.value = this.history[this.historyPosition];
this.dispatchEvent(new Event('input', {'bubbles': true, 'cancelable': true}));
event.consume(true);
} else if (event.keyCode === Keys.Enter.code) {
- this._saveToHistory();
+ this.saveToHistory();
}
}
- _saveToHistory(): void {
- if (this._history.length > 1 && this._history[this._history.length - 2] === this.value) {
+ private saveToHistory(): void {
+ if (this.history.length > 1 && this.history[this.history.length - 2] === this.value) {
return;
}
- this._history[this._history.length - 1] = this.value;
- this._historyPosition = this._history.length - 1;
- this._history.push('');
+ this.history[this.history.length - 1] = this.value;
+ this.historyPosition = this.history.length - 1;
+ this.history.push('');
}
}
diff --git a/front_end/ui/legacy/Icon.ts b/front_end/ui/legacy/Icon.ts
index d5ee83d..5f48499 100644
--- a/front_end/ui/legacy/Icon.ts
+++ b/front_end/ui/legacy/Icon.ts
@@ -2,21 +2,19 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import {registerCustomElement} from './utils/register-custom-element.js';
let iconConstructor: (() => Element)|null = null;
export class Icon extends HTMLSpanElement {
- _descriptor: Descriptor|null;
- _spriteSheet: SpriteSheet|null;
- _iconType: string;
+ private descriptor: Descriptor|null;
+ private spriteSheet: SpriteSheet|null;
+ private iconType: string;
constructor() {
super();
- this._descriptor = null;
- this._spriteSheet = null;
- this._iconType = '';
+ this.descriptor = null;
+ this.spriteSheet = null;
+ this.iconType = '';
}
static create(iconType?: string, className?: string): Icon {
@@ -35,57 +33,57 @@
}
setIconType(iconType: string): void {
- if (this._descriptor) {
+ if (this.descriptor) {
this.style.removeProperty('--spritesheet-position');
this.style.removeProperty('width');
this.style.removeProperty('height');
- this._toggleClasses(false);
- this._iconType = '';
- this._descriptor = null;
- this._spriteSheet = null;
+ this.toggleClasses(false);
+ this.iconType = '';
+ this.descriptor = null;
+ this.spriteSheet = null;
}
const descriptor = descriptors.get(iconType) || null;
if (descriptor) {
- this._iconType = iconType;
- this._descriptor = descriptor;
- this._spriteSheet = spriteSheets.get(this._descriptor.spritesheet) || null;
- if (!this._spriteSheet) {
- throw new Error(`ERROR: icon ${this._iconType} has unknown spritesheet: ${this._descriptor.spritesheet}`);
+ this.iconType = iconType;
+ this.descriptor = descriptor;
+ this.spriteSheet = spriteSheets.get(this.descriptor.spritesheet) || null;
+ if (!this.spriteSheet) {
+ throw new Error(`ERROR: icon ${this.iconType} has unknown spritesheet: ${this.descriptor.spritesheet}`);
}
- this.style.setProperty('--spritesheet-position', this._propertyValue());
- this.style.setProperty('width', this._spriteSheet.cellWidth + 'px');
- this.style.setProperty('height', this._spriteSheet.cellHeight + 'px');
- this._toggleClasses(true);
+ this.style.setProperty('--spritesheet-position', this.propertyValue());
+ this.style.setProperty('width', this.spriteSheet.cellWidth + 'px');
+ this.style.setProperty('height', this.spriteSheet.cellHeight + 'px');
+ this.toggleClasses(true);
} else if (iconType) {
throw new Error(`ERROR: failed to find icon descriptor for type: ${iconType}`);
}
}
- _toggleClasses(value: boolean): void {
- if (this._descriptor) {
- this.classList.toggle('spritesheet-' + this._descriptor.spritesheet, value);
- this.classList.toggle(this._iconType, value);
- this.classList.toggle('icon-mask', value && Boolean(this._descriptor.isMask));
- this.classList.toggle('icon-invert', value && Boolean(this._descriptor.invert));
+ private toggleClasses(value: boolean): void {
+ if (this.descriptor) {
+ this.classList.toggle('spritesheet-' + this.descriptor.spritesheet, value);
+ this.classList.toggle(this.iconType, value);
+ this.classList.toggle('icon-mask', value && Boolean(this.descriptor.isMask));
+ this.classList.toggle('icon-invert', value && Boolean(this.descriptor.invert));
}
}
- _propertyValue(): string {
- if (!this._descriptor || !this._spriteSheet) {
+ private propertyValue(): string {
+ if (!this.descriptor || !this.spriteSheet) {
throw new Error('Descriptor and spriteSheet expected to be present');
}
- if (!this._descriptor.coordinates) {
- if (!this._descriptor.position || !_positionRegex.test(this._descriptor.position)) {
- throw new Error(`ERROR: icon '${this._iconType}' has malformed position: '${this._descriptor.position}'`);
+ if (!this.descriptor.coordinates) {
+ if (!this.descriptor.position || !_positionRegex.test(this.descriptor.position)) {
+ throw new Error(`ERROR: icon '${this.iconType}' has malformed position: '${this.descriptor.position}'`);
}
- const column = this._descriptor.position[0].toLowerCase().charCodeAt(0) - 97;
- const row = parseInt(this._descriptor.position.substring(1), 10) - 1;
- this._descriptor.coordinates = {
- x: -(this._spriteSheet.cellWidth + this._spriteSheet.padding) * column,
- y: (this._spriteSheet.cellHeight + this._spriteSheet.padding) * (row + 1) - this._spriteSheet.padding,
+ const column = this.descriptor.position[0].toLowerCase().charCodeAt(0) - 97;
+ const row = parseInt(this.descriptor.position.substring(1), 10) - 1;
+ this.descriptor.coordinates = {
+ x: -(this.spriteSheet.cellWidth + this.spriteSheet.padding) * column,
+ y: (this.spriteSheet.cellHeight + this.spriteSheet.padding) * (row + 1) - this.spriteSheet.padding,
};
}
- return `${this._descriptor.coordinates.x}px ${this._descriptor.coordinates.y}px`;
+ return `${this.descriptor.coordinates.x}px ${this.descriptor.coordinates.y}px`;
}
}
diff --git a/front_end/ui/legacy/Infobar.ts b/front_end/ui/legacy/Infobar.ts
index 15f1f26..c6c751c 100644
--- a/front_end/ui/legacy/Infobar.ts
+++ b/front_end/ui/legacy/Infobar.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type * as Common from '../../core/common/common.js';
import * as i18n from '../../core/i18n/i18n.js';
@@ -32,110 +30,110 @@
export class Infobar {
element: HTMLElement;
- _shadowRoot: ShadowRoot;
- _contentElement: HTMLDivElement;
- _mainRow: HTMLElement;
- _detailsRows: HTMLElement;
- _hasDetails: boolean;
- _detailsMessage: string;
- _infoContainer: HTMLElement;
- _infoMessage: HTMLElement;
- _infoText: HTMLElement;
- _actionContainer: HTMLElement;
+ private readonly shadowRoot: ShadowRoot;
+ private readonly contentElement: HTMLDivElement;
+ private readonly mainRow: HTMLElement;
+ private readonly detailsRows: HTMLElement;
+ private hasDetails: boolean;
+ private detailsMessage: string;
+ private readonly infoContainer: HTMLElement;
+ private readonly infoMessage: HTMLElement;
+ private infoText: HTMLElement;
+ private readonly actionContainer: HTMLElement;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _disableSetting: Common.Settings.Setting<any>|null;
- _closeContainer: HTMLElement;
- _toggleElement: HTMLButtonElement;
- _closeButton: HTMLElement;
+ private readonly disableSetting: Common.Settings.Setting<any>|null;
+ private readonly closeContainer: HTMLElement;
+ private readonly toggleElement: HTMLButtonElement;
+ private readonly closeButton: HTMLElement;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _closeCallback: (() => any)|null;
- _parentView?: Widget;
+ private closeCallback: (() => any)|null;
+ private parentView?: Widget;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
constructor(type: Type, text: string, actions?: InfobarAction[], disableSetting?: Common.Settings.Setting<any>) {
this.element = document.createElement('div');
this.element.classList.add('flex-none');
- this._shadowRoot =
+ this.shadowRoot =
createShadowRootWithCoreStyles(this.element, {cssFile: 'ui/legacy/infobar.css', delegatesFocus: undefined});
- this._contentElement = this._shadowRoot.createChild('div', 'infobar infobar-' + type) as HTMLDivElement;
+ this.contentElement = this.shadowRoot.createChild('div', 'infobar infobar-' + type) as HTMLDivElement;
- this._mainRow = this._contentElement.createChild('div', 'infobar-main-row');
- this._detailsRows = this._contentElement.createChild('div', 'infobar-details-rows hidden');
- this._hasDetails = false;
- this._detailsMessage = '';
+ this.mainRow = this.contentElement.createChild('div', 'infobar-main-row');
+ this.detailsRows = this.contentElement.createChild('div', 'infobar-details-rows hidden');
+ this.hasDetails = false;
+ this.detailsMessage = '';
- this._infoContainer = this._mainRow.createChild('div', 'infobar-info-container');
+ this.infoContainer = this.mainRow.createChild('div', 'infobar-info-container');
- this._infoMessage = this._infoContainer.createChild('div', 'infobar-info-message');
+ this.infoMessage = this.infoContainer.createChild('div', 'infobar-info-message');
// Icon is in separate file and included via CSS.
- this._infoMessage.createChild('div', type + '-icon icon');
+ this.infoMessage.createChild('div', type + '-icon icon');
- this._infoText = this._infoMessage.createChild('div', 'infobar-info-text');
- this._infoText.textContent = text;
- ARIAUtils.markAsAlert(this._infoText);
+ this.infoText = this.infoMessage.createChild('div', 'infobar-info-text');
+ this.infoText.textContent = text;
+ ARIAUtils.markAsAlert(this.infoText);
- this._actionContainer = this._infoContainer.createChild('div', 'infobar-info-actions');
+ this.actionContainer = this.infoContainer.createChild('div', 'infobar-info-actions');
if (actions) {
- this._contentElement.setAttribute('role', 'group');
+ this.contentElement.setAttribute('role', 'group');
for (const action of actions) {
- const actionCallback = this._actionCallbackFactory(action);
+ const actionCallback = this.actionCallbackFactory(action);
let buttonClass = 'infobar-button';
if (action.highlight) {
buttonClass += ' primary-button';
}
const button = createTextButton(action.text, actionCallback, buttonClass);
- this._actionContainer.appendChild(button);
+ this.actionContainer.appendChild(button);
}
}
- this._disableSetting = disableSetting || null;
+ this.disableSetting = disableSetting || null;
if (disableSetting) {
const disableButton =
- createTextButton(i18nString(UIStrings.dontShowAgain), this._onDisable.bind(this), 'infobar-button');
- this._actionContainer.appendChild(disableButton);
+ createTextButton(i18nString(UIStrings.dontShowAgain), this.onDisable.bind(this), 'infobar-button');
+ this.actionContainer.appendChild(disableButton);
}
- this._closeContainer = this._mainRow.createChild('div', 'infobar-close-container');
- this._toggleElement = createTextButton(
- i18nString(UIStrings.learnMore), this._onToggleDetails.bind(this), 'link-style devtools-link hidden');
- this._closeContainer.appendChild(this._toggleElement);
- this._closeButton = this._closeContainer.createChild('div', 'close-button', 'dt-close-button');
+ this.closeContainer = this.mainRow.createChild('div', 'infobar-close-container');
+ this.toggleElement = createTextButton(
+ i18nString(UIStrings.learnMore), this.onToggleDetails.bind(this), 'link-style devtools-link hidden');
+ this.closeContainer.appendChild(this.toggleElement);
+ this.closeButton = this.closeContainer.createChild('div', 'close-button', 'dt-close-button');
// @ts-ignore This is a custom element defined in UIUitls.js that has a `setTabbable` that TS doesn't
// know about.
- this._closeButton.setTabbable(true);
- ARIAUtils.setDescription(this._closeButton, i18nString(UIStrings.close));
- self.onInvokeElement(this._closeButton, this.dispose.bind(this));
+ this.closeButton.setTabbable(true);
+ ARIAUtils.setDescription(this.closeButton, i18nString(UIStrings.close));
+ self.onInvokeElement(this.closeButton, this.dispose.bind(this));
if (type !== Type.Issue) {
- this._contentElement.tabIndex = 0;
+ this.contentElement.tabIndex = 0;
}
- ARIAUtils.setAccessibleName(this._contentElement, text);
- this._contentElement.addEventListener('keydown', event => {
+ ARIAUtils.setAccessibleName(this.contentElement, text);
+ this.contentElement.addEventListener('keydown', event => {
if (event.keyCode === Keys.Esc.code) {
this.dispose();
event.consume();
return;
}
- if (event.target !== this._contentElement) {
+ if (event.target !== this.contentElement) {
return;
}
- if (event.key === 'Enter' && this._hasDetails) {
- this._onToggleDetails();
+ if (event.key === 'Enter' && this.hasDetails) {
+ this.onToggleDetails();
event.consume();
return;
}
});
- this._closeCallback = null;
+ this.closeCallback = null;
}
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -150,28 +148,28 @@
dispose(): void {
this.element.remove();
- this._onResize();
- if (this._closeCallback) {
- this._closeCallback.call(null);
+ this.onResize();
+ if (this.closeCallback) {
+ this.closeCallback.call(null);
}
}
setText(text: string): void {
- this._infoText.textContent = text;
- this._onResize();
+ this.infoText.textContent = text;
+ this.onResize();
}
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setCloseCallback(callback: (() => any)|null): void {
- this._closeCallback = callback;
+ this.closeCallback = callback;
}
setParentView(parentView: Widget): void {
- this._parentView = parentView;
+ this.parentView = parentView;
}
- _actionCallbackFactory(action: InfobarAction): () => void {
+ private actionCallbackFactory(action: InfobarAction): () => void {
if (!action.delegate) {
return action.dismiss ? this.dispose.bind(this) : (): void => {};
}
@@ -188,33 +186,33 @@
}).bind(this);
}
- _onResize(): void {
- if (this._parentView) {
- this._parentView.doResize();
+ private onResize(): void {
+ if (this.parentView) {
+ this.parentView.doResize();
}
}
- _onDisable(): void {
- if (this._disableSetting) {
- this._disableSetting.set(true);
+ private onDisable(): void {
+ if (this.disableSetting) {
+ this.disableSetting.set(true);
}
this.dispose();
}
- _onToggleDetails(): void {
- this._detailsRows.classList.remove('hidden');
- this._toggleElement.remove();
- this._onResize();
- ARIAUtils.alert(this._detailsMessage);
+ private onToggleDetails(): void {
+ this.detailsRows.classList.remove('hidden');
+ this.toggleElement.remove();
+ this.onResize();
+ ARIAUtils.alert(this.detailsMessage);
}
createDetailsRowMessage(message?: string): Element {
- this._hasDetails = true;
- this._detailsMessage = message || '';
- this._toggleElement.classList.remove('hidden');
- const infobarDetailsRow = this._detailsRows.createChild('div', 'infobar-details-row');
+ this.hasDetails = true;
+ this.detailsMessage = message || '';
+ this.toggleElement.classList.remove('hidden');
+ const infobarDetailsRow = this.detailsRows.createChild('div', 'infobar-details-row');
const detailsRowMessage = infobarDetailsRow.createChild('span', 'infobar-row-message');
- detailsRowMessage.textContent = this._detailsMessage;
+ detailsRowMessage.textContent = this.detailsMessage;
return detailsRowMessage;
}
}
diff --git a/front_end/ui/legacy/InplaceEditor.ts b/front_end/ui/legacy/InplaceEditor.ts
index e0a0207..a2cab46 100644
--- a/front_end/ui/legacy/InplaceEditor.ts
+++ b/front_end/ui/legacy/InplaceEditor.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Platform from '../../core/platform/platform.js';
import * as ARIAUtils from './ARIAUtils.js';
@@ -15,7 +13,7 @@
let _defaultInstance: InplaceEditor<unknown>|null = null;
export class InplaceEditor<T> {
- _focusRestorer?: ElementFocusRestorer;
+ private focusRestorer?: ElementFocusRestorer;
static startEditing<T>(element: Element, config?: Config<T>): Controller|null {
if (!_defaultInstance) {
_defaultInstance = new InplaceEditor();
@@ -45,7 +43,7 @@
if (typeof oldTabIndex !== 'number' || oldTabIndex < 0) {
element.tabIndex = 0;
}
- this._focusRestorer = new ElementFocusRestorer(element);
+ this.focusRestorer = new ElementFocusRestorer(element);
editingContext.oldTabIndex = oldTabIndex;
}
@@ -113,8 +111,8 @@
element.removeEventListener('paste', pasteEventListener, true);
}
- if (self._focusRestorer) {
- self._focusRestorer.restore();
+ if (self.focusRestorer) {
+ self.focusRestorer.restore();
}
self.closeEditor(editingContext);
}
diff --git a/front_end/ui/legacy/InspectorView.ts b/front_end/ui/legacy/InspectorView.ts
index a22f9ad..27d0385 100644
--- a/front_end/ui/legacy/InspectorView.ts
+++ b/front_end/ui/legacy/InspectorView.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
@@ -105,18 +103,18 @@
let inspectorViewInstance: InspectorView;
export class InspectorView extends VBox implements ViewLocationResolver {
- _drawerSplitWidget: SplitWidget;
- _tabDelegate: InspectorViewTabDelegate;
- _drawerTabbedLocation: TabbedViewLocation;
- _drawerTabbedPane: TabbedPane;
- _infoBarDiv!: HTMLDivElement|null;
- _tabbedLocation: TabbedViewLocation;
- _tabbedPane: TabbedPane;
- _keyDownBound: (event: Event) => void;
- _currentPanelLocked?: boolean;
- _focusRestorer?: WidgetFocusRestorer|null;
- _ownerSplitWidget?: SplitWidget;
- _reloadRequiredInfobar?: Infobar;
+ private readonly drawerSplitWidget: SplitWidget;
+ private readonly tabDelegate: InspectorViewTabDelegate;
+ private readonly drawerTabbedLocation: TabbedViewLocation;
+ private drawerTabbedPane: TabbedPane;
+ private infoBarDiv!: HTMLDivElement|null;
+ private readonly tabbedLocation: TabbedViewLocation;
+ readonly tabbedPane: TabbedPane;
+ private readonly keyDownBound: (event: Event) => void;
+ private currentPanelLocked?: boolean;
+ private focusRestorer?: WidgetFocusRestorer|null;
+ private ownerSplitWidget?: SplitWidget;
+ private reloadRequiredInfobar?: Infobar;
constructor() {
super();
@@ -124,52 +122,52 @@
this.setMinimumSize(250, 72);
// DevTools sidebar is a vertical split of panels tabbed pane and a drawer.
- this._drawerSplitWidget = new SplitWidget(false, true, 'Inspector.drawerSplitViewState', 200, 200);
- this._drawerSplitWidget.hideSidebar();
- this._drawerSplitWidget.enableShowModeSaving();
- this._drawerSplitWidget.show(this.element);
+ this.drawerSplitWidget = new SplitWidget(false, true, 'Inspector.drawerSplitViewState', 200, 200);
+ this.drawerSplitWidget.hideSidebar();
+ this.drawerSplitWidget.enableShowModeSaving();
+ this.drawerSplitWidget.show(this.element);
- this._tabDelegate = new InspectorViewTabDelegate();
+ this.tabDelegate = new InspectorViewTabDelegate();
// Create drawer tabbed pane.
- this._drawerTabbedLocation =
- ViewManager.instance().createTabbedLocation(this._showDrawer.bind(this, false), 'drawer-view', true, true);
- const moreTabsButton = this._drawerTabbedLocation.enableMoreTabsButton();
+ this.drawerTabbedLocation =
+ ViewManager.instance().createTabbedLocation(this.showDrawer.bind(this, false), 'drawer-view', true, true);
+ const moreTabsButton = this.drawerTabbedLocation.enableMoreTabsButton();
moreTabsButton.setTitle(i18nString(UIStrings.moreTools));
- this._drawerTabbedPane = this._drawerTabbedLocation.tabbedPane();
- this._drawerTabbedPane.setMinimumSize(0, 27);
- this._drawerTabbedPane.element.classList.add('drawer-tabbed-pane');
+ this.drawerTabbedPane = this.drawerTabbedLocation.tabbedPane();
+ this.drawerTabbedPane.setMinimumSize(0, 27);
+ this.drawerTabbedPane.element.classList.add('drawer-tabbed-pane');
const closeDrawerButton = new ToolbarButton(i18nString(UIStrings.closeDrawer), 'largeicon-delete');
- closeDrawerButton.addEventListener(ToolbarButton.Events.Click, this._closeDrawer, this);
- this._drawerTabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this._tabSelected, this);
- this._drawerTabbedPane.setTabDelegate(this._tabDelegate);
+ closeDrawerButton.addEventListener(ToolbarButton.Events.Click, this.closeDrawer, this);
+ this.drawerTabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
+ this.drawerTabbedPane.setTabDelegate(this.tabDelegate);
- this._drawerSplitWidget.installResizer(this._drawerTabbedPane.headerElement());
- this._drawerSplitWidget.setSidebarWidget(this._drawerTabbedPane);
- this._drawerTabbedPane.rightToolbar().appendToolbarItem(closeDrawerButton);
+ this.drawerSplitWidget.installResizer(this.drawerTabbedPane.headerElement());
+ this.drawerSplitWidget.setSidebarWidget(this.drawerTabbedPane);
+ this.drawerTabbedPane.rightToolbar().appendToolbarItem(closeDrawerButton);
// Create main area tabbed pane.
- this._tabbedLocation = ViewManager.instance().createTabbedLocation(
+ this.tabbedLocation = ViewManager.instance().createTabbedLocation(
Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront.bind(
Host.InspectorFrontendHost.InspectorFrontendHostInstance),
'panel', true, true, Root.Runtime.Runtime.queryParam('panel'));
- this._tabbedPane = this._tabbedLocation.tabbedPane();
- this._tabbedPane.element.classList.add('main-tabbed-pane');
- this._tabbedPane.registerRequiredCSS('ui/legacy/inspectorViewTabbedPane.css');
- this._tabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this._tabSelected, this);
- this._tabbedPane.setAccessibleName(i18nString(UIStrings.panels));
- this._tabbedPane.setTabDelegate(this._tabDelegate);
+ this.tabbedPane = this.tabbedLocation.tabbedPane();
+ this.tabbedPane.element.classList.add('main-tabbed-pane');
+ this.tabbedPane.registerRequiredCSS('ui/legacy/inspectorViewTabbedPane.css');
+ this.tabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
+ this.tabbedPane.setAccessibleName(i18nString(UIStrings.panels));
+ this.tabbedPane.setTabDelegate(this.tabDelegate);
// Store the initial selected panel for use in launch histograms
- Host.userMetrics.setLaunchPanel(this._tabbedPane.selectedTabId);
+ Host.userMetrics.setLaunchPanel(this.tabbedPane.selectedTabId);
if (Host.InspectorFrontendHost.isUnderTest()) {
- this._tabbedPane.setAutoSelectFirstItemOnShow(false);
+ this.tabbedPane.setAutoSelectFirstItemOnShow(false);
}
- this._drawerSplitWidget.setMainWidget(this._tabbedPane);
+ this.drawerSplitWidget.setMainWidget(this.tabbedPane);
- this._keyDownBound = this._keyDown.bind(this);
+ this.keyDownBound = this.keyDown.bind(this);
Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
Host.InspectorFrontendHostAPI.Events.ShowPanel, showPanel.bind(this));
@@ -181,7 +179,7 @@
if (shouldShowLocaleInfobar()) {
const infobar = createLocaleInfobar();
infobar.setParentView(this);
- this._attachInfobar(infobar);
+ this.attachInfobar(infobar);
}
}
@@ -197,34 +195,34 @@
}
wasShown(): void {
- this.element.ownerDocument.addEventListener('keydown', this._keyDownBound, false);
+ this.element.ownerDocument.addEventListener('keydown', this.keyDownBound, false);
}
willHide(): void {
- this.element.ownerDocument.removeEventListener('keydown', this._keyDownBound, false);
+ this.element.ownerDocument.removeEventListener('keydown', this.keyDownBound, false);
}
resolveLocation(locationName: string): ViewLocation|null {
if (locationName === 'drawer-view') {
- return this._drawerTabbedLocation;
+ return this.drawerTabbedLocation;
}
if (locationName === 'panel') {
- return this._tabbedLocation;
+ return this.tabbedLocation;
}
return null;
}
async createToolbars(): Promise<void> {
- await this._tabbedPane.leftToolbar().appendItemsAtLocation('main-toolbar-left');
- await this._tabbedPane.rightToolbar().appendItemsAtLocation('main-toolbar-right');
+ await this.tabbedPane.leftToolbar().appendItemsAtLocation('main-toolbar-left');
+ await this.tabbedPane.rightToolbar().appendItemsAtLocation('main-toolbar-right');
}
addPanel(view: View): void {
- this._tabbedLocation.appendView(view);
+ this.tabbedLocation.appendView(view);
}
hasPanel(panelName: string): boolean {
- return this._tabbedPane.hasTab(panelName);
+ return this.tabbedPane.hasTab(panelName);
}
async panel(panelName: string): Promise<Panel> {
@@ -236,14 +234,14 @@
}
onSuspendStateChanged(allTargetsSuspended: boolean): void {
- this._currentPanelLocked = allTargetsSuspended;
- this._tabbedPane.setCurrentTabLocked(this._currentPanelLocked);
- this._tabbedPane.leftToolbar().setEnabled(!this._currentPanelLocked);
- this._tabbedPane.rightToolbar().setEnabled(!this._currentPanelLocked);
+ this.currentPanelLocked = allTargetsSuspended;
+ this.tabbedPane.setCurrentTabLocked(this.currentPanelLocked);
+ this.tabbedPane.leftToolbar().setEnabled(!this.currentPanelLocked);
+ this.tabbedPane.rightToolbar().setEnabled(!this.currentPanelLocked);
}
canSelectPanel(panelName: string): boolean {
- return !this._currentPanelLocked || this._tabbedPane.selectedTabId === panelName;
+ return !this.currentPanelLocked || this.tabbedPane.selectedTabId === panelName;
}
async showPanel(panelName: string): Promise<void> {
@@ -252,26 +250,26 @@
setPanelIcon(tabId: string, icon: Icon|null): void {
// Find the tabbed location where the panel lives
- const tabbedPane = this._getTabbedPaneForTabId(tabId);
+ const tabbedPane = this.getTabbedPaneForTabId(tabId);
if (tabbedPane) {
tabbedPane.setTabIcon(tabId, icon);
}
}
- _emitDrawerChangeEvent(isDrawerOpen: boolean): void {
+ private emitDrawerChangeEvent(isDrawerOpen: boolean): void {
const evt = new CustomEvent(Events.DrawerChange, {bubbles: true, cancelable: true, detail: {isDrawerOpen}});
document.body.dispatchEvent(evt);
}
- _getTabbedPaneForTabId(tabId: string): TabbedPane|null {
+ private getTabbedPaneForTabId(tabId: string): TabbedPane|null {
// Tab exists in the main panel
- if (this._tabbedPane.hasTab(tabId)) {
- return this._tabbedPane;
+ if (this.tabbedPane.hasTab(tabId)) {
+ return this.tabbedPane;
}
// Tab exists in the drawer
- if (this._drawerTabbedPane.hasTab(tabId)) {
- return this._drawerTabbedPane;
+ if (this.drawerTabbedPane.hasTab(tabId)) {
+ return this.drawerTabbedPane;
}
// Tab is not open
@@ -279,53 +277,53 @@
}
currentPanelDeprecated(): Widget|null {
- return (ViewManager.instance().materializedWidget(this._tabbedPane.selectedTabId || '') as Widget | null);
+ return (ViewManager.instance().materializedWidget(this.tabbedPane.selectedTabId || '') as Widget | null);
}
- _showDrawer(focus: boolean): void {
- if (this._drawerTabbedPane.isShowing()) {
+ showDrawer(focus: boolean): void {
+ if (this.drawerTabbedPane.isShowing()) {
return;
}
- this._drawerSplitWidget.showBoth();
+ this.drawerSplitWidget.showBoth();
if (focus) {
- this._focusRestorer = new WidgetFocusRestorer(this._drawerTabbedPane);
+ this.focusRestorer = new WidgetFocusRestorer(this.drawerTabbedPane);
} else {
- this._focusRestorer = null;
+ this.focusRestorer = null;
}
- this._emitDrawerChangeEvent(true);
+ this.emitDrawerChangeEvent(true);
}
drawerVisible(): boolean {
- return this._drawerTabbedPane.isShowing();
+ return this.drawerTabbedPane.isShowing();
}
- _closeDrawer(): void {
- if (!this._drawerTabbedPane.isShowing()) {
+ closeDrawer(): void {
+ if (!this.drawerTabbedPane.isShowing()) {
return;
}
- if (this._focusRestorer) {
- this._focusRestorer.restore();
+ if (this.focusRestorer) {
+ this.focusRestorer.restore();
}
- this._drawerSplitWidget.hideSidebar(true);
+ this.drawerSplitWidget.hideSidebar(true);
- this._emitDrawerChangeEvent(false);
+ this.emitDrawerChangeEvent(false);
}
setDrawerMinimized(minimized: boolean): void {
- this._drawerSplitWidget.setSidebarMinimized(minimized);
- this._drawerSplitWidget.setResizable(!minimized);
+ this.drawerSplitWidget.setSidebarMinimized(minimized);
+ this.drawerSplitWidget.setResizable(!minimized);
}
isDrawerMinimized(): boolean {
- return this._drawerSplitWidget.isSidebarMinimized();
+ return this.drawerSplitWidget.isSidebarMinimized();
}
closeDrawerTab(id: string, userGesture?: boolean): void {
- this._drawerTabbedPane.closeTab(id, userGesture);
+ this.drawerTabbedPane.closeTab(id, userGesture);
Host.userMetrics.panelClosed(id);
}
- _keyDown(event: Event): void {
+ private keyDown(event: Event): void {
const keyboardEvent = (event as KeyboardEvent);
if (!KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent) || keyboardEvent.altKey || keyboardEvent.shiftKey) {
return;
@@ -343,9 +341,9 @@
panelIndex = keyboardEvent.keyCode - 0x61;
}
if (panelIndex !== -1) {
- const panelName = this._tabbedPane.tabIds()[panelIndex];
+ const panelName = this.tabbedPane.tabIds()[panelIndex];
if (panelName) {
- if (!Dialog.hasInstance() && !this._currentPanelLocked) {
+ if (!Dialog.hasInstance() && !this.currentPanelLocked) {
this.showPanel(panelName);
}
event.consume(true);
@@ -359,40 +357,40 @@
}
topResizerElement(): Element {
- return this._tabbedPane.headerElement();
+ return this.tabbedPane.headerElement();
}
toolbarItemResized(): void {
- this._tabbedPane.headerResized();
+ this.tabbedPane.headerResized();
}
- _tabSelected(event: Common.EventTarget.EventTargetEvent): void {
+ private tabSelected(event: Common.EventTarget.EventTargetEvent): void {
const tabId = (event.data['tabId'] as string);
Host.userMetrics.panelShown(tabId);
}
setOwnerSplit(splitWidget: SplitWidget): void {
- this._ownerSplitWidget = splitWidget;
+ this.ownerSplitWidget = splitWidget;
}
ownerSplit(): SplitWidget|null {
- return this._ownerSplitWidget || null;
+ return this.ownerSplitWidget || null;
}
minimize(): void {
- if (this._ownerSplitWidget) {
- this._ownerSplitWidget.setSidebarMinimized(true);
+ if (this.ownerSplitWidget) {
+ this.ownerSplitWidget.setSidebarMinimized(true);
}
}
restore(): void {
- if (this._ownerSplitWidget) {
- this._ownerSplitWidget.setSidebarMinimized(false);
+ if (this.ownerSplitWidget) {
+ this.ownerSplitWidget.setSidebarMinimized(false);
}
}
displayReloadRequiredWarning(message: string): void {
- if (!this._reloadRequiredInfobar) {
+ if (!this.reloadRequiredInfobar) {
const infobar = new Infobar(InfobarType.Info, message, [
{
text: i18nString(UIStrings.reloadDevtools),
@@ -402,25 +400,25 @@
},
]);
infobar.setParentView(this);
- this._attachInfobar(infobar);
- this._reloadRequiredInfobar = infobar;
+ this.attachInfobar(infobar);
+ this.reloadRequiredInfobar = infobar;
infobar.setCloseCallback(() => {
- delete this._reloadRequiredInfobar;
+ delete this.reloadRequiredInfobar;
});
}
}
- _createInfoBarDiv(): void {
- if (!this._infoBarDiv) {
- this._infoBarDiv = document.createElement('div');
- this._infoBarDiv.classList.add('flex-none');
- this.contentElement.insertBefore(this._infoBarDiv, this.contentElement.firstChild);
+ private createInfoBarDiv(): void {
+ if (!this.infoBarDiv) {
+ this.infoBarDiv = document.createElement('div');
+ this.infoBarDiv.classList.add('flex-none');
+ this.contentElement.insertBefore(this.infoBarDiv, this.contentElement.firstChild);
}
}
- _attachInfobar(infobar: Infobar): void {
- this._createInfoBarDiv();
- this._infoBarDiv?.appendChild(infobar.element);
+ private attachInfobar(infobar: Infobar): void {
+ this.createInfoBarDiv();
+ this.infoBarDiv?.appendChild(infobar.element);
}
}
@@ -511,18 +509,18 @@
switch (actionId) {
case 'main.toggle-drawer':
if (InspectorView.instance().drawerVisible()) {
- InspectorView.instance()._closeDrawer();
+ InspectorView.instance().closeDrawer();
} else {
- InspectorView.instance()._showDrawer(true);
+ InspectorView.instance().showDrawer(true);
}
return true;
case 'main.next-tab':
- InspectorView.instance()._tabbedPane.selectNextTab();
- InspectorView.instance()._tabbedPane.focus();
+ InspectorView.instance().tabbedPane.selectNextTab();
+ InspectorView.instance().tabbedPane.focus();
return true;
case 'main.previous-tab':
- InspectorView.instance()._tabbedPane.selectPrevTab();
- InspectorView.instance()._tabbedPane.focus();
+ InspectorView.instance().tabbedPane.selectPrevTab();
+ InspectorView.instance().tabbedPane.focus();
return true;
}
return false;
diff --git a/front_end/ui/legacy/KeyboardShortcut.ts b/front_end/ui/legacy/KeyboardShortcut.ts
index ccfa387..d847454 100644
--- a/front_end/ui/legacy/KeyboardShortcut.ts
+++ b/front_end/ui/legacy/KeyboardShortcut.ts
@@ -31,8 +31,6 @@
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Host from '../../core/host/host.js';
import {DefaultShortcutSetting} from './ShortcutRegistry.js';
@@ -100,7 +98,7 @@
keyCode = keyCode.charCodeAt(0) - (/^[a-z]/.test(keyCode) ? 32 : 0);
}
modifiers = modifiers || Modifiers.None;
- return KeyboardShortcut._makeKeyFromCodeAndModifiers(keyCode, modifiers);
+ return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, modifiers);
}
static makeKeyFromEvent(keyboardEvent: KeyboardEvent): number {
@@ -121,13 +119,13 @@
// Use either a real or a synthetic keyCode (for events originating from extensions).
// @ts-ignore ExtensionServer.js installs '__keyCode' on some events.
const keyCode = keyboardEvent.keyCode || keyboardEvent['__keyCode'];
- return KeyboardShortcut._makeKeyFromCodeAndModifiers(keyCode, modifiers);
+ return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, modifiers);
}
static makeKeyFromEventIgnoringModifiers(keyboardEvent: KeyboardEvent): number {
// @ts-ignore ExtensionServer.js installs '__keyCode' on some events.
const keyCode = keyboardEvent.keyCode || keyboardEvent['__keyCode'];
- return KeyboardShortcut._makeKeyFromCodeAndModifiers(keyCode, Modifiers.None);
+ return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, Modifiers.None);
}
// This checks if a "control equivalent" key is pressed. For non-mac platforms this means checking
@@ -172,12 +170,12 @@
static shortcutToString(key: string|Key, modifiers?: number): string {
if (typeof key !== 'string' && KeyboardShortcut.isModifier(key.code)) {
- return KeyboardShortcut._modifiersToString(modifiers);
+ return KeyboardShortcut.modifiersToString(modifiers);
}
- return KeyboardShortcut._modifiersToString(modifiers) + KeyboardShortcut._keyName(key);
+ return KeyboardShortcut.modifiersToString(modifiers) + KeyboardShortcut.keyName(key);
}
- static _keyName(key: string|Key): string {
+ private static keyName(key: string|Key): string {
if (typeof key === 'string') {
return key.toUpperCase();
}
@@ -187,7 +185,7 @@
return key.name[Host.Platform.platform()] || key.name.other || '';
}
- static _makeKeyFromCodeAndModifiers(keyCode: number, modifiers: number|null): number {
+ private static makeKeyFromCodeAndModifiers(keyCode: number, modifiers: number|null): number {
return (keyCode & 255) | ((modifiers || 0) << 8);
}
@@ -204,7 +202,7 @@
keyCode === Keys.Meta.code;
}
- static _modifiersToString(modifiers: number|undefined): string {
+ private static modifiersToString(modifiers: number|undefined): string {
const isMac = Host.Platform.isMac();
const m = Modifiers;
const modifierNames = new Map([
@@ -223,7 +221,7 @@
/**
* Constants for encoding modifier key set as a bit mask.
- * see #_makeKeyFromCodeAndModifiers
+ * see #makeKeyFromCodeAndModifiers
*/
export const Modifiers: {
[x: string]: number,
diff --git a/front_end/ui/legacy/ListControl.ts b/front_end/ui/legacy/ListControl.ts
index fe039b5..19fef4d 100644
--- a/front_end/ui/legacy/ListControl.ts
+++ b/front_end/ui/legacy/ListControl.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type * as Common from '../../core/common/common.js';
import * as Platform from '../../core/platform/platform.js';
@@ -35,67 +33,67 @@
export class ListControl<T> {
element: HTMLDivElement;
- _topElement: HTMLElement;
- _bottomElement: HTMLElement;
- _firstIndex: number;
- _lastIndex: number;
- _renderedHeight: number;
- _topHeight: number;
- _bottomHeight: number;
- _model: ListModel<T>;
- _itemToElement: Map<T, Element>;
- _selectedIndex: number;
- _selectedItem: T|null;
- _delegate: ListDelegate<T>;
- _mode: ListMode;
- _fixedHeight: number;
- _variableOffsets: Int32Array;
+ private topElement: HTMLElement;
+ private bottomElement: HTMLElement;
+ private firstIndex: number;
+ private lastIndex: number;
+ private renderedHeight: number;
+ private topHeight: number;
+ private bottomHeight: number;
+ private model: ListModel<T>;
+ private itemToElement: Map<T, Element>;
+ private selectedIndexInternal: number;
+ private selectedItemInternal: T|null;
+ private delegate: ListDelegate<T>;
+ private readonly mode: ListMode;
+ private fixedHeight: number;
+ private variableOffsets: Int32Array;
constructor(model: ListModel<T>, delegate: ListDelegate<T>, mode?: ListMode) {
this.element = document.createElement('div');
this.element.style.overflowY = 'auto';
- this._topElement = this.element.createChild('div');
- this._bottomElement = this.element.createChild('div');
- this._firstIndex = 0;
- this._lastIndex = 0;
- this._renderedHeight = 0;
- this._topHeight = 0;
- this._bottomHeight = 0;
+ this.topElement = this.element.createChild('div');
+ this.bottomElement = this.element.createChild('div');
+ this.firstIndex = 0;
+ this.lastIndex = 0;
+ this.renderedHeight = 0;
+ this.topHeight = 0;
+ this.bottomHeight = 0;
- this._model = model;
- this._model.addEventListener(ListModelEvents.ItemsReplaced, this._replacedItemsInRange, this);
- this._itemToElement = new Map();
- this._selectedIndex = -1;
- this._selectedItem = null;
+ this.model = model;
+ this.model.addEventListener(ListModelEvents.ItemsReplaced, this.replacedItemsInRange, this);
+ this.itemToElement = new Map();
+ this.selectedIndexInternal = -1;
+ this.selectedItemInternal = null;
this.element.tabIndex = -1;
- this.element.addEventListener('click', this._onClick.bind(this), false);
- this.element.addEventListener('keydown', this._onKeyDown.bind(this), false);
+ this.element.addEventListener('click', this.onClick.bind(this), false);
+ this.element.addEventListener('keydown', this.onKeyDown.bind(this), false);
ARIAUtils.markAsListBox(this.element);
- this._delegate = delegate;
- this._mode = mode || ListMode.EqualHeightItems;
- this._fixedHeight = 0;
- this._variableOffsets = new Int32Array(0);
- this._clearContents();
+ this.delegate = delegate;
+ this.mode = mode || ListMode.EqualHeightItems;
+ this.fixedHeight = 0;
+ this.variableOffsets = new Int32Array(0);
+ this.clearContents();
- if (this._mode !== ListMode.NonViewport) {
+ if (this.mode !== ListMode.NonViewport) {
this.element.addEventListener('scroll', () => {
- this._updateViewport(this.element.scrollTop, this.element.offsetHeight);
+ this.updateViewport(this.element.scrollTop, this.element.offsetHeight);
}, false);
}
}
setModel(model: ListModel<T>): void {
- this._itemToElement.clear();
- const length = this._model.length;
- this._model.removeEventListener(ListModelEvents.ItemsReplaced, this._replacedItemsInRange, this);
- this._model = model;
- this._model.addEventListener(ListModelEvents.ItemsReplaced, this._replacedItemsInRange, this);
+ this.itemToElement.clear();
+ const length = this.model.length;
+ this.model.removeEventListener(ListModelEvents.ItemsReplaced, this.replacedItemsInRange, this);
+ this.model = model;
+ this.model.addEventListener(ListModelEvents.ItemsReplaced, this.replacedItemsInRange, this);
this.invalidateRange(0, length);
}
- _replacedItemsInRange(event: Common.EventTarget.EventTargetEvent): void {
+ private replacedItemsInRange(event: Common.EventTarget.EventTargetEvent): void {
const data = (event.data as {
index: number,
removed: Array<T>,
@@ -106,29 +104,29 @@
const to = from + data.removed.length;
const keepSelectedIndex = data.keepSelectedIndex;
- const oldSelectedItem = this._selectedItem;
- const oldSelectedElement = oldSelectedItem ? (this._itemToElement.get(oldSelectedItem) || null) : null;
+ const oldSelectedItem = this.selectedItemInternal;
+ const oldSelectedElement = oldSelectedItem ? (this.itemToElement.get(oldSelectedItem) || null) : null;
for (let i = 0; i < data.removed.length; i++) {
- this._itemToElement.delete(data.removed[i]);
+ this.itemToElement.delete(data.removed[i]);
}
- this._invalidate(from, to, data.inserted);
+ this.invalidate(from, to, data.inserted);
- if (this._selectedIndex >= to) {
- this._selectedIndex += data.inserted - (to - from);
- this._selectedItem = this._model.at(this._selectedIndex);
- } else if (this._selectedIndex >= from) {
+ if (this.selectedIndexInternal >= to) {
+ this.selectedIndexInternal += data.inserted - (to - from);
+ this.selectedItemInternal = this.model.at(this.selectedIndexInternal);
+ } else if (this.selectedIndexInternal >= from) {
const selectableIndex = keepSelectedIndex ? from : from + data.inserted;
- let index = this._findFirstSelectable(selectableIndex, +1, false);
+ let index = this.findFirstSelectable(selectableIndex, +1, false);
if (index === -1) {
const alternativeSelectableIndex = keepSelectedIndex ? from : from - 1;
- index = this._findFirstSelectable(alternativeSelectableIndex, -1, false);
+ index = this.findFirstSelectable(alternativeSelectableIndex, -1, false);
}
- this._select(index, oldSelectedItem, oldSelectedElement);
+ this.select(index, oldSelectedItem, oldSelectedElement);
}
}
refreshItem(item: T): void {
- const index = this._model.indexOf(item);
+ const index = this.model.indexOf(item);
if (index === -1) {
console.error('Item to refresh is not present');
return;
@@ -137,47 +135,47 @@
}
refreshItemByIndex(index: number): void {
- const item = this._model.at(index);
- this._itemToElement.delete(item);
+ const item = this.model.at(index);
+ this.itemToElement.delete(item);
this.invalidateRange(index, index + 1);
- if (this._selectedIndex !== -1) {
- this._select(this._selectedIndex, null, null);
+ if (this.selectedIndexInternal !== -1) {
+ this.select(this.selectedIndexInternal, null, null);
}
}
refreshAllItems(): void {
- this._itemToElement.clear();
- this.invalidateRange(0, this._model.length);
- if (this._selectedIndex !== -1) {
- this._select(this._selectedIndex, null, null);
+ this.itemToElement.clear();
+ this.invalidateRange(0, this.model.length);
+ if (this.selectedIndexInternal !== -1) {
+ this.select(this.selectedIndexInternal, null, null);
}
}
invalidateRange(from: number, to: number): void {
- this._invalidate(from, to, to - from);
+ this.invalidate(from, to, to - from);
}
viewportResized(): void {
- if (this._mode === ListMode.NonViewport) {
+ if (this.mode === ListMode.NonViewport) {
return;
}
// TODO(dgozman): try to keep visible scrollTop the same.
const scrollTop = this.element.scrollTop;
const viewportHeight = this.element.offsetHeight;
- this._clearViewport();
- this._updateViewport(
- Platform.NumberUtilities.clamp(scrollTop, 0, this._totalHeight() - viewportHeight), viewportHeight);
+ this.clearViewport();
+ this.updateViewport(
+ Platform.NumberUtilities.clamp(scrollTop, 0, this.totalHeight() - viewportHeight), viewportHeight);
}
invalidateItemHeight(): void {
- if (this._mode !== ListMode.EqualHeightItems) {
+ if (this.mode !== ListMode.EqualHeightItems) {
console.error('Only supported in equal height items mode');
return;
}
- this._fixedHeight = 0;
- if (this._model.length) {
- this._itemToElement.clear();
- this._invalidate(0, this._model.length, this._model.length);
+ this.fixedHeight = 0;
+ if (this.model.length) {
+ this.itemToElement.clear();
+ this.invalidate(0, this.model.length, this.model.length);
}
}
@@ -189,137 +187,137 @@
return null;
}
const element = (node as Element);
- const index = this._model.findIndex(item => this._itemToElement.get(item) === element);
- return index !== -1 ? this._model.at(index) : null;
+ const index = this.model.findIndex(item => this.itemToElement.get(item) === element);
+ return index !== -1 ? this.model.at(index) : null;
}
scrollItemIntoView(item: T, center?: boolean): void {
- const index = this._model.indexOf(item);
+ const index = this.model.indexOf(item);
if (index === -1) {
console.error('Attempt to scroll onto missing item');
return;
}
- this._scrollIntoView(index, center);
+ this.scrollIntoView(index, center);
}
selectedItem(): T|null {
- return this._selectedItem;
+ return this.selectedItemInternal;
}
selectedIndex(): number {
- return this._selectedIndex;
+ return this.selectedIndexInternal;
}
selectItem(item: T|null, center?: boolean, dontScroll?: boolean): void {
let index = -1;
if (item !== null) {
- index = this._model.indexOf(item);
+ index = this.model.indexOf(item);
if (index === -1) {
console.error('Attempt to select missing item');
return;
}
- if (!this._delegate.isItemSelectable(item)) {
+ if (!this.delegate.isItemSelectable(item)) {
console.error('Attempt to select non-selectable item');
return;
}
}
// Scrolling the item before selection ensures it is in the DOM.
if (index !== -1 && !dontScroll) {
- this._scrollIntoView(index, center);
+ this.scrollIntoView(index, center);
}
- if (this._selectedIndex !== index) {
- this._select(index);
+ if (this.selectedIndexInternal !== index) {
+ this.select(index);
}
}
selectPreviousItem(canWrap?: boolean, center?: boolean): boolean {
- if (this._selectedIndex === -1 && !canWrap) {
+ if (this.selectedIndexInternal === -1 && !canWrap) {
return false;
}
- let index: number = this._selectedIndex === -1 ? this._model.length - 1 : this._selectedIndex - 1;
- index = this._findFirstSelectable(index, -1, Boolean(canWrap));
+ let index: number = this.selectedIndexInternal === -1 ? this.model.length - 1 : this.selectedIndexInternal - 1;
+ index = this.findFirstSelectable(index, -1, Boolean(canWrap));
if (index !== -1) {
- this._scrollIntoView(index, center);
- this._select(index);
+ this.scrollIntoView(index, center);
+ this.select(index);
return true;
}
return false;
}
selectNextItem(canWrap?: boolean, center?: boolean): boolean {
- if (this._selectedIndex === -1 && !canWrap) {
+ if (this.selectedIndexInternal === -1 && !canWrap) {
return false;
}
- let index: number = this._selectedIndex === -1 ? 0 : this._selectedIndex + 1;
- index = this._findFirstSelectable(index, +1, Boolean(canWrap));
+ let index: number = this.selectedIndexInternal === -1 ? 0 : this.selectedIndexInternal + 1;
+ index = this.findFirstSelectable(index, +1, Boolean(canWrap));
if (index !== -1) {
- this._scrollIntoView(index, center);
- this._select(index);
+ this.scrollIntoView(index, center);
+ this.select(index);
return true;
}
return false;
}
selectItemPreviousPage(center?: boolean): boolean {
- if (this._mode === ListMode.NonViewport) {
+ if (this.mode === ListMode.NonViewport) {
return false;
}
- let index: number = this._selectedIndex === -1 ? this._model.length - 1 : this._selectedIndex;
- index = this._findPageSelectable(index, -1);
+ let index: number = this.selectedIndexInternal === -1 ? this.model.length - 1 : this.selectedIndexInternal;
+ index = this.findPageSelectable(index, -1);
if (index !== -1) {
- this._scrollIntoView(index, center);
- this._select(index);
+ this.scrollIntoView(index, center);
+ this.select(index);
return true;
}
return false;
}
selectItemNextPage(center?: boolean): boolean {
- if (this._mode === ListMode.NonViewport) {
+ if (this.mode === ListMode.NonViewport) {
return false;
}
- let index: number = this._selectedIndex === -1 ? 0 : this._selectedIndex;
- index = this._findPageSelectable(index, +1);
+ let index: number = this.selectedIndexInternal === -1 ? 0 : this.selectedIndexInternal;
+ index = this.findPageSelectable(index, +1);
if (index !== -1) {
- this._scrollIntoView(index, center);
- this._select(index);
+ this.scrollIntoView(index, center);
+ this.select(index);
return true;
}
return false;
}
- _scrollIntoView(index: number, center?: boolean): void {
- if (this._mode === ListMode.NonViewport) {
- this._elementAtIndex(index).scrollIntoViewIfNeeded(Boolean(center));
+ private scrollIntoView(index: number, center?: boolean): void {
+ if (this.mode === ListMode.NonViewport) {
+ this.elementAtIndex(index).scrollIntoViewIfNeeded(Boolean(center));
return;
}
- const top = this._offsetAtIndex(index);
- const bottom = this._offsetAtIndex(index + 1);
+ const top = this.offsetAtIndex(index);
+ const bottom = this.offsetAtIndex(index + 1);
const viewportHeight = this.element.offsetHeight;
if (center) {
const scrollTo = (top + bottom) / 2 - viewportHeight / 2;
- this._updateViewport(
- Platform.NumberUtilities.clamp(scrollTo, 0, this._totalHeight() - viewportHeight), viewportHeight);
+ this.updateViewport(
+ Platform.NumberUtilities.clamp(scrollTo, 0, this.totalHeight() - viewportHeight), viewportHeight);
return;
}
const scrollTop = this.element.scrollTop;
if (top < scrollTop) {
- this._updateViewport(top, viewportHeight);
+ this.updateViewport(top, viewportHeight);
} else if (bottom > scrollTop + viewportHeight) {
- this._updateViewport(bottom - viewportHeight, viewportHeight);
+ this.updateViewport(bottom - viewportHeight, viewportHeight);
}
}
- _onClick(event: Event): void {
+ private onClick(event: Event): void {
const item = this.itemForNode((event.target as Node | null));
- if (item && this._delegate.isItemSelectable(item)) {
+ if (item && this.delegate.isItemSelectable(item)) {
this.selectItem(item);
}
}
- _onKeyDown(ev: Event): void {
+ private onKeyDown(ev: Event): void {
const event = (ev as KeyboardEvent);
let selected = false;
switch (event.key) {
@@ -341,95 +339,95 @@
}
}
- _totalHeight(): number {
- return this._offsetAtIndex(this._model.length);
+ private totalHeight(): number {
+ return this.offsetAtIndex(this.model.length);
}
- _indexAtOffset(offset: number): number {
- if (this._mode === ListMode.NonViewport) {
+ private indexAtOffset(offset: number): number {
+ if (this.mode === ListMode.NonViewport) {
throw 'There should be no offset conversions in non-viewport mode';
}
- if (!this._model.length || offset < 0) {
+ if (!this.model.length || offset < 0) {
return 0;
}
- if (this._mode === ListMode.VariousHeightItems) {
+ if (this.mode === ListMode.VariousHeightItems) {
return Math.min(
- this._model.length - 1,
+ this.model.length - 1,
Platform.ArrayUtilities.lowerBound(
- this._variableOffsets, offset, Platform.ArrayUtilities.DEFAULT_COMPARATOR, 0, this._model.length));
+ this.variableOffsets, offset, Platform.ArrayUtilities.DEFAULT_COMPARATOR, 0, this.model.length));
}
- if (!this._fixedHeight) {
- this._measureHeight();
+ if (!this.fixedHeight) {
+ this.measureHeight();
}
- return Math.min(this._model.length - 1, Math.floor(offset / this._fixedHeight));
+ return Math.min(this.model.length - 1, Math.floor(offset / this.fixedHeight));
}
- _elementAtIndex(index: number): Element {
- const item = this._model.at(index);
- let element = this._itemToElement.get(item);
+ private elementAtIndex(index: number): Element {
+ const item = this.model.at(index);
+ let element = this.itemToElement.get(item);
if (!element) {
- element = this._delegate.createElementForItem(item);
- this._itemToElement.set(item, element);
- this._updateElementARIA(element, index);
+ element = this.delegate.createElementForItem(item);
+ this.itemToElement.set(item, element);
+ this.updateElementARIA(element, index);
}
return element;
}
- _refreshARIA(): void {
- for (let index = this._firstIndex; index <= this._lastIndex; index++) {
- const item = this._model.at(index);
- const element = this._itemToElement.get(item);
+ private refreshARIA(): void {
+ for (let index = this.firstIndex; index <= this.lastIndex; index++) {
+ const item = this.model.at(index);
+ const element = this.itemToElement.get(item);
if (element) {
- this._updateElementARIA(element, index);
+ this.updateElementARIA(element, index);
}
}
}
- _updateElementARIA(element: Element, index: number): void {
+ private updateElementARIA(element: Element, index: number): void {
if (!ARIAUtils.hasRole(element)) {
ARIAUtils.markAsOption(element);
}
- ARIAUtils.setSetSize(element, this._model.length);
+ ARIAUtils.setSetSize(element, this.model.length);
ARIAUtils.setPositionInSet(element, index + 1);
}
- _offsetAtIndex(index: number): number {
- if (this._mode === ListMode.NonViewport) {
+ private offsetAtIndex(index: number): number {
+ if (this.mode === ListMode.NonViewport) {
throw new Error('There should be no offset conversions in non-viewport mode');
}
- if (!this._model.length) {
+ if (!this.model.length) {
return 0;
}
- if (this._mode === ListMode.VariousHeightItems) {
- return this._variableOffsets[index];
+ if (this.mode === ListMode.VariousHeightItems) {
+ return this.variableOffsets[index];
}
- if (!this._fixedHeight) {
- this._measureHeight();
+ if (!this.fixedHeight) {
+ this.measureHeight();
}
- return index * this._fixedHeight;
+ return index * this.fixedHeight;
}
- _measureHeight(): void {
- this._fixedHeight = this._delegate.heightForItem(this._model.at(0));
- if (!this._fixedHeight) {
- this._fixedHeight = measurePreferredSize(this._elementAtIndex(0), this.element).height;
+ private measureHeight(): void {
+ this.fixedHeight = this.delegate.heightForItem(this.model.at(0));
+ if (!this.fixedHeight) {
+ this.fixedHeight = measurePreferredSize(this.elementAtIndex(0), this.element).height;
}
}
- _select(index: number, oldItem?: T|null, oldElement?: Element|null): void {
+ private select(index: number, oldItem?: T|null, oldElement?: Element|null): void {
if (oldItem === undefined) {
- oldItem = this._selectedItem;
+ oldItem = this.selectedItemInternal;
}
if (oldElement === undefined) {
- oldElement = this._itemToElement.get((oldItem as T)) || null;
+ oldElement = this.itemToElement.get((oldItem as T)) || null;
}
- this._selectedIndex = index;
- this._selectedItem = index === -1 ? null : this._model.at(index);
- const newItem = this._selectedItem;
- const newElement = this._selectedIndex !== -1 ? this._elementAtIndex(index) : null;
- this._delegate.selectedItemChanged(
+ this.selectedIndexInternal = index;
+ this.selectedItemInternal = index === -1 ? null : this.model.at(index);
+ const newItem = this.selectedItemInternal;
+ const newElement = this.selectedIndexInternal !== -1 ? this.elementAtIndex(index) : null;
+ this.delegate.selectedItemChanged(
oldItem, newItem, (oldElement as HTMLElement | null), (newElement as HTMLElement | null));
- if (!this._delegate.updateSelectedItemARIA((oldElement as Element | null), newElement)) {
+ if (!this.delegate.updateSelectedItemARIA((oldElement as Element | null), newElement)) {
if (oldElement) {
ARIAUtils.setSelected(oldElement, false);
}
@@ -440,8 +438,8 @@
}
}
- _findFirstSelectable(index: number, direction: number, canWrap: boolean): number {
- const length = this._model.length;
+ private findFirstSelectable(index: number, direction: number, canWrap: boolean): number {
+ const length = this.model.length;
if (!length) {
return -1;
}
@@ -452,7 +450,7 @@
}
index = (index + length) % length;
}
- if (this._delegate.isItemSelectable(this._model.at(index))) {
+ if (this.delegate.isItemSelectable(this.model.at(index))) {
return index;
}
index += direction;
@@ -460,14 +458,14 @@
return -1;
}
- _findPageSelectable(index: number, direction: number): number {
+ private findPageSelectable(index: number, direction: number): number {
let lastSelectable = -1;
- const startOffset = this._offsetAtIndex(index);
+ const startOffset = this.offsetAtIndex(index);
// Compensate for zoom rounding errors with -1.
const viewportHeight = this.element.offsetHeight - 1;
- while (index >= 0 && index < this._model.length) {
- if (this._delegate.isItemSelectable(this._model.at(index))) {
- if (Math.abs(this._offsetAtIndex(index) - startOffset) >= viewportHeight) {
+ while (index >= 0 && index < this.model.length) {
+ if (this.delegate.isItemSelectable(this.model.at(index))) {
+ if (Math.abs(this.offsetAtIndex(index) - startOffset) >= viewportHeight) {
return index;
}
lastSelectable = index;
@@ -477,71 +475,71 @@
return lastSelectable;
}
- _reallocateVariableOffsets(length: number, copyTo: number): void {
- if (this._variableOffsets.length < length) {
- const variableOffsets = new Int32Array(Math.max(length, this._variableOffsets.length * 2));
- variableOffsets.set(this._variableOffsets.slice(0, copyTo), 0);
- this._variableOffsets = variableOffsets;
- } else if (this._variableOffsets.length >= 2 * length) {
+ private reallocateVariableOffsets(length: number, copyTo: number): void {
+ if (this.variableOffsets.length < length) {
+ const variableOffsets = new Int32Array(Math.max(length, this.variableOffsets.length * 2));
+ variableOffsets.set(this.variableOffsets.slice(0, copyTo), 0);
+ this.variableOffsets = variableOffsets;
+ } else if (this.variableOffsets.length >= 2 * length) {
const variableOffsets = new Int32Array(length);
- variableOffsets.set(this._variableOffsets.slice(0, copyTo), 0);
- this._variableOffsets = variableOffsets;
+ variableOffsets.set(this.variableOffsets.slice(0, copyTo), 0);
+ this.variableOffsets = variableOffsets;
}
}
- _invalidate(from: number, to: number, inserted: number): void {
- if (this._mode === ListMode.NonViewport) {
- this._invalidateNonViewportMode(from, to - from, inserted);
+ private invalidate(from: number, to: number, inserted: number): void {
+ if (this.mode === ListMode.NonViewport) {
+ this.invalidateNonViewportMode(from, to - from, inserted);
return;
}
- if (this._mode === ListMode.VariousHeightItems) {
- this._reallocateVariableOffsets(this._model.length + 1, from + 1);
- for (let i = from + 1; i <= this._model.length; i++) {
- this._variableOffsets[i] = this._variableOffsets[i - 1] + this._delegate.heightForItem(this._model.at(i - 1));
+ if (this.mode === ListMode.VariousHeightItems) {
+ this.reallocateVariableOffsets(this.model.length + 1, from + 1);
+ for (let i = from + 1; i <= this.model.length; i++) {
+ this.variableOffsets[i] = this.variableOffsets[i - 1] + this.delegate.heightForItem(this.model.at(i - 1));
}
}
const viewportHeight = this.element.offsetHeight;
- const totalHeight = this._totalHeight();
+ const totalHeight = this.totalHeight();
const scrollTop = this.element.scrollTop;
- if (this._renderedHeight < viewportHeight || totalHeight < viewportHeight) {
- this._clearViewport();
- this._updateViewport(Platform.NumberUtilities.clamp(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);
+ if (this.renderedHeight < viewportHeight || totalHeight < viewportHeight) {
+ this.clearViewport();
+ this.updateViewport(Platform.NumberUtilities.clamp(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);
return;
}
- const heightDelta = totalHeight - this._renderedHeight;
- if (to <= this._firstIndex) {
- const topHeight = this._topHeight + heightDelta;
- this._topElement.style.height = topHeight + 'px';
+ const heightDelta = totalHeight - this.renderedHeight;
+ if (to <= this.firstIndex) {
+ const topHeight = this.topHeight + heightDelta;
+ this.topElement.style.height = topHeight + 'px';
this.element.scrollTop = scrollTop + heightDelta;
- this._topHeight = topHeight;
- this._renderedHeight = totalHeight;
+ this.topHeight = topHeight;
+ this.renderedHeight = totalHeight;
const indexDelta = inserted - (to - from);
- this._firstIndex += indexDelta;
- this._lastIndex += indexDelta;
+ this.firstIndex += indexDelta;
+ this.lastIndex += indexDelta;
return;
}
- if (from >= this._lastIndex) {
- const bottomHeight = this._bottomHeight + heightDelta;
- this._bottomElement.style.height = bottomHeight + 'px';
- this._bottomHeight = bottomHeight;
- this._renderedHeight = totalHeight;
+ if (from >= this.lastIndex) {
+ const bottomHeight = this.bottomHeight + heightDelta;
+ this.bottomElement.style.height = bottomHeight + 'px';
+ this.bottomHeight = bottomHeight;
+ this.renderedHeight = totalHeight;
return;
}
// TODO(dgozman): try to keep visible scrollTop the same
// when invalidating after firstIndex but before first visible element.
- this._clearViewport();
- this._updateViewport(Platform.NumberUtilities.clamp(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);
- this._refreshARIA();
+ this.clearViewport();
+ this.updateViewport(Platform.NumberUtilities.clamp(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);
+ this.refreshARIA();
}
- _invalidateNonViewportMode(start: number, remove: number, add: number): void {
- let startElement: HTMLElement = this._topElement;
+ private invalidateNonViewportMode(start: number, remove: number, add: number): void {
+ let startElement: HTMLElement = this.topElement;
for (let index = 0; index < start; index++) {
startElement = (startElement.nextElementSibling as HTMLElement);
}
@@ -549,80 +547,80 @@
(startElement.nextElementSibling as HTMLElement).remove();
}
while (add--) {
- this.element.insertBefore(this._elementAtIndex(start + add), startElement.nextElementSibling);
+ this.element.insertBefore(this.elementAtIndex(start + add), startElement.nextElementSibling);
}
}
- _clearViewport(): void {
- if (this._mode === ListMode.NonViewport) {
+ private clearViewport(): void {
+ if (this.mode === ListMode.NonViewport) {
console.error('There should be no viewport updates in non-viewport mode');
return;
}
- this._firstIndex = 0;
- this._lastIndex = 0;
- this._renderedHeight = 0;
- this._topHeight = 0;
- this._bottomHeight = 0;
- this._clearContents();
+ this.firstIndex = 0;
+ this.lastIndex = 0;
+ this.renderedHeight = 0;
+ this.topHeight = 0;
+ this.bottomHeight = 0;
+ this.clearContents();
}
- _clearContents(): void {
+ private clearContents(): void {
// Note: this method should not force layout. Be careful.
- this._topElement.style.height = '0';
- this._bottomElement.style.height = '0';
+ this.topElement.style.height = '0';
+ this.bottomElement.style.height = '0';
this.element.removeChildren();
- this.element.appendChild(this._topElement);
- this.element.appendChild(this._bottomElement);
+ this.element.appendChild(this.topElement);
+ this.element.appendChild(this.bottomElement);
}
- _updateViewport(scrollTop: number, viewportHeight: number): void {
+ private updateViewport(scrollTop: number, viewportHeight: number): void {
// Note: this method should not force layout. Be careful.
- if (this._mode === ListMode.NonViewport) {
+ if (this.mode === ListMode.NonViewport) {
console.error('There should be no viewport updates in non-viewport mode');
return;
}
- const totalHeight = this._totalHeight();
+ const totalHeight = this.totalHeight();
if (!totalHeight) {
- this._firstIndex = 0;
- this._lastIndex = 0;
- this._topHeight = 0;
- this._bottomHeight = 0;
- this._renderedHeight = 0;
- this._topElement.style.height = '0';
- this._bottomElement.style.height = '0';
+ this.firstIndex = 0;
+ this.lastIndex = 0;
+ this.topHeight = 0;
+ this.bottomHeight = 0;
+ this.renderedHeight = 0;
+ this.topElement.style.height = '0';
+ this.bottomElement.style.height = '0';
return;
}
- const firstIndex = this._indexAtOffset(scrollTop - viewportHeight);
- const lastIndex = this._indexAtOffset(scrollTop + 2 * viewportHeight) + 1;
+ const firstIndex = this.indexAtOffset(scrollTop - viewportHeight);
+ const lastIndex = this.indexAtOffset(scrollTop + 2 * viewportHeight) + 1;
- while (this._firstIndex < Math.min(firstIndex, this._lastIndex)) {
- this._elementAtIndex(this._firstIndex).remove();
- this._firstIndex++;
+ while (this.firstIndex < Math.min(firstIndex, this.lastIndex)) {
+ this.elementAtIndex(this.firstIndex).remove();
+ this.firstIndex++;
}
- while (this._lastIndex > Math.max(lastIndex, this._firstIndex)) {
- this._elementAtIndex(this._lastIndex - 1).remove();
- this._lastIndex--;
+ while (this.lastIndex > Math.max(lastIndex, this.firstIndex)) {
+ this.elementAtIndex(this.lastIndex - 1).remove();
+ this.lastIndex--;
}
- this._firstIndex = Math.min(this._firstIndex, lastIndex);
- this._lastIndex = Math.max(this._lastIndex, firstIndex);
- for (let index = this._firstIndex - 1; index >= firstIndex; index--) {
- const element = this._elementAtIndex(index);
- this.element.insertBefore(element, this._topElement.nextSibling);
+ this.firstIndex = Math.min(this.firstIndex, lastIndex);
+ this.lastIndex = Math.max(this.lastIndex, firstIndex);
+ for (let index = this.firstIndex - 1; index >= firstIndex; index--) {
+ const element = this.elementAtIndex(index);
+ this.element.insertBefore(element, this.topElement.nextSibling);
}
- for (let index = this._lastIndex; index < lastIndex; index++) {
- const element = this._elementAtIndex(index);
- this.element.insertBefore(element, this._bottomElement);
+ for (let index = this.lastIndex; index < lastIndex; index++) {
+ const element = this.elementAtIndex(index);
+ this.element.insertBefore(element, this.bottomElement);
}
- this._firstIndex = firstIndex;
- this._lastIndex = lastIndex;
- this._topHeight = this._offsetAtIndex(firstIndex);
- this._topElement.style.height = this._topHeight + 'px';
- this._bottomHeight = totalHeight - this._offsetAtIndex(lastIndex);
- this._bottomElement.style.height = this._bottomHeight + 'px';
- this._renderedHeight = totalHeight;
+ this.firstIndex = firstIndex;
+ this.lastIndex = lastIndex;
+ this.topHeight = this.offsetAtIndex(firstIndex);
+ this.topElement.style.height = this.topHeight + 'px';
+ this.bottomHeight = totalHeight - this.offsetAtIndex(lastIndex);
+ this.bottomElement.style.height = this.bottomHeight + 'px';
+ this.renderedHeight = totalHeight;
this.element.scrollTop = scrollTop;
}
}
diff --git a/front_end/ui/legacy/ListModel.ts b/front_end/ui/legacy/ListModel.ts
index c89e20f..8775b38 100644
--- a/front_end/ui/legacy/ListModel.ts
+++ b/front_end/ui/legacy/ListModel.ts
@@ -2,110 +2,108 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Platform from '../../core/platform/platform.js';
export class ListModel<T> extends Common.ObjectWrapper.ObjectWrapper implements Iterable<T> {
- _items: T[];
+ private items: T[];
constructor(items?: T[]) {
super();
- this._items = items || [];
+ this.items = items || [];
}
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[Symbol.iterator](): Iterator<T, any, undefined> {
- return this._items[Symbol.iterator]();
+ return this.items[Symbol.iterator]();
}
get length(): number {
- return this._items.length;
+ return this.items.length;
}
at(index: number): T {
- return this._items[index];
+ return this.items[index];
}
every(callback: (arg0: T) => boolean): boolean {
- return this._items.every(callback);
+ return this.items.every(callback);
}
filter(callback: (arg0: T) => boolean): T[] {
- return this._items.filter(callback);
+ return this.items.filter(callback);
}
find(callback: (arg0: T) => boolean): T|undefined {
- return this._items.find(callback);
+ return this.items.find(callback);
}
findIndex(callback: (arg0: T) => boolean): number {
- return this._items.findIndex(callback);
+ return this.items.findIndex(callback);
}
indexOf(value: T, fromIndex?: number): number {
- return this._items.indexOf(value, fromIndex);
+ return this.items.indexOf(value, fromIndex);
}
insert(index: number, value: T): void {
- this._items.splice(index, 0, value);
- this._replaced(index, [], 1);
+ this.items.splice(index, 0, value);
+ this.replaced(index, [], 1);
}
insertWithComparator(value: T, comparator: (arg0: T, arg1: T) => number): void {
- this.insert(Platform.ArrayUtilities.lowerBound(this._items, value, comparator), value);
+ this.insert(Platform.ArrayUtilities.lowerBound(this.items, value, comparator), value);
}
join(separator?: string): string {
- return this._items.join(separator);
+ return this.items.join(separator);
}
remove(index: number): T {
- const result = this._items[index];
- this._items.splice(index, 1);
- this._replaced(index, [result], 0);
+ const result = this.items[index];
+ this.items.splice(index, 1);
+ this.replaced(index, [result], 0);
return result;
}
replace(index: number, value: T, keepSelectedIndex?: boolean): T {
- const oldValue = this._items[index];
- this._items[index] = value;
- this._replaced(index, [oldValue], 1, keepSelectedIndex);
+ const oldValue = this.items[index];
+ this.items[index] = value;
+ this.replaced(index, [oldValue], 1, keepSelectedIndex);
return oldValue;
}
replaceRange(from: number, to: number, items: T[]): T[] {
let removed;
if (items.length < 10000) {
- removed = this._items.splice(from, to - from, ...items);
+ removed = this.items.splice(from, to - from, ...items);
} else {
- removed = this._items.slice(from, to);
+ removed = this.items.slice(from, to);
// Splice may fail with too many arguments.
- const before = this._items.slice(0, from);
- const after = this._items.slice(to);
- this._items = [...before, ...items, ...after];
+ const before = this.items.slice(0, from);
+ const after = this.items.slice(to);
+ this.items = [...before, ...items, ...after];
}
- this._replaced(from, removed, items.length);
+ this.replaced(from, removed, items.length);
return removed;
}
replaceAll(items: T[]): T[] {
- const oldItems = this._items.slice();
- this._items = items;
- this._replaced(0, oldItems, items.length);
+ const oldItems = this.items.slice();
+ this.items = items;
+ this.replaced(0, oldItems, items.length);
return oldItems;
}
slice(from?: number, to?: number): T[] {
- return this._items.slice(from, to);
+ return this.items.slice(from, to);
}
some(callback: (arg0: T) => boolean): boolean {
- return this._items.some(callback);
+ return this.items.some(callback);
}
- _replaced(index: number, removed: T[], inserted: number, keepSelectedIndex?: boolean): void {
+ private replaced(index: number, removed: T[], inserted: number, keepSelectedIndex?: boolean): void {
this.dispatchEventToListeners(Events.ItemsReplaced, {index, removed, inserted, keepSelectedIndex});
}
}
diff --git a/front_end/ui/legacy/ListWidget.ts b/front_end/ui/legacy/ListWidget.ts
index 6ef1354..0240b06 100644
--- a/front_end/ui/legacy/ListWidget.ts
+++ b/front_end/ui/legacy/ListWidget.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as i18n from '../../core/i18n/i18n.js';
import * as ARIAUtils from './ARIAUtils.js';
@@ -38,80 +36,80 @@
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class ListWidget<T> extends VBox {
- _delegate: Delegate<T>;
- _list: HTMLElement;
- _lastSeparator: boolean;
- _focusRestorer: ElementFocusRestorer|null;
- _items: T[];
- _editable: boolean[];
- _elements: Element[];
- _editor: Editor<T>|null;
- _editItem: T|null;
- _editElement: Element|null;
- _emptyPlaceholder: Element|null;
+ private delegate: Delegate<T>;
+ private readonly list: HTMLElement;
+ private lastSeparator: boolean;
+ private focusRestorer: ElementFocusRestorer|null;
+ private items: T[];
+ private editable: boolean[];
+ private elements: Element[];
+ private editor: Editor<T>|null;
+ private editItem: T|null;
+ private editElement: Element|null;
+ private emptyPlaceholder: Element|null;
constructor(delegate: Delegate<T>, delegatesFocus: boolean|undefined = true) {
super(true, delegatesFocus);
this.registerRequiredCSS('ui/legacy/listWidget.css');
- this._delegate = delegate;
+ this.delegate = delegate;
- this._list = this.contentElement.createChild('div', 'list');
+ this.list = this.contentElement.createChild('div', 'list');
- this._lastSeparator = false;
- this._focusRestorer = null;
- this._items = [];
- this._editable = [];
- this._elements = [];
- this._editor = null;
- this._editItem = null;
- this._editElement = null;
+ this.lastSeparator = false;
+ this.focusRestorer = null;
+ this.items = [];
+ this.editable = [];
+ this.elements = [];
+ this.editor = null;
+ this.editItem = null;
+ this.editElement = null;
- this._emptyPlaceholder = null;
+ this.emptyPlaceholder = null;
- this._updatePlaceholder();
+ this.updatePlaceholder();
}
clear(): void {
- this._items = [];
- this._editable = [];
- this._elements = [];
- this._lastSeparator = false;
- this._list.removeChildren();
- this._updatePlaceholder();
- this._stopEditing();
+ this.items = [];
+ this.editable = [];
+ this.elements = [];
+ this.lastSeparator = false;
+ this.list.removeChildren();
+ this.updatePlaceholder();
+ this.stopEditing();
}
appendItem(item: T, editable: boolean): void {
- if (this._lastSeparator && this._items.length) {
+ if (this.lastSeparator && this.items.length) {
const element = document.createElement('div');
element.classList.add('list-separator');
- this._list.appendChild(element);
+ this.list.appendChild(element);
}
- this._lastSeparator = false;
+ this.lastSeparator = false;
- this._items.push(item);
- this._editable.push(editable);
+ this.items.push(item);
+ this.editable.push(editable);
- const element = this._list.createChild('div', 'list-item');
- element.appendChild(this._delegate.renderItem(item, editable));
+ const element = this.list.createChild('div', 'list-item');
+ element.appendChild(this.delegate.renderItem(item, editable));
if (editable) {
element.classList.add('editable');
element.tabIndex = 0;
- element.appendChild(this._createControls(item, element));
+ element.appendChild(this.createControls(item, element));
}
- this._elements.push(element);
- this._updatePlaceholder();
+ this.elements.push(element);
+ this.updatePlaceholder();
}
appendSeparator(): void {
- this._lastSeparator = true;
+ this.lastSeparator = true;
}
removeItem(index: number): void {
- if (this._editItem === this._items[index]) {
- this._stopEditing();
+ if (this.editItem === this.items[index]) {
+ this.stopEditing();
}
- const element = this._elements[index];
+ const element = this.elements[index];
const previous = element.previousElementSibling;
const previousIsSeparator = previous && previous.classList.contains('list-separator');
@@ -127,22 +125,22 @@
}
element.remove();
- this._elements.splice(index, 1);
- this._items.splice(index, 1);
- this._editable.splice(index, 1);
- this._updatePlaceholder();
+ this.elements.splice(index, 1);
+ this.items.splice(index, 1);
+ this.editable.splice(index, 1);
+ this.updatePlaceholder();
}
addNewItem(index: number, item: T): void {
- this._startEditing(item, null, this._elements[index] || null);
+ this.startEditing(item, null, this.elements[index] || null);
}
setEmptyPlaceholder(element: Element|null): void {
- this._emptyPlaceholder = element;
- this._updatePlaceholder();
+ this.emptyPlaceholder = element;
+ this.updatePlaceholder();
}
- _createControls(item: T, element: Element): Element {
+ private createControls(item: T, element: Element): Element {
const controls = document.createElement('div');
controls.classList.add('controls-container');
controls.classList.add('fill');
@@ -163,85 +161,85 @@
return controls;
function onEditClicked(this: ListWidget<T>): void {
- const index = this._elements.indexOf(element);
- const insertionPoint = this._elements[index + 1] || null;
- this._startEditing(item, element, insertionPoint);
+ const index = this.elements.indexOf(element);
+ const insertionPoint = this.elements[index + 1] || null;
+ this.startEditing(item, element, insertionPoint);
}
function onRemoveClicked(this: ListWidget<T>): void {
- const index = this._elements.indexOf(element);
+ const index = this.elements.indexOf(element);
this.element.focus();
- this._delegate.removeItemRequested(this._items[index], index);
+ this.delegate.removeItemRequested(this.items[index], index);
}
}
wasShown(): void {
super.wasShown();
- this._stopEditing();
+ this.stopEditing();
}
- _updatePlaceholder(): void {
- if (!this._emptyPlaceholder) {
+ private updatePlaceholder(): void {
+ if (!this.emptyPlaceholder) {
return;
}
- if (!this._elements.length && !this._editor) {
- this._list.appendChild(this._emptyPlaceholder);
+ if (!this.elements.length && !this.editor) {
+ this.list.appendChild(this.emptyPlaceholder);
} else {
- this._emptyPlaceholder.remove();
+ this.emptyPlaceholder.remove();
}
}
- _startEditing(item: T, element: Element|null, insertionPoint: Element|null): void {
- if (element && this._editElement === element) {
+ private startEditing(item: T, element: Element|null, insertionPoint: Element|null): void {
+ if (element && this.editElement === element) {
return;
}
- this._stopEditing();
- this._focusRestorer = new ElementFocusRestorer(this.element);
+ this.stopEditing();
+ this.focusRestorer = new ElementFocusRestorer(this.element);
- this._list.classList.add('list-editing');
- this._editItem = item;
- this._editElement = element;
+ this.list.classList.add('list-editing');
+ this.editItem = item;
+ this.editElement = element;
if (element) {
element.classList.add('hidden');
}
- const index = element ? this._elements.indexOf(element) : -1;
- this._editor = this._delegate.beginEdit(item);
- this._updatePlaceholder();
- this._list.insertBefore(this._editor.element, insertionPoint);
- this._editor.beginEdit(
+ const index = element ? this.elements.indexOf(element) : -1;
+ this.editor = this.delegate.beginEdit(item);
+ this.updatePlaceholder();
+ this.list.insertBefore(this.editor.element, insertionPoint);
+ this.editor.beginEdit(
item, index, element ? i18nString(UIStrings.saveString) : i18nString(UIStrings.addString),
- this._commitEditing.bind(this), this._stopEditing.bind(this));
+ this.commitEditing.bind(this), this.stopEditing.bind(this));
}
- _commitEditing(): void {
- const editItem = this._editItem;
- const isNew = !this._editElement;
- const editor = (this._editor as Editor<T>);
- this._stopEditing();
+ private commitEditing(): void {
+ const editItem = this.editItem;
+ const isNew = !this.editElement;
+ const editor = (this.editor as Editor<T>);
+ this.stopEditing();
if (editItem) {
- this._delegate.commitEdit(editItem, editor, isNew);
+ this.delegate.commitEdit(editItem, editor, isNew);
}
}
- _stopEditing(): void {
- this._list.classList.remove('list-editing');
- if (this._focusRestorer) {
- this._focusRestorer.restore();
+ private stopEditing(): void {
+ this.list.classList.remove('list-editing');
+ if (this.focusRestorer) {
+ this.focusRestorer.restore();
}
- if (this._editElement) {
- this._editElement.classList.remove('hidden');
+ if (this.editElement) {
+ this.editElement.classList.remove('hidden');
}
- if (this._editor && this._editor.element.parentElement) {
- this._editor.element.remove();
+ if (this.editor && this.editor.element.parentElement) {
+ this.editor.element.remove();
}
- this._editor = null;
- this._editItem = null;
- this._editElement = null;
- this._updatePlaceholder();
+ this.editor = null;
+ this.editItem = null;
+ this.editElement = null;
+ this.updatePlaceholder();
}
}
@@ -261,38 +259,38 @@
export class Editor<T> {
element: HTMLDivElement;
- _contentElement: HTMLElement;
- _commitButton: HTMLButtonElement;
- _cancelButton: HTMLButtonElement;
- _errorMessageContainer: HTMLElement;
- _controls: EditorControl[];
- _controlByName: Map<string, EditorControl>;
- _validators: ((arg0: T, arg1: number, arg2: EditorControl) => ValidatorResult)[];
- _commit: (() => void)|null;
- _cancel: (() => void)|null;
- _item: T|null;
- _index: number;
+ private readonly contentElementInternal: HTMLElement;
+ private commitButton: HTMLButtonElement;
+ private readonly cancelButton: HTMLButtonElement;
+ private errorMessageContainer: HTMLElement;
+ private readonly controls: EditorControl[];
+ private readonly controlByName: Map<string, EditorControl>;
+ private readonly validators: ((arg0: T, arg1: number, arg2: EditorControl) => ValidatorResult)[];
+ private commit: (() => void)|null;
+ private cancel: (() => void)|null;
+ private item: T|null;
+ private index: number;
constructor() {
this.element = document.createElement('div');
this.element.classList.add('editor-container');
- this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this._cancelClicked.bind(this)), false);
+ this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this.cancelClicked.bind(this)), false);
this.element.addEventListener(
- 'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this._commitClicked.bind(this)), false);
+ 'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.commitClicked.bind(this)), false);
- this._contentElement = this.element.createChild('div', 'editor-content');
+ this.contentElementInternal = this.element.createChild('div', 'editor-content');
const buttonsRow = this.element.createChild('div', 'editor-buttons');
- this._commitButton = createTextButton('', this._commitClicked.bind(this), '', true /* primary */);
- buttonsRow.appendChild(this._commitButton);
- this._cancelButton = createTextButton(
- i18nString(UIStrings.cancelString), this._cancelClicked.bind(this), '', true /* primary */, 'mousedown');
- this._cancelButton.addEventListener(
- 'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this._cancelClicked.bind(this)), false);
- buttonsRow.appendChild(this._cancelButton);
+ this.commitButton = createTextButton('', this.commitClicked.bind(this), '', true /* primary */);
+ buttonsRow.appendChild(this.commitButton);
+ this.cancelButton = createTextButton(
+ i18nString(UIStrings.cancelString), this.cancelClicked.bind(this), '', true /* primary */, 'mousedown');
+ this.cancelButton.addEventListener(
+ 'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.cancelClicked.bind(this)), false);
+ buttonsRow.appendChild(this.cancelButton);
- this._errorMessageContainer = this.element.createChild('div', 'list-widget-input-validation-error');
- ARIAUtils.markAsAlert(this._errorMessageContainer);
+ this.errorMessageContainer = this.element.createChild('div', 'list-widget-input-validation-error');
+ ARIAUtils.markAsAlert(this.errorMessageContainer);
function onKeyDown(predicate: (arg0: KeyboardEvent) => boolean, callback: () => void, event: KeyboardEvent): void {
if (predicate(event)) {
@@ -301,18 +299,18 @@
}
}
- this._controls = [];
- this._controlByName = new Map();
- this._validators = [];
+ this.controls = [];
+ this.controlByName = new Map();
+ this.validators = [];
- this._commit = null;
- this._cancel = null;
- this._item = null;
- this._index = -1;
+ this.commit = null;
+ this.cancel = null;
+ this.item = null;
+ this.index = -1;
}
contentElement(): Element {
- return this._contentElement;
+ return this.contentElementInternal;
}
createInput(
@@ -320,12 +318,12 @@
validator: (arg0: T, arg1: number, arg2: EditorControl) => ValidatorResult): HTMLInputElement {
const input = (createInput('', type) as HTMLInputElement);
input.placeholder = title;
- input.addEventListener('input', this._validateControls.bind(this, false), false);
- input.addEventListener('blur', this._validateControls.bind(this, false), false);
+ input.addEventListener('input', this.validateControls.bind(this, false), false);
+ input.addEventListener('blur', this.validateControls.bind(this, false), false);
ARIAUtils.setAccessibleName(input, title);
- this._controlByName.set(name, input);
- this._controls.push(input);
- this._validators.push(validator);
+ this.controlByName.set(name, input);
+ this.controls.push(input);
+ this.validators.push(validator);
return input;
}
@@ -343,11 +341,11 @@
Tooltip.install(select, title);
ARIAUtils.setAccessibleName(select, title);
}
- select.addEventListener('input', this._validateControls.bind(this, false), false);
- select.addEventListener('blur', this._validateControls.bind(this, false), false);
- this._controlByName.set(name, select);
- this._controls.push(select);
- this._validators.push(validator);
+ select.addEventListener('input', this.validateControls.bind(this, false), false);
+ select.addEventListener('blur', this.validateControls.bind(this, false), false);
+ this.controlByName.set(name, select);
+ this.controls.push(select);
+ this.validators.push(validator);
return select;
}
@@ -355,26 +353,26 @@
name: string, ctor: {new(): U},
validator: (arg0: T, arg1: number, arg2: EditorControl) => ValidatorResult): CustomEditorControl<S> {
const control = new ctor();
- this._controlByName.set(name, control as unknown as CustomEditorControl<string>);
- this._controls.push(control as unknown as CustomEditorControl<string>);
- this._validators.push(validator);
+ this.controlByName.set(name, control as unknown as CustomEditorControl<string>);
+ this.controls.push(control as unknown as CustomEditorControl<string>);
+ this.validators.push(validator);
return control;
}
control(name: string): EditorControl {
- const control = this._controlByName.get(name);
+ const control = this.controlByName.get(name);
if (!control) {
throw new Error(`Control with name ${name} does not exist, please verify.`);
}
return control;
}
- _validateControls(forceValid: boolean): void {
+ private validateControls(forceValid: boolean): void {
let allValid = true;
- this._errorMessageContainer.textContent = '';
- for (let index = 0; index < this._controls.length; ++index) {
- const input = this._controls[index];
- const {valid, errorMessage} = this._validators[index].call(null, (this._item as T), this._index, input);
+ this.errorMessageContainer.textContent = '';
+ for (let index = 0; index < this.controls.length; ++index) {
+ const input = this.controls[index];
+ const {valid, errorMessage} = this.validators[index].call(null, (this.item as T), this.index, input);
input.classList.toggle('error-input', !valid && !forceValid);
if (valid || forceValid) {
@@ -383,54 +381,54 @@
ARIAUtils.setInvalid(input, true);
}
- if (!forceValid && errorMessage && !this._errorMessageContainer.textContent) {
- this._errorMessageContainer.textContent = errorMessage;
+ if (!forceValid && errorMessage && !this.errorMessageContainer.textContent) {
+ this.errorMessageContainer.textContent = errorMessage;
}
allValid = allValid && valid;
}
- this._commitButton.disabled = !allValid;
+ this.commitButton.disabled = !allValid;
}
requestValidation(): void {
- this._validateControls(false);
+ this.validateControls(false);
}
beginEdit(item: T, index: number, commitButtonTitle: string, commit: () => void, cancel: () => void): void {
- this._commit = commit;
- this._cancel = cancel;
- this._item = item;
- this._index = index;
+ this.commit = commit;
+ this.cancel = cancel;
+ this.item = item;
+ this.index = index;
- this._commitButton.textContent = commitButtonTitle;
+ this.commitButton.textContent = commitButtonTitle;
this.element.scrollIntoViewIfNeeded(false);
- if (this._controls.length) {
- this._controls[0].focus();
+ if (this.controls.length) {
+ this.controls[0].focus();
}
- this._validateControls(true);
+ this.validateControls(true);
}
- _commitClicked(): void {
- if (this._commitButton.disabled) {
+ private commitClicked(): void {
+ if (this.commitButton.disabled) {
return;
}
- const commit = this._commit;
- this._commit = null;
- this._cancel = null;
- this._item = null;
- this._index = -1;
+ const commit = this.commit;
+ this.commit = null;
+ this.cancel = null;
+ this.item = null;
+ this.index = -1;
if (commit) {
commit();
}
}
- _cancelClicked(): void {
- const cancel = this._cancel;
- this._commit = null;
- this._cancel = null;
- this._item = null;
- this._index = -1;
+ private cancelClicked(): void {
+ const cancel = this.cancel;
+ this.commit = null;
+ this.cancel = null;
+ this.item = null;
+ this.index = -1;
if (cancel) {
cancel();
}
diff --git a/front_end/ui/legacy/Panel.ts b/front_end/ui/legacy/Panel.ts
index f6c38f7..af041da 100644
--- a/front_end/ui/legacy/Panel.ts
+++ b/front_end/ui/legacy/Panel.ts
@@ -30,14 +30,12 @@
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type {SearchableView} from './SearchableView.js';
import {SplitWidget} from './SplitWidget.js';
import {VBox} from './Widget.js';
export class Panel extends VBox {
- _panelName: string;
+ protected panelName: string;
constructor(name: string) {
super();
@@ -45,7 +43,7 @@
this.element.classList.add('panel');
this.element.setAttribute('aria-label', name);
this.element.classList.add(name);
- this._panelName = name;
+ this.panelName = name;
// @ts-ignore: Legacy global. Requires rewriting tests to get rid of.
// For testing.
@@ -53,7 +51,7 @@
}
get name(): string {
- return this._panelName;
+ return this.panelName;
}
searchableView(): SearchableView|null {
@@ -66,35 +64,35 @@
}
export class PanelWithSidebar extends Panel {
- _panelSplitWidget: SplitWidget;
- _mainWidget: VBox;
- _sidebarWidget: VBox;
+ private readonly panelSplitWidget: SplitWidget;
+ private readonly mainWidget: VBox;
+ private readonly sidebarWidget: VBox;
constructor(name: string, defaultWidth?: number) {
super(name);
- this._panelSplitWidget = new SplitWidget(true, false, this._panelName + 'PanelSplitViewState', defaultWidth || 200);
- this._panelSplitWidget.show(this.element);
+ this.panelSplitWidget = new SplitWidget(true, false, this.panelName + 'PanelSplitViewState', defaultWidth || 200);
+ this.panelSplitWidget.show(this.element);
- this._mainWidget = new VBox();
- this._panelSplitWidget.setMainWidget(this._mainWidget);
+ this.mainWidget = new VBox();
+ this.panelSplitWidget.setMainWidget(this.mainWidget);
- this._sidebarWidget = new VBox();
- this._sidebarWidget.setMinimumSize(100, 25);
- this._panelSplitWidget.setSidebarWidget(this._sidebarWidget);
+ this.sidebarWidget = new VBox();
+ this.sidebarWidget.setMinimumSize(100, 25);
+ this.panelSplitWidget.setSidebarWidget(this.sidebarWidget);
- this._sidebarWidget.element.classList.add('panel-sidebar');
+ this.sidebarWidget.element.classList.add('panel-sidebar');
}
panelSidebarElement(): Element {
- return this._sidebarWidget.element;
+ return this.sidebarWidget.element;
}
mainElement(): Element {
- return this._mainWidget.element;
+ return this.mainWidget.element;
}
splitWidget(): SplitWidget {
- return this._panelSplitWidget;
+ return this.panelSplitWidget;
}
}
diff --git a/front_end/ui/legacy/PopoverHelper.ts b/front_end/ui/legacy/PopoverHelper.ts
index 734534d..abe4546 100644
--- a/front_end/ui/legacy/PopoverHelper.ts
+++ b/front_end/ui/legacy/PopoverHelper.ts
@@ -28,173 +28,171 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import {GlassPane, MarginBehavior, SizeBehavior} from './GlassPane.js';
export class PopoverHelper {
- _disableOnClick: boolean;
- _hasPadding: boolean;
- _getRequest: (arg0: MouseEvent) => PopoverRequest | null;
- _scheduledRequest: PopoverRequest|null;
- _hidePopoverCallback: (() => void)|null;
- _container: Element;
- _showTimeout: number;
- _hideTimeout: number;
- _hidePopoverTimer: number|null;
- _showPopoverTimer: number|null;
- _boundMouseDown: (event: Event) => void;
- _boundMouseMove: (ev: Event) => void;
- _boundMouseOut: (event: Event) => void;
+ private disableOnClick: boolean;
+ private hasPadding: boolean;
+ private getRequest: (arg0: MouseEvent) => PopoverRequest | null;
+ private scheduledRequest: PopoverRequest|null;
+ private hidePopoverCallback: (() => void)|null;
+ private readonly container: Element;
+ private showTimeout: number;
+ private hideTimeout: number;
+ private hidePopoverTimer: number|null;
+ private showPopoverTimer: number|null;
+ private readonly boundMouseDown: (event: Event) => void;
+ private readonly boundMouseMove: (ev: Event) => void;
+ private readonly boundMouseOut: (event: Event) => void;
constructor(container: Element, getRequest: (arg0: MouseEvent) => PopoverRequest | null) {
- this._disableOnClick = false;
- this._hasPadding = false;
- this._getRequest = getRequest;
- this._scheduledRequest = null;
- this._hidePopoverCallback = null;
- this._container = container;
- this._showTimeout = 0;
- this._hideTimeout = 0;
- this._hidePopoverTimer = null;
- this._showPopoverTimer = null;
- this._boundMouseDown = this._mouseDown.bind(this);
- this._boundMouseMove = this._mouseMove.bind(this);
- this._boundMouseOut = this._mouseOut.bind(this);
- this._container.addEventListener('mousedown', this._boundMouseDown, false);
- this._container.addEventListener('mousemove', this._boundMouseMove, false);
- this._container.addEventListener('mouseout', this._boundMouseOut, false);
+ this.disableOnClick = false;
+ this.hasPadding = false;
+ this.getRequest = getRequest;
+ this.scheduledRequest = null;
+ this.hidePopoverCallback = null;
+ this.container = container;
+ this.showTimeout = 0;
+ this.hideTimeout = 0;
+ this.hidePopoverTimer = null;
+ this.showPopoverTimer = null;
+ this.boundMouseDown = this.mouseDown.bind(this);
+ this.boundMouseMove = this.mouseMove.bind(this);
+ this.boundMouseOut = this.mouseOut.bind(this);
+ this.container.addEventListener('mousedown', this.boundMouseDown, false);
+ this.container.addEventListener('mousemove', this.boundMouseMove, false);
+ this.container.addEventListener('mouseout', this.boundMouseOut, false);
this.setTimeout(1000);
}
setTimeout(showTimeout: number, hideTimeout?: number): void {
- this._showTimeout = showTimeout;
- this._hideTimeout = typeof hideTimeout === 'number' ? hideTimeout : showTimeout / 2;
+ this.showTimeout = showTimeout;
+ this.hideTimeout = typeof hideTimeout === 'number' ? hideTimeout : showTimeout / 2;
}
setHasPadding(hasPadding: boolean): void {
- this._hasPadding = hasPadding;
+ this.hasPadding = hasPadding;
}
setDisableOnClick(disableOnClick: boolean): void {
- this._disableOnClick = disableOnClick;
+ this.disableOnClick = disableOnClick;
}
- _eventInScheduledContent(ev: Event): boolean {
+ private eventInScheduledContent(ev: Event): boolean {
const event = (ev as MouseEvent);
- return this._scheduledRequest ? this._scheduledRequest.box.contains(event.clientX, event.clientY) : false;
+ return this.scheduledRequest ? this.scheduledRequest.box.contains(event.clientX, event.clientY) : false;
}
- _mouseDown(event: Event): void {
- if (this._disableOnClick) {
+ private mouseDown(event: Event): void {
+ if (this.disableOnClick) {
this.hidePopover();
return;
}
- if (this._eventInScheduledContent(event)) {
+ if (this.eventInScheduledContent(event)) {
return;
}
- this._startHidePopoverTimer(0);
- this._stopShowPopoverTimer();
- this._startShowPopoverTimer((event as MouseEvent), 0);
+ this.startHidePopoverTimer(0);
+ this.stopShowPopoverTimer();
+ this.startShowPopoverTimer((event as MouseEvent), 0);
}
- _mouseMove(ev: Event): void {
+ private mouseMove(ev: Event): void {
const event = (ev as MouseEvent);
// Pretend that nothing has happened.
- if (this._eventInScheduledContent(event)) {
+ if (this.eventInScheduledContent(event)) {
return;
}
- this._startHidePopoverTimer(this._hideTimeout);
- this._stopShowPopoverTimer();
- if (event.which && this._disableOnClick) {
+ this.startHidePopoverTimer(this.hideTimeout);
+ this.stopShowPopoverTimer();
+ if (event.which && this.disableOnClick) {
return;
}
- this._startShowPopoverTimer(event, this.isPopoverVisible() ? this._showTimeout * 0.6 : this._showTimeout);
+ this.startShowPopoverTimer(event, this.isPopoverVisible() ? this.showTimeout * 0.6 : this.showTimeout);
}
- _popoverMouseMove(_event: Event): void {
- this._stopHidePopoverTimer();
+ private popoverMouseMove(_event: Event): void {
+ this.stopHidePopoverTimer();
}
- _popoverMouseOut(popover: GlassPane, ev: Event): void {
+ private popoverMouseOut(popover: GlassPane, ev: Event): void {
const event = (ev as MouseEvent);
if (!popover.isShowing()) {
return;
}
const node = (event.relatedTarget as Node | null);
if (node && !node.isSelfOrDescendant(popover.contentElement)) {
- this._startHidePopoverTimer(this._hideTimeout);
+ this.startHidePopoverTimer(this.hideTimeout);
}
}
- _mouseOut(event: Event): void {
+ private mouseOut(event: Event): void {
if (!this.isPopoverVisible()) {
return;
}
- if (!this._eventInScheduledContent(event)) {
- this._startHidePopoverTimer(this._hideTimeout);
+ if (!this.eventInScheduledContent(event)) {
+ this.startHidePopoverTimer(this.hideTimeout);
}
}
- _startHidePopoverTimer(timeout: number): void {
+ private startHidePopoverTimer(timeout: number): void {
// User has |timeout| ms to reach the popup.
- if (!this._hidePopoverCallback || this._hidePopoverTimer) {
+ if (!this.hidePopoverCallback || this.hidePopoverTimer) {
return;
}
- this._hidePopoverTimer = window.setTimeout(() => {
- this._hidePopover();
- this._hidePopoverTimer = null;
+ this.hidePopoverTimer = window.setTimeout(() => {
+ this.hidePopover();
+ this.hidePopoverTimer = null;
}, timeout);
}
- _startShowPopoverTimer(event: MouseEvent, timeout: number): void {
- this._scheduledRequest = this._getRequest.call(null, event);
- if (!this._scheduledRequest) {
+ private startShowPopoverTimer(event: MouseEvent, timeout: number): void {
+ this.scheduledRequest = this.getRequest.call(null, event);
+ if (!this.scheduledRequest) {
return;
}
- this._showPopoverTimer = window.setTimeout(() => {
- this._showPopoverTimer = null;
- this._stopHidePopoverTimer();
- this._hidePopover();
+ this.showPopoverTimer = window.setTimeout(() => {
+ this.showPopoverTimer = null;
+ this.stopHidePopoverTimer();
+ this.hidePopoverInternal();
const document = ((event.target as Node).ownerDocument) as Document;
- this._showPopover(document);
+ this.showPopover(document);
}, timeout);
}
- _stopShowPopoverTimer(): void {
- if (!this._showPopoverTimer) {
+ private stopShowPopoverTimer(): void {
+ if (!this.showPopoverTimer) {
return;
}
- clearTimeout(this._showPopoverTimer);
- this._showPopoverTimer = null;
+ clearTimeout(this.showPopoverTimer);
+ this.showPopoverTimer = null;
}
isPopoverVisible(): boolean {
- return Boolean(this._hidePopoverCallback);
+ return Boolean(this.hidePopoverCallback);
}
hidePopover(): void {
- this._stopShowPopoverTimer();
- this._hidePopover();
+ this.stopShowPopoverTimer();
+ this.hidePopoverInternal();
}
- _hidePopover(): void {
- if (!this._hidePopoverCallback) {
+ private hidePopoverInternal(): void {
+ if (!this.hidePopoverCallback) {
return;
}
- this._hidePopoverCallback.call(null);
- this._hidePopoverCallback = null;
+ this.hidePopoverCallback.call(null);
+ this.hidePopoverCallback = null;
}
- _showPopover(document: Document): void {
+ private showPopover(document: Document): void {
const popover = new GlassPane();
popover.registerRequiredCSS('ui/legacy/popover.css');
popover.setSizeBehavior(SizeBehavior.MeasureContent);
popover.setMarginBehavior(MarginBehavior.Arrow);
- const request = this._scheduledRequest;
+ const request = this.scheduledRequest;
if (!request) {
return;
}
@@ -203,7 +201,7 @@
return;
}
- if (this._scheduledRequest !== request) {
+ if (this.scheduledRequest !== request) {
if (request.hide) {
request.hide.call(null);
}
@@ -217,13 +215,13 @@
}
popoverHelperInstance = this;
- popover.contentElement.classList.toggle('has-padding', this._hasPadding);
- popover.contentElement.addEventListener('mousemove', this._popoverMouseMove.bind(this), true);
- popover.contentElement.addEventListener('mouseout', this._popoverMouseOut.bind(this, popover), true);
+ popover.contentElement.classList.toggle('has-padding', this.hasPadding);
+ popover.contentElement.addEventListener('mousemove', this.popoverMouseMove.bind(this), true);
+ popover.contentElement.addEventListener('mouseout', this.popoverMouseOut.bind(this, popover), true);
popover.setContentAnchorBox(request.box);
popover.show(document);
- this._hidePopoverCallback = (): void => {
+ this.hidePopoverCallback = (): void => {
if (request.hide) {
request.hide.call(null);
}
@@ -233,22 +231,22 @@
});
}
- _stopHidePopoverTimer(): void {
- if (!this._hidePopoverTimer) {
+ private stopHidePopoverTimer(): void {
+ if (!this.hidePopoverTimer) {
return;
}
- clearTimeout(this._hidePopoverTimer);
- this._hidePopoverTimer = null;
+ clearTimeout(this.hidePopoverTimer);
+ this.hidePopoverTimer = null;
// We know that we reached the popup, but we might have moved over other elements.
// Discard pending command.
- this._stopShowPopoverTimer();
+ this.stopShowPopoverTimer();
}
dispose(): void {
- this._container.removeEventListener('mousedown', this._boundMouseDown, false);
- this._container.removeEventListener('mousemove', this._boundMouseMove, false);
- this._container.removeEventListener('mouseout', this._boundMouseOut, false);
+ this.container.removeEventListener('mousedown', this.boundMouseDown, false);
+ this.container.removeEventListener('mousemove', this.boundMouseMove, false);
+ this.container.removeEventListener('mouseout', this.boundMouseOut, false);
}
}
diff --git a/front_end/ui/legacy/ProgressIndicator.ts b/front_end/ui/legacy/ProgressIndicator.ts
index 70e9704..29b79c8 100644
--- a/front_end/ui/legacy/ProgressIndicator.ts
+++ b/front_end/ui/legacy/ProgressIndicator.ts
@@ -28,37 +28,35 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type * as Common from '../../core/common/common.js';
import {createShadowRootWithCoreStyles} from './utils/create-shadow-root-with-core-styles.js';
export class ProgressIndicator implements Common.Progress.Progress {
element: HTMLDivElement;
- _shadowRoot: ShadowRoot;
- _contentElement: Element;
- _labelElement: Element;
- _progressElement: HTMLProgressElement;
- _stopButton: Element;
- _isCanceled: boolean;
- _worked: number;
- _isDone?: boolean;
+ private readonly shadowRoot: ShadowRoot;
+ private readonly contentElement: Element;
+ private labelElement: Element;
+ private progressElement: HTMLProgressElement;
+ private readonly stopButton: Element;
+ private isCanceledInternal: boolean;
+ private worked: number;
+ private isDone?: boolean;
constructor() {
this.element = document.createElement('div');
this.element.classList.add('progress-indicator');
- this._shadowRoot = createShadowRootWithCoreStyles(
+ this.shadowRoot = createShadowRootWithCoreStyles(
this.element, {cssFile: 'ui/legacy/progressIndicator.css', delegatesFocus: undefined});
- this._contentElement = this._shadowRoot.createChild('div', 'progress-indicator-shadow-container');
+ this.contentElement = this.shadowRoot.createChild('div', 'progress-indicator-shadow-container');
- this._labelElement = this._contentElement.createChild('div', 'title');
- this._progressElement = (this._contentElement.createChild('progress') as HTMLProgressElement);
- this._progressElement.value = 0;
- this._stopButton = this._contentElement.createChild('button', 'progress-indicator-shadow-stop-button');
- this._stopButton.addEventListener('click', this.cancel.bind(this));
+ this.labelElement = this.contentElement.createChild('div', 'title');
+ this.progressElement = (this.contentElement.createChild('progress') as HTMLProgressElement);
+ this.progressElement.value = 0;
+ this.stopButton = this.contentElement.createChild('button', 'progress-indicator-shadow-stop-button');
+ this.stopButton.addEventListener('click', this.cancel.bind(this));
- this._isCanceled = false;
- this._worked = 0;
+ this.isCanceledInternal = false;
+ this.worked = 0;
}
show(parent: Element): void {
@@ -66,38 +64,38 @@
}
done(): void {
- if (this._isDone) {
+ if (this.isDone) {
return;
}
- this._isDone = true;
+ this.isDone = true;
this.element.remove();
}
cancel(): void {
- this._isCanceled = true;
+ this.isCanceledInternal = true;
}
isCanceled(): boolean {
- return this._isCanceled;
+ return this.isCanceledInternal;
}
setTitle(title: string): void {
- this._labelElement.textContent = title;
+ this.labelElement.textContent = title;
}
setTotalWork(totalWork: number): void {
- this._progressElement.max = totalWork;
+ this.progressElement.max = totalWork;
}
setWorked(worked: number, title?: string): void {
- this._worked = worked;
- this._progressElement.value = worked;
+ this.worked = worked;
+ this.progressElement.value = worked;
if (title) {
this.setTitle(title);
}
}
incrementWorked(worked?: number): void {
- this.setWorked(this._worked + (worked || 1));
+ this.setWorked(this.worked + (worked || 1));
}
}
diff --git a/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts b/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts
index c336894..6da088b 100644
--- a/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts
+++ b/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as i18n from '../../core/i18n/i18n.js';
import {Dialog} from './Dialog.js';
diff --git a/front_end/ui/legacy/ReportView.ts b/front_end/ui/legacy/ReportView.ts
index d6004f3..fe76091 100644
--- a/front_end/ui/legacy/ReportView.ts
+++ b/front_end/ui/legacy/ReportView.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as ARIAUtils from './ARIAUtils.js';
import {Toolbar} from './Toolbar.js';
import {Tooltip} from './Tooltip.js';
@@ -14,66 +12,66 @@
* (`ui/components/report_view/ReportView.ts`) for new code.
*/
export class ReportView extends VBox {
- _contentBox: HTMLElement;
- _headerElement: HTMLElement;
- _titleElement: HTMLElement;
- _sectionList: HTMLElement;
- _subtitleElement?: HTMLElement;
- _urlElement?: HTMLElement;
+ private readonly contentBox: HTMLElement;
+ private headerElement: HTMLElement;
+ private titleElement: HTMLElement;
+ private readonly sectionList: HTMLElement;
+ private subtitleElement?: HTMLElement;
+ private urlElement?: HTMLElement;
constructor(title?: string) {
super(true);
this.registerRequiredCSS('ui/legacy/reportView.css');
- this._contentBox = this.contentElement.createChild('div', 'report-content-box');
- this._headerElement = this._contentBox.createChild('div', 'report-header vbox');
- this._titleElement = this._headerElement.createChild('div', 'report-title');
+ this.contentBox = this.contentElement.createChild('div', 'report-content-box');
+ this.headerElement = this.contentBox.createChild('div', 'report-header vbox');
+ this.titleElement = this.headerElement.createChild('div', 'report-title');
if (title) {
- this._titleElement.textContent = title;
+ this.titleElement.textContent = title;
} else {
- this._headerElement.classList.add('hidden');
+ this.headerElement.classList.add('hidden');
}
- ARIAUtils.markAsHeading(this._titleElement, 1);
+ ARIAUtils.markAsHeading(this.titleElement, 1);
- this._sectionList = this._contentBox.createChild('div', 'vbox');
+ this.sectionList = this.contentBox.createChild('div', 'vbox');
}
setTitle(title: string): void {
- if (this._titleElement.textContent === title) {
+ if (this.titleElement.textContent === title) {
return;
}
- this._titleElement.textContent = title;
- this._headerElement.classList.toggle('hidden', Boolean(title));
+ this.titleElement.textContent = title;
+ this.headerElement.classList.toggle('hidden', Boolean(title));
}
setSubtitle(subtitle: string): void {
- if (this._subtitleElement && this._subtitleElement.textContent === subtitle) {
+ if (this.subtitleElement && this.subtitleElement.textContent === subtitle) {
return;
}
- if (!this._subtitleElement) {
- this._subtitleElement = this._headerElement.createChild('div', 'report-subtitle');
+ if (!this.subtitleElement) {
+ this.subtitleElement = this.headerElement.createChild('div', 'report-subtitle');
}
- this._subtitleElement.textContent = subtitle;
+ this.subtitleElement.textContent = subtitle;
}
setURL(link: Element|null): void {
- if (!this._urlElement) {
- this._urlElement = this._headerElement.createChild('div', 'report-url link');
+ if (!this.urlElement) {
+ this.urlElement = this.headerElement.createChild('div', 'report-url link');
}
- this._urlElement.removeChildren();
+ this.urlElement.removeChildren();
if (link) {
- this._urlElement.appendChild(link);
+ this.urlElement.appendChild(link);
}
}
createToolbar(): Toolbar {
const toolbar = new Toolbar('');
- this._headerElement.appendChild(toolbar.element);
+ this.headerElement.appendChild(toolbar.element);
return toolbar;
}
appendSection(title: string, className?: string): Section {
const section = new Section(title, className);
- section.show(this._sectionList);
+ section.show(this.sectionList);
return section;
}
@@ -87,48 +85,48 @@
this.detachChildWidgets();
sections.sort(comparator);
for (const section of sections) {
- section.show(this._sectionList);
+ section.show(this.sectionList);
}
}
setHeaderVisible(visible: boolean): void {
- this._headerElement.classList.toggle('hidden', !visible);
+ this.headerElement.classList.toggle('hidden', !visible);
}
setBodyScrollable(scrollable: boolean): void {
- this._contentBox.classList.toggle('no-scroll', !scrollable);
+ this.contentBox.classList.toggle('no-scroll', !scrollable);
}
}
export class Section extends VBox {
- _headerElement: HTMLElement;
- _titleElement: HTMLElement;
- _fieldList: HTMLElement;
- _fieldMap: Map<string, Element>;
+ private readonly headerElement: HTMLElement;
+ private titleElement: HTMLElement;
+ private fieldList: HTMLElement;
+ private readonly fieldMap: Map<string, Element>;
constructor(title: string, className?: string) {
super();
this.element.classList.add('report-section');
if (className) {
this.element.classList.add(className);
}
- this._headerElement = this.element.createChild('div', 'report-section-header');
- this._titleElement = this._headerElement.createChild('div', 'report-section-title');
+ this.headerElement = this.element.createChild('div', 'report-section-header');
+ this.titleElement = this.headerElement.createChild('div', 'report-section-title');
this.setTitle(title);
- ARIAUtils.markAsHeading(this._titleElement, 2);
- this._fieldList = this.element.createChild('div', 'vbox');
- this._fieldMap = new Map();
+ ARIAUtils.markAsHeading(this.titleElement, 2);
+ this.fieldList = this.element.createChild('div', 'vbox');
+ this.fieldMap = new Map();
}
title(): string {
- return this._titleElement.textContent || '';
+ return this.titleElement.textContent || '';
}
setTitle(title: string, tooltip?: string): void {
- if (this._titleElement.textContent !== title) {
- this._titleElement.textContent = title;
+ if (this.titleElement.textContent !== title) {
+ this.titleElement.textContent = title;
}
- Tooltip.install(this._titleElement, tooltip || '');
- this._titleElement.classList.toggle('hidden', !this._titleElement.textContent);
+ Tooltip.install(this.titleElement, tooltip || '');
+ this.titleElement.classList.toggle('hidden', !this.titleElement.textContent);
}
/**
@@ -141,16 +139,16 @@
createToolbar(): Toolbar {
const toolbar = new Toolbar('');
- this._headerElement.appendChild(toolbar.element);
+ this.headerElement.appendChild(toolbar.element);
return toolbar;
}
appendField(title: string, textValue?: string): HTMLElement {
- let row = this._fieldMap.get(title);
+ let row = this.fieldMap.get(title);
if (!row) {
- row = this._fieldList.createChild('div', 'report-field');
+ row = this.fieldList.createChild('div', 'report-field');
row.createChild('div', 'report-field-name').textContent = title;
- this._fieldMap.set(title, row);
+ this.fieldMap.set(title, row);
row.createChild('div', 'report-field-value');
}
if (textValue && row.lastElementChild) {
@@ -166,42 +164,42 @@
}
removeField(title: string): void {
- const row = this._fieldMap.get(title);
+ const row = this.fieldMap.get(title);
if (row) {
row.remove();
}
- this._fieldMap.delete(title);
+ this.fieldMap.delete(title);
}
setFieldVisible(title: string, visible: boolean): void {
- const row = this._fieldMap.get(title);
+ const row = this.fieldMap.get(title);
if (row) {
row.classList.toggle('hidden', !visible);
}
}
fieldValue(title: string): Element|null {
- const row = this._fieldMap.get(title);
+ const row = this.fieldMap.get(title);
return row ? row.lastElementChild : null;
}
appendRow(): HTMLElement {
- return /** @type {!HTMLElement} */ this._fieldList.createChild('div', 'report-row') as HTMLElement;
+ return /** @type {!HTMLElement} */ this.fieldList.createChild('div', 'report-row') as HTMLElement;
}
appendSelectableRow(): HTMLElement {
- return /** @type {!HTMLElement} */ this._fieldList.createChild('div', 'report-row report-row-selectable') as
+ return /** @type {!HTMLElement} */ this.fieldList.createChild('div', 'report-row report-row-selectable') as
HTMLElement;
}
clearContent(): void {
- this._fieldList.removeChildren();
- this._fieldMap.clear();
+ this.fieldList.removeChildren();
+ this.fieldMap.clear();
}
markFieldListAsGroup(): void {
- ARIAUtils.markAsGroup(this._fieldList);
- ARIAUtils.setAccessibleName(this._fieldList, this.title());
+ ARIAUtils.markAsGroup(this.fieldList);
+ ARIAUtils.setAccessibleName(this.fieldList, this.title());
}
setIconMasked(masked: boolean): void {
diff --git a/front_end/ui/legacy/ResizerWidget.ts b/front_end/ui/legacy/ResizerWidget.ts
index e8f5c95..fa0a8bf 100644
--- a/front_end/ui/legacy/ResizerWidget.ts
+++ b/front_end/ui/legacy/ResizerWidget.ts
@@ -2,63 +2,61 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import {elementDragStart} from './UIUtils.js';
export class ResizerWidget extends Common.ObjectWrapper.ObjectWrapper {
- _isEnabled: boolean;
- _elements: Set<HTMLElement>;
- _installDragOnMouseDownBound: (event: Event) => false | undefined;
- _cursor: string;
- _startX?: number;
- _startY?: number;
+ private isEnabledInternal: boolean;
+ private elementsInternal: Set<HTMLElement>;
+ private readonly installDragOnMouseDownBound: (event: Event) => false | undefined;
+ private cursorInternal: string;
+ private startX?: number;
+ private startY?: number;
constructor() {
super();
- this._isEnabled = true;
- this._elements = new Set();
- this._installDragOnMouseDownBound = this._installDragOnMouseDown.bind(this);
- this._cursor = 'nwse-resize';
+ this.isEnabledInternal = true;
+ this.elementsInternal = new Set();
+ this.installDragOnMouseDownBound = this.installDragOnMouseDown.bind(this);
+ this.cursorInternal = 'nwse-resize';
}
isEnabled(): boolean {
- return this._isEnabled;
+ return this.isEnabledInternal;
}
setEnabled(enabled: boolean): void {
- this._isEnabled = enabled;
+ this.isEnabledInternal = enabled;
this.updateElementCursors();
}
elements(): Element[] {
- return [...this._elements];
+ return [...this.elementsInternal];
}
addElement(element: HTMLElement): void {
- if (!this._elements.has(element)) {
- this._elements.add(element);
- element.addEventListener('mousedown', this._installDragOnMouseDownBound, false);
- this._updateElementCursor(element);
+ if (!this.elementsInternal.has(element)) {
+ this.elementsInternal.add(element);
+ element.addEventListener('mousedown', this.installDragOnMouseDownBound, false);
+ this.updateElementCursor(element);
}
}
removeElement(element: HTMLElement): void {
- if (this._elements.has(element)) {
- this._elements.delete(element);
- element.removeEventListener('mousedown', this._installDragOnMouseDownBound, false);
+ if (this.elementsInternal.has(element)) {
+ this.elementsInternal.delete(element);
+ element.removeEventListener('mousedown', this.installDragOnMouseDownBound, false);
element.style.removeProperty('cursor');
}
}
updateElementCursors(): void {
- this._elements.forEach(this._updateElementCursor.bind(this));
+ this.elementsInternal.forEach(this.updateElementCursor.bind(this));
}
- _updateElementCursor(element: HTMLElement): void {
- if (this._isEnabled) {
+ private updateElementCursor(element: HTMLElement): void {
+ if (this.isEnabledInternal) {
element.style.setProperty('cursor', this.cursor());
} else {
element.style.removeProperty('cursor');
@@ -66,33 +64,33 @@
}
cursor(): string {
- return this._cursor;
+ return this.cursorInternal;
}
setCursor(cursor: string): void {
- this._cursor = cursor;
+ this.cursorInternal = cursor;
this.updateElementCursors();
}
- _installDragOnMouseDown(event: Event): false|undefined {
+ private installDragOnMouseDown(event: Event): false|undefined {
const element = (event.target as HTMLElement);
// Only handle drags of the nodes specified.
- if (!this._elements.has(element)) {
+ if (!this.elementsInternal.has(element)) {
return false;
}
- elementDragStart(element, this._dragStart.bind(this), event => {
- this._drag(event);
- }, this._dragEnd.bind(this), this.cursor(), event);
+ elementDragStart(element, this.dragStart.bind(this), event => {
+ this.drag(event);
+ }, this.dragEnd.bind(this), this.cursor(), event);
return undefined;
}
- _dragStart(event: MouseEvent): boolean {
- if (!this._isEnabled) {
+ private dragStart(event: MouseEvent): boolean {
+ if (!this.isEnabledInternal) {
return false;
}
- this._startX = event.pageX;
- this._startY = event.pageY;
- this.sendDragStart(this._startX, this._startY);
+ this.startX = event.pageX;
+ this.startY = event.pageY;
+ this.sendDragStart(this.startX, this.startY);
return true;
}
@@ -100,12 +98,12 @@
this.dispatchEventToListeners(Events.ResizeStart, {startX: x, currentX: x, startY: y, currentY: y});
}
- _drag(event: MouseEvent): boolean {
- if (!this._isEnabled) {
- this._dragEnd(event);
+ private drag(event: MouseEvent): boolean {
+ if (!this.isEnabledInternal) {
+ this.dragEnd(event);
return true; // Cancel drag.
}
- this.sendDragMove((this._startX as number), event.pageX, (this._startY as number), event.pageY, event.shiftKey);
+ this.sendDragMove((this.startX as number), event.pageX, (this.startY as number), event.pageY, event.shiftKey);
event.preventDefault();
return false; // Continue drag.
}
@@ -116,10 +114,10 @@
{startX: startX, currentX: currentX, startY: startY, currentY: currentY, shiftKey: shiftKey});
}
- _dragEnd(_event: MouseEvent): void {
+ private dragEnd(_event: MouseEvent): void {
this.dispatchEventToListeners(Events.ResizeEnd);
- delete this._startX;
- delete this._startY;
+ delete this.startX;
+ delete this.startY;
}
}
@@ -132,35 +130,35 @@
}
export class SimpleResizerWidget extends ResizerWidget {
- _isVertical: boolean;
+ private isVerticalInternal: boolean;
constructor() {
super();
- this._isVertical = true;
+ this.isVerticalInternal = true;
}
isVertical(): boolean {
- return this._isVertical;
+ return this.isVerticalInternal;
}
/**
* Vertical widget resizes height (along y-axis).
*/
setVertical(vertical: boolean): void {
- this._isVertical = vertical;
+ this.isVerticalInternal = vertical;
this.updateElementCursors();
}
cursor(): string {
- return this._isVertical ? 'ns-resize' : 'ew-resize';
+ return this.isVerticalInternal ? 'ns-resize' : 'ew-resize';
}
sendDragStart(x: number, y: number): void {
- const position = this._isVertical ? y : x;
+ const position = this.isVerticalInternal ? y : x;
this.dispatchEventToListeners(Events.ResizeStart, {startPosition: position, currentPosition: position});
}
sendDragMove(startX: number, currentX: number, startY: number, currentY: number, shiftKey: boolean): void {
- if (this._isVertical) {
+ if (this.isVerticalInternal) {
this.dispatchEventToListeners(
Events.ResizeUpdate, {startPosition: startY, currentPosition: currentY, shiftKey: shiftKey});
} else {
diff --git a/front_end/ui/legacy/RootView.ts b/front_end/ui/legacy/RootView.ts
index 1ad72f4..72ed13c 100644
--- a/front_end/ui/legacy/RootView.ts
+++ b/front_end/ui/legacy/RootView.ts
@@ -2,13 +2,11 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import {VBox} from './Widget.js';
import {ZoomManager} from './ZoomManager.js';
export class RootView extends VBox {
- _window?: (Window&typeof globalThis)|null;
+ private window?: (Window&typeof globalThis)|null;
constructor() {
super();
this.markAsRoot();
@@ -21,18 +19,18 @@
if (document.defaultView) {
document.defaultView.addEventListener('resize', this.doResize.bind(this), false);
}
- this._window = document.defaultView;
+ this.window = document.defaultView;
this.doResize();
this.show((document.body as Element));
}
doResize(): void {
- if (this._window) {
+ if (this.window) {
const size = this.constraints().minimum;
const zoom = ZoomManager.instance().zoomFactor();
- const right = Math.min(0, this._window.innerWidth - size.width / zoom);
+ const right = Math.min(0, this.window.innerWidth - size.width / zoom);
this.element.style.marginRight = right + 'px';
- const bottom = Math.min(0, this._window.innerHeight - size.height / zoom);
+ const bottom = Math.min(0, this.window.innerHeight - size.height / zoom);
this.element.style.marginBottom = bottom + 'px';
}
super.doResize();
diff --git a/front_end/ui/legacy/SearchableView.ts b/front_end/ui/legacy/SearchableView.ts
index 77e87b4..dd53914 100644
--- a/front_end/ui/legacy/SearchableView.ts
+++ b/front_end/ui/legacy/SearchableView.ts
@@ -33,8 +33,6 @@
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as i18n from '../../core/i18n/i18n.js';
@@ -98,123 +96,123 @@
const str_ = i18n.i18n.registerUIStrings('ui/legacy/SearchableView.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class SearchableView extends VBox {
- _searchProvider: Searchable;
- _replaceProvider: Replaceable|null;
+ private searchProvider: Searchable;
+ private replaceProvider: Replaceable|null;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _setting: Common.Settings.Setting<any>|null;
- _replaceable: boolean;
- _footerElementContainer: HTMLElement;
- _footerElement: HTMLElement;
- _replaceToggleButton: ToolbarToggle;
- _searchInputElement: HistoryInput;
- _matchesElement: HTMLElement;
- _searchNavigationPrevElement: HTMLElement;
- _searchNavigationNextElement: HTMLElement;
- _replaceInputElement: HTMLInputElement;
- _buttonsContainer: HTMLElement;
- _caseSensitiveButton: ToolbarToggle|undefined;
- _regexButton: ToolbarToggle|undefined;
- _secondRowButtons: HTMLElement;
- _replaceButtonElement: HTMLButtonElement;
- _replaceAllButtonElement: HTMLButtonElement;
- _minimalSearchQuerySize: number;
- _searchIsVisible?: boolean;
- _currentQuery?: string;
- _valueChangedTimeoutId?: number;
+ private setting: Common.Settings.Setting<any>|null;
+ private replaceable: boolean;
+ private readonly footerElementContainer: HTMLElement;
+ private readonly footerElement: HTMLElement;
+ private replaceToggleButton: ToolbarToggle;
+ private searchInputElement: HistoryInput;
+ private matchesElement: HTMLElement;
+ private searchNavigationPrevElement: HTMLElement;
+ private searchNavigationNextElement: HTMLElement;
+ private readonly replaceInputElement: HTMLInputElement;
+ private readonly buttonsContainer: HTMLElement;
+ private caseSensitiveButton: ToolbarToggle|undefined;
+ private regexButton: ToolbarToggle|undefined;
+ private readonly secondRowButtons: HTMLElement;
+ private replaceButtonElement: HTMLButtonElement;
+ private replaceAllButtonElement: HTMLButtonElement;
+ private minimalSearchQuerySize: number;
+ private searchIsVisible?: boolean;
+ private currentQuery?: string;
+ private valueChangedTimeoutId?: number;
constructor(searchable: Searchable, replaceable: Replaceable|null, settingName?: string) {
super(true);
this.registerRequiredCSS('ui/legacy/searchableView.css');
searchableViewsByElement.set(this.element, this);
- this._searchProvider = searchable;
- this._replaceProvider = replaceable;
- this._setting =
+ this.searchProvider = searchable;
+ this.replaceProvider = replaceable;
+ this.setting =
settingName ? Common.Settings.Settings.instance().createSetting(settingName, /** @type {*} */ ({})) : null;
- this._replaceable = false;
+ this.replaceable = false;
this.contentElement.createChild('slot');
- this._footerElementContainer = this.contentElement.createChild('div', 'search-bar hidden');
- this._footerElementContainer.style.order = '100';
- this._footerElement = this._footerElementContainer.createChild('div', 'toolbar-search');
+ this.footerElementContainer = this.contentElement.createChild('div', 'search-bar hidden');
+ this.footerElementContainer.style.order = '100';
+ this.footerElement = this.footerElementContainer.createChild('div', 'toolbar-search');
- const replaceToggleToolbar = new Toolbar('replace-toggle-toolbar', this._footerElement);
- this._replaceToggleButton = new ToolbarToggle(i18nString(UIStrings.replace), 'mediumicon-replace');
- this._replaceToggleButton.addEventListener(ToolbarButton.Events.Click, this._toggleReplace, this);
- replaceToggleToolbar.appendToolbarItem(this._replaceToggleButton);
+ const replaceToggleToolbar = new Toolbar('replace-toggle-toolbar', this.footerElement);
+ this.replaceToggleButton = new ToolbarToggle(i18nString(UIStrings.replace), 'mediumicon-replace');
+ this.replaceToggleButton.addEventListener(ToolbarButton.Events.Click, this.toggleReplace, this);
+ replaceToggleToolbar.appendToolbarItem(this.replaceToggleButton);
- const searchInputElements = this._footerElement.createChild('div', 'toolbar-search-inputs');
+ const searchInputElements = this.footerElement.createChild('div', 'toolbar-search-inputs');
const searchControlElement = searchInputElements.createChild('div', 'toolbar-search-control');
- this._searchInputElement = HistoryInput.create();
- this._searchInputElement.type = 'search';
- this._searchInputElement.classList.add('search-replace', 'custom-search-input');
- this._searchInputElement.id = 'search-input-field';
- this._searchInputElement.placeholder = i18nString(UIStrings.findString);
- searchControlElement.appendChild(this._searchInputElement);
+ this.searchInputElement = HistoryInput.create();
+ this.searchInputElement.type = 'search';
+ this.searchInputElement.classList.add('search-replace', 'custom-search-input');
+ this.searchInputElement.id = 'search-input-field';
+ this.searchInputElement.placeholder = i18nString(UIStrings.findString);
+ searchControlElement.appendChild(this.searchInputElement);
- this._matchesElement = searchControlElement.createChild('label', 'search-results-matches');
- this._matchesElement.setAttribute('for', 'search-input-field');
+ this.matchesElement = searchControlElement.createChild('label', 'search-results-matches');
+ this.matchesElement.setAttribute('for', 'search-input-field');
const searchNavigationElement = searchControlElement.createChild('div', 'toolbar-search-navigation-controls');
- this._searchNavigationPrevElement =
+ this.searchNavigationPrevElement =
searchNavigationElement.createChild('div', 'toolbar-search-navigation toolbar-search-navigation-prev');
- this._searchNavigationPrevElement.addEventListener('click', this._onPrevButtonSearch.bind(this), false);
- Tooltip.install(this._searchNavigationPrevElement, i18nString(UIStrings.searchPrevious));
- ARIAUtils.setAccessibleName(this._searchNavigationPrevElement, i18nString(UIStrings.searchPrevious));
+ this.searchNavigationPrevElement.addEventListener('click', this.onPrevButtonSearch.bind(this), false);
+ Tooltip.install(this.searchNavigationPrevElement, i18nString(UIStrings.searchPrevious));
+ ARIAUtils.setAccessibleName(this.searchNavigationPrevElement, i18nString(UIStrings.searchPrevious));
- this._searchNavigationNextElement =
+ this.searchNavigationNextElement =
searchNavigationElement.createChild('div', 'toolbar-search-navigation toolbar-search-navigation-next');
- this._searchNavigationNextElement.addEventListener('click', this._onNextButtonSearch.bind(this), false);
- Tooltip.install(this._searchNavigationNextElement, i18nString(UIStrings.searchNext));
- ARIAUtils.setAccessibleName(this._searchNavigationNextElement, i18nString(UIStrings.searchNext));
+ this.searchNavigationNextElement.addEventListener('click', this.onNextButtonSearch.bind(this), false);
+ Tooltip.install(this.searchNavigationNextElement, i18nString(UIStrings.searchNext));
+ ARIAUtils.setAccessibleName(this.searchNavigationNextElement, i18nString(UIStrings.searchNext));
- this._searchInputElement.addEventListener('keydown', this._onSearchKeyDown.bind(this), true);
- this._searchInputElement.addEventListener('input', this._onInput.bind(this), false);
- this._replaceInputElement =
+ this.searchInputElement.addEventListener('keydown', this.onSearchKeyDown.bind(this), true);
+ this.searchInputElement.addEventListener('input', this.onInput.bind(this), false);
+ this.replaceInputElement =
(searchInputElements.createChild('input', 'search-replace toolbar-replace-control hidden') as HTMLInputElement);
- this._replaceInputElement.addEventListener('keydown', this._onReplaceKeyDown.bind(this), true);
- this._replaceInputElement.placeholder = i18nString(UIStrings.replace);
+ this.replaceInputElement.addEventListener('keydown', this.onReplaceKeyDown.bind(this), true);
+ this.replaceInputElement.placeholder = i18nString(UIStrings.replace);
- this._buttonsContainer = this._footerElement.createChild('div', 'toolbar-search-buttons');
- const firstRowButtons = this._buttonsContainer.createChild('div', 'first-row-buttons');
+ this.buttonsContainer = this.footerElement.createChild('div', 'toolbar-search-buttons');
+ const firstRowButtons = this.buttonsContainer.createChild('div', 'first-row-buttons');
const toolbar = new Toolbar('toolbar-search-options', firstRowButtons);
- if (this._searchProvider.supportsCaseSensitiveSearch()) {
- this._caseSensitiveButton = new ToolbarToggle(i18nString(UIStrings.matchCase));
- this._caseSensitiveButton.setText('Aa');
- this._caseSensitiveButton.addEventListener(ToolbarButton.Events.Click, this._toggleCaseSensitiveSearch, this);
- toolbar.appendToolbarItem(this._caseSensitiveButton);
+ if (this.searchProvider.supportsCaseSensitiveSearch()) {
+ this.caseSensitiveButton = new ToolbarToggle(i18nString(UIStrings.matchCase));
+ this.caseSensitiveButton.setText('Aa');
+ this.caseSensitiveButton.addEventListener(ToolbarButton.Events.Click, this.toggleCaseSensitiveSearch, this);
+ toolbar.appendToolbarItem(this.caseSensitiveButton);
}
- if (this._searchProvider.supportsRegexSearch()) {
- this._regexButton = new ToolbarToggle(i18nString(UIStrings.useRegularExpression));
- this._regexButton.setText('.*');
- this._regexButton.addEventListener(ToolbarButton.Events.Click, this._toggleRegexSearch, this);
- toolbar.appendToolbarItem(this._regexButton);
+ if (this.searchProvider.supportsRegexSearch()) {
+ this.regexButton = new ToolbarToggle(i18nString(UIStrings.useRegularExpression));
+ this.regexButton.setText('.*');
+ this.regexButton.addEventListener(ToolbarButton.Events.Click, this.toggleRegexSearch, this);
+ toolbar.appendToolbarItem(this.regexButton);
}
const cancelButtonElement =
createTextButton(i18nString(UIStrings.cancel), this.closeSearch.bind(this), 'search-action-button');
firstRowButtons.appendChild(cancelButtonElement);
- this._secondRowButtons = this._buttonsContainer.createChild('div', 'second-row-buttons hidden');
+ this.secondRowButtons = this.buttonsContainer.createChild('div', 'second-row-buttons hidden');
- this._replaceButtonElement =
- createTextButton(i18nString(UIStrings.replace), this._replace.bind(this), 'search-action-button');
- this._replaceButtonElement.disabled = true;
- this._secondRowButtons.appendChild(this._replaceButtonElement);
+ this.replaceButtonElement =
+ createTextButton(i18nString(UIStrings.replace), this.replace.bind(this), 'search-action-button');
+ this.replaceButtonElement.disabled = true;
+ this.secondRowButtons.appendChild(this.replaceButtonElement);
- this._replaceAllButtonElement =
- createTextButton(i18nString(UIStrings.replaceAll), this._replaceAll.bind(this), 'search-action-button');
- this._secondRowButtons.appendChild(this._replaceAllButtonElement);
- this._replaceAllButtonElement.disabled = true;
+ this.replaceAllButtonElement =
+ createTextButton(i18nString(UIStrings.replaceAll), this.replaceAll.bind(this), 'search-action-button');
+ this.secondRowButtons.appendChild(this.replaceAllButtonElement);
+ this.replaceAllButtonElement.disabled = true;
- this._minimalSearchQuerySize = 3;
- this._loadSetting();
+ this.minimalSearchQuerySize = 3;
+ this.loadSetting();
}
static fromElement(element: Element|null): SearchableView|null {
@@ -226,136 +224,136 @@
return view;
}
- _toggleCaseSensitiveSearch(): void {
- if (this._caseSensitiveButton) {
- this._caseSensitiveButton.setToggled(!this._caseSensitiveButton.toggled());
+ private toggleCaseSensitiveSearch(): void {
+ if (this.caseSensitiveButton) {
+ this.caseSensitiveButton.setToggled(!this.caseSensitiveButton.toggled());
}
- this._saveSetting();
- this._performSearch(false, true);
+ this.saveSetting();
+ this.performSearch(false, true);
}
- _toggleRegexSearch(): void {
- if (this._regexButton) {
- this._regexButton.setToggled(!this._regexButton.toggled());
+ private toggleRegexSearch(): void {
+ if (this.regexButton) {
+ this.regexButton.setToggled(!this.regexButton.toggled());
}
- this._saveSetting();
- this._performSearch(false, true);
+ this.saveSetting();
+ this.performSearch(false, true);
}
- _toggleReplace(): void {
- this._replaceToggleButton.setToggled(!this._replaceToggleButton.toggled());
- this._updateSecondRowVisibility();
+ private toggleReplace(): void {
+ this.replaceToggleButton.setToggled(!this.replaceToggleButton.toggled());
+ this.updateSecondRowVisibility();
}
- _saveSetting(): void {
- if (!this._setting) {
+ private saveSetting(): void {
+ if (!this.setting) {
return;
}
- const settingValue = this._setting.get() || {};
- if (this._caseSensitiveButton) {
- settingValue.caseSensitive = this._caseSensitiveButton.toggled();
+ const settingValue = this.setting.get() || {};
+ if (this.caseSensitiveButton) {
+ settingValue.caseSensitive = this.caseSensitiveButton.toggled();
}
- if (this._regexButton) {
- settingValue.isRegex = this._regexButton.toggled();
+ if (this.regexButton) {
+ settingValue.isRegex = this.regexButton.toggled();
}
- this._setting.set(settingValue);
+ this.setting.set(settingValue);
}
- _loadSetting(): void {
- const settingValue = this._setting ? (this._setting.get() || {}) : {};
- if (this._searchProvider.supportsCaseSensitiveSearch() && this._caseSensitiveButton) {
- this._caseSensitiveButton.setToggled(Boolean(settingValue.caseSensitive));
+ private loadSetting(): void {
+ const settingValue = this.setting ? (this.setting.get() || {}) : {};
+ if (this.searchProvider.supportsCaseSensitiveSearch() && this.caseSensitiveButton) {
+ this.caseSensitiveButton.setToggled(Boolean(settingValue.caseSensitive));
}
- if (this._searchProvider.supportsRegexSearch() && this._regexButton) {
- this._regexButton.setToggled(Boolean(settingValue.isRegex));
+ if (this.searchProvider.supportsRegexSearch() && this.regexButton) {
+ this.regexButton.setToggled(Boolean(settingValue.isRegex));
}
}
setMinimalSearchQuerySize(minimalSearchQuerySize: number): void {
- this._minimalSearchQuerySize = minimalSearchQuerySize;
+ this.minimalSearchQuerySize = minimalSearchQuerySize;
}
setPlaceholder(placeholder: string, ariaLabel?: string): void {
- this._searchInputElement.placeholder = placeholder;
+ this.searchInputElement.placeholder = placeholder;
if (ariaLabel) {
- ARIAUtils.setAccessibleName(this._searchInputElement, ariaLabel);
+ ARIAUtils.setAccessibleName(this.searchInputElement, ariaLabel);
}
}
setReplaceable(replaceable: boolean): void {
- this._replaceable = replaceable;
+ this.replaceable = replaceable;
}
updateSearchMatchesCount(matches: number): void {
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- const untypedSearchProvider = (this._searchProvider as any);
+ const untypedSearchProvider = (this.searchProvider as any);
if (untypedSearchProvider.currentSearchMatches === matches) {
return;
}
untypedSearchProvider.currentSearchMatches = matches;
- this._updateSearchMatchesCountAndCurrentMatchIndex(untypedSearchProvider.currentQuery ? matches : 0, -1);
+ this.updateSearchMatchesCountAndCurrentMatchIndex(untypedSearchProvider.currentQuery ? matches : 0, -1);
}
updateCurrentMatchIndex(currentMatchIndex: number): void {
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- const untypedSearchProvider = (this._searchProvider as any);
- this._updateSearchMatchesCountAndCurrentMatchIndex(untypedSearchProvider.currentSearchMatches, currentMatchIndex);
+ const untypedSearchProvider = (this.searchProvider as any);
+ this.updateSearchMatchesCountAndCurrentMatchIndex(untypedSearchProvider.currentSearchMatches, currentMatchIndex);
}
isSearchVisible(): boolean {
- return Boolean(this._searchIsVisible);
+ return Boolean(this.searchIsVisible);
}
closeSearch(): void {
this.cancelSearch();
- if (this._footerElementContainer.hasFocus()) {
+ if (this.footerElementContainer.hasFocus()) {
this.focus();
}
}
- _toggleSearchBar(toggled: boolean): void {
- this._footerElementContainer.classList.toggle('hidden', !toggled);
+ private toggleSearchBar(toggled: boolean): void {
+ this.footerElementContainer.classList.toggle('hidden', !toggled);
this.doResize();
}
cancelSearch(): void {
- if (!this._searchIsVisible) {
+ if (!this.searchIsVisible) {
return;
}
this.resetSearch();
- delete this._searchIsVisible;
- this._toggleSearchBar(false);
+ delete this.searchIsVisible;
+ this.toggleSearchBar(false);
}
resetSearch(): void {
- this._clearSearch();
- this._updateReplaceVisibility();
- this._matchesElement.textContent = '';
+ this.clearSearch();
+ this.updateReplaceVisibility();
+ this.matchesElement.textContent = '';
}
refreshSearch(): void {
- if (!this._searchIsVisible) {
+ if (!this.searchIsVisible) {
return;
}
this.resetSearch();
- this._performSearch(false, false);
+ this.performSearch(false, false);
}
handleFindNextShortcut(): boolean {
- if (!this._searchIsVisible) {
+ if (!this.searchIsVisible) {
return false;
}
- this._searchProvider.jumpToNextSearchResult();
+ this.searchProvider.jumpToNextSearchResult();
return true;
}
handleFindPreviousShortcut(): boolean {
- if (!this._searchIsVisible) {
+ if (!this.searchIsVisible) {
return false;
}
- this._searchProvider.jumpToPreviousSearchResult();
+ this.searchProvider.jumpToPreviousSearchResult();
return true;
}
@@ -365,66 +363,66 @@
}
handleCancelSearchShortcut(): boolean {
- if (!this._searchIsVisible) {
+ if (!this.searchIsVisible) {
return false;
}
this.closeSearch();
return true;
}
- _updateSearchNavigationButtonState(enabled: boolean): void {
- this._replaceButtonElement.disabled = !enabled;
- this._replaceAllButtonElement.disabled = !enabled;
- this._searchNavigationPrevElement.classList.toggle('enabled', enabled);
- this._searchNavigationNextElement.classList.toggle('enabled', enabled);
+ private updateSearchNavigationButtonState(enabled: boolean): void {
+ this.replaceButtonElement.disabled = !enabled;
+ this.replaceAllButtonElement.disabled = !enabled;
+ this.searchNavigationPrevElement.classList.toggle('enabled', enabled);
+ this.searchNavigationNextElement.classList.toggle('enabled', enabled);
}
- _updateSearchMatchesCountAndCurrentMatchIndex(matches: number, currentMatchIndex: number): void {
- if (!this._currentQuery) {
- this._matchesElement.textContent = '';
+ private updateSearchMatchesCountAndCurrentMatchIndex(matches: number, currentMatchIndex: number): void {
+ if (!this.currentQuery) {
+ this.matchesElement.textContent = '';
} else if (matches === 0 || currentMatchIndex >= 0) {
- this._matchesElement.textContent = i18nString(UIStrings.dOfD, {PH1: currentMatchIndex + 1, PH2: matches});
+ this.matchesElement.textContent = i18nString(UIStrings.dOfD, {PH1: currentMatchIndex + 1, PH2: matches});
} else if (matches === 1) {
- this._matchesElement.textContent = i18nString(UIStrings.matchString);
+ this.matchesElement.textContent = i18nString(UIStrings.matchString);
} else {
- this._matchesElement.textContent = i18nString(UIStrings.dMatches, {PH1: matches});
+ this.matchesElement.textContent = i18nString(UIStrings.dMatches, {PH1: matches});
}
- this._updateSearchNavigationButtonState(matches > 0);
+ this.updateSearchNavigationButtonState(matches > 0);
}
showSearchField(): void {
- if (this._searchIsVisible) {
+ if (this.searchIsVisible) {
this.cancelSearch();
}
let queryCandidate;
- if (!this._searchInputElement.hasFocus()) {
+ if (!this.searchInputElement.hasFocus()) {
const selection = InspectorView.instance().element.window().getSelection();
if (selection && selection.rangeCount) {
queryCandidate = selection.toString().replace(/\r?\n.*/, '');
}
}
- this._toggleSearchBar(true);
- this._updateReplaceVisibility();
+ this.toggleSearchBar(true);
+ this.updateReplaceVisibility();
if (queryCandidate) {
- this._searchInputElement.value = queryCandidate;
+ this.searchInputElement.value = queryCandidate;
}
- this._performSearch(false, false);
- this._searchInputElement.focus();
- this._searchInputElement.select();
- this._searchIsVisible = true;
+ this.performSearch(false, false);
+ this.searchInputElement.focus();
+ this.searchInputElement.select();
+ this.searchIsVisible = true;
}
- _updateReplaceVisibility(): void {
- this._replaceToggleButton.setVisible(this._replaceable);
- if (!this._replaceable) {
- this._replaceToggleButton.setToggled(false);
- this._updateSecondRowVisibility();
+ private updateReplaceVisibility(): void {
+ this.replaceToggleButton.setVisible(this.replaceable);
+ if (!this.replaceable) {
+ this.replaceToggleButton.setToggled(false);
+ this.updateSecondRowVisibility();
}
}
- _onSearchKeyDown(ev: Event): void {
+ private onSearchKeyDown(ev: Event): void {
const event = (ev as KeyboardEvent);
if (isEscKey(event)) {
this.closeSearch();
@@ -435,146 +433,146 @@
return;
}
- if (!this._currentQuery) {
- this._performSearch(true, true, event.shiftKey);
+ if (!this.currentQuery) {
+ this.performSearch(true, true, event.shiftKey);
} else {
- this._jumpToNextSearchResult(event.shiftKey);
+ this.jumpToNextSearchResult(event.shiftKey);
}
}
- _onReplaceKeyDown(event: KeyboardEvent): void {
+ private onReplaceKeyDown(event: KeyboardEvent): void {
if (event.key === 'Enter') {
- this._replace();
+ this.replace();
}
}
- _jumpToNextSearchResult(isBackwardSearch?: boolean): void {
- if (!this._currentQuery) {
+ private jumpToNextSearchResult(isBackwardSearch?: boolean): void {
+ if (!this.currentQuery) {
return;
}
if (isBackwardSearch) {
- this._searchProvider.jumpToPreviousSearchResult();
+ this.searchProvider.jumpToPreviousSearchResult();
} else {
- this._searchProvider.jumpToNextSearchResult();
+ this.searchProvider.jumpToNextSearchResult();
}
}
- _onNextButtonSearch(_event: Event): void {
- if (!this._searchNavigationNextElement.classList.contains('enabled')) {
+ private onNextButtonSearch(_event: Event): void {
+ if (!this.searchNavigationNextElement.classList.contains('enabled')) {
return;
}
- this._jumpToNextSearchResult();
- this._searchInputElement.focus();
+ this.jumpToNextSearchResult();
+ this.searchInputElement.focus();
}
- _onPrevButtonSearch(_event: Event): void {
- if (!this._searchNavigationPrevElement.classList.contains('enabled')) {
+ private onPrevButtonSearch(_event: Event): void {
+ if (!this.searchNavigationPrevElement.classList.contains('enabled')) {
return;
}
- this._jumpToNextSearchResult(true);
- this._searchInputElement.focus();
+ this.jumpToNextSearchResult(true);
+ this.searchInputElement.focus();
}
- _onFindClick(_event: Event): void {
- if (!this._currentQuery) {
- this._performSearch(true, true);
+ private onFindClick(_event: Event): void {
+ if (!this.currentQuery) {
+ this.performSearch(true, true);
} else {
- this._jumpToNextSearchResult();
+ this.jumpToNextSearchResult();
}
- this._searchInputElement.focus();
+ this.searchInputElement.focus();
}
- _onPreviousClick(_event: Event): void {
- if (!this._currentQuery) {
- this._performSearch(true, true, true);
+ private onPreviousClick(_event: Event): void {
+ if (!this.currentQuery) {
+ this.performSearch(true, true, true);
} else {
- this._jumpToNextSearchResult(true);
+ this.jumpToNextSearchResult(true);
}
- this._searchInputElement.focus();
+ this.searchInputElement.focus();
}
- _clearSearch(): void {
+ private clearSearch(): void {
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- const untypedSearchProvider = (this._searchProvider as any);
- delete this._currentQuery;
+ const untypedSearchProvider = (this.searchProvider as any);
+ delete this.currentQuery;
if (Boolean(untypedSearchProvider.currentQuery)) {
delete untypedSearchProvider.currentQuery;
- this._searchProvider.searchCanceled();
+ this.searchProvider.searchCanceled();
}
- this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
+ this.updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
}
- _performSearch(forceSearch: boolean, shouldJump: boolean, jumpBackwards?: boolean): void {
- const query = this._searchInputElement.value;
- if (!query || (!forceSearch && query.length < this._minimalSearchQuerySize && !this._currentQuery)) {
- this._clearSearch();
+ private performSearch(forceSearch: boolean, shouldJump: boolean, jumpBackwards?: boolean): void {
+ const query = this.searchInputElement.value;
+ if (!query || (!forceSearch && query.length < this.minimalSearchQuerySize && !this.currentQuery)) {
+ this.clearSearch();
return;
}
- this._currentQuery = query;
+ this.currentQuery = query;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- (this._searchProvider as any).currentQuery = query;
+ (this.searchProvider as any).currentQuery = query;
- const searchConfig = this._currentSearchConfig();
- this._searchProvider.performSearch(searchConfig, shouldJump, jumpBackwards);
+ const searchConfig = this.currentSearchConfig();
+ this.searchProvider.performSearch(searchConfig, shouldJump, jumpBackwards);
}
- _currentSearchConfig(): SearchConfig {
- const query = this._searchInputElement.value;
- const caseSensitive = this._caseSensitiveButton ? this._caseSensitiveButton.toggled() : false;
- const isRegex = this._regexButton ? this._regexButton.toggled() : false;
+ private currentSearchConfig(): SearchConfig {
+ const query = this.searchInputElement.value;
+ const caseSensitive = this.caseSensitiveButton ? this.caseSensitiveButton.toggled() : false;
+ const isRegex = this.regexButton ? this.regexButton.toggled() : false;
return new SearchConfig(query, caseSensitive, isRegex);
}
- _updateSecondRowVisibility(): void {
- const secondRowVisible = this._replaceToggleButton.toggled();
- this._footerElementContainer.classList.toggle('replaceable', secondRowVisible);
- this._secondRowButtons.classList.toggle('hidden', !secondRowVisible);
- this._replaceInputElement.classList.toggle('hidden', !secondRowVisible);
+ private updateSecondRowVisibility(): void {
+ const secondRowVisible = this.replaceToggleButton.toggled();
+ this.footerElementContainer.classList.toggle('replaceable', secondRowVisible);
+ this.secondRowButtons.classList.toggle('hidden', !secondRowVisible);
+ this.replaceInputElement.classList.toggle('hidden', !secondRowVisible);
if (secondRowVisible) {
- this._replaceInputElement.focus();
+ this.replaceInputElement.focus();
} else {
- this._searchInputElement.focus();
+ this.searchInputElement.focus();
}
this.doResize();
}
- _replace(): void {
- if (!this._replaceProvider) {
+ private replace(): void {
+ if (!this.replaceProvider) {
throw new Error('No \'replacable\' provided to SearchableView!');
}
- const searchConfig = this._currentSearchConfig();
- this._replaceProvider.replaceSelectionWith(searchConfig, this._replaceInputElement.value);
- delete this._currentQuery;
- this._performSearch(true, true);
+ const searchConfig = this.currentSearchConfig();
+ this.replaceProvider.replaceSelectionWith(searchConfig, this.replaceInputElement.value);
+ delete this.currentQuery;
+ this.performSearch(true, true);
}
- _replaceAll(): void {
- if (!this._replaceProvider) {
+ private replaceAll(): void {
+ if (!this.replaceProvider) {
throw new Error('No \'replacable\' provided to SearchableView!');
}
- const searchConfig = this._currentSearchConfig();
- this._replaceProvider.replaceAllWith(searchConfig, this._replaceInputElement.value);
+ const searchConfig = this.currentSearchConfig();
+ this.replaceProvider.replaceAllWith(searchConfig, this.replaceInputElement.value);
}
- _onInput(_event: Event): void {
- if (this._valueChangedTimeoutId) {
- clearTimeout(this._valueChangedTimeoutId);
+ private onInput(_event: Event): void {
+ if (this.valueChangedTimeoutId) {
+ clearTimeout(this.valueChangedTimeoutId);
}
- const timeout = this._searchInputElement.value.length < 3 ? 200 : 0;
- this._valueChangedTimeoutId = setTimeout(this._onValueChanged.bind(this), timeout);
+ const timeout = this.searchInputElement.value.length < 3 ? 200 : 0;
+ this.valueChangedTimeoutId = setTimeout(this.onValueChanged.bind(this), timeout);
}
- _onValueChanged(): void {
- if (!this._searchIsVisible) {
+ private onValueChanged(): void {
+ if (!this.searchIsVisible) {
return;
}
- delete this._valueChangedTimeoutId;
- this._performSearch(false, true);
+ delete this.valueChangedTimeoutId;
+ this.performSearch(false, true);
}
}
diff --git a/front_end/ui/legacy/SettingsUI.ts b/front_end/ui/legacy/SettingsUI.ts
index 2f5f986..2c94768 100644
--- a/front_end/ui/legacy/SettingsUI.ts
+++ b/front_end/ui/legacy/SettingsUI.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as i18n from '../../core/i18n/i18n.js';
diff --git a/front_end/ui/legacy/ShortcutRegistry.ts b/front_end/ui/legacy/ShortcutRegistry.ts
index 6efb153..ecf011e 100644
--- a/front_end/ui/legacy/ShortcutRegistry.ts
+++ b/front_end/ui/legacy/ShortcutRegistry.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as Platform from '../../core/platform/platform.js';
@@ -20,35 +18,35 @@
let shortcutRegistryInstance: ShortcutRegistry|undefined;
export class ShortcutRegistry {
- _actionRegistry: ActionRegistry;
- _actionToShortcut: Platform.MapUtilities.Multimap<string, KeyboardShortcut>;
- _keyMap: ShortcutTreeNode;
- _activePrefixKey: ShortcutTreeNode|null;
- _activePrefixTimeout: number|null;
- _consumePrefix: (() => Promise<void>)|null;
- _devToolsDefaultShortcutActions: Set<string>;
- _disabledDefaultShortcutsForAction: Platform.MapUtilities.Multimap<string, KeyboardShortcut>;
- _keybindSetSetting: Common.Settings.Setting<string>;
- _userShortcutsSetting: Common.Settings.Setting<KeyboardShortcut[]>;
+ private readonly actionRegistry: ActionRegistry;
+ private readonly actionToShortcut: Platform.MapUtilities.Multimap<string, KeyboardShortcut>;
+ private readonly keyMap: ShortcutTreeNode;
+ private activePrefixKey: ShortcutTreeNode|null;
+ private activePrefixTimeout: number|null;
+ private consumePrefix: (() => Promise<void>)|null;
+ private readonly devToolsDefaultShortcutActions: Set<string>;
+ private readonly disabledDefaultShortcutsForAction: Platform.MapUtilities.Multimap<string, KeyboardShortcut>;
+ private readonly keybindSetSetting: Common.Settings.Setting<string>;
+ private readonly userShortcutsSetting: Common.Settings.Setting<KeyboardShortcut[]>;
constructor(actionRegistry: ActionRegistry) {
- this._actionRegistry = actionRegistry;
- this._actionToShortcut = new Platform.MapUtilities.Multimap();
- this._keyMap = new ShortcutTreeNode(0, 0);
- this._activePrefixKey = null;
- this._activePrefixTimeout = null;
- this._consumePrefix = null;
- this._devToolsDefaultShortcutActions = new Set();
- this._disabledDefaultShortcutsForAction = new Platform.MapUtilities.Multimap();
- this._keybindSetSetting = Common.Settings.Settings.instance().moduleSetting('activeKeybindSet');
- this._keybindSetSetting.addChangeListener(event => {
+ this.actionRegistry = actionRegistry;
+ this.actionToShortcut = new Platform.MapUtilities.Multimap();
+ this.keyMap = new ShortcutTreeNode(0, 0);
+ this.activePrefixKey = null;
+ this.activePrefixTimeout = null;
+ this.consumePrefix = null;
+ this.devToolsDefaultShortcutActions = new Set();
+ this.disabledDefaultShortcutsForAction = new Platform.MapUtilities.Multimap();
+ this.keybindSetSetting = Common.Settings.Settings.instance().moduleSetting('activeKeybindSet');
+ this.keybindSetSetting.addChangeListener(event => {
Host.userMetrics.keybindSetSettingChanged(event.data);
- this._registerBindings();
+ this.registerBindings();
});
- this._userShortcutsSetting = Common.Settings.Settings.instance().moduleSetting('userShortcuts');
- this._userShortcutsSetting.addChangeListener(this._registerBindings, this);
+ this.userShortcutsSetting = Common.Settings.Settings.instance().moduleSetting('userShortcuts');
+ this.userShortcutsSetting.addChangeListener(this.registerBindings, this);
- this._registerBindings();
+ this.registerBindings();
}
static instance(opts: {
@@ -69,20 +67,20 @@
static removeInstance(): void {
shortcutRegistryInstance = undefined;
}
- _applicableActions(key: number, handlers: {
+ private applicableActions(key: number, handlers: {
[x: string]: () => Promise<boolean>,
}|undefined = {}): Action[] {
let actions: string[] = [];
- const keyMap = this._activePrefixKey || this._keyMap;
+ const keyMap = this.activePrefixKey || this.keyMap;
const keyNode = keyMap.getNode(key);
if (keyNode) {
actions = keyNode.actions();
}
- const applicableActions = this._actionRegistry.applicableActions(actions, Context.instance());
+ const applicableActions = this.actionRegistry.applicableActions(actions, Context.instance());
if (keyNode) {
for (const actionId of Object.keys(handlers)) {
if (keyNode.actions().indexOf(actionId) >= 0) {
- const action = this._actionRegistry.action(actionId);
+ const action = this.actionRegistry.action(actionId);
if (action) {
applicableActions.push(action);
}
@@ -93,14 +91,14 @@
}
shortcutsForAction(action: string): KeyboardShortcut[] {
- return [...this._actionToShortcut.get(action)];
+ return [...this.actionToShortcut.get(action)];
}
actionsForDescriptors(descriptors: {
key: number,
name: string,
}[]): string[] {
- let keyMapNode: (ShortcutTreeNode|null)|ShortcutTreeNode = this._keyMap;
+ let keyMapNode: (ShortcutTreeNode|null)|ShortcutTreeNode = this.keyMap;
for (const {key} of descriptors) {
if (!keyMapNode) {
return [];
@@ -112,9 +110,9 @@
globalShortcutKeys(): number[] {
const keys = [];
- for (const node of this._keyMap.chords().values()) {
+ for (const node of this.keyMap.chords().values()) {
const actions = node.actions();
- const applicableActions = this._actionRegistry.applicableActions(actions, Context.instance());
+ const applicableActions = this.actionRegistry.applicableActions(actions, Context.instance());
if (applicableActions.length || node.hasChords()) {
keys.push(node.key());
}
@@ -124,13 +122,13 @@
keysForActions(actionIds: string[]): number[] {
const keys = actionIds.flatMap(
- action => [...this._actionToShortcut.get(action)].flatMap(
+ action => [...this.actionToShortcut.get(action)].flatMap(
shortcut => shortcut.descriptors.map(descriptor => descriptor.key)));
return [...(new Set(keys))];
}
shortcutTitleForAction(actionId: string): string|undefined {
- for (const shortcut of this._actionToShortcut.get(actionId)) {
+ for (const shortcut of this.actionToShortcut.get(actionId)) {
return shortcut.title();
}
return undefined;
@@ -143,7 +141,7 @@
}
actionHasDefaultShortcut(actionId: string): boolean {
- return this._devToolsDefaultShortcutActions.has(actionId);
+ return this.devToolsDefaultShortcutActions.has(actionId);
}
addShortcutListener(element: Element, handlers: {
@@ -152,14 +150,14 @@
// We only want keys for these specific actions to get handled this
// way; all others should be allowed to bubble up.
const allowlistKeyMap = new ShortcutTreeNode(0, 0);
- const shortcuts = Object.keys(handlers).flatMap(action => [...this._actionToShortcut.get(action)]);
+ const shortcuts = Object.keys(handlers).flatMap(action => [...this.actionToShortcut.get(action)]);
shortcuts.forEach(shortcut => {
allowlistKeyMap.addKeyMapping(shortcut.descriptors.map(descriptor => descriptor.key), shortcut.action);
});
const listener = (event: Event): void => {
const key = KeyboardShortcut.makeKeyFromEvent((event as KeyboardEvent));
- const keyMap = this._activePrefixKey ? allowlistKeyMap.getNode(this._activePrefixKey.key()) : allowlistKeyMap;
+ const keyMap = this.activePrefixKey ? allowlistKeyMap.getNode(this.activePrefixKey.key()) : allowlistKeyMap;
if (!keyMap) {
return;
}
@@ -175,10 +173,10 @@
[x: string]: () => Promise<boolean>,
}): Promise<void> {
const keyModifiers = key >> 8;
- const hasHandlersOrPrefixKey = Boolean(handlers) || Boolean(this._activePrefixKey);
- const keyMapNode = this._keyMap.getNode(key);
+ const hasHandlersOrPrefixKey = Boolean(handlers) || Boolean(this.activePrefixKey);
+ const keyMapNode = this.keyMap.getNode(key);
const maybeHasActions =
- (this._applicableActions(key, handlers)).length > 0 || (keyMapNode && keyMapNode.hasChords());
+ (this.applicableActions(key, handlers)).length > 0 || (keyMapNode && keyMapNode.hasChords());
if ((!hasHandlersOrPrefixKey && isPossiblyInputKey()) || !maybeHasActions ||
KeyboardShortcut.isModifier(KeyboardShortcut.keyCodeAndModifiersFromKey(key).keyCode)) {
return;
@@ -190,26 +188,26 @@
return;
}
- if (this._activePrefixTimeout) {
- clearTimeout(this._activePrefixTimeout);
+ if (this.activePrefixTimeout) {
+ clearTimeout(this.activePrefixTimeout);
const handled = await maybeExecuteActionForKey.call(this);
- this._activePrefixKey = null;
- this._activePrefixTimeout = null;
+ this.activePrefixKey = null;
+ this.activePrefixTimeout = null;
if (handled) {
return;
}
- if (this._consumePrefix) {
- await this._consumePrefix();
+ if (this.consumePrefix) {
+ await this.consumePrefix();
}
}
if (keyMapNode && keyMapNode.hasChords()) {
- this._activePrefixKey = keyMapNode;
- this._consumePrefix = async(): Promise<void> => {
- this._activePrefixKey = null;
- this._activePrefixTimeout = null;
+ this.activePrefixKey = keyMapNode;
+ this.consumePrefix = async(): Promise<void> => {
+ this.activePrefixKey = null;
+ this.activePrefixTimeout = null;
await maybeExecuteActionForKey.call(this);
};
- this._activePrefixTimeout = window.setTimeout(this._consumePrefix, KeyTimeout);
+ this.activePrefixTimeout = window.setTimeout(this.consumePrefix, KeyTimeout);
} else {
await maybeExecuteActionForKey.call(this);
}
@@ -258,7 +256,7 @@
/** ;
*/
async function maybeExecuteActionForKey(this: ShortcutRegistry): Promise<boolean> {
- const actions = this._applicableActions(key, handlers);
+ const actions = this.applicableActions(key, handlers);
if (!actions.length) {
return false;
}
@@ -280,79 +278,79 @@
}
registerUserShortcut(shortcut: KeyboardShortcut): void {
- for (const otherShortcut of this._disabledDefaultShortcutsForAction.get(shortcut.action)) {
+ for (const otherShortcut of this.disabledDefaultShortcutsForAction.get(shortcut.action)) {
if (otherShortcut.descriptorsMatch(shortcut.descriptors) &&
- otherShortcut.hasKeybindSet(this._keybindSetSetting.get())) {
+ otherShortcut.hasKeybindSet(this.keybindSetSetting.get())) {
// this user shortcut is the same as a disabled default shortcut,
// so we should just enable the default
this.removeShortcut(otherShortcut);
return;
}
}
- for (const otherShortcut of this._actionToShortcut.get(shortcut.action)) {
+ for (const otherShortcut of this.actionToShortcut.get(shortcut.action)) {
if (otherShortcut.descriptorsMatch(shortcut.descriptors) &&
- otherShortcut.hasKeybindSet(this._keybindSetSetting.get())) {
+ otherShortcut.hasKeybindSet(this.keybindSetSetting.get())) {
// don't allow duplicate shortcuts
return;
}
}
- this._addShortcutToSetting(shortcut);
+ this.addShortcutToSetting(shortcut);
}
removeShortcut(shortcut: KeyboardShortcut): void {
if (shortcut.type === Type.DefaultShortcut || shortcut.type === Type.KeybindSetShortcut) {
- this._addShortcutToSetting(shortcut.changeType(Type.DisabledDefault));
+ this.addShortcutToSetting(shortcut.changeType(Type.DisabledDefault));
} else {
- this._removeShortcutFromSetting(shortcut);
+ this.removeShortcutFromSetting(shortcut);
}
}
disabledDefaultsForAction(actionId: string): Set<KeyboardShortcut> {
- return this._disabledDefaultShortcutsForAction.get(actionId);
+ return this.disabledDefaultShortcutsForAction.get(actionId);
}
- _addShortcutToSetting(shortcut: KeyboardShortcut): void {
- const userShortcuts = this._userShortcutsSetting.get();
+ private addShortcutToSetting(shortcut: KeyboardShortcut): void {
+ const userShortcuts = this.userShortcutsSetting.get();
userShortcuts.push(shortcut);
- this._userShortcutsSetting.set(userShortcuts);
+ this.userShortcutsSetting.set(userShortcuts);
}
- _removeShortcutFromSetting(shortcut: KeyboardShortcut): void {
- const userShortcuts = this._userShortcutsSetting.get();
+ private removeShortcutFromSetting(shortcut: KeyboardShortcut): void {
+ const userShortcuts = this.userShortcutsSetting.get();
const index = userShortcuts.findIndex(shortcut.equals, shortcut);
if (index !== -1) {
userShortcuts.splice(index, 1);
- this._userShortcutsSetting.set(userShortcuts);
+ this.userShortcutsSetting.set(userShortcuts);
}
}
- _registerShortcut(shortcut: KeyboardShortcut): void {
- this._actionToShortcut.set(shortcut.action, shortcut);
- this._keyMap.addKeyMapping(shortcut.descriptors.map(descriptor => descriptor.key), shortcut.action);
+ private registerShortcut(shortcut: KeyboardShortcut): void {
+ this.actionToShortcut.set(shortcut.action, shortcut);
+ this.keyMap.addKeyMapping(shortcut.descriptors.map(descriptor => descriptor.key), shortcut.action);
}
- _registerBindings(): void {
- this._actionToShortcut.clear();
- this._keyMap.clear();
- const keybindSet = this._keybindSetSetting.get();
- this._disabledDefaultShortcutsForAction.clear();
- this._devToolsDefaultShortcutActions.clear();
+ private registerBindings(): void {
+ this.actionToShortcut.clear();
+ this.keyMap.clear();
+ const keybindSet = this.keybindSetSetting.get();
+ this.disabledDefaultShortcutsForAction.clear();
+ this.devToolsDefaultShortcutActions.clear();
const forwardedKeys: {
keyCode: number,
modifiers: number,
}[] = [];
if (Root.Runtime.experiments.isEnabled('keyboardShortcutEditor')) {
- const userShortcuts = this._userShortcutsSetting.get();
+ const userShortcuts = this.userShortcutsSetting.get();
for (const userShortcut of userShortcuts) {
const shortcut = KeyboardShortcut.createShortcutFromSettingObject(userShortcut);
if (shortcut.type === Type.DisabledDefault) {
- this._disabledDefaultShortcutsForAction.set(shortcut.action, shortcut);
+ this.disabledDefaultShortcutsForAction.set(shortcut.action, shortcut);
} else {
if (ForwardedActions.has(shortcut.action)) {
forwardedKeys.push(
...shortcut.descriptors.map(descriptor => KeyboardShortcut.keyCodeAndModifiersFromKey(descriptor.key)));
}
- this._registerShortcut(shortcut);
+ this.registerShortcut(shortcut);
}
}
}
@@ -367,8 +365,8 @@
const keys = bindings[i].shortcut.split(/\s+/);
const shortcutDescriptors = keys.map(KeyboardShortcut.makeDescriptorFromBindingShortcut);
if (shortcutDescriptors.length > 0) {
- if (this._isDisabledDefault(shortcutDescriptors, actionId)) {
- this._devToolsDefaultShortcutActions.add(actionId);
+ if (this.isDisabledDefault(shortcutDescriptors, actionId)) {
+ this.devToolsDefaultShortcutActions.add(actionId);
continue;
}
@@ -377,13 +375,13 @@
...shortcutDescriptors.map(shortcut => KeyboardShortcut.keyCodeAndModifiersFromKey(shortcut.key)));
}
if (!keybindSets) {
- this._devToolsDefaultShortcutActions.add(actionId);
- this._registerShortcut(new KeyboardShortcut(shortcutDescriptors, actionId, Type.DefaultShortcut));
+ this.devToolsDefaultShortcutActions.add(actionId);
+ this.registerShortcut(new KeyboardShortcut(shortcutDescriptors, actionId, Type.DefaultShortcut));
} else {
if (keybindSets.includes(KeybindSet.DEVTOOLS_DEFAULT)) {
- this._devToolsDefaultShortcutActions.add(actionId);
+ this.devToolsDefaultShortcutActions.add(actionId);
}
- this._registerShortcut(
+ this.registerShortcut(
new KeyboardShortcut(shortcutDescriptors, actionId, Type.KeybindSetShortcut, new Set(keybindSets)));
}
}
@@ -412,13 +410,13 @@
}
}
- _isDisabledDefault(
+ private isDisabledDefault(
shortcutDescriptors: {
key: number,
name: string,
}[],
action: string): boolean {
- const disabledDefaults = this._disabledDefaultShortcutsForAction.get(action);
+ const disabledDefaults = this.disabledDefaultShortcutsForAction.get(action);
for (const disabledDefault of disabledDefaults) {
if (disabledDefault.descriptorsMatch(shortcutDescriptors)) {
return true;
@@ -429,61 +427,61 @@
}
export class ShortcutTreeNode {
- _key: number;
- _actions: string[];
- _chords: Map<number, ShortcutTreeNode>;
- _depth: number;
+ private readonly keyInternal: number;
+ private actionsInternal: string[];
+ private chordsInternal: Map<number, ShortcutTreeNode>;
+ private readonly depth: number;
constructor(key: number, depth: number = 0) {
- this._key = key;
- this._actions = [];
- this._chords = new Map();
- this._depth = depth;
+ this.keyInternal = key;
+ this.actionsInternal = [];
+ this.chordsInternal = new Map();
+ this.depth = depth;
}
addAction(action: string): void {
- this._actions.push(action);
+ this.actionsInternal.push(action);
}
key(): number {
- return this._key;
+ return this.keyInternal;
}
chords(): Map<number, ShortcutTreeNode> {
- return this._chords;
+ return this.chordsInternal;
}
hasChords(): boolean {
- return this._chords.size > 0;
+ return this.chordsInternal.size > 0;
}
addKeyMapping(keys: number[], action: string): void {
- if (keys.length < this._depth) {
+ if (keys.length < this.depth) {
return;
}
- if (keys.length === this._depth) {
+ if (keys.length === this.depth) {
this.addAction(action);
} else {
- const key = keys[this._depth];
- if (!this._chords.has(key)) {
- this._chords.set(key, new ShortcutTreeNode(key, this._depth + 1));
+ const key = keys[this.depth];
+ if (!this.chordsInternal.has(key)) {
+ this.chordsInternal.set(key, new ShortcutTreeNode(key, this.depth + 1));
}
- (this._chords.get(key) as ShortcutTreeNode).addKeyMapping(keys, action);
+ (this.chordsInternal.get(key) as ShortcutTreeNode).addKeyMapping(keys, action);
}
}
getNode(key: number): ShortcutTreeNode|null {
- return this._chords.get(key) || null;
+ return this.chordsInternal.get(key) || null;
}
actions(): string[] {
- return this._actions;
+ return this.actionsInternal;
}
clear(): void {
- this._actions = [];
- this._chords = new Map();
+ this.actionsInternal = [];
+ this.chordsInternal = new Map();
}
}
diff --git a/front_end/ui/legacy/SoftContextMenu.ts b/front_end/ui/legacy/SoftContextMenu.ts
index 8c887ea..6f9225c 100644
--- a/front_end/ui/legacy/SoftContextMenu.ts
+++ b/front_end/ui/legacy/SoftContextMenu.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
import type * as Platform from '../../core/platform/platform.js';
@@ -67,115 +65,115 @@
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class SoftContextMenu {
- _items: SoftContextMenuDescriptor[];
- _itemSelectedCallback: (arg0: number) => void;
- _parentMenu: SoftContextMenu|undefined;
- _highlightedMenuItemElement: HTMLElement|null;
+ private items: SoftContextMenuDescriptor[];
+ private itemSelectedCallback: (arg0: number) => void;
+ private parentMenu: SoftContextMenu|undefined;
+ private highlightedMenuItemElement: HTMLElement|null;
detailsForElementMap: WeakMap<HTMLElement, ElementMenuDetails>;
- _document?: Document;
- _glassPane?: GlassPane;
- _contextMenuElement?: HTMLElement;
- _focusRestorer?: ElementFocusRestorer;
- _hideOnUserGesture?: ((event: Event) => void);
- _activeSubMenuElement?: HTMLElement;
- _subMenu?: SoftContextMenu;
+ private document?: Document;
+ private glassPane?: GlassPane;
+ private contextMenuElement?: HTMLElement;
+ private focusRestorer?: ElementFocusRestorer;
+ private hideOnUserGesture?: ((event: Event) => void);
+ private activeSubMenuElement?: HTMLElement;
+ private subMenu?: SoftContextMenu;
constructor(
items: SoftContextMenuDescriptor[], itemSelectedCallback: (arg0: number) => void, parentMenu?: SoftContextMenu) {
- this._items = items;
- this._itemSelectedCallback = itemSelectedCallback;
- this._parentMenu = parentMenu;
- this._highlightedMenuItemElement = null;
+ this.items = items;
+ this.itemSelectedCallback = itemSelectedCallback;
+ this.parentMenu = parentMenu;
+ this.highlightedMenuItemElement = null;
this.detailsForElementMap = new WeakMap();
}
show(document: Document, anchorBox: AnchorBox): void {
- if (!this._items.length) {
+ if (!this.items.length) {
return;
}
- this._document = document;
+ this.document = document;
- this._glassPane = new GlassPane();
- this._glassPane.setPointerEventsBehavior(
- this._parentMenu ? PointerEventsBehavior.PierceGlassPane : PointerEventsBehavior.BlockedByGlassPane);
- this._glassPane.registerRequiredCSS('ui/legacy/softContextMenu.css');
- this._glassPane.setContentAnchorBox(anchorBox);
- this._glassPane.setSizeBehavior(SizeBehavior.MeasureContent);
- this._glassPane.setMarginBehavior(MarginBehavior.NoMargin);
- this._glassPane.setAnchorBehavior(this._parentMenu ? AnchorBehavior.PreferRight : AnchorBehavior.PreferBottom);
+ this.glassPane = new GlassPane();
+ this.glassPane.setPointerEventsBehavior(
+ this.parentMenu ? PointerEventsBehavior.PierceGlassPane : PointerEventsBehavior.BlockedByGlassPane);
+ this.glassPane.registerRequiredCSS('ui/legacy/softContextMenu.css');
+ this.glassPane.setContentAnchorBox(anchorBox);
+ this.glassPane.setSizeBehavior(SizeBehavior.MeasureContent);
+ this.glassPane.setMarginBehavior(MarginBehavior.NoMargin);
+ this.glassPane.setAnchorBehavior(this.parentMenu ? AnchorBehavior.PreferRight : AnchorBehavior.PreferBottom);
- this._contextMenuElement = this._glassPane.contentElement.createChild('div', 'soft-context-menu');
- this._contextMenuElement.tabIndex = -1;
- ARIAUtils.markAsMenu(this._contextMenuElement);
- this._contextMenuElement.addEventListener('mouseup', e => e.consume(), false);
- this._contextMenuElement.addEventListener('keydown', this._menuKeyDown.bind(this), false);
+ this.contextMenuElement = this.glassPane.contentElement.createChild('div', 'soft-context-menu');
+ this.contextMenuElement.tabIndex = -1;
+ ARIAUtils.markAsMenu(this.contextMenuElement);
+ this.contextMenuElement.addEventListener('mouseup', e => e.consume(), false);
+ this.contextMenuElement.addEventListener('keydown', this.menuKeyDown.bind(this), false);
- for (let i = 0; i < this._items.length; ++i) {
- this._contextMenuElement.appendChild(this._createMenuItem(this._items[i]));
+ for (let i = 0; i < this.items.length; ++i) {
+ this.contextMenuElement.appendChild(this.createMenuItem(this.items[i]));
}
- this._glassPane.show(document);
- this._focusRestorer = new ElementFocusRestorer(this._contextMenuElement);
+ this.glassPane.show(document);
+ this.focusRestorer = new ElementFocusRestorer(this.contextMenuElement);
- if (!this._parentMenu) {
- this._hideOnUserGesture = (event: Event): void => {
+ if (!this.parentMenu) {
+ this.hideOnUserGesture = (event: Event): void => {
// If a user clicks on any submenu, prevent the menu system from closing.
- let subMenu: (SoftContextMenu|undefined) = this._subMenu;
+ let subMenu: (SoftContextMenu|undefined) = this.subMenu;
while (subMenu) {
- if (subMenu._contextMenuElement === event.composedPath()[0]) {
+ if (subMenu.contextMenuElement === event.composedPath()[0]) {
return;
}
- subMenu = subMenu._subMenu;
+ subMenu = subMenu.subMenu;
}
this.discard();
event.consume(true);
};
- this._document.body.addEventListener('mousedown', this._hideOnUserGesture, false);
- if (this._document.defaultView) {
- this._document.defaultView.addEventListener('resize', this._hideOnUserGesture, false);
+ this.document.body.addEventListener('mousedown', this.hideOnUserGesture, false);
+ if (this.document.defaultView) {
+ this.document.defaultView.addEventListener('resize', this.hideOnUserGesture, false);
}
}
}
discard(): void {
- if (this._subMenu) {
- this._subMenu.discard();
+ if (this.subMenu) {
+ this.subMenu.discard();
}
- if (this._focusRestorer) {
- this._focusRestorer.restore();
+ if (this.focusRestorer) {
+ this.focusRestorer.restore();
}
- if (this._glassPane) {
- this._glassPane.hide();
- delete this._glassPane;
- if (this._hideOnUserGesture) {
- if (this._document) {
- this._document.body.removeEventListener('mousedown', this._hideOnUserGesture, false);
- if (this._document.defaultView) {
- this._document.defaultView.removeEventListener('resize', this._hideOnUserGesture, false);
+ if (this.glassPane) {
+ this.glassPane.hide();
+ delete this.glassPane;
+ if (this.hideOnUserGesture) {
+ if (this.document) {
+ this.document.body.removeEventListener('mousedown', this.hideOnUserGesture, false);
+ if (this.document.defaultView) {
+ this.document.defaultView.removeEventListener('resize', this.hideOnUserGesture, false);
}
}
- delete this._hideOnUserGesture;
+ delete this.hideOnUserGesture;
}
}
- if (this._parentMenu) {
- delete this._parentMenu._subMenu;
- if (this._parentMenu._activeSubMenuElement) {
- ARIAUtils.setExpanded(this._parentMenu._activeSubMenuElement, false);
- delete this._parentMenu._activeSubMenuElement;
+ if (this.parentMenu) {
+ delete this.parentMenu.subMenu;
+ if (this.parentMenu.activeSubMenuElement) {
+ ARIAUtils.setExpanded(this.parentMenu.activeSubMenuElement, false);
+ delete this.parentMenu.activeSubMenuElement;
}
}
}
- _createMenuItem(item: SoftContextMenuDescriptor): HTMLElement {
+ private createMenuItem(item: SoftContextMenuDescriptor): HTMLElement {
if (item.type === 'separator') {
- return this._createSeparator();
+ return this.createSeparator();
}
if (item.type === 'subMenu') {
- return this._createSubMenu(item);
+ return this.createSubMenu(item);
}
const menuItemElement = document.createElement('div');
@@ -209,12 +207,12 @@
createTextChild(menuItemElement, item.label || '');
menuItemElement.createChild('span', 'soft-context-menu-shortcut').textContent = item.shortcut || '';
- menuItemElement.addEventListener('mousedown', this._menuItemMouseDown.bind(this), false);
- menuItemElement.addEventListener('mouseup', this._menuItemMouseUp.bind(this), false);
+ menuItemElement.addEventListener('mousedown', this.menuItemMouseDown.bind(this), false);
+ menuItemElement.addEventListener('mouseup', this.menuItemMouseUp.bind(this), false);
// Manually manage hover highlight since :hover does not work in case of click-and-hold menu invocation.
- menuItemElement.addEventListener('mouseover', this._menuItemMouseOver.bind(this), false);
- menuItemElement.addEventListener('mouseleave', (this._menuItemMouseLeave.bind(this) as EventListener), false);
+ menuItemElement.addEventListener('mouseover', this.menuItemMouseOver.bind(this), false);
+ menuItemElement.addEventListener('mouseleave', (this.menuItemMouseLeave.bind(this) as EventListener), false);
detailsForElement.actionId = item.id;
@@ -236,7 +234,7 @@
return menuItemElement;
}
- _createSubMenu(item: SoftContextMenuDescriptor): HTMLElement {
+ private createSubMenu(item: SoftContextMenuDescriptor): HTMLElement {
const menuItemElement = document.createElement('div');
menuItemElement.classList.add('soft-context-menu-item');
menuItemElement.tabIndex = -1;
@@ -268,17 +266,17 @@
menuItemElement.appendChild(subMenuArrowElement);
}
- menuItemElement.addEventListener('mousedown', this._menuItemMouseDown.bind(this), false);
- menuItemElement.addEventListener('mouseup', this._menuItemMouseUp.bind(this), false);
+ menuItemElement.addEventListener('mousedown', this.menuItemMouseDown.bind(this), false);
+ menuItemElement.addEventListener('mouseup', this.menuItemMouseUp.bind(this), false);
// Manually manage hover highlight since :hover does not work in case of click-and-hold menu invocation.
- menuItemElement.addEventListener('mouseover', this._menuItemMouseOver.bind(this), false);
- menuItemElement.addEventListener('mouseleave', (this._menuItemMouseLeave.bind(this) as EventListener), false);
+ menuItemElement.addEventListener('mouseover', this.menuItemMouseOver.bind(this), false);
+ menuItemElement.addEventListener('mouseleave', (this.menuItemMouseLeave.bind(this) as EventListener), false);
return menuItemElement;
}
- _createSeparator(): HTMLElement {
+ private createSeparator(): HTMLElement {
const separatorElement = document.createElement('div');
separatorElement.classList.add('soft-context-menu-separator');
this.detailsForElementMap.set(separatorElement, {
@@ -292,43 +290,43 @@
return separatorElement;
}
- _menuItemMouseDown(event: Event): void {
+ private menuItemMouseDown(event: Event): void {
// Do not let separator's mouse down hit menu's handler - we need to receive mouse up!
event.consume(true);
}
- _menuItemMouseUp(event: Event): void {
- this._triggerAction((event.target as HTMLElement), event);
+ private menuItemMouseUp(event: Event): void {
+ this.triggerAction((event.target as HTMLElement), event);
event.consume();
}
- _root(): SoftContextMenu {
+ private root(): SoftContextMenu {
let root: SoftContextMenu = (this as SoftContextMenu);
- while (root._parentMenu) {
- root = root._parentMenu;
+ while (root.parentMenu) {
+ root = root.parentMenu;
}
return root;
}
- _triggerAction(menuItemElement: HTMLElement, event: Event): void {
+ private triggerAction(menuItemElement: HTMLElement, event: Event): void {
const detailsForElement = this.detailsForElementMap.get(menuItemElement);
if (detailsForElement) {
if (!detailsForElement.subItems) {
- this._root().discard();
+ this.root().discard();
event.consume(true);
if (typeof detailsForElement.actionId !== 'undefined') {
- this._itemSelectedCallback(detailsForElement.actionId);
+ this.itemSelectedCallback(detailsForElement.actionId);
delete detailsForElement.actionId;
}
return;
}
}
- this._showSubMenu(menuItemElement);
+ this.showSubMenu(menuItemElement);
event.consume();
}
- _showSubMenu(menuItemElement: HTMLElement): void {
+ private showSubMenu(menuItemElement: HTMLElement): void {
const detailsForElement = this.detailsForElementMap.get(menuItemElement);
if (!detailsForElement) {
return;
@@ -337,81 +335,81 @@
window.clearTimeout(detailsForElement.subMenuTimer);
delete detailsForElement.subMenuTimer;
}
- if (this._subMenu || !this._document) {
+ if (this.subMenu || !this.document) {
return;
}
- this._activeSubMenuElement = menuItemElement;
+ this.activeSubMenuElement = menuItemElement;
ARIAUtils.setExpanded(menuItemElement, true);
if (!detailsForElement.subItems) {
return;
}
- this._subMenu = new SoftContextMenu(detailsForElement.subItems, this._itemSelectedCallback, this);
+ this.subMenu = new SoftContextMenu(detailsForElement.subItems, this.itemSelectedCallback, this);
const anchorBox = menuItemElement.boxInWindow();
// Adjust for padding.
anchorBox.y -= 5;
anchorBox.x += 3;
anchorBox.width -= 6;
anchorBox.height += 10;
- this._subMenu.show(this._document, anchorBox);
+ this.subMenu.show(this.document, anchorBox);
}
- _menuItemMouseOver(event: Event): void {
- this._highlightMenuItem((event.target as HTMLElement), true);
+ private menuItemMouseOver(event: Event): void {
+ this.highlightMenuItem((event.target as HTMLElement), true);
}
- _menuItemMouseLeave(event: MouseEvent): void {
- if (!this._subMenu || !event.relatedTarget) {
- this._highlightMenuItem(null, true);
+ private menuItemMouseLeave(event: MouseEvent): void {
+ if (!this.subMenu || !event.relatedTarget) {
+ this.highlightMenuItem(null, true);
return;
}
const relatedTarget = event.relatedTarget;
- if (relatedTarget === this._contextMenuElement) {
- this._highlightMenuItem(null, true);
+ if (relatedTarget === this.contextMenuElement) {
+ this.highlightMenuItem(null, true);
}
}
- _highlightMenuItem(menuItemElement: HTMLElement|null, scheduleSubMenu: boolean): void {
- if (this._highlightedMenuItemElement === menuItemElement) {
+ private highlightMenuItem(menuItemElement: HTMLElement|null, scheduleSubMenu: boolean): void {
+ if (this.highlightedMenuItemElement === menuItemElement) {
return;
}
- if (this._subMenu) {
- this._subMenu.discard();
+ if (this.subMenu) {
+ this.subMenu.discard();
}
- if (this._highlightedMenuItemElement) {
- const detailsForElement = this.detailsForElementMap.get(this._highlightedMenuItemElement);
- this._highlightedMenuItemElement.classList.remove('force-white-icons');
- this._highlightedMenuItemElement.classList.remove('soft-context-menu-item-mouse-over');
+ if (this.highlightedMenuItemElement) {
+ const detailsForElement = this.detailsForElementMap.get(this.highlightedMenuItemElement);
+ this.highlightedMenuItemElement.classList.remove('force-white-icons');
+ this.highlightedMenuItemElement.classList.remove('soft-context-menu-item-mouse-over');
if (detailsForElement && detailsForElement.subItems && detailsForElement.subMenuTimer) {
window.clearTimeout(detailsForElement.subMenuTimer);
delete detailsForElement.subMenuTimer;
}
}
- this._highlightedMenuItemElement = menuItemElement;
- if (this._highlightedMenuItemElement) {
+ this.highlightedMenuItemElement = menuItemElement;
+ if (this.highlightedMenuItemElement) {
if (ThemeSupport.ThemeSupport.instance().hasTheme() || Host.Platform.isMac()) {
- this._highlightedMenuItemElement.classList.add('force-white-icons');
+ this.highlightedMenuItemElement.classList.add('force-white-icons');
}
- this._highlightedMenuItemElement.classList.add('soft-context-menu-item-mouse-over');
- const detailsForElement = this.detailsForElementMap.get(this._highlightedMenuItemElement);
+ this.highlightedMenuItemElement.classList.add('soft-context-menu-item-mouse-over');
+ const detailsForElement = this.detailsForElementMap.get(this.highlightedMenuItemElement);
if (detailsForElement && detailsForElement.customElement) {
detailsForElement.customElement.focus();
} else {
- this._highlightedMenuItemElement.focus();
+ this.highlightedMenuItemElement.focus();
}
if (scheduleSubMenu && detailsForElement && detailsForElement.subItems && !detailsForElement.subMenuTimer) {
detailsForElement.subMenuTimer =
- window.setTimeout(this._showSubMenu.bind(this, this._highlightedMenuItemElement), 150);
+ window.setTimeout(this.showSubMenu.bind(this, this.highlightedMenuItemElement), 150);
}
}
}
- _highlightPrevious(): void {
- let menuItemElement: (ChildNode|null) = this._highlightedMenuItemElement ?
- this._highlightedMenuItemElement.previousSibling :
- this._contextMenuElement ? this._contextMenuElement.lastChild : null;
+ private highlightPrevious(): void {
+ let menuItemElement: (ChildNode|null) = this.highlightedMenuItemElement ?
+ this.highlightedMenuItemElement.previousSibling :
+ this.contextMenuElement ? this.contextMenuElement.lastChild : null;
let menuItemDetails: (ElementMenuDetails|undefined) =
menuItemElement ? this.detailsForElementMap.get((menuItemElement as HTMLElement)) : undefined;
while (menuItemElement && menuItemDetails &&
@@ -421,14 +419,14 @@
menuItemDetails = menuItemElement ? this.detailsForElementMap.get((menuItemElement as HTMLElement)) : undefined;
}
if (menuItemElement) {
- this._highlightMenuItem((menuItemElement as HTMLElement), false);
+ this.highlightMenuItem((menuItemElement as HTMLElement), false);
}
}
- _highlightNext(): void {
- let menuItemElement: (ChildNode|null) = this._highlightedMenuItemElement ?
- this._highlightedMenuItemElement.nextSibling :
- this._contextMenuElement ? this._contextMenuElement.firstChild : null;
+ private highlightNext(): void {
+ let menuItemElement: (ChildNode|null) = this.highlightedMenuItemElement ?
+ this.highlightedMenuItemElement.nextSibling :
+ this.contextMenuElement ? this.contextMenuElement.firstChild : null;
let menuItemDetails: (ElementMenuDetails|undefined) =
menuItemElement ? this.detailsForElementMap.get((menuItemElement as HTMLElement)) : undefined;
while (menuItemElement &&
@@ -438,53 +436,53 @@
menuItemDetails = menuItemElement ? this.detailsForElementMap.get((menuItemElement as HTMLElement)) : undefined;
}
if (menuItemElement) {
- this._highlightMenuItem((menuItemElement as HTMLElement), false);
+ this.highlightMenuItem((menuItemElement as HTMLElement), false);
}
}
- _menuKeyDown(event: Event): void {
+ private menuKeyDown(event: Event): void {
const keyboardEvent = (event as KeyboardEvent);
function onEnterOrSpace(this: SoftContextMenu): void {
- if (!this._highlightedMenuItemElement) {
+ if (!this.highlightedMenuItemElement) {
return;
}
- const detailsForElement = this.detailsForElementMap.get(this._highlightedMenuItemElement);
+ const detailsForElement = this.detailsForElementMap.get(this.highlightedMenuItemElement);
if (!detailsForElement || detailsForElement.customElement) {
// The custom element will handle the event, so return early and do not consume it.
return;
}
- this._triggerAction(this._highlightedMenuItemElement, keyboardEvent);
- if (detailsForElement.subItems && this._subMenu) {
- this._subMenu._highlightNext();
+ this.triggerAction(this.highlightedMenuItemElement, keyboardEvent);
+ if (detailsForElement.subItems && this.subMenu) {
+ this.subMenu.highlightNext();
}
keyboardEvent.consume(true);
}
switch (keyboardEvent.key) {
case 'ArrowUp':
- this._highlightPrevious();
+ this.highlightPrevious();
keyboardEvent.consume(true);
break;
case 'ArrowDown':
- this._highlightNext();
+ this.highlightNext();
keyboardEvent.consume(true);
break;
case 'ArrowLeft':
- if (this._parentMenu) {
- this._highlightMenuItem(null, false);
+ if (this.parentMenu) {
+ this.highlightMenuItem(null, false);
this.discard();
}
keyboardEvent.consume(true);
break;
case 'ArrowRight': {
- if (!this._highlightedMenuItemElement) {
+ if (!this.highlightedMenuItemElement) {
break;
}
- const detailsForElement = this.detailsForElementMap.get(this._highlightedMenuItemElement);
+ const detailsForElement = this.detailsForElementMap.get(this.highlightedMenuItemElement);
if (detailsForElement && detailsForElement.subItems) {
- this._showSubMenu(this._highlightedMenuItemElement);
- if (this._subMenu) {
- this._subMenu._highlightNext();
+ this.showSubMenu(this.highlightedMenuItemElement);
+ if (this.subMenu) {
+ this.subMenu.highlightNext();
}
}
keyboardEvent.consume(true);
diff --git a/front_end/ui/legacy/SoftDropDown.ts b/front_end/ui/legacy/SoftDropDown.ts
index 6fd4349..0819d77 100644
--- a/front_end/ui/legacy/SoftDropDown.ts
+++ b/front_end/ui/legacy/SoftDropDown.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type * as Common from '../../core/common/common.js';
import * as i18n from '../../core/i18n/i18n.js';
@@ -28,126 +26,126 @@
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class SoftDropDown<T> implements ListDelegate<T> {
- _delegate: Delegate<T>;
- _selectedItem: T|null;
- _model: ListModel<T>;
- _placeholderText: Common.UIString.LocalizedString;
+ private delegate: Delegate<T>;
+ private selectedItem: T|null;
+ private readonly model: ListModel<T>;
+ private placeholderText: Common.UIString.LocalizedString;
element: HTMLButtonElement;
- _titleElement: HTMLElement;
- _glassPane: GlassPane;
- _list: ListControl<T>;
- _rowHeight: number;
- _width: number;
- _listWasShowing200msAgo: boolean;
+ private titleElement: HTMLElement;
+ private readonly glassPane: GlassPane;
+ private list: ListControl<T>;
+ private rowHeight: number;
+ private width: number;
+ private listWasShowing200msAgo: boolean;
constructor(model: ListModel<T>, delegate: Delegate<T>) {
- this._delegate = delegate;
- this._selectedItem = null;
- this._model = model;
+ this.delegate = delegate;
+ this.selectedItem = null;
+ this.model = model;
- this._placeholderText = i18nString(UIStrings.noItemSelected);
+ this.placeholderText = i18nString(UIStrings.noItemSelected);
this.element = document.createElement('button');
this.element.classList.add('soft-dropdown');
appendStyle(this.element, 'ui/legacy/softDropDownButton.css');
- this._titleElement = this.element.createChild('span', 'title');
+ this.titleElement = this.element.createChild('span', 'title');
const dropdownArrowIcon = Icon.create('smallicon-triangle-down');
this.element.appendChild(dropdownArrowIcon);
ARIAUtils.setExpanded(this.element, false);
- this._glassPane = new GlassPane();
- this._glassPane.setMarginBehavior(MarginBehavior.NoMargin);
- this._glassPane.setAnchorBehavior(AnchorBehavior.PreferBottom);
- this._glassPane.setOutsideClickCallback(this._hide.bind(this));
- this._glassPane.setPointerEventsBehavior(PointerEventsBehavior.BlockedByGlassPane);
- this._list = new ListControl(model, this, ListMode.EqualHeightItems);
- this._list.element.classList.add('item-list');
- this._rowHeight = 36;
- this._width = 315;
- createShadowRootWithCoreStyles(this._glassPane.contentElement, {
+ this.glassPane = new GlassPane();
+ this.glassPane.setMarginBehavior(MarginBehavior.NoMargin);
+ this.glassPane.setAnchorBehavior(AnchorBehavior.PreferBottom);
+ this.glassPane.setOutsideClickCallback(this.hide.bind(this));
+ this.glassPane.setPointerEventsBehavior(PointerEventsBehavior.BlockedByGlassPane);
+ this.list = new ListControl(model, this, ListMode.EqualHeightItems);
+ this.list.element.classList.add('item-list');
+ this.rowHeight = 36;
+ this.width = 315;
+ createShadowRootWithCoreStyles(this.glassPane.contentElement, {
cssFile: 'ui/legacy/softDropDown.css',
delegatesFocus: undefined,
- }).appendChild(this._list.element);
- ARIAUtils.markAsMenu(this._list.element);
+ }).appendChild(this.list.element);
+ ARIAUtils.markAsMenu(this.list.element);
- this._listWasShowing200msAgo = false;
+ this.listWasShowing200msAgo = false;
this.element.addEventListener('mousedown', event => {
- if (this._listWasShowing200msAgo) {
- this._hide(event);
+ if (this.listWasShowing200msAgo) {
+ this.hide(event);
} else if (!this.element.disabled) {
- this._show(event);
+ this.show(event);
}
}, false);
- this.element.addEventListener('keydown', this._onKeyDownButton.bind(this), false);
- this._list.element.addEventListener('keydown', this._onKeyDownList.bind(this), false);
- this._list.element.addEventListener('focusout', this._hide.bind(this), false);
- this._list.element.addEventListener('mousedown', event => event.consume(true), false);
- this._list.element.addEventListener('mouseup', event => {
- if (event.target === this._list.element) {
+ this.element.addEventListener('keydown', this.onKeyDownButton.bind(this), false);
+ this.list.element.addEventListener('keydown', this.onKeyDownList.bind(this), false);
+ this.list.element.addEventListener('focusout', this.hide.bind(this), false);
+ this.list.element.addEventListener('mousedown', event => event.consume(true), false);
+ this.list.element.addEventListener('mouseup', event => {
+ if (event.target === this.list.element) {
return;
}
- if (!this._listWasShowing200msAgo) {
+ if (!this.listWasShowing200msAgo) {
return;
}
- this._selectHighlightedItem();
- this._hide(event);
+ this.selectHighlightedItem();
+ this.hide(event);
}, false);
- model.addEventListener(ListModelEvents.ItemsReplaced, this._itemsReplaced, this);
+ model.addEventListener(ListModelEvents.ItemsReplaced, this.itemsReplaced, this);
}
- _show(event: Event): void {
- if (this._glassPane.isShowing()) {
+ private show(event: Event): void {
+ if (this.glassPane.isShowing()) {
return;
}
- this._glassPane.setContentAnchorBox(this.element.boxInWindow());
- this._glassPane.show((this.element.ownerDocument as Document));
- this._list.element.focus();
+ this.glassPane.setContentAnchorBox(this.element.boxInWindow());
+ this.glassPane.show((this.element.ownerDocument as Document));
+ this.list.element.focus();
ARIAUtils.setExpanded(this.element, true);
- this._updateGlasspaneSize();
- if (this._selectedItem) {
- this._list.selectItem(this._selectedItem);
+ this.updateGlasspaneSize();
+ if (this.selectedItem) {
+ this.list.selectItem(this.selectedItem);
}
event.consume(true);
setTimeout(() => {
- this._listWasShowing200msAgo = true;
+ this.listWasShowing200msAgo = true;
}, 200);
}
- _updateGlasspaneSize(): void {
- const maxHeight = this._rowHeight * (Math.min(this._model.length, 9));
- this._glassPane.setMaxContentSize(new Size(this._width, maxHeight));
- this._list.viewportResized();
+ private updateGlasspaneSize(): void {
+ const maxHeight = this.rowHeight * (Math.min(this.model.length, 9));
+ this.glassPane.setMaxContentSize(new Size(this.width, maxHeight));
+ this.list.viewportResized();
}
- _hide(event: Event): void {
+ private hide(event: Event): void {
setTimeout(() => {
- this._listWasShowing200msAgo = false;
+ this.listWasShowing200msAgo = false;
}, 200);
- this._glassPane.hide();
- this._list.selectItem(null);
+ this.glassPane.hide();
+ this.list.selectItem(null);
ARIAUtils.setExpanded(this.element, false);
this.element.focus();
event.consume(true);
}
- _onKeyDownButton(ev: Event): void {
+ private onKeyDownButton(ev: Event): void {
const event = (ev as KeyboardEvent);
let handled = false;
switch (event.key) {
case 'ArrowUp':
- this._show(event);
- this._list.selectItemNextPage();
+ this.show(event);
+ this.list.selectItemNextPage();
handled = true;
break;
case 'ArrowDown':
- this._show(event);
- this._list.selectItemPreviousPage();
+ this.show(event);
+ this.list.selectItemPreviousPage();
handled = true;
break;
case 'Enter':
case ' ':
- this._show(event);
+ this.show(event);
handled = true;
break;
default:
@@ -159,53 +157,53 @@
}
}
- _onKeyDownList(ev: Event): void {
+ private onKeyDownList(ev: Event): void {
const event = (ev as KeyboardEvent);
let handled = false;
switch (event.key) {
case 'ArrowLeft':
- handled = this._list.selectPreviousItem(false, false);
+ handled = this.list.selectPreviousItem(false, false);
break;
case 'ArrowRight':
- handled = this._list.selectNextItem(false, false);
+ handled = this.list.selectNextItem(false, false);
break;
case 'Home':
- for (let i = 0; i < this._model.length; i++) {
- if (this.isItemSelectable(this._model.at(i))) {
- this._list.selectItem(this._model.at(i));
+ for (let i = 0; i < this.model.length; i++) {
+ if (this.isItemSelectable(this.model.at(i))) {
+ this.list.selectItem(this.model.at(i));
handled = true;
break;
}
}
break;
case 'End':
- for (let i = this._model.length - 1; i >= 0; i--) {
- if (this.isItemSelectable(this._model.at(i))) {
- this._list.selectItem(this._model.at(i));
+ for (let i = this.model.length - 1; i >= 0; i--) {
+ if (this.isItemSelectable(this.model.at(i))) {
+ this.list.selectItem(this.model.at(i));
handled = true;
break;
}
}
break;
case 'Escape':
- this._hide(event);
+ this.hide(event);
handled = true;
break;
case 'Tab':
case 'Enter':
case ' ':
- this._selectHighlightedItem();
- this._hide(event);
+ this.selectHighlightedItem();
+ this.hide(event);
handled = true;
break;
default:
if (event.key.length === 1) {
- const selectedIndex = this._list.selectedIndex();
+ const selectedIndex = this.list.selectedIndex();
const letter = event.key.toUpperCase();
- for (let i = 0; i < this._model.length; i++) {
- const item = this._model.at((selectedIndex + i + 1) % this._model.length);
- if (this._delegate.titleFor(item).toUpperCase().startsWith(letter)) {
- this._list.selectItem(item);
+ for (let i = 0; i < this.model.length; i++) {
+ const item = this.model.at((selectedIndex + i + 1) % this.model.length);
+ if (this.delegate.titleFor(item).toUpperCase().startsWith(letter)) {
+ this.list.selectItem(item);
break;
}
}
@@ -220,63 +218,63 @@
}
setWidth(width: number): void {
- this._width = width;
- this._updateGlasspaneSize();
+ this.width = width;
+ this.updateGlasspaneSize();
}
setRowHeight(rowHeight: number): void {
- this._rowHeight = rowHeight;
+ this.rowHeight = rowHeight;
}
setPlaceholderText(text: Common.UIString.LocalizedString): void {
- this._placeholderText = text;
- if (!this._selectedItem) {
- this._titleElement.textContent = this._placeholderText;
+ this.placeholderText = text;
+ if (!this.selectedItem) {
+ this.titleElement.textContent = this.placeholderText;
}
}
- _itemsReplaced(event: Common.EventTarget.EventTargetEvent): void {
+ private itemsReplaced(event: Common.EventTarget.EventTargetEvent): void {
const removed = (event.data.removed as T[]);
- if (this._selectedItem && removed.indexOf(this._selectedItem) !== -1) {
- this._selectedItem = null;
- this._selectHighlightedItem();
+ if (this.selectedItem && removed.indexOf(this.selectedItem) !== -1) {
+ this.selectedItem = null;
+ this.selectHighlightedItem();
}
- this._updateGlasspaneSize();
+ this.updateGlasspaneSize();
}
selectItem(item: T|null): void {
- this._selectedItem = item;
- if (this._selectedItem) {
- this._titleElement.textContent = this._delegate.titleFor(this._selectedItem);
+ this.selectedItem = item;
+ if (this.selectedItem) {
+ this.titleElement.textContent = this.delegate.titleFor(this.selectedItem);
} else {
- this._titleElement.textContent = this._placeholderText;
+ this.titleElement.textContent = this.placeholderText;
}
- this._delegate.itemSelected(this._selectedItem);
+ this.delegate.itemSelected(this.selectedItem);
}
createElementForItem(item: T): Element {
const element = document.createElement('div');
element.classList.add('item');
element.addEventListener('mousemove', e => {
- if ((e.movementX || e.movementY) && this._delegate.isItemSelectable(item)) {
- this._list.selectItem(item, false, /* Don't scroll */ true);
+ if ((e.movementX || e.movementY) && this.delegate.isItemSelectable(item)) {
+ this.list.selectItem(item, false, /* Don't scroll */ true);
}
});
- element.classList.toggle('disabled', !this._delegate.isItemSelectable(item));
- element.classList.toggle('highlighted', this._list.selectedItem() === item);
+ element.classList.toggle('disabled', !this.delegate.isItemSelectable(item));
+ element.classList.toggle('highlighted', this.list.selectedItem() === item);
ARIAUtils.markAsMenuItem(element);
- element.appendChild(this._delegate.createElementForItem(item));
+ element.appendChild(this.delegate.createElementForItem(item));
return element;
}
heightForItem(_item: T): number {
- return this._rowHeight;
+ return this.rowHeight;
}
isItemSelectable(item: T): boolean {
- return this._delegate.isItemSelectable(item);
+ return this.delegate.isItemSelectable(item);
}
selectedItemChanged(from: T|null, to: T|null, fromElement: Element|null, toElement: Element|null): void {
@@ -287,8 +285,8 @@
toElement.classList.add('highlighted');
}
- ARIAUtils.setActiveDescendant(this._list.element, toElement);
- this._delegate.highlightedItemChanged(
+ ARIAUtils.setActiveDescendant(this.list.element, toElement);
+ this.delegate.highlightedItemChanged(
from, to, fromElement && fromElement.firstElementChild, toElement && toElement.firstElementChild);
}
@@ -296,12 +294,12 @@
return false;
}
- _selectHighlightedItem(): void {
- this.selectItem(this._list.selectedItem());
+ private selectHighlightedItem(): void {
+ this.selectItem(this.list.selectedItem());
}
refreshItem(item: T): void {
- this._list.refreshItem(item);
+ this.list.refreshItem(item);
}
}
diff --git a/front_end/ui/legacy/SplitWidget.ts b/front_end/ui/legacy/SplitWidget.ts
index 3246c6c..a5b034e 100644
--- a/front_end/ui/legacy/SplitWidget.ts
+++ b/front_end/ui/legacy/SplitWidget.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Platform from '../../core/platform/platform.js';
@@ -40,38 +38,38 @@
import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
export class SplitWidget extends Widget {
- _sidebarElement: HTMLElement;
- _mainElement: HTMLElement;
- _resizerElement: HTMLElement;
- _resizerElementSize: number|null;
- _resizerWidget: SimpleResizerWidget;
- _defaultSidebarWidth: number;
- _defaultSidebarHeight: number;
- _constraintsInDip: boolean;
- _resizeStartSizeDIP: number;
+ private sidebarElementInternal: HTMLElement;
+ private mainElement: HTMLElement;
+ private resizerElementInternal: HTMLElement;
+ private resizerElementSize: number|null;
+ private readonly resizerWidget: SimpleResizerWidget;
+ private defaultSidebarWidth: number;
+ private defaultSidebarHeight: number;
+ private readonly constraintsInDip: boolean;
+ private resizeStartSizeDIP: number;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _setting: Common.Settings.Setting<any>|null;
- _totalSizeCSS: number;
- _totalSizeOtherDimensionCSS: number;
- _mainWidget: Widget|null;
- _sidebarWidget: Widget|null;
- _animationFrameHandle: number;
- _animationCallback: (() => void)|null;
- _showSidebarButtonTitle: Common.UIString.LocalizedString;
- _hideSidebarButtonTitle: Common.UIString.LocalizedString;
- _showHideSidebarButton: ToolbarButton|null;
- _isVertical: boolean;
- _sidebarMinimized: boolean;
- _detaching: boolean;
- _sidebarSizeDIP: number;
- _savedSidebarSizeDIP: number;
- _secondIsSidebar: boolean;
- _shouldSaveShowMode: boolean;
- _savedVerticalMainSize: number|null;
- _savedHorizontalMainSize: number|null;
- _showMode: string;
- _savedShowMode: string;
+ private setting: Common.Settings.Setting<any>|null;
+ private totalSizeCSS: number;
+ private totalSizeOtherDimensionCSS: number;
+ private mainWidgetInternal: Widget|null;
+ private sidebarWidgetInternal: Widget|null;
+ private animationFrameHandle: number;
+ private animationCallback: (() => void)|null;
+ private showSidebarButtonTitle: Common.UIString.LocalizedString;
+ private hideSidebarButtonTitle: Common.UIString.LocalizedString;
+ private showHideSidebarButton: ToolbarButton|null;
+ private isVerticalInternal: boolean;
+ private sidebarMinimized: boolean;
+ private detaching: boolean;
+ private sidebarSizeDIP: number;
+ private savedSidebarSizeDIP: number;
+ private secondIsSidebar: boolean;
+ private shouldSaveShowMode: boolean;
+ private savedVerticalMainSize: number|null;
+ private savedHorizontalMainSize: number|null;
+ private showModeInternal: string;
+ private savedShowMode: string;
constructor(
isVertical: boolean, secondIsSidebar: boolean, settingName?: string, defaultSidebarWidth?: number,
@@ -81,115 +79,115 @@
this.registerRequiredCSS('ui/legacy/splitWidget.css');
this.contentElement.classList.add('shadow-split-widget');
- this._sidebarElement =
+ this.sidebarElementInternal =
this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-sidebar vbox');
- this._mainElement =
+ this.mainElement =
this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-main vbox');
- (this._mainElement.createChild('slot') as HTMLSlotElement).name = 'insertion-point-main';
- (this._sidebarElement.createChild('slot') as HTMLSlotElement).name = 'insertion-point-sidebar';
- this._resizerElement = this.contentElement.createChild('div', 'shadow-split-widget-resizer');
- this._resizerElementSize = null;
+ (this.mainElement.createChild('slot') as HTMLSlotElement).name = 'insertion-point-main';
+ (this.sidebarElementInternal.createChild('slot') as HTMLSlotElement).name = 'insertion-point-sidebar';
+ this.resizerElementInternal = this.contentElement.createChild('div', 'shadow-split-widget-resizer');
+ this.resizerElementSize = null;
- this._resizerWidget = new SimpleResizerWidget();
- this._resizerWidget.setEnabled(true);
- this._resizerWidget.addEventListener(ResizerWidgetEvents.ResizeStart, this._onResizeStart, this);
- this._resizerWidget.addEventListener(ResizerWidgetEvents.ResizeUpdate, this._onResizeUpdate, this);
- this._resizerWidget.addEventListener(ResizerWidgetEvents.ResizeEnd, this._onResizeEnd, this);
+ this.resizerWidget = new SimpleResizerWidget();
+ this.resizerWidget.setEnabled(true);
+ this.resizerWidget.addEventListener(ResizerWidgetEvents.ResizeStart, this.onResizeStart, this);
+ this.resizerWidget.addEventListener(ResizerWidgetEvents.ResizeUpdate, this.onResizeUpdate, this);
+ this.resizerWidget.addEventListener(ResizerWidgetEvents.ResizeEnd, this.onResizeEnd, this);
- this._defaultSidebarWidth = defaultSidebarWidth || 200;
- this._defaultSidebarHeight = defaultSidebarHeight || this._defaultSidebarWidth;
- this._constraintsInDip = Boolean(constraintsInDip);
- this._resizeStartSizeDIP = 0;
- this._setting =
+ this.defaultSidebarWidth = defaultSidebarWidth || 200;
+ this.defaultSidebarHeight = defaultSidebarHeight || this.defaultSidebarWidth;
+ this.constraintsInDip = Boolean(constraintsInDip);
+ this.resizeStartSizeDIP = 0;
+ this.setting =
settingName ? Common.Settings.Settings.instance().createSetting(settingName, /** @type {*} */ ({})) : null;
- this._totalSizeCSS = 0;
- this._totalSizeOtherDimensionCSS = 0;
- this._mainWidget = null;
- this._sidebarWidget = null;
- this._animationFrameHandle = 0;
- this._animationCallback = null;
- this._showSidebarButtonTitle = Common.UIString.LocalizedEmptyString;
- this._hideSidebarButtonTitle = Common.UIString.LocalizedEmptyString;
- this._showHideSidebarButton = null;
- this._isVertical = false;
- this._sidebarMinimized = false;
- this._detaching = false;
- this._sidebarSizeDIP = -1;
- this._savedSidebarSizeDIP = this._sidebarSizeDIP;
- this._secondIsSidebar = false;
- this._shouldSaveShowMode = false;
- this._savedVerticalMainSize = null;
- this._savedHorizontalMainSize = null;
+ this.totalSizeCSS = 0;
+ this.totalSizeOtherDimensionCSS = 0;
+ this.mainWidgetInternal = null;
+ this.sidebarWidgetInternal = null;
+ this.animationFrameHandle = 0;
+ this.animationCallback = null;
+ this.showSidebarButtonTitle = Common.UIString.LocalizedEmptyString;
+ this.hideSidebarButtonTitle = Common.UIString.LocalizedEmptyString;
+ this.showHideSidebarButton = null;
+ this.isVerticalInternal = false;
+ this.sidebarMinimized = false;
+ this.detaching = false;
+ this.sidebarSizeDIP = -1;
+ this.savedSidebarSizeDIP = this.sidebarSizeDIP;
+ this.secondIsSidebar = false;
+ this.shouldSaveShowMode = false;
+ this.savedVerticalMainSize = null;
+ this.savedHorizontalMainSize = null;
this.setSecondIsSidebar(secondIsSidebar);
- this._innerSetVertical(isVertical);
- this._showMode = ShowMode.Both;
- this._savedShowMode = this._showMode;
+ this.innerSetVertical(isVertical);
+ this.showModeInternal = ShowMode.Both;
+ this.savedShowMode = this.showModeInternal;
// Should be called after isVertical has the right value.
- this.installResizer(this._resizerElement);
+ this.installResizer(this.resizerElementInternal);
}
isVertical(): boolean {
- return this._isVertical;
+ return this.isVerticalInternal;
}
setVertical(isVertical: boolean): void {
- if (this._isVertical === isVertical) {
+ if (this.isVerticalInternal === isVertical) {
return;
}
- this._innerSetVertical(isVertical);
+ this.innerSetVertical(isVertical);
if (this.isShowing()) {
- this._updateLayout();
+ this.updateLayout();
}
}
- _innerSetVertical(isVertical: boolean): void {
+ private innerSetVertical(isVertical: boolean): void {
this.contentElement.classList.toggle('vbox', !isVertical);
this.contentElement.classList.toggle('hbox', isVertical);
- this._isVertical = isVertical;
+ this.isVerticalInternal = isVertical;
- this._resizerElementSize = null;
- this._sidebarSizeDIP = -1;
- this._restoreSidebarSizeFromSettings();
- if (this._shouldSaveShowMode) {
- this._restoreAndApplyShowModeFromSettings();
+ this.resizerElementSize = null;
+ this.sidebarSizeDIP = -1;
+ this.restoreSidebarSizeFromSettings();
+ if (this.shouldSaveShowMode) {
+ this.restoreAndApplyShowModeFromSettings();
}
- this._updateShowHideSidebarButton();
+ this.updateShowHideSidebarButton();
// FIXME: reverse SplitWidget.isVertical meaning.
- this._resizerWidget.setVertical(!isVertical);
+ this.resizerWidget.setVertical(!isVertical);
this.invalidateConstraints();
}
- _updateLayout(animate?: boolean): void {
- this._totalSizeCSS = 0; // Lazy update.
- this._totalSizeOtherDimensionCSS = 0;
+ private updateLayout(animate?: boolean): void {
+ this.totalSizeCSS = 0; // Lazy update.
+ this.totalSizeOtherDimensionCSS = 0;
// Remove properties that might affect total size calculation.
- this._mainElement.style.removeProperty('width');
- this._mainElement.style.removeProperty('height');
- this._sidebarElement.style.removeProperty('width');
- this._sidebarElement.style.removeProperty('height');
+ this.mainElement.style.removeProperty('width');
+ this.mainElement.style.removeProperty('height');
+ this.sidebarElementInternal.style.removeProperty('width');
+ this.sidebarElementInternal.style.removeProperty('height');
- this._innerSetSidebarSizeDIP(this._preferredSidebarSizeDIP(), Boolean(animate));
+ this.innerSetSidebarSizeDIP(this.preferredSidebarSizeDIP(), Boolean(animate));
}
setMainWidget(widget: Widget): void {
- if (this._mainWidget === widget) {
+ if (this.mainWidgetInternal === widget) {
return;
}
this.suspendInvalidations();
- if (this._mainWidget) {
- this._mainWidget.detach();
+ if (this.mainWidgetInternal) {
+ this.mainWidgetInternal.detach();
}
- this._mainWidget = widget;
+ this.mainWidgetInternal = widget;
if (widget) {
widget.element.slot = 'insertion-point-main';
- if (this._showMode === ShowMode.OnlyMain || this._showMode === ShowMode.Both) {
+ if (this.showModeInternal === ShowMode.OnlyMain || this.showModeInternal === ShowMode.Both) {
widget.show(this.element);
}
}
@@ -197,17 +195,17 @@
}
setSidebarWidget(widget: Widget): void {
- if (this._sidebarWidget === widget) {
+ if (this.sidebarWidgetInternal === widget) {
return;
}
this.suspendInvalidations();
- if (this._sidebarWidget) {
- this._sidebarWidget.detach();
+ if (this.sidebarWidgetInternal) {
+ this.sidebarWidgetInternal.detach();
}
- this._sidebarWidget = widget;
+ this.sidebarWidgetInternal = widget;
if (widget) {
widget.element.slot = 'insertion-point-sidebar';
- if (this._showMode === ShowMode.OnlySidebar || this._showMode === ShowMode.Both) {
+ if (this.showModeInternal === ShowMode.OnlySidebar || this.showModeInternal === ShowMode.Both) {
widget.show(this.element);
}
}
@@ -215,322 +213,327 @@
}
mainWidget(): Widget|null {
- return this._mainWidget;
+ return this.mainWidgetInternal;
}
sidebarWidget(): Widget|null {
- return this._sidebarWidget;
+ return this.sidebarWidgetInternal;
}
sidebarElement(): HTMLElement {
- return /** @type {!HTMLElement} */ this._sidebarElement as HTMLElement;
+ return /** @type {!HTMLElement} */ this.sidebarElementInternal as HTMLElement;
}
childWasDetached(widget: Widget): void {
- if (this._detaching) {
+ if (this.detaching) {
return;
}
- if (this._mainWidget === widget) {
- this._mainWidget = null;
+ if (this.mainWidgetInternal === widget) {
+ this.mainWidgetInternal = null;
}
- if (this._sidebarWidget === widget) {
- this._sidebarWidget = null;
+ if (this.sidebarWidgetInternal === widget) {
+ this.sidebarWidgetInternal = null;
}
this.invalidateConstraints();
}
isSidebarSecond(): boolean {
- return this._secondIsSidebar;
+ return this.secondIsSidebar;
}
enableShowModeSaving(): void {
- this._shouldSaveShowMode = true;
- this._restoreAndApplyShowModeFromSettings();
+ this.shouldSaveShowMode = true;
+ this.restoreAndApplyShowModeFromSettings();
}
showMode(): string {
- return this._showMode;
+ return this.showModeInternal;
}
setSecondIsSidebar(secondIsSidebar: boolean): void {
- if (secondIsSidebar === this._secondIsSidebar) {
+ if (secondIsSidebar === this.secondIsSidebar) {
return;
}
- this._secondIsSidebar = secondIsSidebar;
- if (!this._mainWidget || !this._mainWidget.shouldHideOnDetach()) {
+ this.secondIsSidebar = secondIsSidebar;
+ if (!this.mainWidgetInternal || !this.mainWidgetInternal.shouldHideOnDetach()) {
if (secondIsSidebar) {
- this.contentElement.insertBefore(this._mainElement, this._sidebarElement);
+ this.contentElement.insertBefore(this.mainElement, this.sidebarElementInternal);
} else {
- this.contentElement.insertBefore(this._mainElement, this._resizerElement);
+ this.contentElement.insertBefore(this.mainElement, this.resizerElementInternal);
}
- } else if (!this._sidebarWidget || !this._sidebarWidget.shouldHideOnDetach()) {
+ } else if (!this.sidebarWidgetInternal || !this.sidebarWidgetInternal.shouldHideOnDetach()) {
if (secondIsSidebar) {
- this.contentElement.insertBefore(this._sidebarElement, this._resizerElement);
+ this.contentElement.insertBefore(this.sidebarElementInternal, this.resizerElementInternal);
} else {
- this.contentElement.insertBefore(this._sidebarElement, this._mainElement);
+ this.contentElement.insertBefore(this.sidebarElementInternal, this.mainElement);
}
} else {
console.error('Could not swap split widget side. Both children widgets contain iframes.');
- this._secondIsSidebar = !secondIsSidebar;
+ this.secondIsSidebar = !secondIsSidebar;
}
}
sidebarSide(): string|null {
- if (this._showMode !== ShowMode.Both) {
+ if (this.showModeInternal !== ShowMode.Both) {
return null;
}
- return this._isVertical ? (this._secondIsSidebar ? 'right' : 'left') : (this._secondIsSidebar ? 'bottom' : 'top');
+ return this.isVerticalInternal ? (this.secondIsSidebar ? 'right' : 'left') :
+ (this.secondIsSidebar ? 'bottom' : 'top');
}
resizerElement(): Element {
- return this._resizerElement;
+ return this.resizerElementInternal;
}
hideMain(animate?: boolean): void {
- this._showOnly(this._sidebarWidget, this._mainWidget, this._sidebarElement, this._mainElement, animate);
- this._updateShowMode(ShowMode.OnlySidebar);
+ this.showOnly(
+ this.sidebarWidgetInternal, this.mainWidgetInternal, this.sidebarElementInternal, this.mainElement, animate);
+ this.updateShowMode(ShowMode.OnlySidebar);
}
hideSidebar(animate?: boolean): void {
- this._showOnly(this._mainWidget, this._sidebarWidget, this._mainElement, this._sidebarElement, animate);
- this._updateShowMode(ShowMode.OnlyMain);
+ this.showOnly(
+ this.mainWidgetInternal, this.sidebarWidgetInternal, this.mainElement, this.sidebarElementInternal, animate);
+ this.updateShowMode(ShowMode.OnlyMain);
}
setSidebarMinimized(minimized: boolean): void {
- this._sidebarMinimized = minimized;
+ this.sidebarMinimized = minimized;
this.invalidateConstraints();
}
isSidebarMinimized(): boolean {
- return this._sidebarMinimized;
+ return this.sidebarMinimized;
}
- _showOnly(
+ private showOnly(
sideToShow: Widget|null, sideToHide: Widget|null, shadowToShow: Element, shadowToHide: Element,
animate?: boolean): void {
- this._cancelAnimation();
+ this.cancelAnimation();
function callback(this: SplitWidget): void {
if (sideToShow) {
// Make sure main is first in the children list.
- if (sideToShow === this._mainWidget) {
- this._mainWidget.show(this.element, this._sidebarWidget ? this._sidebarWidget.element : null);
- } else if (this._sidebarWidget) {
- this._sidebarWidget.show(this.element);
+ if (sideToShow === this.mainWidgetInternal) {
+ this.mainWidgetInternal.show(
+ this.element, this.sidebarWidgetInternal ? this.sidebarWidgetInternal.element : null);
+ } else if (this.sidebarWidgetInternal) {
+ this.sidebarWidgetInternal.show(this.element);
}
}
if (sideToHide) {
- this._detaching = true;
+ this.detaching = true;
sideToHide.detach();
- this._detaching = false;
+ this.detaching = false;
}
- this._resizerElement.classList.add('hidden');
+ this.resizerElementInternal.classList.add('hidden');
shadowToShow.classList.remove('hidden');
shadowToShow.classList.add('maximized');
shadowToHide.classList.add('hidden');
shadowToHide.classList.remove('maximized');
- this._removeAllLayoutProperties();
+ this.removeAllLayoutProperties();
this.doResize();
- this._showFinishedForTest();
+ this.showFinishedForTest();
}
if (animate) {
- this._animate(true, callback.bind(this));
+ this.animate(true, callback.bind(this));
} else {
callback.call(this);
}
- this._sidebarSizeDIP = -1;
+ this.sidebarSizeDIP = -1;
this.setResizable(false);
}
- _showFinishedForTest(): void {
+ private showFinishedForTest(): void {
// This method is sniffed in tests.
}
- _removeAllLayoutProperties(): void {
- this._sidebarElement.style.removeProperty('flexBasis');
+ private removeAllLayoutProperties(): void {
+ this.sidebarElementInternal.style.removeProperty('flexBasis');
- this._mainElement.style.removeProperty('width');
- this._mainElement.style.removeProperty('height');
- this._sidebarElement.style.removeProperty('width');
- this._sidebarElement.style.removeProperty('height');
+ this.mainElement.style.removeProperty('width');
+ this.mainElement.style.removeProperty('height');
+ this.sidebarElementInternal.style.removeProperty('width');
+ this.sidebarElementInternal.style.removeProperty('height');
- this._resizerElement.style.removeProperty('left');
- this._resizerElement.style.removeProperty('right');
- this._resizerElement.style.removeProperty('top');
- this._resizerElement.style.removeProperty('bottom');
+ this.resizerElementInternal.style.removeProperty('left');
+ this.resizerElementInternal.style.removeProperty('right');
+ this.resizerElementInternal.style.removeProperty('top');
+ this.resizerElementInternal.style.removeProperty('bottom');
- this._resizerElement.style.removeProperty('margin-left');
- this._resizerElement.style.removeProperty('margin-right');
- this._resizerElement.style.removeProperty('margin-top');
- this._resizerElement.style.removeProperty('margin-bottom');
+ this.resizerElementInternal.style.removeProperty('margin-left');
+ this.resizerElementInternal.style.removeProperty('margin-right');
+ this.resizerElementInternal.style.removeProperty('margin-top');
+ this.resizerElementInternal.style.removeProperty('margin-bottom');
}
showBoth(animate?: boolean): void {
- if (this._showMode === ShowMode.Both) {
+ if (this.showModeInternal === ShowMode.Both) {
animate = false;
}
- this._cancelAnimation();
- this._mainElement.classList.remove('maximized', 'hidden');
- this._sidebarElement.classList.remove('maximized', 'hidden');
- this._resizerElement.classList.remove('hidden');
+ this.cancelAnimation();
+ this.mainElement.classList.remove('maximized', 'hidden');
+ this.sidebarElementInternal.classList.remove('maximized', 'hidden');
+ this.resizerElementInternal.classList.remove('hidden');
this.setResizable(true);
// Make sure main is the first in the children list.
this.suspendInvalidations();
- if (this._sidebarWidget) {
- this._sidebarWidget.show(this.element);
+ if (this.sidebarWidgetInternal) {
+ this.sidebarWidgetInternal.show(this.element);
}
- if (this._mainWidget) {
- this._mainWidget.show(this.element, this._sidebarWidget ? this._sidebarWidget.element : null);
+ if (this.mainWidgetInternal) {
+ this.mainWidgetInternal.show(
+ this.element, this.sidebarWidgetInternal ? this.sidebarWidgetInternal.element : null);
}
this.resumeInvalidations();
// Order widgets in DOM properly.
- this.setSecondIsSidebar(this._secondIsSidebar);
+ this.setSecondIsSidebar(this.secondIsSidebar);
- this._sidebarSizeDIP = -1;
- this._updateShowMode(ShowMode.Both);
- this._updateLayout(animate);
+ this.sidebarSizeDIP = -1;
+ this.updateShowMode(ShowMode.Both);
+ this.updateLayout(animate);
}
setResizable(resizable: boolean): void {
- this._resizerWidget.setEnabled(resizable);
+ this.resizerWidget.setEnabled(resizable);
}
isResizable(): boolean {
- return this._resizerWidget.isEnabled();
+ return this.resizerWidget.isEnabled();
}
setSidebarSize(size: number): void {
const sizeDIP = ZoomManager.instance().cssToDIP(size);
- this._savedSidebarSizeDIP = sizeDIP;
- this._saveSetting();
- this._innerSetSidebarSizeDIP(sizeDIP, false, true);
+ this.savedSidebarSizeDIP = sizeDIP;
+ this.saveSetting();
+ this.innerSetSidebarSizeDIP(sizeDIP, false, true);
}
sidebarSize(): number {
- const sizeDIP = Math.max(0, this._sidebarSizeDIP);
+ const sizeDIP = Math.max(0, this.sidebarSizeDIP);
return ZoomManager.instance().dipToCSS(sizeDIP);
}
/**
* Returns total size in DIP.
*/
- _totalSizeDIP(): number {
- if (!this._totalSizeCSS) {
- this._totalSizeCSS = this._isVertical ? this.contentElement.offsetWidth : this.contentElement.offsetHeight;
- this._totalSizeOtherDimensionCSS =
- this._isVertical ? this.contentElement.offsetHeight : this.contentElement.offsetWidth;
+ private totalSizeDIP(): number {
+ if (!this.totalSizeCSS) {
+ this.totalSizeCSS = this.isVerticalInternal ? this.contentElement.offsetWidth : this.contentElement.offsetHeight;
+ this.totalSizeOtherDimensionCSS =
+ this.isVerticalInternal ? this.contentElement.offsetHeight : this.contentElement.offsetWidth;
}
- return ZoomManager.instance().cssToDIP(this._totalSizeCSS);
+ return ZoomManager.instance().cssToDIP(this.totalSizeCSS);
}
- _updateShowMode(showMode: string): void {
- this._showMode = showMode;
- this._saveShowModeToSettings();
- this._updateShowHideSidebarButton();
+ private updateShowMode(showMode: string): void {
+ this.showModeInternal = showMode;
+ this.saveShowModeToSettings();
+ this.updateShowHideSidebarButton();
this.dispatchEventToListeners(Events.ShowModeChanged, showMode);
this.invalidateConstraints();
}
- _innerSetSidebarSizeDIP(sizeDIP: number, animate: boolean, userAction?: boolean): void {
- if (this._showMode !== ShowMode.Both || !this.isShowing()) {
+ private innerSetSidebarSizeDIP(sizeDIP: number, animate: boolean, userAction?: boolean): void {
+ if (this.showModeInternal !== ShowMode.Both || !this.isShowing()) {
return;
}
- sizeDIP = this._applyConstraints(sizeDIP, userAction);
- if (this._sidebarSizeDIP === sizeDIP) {
+ sizeDIP = this.applyConstraints(sizeDIP, userAction);
+ if (this.sidebarSizeDIP === sizeDIP) {
return;
}
- if (!this._resizerElementSize) {
- this._resizerElementSize =
- this._isVertical ? this._resizerElement.offsetWidth : this._resizerElement.offsetHeight;
+ if (!this.resizerElementSize) {
+ this.resizerElementSize =
+ this.isVerticalInternal ? this.resizerElementInternal.offsetWidth : this.resizerElementInternal.offsetHeight;
}
// Invalidate layout below.
- this._removeAllLayoutProperties();
+ this.removeAllLayoutProperties();
- // this._totalSizeDIP is available below since we successfully applied constraints.
+ // this.totalSizeDIP is available below since we successfully applied constraints.
const roundSizeCSS = Math.round(ZoomManager.instance().dipToCSS(sizeDIP));
const sidebarSizeValue = roundSizeCSS + 'px';
- const mainSizeValue = (this._totalSizeCSS - roundSizeCSS) + 'px';
- this._sidebarElement.style.flexBasis = sidebarSizeValue;
+ const mainSizeValue = (this.totalSizeCSS - roundSizeCSS) + 'px';
+ this.sidebarElementInternal.style.flexBasis = sidebarSizeValue;
// Make both sides relayout boundaries.
- if (this._isVertical) {
- this._sidebarElement.style.width = sidebarSizeValue;
- this._mainElement.style.width = mainSizeValue;
- this._sidebarElement.style.height = this._totalSizeOtherDimensionCSS + 'px';
- this._mainElement.style.height = this._totalSizeOtherDimensionCSS + 'px';
+ if (this.isVerticalInternal) {
+ this.sidebarElementInternal.style.width = sidebarSizeValue;
+ this.mainElement.style.width = mainSizeValue;
+ this.sidebarElementInternal.style.height = this.totalSizeOtherDimensionCSS + 'px';
+ this.mainElement.style.height = this.totalSizeOtherDimensionCSS + 'px';
} else {
- this._sidebarElement.style.height = sidebarSizeValue;
- this._mainElement.style.height = mainSizeValue;
- this._sidebarElement.style.width = this._totalSizeOtherDimensionCSS + 'px';
- this._mainElement.style.width = this._totalSizeOtherDimensionCSS + 'px';
+ this.sidebarElementInternal.style.height = sidebarSizeValue;
+ this.mainElement.style.height = mainSizeValue;
+ this.sidebarElementInternal.style.width = this.totalSizeOtherDimensionCSS + 'px';
+ this.mainElement.style.width = this.totalSizeOtherDimensionCSS + 'px';
}
// Position resizer.
- if (this._isVertical) {
- if (this._secondIsSidebar) {
- this._resizerElement.style.right = sidebarSizeValue;
- this._resizerElement.style.marginRight = -this._resizerElementSize / 2 + 'px';
+ if (this.isVerticalInternal) {
+ if (this.secondIsSidebar) {
+ this.resizerElementInternal.style.right = sidebarSizeValue;
+ this.resizerElementInternal.style.marginRight = -this.resizerElementSize / 2 + 'px';
} else {
- this._resizerElement.style.left = sidebarSizeValue;
- this._resizerElement.style.marginLeft = -this._resizerElementSize / 2 + 'px';
+ this.resizerElementInternal.style.left = sidebarSizeValue;
+ this.resizerElementInternal.style.marginLeft = -this.resizerElementSize / 2 + 'px';
}
} else {
- if (this._secondIsSidebar) {
- this._resizerElement.style.bottom = sidebarSizeValue;
- this._resizerElement.style.marginBottom = -this._resizerElementSize / 2 + 'px';
+ if (this.secondIsSidebar) {
+ this.resizerElementInternal.style.bottom = sidebarSizeValue;
+ this.resizerElementInternal.style.marginBottom = -this.resizerElementSize / 2 + 'px';
} else {
- this._resizerElement.style.top = sidebarSizeValue;
- this._resizerElement.style.marginTop = -this._resizerElementSize / 2 + 'px';
+ this.resizerElementInternal.style.top = sidebarSizeValue;
+ this.resizerElementInternal.style.marginTop = -this.resizerElementSize / 2 + 'px';
}
}
- this._sidebarSizeDIP = sizeDIP;
+ this.sidebarSizeDIP = sizeDIP;
// Force layout.
if (animate) {
- this._animate(false);
+ this.animate(false);
} else {
- // No need to recalculate this._sidebarSizeDIP and this._totalSizeDIP again.
+ // No need to recalculate this.sidebarSizeDIP and this.totalSizeDIP again.
this.doResize();
this.dispatchEventToListeners(Events.SidebarSizeChanged, this.sidebarSize());
}
}
- _animate(reverse: boolean, callback?: (() => void)): void {
+ private animate(reverse: boolean, callback?: (() => void)): void {
const animationTime = 50;
- this._animationCallback = callback || null;
+ this.animationCallback = callback || null;
let animatedMarginPropertyName: string;
- if (this._isVertical) {
- animatedMarginPropertyName = this._secondIsSidebar ? 'margin-right' : 'margin-left';
+ if (this.isVerticalInternal) {
+ animatedMarginPropertyName = this.secondIsSidebar ? 'margin-right' : 'margin-left';
} else {
- animatedMarginPropertyName = this._secondIsSidebar ? 'margin-bottom' : 'margin-top';
+ animatedMarginPropertyName = this.secondIsSidebar ? 'margin-bottom' : 'margin-top';
}
- const marginFrom = reverse ? '0' : '-' + ZoomManager.instance().dipToCSS(this._sidebarSizeDIP) + 'px';
- const marginTo = reverse ? '-' + ZoomManager.instance().dipToCSS(this._sidebarSizeDIP) + 'px' : '0';
+ const marginFrom = reverse ? '0' : '-' + ZoomManager.instance().dipToCSS(this.sidebarSizeDIP) + 'px';
+ const marginTo = reverse ? '-' + ZoomManager.instance().dipToCSS(this.sidebarSizeDIP) + 'px' : '0';
// This order of things is important.
// 1. Resize main element early and force layout.
this.contentElement.style.setProperty(animatedMarginPropertyName, marginFrom);
if (!reverse) {
- suppressUnused(this._mainElement.offsetWidth);
- suppressUnused(this._sidebarElement.offsetWidth);
+ suppressUnused(this.mainElement.offsetWidth);
+ suppressUnused(this.sidebarElementInternal.offsetWidth);
}
// 2. Issue onresize to the sidebar element, its size won't change.
- if (!reverse && this._sidebarWidget) {
- this._sidebarWidget.doResize();
+ if (!reverse && this.sidebarWidgetInternal) {
+ this.sidebarWidgetInternal.doResize();
}
// 3. Configure and run animation
@@ -539,7 +542,7 @@
const boundAnimationFrame = animationFrame.bind(this);
let startTime: number|null = null;
function animationFrame(this: SplitWidget): void {
- this._animationFrameHandle = 0;
+ this.animationFrameHandle = 0;
if (!startTime) {
// Kick animation on first frame.
@@ -547,51 +550,52 @@
startTime = window.performance.now();
} else if (window.performance.now() < startTime + animationTime) {
// Process regular animation frame.
- if (this._mainWidget) {
- this._mainWidget.doResize();
+ if (this.mainWidgetInternal) {
+ this.mainWidgetInternal.doResize();
}
} else {
// Complete animation.
- this._cancelAnimation();
- if (this._mainWidget) {
- this._mainWidget.doResize();
+ this.cancelAnimation();
+ if (this.mainWidgetInternal) {
+ this.mainWidgetInternal.doResize();
}
this.dispatchEventToListeners(Events.SidebarSizeChanged, this.sidebarSize());
return;
}
- this._animationFrameHandle = this.contentElement.window().requestAnimationFrame(boundAnimationFrame);
+ this.animationFrameHandle = this.contentElement.window().requestAnimationFrame(boundAnimationFrame);
}
- this._animationFrameHandle = this.contentElement.window().requestAnimationFrame(boundAnimationFrame);
+ this.animationFrameHandle = this.contentElement.window().requestAnimationFrame(boundAnimationFrame);
}
- _cancelAnimation(): void {
+ private cancelAnimation(): void {
this.contentElement.style.removeProperty('margin-top');
this.contentElement.style.removeProperty('margin-right');
this.contentElement.style.removeProperty('margin-bottom');
this.contentElement.style.removeProperty('margin-left');
this.contentElement.style.removeProperty('transition');
- if (this._animationFrameHandle) {
- this.contentElement.window().cancelAnimationFrame(this._animationFrameHandle);
- this._animationFrameHandle = 0;
+ if (this.animationFrameHandle) {
+ this.contentElement.window().cancelAnimationFrame(this.animationFrameHandle);
+ this.animationFrameHandle = 0;
}
- if (this._animationCallback) {
- this._animationCallback();
- this._animationCallback = null;
+ if (this.animationCallback) {
+ this.animationCallback();
+ this.animationCallback = null;
}
}
- _applyConstraints(sidebarSize: number, userAction?: boolean): number {
- const totalSize = this._totalSizeDIP();
- const zoomFactor = this._constraintsInDip ? 1 : ZoomManager.instance().zoomFactor();
+ private applyConstraints(sidebarSize: number, userAction?: boolean): number {
+ const totalSize = this.totalSizeDIP();
+ const zoomFactor = this.constraintsInDip ? 1 : ZoomManager.instance().zoomFactor();
- let constraints: Constraints = this._sidebarWidget ? this._sidebarWidget.constraints() : new Constraints();
+ let constraints: Constraints =
+ this.sidebarWidgetInternal ? this.sidebarWidgetInternal.constraints() : new Constraints();
let minSidebarSize: 20|number = this.isVertical() ? constraints.minimum.width : constraints.minimum.height;
if (!minSidebarSize) {
minSidebarSize = MinPadding;
}
minSidebarSize *= zoomFactor;
- if (this._sidebarMinimized) {
+ if (this.sidebarMinimized) {
sidebarSize = minSidebarSize;
}
@@ -607,7 +611,7 @@
}
preferredSidebarSize += zoomFactor; // 1 css pixel for splitter border.
- constraints = this._mainWidget ? this._mainWidget.constraints() : new Constraints();
+ constraints = this.mainWidgetInternal ? this.mainWidgetInternal.constraints() : new Constraints();
let minMainSize: 20|number = this.isVertical() ? constraints.minimum.width : constraints.minimum.height;
if (!minMainSize) {
minMainSize = MinPadding;
@@ -619,7 +623,7 @@
preferredMainSize = MinPadding;
}
preferredMainSize *= zoomFactor;
- const savedMainSize = this.isVertical() ? this._savedVerticalMainSize : this._savedHorizontalMainSize;
+ const savedMainSize = this.isVertical() ? this.savedVerticalMainSize : this.savedHorizontalMainSize;
if (savedMainSize !== null) {
preferredMainSize = Math.min(preferredMainSize, savedMainSize * zoomFactor);
}
@@ -646,34 +650,36 @@
}
wasShown(): void {
- this._forceUpdateLayout();
- ZoomManager.instance().addEventListener(ZoomManagerEvents.ZoomChanged, this._onZoomChanged, this);
+ this.forceUpdateLayout();
+ ZoomManager.instance().addEventListener(ZoomManagerEvents.ZoomChanged, this.onZoomChanged, this);
}
willHide(): void {
- ZoomManager.instance().removeEventListener(ZoomManagerEvents.ZoomChanged, this._onZoomChanged, this);
+ ZoomManager.instance().removeEventListener(ZoomManagerEvents.ZoomChanged, this.onZoomChanged, this);
}
onResize(): void {
- this._updateLayout();
+ this.updateLayout();
}
onLayout(): void {
- this._updateLayout();
+ this.updateLayout();
}
calculateConstraints(): Constraints {
- if (this._showMode === ShowMode.OnlyMain) {
- return this._mainWidget ? this._mainWidget.constraints() : new Constraints();
+ if (this.showModeInternal === ShowMode.OnlyMain) {
+ return this.mainWidgetInternal ? this.mainWidgetInternal.constraints() : new Constraints();
}
- if (this._showMode === ShowMode.OnlySidebar) {
- return this._sidebarWidget ? this._sidebarWidget.constraints() : new Constraints();
+ if (this.showModeInternal === ShowMode.OnlySidebar) {
+ return this.sidebarWidgetInternal ? this.sidebarWidgetInternal.constraints() : new Constraints();
}
- let mainConstraints: Constraints = this._mainWidget ? this._mainWidget.constraints() : new Constraints();
- let sidebarConstraints: Constraints = this._sidebarWidget ? this._sidebarWidget.constraints() : new Constraints();
+ let mainConstraints: Constraints =
+ this.mainWidgetInternal ? this.mainWidgetInternal.constraints() : new Constraints();
+ let sidebarConstraints: Constraints =
+ this.sidebarWidgetInternal ? this.sidebarWidgetInternal.constraints() : new Constraints();
const min = MinPadding;
- if (this._isVertical) {
+ if (this.isVerticalInternal) {
mainConstraints = mainConstraints.widthToMax(min).addWidth(1); // 1 for splitter
sidebarConstraints = sidebarConstraints.widthToMax(min);
return mainConstraints.addWidth(sidebarConstraints).heightToMax(sidebarConstraints);
@@ -683,46 +689,45 @@
return mainConstraints.widthToMax(sidebarConstraints).addHeight(sidebarConstraints);
}
- _onResizeStart(_event: Common.EventTarget.EventTargetEvent): void {
- this._resizeStartSizeDIP = this._sidebarSizeDIP;
+ private onResizeStart(_event: Common.EventTarget.EventTargetEvent): void {
+ this.resizeStartSizeDIP = this.sidebarSizeDIP;
}
- _onResizeUpdate(event: Common.EventTarget.EventTargetEvent): void {
+ private onResizeUpdate(event: Common.EventTarget.EventTargetEvent): void {
const offset = event.data.currentPosition - event.data.startPosition;
const offsetDIP = ZoomManager.instance().cssToDIP(offset);
- const newSizeDIP =
- this._secondIsSidebar ? this._resizeStartSizeDIP - offsetDIP : this._resizeStartSizeDIP + offsetDIP;
- const constrainedSizeDIP = this._applyConstraints(newSizeDIP, true);
- this._savedSidebarSizeDIP = constrainedSizeDIP;
- this._saveSetting();
- this._innerSetSidebarSizeDIP(constrainedSizeDIP, false, true);
+ const newSizeDIP = this.secondIsSidebar ? this.resizeStartSizeDIP - offsetDIP : this.resizeStartSizeDIP + offsetDIP;
+ const constrainedSizeDIP = this.applyConstraints(newSizeDIP, true);
+ this.savedSidebarSizeDIP = constrainedSizeDIP;
+ this.saveSetting();
+ this.innerSetSidebarSizeDIP(constrainedSizeDIP, false, true);
if (this.isVertical()) {
- this._savedVerticalMainSize = this._totalSizeDIP() - this._sidebarSizeDIP;
+ this.savedVerticalMainSize = this.totalSizeDIP() - this.sidebarSizeDIP;
} else {
- this._savedHorizontalMainSize = this._totalSizeDIP() - this._sidebarSizeDIP;
+ this.savedHorizontalMainSize = this.totalSizeDIP() - this.sidebarSizeDIP;
}
}
- _onResizeEnd(_event: Common.EventTarget.EventTargetEvent): void {
- this._resizeStartSizeDIP = 0;
+ private onResizeEnd(_event: Common.EventTarget.EventTargetEvent): void {
+ this.resizeStartSizeDIP = 0;
}
hideDefaultResizer(noSplitter?: boolean): void {
- this.uninstallResizer(this._resizerElement);
- this._sidebarElement.classList.toggle('no-default-splitter', Boolean(noSplitter));
+ this.uninstallResizer(this.resizerElementInternal);
+ this.sidebarElementInternal.classList.toggle('no-default-splitter', Boolean(noSplitter));
}
installResizer(resizerElement: Element): void {
- this._resizerWidget.addElement((resizerElement as HTMLElement));
+ this.resizerWidget.addElement((resizerElement as HTMLElement));
}
uninstallResizer(resizerElement: Element): void {
- this._resizerWidget.removeElement((resizerElement as HTMLElement));
+ this.resizerWidget.removeElement((resizerElement as HTMLElement));
}
hasCustomResizer(): boolean {
- const elements = this._resizerWidget.elements();
- return elements.length > 1 || (elements.length === 1 && elements[0] !== this._resizerElement);
+ const elements = this.resizerWidget.elements();
+ return elements.length > 1 || (elements.length === 1 && elements[0] !== this.resizerElementInternal);
}
toggleResizer(resizer: Element, on: boolean): void {
@@ -733,34 +738,35 @@
}
}
- _settingForOrientation(): SettingForOrientation|null {
- const state = this._setting ? this._setting.get() : {};
- return this._isVertical ? state.vertical : state.horizontal;
+ private settingForOrientation(): SettingForOrientation|null {
+ const state = this.setting ? this.setting.get() : {};
+ return this.isVerticalInternal ? state.vertical : state.horizontal;
}
- _preferredSidebarSizeDIP(): number {
- let size: number = this._savedSidebarSizeDIP;
+ private preferredSidebarSizeDIP(): number {
+ let size: number = this.savedSidebarSizeDIP;
if (!size) {
- size = this._isVertical ? this._defaultSidebarWidth : this._defaultSidebarHeight;
+ size = this.isVerticalInternal ? this.defaultSidebarWidth : this.defaultSidebarHeight;
// If we have default value in percents, calculate it on first use.
if (0 < size && size < 1) {
- size *= this._totalSizeDIP();
+ size *= this.totalSizeDIP();
}
}
return size;
}
- _restoreSidebarSizeFromSettings(): void {
- const settingForOrientation = this._settingForOrientation();
- this._savedSidebarSizeDIP = settingForOrientation ? settingForOrientation.size : 0;
+ private restoreSidebarSizeFromSettings(): void {
+ const settingForOrientation = this.settingForOrientation();
+ this.savedSidebarSizeDIP = settingForOrientation ? settingForOrientation.size : 0;
}
- _restoreAndApplyShowModeFromSettings(): void {
- const orientationState = this._settingForOrientation();
- this._savedShowMode = orientationState && orientationState.showMode ? orientationState.showMode : this._showMode;
- this._showMode = this._savedShowMode;
+ private restoreAndApplyShowModeFromSettings(): void {
+ const orientationState = this.settingForOrientation();
+ this.savedShowMode =
+ orientationState && orientationState.showMode ? orientationState.showMode : this.showModeInternal;
+ this.showModeInternal = this.savedShowMode;
- switch (this._savedShowMode) {
+ switch (this.savedShowMode) {
case ShowMode.Both:
this.showBoth();
break;
@@ -773,65 +779,65 @@
}
}
- _saveShowModeToSettings(): void {
- this._savedShowMode = this._showMode;
- this._saveSetting();
+ private saveShowModeToSettings(): void {
+ this.savedShowMode = this.showModeInternal;
+ this.saveSetting();
}
- _saveSetting(): void {
- if (!this._setting) {
+ private saveSetting(): void {
+ if (!this.setting) {
return;
}
- const state = this._setting.get();
- const orientationState = (this._isVertical ? state.vertical : state.horizontal) || {};
+ const state = this.setting.get();
+ const orientationState = (this.isVerticalInternal ? state.vertical : state.horizontal) || {};
- orientationState.size = this._savedSidebarSizeDIP;
- if (this._shouldSaveShowMode) {
- orientationState.showMode = this._savedShowMode;
+ orientationState.size = this.savedSidebarSizeDIP;
+ if (this.shouldSaveShowMode) {
+ orientationState.showMode = this.savedShowMode;
}
- if (this._isVertical) {
+ if (this.isVerticalInternal) {
state.vertical = orientationState;
} else {
state.horizontal = orientationState;
}
- this._setting.set(state);
+ this.setting.set(state);
}
- _forceUpdateLayout(): void {
+ private forceUpdateLayout(): void {
// Force layout even if sidebar size does not change.
- this._sidebarSizeDIP = -1;
- this._updateLayout();
+ this.sidebarSizeDIP = -1;
+ this.updateLayout();
}
- _onZoomChanged(_event: Common.EventTarget.EventTargetEvent): void {
- this._forceUpdateLayout();
+ private onZoomChanged(_event: Common.EventTarget.EventTargetEvent): void {
+ this.forceUpdateLayout();
}
createShowHideSidebarButton(showTitle: Common.UIString.LocalizedString, hideTitle: Common.UIString.LocalizedString):
ToolbarButton {
- this._showSidebarButtonTitle = showTitle;
- this._hideSidebarButtonTitle = hideTitle;
- this._showHideSidebarButton = new ToolbarButton('', '');
- this._showHideSidebarButton.addEventListener(ToolbarButton.Events.Click, buttonClicked, this);
- this._updateShowHideSidebarButton();
+ this.showSidebarButtonTitle = showTitle;
+ this.hideSidebarButtonTitle = hideTitle;
+ this.showHideSidebarButton = new ToolbarButton('', '');
+ this.showHideSidebarButton.addEventListener(ToolbarButton.Events.Click, buttonClicked, this);
+ this.updateShowHideSidebarButton();
function buttonClicked(this: SplitWidget, _event: Common.EventTarget.EventTargetEvent): void {
- if (this._showMode !== ShowMode.Both) {
+ if (this.showModeInternal !== ShowMode.Both) {
this.showBoth(true);
} else {
this.hideSidebar(true);
}
}
- return this._showHideSidebarButton;
+ return this.showHideSidebarButton;
}
- _updateShowHideSidebarButton(): void {
- if (!this._showHideSidebarButton) {
+ private updateShowHideSidebarButton(): void {
+ if (!this.showHideSidebarButton) {
return;
}
- const sidebarHidden = this._showMode === ShowMode.OnlyMain;
+ const sidebarHidden = this.showModeInternal === ShowMode.OnlyMain;
let glyph = '';
if (sidebarHidden) {
glyph = this.isVertical() ?
@@ -842,8 +848,8 @@
(this.isSidebarSecond() ? 'largeicon-hide-right-sidebar' : 'largeicon-hide-left-sidebar') :
(this.isSidebarSecond() ? 'largeicon-hide-bottom-sidebar' : 'largeicon-hide-top-sidebar');
}
- this._showHideSidebarButton.setGlyph(glyph);
- this._showHideSidebarButton.setTitle(sidebarHidden ? this._showSidebarButtonTitle : this._hideSidebarButtonTitle);
+ this.showHideSidebarButton.setGlyph(glyph);
+ this.showHideSidebarButton.setTitle(sidebarHidden ? this.showSidebarButtonTitle : this.hideSidebarButtonTitle);
}
}
diff --git a/front_end/ui/legacy/SuggestBox.ts b/front_end/ui/legacy/SuggestBox.ts
index d40416a..225cb45 100644
--- a/front_end/ui/legacy/SuggestBox.ts
+++ b/front_end/ui/legacy/SuggestBox.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as i18n from '../../core/i18n/i18n.js';
import * as Platform from '../../core/platform/platform.js';
import type * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -79,61 +77,61 @@
}
export class SuggestBox implements ListDelegate<Suggestion> {
- _suggestBoxDelegate: SuggestBoxDelegate;
- _maxItemsHeight: number|undefined;
- _rowHeight: number;
- _userEnteredText: string;
- _defaultSelectionIsDimmed: boolean;
- _onlyCompletion: Suggestion|null;
- _items: ListModel<Suggestion>;
- _list: ListControl<Suggestion>;
- _element: HTMLDivElement;
- _glassPane: GlassPane;
+ private readonly suggestBoxDelegate: SuggestBoxDelegate;
+ private readonly maxItemsHeight: number|undefined;
+ private rowHeight: number;
+ private userEnteredText: string;
+ private readonly defaultSelectionIsDimmed: boolean;
+ private onlyCompletion: Suggestion|null;
+ private readonly items: ListModel<Suggestion>;
+ private readonly list: ListControl<Suggestion>;
+ element: HTMLDivElement;
+ private readonly glassPane: GlassPane;
constructor(suggestBoxDelegate: SuggestBoxDelegate, maxItemsHeight?: number) {
- this._suggestBoxDelegate = suggestBoxDelegate;
- this._maxItemsHeight = maxItemsHeight;
- this._rowHeight = 17;
- this._userEnteredText = '';
- this._defaultSelectionIsDimmed = false;
+ this.suggestBoxDelegate = suggestBoxDelegate;
+ this.maxItemsHeight = maxItemsHeight;
+ this.rowHeight = 17;
+ this.userEnteredText = '';
+ this.defaultSelectionIsDimmed = false;
- this._onlyCompletion = null;
+ this.>
- this._items = new ListModel();
- this._list = new ListControl(this._items, this, ListMode.EqualHeightItems);
- this._element = this._list.element;
- this._element.classList.add('suggest-box');
- this._element.addEventListener('mousedown', event => event.preventDefault(), true);
- this._element.addEventListener('click', this._onClick.bind(this), false);
+ this.items = new ListModel();
+ this.list = new ListControl(this.items, this, ListMode.EqualHeightItems);
+ this.element = this.list.element;
+ this.element.classList.add('suggest-box');
+ this.element.addEventListener('mousedown', event => event.preventDefault(), true);
+ this.element.addEventListener('click', this.onClick.bind(this), false);
- this._glassPane = new GlassPane();
- this._glassPane.setAnchorBehavior(AnchorBehavior.PreferBottom);
- this._glassPane.setOutsideClickCallback(this.hide.bind(this));
+ this.glassPane = new GlassPane();
+ this.glassPane.setAnchorBehavior(AnchorBehavior.PreferBottom);
+ this.glassPane.setOutsideClickCallback(this.hide.bind(this));
const shadowRoot = createShadowRootWithCoreStyles(
- this._glassPane.contentElement, {cssFile: 'ui/legacy/suggestBox.css', delegatesFocus: undefined});
- shadowRoot.appendChild(this._element);
+ this.glassPane.contentElement, {cssFile: 'ui/legacy/suggestBox.css', delegatesFocus: undefined});
+ shadowRoot.appendChild(this.element);
}
visible(): boolean {
- return this._glassPane.isShowing();
+ return this.glassPane.isShowing();
}
setPosition(anchorBox: AnchorBox): void {
- this._glassPane.setContentAnchorBox(anchorBox);
+ this.glassPane.setContentAnchorBox(anchorBox);
}
setAnchorBehavior(behavior: AnchorBehavior): void {
- this._glassPane.setAnchorBehavior(behavior);
+ this.glassPane.setAnchorBehavior(behavior);
}
- _updateMaxSize(items: Suggestion[]): void {
- const maxWidth = this._maxWidth(items);
- const length = this._maxItemsHeight ? Math.min(this._maxItemsHeight, items.length) : items.length;
- const maxHeight = length * this._rowHeight;
- this._glassPane.setMaxContentSize(new Size(maxWidth, maxHeight));
+ private updateMaxSize(items: Suggestion[]): void {
+ const maxWidth = this.maxWidth(items);
+ const length = this.maxItemsHeight ? Math.min(this.maxItemsHeight, items.length) : items.length;
+ const maxHeight = length * this.rowHeight;
+ this.glassPane.setMaxContentSize(new Size(maxWidth, maxHeight));
}
- _maxWidth(items: Suggestion[]): number {
+ private maxWidth(items: Suggestion[]): number {
const kMaxWidth = 300;
if (!items.length) {
return kMaxWidth;
@@ -149,70 +147,70 @@
}
const element = this.createElementForItem((maxItem as Suggestion));
const preferredWidth =
- measurePreferredSize(element, this._element).width + measuredScrollbarWidth(this._element.ownerDocument);
+ measurePreferredSize(element, this.element).width + measuredScrollbarWidth(this.element.ownerDocument);
return Math.min(kMaxWidth, preferredWidth);
}
- _show(): void {
+ private show(): void {
if (this.visible()) {
return;
}
// TODO(dgozman): take document as a parameter.
- this._glassPane.show(document);
+ this.glassPane.show(document);
const suggestion = ({text: '1', subtitle: '12'} as Suggestion);
- this._rowHeight = measurePreferredSize(this.createElementForItem(suggestion), this._element).height;
- ARIAUtils.setControls(this._suggestBoxDelegate.ariaControlledBy(), this._element);
- ARIAUtils.setExpanded(this._suggestBoxDelegate.ariaControlledBy(), true);
+ this.rowHeight = measurePreferredSize(this.createElementForItem(suggestion), this.element).height;
+ ARIAUtils.setControls(this.suggestBoxDelegate.ariaControlledBy(), this.element);
+ ARIAUtils.setExpanded(this.suggestBoxDelegate.ariaControlledBy(), true);
}
hide(): void {
if (!this.visible()) {
return;
}
- this._glassPane.hide();
- ARIAUtils.setControls(this._suggestBoxDelegate.ariaControlledBy(), null);
- ARIAUtils.setExpanded(this._suggestBoxDelegate.ariaControlledBy(), false);
+ this.glassPane.hide();
+ ARIAUtils.setControls(this.suggestBoxDelegate.ariaControlledBy(), null);
+ ARIAUtils.setExpanded(this.suggestBoxDelegate.ariaControlledBy(), false);
}
- _applySuggestion(isIntermediateSuggestion?: boolean): boolean {
- if (this._onlyCompletion) {
+ private applySuggestion(isIntermediateSuggestion?: boolean): boolean {
+ if (this.onlyCompletion) {
isIntermediateSuggestion ?
ARIAUtils.alert(i18nString(
UIStrings.sSuggestionSOfS,
- {PH1: this._onlyCompletion.text, PH2: this._list.selectedIndex() + 1, PH3: this._items.length})) :
- ARIAUtils.alert(i18nString(UIStrings.sSuggestionSSelected, {PH1: this._onlyCompletion.text}));
- this._suggestBoxDelegate.applySuggestion(this._onlyCompletion, isIntermediateSuggestion);
+ {PH1: this.onlyCompletion.text, PH2: this.list.selectedIndex() + 1, PH3: this.items.length})) :
+ ARIAUtils.alert(i18nString(UIStrings.sSuggestionSSelected, {PH1: this.onlyCompletion.text}));
+ this.suggestBoxDelegate.applySuggestion(this.onlyCompletion, isIntermediateSuggestion);
return true;
}
- const suggestion = this._list.selectedItem();
+ const suggestion = this.list.selectedItem();
if (suggestion && suggestion.text) {
isIntermediateSuggestion ?
ARIAUtils.alert(i18nString(UIStrings.sSuggestionSOfS, {
PH1: suggestion.title || suggestion.text,
- PH2: this._list.selectedIndex() + 1,
- PH3: this._items.length,
+ PH2: this.list.selectedIndex() + 1,
+ PH3: this.items.length,
})) :
ARIAUtils.alert(i18nString(UIStrings.sSuggestionSSelected, {PH1: suggestion.title || suggestion.text}));
}
- this._suggestBoxDelegate.applySuggestion(suggestion, isIntermediateSuggestion);
+ this.suggestBoxDelegate.applySuggestion(suggestion, isIntermediateSuggestion);
return this.visible() && Boolean(suggestion);
}
acceptSuggestion(): boolean {
- const result = this._applySuggestion();
+ const result = this.applySuggestion();
this.hide();
if (!result) {
return false;
}
- this._suggestBoxDelegate.acceptSuggestion();
+ this.suggestBoxDelegate.acceptSuggestion();
return true;
}
createElementForItem(item: Suggestion): Element {
- const query = this._userEnteredText;
+ const query = this.userEnteredText;
const element = document.createElement('div');
element.classList.add('suggest-box-content-item');
element.classList.add('source-code');
@@ -254,7 +252,7 @@
}
heightForItem(_item: Suggestion): number {
- return this._rowHeight;
+ return this.rowHeight;
}
isItemSelectable(_item: Suggestion): boolean {
@@ -270,25 +268,25 @@
toElement.classList.add('selected');
toElement.classList.add('force-white-icons');
}
- this._applySuggestion(true);
+ this.applySuggestion(true);
}
updateSelectedItemARIA(_fromElement: Element|null, _toElement: Element|null): boolean {
return false;
}
- _onClick(event: Event): void {
- const item = this._list.itemForNode((event.target as Node | null));
+ private onClick(event: Event): void {
+ const item = this.list.itemForNode((event.target as Node | null));
if (!item) {
return;
}
- this._list.selectItem(item);
+ this.list.selectItem(item);
this.acceptSuggestion();
event.consume(true);
}
- _canShowBox(
+ private canShowBox(
completions: Suggestion[], highestPriorityItem: Suggestion|null, canShowForSingleItem: boolean,
userEnteredText: string): boolean {
if (!completions || !completions.length) {
@@ -311,27 +309,27 @@
updateSuggestions(
anchorBox: AnchorBox, completions: Suggestion[], selectHighestPriority: boolean, canShowForSingleItem: boolean,
userEnteredText: string): void {
- this._onlyCompletion = null;
+ this.>
const highestPriorityItem =
selectHighestPriority ? completions.reduce((a, b) => (a.priority || 0) >= (b.priority || 0) ? a : b) : null;
- if (this._canShowBox(completions, highestPriorityItem, canShowForSingleItem, userEnteredText)) {
- this._userEnteredText = userEnteredText;
+ if (this.canShowBox(completions, highestPriorityItem, canShowForSingleItem, userEnteredText)) {
+ this.userEnteredText = userEnteredText;
- this._show();
- this._updateMaxSize(completions);
- this._glassPane.setContentAnchorBox(anchorBox);
- this._list.invalidateItemHeight();
- this._items.replaceAll(completions);
+ this.show();
+ this.updateMaxSize(completions);
+ this.glassPane.setContentAnchorBox(anchorBox);
+ this.list.invalidateItemHeight();
+ this.items.replaceAll(completions);
if (highestPriorityItem && !highestPriorityItem.isSecondary) {
- this._list.selectItem(highestPriorityItem, true);
+ this.list.selectItem(highestPriorityItem, true);
} else {
- this._list.selectItem(null);
+ this.list.selectItem(null);
}
} else {
if (completions.length === 1) {
- this._onlyCompletion = completions[0];
- this._applySuggestion(true);
+ this.>
+ this.applySuggestion(true);
}
this.hide();
}
@@ -342,19 +340,19 @@
case 'Enter':
return this.enterKeyPressed();
case 'ArrowUp':
- return this._list.selectPreviousItem(true, false);
+ return this.list.selectPreviousItem(true, false);
case 'ArrowDown':
- return this._list.selectNextItem(true, false);
+ return this.list.selectNextItem(true, false);
case 'PageUp':
- return this._list.selectItemPreviousPage(false);
+ return this.list.selectItemPreviousPage(false);
case 'PageDown':
- return this._list.selectItemNextPage(false);
+ return this.list.selectItemNextPage(false);
}
return false;
}
enterKeyPressed(): boolean {
- const hasSelectedItem = Boolean(this._list.selectedItem()) || Boolean(this._onlyCompletion);
+ const hasSelectedItem = Boolean(this.list.selectedItem()) || Boolean(this.onlyCompletion);
this.acceptSuggestion();
// Report the event as non-handled if there is no selected item,
diff --git a/front_end/ui/legacy/TabbedPane.ts b/front_end/ui/legacy/TabbedPane.ts
index f428136..b41cfc2 100644
--- a/front_end/ui/legacy/TabbedPane.ts
+++ b/front_end/ui/legacy/TabbedPane.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type * as Common from '../../core/common/common.js';
import * as i18n from '../../core/i18n/i18n.js';
import * as Platform from '../../core/platform/platform.js';
@@ -76,35 +74,34 @@
const str_ = i18n.i18n.registerUIStrings('ui/legacy/TabbedPane.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class TabbedPane extends VBox {
- _headerElement: HTMLElement;
- _headerContentsElement: HTMLElement;
- _tabSlider: HTMLDivElement;
- _tabsElement: HTMLElement;
- _contentElement: HTMLElement;
- _tabs: TabbedPaneTab[];
- _tabsHistory: TabbedPaneTab[];
- _tabsById: Map<string, TabbedPaneTab>;
- _currentTabLocked: boolean;
- _autoSelectFirstItemOnShow: boolean;
- _triggerDropDownTimeout: number|null;
- _dropDownButton: HTMLDivElement;
- _currentDevicePixelRatio: number;
- _shrinkableTabs?: boolean;
- _verticalTabLayout?: boolean;
- _closeableTabs?: boolean;
- _delegate?: TabbedPaneTabDelegate;
- _currentTab?: TabbedPaneTab;
- _sliderEnabled?: boolean;
- _placeholderElement?: Element;
- _focusedPlaceholderElement?: Element;
- _placeholderContainerElement?: HTMLElement;
- _lastSelectedOverflowTab?: TabbedPaneTab;
- _overflowDisabled?: boolean;
- _measuredDropDownButtonWidth?: number;
- _leftToolbar?: Toolbar;
- _rightToolbar?: Toolbar;
- _allowTabReorder?: boolean;
- _automaticReorder?: boolean;
+ private readonly headerElementInternal: HTMLElement;
+ private readonly headerContentsElement: HTMLElement;
+ tabSlider: HTMLDivElement;
+ readonly tabsElement: HTMLElement;
+ private tabs: TabbedPaneTab[];
+ private readonly tabsHistory: TabbedPaneTab[];
+ tabsById: Map<string, TabbedPaneTab>;
+ private currentTabLocked: boolean;
+ private autoSelectFirstItemOnShow: boolean;
+ private triggerDropDownTimeout: number|null;
+ private dropDownButton: HTMLDivElement;
+ private currentDevicePixelRatio: number;
+ private shrinkableTabs?: boolean;
+ private verticalTabLayout?: boolean;
+ private closeableTabs?: boolean;
+ private delegate?: TabbedPaneTabDelegate;
+ private currentTab?: TabbedPaneTab;
+ private sliderEnabled?: boolean;
+ private placeholderElement?: Element;
+ private focusedPlaceholderElement?: Element;
+ private placeholderContainerElement?: HTMLElement;
+ private lastSelectedOverflowTab?: TabbedPaneTab;
+ private overflowDisabled?: boolean;
+ private measuredDropDownButtonWidth?: number;
+ private leftToolbarInternal?: Toolbar;
+ private rightToolbarInternal?: Toolbar;
+ allowTabReorder?: boolean;
+ private automaticReorder?: boolean;
constructor() {
super(true);
@@ -113,79 +110,79 @@
this.contentElement.classList.add('tabbed-pane-shadow');
this.contentElement.tabIndex = -1;
this.setDefaultFocusedElement(this.contentElement);
- this._headerElement = this.contentElement.createChild('div', 'tabbed-pane-header');
- this._headerContentsElement = this._headerElement.createChild('div', 'tabbed-pane-header-contents');
- this._tabSlider = document.createElement('div');
- this._tabSlider.classList.add('tabbed-pane-tab-slider');
- this._tabsElement = this._headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
- this._tabsElement.setAttribute('role', 'tablist');
- this._tabsElement.addEventListener('keydown', this._keyDown.bind(this), false);
- this._contentElement = this.contentElement.createChild('div', 'tabbed-pane-content');
- this._contentElement.createChild('slot');
- this._tabs = [];
- this._tabsHistory = [];
- this._tabsById = new Map();
- this._currentTabLocked = false;
- this._autoSelectFirstItemOnShow = true;
+ this.headerElementInternal = this.contentElement.createChild('div', 'tabbed-pane-header');
+ this.headerContentsElement = this.headerElementInternal.createChild('div', 'tabbed-pane-header-contents');
+ this.tabSlider = document.createElement('div');
+ this.tabSlider.classList.add('tabbed-pane-tab-slider');
+ this.tabsElement = this.headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
+ this.tabsElement.setAttribute('role', 'tablist');
+ this.tabsElement.addEventListener('keydown', this.keyDown.bind(this), false);
+ this.contentElement = this.contentElement.createChild('div', 'tabbed-pane-content') as HTMLDivElement;
+ this.contentElement.createChild('slot');
+ this.tabs = [];
+ this.tabsHistory = [];
+ this.tabsById = new Map();
+ this.currentTabLocked = false;
+ this.autoSelectFirstItemOnShow = true;
- this._triggerDropDownTimeout = null;
- this._dropDownButton = this._createDropDownButton();
- this._currentDevicePixelRatio = window.devicePixelRatio;
- ZoomManager.instance().addEventListener(ZoomManagerEvents.ZoomChanged, this._zoomChanged, this);
+ this.triggerDropDownTimeout = null;
+ this.dropDownButton = this.createDropDownButton();
+ this.currentDevicePixelRatio = window.devicePixelRatio;
+ ZoomManager.instance().addEventListener(ZoomManagerEvents.ZoomChanged, this.zoomChanged, this);
this.makeTabSlider();
}
setAccessibleName(name: string): void {
- ARIAUtils.setAccessibleName(this._tabsElement, name);
+ ARIAUtils.setAccessibleName(this.tabsElement, name);
}
setCurrentTabLocked(locked: boolean): void {
- this._currentTabLocked = locked;
- this._headerElement.classList.toggle('locked', this._currentTabLocked);
+ this.currentTabLocked = locked;
+ this.headerElementInternal.classList.toggle('locked', this.currentTabLocked);
}
setAutoSelectFirstItemOnShow(autoSelect: boolean): void {
- this._autoSelectFirstItemOnShow = autoSelect;
+ this.autoSelectFirstItemOnShow = autoSelect;
}
get visibleView(): Widget|null {
- return this._currentTab ? this._currentTab.view : null;
+ return this.currentTab ? this.currentTab.view : null;
}
tabIds(): string[] {
- return this._tabs.map(tab => tab._id);
+ return this.tabs.map(tab => tab.id);
}
tabIndex(tabId: string): number {
- return this._tabs.findIndex(tab => tab.id === tabId);
+ return this.tabs.findIndex(tab => tab.id === tabId);
}
tabViews(): Widget[] {
- return this._tabs.map(tab => tab.view);
+ return this.tabs.map(tab => tab.view);
}
tabView(tabId: string): Widget|null {
- const tab = this._tabsById.get(tabId);
+ const tab = this.tabsById.get(tabId);
return tab ? tab.view : null;
}
get selectedTabId(): string|null {
- return this._currentTab ? this._currentTab.id : null;
+ return this.currentTab ? this.currentTab.id : null;
}
setShrinkableTabs(shrinkableTabs: boolean): void {
- this._shrinkableTabs = shrinkableTabs;
+ this.shrinkableTabs = shrinkableTabs;
}
makeVerticalTabLayout(): void {
- this._verticalTabLayout = true;
- this._setTabSlider(false);
+ this.verticalTabLayout = true;
+ this.setTabSlider(false);
this.contentElement.classList.add('vertical-tab-layout');
this.invalidateConstraints();
}
setCloseableTabs(closeableTabs: boolean): void {
- this._closeableTabs = closeableTabs;
+ this.closeableTabs = closeableTabs;
}
focus(): void {
@@ -197,47 +194,47 @@
}
focusSelectedTabHeader(): void {
- const selectedTab = this._currentTab;
+ const selectedTab = this.currentTab;
if (selectedTab) {
selectedTab.tabElement.focus();
}
}
headerElement(): Element {
- return this._headerElement;
+ return this.headerElementInternal;
}
isTabCloseable(id: string): boolean {
- const tab = this._tabsById.get(id);
+ const tab = this.tabsById.get(id);
return tab ? tab.isCloseable() : false;
}
setTabDelegate(delegate: TabbedPaneTabDelegate): void {
- const tabs = this._tabs.slice();
+ const tabs = this.tabs.slice();
for (let i = 0; i < tabs.length; ++i) {
tabs[i].setDelegate(delegate);
}
- this._delegate = delegate;
+ this.delegate = delegate;
}
appendTab(
id: string, tabTitle: string, view: Widget, tabTooltip?: string, userGesture?: boolean, isCloseable?: boolean,
index?: number): void {
- const closeable = typeof isCloseable === 'boolean' ? isCloseable : Boolean(this._closeableTabs);
+ const closeable = typeof isCloseable === 'boolean' ? isCloseable : Boolean(this.closeableTabs);
const tab = new TabbedPaneTab(this, id, tabTitle, closeable, view, tabTooltip);
- tab.setDelegate((this._delegate as TabbedPaneTabDelegate));
- console.assert(!this._tabsById.has(id), `Tabbed pane already contains a tab with id '${id}'`);
- this._tabsById.set(id, tab);
+ tab.setDelegate((this.delegate as TabbedPaneTabDelegate));
+ console.assert(!this.tabsById.has(id), `Tabbed pane already contains a tab with id '${id}'`);
+ this.tabsById.set(id, tab);
if (index !== undefined) {
- this._tabs.splice(index, 0, tab);
+ this.tabs.splice(index, 0, tab);
} else {
- this._tabs.push(tab);
+ this.tabs.push(tab);
}
- this._tabsHistory.push(tab);
- if (this._tabsHistory[0] === tab && this.isShowing()) {
+ this.tabsHistory.push(tab);
+ if (this.tabsHistory[0] === tab && this.isShowing()) {
this.selectTab(tab.id, userGesture);
}
- this._updateTabElements();
+ this.updateTabElements();
}
closeTab(id: string, userGesture?: boolean): void {
@@ -247,35 +244,35 @@
closeTabs(ids: string[], userGesture?: boolean): void {
const focused = this.hasFocus();
for (let i = 0; i < ids.length; ++i) {
- this._innerCloseTab(ids[i], userGesture);
+ this.innerCloseTab(ids[i], userGesture);
}
- this._updateTabElements();
- if (this._tabsHistory.length) {
- this.selectTab(this._tabsHistory[0].id, false);
+ this.updateTabElements();
+ if (this.tabsHistory.length) {
+ this.selectTab(this.tabsHistory[0].id, false);
}
if (focused) {
this.focus();
}
}
- _innerCloseTab(id: string, userGesture?: boolean): true|undefined {
- const tab = this._tabsById.get(id);
+ private innerCloseTab(id: string, userGesture?: boolean): true|undefined {
+ const tab = this.tabsById.get(id);
if (!tab) {
return;
}
- if (userGesture && !tab._closeable) {
+ if (userGesture && !tab.closeable) {
return;
}
- if (this._currentTab && this._currentTab.id === id) {
- this._hideCurrentTab();
+ if (this.currentTab && this.currentTab.id === id) {
+ this.hideCurrentTab();
}
- this._tabsById.delete(id);
+ this.tabsById.delete(id);
- this._tabsHistory.splice(this._tabsHistory.indexOf(tab), 1);
- this._tabs.splice(this._tabs.indexOf(tab), 1);
- if (tab._shown) {
- this._hideTabElement(tab);
+ this.tabsHistory.splice(this.tabsHistory.indexOf(tab), 1);
+ this.tabs.splice(this.tabs.indexOf(tab), 1);
+ if (tab.shown) {
+ this.hideTabElement(tab);
}
const eventData: EventData = {prevTabId: undefined, tabId: id, view: tab.view, isUserGesture: userGesture};
@@ -284,23 +281,23 @@
}
hasTab(tabId: string): boolean {
- return this._tabsById.has(tabId);
+ return this.tabsById.has(tabId);
}
otherTabs(id: string): string[] {
const result = [];
- for (let i = 0; i < this._tabs.length; ++i) {
- if (this._tabs[i].id !== id) {
- result.push(this._tabs[i].id);
+ for (let i = 0; i < this.tabs.length; ++i) {
+ if (this.tabs[i].id !== id) {
+ result.push(this.tabs[i].id);
}
}
return result;
}
- _tabsToTheRight(id: string): string[] {
+ tabsToTheRight(id: string): string[] {
let index = -1;
- for (let i = 0; i < this._tabs.length; ++i) {
- if (this._tabs[i].id === id) {
+ for (let i = 0; i < this.tabs.length; ++i) {
+ if (this.tabs[i].id === id) {
index = i;
break;
}
@@ -308,12 +305,12 @@
if (index === -1) {
return [];
}
- return this._tabs.slice(index + 1).map(function(tab) {
+ return this.tabs.slice(index + 1).map(function(tab) {
return tab.id;
});
}
- _viewHasFocus(): boolean {
+ private viewHasFocus(): boolean {
if (this.visibleView && this.visibleView.hasFocus()) {
return true;
}
@@ -322,36 +319,36 @@
}
selectTab(id: string, userGesture?: boolean, forceFocus?: boolean): boolean {
- if (this._currentTabLocked) {
+ if (this.currentTabLocked) {
return false;
}
- const focused = this._viewHasFocus();
- const tab = this._tabsById.get(id);
+ const focused = this.viewHasFocus();
+ const tab = this.tabsById.get(id);
if (!tab) {
return false;
}
const eventData: EventData = {
- prevTabId: this._currentTab ? this._currentTab.id : undefined,
+ prevTabId: this.currentTab ? this.currentTab.id : undefined,
tabId: id,
view: tab.view,
isUserGesture: userGesture,
};
this.dispatchEventToListeners(Events.TabInvoked, eventData);
- if (this._currentTab && this._currentTab.id === id) {
+ if (this.currentTab && this.currentTab.id === id) {
return true;
}
this.suspendInvalidations();
- this._hideCurrentTab();
- this._showTab(tab);
+ this.hideCurrentTab();
+ this.showTab(tab);
this.resumeInvalidations();
- this._currentTab = tab;
+ this.currentTab = tab;
- this._tabsHistory.splice(this._tabsHistory.indexOf(tab), 1);
- this._tabsHistory.splice(0, 0, tab);
+ this.tabsHistory.splice(this.tabsHistory.indexOf(tab), 1);
+ this.tabsHistory.splice(0, 0, tab);
- this._updateTabElements();
+ this.updateTabElements();
if (focused || forceFocus) {
this.focus();
}
@@ -361,15 +358,15 @@
}
selectNextTab(): void {
- const index = this._tabs.indexOf((this._currentTab as TabbedPaneTab));
- const nextIndex = Platform.NumberUtilities.mod(index + 1, this._tabs.length);
- this.selectTab(this._tabs[nextIndex].id, true);
+ const index = this.tabs.indexOf((this.currentTab as TabbedPaneTab));
+ const nextIndex = Platform.NumberUtilities.mod(index + 1, this.tabs.length);
+ this.selectTab(this.tabs[nextIndex].id, true);
}
selectPrevTab(): void {
- const index = this._tabs.indexOf((this._currentTab as TabbedPaneTab));
- const nextIndex = Platform.NumberUtilities.mod(index - 1, this._tabs.length);
- this.selectTab(this._tabs[nextIndex].id, true);
+ const index = this.tabs.indexOf((this.currentTab as TabbedPaneTab));
+ const nextIndex = Platform.NumberUtilities.mod(index - 1, this.tabs.length);
+ this.selectTab(this.tabs[nextIndex].id, true);
}
lastOpenedTabIds(tabsCount: number): string[] {
@@ -377,72 +374,72 @@
return tab.id;
}
- return this._tabsHistory.slice(0, tabsCount).map(tabToTabId);
+ return this.tabsHistory.slice(0, tabsCount).map(tabToTabId);
}
setTabIcon(id: string, icon: Icon|null): void {
- const tab = this._tabsById.get(id);
+ const tab = this.tabsById.get(id);
if (!tab) {
return;
}
- tab._setIcon(icon);
- this._updateTabElements();
+ tab.setIcon(icon);
+ this.updateTabElements();
}
setTabEnabled(id: string, enabled: boolean): void {
- const tab = this._tabsById.get(id);
+ const tab = this.tabsById.get(id);
if (tab) {
tab.tabElement.classList.toggle('disabled', !enabled);
}
}
toggleTabClass(id: string, className: string, force?: boolean): void {
- const tab = this._tabsById.get(id);
- if (tab && tab._toggleClass(className, force)) {
- this._updateTabElements();
+ const tab = this.tabsById.get(id);
+ if (tab && tab.toggleClass(className, force)) {
+ this.updateTabElements();
}
}
- _zoomChanged(_event: Common.EventTarget.EventTargetEvent): void {
- this._clearMeasuredWidths();
+ private zoomChanged(_event: Common.EventTarget.EventTargetEvent): void {
+ this.clearMeasuredWidths();
if (this.isShowing()) {
- this._updateTabElements();
+ this.updateTabElements();
}
}
- _clearMeasuredWidths(): void {
- for (let i = 0; i < this._tabs.length; ++i) {
- delete this._tabs[i]._measuredWidth;
+ private clearMeasuredWidths(): void {
+ for (let i = 0; i < this.tabs.length; ++i) {
+ delete this.tabs[i].measuredWidth;
}
}
changeTabTitle(id: string, tabTitle: string, tabTooltip?: string): void {
- const tab = this._tabsById.get(id);
+ const tab = this.tabsById.get(id);
if (tab && tabTooltip !== undefined) {
tab.tooltip = tabTooltip;
}
if (tab && tab.title !== tabTitle) {
tab.title = tabTitle;
ARIAUtils.setAccessibleName(tab.tabElement, tabTitle);
- this._updateTabElements();
+ this.updateTabElements();
}
}
changeTabView(id: string, view: Widget): void {
- const tab = this._tabsById.get(id);
+ const tab = this.tabsById.get(id);
if (!tab || tab.view === view) {
return;
}
this.suspendInvalidations();
- const isSelected = this._currentTab && this._currentTab.id === id;
+ const isSelected = this.currentTab && this.currentTab.id === id;
const shouldFocus = tab.view.hasFocus();
if (isSelected) {
- this._hideTab(tab);
+ this.hideTab(tab);
}
tab.view = view;
if (isSelected) {
- this._showTab(tab);
+ this.showTab(tab);
}
if (shouldFocus) {
tab.view.focus();
@@ -451,42 +448,42 @@
}
onResize(): void {
- if (this._currentDevicePixelRatio !== window.devicePixelRatio) {
+ if (this.currentDevicePixelRatio !== window.devicePixelRatio) {
// Force recalculation of all tab widths on a DPI change
- this._clearMeasuredWidths();
- this._currentDevicePixelRatio = window.devicePixelRatio;
+ this.clearMeasuredWidths();
+ this.currentDevicePixelRatio = window.devicePixelRatio;
}
- this._updateTabElements();
+ this.updateTabElements();
}
headerResized(): void {
- this._updateTabElements();
+ this.updateTabElements();
}
wasShown(): void {
- const effectiveTab = this._currentTab || this._tabsHistory[0];
- if (effectiveTab && this._autoSelectFirstItemOnShow) {
+ const effectiveTab = this.currentTab || this.tabsHistory[0];
+ if (effectiveTab && this.autoSelectFirstItemOnShow) {
this.selectTab(effectiveTab.id);
}
}
makeTabSlider(): void {
- if (this._verticalTabLayout) {
+ if (this.verticalTabLayout) {
return;
}
- this._setTabSlider(true);
+ this.setTabSlider(true);
}
- _setTabSlider(enable: boolean): void {
- this._sliderEnabled = enable;
- this._tabSlider.classList.toggle('enabled', enable);
+ private setTabSlider(enable: boolean): void {
+ this.sliderEnabled = enable;
+ this.tabSlider.classList.toggle('enabled', enable);
}
calculateConstraints(): Constraints {
let constraints = super.calculateConstraints();
const minContentConstraints = new Constraints(new Size(0, 0), new Size(50, 50));
constraints = constraints.widthToMax(minContentConstraints).heightToMax(minContentConstraints);
- if (this._verticalTabLayout) {
+ if (this.verticalTabLayout) {
constraints = constraints.addWidth(new Constraints(new Size(120, 0)));
} else {
constraints = constraints.addHeight(new Constraints(new Size(0, 30)));
@@ -494,88 +491,88 @@
return constraints;
}
- _updateTabElements(): void {
- invokeOnceAfterBatchUpdate(this, this._innerUpdateTabElements);
+ private updateTabElements(): void {
+ invokeOnceAfterBatchUpdate(this, this.innerUpdateTabElements);
}
setPlaceholderElement(element: Element, focusedElement?: Element): void {
- this._placeholderElement = element;
+ this.placeholderElement = element;
if (focusedElement) {
- this._focusedPlaceholderElement = focusedElement;
+ this.focusedPlaceholderElement = focusedElement;
}
- if (this._placeholderContainerElement) {
- this._placeholderContainerElement.removeChildren();
- this._placeholderContainerElement.appendChild(element);
+ if (this.placeholderContainerElement) {
+ this.placeholderContainerElement.removeChildren();
+ this.placeholderContainerElement.appendChild(element);
}
}
async waitForTabElementUpdate(): Promise<void> {
- this._innerUpdateTabElements();
+ this.innerUpdateTabElements();
}
- _innerUpdateTabElements(): void {
+ private innerUpdateTabElements(): void {
if (!this.isShowing()) {
return;
}
- if (!this._tabs.length) {
- this._contentElement.classList.add('has-no-tabs');
- if (this._placeholderElement && !this._placeholderContainerElement) {
- this._placeholderContainerElement = this._contentElement.createChild('div', 'tabbed-pane-placeholder fill');
- this._placeholderContainerElement.appendChild(this._placeholderElement);
- if (this._focusedPlaceholderElement) {
- this.setDefaultFocusedElement(this._focusedPlaceholderElement);
+ if (!this.tabs.length) {
+ this.contentElement.classList.add('has-no-tabs');
+ if (this.placeholderElement && !this.placeholderContainerElement) {
+ this.placeholderContainerElement = this.contentElement.createChild('div', 'tabbed-pane-placeholder fill');
+ this.placeholderContainerElement.appendChild(this.placeholderElement);
+ if (this.focusedPlaceholderElement) {
+ this.setDefaultFocusedElement(this.focusedPlaceholderElement);
}
}
} else {
- this._contentElement.classList.remove('has-no-tabs');
- if (this._placeholderContainerElement) {
- this._placeholderContainerElement.remove();
+ this.contentElement.classList.remove('has-no-tabs');
+ if (this.placeholderContainerElement) {
+ this.placeholderContainerElement.remove();
this.setDefaultFocusedElement(this.contentElement);
- delete this._placeholderContainerElement;
+ delete this.placeholderContainerElement;
}
}
- this._measureDropDownButton();
- this._adjustToolbarWidth();
- this._updateWidths();
- this._updateTabsDropDown();
- this._updateTabSlider();
+ this.measureDropDownButton();
+ this.adjustToolbarWidth();
+ this.updateWidths();
+ this.updateTabsDropDown();
+ this.updateTabSlider();
}
- _adjustToolbarWidth(): void {
- if (!this._rightToolbar || !this._measuredDropDownButtonWidth) {
+ private adjustToolbarWidth(): void {
+ if (!this.rightToolbarInternal || !this.measuredDropDownButtonWidth) {
return;
}
- const leftToolbarWidth = this._leftToolbar?.element.getBoundingClientRect().width ?? 0;
- const rightToolbarWidth = this._rightToolbar.element.getBoundingClientRect().width;
- const totalWidth = this._headerElement.getBoundingClientRect().width;
- if (!this._rightToolbar.hasCompactLayout() &&
- totalWidth - rightToolbarWidth - leftToolbarWidth < this._measuredDropDownButtonWidth + 10) {
- this._rightToolbar.setCompactLayout(true);
+ const leftToolbarWidth = this.leftToolbarInternal?.element.getBoundingClientRect().width ?? 0;
+ const rightToolbarWidth = this.rightToolbarInternal.element.getBoundingClientRect().width;
+ const totalWidth = this.headerElementInternal.getBoundingClientRect().width;
+ if (!this.rightToolbarInternal.hasCompactLayout() &&
+ totalWidth - rightToolbarWidth - leftToolbarWidth < this.measuredDropDownButtonWidth + 10) {
+ this.rightToolbarInternal.setCompactLayout(true);
} else if (
- this._rightToolbar.hasCompactLayout() &&
+ this.rightToolbarInternal.hasCompactLayout() &&
// Estimate the right toolbar size in non-compact mode as 2 times its compact size.
- totalWidth - 2 * rightToolbarWidth - leftToolbarWidth > this._measuredDropDownButtonWidth + 10) {
- this._rightToolbar.setCompactLayout(false);
+ totalWidth - 2 * rightToolbarWidth - leftToolbarWidth > this.measuredDropDownButtonWidth + 10) {
+ this.rightToolbarInternal.setCompactLayout(false);
}
}
- _showTabElement(index: number, tab: TabbedPaneTab): void {
- if (index >= this._tabsElement.children.length) {
- this._tabsElement.appendChild(tab.tabElement);
+ private showTabElement(index: number, tab: TabbedPaneTab): void {
+ if (index >= this.tabsElement.children.length) {
+ this.tabsElement.appendChild(tab.tabElement);
} else {
- this._tabsElement.insertBefore(tab.tabElement, this._tabsElement.children[index]);
+ this.tabsElement.insertBefore(tab.tabElement, this.tabsElement.children[index]);
}
- tab._shown = true;
+ tab.shown = true;
}
- _hideTabElement(tab: TabbedPaneTab): void {
- this._tabsElement.removeChild(tab.tabElement);
- tab._shown = false;
+ private hideTabElement(tab: TabbedPaneTab): void {
+ this.tabsElement.removeChild(tab.tabElement);
+ tab.shown = false;
}
- _createDropDownButton(): HTMLDivElement {
+ private createDropDownButton(): HTMLDivElement {
const dropDownContainer = document.createElement('div');
dropDownContainer.classList.add('tabbed-pane-header-tabs-drop-down-container');
const chevronIcon = Icon.create('largeicon-chevron', 'chevron-icon');
@@ -583,62 +580,62 @@
ARIAUtils.setAccessibleName(dropDownContainer, i18nString(UIStrings.moreTabs));
dropDownContainer.tabIndex = 0;
dropDownContainer.appendChild(chevronIcon);
- dropDownContainer.addEventListener('click', this._dropDownClicked.bind(this));
- dropDownContainer.addEventListener('keydown', this._dropDownKeydown.bind(this));
+ dropDownContainer.addEventListener('click', this.dropDownClicked.bind(this));
+ dropDownContainer.addEventListener('keydown', this.dropDownKeydown.bind(this));
dropDownContainer.addEventListener('mousedown', event => {
- if (event.which !== 1 || this._triggerDropDownTimeout) {
+ if (event.which !== 1 || this.triggerDropDownTimeout) {
return;
}
- this._triggerDropDownTimeout = window.setTimeout(this._dropDownClicked.bind(this, event), 200);
+ this.triggerDropDownTimeout = window.setTimeout(this.dropDownClicked.bind(this, event), 200);
});
return dropDownContainer;
}
- _dropDownClicked(ev: Event): void {
+ private dropDownClicked(ev: Event): void {
const event = (ev as MouseEvent);
if (event.which !== 1) {
return;
}
- if (this._triggerDropDownTimeout) {
- clearTimeout(this._triggerDropDownTimeout);
- this._triggerDropDownTimeout = null;
+ if (this.triggerDropDownTimeout) {
+ clearTimeout(this.triggerDropDownTimeout);
+ this.triggerDropDownTimeout = null;
}
- const rect = this._dropDownButton.getBoundingClientRect();
+ const rect = this.dropDownButton.getBoundingClientRect();
const menu = new ContextMenu(event, false, rect.left, rect.bottom);
- for (const tab of this._tabs) {
- if (tab._shown) {
+ for (const tab of this.tabs) {
+ if (tab.shown) {
continue;
}
- if (this._numberOfTabsShown() === 0 && this._tabsHistory[0] === tab) {
+ if (this.numberOfTabsShown() === 0 && this.tabsHistory[0] === tab) {
menu.defaultSection().appendCheckboxItem(
- tab.title, this._dropDownMenuItemSelected.bind(this, tab), /* checked */ true);
+ tab.title, this.dropDownMenuItemSelected.bind(this, tab), /* checked */ true);
} else {
- menu.defaultSection().appendItem(tab.title, this._dropDownMenuItemSelected.bind(this, tab));
+ menu.defaultSection().appendItem(tab.title, this.dropDownMenuItemSelected.bind(this, tab));
}
}
menu.show();
}
- _dropDownKeydown(event: Event): void {
+ private dropDownKeydown(event: Event): void {
if (isEnterOrSpaceKey(event)) {
- this._dropDownButton.click();
+ this.dropDownButton.click();
event.consume(true);
}
}
- _dropDownMenuItemSelected(tab: TabbedPaneTab): void {
- this._lastSelectedOverflowTab = tab;
+ private dropDownMenuItemSelected(tab: TabbedPaneTab): void {
+ this.lastSelectedOverflowTab = tab;
this.selectTab(tab.id, true, true);
}
- _totalWidth(): number {
- return this._headerContentsElement.getBoundingClientRect().width;
+ private totalWidth(): number {
+ return this.headerContentsElement.getBoundingClientRect().width;
}
- _numberOfTabsShown(): number {
+ private numberOfTabsShown(): number {
let numTabsShown = 0;
- for (const tab of this._tabs) {
- if (tab._shown) {
+ for (const tab of this.tabs) {
+ if (tab.shown) {
numTabsShown++;
}
}
@@ -646,82 +643,82 @@
}
disableOverflowMenu(): void {
- this._overflowDisabled = true;
+ this.overflowDisabled = true;
}
- _updateTabsDropDown(): void {
- const tabsToShowIndexes = this._tabsToShowIndexes(
- this._tabs, this._tabsHistory, this._totalWidth(), this._measuredDropDownButtonWidth || 0);
- if (this._lastSelectedOverflowTab && this._numberOfTabsShown() !== tabsToShowIndexes.length) {
- delete this._lastSelectedOverflowTab;
- this._updateTabsDropDown();
+ private updateTabsDropDown(): void {
+ const tabsToShowIndexes =
+ this.tabsToShowIndexes(this.tabs, this.tabsHistory, this.totalWidth(), this.measuredDropDownButtonWidth || 0);
+ if (this.lastSelectedOverflowTab && this.numberOfTabsShown() !== tabsToShowIndexes.length) {
+ delete this.lastSelectedOverflowTab;
+ this.updateTabsDropDown();
return;
}
- for (let i = 0; i < this._tabs.length; ++i) {
- if (this._tabs[i]._shown && tabsToShowIndexes.indexOf(i) === -1) {
- this._hideTabElement(this._tabs[i]);
+ for (let i = 0; i < this.tabs.length; ++i) {
+ if (this.tabs[i].shown && tabsToShowIndexes.indexOf(i) === -1) {
+ this.hideTabElement(this.tabs[i]);
}
}
for (let i = 0; i < tabsToShowIndexes.length; ++i) {
- const tab = this._tabs[tabsToShowIndexes[i]];
- if (!tab._shown) {
- this._showTabElement(i, tab);
+ const tab = this.tabs[tabsToShowIndexes[i]];
+ if (!tab.shown) {
+ this.showTabElement(i, tab);
}
}
- if (!this._overflowDisabled) {
- this._maybeShowDropDown(tabsToShowIndexes.length !== this._tabs.length);
+ if (!this.overflowDisabled) {
+ this.maybeShowDropDown(tabsToShowIndexes.length !== this.tabs.length);
}
}
- _maybeShowDropDown(hasMoreTabs: boolean): void {
- if (hasMoreTabs && !this._dropDownButton.parentElement) {
- this._headerContentsElement.appendChild(this._dropDownButton);
- } else if (!hasMoreTabs && this._dropDownButton.parentElement) {
- this._headerContentsElement.removeChild(this._dropDownButton);
+ private maybeShowDropDown(hasMoreTabs: boolean): void {
+ if (hasMoreTabs && !this.dropDownButton.parentElement) {
+ this.headerContentsElement.appendChild(this.dropDownButton);
+ } else if (!hasMoreTabs && this.dropDownButton.parentElement) {
+ this.headerContentsElement.removeChild(this.dropDownButton);
}
}
- _measureDropDownButton(): void {
- if (this._overflowDisabled || this._measuredDropDownButtonWidth) {
+ private measureDropDownButton(): void {
+ if (this.overflowDisabled || this.measuredDropDownButtonWidth) {
return;
}
- this._dropDownButton.classList.add('measuring');
- this._headerContentsElement.appendChild(this._dropDownButton);
- this._measuredDropDownButtonWidth = this._dropDownButton.getBoundingClientRect().width;
- this._headerContentsElement.removeChild(this._dropDownButton);
- this._dropDownButton.classList.remove('measuring');
+ this.dropDownButton.classList.add('measuring');
+ this.headerContentsElement.appendChild(this.dropDownButton);
+ this.measuredDropDownButtonWidth = this.dropDownButton.getBoundingClientRect().width;
+ this.headerContentsElement.removeChild(this.dropDownButton);
+ this.dropDownButton.classList.remove('measuring');
}
- _updateWidths(): void {
- const measuredWidths = this._measureWidths();
+ private updateWidths(): void {
+ const measuredWidths = this.measureWidths();
const maxWidth =
- this._shrinkableTabs ? this._calculateMaxWidth(measuredWidths.slice(), this._totalWidth()) : Number.MAX_VALUE;
+ this.shrinkableTabs ? this.calculateMaxWidth(measuredWidths.slice(), this.totalWidth()) : Number.MAX_VALUE;
let i = 0;
- for (const tab of this._tabs) {
- tab.setWidth(this._verticalTabLayout ? -1 : Math.min(maxWidth, measuredWidths[i++]));
+ for (const tab of this.tabs) {
+ tab.setWidth(this.verticalTabLayout ? -1 : Math.min(maxWidth, measuredWidths[i++]));
}
}
- _measureWidths(): number[] {
- // Add all elements to measure into this._tabsElement
- this._tabsElement.style.setProperty('width', '2000px');
+ private measureWidths(): number[] {
+ // Add all elements to measure into this.tabsElement
+ this.tabsElement.style.setProperty('width', '2000px');
const measuringTabElements = new Map<HTMLElement, TabbedPaneTab>();
- for (const tab of this._tabs) {
- if (typeof tab._measuredWidth === 'number') {
+ for (const tab of this.tabs) {
+ if (typeof tab.measuredWidth === 'number') {
continue;
}
- const measuringTabElement = tab._createTabElement(true);
+ const measuringTabElement = tab.createTabElement(true);
measuringTabElements.set(measuringTabElement, tab);
- this._tabsElement.appendChild(measuringTabElement);
+ this.tabsElement.appendChild(measuringTabElement);
}
// Perform measurement
for (const [measuringTabElement, tab] of measuringTabElements) {
const width = measuringTabElement.getBoundingClientRect().width;
- tab._measuredWidth = Math.ceil(width);
+ tab.measuredWidth = Math.ceil(width);
}
// Nuke elements from the UI
@@ -731,15 +728,15 @@
// Combine the results.
const measuredWidths = [];
- for (const tab of this._tabs) {
- measuredWidths.push(tab._measuredWidth || 0);
+ for (const tab of this.tabs) {
+ measuredWidths.push(tab.measuredWidth || 0);
}
- this._tabsElement.style.removeProperty('width');
+ this.tabsElement.style.removeProperty('width');
return measuredWidths;
}
- _calculateMaxWidth(measuredWidths: number[], totalWidth: number): number {
+ private calculateMaxWidth(measuredWidths: number[], totalWidth: number): number {
if (!measuredWidths.length) {
return 0;
}
@@ -771,7 +768,7 @@
return totalWidth / measuredWidths.length;
}
- _tabsToShowIndexes(
+ private tabsToShowIndexes(
tabsOrdered: TabbedPaneTab[], tabsHistory: TabbedPaneTab[], totalWidth: number,
measuredDropDownButtonWidth: number): number[] {
const tabsToShowIndexes = [];
@@ -779,20 +776,20 @@
let totalTabsWidth = 0;
const tabCount = tabsOrdered.length;
const tabsToLookAt = tabsOrdered.slice(0);
- if (this._currentTab !== undefined) {
- tabsToLookAt.unshift(tabsToLookAt.splice(tabsToLookAt.indexOf(this._currentTab), 1)[0]);
+ if (this.currentTab !== undefined) {
+ tabsToLookAt.unshift(tabsToLookAt.splice(tabsToLookAt.indexOf(this.currentTab), 1)[0]);
}
- if (this._lastSelectedOverflowTab !== undefined) {
- tabsToLookAt.unshift(tabsToLookAt.splice(tabsToLookAt.indexOf(this._lastSelectedOverflowTab), 1)[0]);
+ if (this.lastSelectedOverflowTab !== undefined) {
+ tabsToLookAt.unshift(tabsToLookAt.splice(tabsToLookAt.indexOf(this.lastSelectedOverflowTab), 1)[0]);
}
for (let i = 0; i < tabCount; ++i) {
- const tab = this._automaticReorder ? tabsHistory[i] : tabsToLookAt[i];
+ const tab = this.automaticReorder ? tabsHistory[i] : tabsToLookAt[i];
totalTabsWidth += tab.width();
let minimalRequiredWidth = totalTabsWidth;
if (i !== tabCount - 1) {
minimalRequiredWidth += measuredDropDownButtonWidth;
}
- if (!this._verticalTabLayout && minimalRequiredWidth > totalWidth) {
+ if (!this.verticalTabLayout && minimalRequiredWidth > totalWidth) {
break;
}
tabsToShowIndexes.push(tabsOrdered.indexOf(tab));
@@ -805,48 +802,48 @@
return tabsToShowIndexes;
}
- _hideCurrentTab(): void {
- if (!this._currentTab) {
+ private hideCurrentTab(): void {
+ if (!this.currentTab) {
return;
}
- this._hideTab(this._currentTab);
- delete this._currentTab;
+ this.hideTab(this.currentTab);
+ delete this.currentTab;
}
- _showTab(tab: TabbedPaneTab): void {
+ private showTab(tab: TabbedPaneTab): void {
tab.tabElement.tabIndex = 0;
tab.tabElement.classList.add('selected');
ARIAUtils.setSelected(tab.tabElement, true);
tab.view.show(this.element);
- this._updateTabSlider();
+ this.updateTabSlider();
}
- _updateTabSlider(): void {
- if (!this._sliderEnabled) {
+ updateTabSlider(): void {
+ if (!this.sliderEnabled) {
return;
}
- if (!this._currentTab) {
- this._tabSlider.style.width = '0';
+ if (!this.currentTab) {
+ this.tabSlider.style.width = '0';
return;
}
let left = 0;
- for (let i = 0; i < this._tabs.length && this._currentTab !== this._tabs[i]; i++) {
- if (this._tabs[i]._shown) {
- left += this._tabs[i]._measuredWidth || 0;
+ for (let i = 0; i < this.tabs.length && this.currentTab !== this.tabs[i]; i++) {
+ if (this.tabs[i].shown) {
+ left += this.tabs[i].measuredWidth || 0;
}
}
- const sliderWidth = this._currentTab._shown ? this._currentTab._measuredWidth : this._dropDownButton.offsetWidth;
+ const sliderWidth = this.currentTab.shown ? this.currentTab.measuredWidth : this.dropDownButton.offsetWidth;
const scaleFactor = window.devicePixelRatio >= 1.5 ? ' scaleY(0.75)' : '';
- this._tabSlider.style.transform = 'translateX(' + left + 'px)' + scaleFactor;
- this._tabSlider.style.width = sliderWidth + 'px';
+ this.tabSlider.style.transform = 'translateX(' + left + 'px)' + scaleFactor;
+ this.tabSlider.style.width = sliderWidth + 'px';
- if (this._tabSlider.parentElement !== this._headerContentsElement) {
- this._headerContentsElement.appendChild(this._tabSlider);
+ if (this.tabSlider.parentElement !== this.headerContentsElement) {
+ this.headerContentsElement.appendChild(this.tabSlider);
}
}
- _hideTab(tab: TabbedPaneTab): void {
+ private hideTab(tab: TabbedPaneTab): void {
tab.tabElement.removeAttribute('tabIndex');
tab.tabElement.classList.remove('selected');
tab.tabElement.setAttribute('aria-selected', 'false');
@@ -854,45 +851,45 @@
}
elementsToRestoreScrollPositionsFor(): Element[] {
- return [this._contentElement];
+ return [this.contentElement];
}
- _insertBefore(tab: TabbedPaneTab, index: number): void {
- this._tabsElement.insertBefore(tab.tabElement, this._tabsElement.childNodes[index]);
- const oldIndex = this._tabs.indexOf(tab);
- this._tabs.splice(oldIndex, 1);
+ insertBefore(tab: TabbedPaneTab, index: number): void {
+ this.tabsElement.insertBefore(tab.tabElement, this.tabsElement.childNodes[index]);
+ const oldIndex = this.tabs.indexOf(tab);
+ this.tabs.splice(oldIndex, 1);
if (oldIndex < index) {
--index;
}
- this._tabs.splice(index, 0, tab);
+ this.tabs.splice(index, 0, tab);
const eventData: EventData = {prevTabId: undefined, tabId: tab.id, view: tab.view, isUserGesture: undefined};
this.dispatchEventToListeners(Events.TabOrderChanged, eventData);
}
leftToolbar(): Toolbar {
- if (!this._leftToolbar) {
- this._leftToolbar = new Toolbar('tabbed-pane-left-toolbar');
- this._headerElement.insertBefore(this._leftToolbar.element, this._headerElement.firstChild);
+ if (!this.leftToolbarInternal) {
+ this.leftToolbarInternal = new Toolbar('tabbed-pane-left-toolbar');
+ this.headerElementInternal.insertBefore(this.leftToolbarInternal.element, this.headerElementInternal.firstChild);
}
- return this._leftToolbar;
+ return this.leftToolbarInternal;
}
rightToolbar(): Toolbar {
- if (!this._rightToolbar) {
- this._rightToolbar = new Toolbar('tabbed-pane-right-toolbar');
- this._headerElement.appendChild(this._rightToolbar.element);
+ if (!this.rightToolbarInternal) {
+ this.rightToolbarInternal = new Toolbar('tabbed-pane-right-toolbar');
+ this.headerElementInternal.appendChild(this.rightToolbarInternal.element);
}
- return this._rightToolbar;
+ return this.rightToolbarInternal;
}
setAllowTabReorder(allow: boolean, automatic?: boolean): void {
- this._allowTabReorder = allow;
- this._automaticReorder = automatic;
+ this.allowTabReorder = allow;
+ this.automaticReorder = automatic;
}
- _keyDown(ev: Event): void {
- if (!this._currentTab) {
+ private keyDown(ev: Event): void {
+ if (!this.currentTab) {
return;
}
const event = (ev as KeyboardEvent);
@@ -900,34 +897,34 @@
switch (event.key) {
case 'ArrowUp':
case 'ArrowLeft':
- nextTabElement = this._currentTab.tabElement.previousElementSibling;
- if (!nextTabElement && !this._dropDownButton.parentElement) {
- nextTabElement = this._currentTab.tabElement.parentElement ?
- this._currentTab.tabElement.parentElement.lastElementChild :
+ nextTabElement = this.currentTab.tabElement.previousElementSibling;
+ if (!nextTabElement && !this.dropDownButton.parentElement) {
+ nextTabElement = this.currentTab.tabElement.parentElement ?
+ this.currentTab.tabElement.parentElement.lastElementChild :
null;
}
break;
case 'ArrowDown':
case 'ArrowRight':
- nextTabElement = this._currentTab.tabElement.nextElementSibling;
- if (!nextTabElement && !this._dropDownButton.parentElement) {
- nextTabElement = this._currentTab.tabElement.parentElement ?
- this._currentTab.tabElement.parentElement.firstElementChild :
+ nextTabElement = this.currentTab.tabElement.nextElementSibling;
+ if (!nextTabElement && !this.dropDownButton.parentElement) {
+ nextTabElement = this.currentTab.tabElement.parentElement ?
+ this.currentTab.tabElement.parentElement.firstElementChild :
null;
}
break;
case 'Enter':
case ' ':
- this._currentTab.view.focus();
+ this.currentTab.view.focus();
return;
default:
return;
}
if (!nextTabElement) {
- this._dropDownButton.click();
+ this.dropDownButton.click();
return;
}
- const tab = this._tabs.find(tab => tab.tabElement === nextTabElement);
+ const tab = this.tabs.find(tab => tab.tabElement === nextTabElement);
if (tab) {
this.selectTab(tab.id, true);
}
@@ -951,136 +948,136 @@
}
export class TabbedPaneTab {
- _closeable: boolean;
- _tabbedPane: TabbedPane;
- _id: string;
- _title: string;
- _tooltip: string|undefined;
- _view: Widget;
- _shown: boolean;
- _measuredWidth!: number|undefined;
- _tabElement!: HTMLElement|undefined;
- _iconContainer: Element|null;
- _icon?: Icon|null;
- _width?: number;
- _delegate?: TabbedPaneTabDelegate;
- _titleElement?: HTMLElement;
- _dragStartX?: number;
+ closeable: boolean;
+ private readonly tabbedPane: TabbedPane;
+ idInternal: string;
+ private titleInternal: string;
+ private tooltipInternal: string|undefined;
+ private viewInternal: Widget;
+ shown: boolean;
+ measuredWidth!: number|undefined;
+ private tabElementInternal!: HTMLElement|undefined;
+ private readonly iconContainer: Element|null;
+ private icon?: Icon|null;
+ private widthInternal?: number;
+ private delegate?: TabbedPaneTabDelegate;
+ private titleElement?: HTMLElement;
+ private dragStartX?: number;
constructor(tabbedPane: TabbedPane, id: string, title: string, closeable: boolean, view: Widget, tooltip?: string) {
- this._closeable = closeable;
- this._tabbedPane = tabbedPane;
- this._id = id;
- this._title = title;
- this._tooltip = tooltip;
- this._view = view;
- this._shown = false;
- this._iconContainer = null;
+ this.closeable = closeable;
+ this.tabbedPane = tabbedPane;
+ this.idInternal = id;
+ this.titleInternal = title;
+ this.tooltipInternal = tooltip;
+ this.viewInternal = view;
+ this.shown = false;
+ this.iconContainer = null;
}
get id(): string {
- return this._id;
+ return this.idInternal;
}
get title(): string {
- return this._title;
+ return this.titleInternal;
}
set title(title: string) {
- if (title === this._title) {
+ if (title === this.titleInternal) {
return;
}
- this._title = title;
- if (this._titleElement) {
- this._titleElement.textContent = title;
+ this.titleInternal = title;
+ if (this.titleElement) {
+ this.titleElement.textContent = title;
}
- delete this._measuredWidth;
+ delete this.measuredWidth;
}
isCloseable(): boolean {
- return this._closeable;
+ return this.closeable;
}
- _setIcon(icon: Icon|null): void {
- this._icon = icon;
- if (this._tabElement && this._titleElement) {
- this._createIconElement(this._tabElement, this._titleElement, false);
+ setIcon(icon: Icon|null): void {
+ this.icon = icon;
+ if (this.tabElementInternal && this.titleElement) {
+ this.createIconElement(this.tabElementInternal, this.titleElement, false);
}
- delete this._measuredWidth;
+ delete this.measuredWidth;
}
- _toggleClass(className: string, force?: boolean): boolean {
+ toggleClass(className: string, force?: boolean): boolean {
const element = this.tabElement;
const hasClass = element.classList.contains(className);
if (hasClass === force) {
return false;
}
element.classList.toggle(className, force);
- delete this._measuredWidth;
+ delete this.measuredWidth;
return true;
}
get view(): Widget {
- return this._view;
+ return this.viewInternal;
}
set view(view: Widget) {
- this._view = view;
+ this.viewInternal = view;
}
get tooltip(): string|undefined {
- return this._tooltip;
+ return this.tooltipInternal;
}
set tooltip(tooltip: string|undefined) {
- this._tooltip = tooltip;
- if (this._titleElement) {
- Tooltip.install(this._titleElement, tooltip || '');
+ this.tooltipInternal = tooltip;
+ if (this.titleElement) {
+ Tooltip.install(this.titleElement, tooltip || '');
}
}
get tabElement(): HTMLElement {
- if (!this._tabElement) {
- this._tabElement = this._createTabElement(false);
+ if (!this.tabElementInternal) {
+ this.tabElementInternal = this.createTabElement(false);
}
- return this._tabElement;
+ return this.tabElementInternal;
}
width(): number {
- return this._width || 0;
+ return this.widthInternal || 0;
}
setWidth(width: number): void {
this.tabElement.style.width = width === -1 ? '' : (width + 'px');
- this._width = width;
+ this.widthInternal = width;
}
setDelegate(delegate: TabbedPaneTabDelegate): void {
- this._delegate = delegate;
+ this.delegate = delegate;
}
- _createIconElement(tabElement: Element, titleElement: Element, measuring: boolean): void {
+ private createIconElement(tabElement: Element, titleElement: Element, measuring: boolean): void {
const iconElement = tabIcons.get(tabElement);
if (iconElement) {
iconElement.remove();
tabIcons.delete(tabElement);
}
- if (!this._icon) {
+ if (!this.icon) {
return;
}
const iconContainer = document.createElement('span');
iconContainer.classList.add('tabbed-pane-header-tab-icon');
- const iconNode = measuring ? this._icon.cloneNode(true) : this._icon;
+ const iconNode = measuring ? this.icon.cloneNode(true) : this.icon;
iconContainer.appendChild(iconNode);
tabElement.insertBefore(iconContainer, titleElement);
tabIcons.set(tabElement, iconContainer);
}
- _createTabElement(measuring: boolean): HTMLElement {
+ createTabElement(measuring: boolean): HTMLElement {
const tabElement = document.createElement('div');
tabElement.classList.add('tabbed-pane-header-tab');
- tabElement.id = 'tab-' + this._id;
+ tabElement.id = 'tab-' + this.idInternal;
ARIAUtils.markAsTab(tabElement);
ARIAUtils.setSelected(tabElement, false);
ARIAUtils.setAccessibleName(tabElement, this.title);
@@ -1088,12 +1085,12 @@
const titleElement = tabElement.createChild('span', 'tabbed-pane-header-tab-title');
titleElement.textContent = this.title;
Tooltip.install(titleElement, this.tooltip || '');
- this._createIconElement(tabElement, titleElement, measuring);
+ this.createIconElement(tabElement, titleElement, measuring);
if (!measuring) {
- this._titleElement = titleElement;
+ this.titleElement = titleElement;
}
- if (this._closeable) {
+ if (this.closeable) {
const closeIcon = this.createCloseIconButton();
tabElement.appendChild(closeIcon);
tabElement.classList.add('closeable');
@@ -1102,16 +1099,16 @@
if (measuring) {
tabElement.classList.add('measuring');
} else {
- tabElement.addEventListener('click', this._tabClicked.bind(this), false);
- tabElement.addEventListener('auxclick', this._tabClicked.bind(this), false);
- tabElement.addEventListener('mousedown', this._tabMouseDown.bind(this), false);
- tabElement.addEventListener('mouseup', this._tabMouseUp.bind(this), false);
+ tabElement.addEventListener('click', this.tabClicked.bind(this), false);
+ tabElement.addEventListener('auxclick', this.tabClicked.bind(this), false);
+ tabElement.addEventListener('mousedown', this.tabMouseDown.bind(this), false);
+ tabElement.addEventListener('mouseup', this.tabMouseUp.bind(this), false);
- tabElement.addEventListener('contextmenu', this._tabContextMenu.bind(this), false);
- if (this._tabbedPane._allowTabReorder) {
+ tabElement.addEventListener('contextmenu', this.tabContextMenu.bind(this), false);
+ if (this.tabbedPane.allowTabReorder) {
installDragHandle(
- tabElement, this._startTabDragging.bind(this), this._tabDragging.bind(this),
- this._endTabDragging.bind(this), '-webkit-grabbing', 'pointer', 200);
+ tabElement, this.startTabDragging.bind(this), this.tabDragging.bind(this), this.endTabDragging.bind(this),
+ '-webkit-grabbing', 'pointer', 200);
}
}
@@ -1139,27 +1136,27 @@
element?.parentElement?.classList.contains('tabbed-pane-close-button') || false;
}
- _tabClicked(ev: Event): void {
+ private tabClicked(ev: Event): void {
const event = (ev as MouseEvent);
const middleButton = event.button === 1;
- const shouldClose = this._closeable && (middleButton || this.isCloseIconClicked(event.target as HTMLElement));
+ const shouldClose = this.closeable && (middleButton || this.isCloseIconClicked(event.target as HTMLElement));
if (!shouldClose) {
- this._tabbedPane.focus();
+ this.tabbedPane.focus();
return;
}
- this._closeTabs([this.id]);
+ this.closeTabs([this.id]);
event.consume(true);
}
- _tabMouseDown(ev: Event): void {
+ private tabMouseDown(ev: Event): void {
const event = ev as MouseEvent;
if (this.isCloseIconClicked(event.target as HTMLElement) || event.button !== 0) {
return;
}
- this._tabbedPane.selectTab(this.id, true);
+ this.tabbedPane.selectTab(this.id, true);
}
- _tabMouseUp(ev: Event): void {
+ private tabMouseUp(ev: Event): void {
const event = (ev as MouseEvent);
// This is needed to prevent middle-click pasting on linux when tabs are clicked.
if (event.button === 1) {
@@ -1167,73 +1164,73 @@
}
}
- _closeTabs(ids: string[]): void {
- if (this._delegate) {
- this._delegate.closeTabs(this._tabbedPane, ids);
+ private closeTabs(ids: string[]): void {
+ if (this.delegate) {
+ this.delegate.closeTabs(this.tabbedPane, ids);
return;
}
- this._tabbedPane.closeTabs(ids, true);
+ this.tabbedPane.closeTabs(ids, true);
}
- _tabContextMenu(event: Event): void {
+ private tabContextMenu(event: Event): void {
function close(this: TabbedPaneTab): void {
- this._closeTabs([this.id]);
+ this.closeTabs([this.id]);
}
function closeOthers(this: TabbedPaneTab): void {
- this._closeTabs(this._tabbedPane.otherTabs(this.id));
+ this.closeTabs(this.tabbedPane.otherTabs(this.id));
}
function closeAll(this: TabbedPaneTab): void {
- this._closeTabs(this._tabbedPane.tabIds());
+ this.closeTabs(this.tabbedPane.tabIds());
}
function closeToTheRight(this: TabbedPaneTab): void {
- this._closeTabs(this._tabbedPane._tabsToTheRight(this.id));
+ this.closeTabs(this.tabbedPane.tabsToTheRight(this.id));
}
const contextMenu = new ContextMenu(event);
- if (this._closeable) {
+ if (this.closeable) {
contextMenu.defaultSection().appendItem(i18nString(UIStrings.close), close.bind(this));
contextMenu.defaultSection().appendItem(i18nString(UIStrings.closeOthers), closeOthers.bind(this));
contextMenu.defaultSection().appendItem(i18nString(UIStrings.closeTabsToTheRight), closeToTheRight.bind(this));
contextMenu.defaultSection().appendItem(i18nString(UIStrings.closeAll), closeAll.bind(this));
}
- if (this._delegate) {
- this._delegate.onContextMenu(this.id, contextMenu);
+ if (this.delegate) {
+ this.delegate.onContextMenu(this.id, contextMenu);
}
contextMenu.show();
}
- _startTabDragging(ev: Event): boolean {
+ private startTabDragging(ev: Event): boolean {
const event = (ev as MouseEvent);
if (this.isCloseIconClicked(event.target as HTMLElement)) {
return false;
}
- this._dragStartX = event.pageX;
- if (this._tabElement) {
- this._tabElement.classList.add('dragging');
+ this.dragStartX = event.pageX;
+ if (this.tabElementInternal) {
+ this.tabElementInternal.classList.add('dragging');
}
- this._tabbedPane._tabSlider.remove();
+ this.tabbedPane.tabSlider.remove();
return true;
}
- _tabDragging(ev: Event): void {
+ private tabDragging(ev: Event): void {
const event = (ev as MouseEvent);
- const tabElements = this._tabbedPane._tabsElement.childNodes;
+ const tabElements = this.tabbedPane.tabsElement.childNodes;
for (let i = 0; i < tabElements.length; ++i) {
let tabElement: HTMLElement = (tabElements[i] as HTMLElement);
- if (!this._tabElement || tabElement === this._tabElement) {
+ if (!this.tabElementInternal || tabElement === this.tabElementInternal) {
continue;
}
- const intersects = tabElement.offsetLeft + tabElement.clientWidth > this._tabElement.offsetLeft &&
- this._tabElement.offsetLeft + this._tabElement.clientWidth > tabElement.offsetLeft;
+ const intersects = tabElement.offsetLeft + tabElement.clientWidth > this.tabElementInternal.offsetLeft &&
+ this.tabElementInternal.offsetLeft + this.tabElementInternal.clientWidth > tabElement.offsetLeft;
if (!intersects) {
continue;
}
- const dragStartX = (this._dragStartX as number);
+ const dragStartX = (this.dragStartX as number);
if (Math.abs(event.pageX - dragStartX) < tabElement.clientWidth / 2 + 5) {
break;
}
@@ -1243,14 +1240,14 @@
++i;
}
- const oldOffsetLeft = this._tabElement.offsetLeft;
- this._tabbedPane._insertBefore(this, i);
- this._dragStartX = dragStartX + this._tabElement.offsetLeft - oldOffsetLeft;
+ const oldOffsetLeft = this.tabElementInternal.offsetLeft;
+ this.tabbedPane.insertBefore(this, i);
+ this.dragStartX = dragStartX + this.tabElementInternal.offsetLeft - oldOffsetLeft;
break;
}
- const dragStartX = (this._dragStartX as number);
- const tabElement = (this._tabElement as HTMLElement);
+ const dragStartX = (this.dragStartX as number);
+ const tabElement = (this.tabElementInternal as HTMLElement);
if (!tabElement.previousSibling && event.pageX - dragStartX < 0) {
tabElement.style.setProperty('left', '0px');
return;
@@ -1263,12 +1260,12 @@
tabElement.style.setProperty('left', (event.pageX - dragStartX) + 'px');
}
- _endTabDragging(_event: Event): void {
- const tabElement = (this._tabElement as HTMLElement);
+ private endTabDragging(_event: Event): void {
+ const tabElement = (this.tabElementInternal as HTMLElement);
tabElement.classList.remove('dragging');
tabElement.style.removeProperty('left');
- delete this._dragStartX;
- this._tabbedPane._updateTabSlider();
+ delete this.dragStartX;
+ this.tabbedPane.updateTabSlider();
}
}
diff --git a/front_end/ui/legacy/TargetCrashedScreen.ts b/front_end/ui/legacy/TargetCrashedScreen.ts
index 233b126..f165730 100644
--- a/front_end/ui/legacy/TargetCrashedScreen.ts
+++ b/front_end/ui/legacy/TargetCrashedScreen.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as i18n from '../../core/i18n/i18n.js';
import {VBox} from './Widget.js';
@@ -21,7 +19,7 @@
const str_ = i18n.i18n.registerUIStrings('ui/legacy/TargetCrashedScreen.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class TargetCrashedScreen extends VBox {
- _hideCallback: () => void;
+ private readonly hideCallback: () => void;
constructor(hideCallback: () => void) {
super(true);
this.registerRequiredCSS('ui/legacy/targetCrashedScreen.css');
@@ -29,10 +27,10 @@
i18nString(UIStrings.devtoolsWasDisconnectedFromThe);
this.contentElement.createChild('div', 'message').textContent =
i18nString(UIStrings.oncePageIsReloadedDevtoolsWill);
- this._hideCallback = hideCallback;
+ this.hideCallback = hideCallback;
}
willHide(): void {
- this._hideCallback.call(null);
+ this.hideCallback.call(null);
}
}
diff --git a/front_end/ui/legacy/TextEditor.ts b/front_end/ui/legacy/TextEditor.ts
index 63d05d4..40a81ee 100644
--- a/front_end/ui/legacy/TextEditor.ts
+++ b/front_end/ui/legacy/TextEditor.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type * as Common from '../../core/common/common.js';
import type * as TextUtils from '../../models/text_utils/text_utils.js';
diff --git a/front_end/ui/legacy/TextPrompt.ts b/front_end/ui/legacy/TextPrompt.ts
index 02055eb..82831fe 100644
--- a/front_end/ui/legacy/TextPrompt.ts
+++ b/front_end/ui/legacy/TextPrompt.ts
@@ -31,8 +31,6 @@
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
import * as Platform from '../../core/platform/platform.js';
@@ -46,63 +44,63 @@
import {appendStyle} from './utils/append-style.js';
export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper implements SuggestBoxDelegate {
- _proxyElement!: HTMLElement|undefined;
- _proxyElementDisplay: string;
- _autocompletionTimeout: number;
- _title: string;
- _queryRange: TextUtils.TextRange.TextRange|null;
- _previousText: string;
- _currentSuggestion: Suggestion|null;
- _completionRequestId: number;
- _ghostTextElement: HTMLSpanElement;
- _leftParenthesesIndices: number[];
- _loadCompletions!: (this: null, arg1: string, arg2: string, arg3?: boolean|undefined) => Promise<Suggestion[]>;
- _completionStopCharacters!: string;
- _usesSuggestionBuilder!: boolean;
- _element?: Element;
- _boundOnKeyDown?: ((ev: Event) => void);
- _boundOnInput?: ((ev: Event) => void);
- _boundOnMouseWheel?: ((event: Event) => void);
- _boundClearAutocomplete?: (() => void);
- _contentElement?: HTMLElement;
- _suggestBox?: SuggestBox;
- _isEditing?: boolean;
- _focusRestorer?: ElementFocusRestorer;
- _blurListener?: ((arg0: Event) => void);
- _oldTabIndex?: number;
- _completeTimeout?: number;
- _disableDefaultSuggestionForEmptyInput?: boolean;
+ private proxyElement!: HTMLElement|undefined;
+ private proxyElementDisplay: string;
+ private autocompletionTimeout: number;
+ private titleInternal: string;
+ private queryRange: TextUtils.TextRange.TextRange|null;
+ private previousText: string;
+ private currentSuggestion: Suggestion|null;
+ private completionRequestId: number;
+ private ghostTextElement: HTMLSpanElement;
+ private leftParenthesesIndices: number[];
+ private loadCompletions!: (this: null, arg1: string, arg2: string, arg3?: boolean|undefined) => Promise<Suggestion[]>;
+ private completionStopCharacters!: string;
+ private usesSuggestionBuilder!: boolean;
+ private elementInternal?: Element;
+ private boundOnKeyDown?: ((ev: Event) => void);
+ private boundOnInput?: ((ev: Event) => void);
+ private boundOnMouseWheel?: ((event: Event) => void);
+ private boundClearAutocomplete?: (() => void);
+ private contentElement?: HTMLElement;
+ private suggestBox?: SuggestBox;
+ private isEditing?: boolean;
+ private focusRestorer?: ElementFocusRestorer;
+ private blurListener?: ((arg0: Event) => void);
+ private oldTabIndex?: number;
+ private completeTimeout?: number;
+ private disableDefaultSuggestionForEmptyInputInternal?: boolean;
constructor() {
super();
- this._proxyElementDisplay = 'inline-block';
- this._autocompletionTimeout = DefaultAutocompletionTimeout;
- this._title = '';
- this._queryRange = null;
- this._previousText = '';
- this._currentSuggestion = null;
- this._completionRequestId = 0;
- this._ghostTextElement = document.createElement('span');
- this._ghostTextElement.classList.add('auto-complete-text');
- this._ghostTextElement.setAttribute('contenteditable', 'false');
- this._leftParenthesesIndices = [];
- ARIAUtils.markAsHidden(this._ghostTextElement);
+ this.proxyElementDisplay = 'inline-block';
+ this.autocompletionTimeout = DefaultAutocompletionTimeout;
+ this.titleInternal = '';
+ this.queryRange = null;
+ this.previousText = '';
+ this.currentSuggestion = null;
+ this.completionRequestId = 0;
+ this.ghostTextElement = document.createElement('span');
+ this.ghostTextElement.classList.add('auto-complete-text');
+ this.ghostTextElement.setAttribute('contenteditable', 'false');
+ this.leftParenthesesIndices = [];
+ ARIAUtils.markAsHidden(this.ghostTextElement);
}
initialize(
completions: (this: null, arg1: string, arg2: string, arg3?: boolean|undefined) => Promise<Suggestion[]>,
stopCharacters?: string, usesSuggestionBuilder?: boolean): void {
- this._loadCompletions = completions;
- this._completionStopCharacters = stopCharacters || ' =:[({;,!+-*/&|^<>.';
- this._usesSuggestionBuilder = usesSuggestionBuilder || false;
+ this.loadCompletions = completions;
+ this.completionStopCharacters = stopCharacters || ' =:[({;,!+-*/&|^<>.';
+ this.usesSuggestionBuilder = usesSuggestionBuilder || false;
}
setAutocompletionTimeout(timeout: number): void {
- this._autocompletionTimeout = timeout;
+ this.autocompletionTimeout = timeout;
}
renderAsBlock(): void {
- this._proxyElementDisplay = 'block';
+ this.proxyElementDisplay = 'block';
}
/**
@@ -110,7 +108,7 @@
* they should use the result of this method to attach listeners for bubbling events.
*/
attach(element: Element): Element {
- return this._attachInternal(element);
+ return this.attachInternal(element);
}
/**
@@ -120,66 +118,66 @@
* (since the "blur" event does not bubble.)
*/
attachAndStartEditing(element: Element, blurListener: (arg0: Event) => void): Element {
- const proxyElement = this._attachInternal(element);
- this._startEditing(blurListener);
+ const proxyElement = this.attachInternal(element);
+ this.startEditing(blurListener);
return proxyElement;
}
- _attachInternal(element: Element): Element {
- if (this._proxyElement) {
+ private attachInternal(element: Element): Element {
+ if (this.proxyElement) {
throw 'Cannot attach an attached TextPrompt';
}
- this._element = element;
+ this.elementInternal = element;
- this._boundOnKeyDown = this.onKeyDown.bind(this);
- this._boundOnInput = this.onInput.bind(this);
- this._boundOnMouseWheel = this.onMouseWheel.bind(this);
- this._boundClearAutocomplete = this.clearAutocomplete.bind(this);
- this._proxyElement = element.ownerDocument.createElement('span');
- appendStyle(this._proxyElement, 'ui/legacy/textPrompt.css');
- this._contentElement = this._proxyElement.createChild('div', 'text-prompt-root');
- this._proxyElement.style.display = this._proxyElementDisplay;
+ this.boundOnKeyDown = this.onKeyDown.bind(this);
+ this.boundOnInput = this.onInput.bind(this);
+ this.boundOnMouseWheel = this.onMouseWheel.bind(this);
+ this.boundClearAutocomplete = this.clearAutocomplete.bind(this);
+ this.proxyElement = element.ownerDocument.createElement('span');
+ appendStyle(this.proxyElement, 'ui/legacy/textPrompt.css');
+ this.contentElement = this.proxyElement.createChild('div', 'text-prompt-root');
+ this.proxyElement.style.display = this.proxyElementDisplay;
if (element.parentElement) {
- element.parentElement.insertBefore(this._proxyElement, element);
+ element.parentElement.insertBefore(this.proxyElement, element);
}
- this._contentElement.appendChild(element);
- this._element.classList.add('text-prompt');
- ARIAUtils.markAsTextBox(this._element);
- ARIAUtils.setAutocomplete(this._element, ARIAUtils.AutocompleteInteractionModel.both);
- ARIAUtils.setHasPopup(this._element, ARIAUtils.PopupRole.ListBox);
- this._element.setAttribute('contenteditable', 'plaintext-only');
- this.element().addEventListener('keydown', this._boundOnKeyDown, false);
- this._element.addEventListener('input', this._boundOnInput, false);
- this._element.addEventListener('wheel', this._boundOnMouseWheel, false);
- this._element.addEventListener('selectstart', this._boundClearAutocomplete, false);
- this._element.addEventListener('blur', this._boundClearAutocomplete, false);
+ this.contentElement.appendChild(element);
+ this.elementInternal.classList.add('text-prompt');
+ ARIAUtils.markAsTextBox(this.elementInternal);
+ ARIAUtils.setAutocomplete(this.elementInternal, ARIAUtils.AutocompleteInteractionModel.both);
+ ARIAUtils.setHasPopup(this.elementInternal, ARIAUtils.PopupRole.ListBox);
+ this.elementInternal.setAttribute('contenteditable', 'plaintext-only');
+ this.element().addEventListener('keydown', this.boundOnKeyDown, false);
+ this.elementInternal.addEventListener('input', this.boundOnInput, false);
+ this.elementInternal.addEventListener('wheel', this.boundOnMouseWheel, false);
+ this.elementInternal.addEventListener('selectstart', this.boundClearAutocomplete, false);
+ this.elementInternal.addEventListener('blur', this.boundClearAutocomplete, false);
- this._suggestBox = new SuggestBox(this, 20);
+ this.suggestBox = new SuggestBox(this, 20);
- if (this._title) {
- Tooltip.install(this._proxyElement, this._title);
+ if (this.titleInternal) {
+ Tooltip.install(this.proxyElement, this.titleInternal);
}
- return this._proxyElement;
+ return this.proxyElement;
}
element(): HTMLElement {
- if (!this._element) {
+ if (!this.elementInternal) {
throw new Error('Expected an already attached element!');
}
- return /** @type {!HTMLElement} */ this._element as HTMLElement;
+ return /** @type {!HTMLElement} */ this.elementInternal as HTMLElement;
}
detach(): void {
- this._removeFromElement();
- if (this._focusRestorer) {
- this._focusRestorer.restore();
+ this.removeFromElement();
+ if (this.focusRestorer) {
+ this.focusRestorer.restore();
}
- if (this._proxyElement && this._proxyElement.parentElement) {
- this._proxyElement.parentElement.insertBefore(this.element(), this._proxyElement);
- this._proxyElement.remove();
+ if (this.proxyElement && this.proxyElement.parentElement) {
+ this.proxyElement.parentElement.insertBefore(this.element(), this.proxyElement);
+ this.proxyElement.remove();
}
- delete this._proxyElement;
+ delete this.proxyElement;
this.element().classList.remove('text-prompt');
this.element().removeAttribute('contenteditable');
this.element().removeAttribute('role');
@@ -189,17 +187,17 @@
textWithCurrentSuggestion(): string {
const text = this.text();
- if (!this._queryRange || !this._currentSuggestion) {
+ if (!this.queryRange || !this.currentSuggestion) {
return text;
}
- const suggestion = this._currentSuggestion.text;
- return text.substring(0, this._queryRange.startColumn) + suggestion + text.substring(this._queryRange.endColumn);
+ const suggestion = this.currentSuggestion.text;
+ return text.substring(0, this.queryRange.startColumn) + suggestion + text.substring(this.queryRange.endColumn);
}
text(): string {
let text: string = this.element().textContent || '';
- if (this._ghostTextElement.parentNode) {
- const addition = this._ghostTextElement.textContent || '';
+ if (this.ghostTextElement.parentNode) {
+ const addition = this.ghostTextElement.textContent || '';
text = text.substring(0, text.length - addition.length);
}
return text;
@@ -208,7 +206,7 @@
setText(text: string): void {
this.clearAutocomplete();
this.element().textContent = text;
- this._previousText = this.text();
+ this.previousText = this.text();
if (this.element().hasFocus()) {
this.moveCaretToEndOfPrompt();
this.element().scrollIntoView();
@@ -244,13 +242,13 @@
}
title(): string {
- return this._title;
+ return this.titleInternal;
}
setTitle(title: string): void {
- this._title = title;
- if (this._proxyElement) {
- Tooltip.install(this._proxyElement, title);
+ this.titleInternal = title;
+ if (this.proxyElement) {
+ Tooltip.install(this.proxyElement, title);
}
}
@@ -275,35 +273,34 @@
this.element().classList.toggle('disabled', !enabled);
}
- _removeFromElement(): void {
+ private removeFromElement(): void {
this.clearAutocomplete();
this.element().removeEventListener(
- 'keydown', (this._boundOnKeyDown as (this: HTMLElement, arg1: Event) => void), false);
+ 'keydown', (this.boundOnKeyDown as (this: HTMLElement, arg1: Event) => void), false);
+ this.element().removeEventListener('input', (this.boundOnInput as (this: HTMLElement, arg1: Event) => void), false);
this.element().removeEventListener(
- 'input', (this._boundOnInput as (this: HTMLElement, arg1: Event) => void), false);
+ 'selectstart', (this.boundClearAutocomplete as (this: HTMLElement, arg1: Event) => void), false);
this.element().removeEventListener(
- 'selectstart', (this._boundClearAutocomplete as (this: HTMLElement, arg1: Event) => void), false);
- this.element().removeEventListener(
- 'blur', (this._boundClearAutocomplete as (this: HTMLElement, arg1: Event) => void), false);
- if (this._isEditing) {
- this._stopEditing();
+ 'blur', (this.boundClearAutocomplete as (this: HTMLElement, arg1: Event) => void), false);
+ if (this.isEditing) {
+ this.stopEditing();
}
- if (this._suggestBox) {
- this._suggestBox.hide();
+ if (this.suggestBox) {
+ this.suggestBox.hide();
}
}
- _startEditing(blurListener?: ((arg0: Event) => void)): void {
- this._isEditing = true;
- if (this._contentElement) {
- this._contentElement.classList.add('text-prompt-editing');
+ private startEditing(blurListener?: ((arg0: Event) => void)): void {
+ this.isEditing = true;
+ if (this.contentElement) {
+ this.contentElement.classList.add('text-prompt-editing');
}
- this._focusRestorer = new ElementFocusRestorer(this.element());
+ this.focusRestorer = new ElementFocusRestorer(this.element());
if (blurListener) {
- this._blurListener = blurListener;
- this.element().addEventListener('blur', this._blurListener, false);
+ this.blurListener = blurListener;
+ this.element().addEventListener('blur', this.blurListener, false);
}
- this._oldTabIndex = this.element().tabIndex;
+ this.oldTabIndex = this.element().tabIndex;
if (this.element().tabIndex < 0) {
this.element().tabIndex = 0;
}
@@ -312,15 +309,15 @@
}
}
- _stopEditing(): void {
- this.element().tabIndex = (this._oldTabIndex as number);
- if (this._blurListener) {
- this.element().removeEventListener('blur', this._blurListener, false);
+ private stopEditing(): void {
+ this.element().tabIndex = (this.oldTabIndex as number);
+ if (this.blurListener) {
+ this.element().removeEventListener('blur', this.blurListener, false);
}
- if (this._contentElement) {
- this._contentElement.classList.remove('text-prompt-editing');
+ if (this.contentElement) {
+ this.contentElement.classList.remove('text-prompt-editing');
}
- delete this._isEditing;
+ delete this.isEditing;
}
onMouseWheel(_event: Event): void {
@@ -330,7 +327,7 @@
onKeyDown(ev: Event): void {
let handled = false;
const event = (ev as KeyboardEvent);
- if (this.isSuggestBoxVisible() && this._suggestBox && this._suggestBox.keyPressed(event)) {
+ if (this.isSuggestBoxVisible() && this.suggestBox && this.suggestBox.keyPressed(event)) {
event.consume(true);
return;
}
@@ -349,7 +346,7 @@
case 'ArrowRight':
case 'ArrowDown':
case 'End':
- if (this._isCaretAtEndOfPrompt()) {
+ if (this.isCaretAtEndOfPrompt()) {
handled = this.acceptAutoComplete();
} else {
this.clearAutocomplete();
@@ -378,15 +375,15 @@
}
}
- _acceptSuggestionOnStopCharacters(key: string): boolean {
- if (!this._currentSuggestion || !this._queryRange || key.length !== 1 || !this._completionStopCharacters ||
- !this._completionStopCharacters.includes(key)) {
+ private acceptSuggestionOnStopCharacters(key: string): boolean {
+ if (!this.currentSuggestion || !this.queryRange || key.length !== 1 || !this.completionStopCharacters ||
+ !this.completionStopCharacters.includes(key)) {
return false;
}
- const query = this.text().substring(this._queryRange.startColumn, this._queryRange.endColumn);
- if (query && this._currentSuggestion.text.startsWith(query + key)) {
- this._queryRange.endColumn += 1;
+ const query = this.text().substring(this.queryRange.startColumn, this.queryRange.endColumn);
+ if (query && this.currentSuggestion.text.startsWith(query + key)) {
+ this.queryRange.endColumn += 1;
return this.acceptAutoComplete();
}
return false;
@@ -409,24 +406,24 @@
}
// Skip the current ')' entry if the caret is right before a ')' and there's an unmatched '('.
- const caretPosition = this._getCaretPosition();
- if (currentEntry === ')' && caretPosition >= 0 && this._leftParenthesesIndices.length > 0) {
+ const caretPosition = this.getCaretPosition();
+ if (currentEntry === ')' && caretPosition >= 0 && this.leftParenthesesIndices.length > 0) {
const nextCharAtCaret = text[caretPosition];
- if (nextCharAtCaret === ')' && this._tryMatchingLeftParenthesis(caretPosition)) {
+ if (nextCharAtCaret === ')' && this.tryMatchingLeftParenthesis(caretPosition)) {
text = text.substring(0, caretPosition) + text.substring(caretPosition + 1);
this.setText(text);
return;
}
}
- if (currentEntry && !this._acceptSuggestionOnStopCharacters(currentEntry)) {
- const hasCommonPrefix = text.startsWith(this._previousText) || this._previousText.startsWith(text);
- if (this._queryRange && hasCommonPrefix) {
- this._queryRange.endColumn += text.length - this._previousText.length;
+ if (currentEntry && !this.acceptSuggestionOnStopCharacters(currentEntry)) {
+ const hasCommonPrefix = text.startsWith(this.previousText) || this.previousText.startsWith(text);
+ if (this.queryRange && hasCommonPrefix) {
+ this.queryRange.endColumn += text.length - this.previousText.length;
}
}
- this._refreshGhostText();
- this._previousText = text;
+ this.refreshGhostText();
+ this.previousText = text;
this.dispatchEventToListeners(Events.TextChanged);
this.autoCompleteSoon();
@@ -434,13 +431,13 @@
acceptAutoComplete(): boolean {
let result = false;
- if (this.isSuggestBoxVisible() && this._suggestBox) {
- result = this._suggestBox.acceptSuggestion();
+ if (this.isSuggestBoxVisible() && this.suggestBox) {
+ result = this.suggestBox.acceptSuggestion();
}
if (!result) {
- result = this._acceptSuggestionInternal();
+ result = this.acceptSuggestionInternal();
}
- if (this._usesSuggestionBuilder && result) {
+ if (this.usesSuggestionBuilder && result) {
// Trigger autocompletions for text prompts using suggestion builders
this.autoCompleteSoon();
}
@@ -450,51 +447,50 @@
clearAutocomplete(): void {
const beforeText = this.textWithCurrentSuggestion();
- if (this.isSuggestBoxVisible() && this._suggestBox) {
- this._suggestBox.hide();
+ if (this.isSuggestBoxVisible() && this.suggestBox) {
+ this.suggestBox.hide();
}
- this._clearAutocompleteTimeout();
- this._queryRange = null;
- this._refreshGhostText();
+ this.clearAutocompleteTimeout();
+ this.queryRange = null;
+ this.refreshGhostText();
if (beforeText !== this.textWithCurrentSuggestion()) {
this.dispatchEventToListeners(Events.TextChanged);
}
}
- _refreshGhostText(): void {
- if (this._currentSuggestion && this._currentSuggestion.hideGhostText) {
- this._ghostTextElement.remove();
+ private refreshGhostText(): void {
+ if (this.currentSuggestion && this.currentSuggestion.hideGhostText) {
+ this.ghostTextElement.remove();
return;
}
- if (this._queryRange && this._currentSuggestion && this._isCaretAtEndOfPrompt() &&
- this._currentSuggestion.text.startsWith(this.text().substring(this._queryRange.startColumn))) {
- this._ghostTextElement.textContent =
- this._currentSuggestion.text.substring(this._queryRange.endColumn - this._queryRange.startColumn);
- this.element().appendChild(this._ghostTextElement);
+ if (this.queryRange && this.currentSuggestion && this.isCaretAtEndOfPrompt() &&
+ this.currentSuggestion.text.startsWith(this.text().substring(this.queryRange.startColumn))) {
+ this.ghostTextElement.textContent =
+ this.currentSuggestion.text.substring(this.queryRange.endColumn - this.queryRange.startColumn);
+ this.element().appendChild(this.ghostTextElement);
} else {
- this._ghostTextElement.remove();
+ this.ghostTextElement.remove();
}
}
- _clearAutocompleteTimeout(): void {
- if (this._completeTimeout) {
- clearTimeout(this._completeTimeout);
- delete this._completeTimeout;
+ private clearAutocompleteTimeout(): void {
+ if (this.completeTimeout) {
+ clearTimeout(this.completeTimeout);
+ delete this.completeTimeout;
}
- this._completionRequestId++;
+ this.completionRequestId++;
}
autoCompleteSoon(force?: boolean): void {
const immediately = this.isSuggestBoxVisible() || force;
- if (!this._completeTimeout) {
- this._completeTimeout =
- setTimeout(this.complete.bind(this, force), immediately ? 0 : this._autocompletionTimeout);
+ if (!this.completeTimeout) {
+ this.completeTimeout = setTimeout(this.complete.bind(this, force), immediately ? 0 : this.autocompletionTimeout);
}
}
async complete(force?: boolean): Promise<void> {
- this._clearAutocompleteTimeout();
+ this.clearAutocompleteTimeout();
const selection = this.element().getComponentSelection();
if (!selection || selection.rangeCount === 0) {
return;
@@ -503,7 +499,7 @@
let shouldExit;
- if (!force && !this._isCaretAtEndOfPrompt() && !this.isSuggestBoxVisible()) {
+ if (!force && !this.isCaretAtEndOfPrompt() && !this.isSuggestBoxVisible()) {
shouldExit = true;
} else if (!selection.isCollapsed) {
shouldExit = true;
@@ -515,23 +511,23 @@
}
const wordQueryRange = DOMExtension.DOMExtension.rangeOfWord(
- selectionRange.startContainer, selectionRange.startOffset, this._completionStopCharacters, this.element(),
+ selectionRange.startContainer, selectionRange.startOffset, this.completionStopCharacters, this.element(),
'backward');
const expressionRange = wordQueryRange.cloneRange();
expressionRange.collapse(true);
expressionRange.setStartBefore(this.element());
- const completionRequestId = ++this._completionRequestId;
+ const completionRequestId = ++this.completionRequestId;
const completions =
- await this._loadCompletions.call(null, expressionRange.toString(), wordQueryRange.toString(), Boolean(force));
- this._completionsReady(completionRequestId, (selection as Selection), wordQueryRange, Boolean(force), completions);
+ await this.loadCompletions.call(null, expressionRange.toString(), wordQueryRange.toString(), Boolean(force));
+ this.completionsReady(completionRequestId, (selection as Selection), wordQueryRange, Boolean(force), completions);
}
disableDefaultSuggestionForEmptyInput(): void {
- this._disableDefaultSuggestionForEmptyInput = true;
+ this.disableDefaultSuggestionForEmptyInputInternal = true;
}
- _boxForAnchorAtStart(selection: Selection, textRange: Range): AnchorBox {
+ private boxForAnchorAtStart(selection: Selection, textRange: Range): AnchorBox {
const rangeCopy = selection.getRangeAt(0).cloneRange();
const anchorElement = document.createElement('span');
anchorElement.textContent = '\u200B';
@@ -547,10 +543,10 @@
return [];
}
- _completionsReady(
+ private completionsReady(
completionRequestId: number, selection: Selection, originalWordQueryRange: Range, force: boolean,
completions: Suggestion[]): void {
- if (this._completionRequestId !== completionRequestId) {
+ if (this.completionRequestId !== completionRequestId) {
return;
}
@@ -586,41 +582,41 @@
const beforeRange = document.createRange();
beforeRange.setStart(this.element(), 0);
beforeRange.setEnd(fullWordRange.startContainer, fullWordRange.startOffset);
- this._queryRange = new TextUtils.TextRange.TextRange(
+ this.queryRange = new TextUtils.TextRange.TextRange(
0, beforeRange.toString().length, 0, beforeRange.toString().length + fullWordRange.toString().length);
- const shouldSelect = !this._disableDefaultSuggestionForEmptyInput || Boolean(this.text());
- if (this._suggestBox) {
- this._suggestBox.updateSuggestions(
- this._boxForAnchorAtStart(selection, fullWordRange), completions, shouldSelect, !this._isCaretAtEndOfPrompt(),
+ const shouldSelect = !this.disableDefaultSuggestionForEmptyInputInternal || Boolean(this.text());
+ if (this.suggestBox) {
+ this.suggestBox.updateSuggestions(
+ this.boxForAnchorAtStart(selection, fullWordRange), completions, shouldSelect, !this.isCaretAtEndOfPrompt(),
this.text());
}
}
applySuggestion(suggestion: Suggestion|null, isIntermediateSuggestion?: boolean): void {
- this._currentSuggestion = suggestion;
- this._refreshGhostText();
+ this.currentSuggestion = suggestion;
+ this.refreshGhostText();
if (isIntermediateSuggestion) {
this.dispatchEventToListeners(Events.TextChanged);
}
}
acceptSuggestion(): void {
- this._acceptSuggestionInternal();
+ this.acceptSuggestionInternal();
}
- _acceptSuggestionInternal(): boolean {
- if (!this._queryRange) {
+ private acceptSuggestionInternal(): boolean {
+ if (!this.queryRange) {
return false;
}
- const suggestionLength = this._currentSuggestion ? this._currentSuggestion.text.length : 0;
- const selectionRange = this._currentSuggestion ? this._currentSuggestion.selectionRange : null;
+ const suggestionLength = this.currentSuggestion ? this.currentSuggestion.text.length : 0;
+ const selectionRange = this.currentSuggestion ? this.currentSuggestion.selectionRange : null;
const endColumn = selectionRange ? selectionRange.endColumn : suggestionLength;
const startColumn = selectionRange ? selectionRange.startColumn : suggestionLength;
this.element().textContent = this.textWithCurrentSuggestion();
- this.setDOMSelection(this._queryRange.startColumn + startColumn, this._queryRange.startColumn + endColumn);
- this._updateLeftParenthesesIndices();
+ this.setDOMSelection(this.queryRange.startColumn + startColumn, this.queryRange.startColumn + endColumn);
+ this.updateLeftParenthesesIndices();
this.clearAutocomplete();
this.dispatchEventToListeners(Events.TextChanged);
@@ -635,7 +631,7 @@
setDOMSelection(startColumn: number, endColumn: number): void {
this.element().normalize();
const node = this.element().childNodes[0];
- if (!node || node === this._ghostTextElement) {
+ if (!node || node === this.ghostTextElement) {
return;
}
const range = document.createRange();
@@ -649,7 +645,7 @@
}
isSuggestBoxVisible(): boolean {
- return this._suggestBox !== undefined && this._suggestBox.visible();
+ return this.suggestBox !== undefined && this.suggestBox.visible();
}
isCaretInsidePrompt(): boolean {
@@ -662,7 +658,7 @@
return selectionRange.startContainer.isSelfOrDescendant(this.element());
}
- _isCaretAtEndOfPrompt(): boolean {
+ private isCaretAtEndOfPrompt(): boolean {
const selection = this.element().getComponentSelection();
if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) {
return false;
@@ -674,7 +670,7 @@
return false;
}
- if (this._ghostTextElement.isAncestor(node)) {
+ if (this.ghostTextElement.isAncestor(node)) {
return true;
}
@@ -685,13 +681,13 @@
let foundNextText = false;
while (node) {
if (node.nodeType === Node.TEXT_NODE && node.nodeValue && node.nodeValue.length) {
- if (foundNextText && !this._ghostTextElement.isAncestor(node)) {
+ if (foundNextText && !this.ghostTextElement.isAncestor(node)) {
return false;
}
foundNextText = true;
}
- node = node.traverseNextNode(this._element);
+ node = node.traverseNextNode(this.elementInternal);
}
return true;
@@ -721,7 +717,7 @@
/** -1 if no caret can be found in text prompt
*/
- _getCaretPosition(): number {
+ private getCaretPosition(): number {
if (!this.element().hasFocus()) {
return -1;
}
@@ -742,7 +738,7 @@
}
proxyElementForTests(): Element|null {
- return this._proxyElement || null;
+ return this.proxyElement || null;
}
/**
@@ -750,8 +746,8 @@
* parenthesis, and closes the matched left parenthesis if found.
* Return the result of the matching.
*/
- _tryMatchingLeftParenthesis(rightParenthesisIndex: number): boolean {
- const leftParenthesesIndices = this._leftParenthesesIndices;
+ private tryMatchingLeftParenthesis(rightParenthesisIndex: number): boolean {
+ const leftParenthesesIndices = this.leftParenthesesIndices;
if (leftParenthesesIndices.length === 0 || rightParenthesisIndex < 0) {
return false;
}
@@ -766,9 +762,9 @@
return false;
}
- _updateLeftParenthesesIndices(): void {
+ private updateLeftParenthesesIndices(): void {
const text = this.text();
- const leftParenthesesIndices: number[] = this._leftParenthesesIndices = [];
+ const leftParenthesesIndices: number[] = this.leftParenthesesIndices = [];
for (let i = 0; i < text.length; ++i) {
if (text[i] === '(') {
leftParenthesesIndices.push(i);
diff --git a/front_end/ui/legacy/ThrottledWidget.ts b/front_end/ui/legacy/ThrottledWidget.ts
index db2feaf..08c38e3 100644
--- a/front_end/ui/legacy/ThrottledWidget.ts
+++ b/front_end/ui/legacy/ThrottledWidget.ts
@@ -2,19 +2,17 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import {VBox} from './Widget.js';
export class ThrottledWidget extends VBox {
- _updateThrottler: Common.Throttler.Throttler;
- _updateWhenVisible: boolean;
+ private readonly updateThrottler: Common.Throttler.Throttler;
+ private updateWhenVisible: boolean;
constructor(isWebComponent?: boolean, timeout?: number) {
super(isWebComponent);
- this._updateThrottler = new Common.Throttler.Throttler(timeout === undefined ? 100 : timeout);
- this._updateWhenVisible = false;
+ this.updateThrottler = new Common.Throttler.Throttler(timeout === undefined ? 100 : timeout);
+ this.updateWhenVisible = false;
}
protected doUpdate(): Promise<void> {
@@ -22,22 +20,22 @@
}
update(): void {
- this._updateWhenVisible = !this.isShowing();
- if (this._updateWhenVisible) {
+ this.updateWhenVisible = !this.isShowing();
+ if (this.updateWhenVisible) {
return;
}
- this._updateThrottler.schedule(() => {
+ this.updateThrottler.schedule(() => {
if (this.isShowing()) {
return this.doUpdate();
}
- this._updateWhenVisible = true;
+ this.updateWhenVisible = true;
return Promise.resolve();
});
}
wasShown(): void {
super.wasShown();
- if (this._updateWhenVisible) {
+ if (this.updateWhenVisible) {
this.update();
}
}
diff --git a/front_end/ui/legacy/Toolbar.ts b/front_end/ui/legacy/Toolbar.ts
index 928861a..cca491a 100644
--- a/front_end/ui/legacy/Toolbar.ts
+++ b/front_end/ui/legacy/Toolbar.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
@@ -63,24 +61,24 @@
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class Toolbar {
- _items: ToolbarItem[];
+ private items: ToolbarItem[];
element: HTMLElement;
- _enabled: boolean;
- _shadowRoot: ShadowRoot;
- _contentElement: Element;
- _insertionPoint: Element;
+ enabled: boolean;
+ private readonly shadowRoot: ShadowRoot;
+ private contentElement: Element;
+ private insertionPoint: Element;
private compactLayout = false;
constructor(className: string, parentElement?: Element) {
- this._items = [];
+ this.items = [];
this.element = (parentElement ? parentElement.createChild('div') : document.createElement('div')) as HTMLElement;
this.element.className = className;
this.element.classList.add('toolbar');
- this._enabled = true;
- this._shadowRoot =
+ this.enabled = true;
+ this.shadowRoot =
createShadowRootWithCoreStyles(this.element, {cssFile: 'ui/legacy/toolbar.css', delegatesFocus: undefined});
- this._contentElement = this._shadowRoot.createChild('div', 'toolbar-shadow');
- this._insertionPoint = this._contentElement.createChild('slot');
+ this.contentElement = this.shadowRoot.createChild('div', 'toolbar-shadow');
+ this.insertionPoint = this.contentElement.createChild('slot');
}
hasCompactLayout(): boolean {
@@ -92,7 +90,7 @@
return;
}
this.compactLayout = enable;
- for (const item of this._items) {
+ for (const item of this.items) {
item.setCompactLayout(enable);
}
}
@@ -144,7 +142,7 @@
optionsGlassPane.setPointerEventsBehavior(PointerEventsBehavior.BlockedByGlassPane);
optionsGlassPane.show(document);
const optionsBar = new Toolbar('fill', optionsGlassPane.contentElement);
- optionsBar._contentElement.classList.add('floating');
+ optionsBar.contentElement.classList.add('floating');
const buttonHeight = 26;
const hostButtonPosition = button.element.boxInWindow().relativeToElement(GlassPane.container(document));
@@ -201,7 +199,7 @@
for (let i = 0; i < buttons.length; ++i) {
if (buttons[i].element.classList.contains('emulate-active')) {
buttons[i].element.classList.remove('emulate-active');
- buttons[i]._clicked(e);
+ buttons[i].clicked(e);
break;
}
}
@@ -273,52 +271,52 @@
}
gripElementForResize(): Element {
- return this._contentElement;
+ return this.contentElement;
}
makeWrappable(growVertically?: boolean): void {
- this._contentElement.classList.add('wrappable');
+ this.contentElement.classList.add('wrappable');
if (growVertically) {
- this._contentElement.classList.add('toolbar-grow-vertical');
+ this.contentElement.classList.add('toolbar-grow-vertical');
}
}
makeVertical(): void {
- this._contentElement.classList.add('vertical');
+ this.contentElement.classList.add('vertical');
}
makeBlueOnHover(): void {
- this._contentElement.classList.add('toolbar-blue-on-hover');
+ this.contentElement.classList.add('toolbar-blue-on-hover');
}
makeToggledGray(): void {
- this._contentElement.classList.add('toolbar-toggled-gray');
+ this.contentElement.classList.add('toolbar-toggled-gray');
}
renderAsLinks(): void {
- this._contentElement.classList.add('toolbar-render-as-links');
+ this.contentElement.classList.add('toolbar-render-as-links');
}
empty(): boolean {
- return !this._items.length;
+ return !this.items.length;
}
setEnabled(enabled: boolean): void {
- this._enabled = enabled;
- for (const item of this._items) {
- item._applyEnabledState(this._enabled && item._enabled);
+ this.enabled = enabled;
+ for (const item of this.items) {
+ item.applyEnabledState(this.enabled && item.enabled);
}
}
appendToolbarItem(item: ToolbarItem): void {
- this._items.push(item);
+ this.items.push(item);
item.toolbar = this;
item.setCompactLayout(this.hasCompactLayout());
- if (!this._enabled) {
- item._applyEnabledState(false);
+ if (!this.enabled) {
+ item.applyEnabledState(false);
}
- this._contentElement.insertBefore(item.element, this._insertionPoint);
- this._hideSeparatorDupes();
+ this.contentElement.insertBefore(item.element, this.insertionPoint);
+ this.hideSeparatorDupes();
}
appendSeparator(): void {
@@ -334,49 +332,49 @@
}
removeToolbarItems(): void {
- for (const item of this._items) {
+ for (const item of this.items) {
item.toolbar = null;
}
- this._items = [];
- this._contentElement.removeChildren();
- this._insertionPoint = this._contentElement.createChild('slot');
+ this.items = [];
+ this.contentElement.removeChildren();
+ this.insertionPoint = this.contentElement.createChild('slot');
}
setColor(color: string): void {
const style = document.createElement('style');
style.textContent = '.toolbar-glyph { background-color: ' + color + ' !important }';
- this._shadowRoot.appendChild(style);
+ this.shadowRoot.appendChild(style);
}
setToggledColor(color: string): void {
const style = document.createElement('style');
style.textContent =
'.toolbar-button.toolbar-state-on .toolbar-glyph { background-color: ' + color + ' !important }';
- this._shadowRoot.appendChild(style);
+ this.shadowRoot.appendChild(style);
}
- _hideSeparatorDupes(): void {
- if (!this._items.length) {
+ hideSeparatorDupes(): void {
+ if (!this.items.length) {
return;
}
// Don't hide first and last separators if they were added explicitly.
let previousIsSeparator = false;
let lastSeparator;
let nonSeparatorVisible = false;
- for (let i = 0; i < this._items.length; ++i) {
- if (this._items[i] instanceof ToolbarSeparator) {
- this._items[i].setVisible(!previousIsSeparator);
+ for (let i = 0; i < this.items.length; ++i) {
+ if (this.items[i] instanceof ToolbarSeparator) {
+ this.items[i].setVisible(!previousIsSeparator);
previousIsSeparator = true;
- lastSeparator = this._items[i];
+ lastSeparator = this.items[i];
continue;
}
- if (this._items[i].visible()) {
+ if (this.items[i].visible()) {
previousIsSeparator = false;
lastSeparator = null;
nonSeparatorVisible = true;
}
}
- if (lastSeparator && lastSeparator !== this._items[this._items.length - 1]) {
+ if (lastSeparator && lastSeparator !== this.items[this.items.length - 1]) {
lastSeparator.setVisible(false);
}
@@ -431,17 +429,17 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export class ToolbarItem<T = any> extends Common.ObjectWrapper.ObjectWrapper<T> {
element: HTMLElement;
- _visible: boolean;
- _enabled: boolean;
+ private visibleInternal: boolean;
+ enabled: boolean;
toolbar: Toolbar|null;
- _title?: string;
+ protected title?: string;
constructor(element: Element) {
super();
this.element = (element as HTMLElement);
this.element.classList.add('toolbar-item');
- this._visible = true;
- this._enabled = true;
+ this.visibleInternal = true;
+ this.enabled = true;
/**
* Set by the parent toolbar during appending.
@@ -450,10 +448,10 @@
}
setTitle(title: string, actionId: string|undefined = undefined): void {
- if (this._title === title) {
+ if (this.title === title) {
return;
}
- this._title = title;
+ this.title = title;
ARIAUtils.setAccessibleName(this.element, title);
if (actionId === undefined) {
Tooltip.install(this.element, title);
@@ -463,31 +461,31 @@
}
setEnabled(value: boolean): void {
- if (this._enabled === value) {
+ if (this.enabled === value) {
return;
}
- this._enabled = value;
- this._applyEnabledState(this._enabled && (!this.toolbar || this.toolbar._enabled));
+ this.enabled = value;
+ this.applyEnabledState(this.enabled && (!this.toolbar || this.toolbar.enabled));
}
- _applyEnabledState(enabled: boolean): void {
+ applyEnabledState(enabled: boolean): void {
// @ts-ignore: Ignoring in favor of an `instanceof` check for all the different
// kind of HTMLElement classes that have a disabled attribute.
this.element.disabled = !enabled;
}
visible(): boolean {
- return this._visible;
+ return this.visibleInternal;
}
setVisible(x: boolean): void {
- if (this._visible === x) {
+ if (this.visibleInternal === x) {
return;
}
this.element.classList.toggle('hidden', !x);
- this._visible = x;
+ this.visibleInternal = x;
if (this.toolbar && !(this instanceof ToolbarSeparator)) {
- this.toolbar._hideSeparatorDupes();
+ this.toolbar.hideSeparatorDupes();
}
}
@@ -536,11 +534,10 @@
}
export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes> {
- _glyphElement: Icon;
- _textElement: HTMLElement;
- _title: string;
- _text?: string;
- _glyph?: string;
+ private readonly glyphElement: Icon;
+ private textElement: HTMLElement;
+ private text?: string;
+ private glyph?: string;
/**
* TODO(crbug.com/1126026): remove glyph parameter in favor of icon.
*/
@@ -548,12 +545,12 @@
const element = document.createElement('button');
element.classList.add('toolbar-button');
super(element);
- this.element.addEventListener('click', this._clicked.bind(this), false);
- this.element.addEventListener('mousedown', this._mouseDown.bind(this), false);
+ this.element.addEventListener('click', this.clicked.bind(this), false);
+ this.element.addEventListener('mousedown', this.mouseDown.bind(this), false);
- this._glyphElement = Icon.create('', 'toolbar-glyph hidden');
- this.element.appendChild(this._glyphElement);
- this._textElement = this.element.createChild('div', 'toolbar-text hidden');
+ this.glyphElement = Icon.create('', 'toolbar-glyph hidden');
+ this.element.appendChild(this.glyphElement);
+ this.textElement = this.element.createChild('div', 'toolbar-text hidden');
this.setTitle(title);
if (glyphOrIcon instanceof HTMLElement) {
@@ -563,7 +560,7 @@
this.setGlyph(glyphOrIcon);
}
this.setText(text || '');
- this._title = '';
+ this.title = '';
}
focus(): void {
@@ -571,22 +568,22 @@
}
setText(text: string): void {
- if (this._text === text) {
+ if (this.text === text) {
return;
}
- this._textElement.textContent = text;
- this._textElement.classList.toggle('hidden', !text);
- this._text = text;
+ this.textElement.textContent = text;
+ this.textElement.classList.toggle('hidden', !text);
+ this.text = text;
}
setGlyph(glyph: string): void {
- if (this._glyph === glyph) {
+ if (this.glyph === glyph) {
return;
}
- this._glyphElement.setIconType(glyph);
- this._glyphElement.classList.toggle('hidden', !glyph);
+ this.glyphElement.setIconType(glyph);
+ this.glyphElement.classList.toggle('hidden', !glyph);
this.element.classList.toggle('toolbar-has-glyph', Boolean(glyph));
- this._glyph = glyph;
+ this.glyph = glyph;
}
setBackgroundImage(iconURL: string): void {
@@ -610,16 +607,16 @@
this.element.appendChild(dropdownArrowIcon);
}
- _clicked(event: Event): void {
- if (!this._enabled) {
+ clicked(event: Event): void {
+ if (!this.enabled) {
return;
}
this.dispatchEventToListeners(ToolbarButton.Events.Click, event);
event.consume();
}
- _mouseDown(event: MouseEvent): void {
- if (!this._enabled) {
+ protected mouseDown(event: MouseEvent): void {
+ if (!this.enabled) {
return;
}
this.dispatchEventToListeners(ToolbarButton.Events.MouseDown, event);
@@ -641,8 +638,8 @@
}
export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
- _prompt: TextPrompt;
- _proxyElement: Element;
+ private prompt: TextPrompt;
+ private readonly proxyElement: Element;
constructor(
placeholder: string, accessiblePlaceholder?: string, growFactor?: number, shrinkFactor?: number, tooltip?: string,
@@ -657,16 +654,16 @@
internalPromptElement.addEventListener('focus', () => this.element.classList.add('focused'));
internalPromptElement.addEventListener('blur', () => this.element.classList.remove('focused'));
- this._prompt = new TextPrompt();
- this._proxyElement = this._prompt.attach(internalPromptElement);
- this._proxyElement.classList.add('toolbar-prompt-proxy');
- this._proxyElement.addEventListener('keydown', (event: Event) => this._onKeydownCallback(event));
- this._prompt.initialize(completions || ((): Promise<never[]> => Promise.resolve([])), ' ', dynamicCompletions);
+ this.prompt = new TextPrompt();
+ this.proxyElement = this.prompt.attach(internalPromptElement);
+ this.proxyElement.classList.add('toolbar-prompt-proxy');
+ this.proxyElement.addEventListener('keydown', (event: Event) => this.onKeydownCallback(event));
+ this.prompt.initialize(completions || ((): Promise<never[]> => Promise.resolve([])), ' ', dynamicCompletions);
if (tooltip) {
- this._prompt.setTitle(tooltip);
+ this.prompt.setTitle(tooltip);
}
- this._prompt.setPlaceholder(placeholder, accessiblePlaceholder);
- this._prompt.addEventListener(TextPromptEvents.TextChanged, this._onChangeCallback.bind(this));
+ this.prompt.setPlaceholder(placeholder, accessiblePlaceholder);
+ this.prompt.addEventListener(TextPromptEvents.TextChanged, this.onChangeCallback.bind(this));
if (growFactor) {
this.element.style.flexGrow = String(growFactor);
@@ -679,46 +676,46 @@
clearButton.appendChild(Icon.create('mediumicon-gray-cross-active', 'search-cancel-button'));
clearButton.addEventListener('click', () => {
this.setValue('', true);
- this._prompt.focus();
+ this.prompt.focus();
});
- this._updateEmptyStyles();
+ this.updateEmptyStyles();
}
- _applyEnabledState(enabled: boolean): void {
- this._prompt.setEnabled(enabled);
+ applyEnabledState(enabled: boolean): void {
+ this.prompt.setEnabled(enabled);
}
setValue(value: string, notify?: boolean): void {
- this._prompt.setText(value);
+ this.prompt.setText(value);
if (notify) {
- this._onChangeCallback();
+ this.onChangeCallback();
}
- this._updateEmptyStyles();
+ this.updateEmptyStyles();
}
value(): string {
- return this._prompt.textWithCurrentSuggestion();
+ return this.prompt.textWithCurrentSuggestion();
}
- _onKeydownCallback(event: Event): void {
- if ((event as KeyboardEvent).key === 'Enter' && this._prompt.text()) {
- this.dispatchEventToListeners(ToolbarInput.Event.EnterPressed, this._prompt.text());
+ private onKeydownCallback(event: Event): void {
+ if ((event as KeyboardEvent).key === 'Enter' && this.prompt.text()) {
+ this.dispatchEventToListeners(ToolbarInput.Event.EnterPressed, this.prompt.text());
}
- if (!isEscKey(event) || !this._prompt.text()) {
+ if (!isEscKey(event) || !this.prompt.text()) {
return;
}
this.setValue('', true);
event.consume(true);
}
- _onChangeCallback(): void {
- this._updateEmptyStyles();
- this.dispatchEventToListeners(ToolbarInput.Event.TextChanged, this._prompt.text());
+ private onChangeCallback(): void {
+ this.updateEmptyStyles();
+ this.dispatchEventToListeners(ToolbarInput.Event.TextChanged, this.prompt.text());
}
- _updateEmptyStyles(): void {
- this.element.classList.toggle('toolbar-input-empty', !this._prompt.text());
+ private updateEmptyStyles(): void {
+ this.element.classList.toggle('toolbar-input-empty', !this.prompt.text());
}
}
@@ -737,33 +734,33 @@
}
export class ToolbarToggle extends ToolbarButton {
- _toggled: boolean;
- _untoggledGlyph: string|undefined;
- _toggledGlyph: string|undefined;
+ private toggledInternal: boolean;
+ private readonly untoggledGlyph: string|undefined;
+ private readonly toggledGlyph: string|undefined;
constructor(title: string, glyph?: string, toggledGlyph?: string) {
super(title, glyph, '');
- this._toggled = false;
- this._untoggledGlyph = glyph;
- this._toggledGlyph = toggledGlyph;
+ this.toggledInternal = false;
+ this.untoggledGlyph = glyph;
+ this.toggledGlyph = toggledGlyph;
this.element.classList.add('toolbar-state-off');
ARIAUtils.setPressed(this.element, false);
}
toggled(): boolean {
- return this._toggled;
+ return this.toggledInternal;
}
setToggled(toggled: boolean): void {
- if (this._toggled === toggled) {
+ if (this.toggledInternal === toggled) {
return;
}
- this._toggled = toggled;
+ this.toggledInternal = toggled;
this.element.classList.toggle('toolbar-state-on', toggled);
this.element.classList.toggle('toolbar-state-off', !toggled);
ARIAUtils.setPressed(this.element, toggled);
- if (this._toggledGlyph && this._untoggledGlyph) {
- this.setGlyph(toggled ? this._toggledGlyph : this._untoggledGlyph);
+ if (this.toggledGlyph && this.untoggledGlyph) {
+ this.setGlyph(toggled ? this.toggledGlyph : this.untoggledGlyph);
}
}
@@ -777,83 +774,83 @@
}
export class ToolbarMenuButton extends ToolbarButton {
- _contextMenuHandler: (arg0: ContextMenu) => void;
- _useSoftMenu: boolean;
- _triggerTimeout?: number;
- _lastTriggerTime?: number;
+ private readonly contextMenuHandler: (arg0: ContextMenu) => void;
+ private readonly useSoftMenu: boolean;
+ private triggerTimeout?: number;
+ private lastTriggerTime?: number;
constructor(contextMenuHandler: (arg0: ContextMenu) => void, useSoftMenu?: boolean) {
super('', 'largeicon-menu');
- this._contextMenuHandler = contextMenuHandler;
- this._useSoftMenu = Boolean(useSoftMenu);
+ this.contextMenuHandler = contextMenuHandler;
+ this.useSoftMenu = Boolean(useSoftMenu);
ARIAUtils.markAsMenuButton(this.element);
}
- _mouseDown(event: MouseEvent): void {
+ mouseDown(event: MouseEvent): void {
if (event.buttons !== 1) {
- super._mouseDown(event);
+ super.mouseDown(event);
return;
}
- if (!this._triggerTimeout) {
- this._triggerTimeout = window.setTimeout(this._trigger.bind(this, event), 200);
+ if (!this.triggerTimeout) {
+ this.triggerTimeout = window.setTimeout(this.trigger.bind(this, event), 200);
}
}
- _trigger(event: Event): void {
- delete this._triggerTimeout;
+ private trigger(event: Event): void {
+ delete this.triggerTimeout;
// Throttling avoids entering a bad state on Macs when rapidly triggering context menus just
// after the window gains focus. See crbug.com/655556
- if (this._lastTriggerTime && Date.now() - this._lastTriggerTime < 300) {
+ if (this.lastTriggerTime && Date.now() - this.lastTriggerTime < 300) {
return;
}
const contextMenu = new ContextMenu(
- event, this._useSoftMenu, this.element.totalOffsetLeft(),
+ event, this.useSoftMenu, this.element.totalOffsetLeft(),
this.element.totalOffsetTop() + this.element.offsetHeight);
- this._contextMenuHandler(contextMenu);
+ this.contextMenuHandler(contextMenu);
contextMenu.show();
- this._lastTriggerTime = Date.now();
+ this.lastTriggerTime = Date.now();
}
- _clicked(event: Event): void {
- if (this._triggerTimeout) {
- clearTimeout(this._triggerTimeout);
+ clicked(event: Event): void {
+ if (this.triggerTimeout) {
+ clearTimeout(this.triggerTimeout);
}
- this._trigger(event);
+ this.trigger(event);
}
}
export class ToolbarSettingToggle extends ToolbarToggle {
- _defaultTitle: string;
- _setting: Common.Settings.Setting<boolean>;
- _willAnnounceState: boolean;
+ private readonly defaultTitle: string;
+ private readonly setting: Common.Settings.Setting<boolean>;
+ private willAnnounceState: boolean;
constructor(setting: Common.Settings.Setting<boolean>, glyph: string, title: string) {
super(title, glyph);
- this._defaultTitle = title;
- this._setting = setting;
- this._settingChanged();
- this._setting.addChangeListener(this._settingChanged, this);
+ this.defaultTitle = title;
+ this.setting = setting;
+ this.settingChanged();
+ this.setting.addChangeListener(this.settingChanged, this);
// Determines whether the toggle state will be announced to a screen reader
- this._willAnnounceState = false;
+ this.willAnnounceState = false;
}
- _settingChanged(): void {
- const toggled = this._setting.get();
+ private settingChanged(): void {
+ const toggled = this.setting.get();
this.setToggled(toggled);
const toggleAnnouncement = toggled ? i18nString(UIStrings.pressed) : i18nString(UIStrings.notPressed);
- if (this._willAnnounceState) {
+ if (this.willAnnounceState) {
ARIAUtils.alert(toggleAnnouncement);
}
- this._willAnnounceState = false;
- this.setTitle(this._defaultTitle);
+ this.willAnnounceState = false;
+ this.setTitle(this.defaultTitle);
}
- _clicked(event: Event): void {
- this._willAnnounceState = true;
- this._setting.set(!this.toggled());
- super._clicked(event);
+ clicked(event: Event): void {
+ this.willAnnounceState = true;
+ this.setting.set(!this.toggled());
+ super.clicked(event);
}
}
@@ -874,43 +871,43 @@
}
export class ToolbarComboBox extends ToolbarItem<void> {
- _selectElement: HTMLSelectElement;
+ protected selectElementInternal: HTMLSelectElement;
constructor(changeHandler: ((arg0: Event) => void)|null, title: string, className?: string) {
const element = document.createElement('span');
element.classList.add('toolbar-select-container');
super(element);
- this._selectElement = (this.element.createChild('select', 'toolbar-item') as HTMLSelectElement);
+ this.selectElementInternal = (this.element.createChild('select', 'toolbar-item') as HTMLSelectElement);
const dropdownArrowIcon = Icon.create('smallicon-triangle-down', 'toolbar-dropdown-arrow');
this.element.appendChild(dropdownArrowIcon);
if (changeHandler) {
- this._selectElement.addEventListener('change', changeHandler, false);
+ this.selectElementInternal.addEventListener('change', changeHandler, false);
}
- ARIAUtils.setAccessibleName(this._selectElement, title);
+ ARIAUtils.setAccessibleName(this.selectElementInternal, title);
super.setTitle(title);
if (className) {
- this._selectElement.classList.add(className);
+ this.selectElementInternal.classList.add(className);
}
}
selectElement(): HTMLSelectElement {
- return this._selectElement;
+ return this.selectElementInternal;
}
size(): number {
- return this._selectElement.childElementCount;
+ return this.selectElementInternal.childElementCount;
}
options(): HTMLOptionElement[] {
- return Array.prototype.slice.call(this._selectElement.children, 0);
+ return Array.prototype.slice.call(this.selectElementInternal.children, 0);
}
addOption(option: Element): void {
- this._selectElement.appendChild(option);
+ this.selectElementInternal.appendChild(option);
}
createOption(label: string, value?: string): Element {
- const option = (this._selectElement.createChild('option') as HTMLOptionElement);
+ const option = (this.selectElementInternal.createChild('option') as HTMLOptionElement);
option.text = label;
if (typeof value !== 'undefined') {
option.value = value;
@@ -918,46 +915,47 @@
return option;
}
- _applyEnabledState(enabled: boolean): void {
- super._applyEnabledState(enabled);
- this._selectElement.disabled = !enabled;
+ applyEnabledState(enabled: boolean): void {
+ super.applyEnabledState(enabled);
+ this.selectElementInternal.disabled = !enabled;
}
removeOption(option: Element): void {
- this._selectElement.removeChild(option);
+ this.selectElementInternal.removeChild(option);
}
removeOptions(): void {
- this._selectElement.removeChildren();
+ this.selectElementInternal.removeChildren();
}
selectedOption(): HTMLOptionElement|null {
- if (this._selectElement.selectedIndex >= 0) {
- return this._selectElement[this._selectElement.selectedIndex] as HTMLOptionElement;
+ if (this.selectElementInternal.selectedIndex >= 0) {
+ return this.selectElementInternal[this.selectElementInternal.selectedIndex] as HTMLOptionElement;
}
return null;
}
select(option: Element): void {
- // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- this._selectElement.selectedIndex = Array.prototype.indexOf.call((this._selectElement as any), option);
+ this.selectElementInternal.selectedIndex =
+ // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ Array.prototype.indexOf.call((this.selectElementInternal as any), option);
}
setSelectedIndex(index: number): void {
- this._selectElement.selectedIndex = index;
+ this.selectElementInternal.selectedIndex = index;
}
selectedIndex(): number {
- return this._selectElement.selectedIndex;
+ return this.selectElementInternal.selectedIndex;
}
setMaxWidth(width: number): void {
- this._selectElement.style.maxWidth = width + 'px';
+ this.selectElementInternal.style.maxWidth = width + 'px';
}
setMinWidth(width: number): void {
- this._selectElement.style.minWidth = width + 'px';
+ this.selectElementInternal.style.minWidth = width + 'px';
}
}
@@ -967,54 +965,54 @@
}
export class ToolbarSettingComboBox extends ToolbarComboBox {
- _options: Option[];
- _setting: Common.Settings.Setting<string>;
- _muteSettingListener?: boolean;
+ private optionsInternal: Option[];
+ private readonly setting: Common.Settings.Setting<string>;
+ private muteSettingListener?: boolean;
constructor(options: Option[], setting: Common.Settings.Setting<string>, accessibleName: string) {
super(null, accessibleName);
- this._options = options;
- this._setting = setting;
- this._selectElement.addEventListener('change', this._valueChanged.bind(this), false);
+ this.optionsInternal = options;
+ this.setting = setting;
+ this.selectElementInternal.addEventListener('change', this.valueChanged.bind(this), false);
this.setOptions(options);
- setting.addChangeListener(this._settingChanged, this);
+ setting.addChangeListener(this.settingChanged, this);
}
setOptions(options: Option[]): void {
- this._options = options;
- this._selectElement.removeChildren();
+ this.optionsInternal = options;
+ this.selectElementInternal.removeChildren();
for (let i = 0; i < options.length; ++i) {
const dataOption = options[i];
const option = this.createOption(dataOption.label, dataOption.value);
- this._selectElement.appendChild(option);
- if (this._setting.get() === dataOption.value) {
+ this.selectElementInternal.appendChild(option);
+ if (this.setting.get() === dataOption.value) {
this.setSelectedIndex(i);
}
}
}
value(): string {
- return this._options[this.selectedIndex()].value;
+ return this.optionsInternal[this.selectedIndex()].value;
}
- _settingChanged(): void {
- if (this._muteSettingListener) {
+ private settingChanged(): void {
+ if (this.muteSettingListener) {
return;
}
- const value = this._setting.get();
- for (let i = 0; i < this._options.length; ++i) {
- if (value === this._options[i].value) {
+ const value = this.setting.get();
+ for (let i = 0; i < this.optionsInternal.length; ++i) {
+ if (value === this.optionsInternal[i].value) {
this.setSelectedIndex(i);
break;
}
}
}
- _valueChanged(_event: Event): void {
- const option = this._options[this.selectedIndex()];
- this._muteSettingListener = true;
- this._setting.set(option.value);
- this._muteSettingListener = false;
+ private valueChanged(_event: Event): void {
+ const option = this.optionsInternal[this.selectedIndex()];
+ this.muteSettingListener = true;
+ this.setting.set(option.value);
+ this.muteSettingListener = false;
}
}
@@ -1043,8 +1041,8 @@
this.inputElement.checked = value;
}
- _applyEnabledState(enabled: boolean): void {
- super._applyEnabledState(enabled);
+ applyEnabledState(enabled: boolean): void {
+ super.applyEnabledState(enabled);
this.inputElement.disabled = !enabled;
}
}
diff --git a/front_end/ui/legacy/Treeoutline.ts b/front_end/ui/legacy/Treeoutline.ts
index d799952..2768363 100644
--- a/front_end/ui/legacy/Treeoutline.ts
+++ b/front_end/ui/legacy/Treeoutline.ts
@@ -33,8 +33,6 @@
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Platform from '../../core/platform/platform.js';
@@ -51,72 +49,72 @@
const nodeToParentTreeElementMap = new WeakMap<Node, TreeElement>();
export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper {
- _rootElement: TreeElement;
- _renderSelection: boolean;
+ readonly rootElementInternal: TreeElement;
+ renderSelection: boolean;
selectedTreeElement: TreeElement|null;
expandTreeElementsWhenArrowing: boolean;
- _comparator: ((arg0: TreeElement, arg1: TreeElement) => number)|null;
+ comparator: ((arg0: TreeElement, arg1: TreeElement) => number)|null;
contentElement: HTMLOListElement;
- _preventTabOrder: boolean;
- _showSelectionOnKeyboardFocus: boolean;
- _focusable: boolean;
+ preventTabOrder: boolean;
+ showSelectionOnKeyboardFocus: boolean;
+ private focusable: boolean;
element: HTMLElement;
- _useLightSelectionColor: boolean;
- _treeElementToScrollIntoView: TreeElement|null;
- _centerUponScrollIntoView: boolean;
+ useLightSelectionColorInternal: boolean;
+ private treeElementToScrollIntoView: TreeElement|null;
+ private centerUponScrollIntoView: boolean;
constructor() {
super();
- this._rootElement = this._createRootElement();
- this._renderSelection = false;
+ this.rootElementInternal = this.createRootElement();
+ this.renderSelection = false;
this.selectedTreeElement = null;
this.expandTreeElementsWhenArrowing = false;
- this._comparator = null;
+ this.comparator = null;
- this.contentElement = this._rootElement._childrenListNode;
- this.contentElement.addEventListener('keydown', this._treeKeyDown.bind(this), false);
+ this.contentElement = this.rootElementInternal.childrenListNode;
+ this.contentElement.addEventListener('keydown', this.treeKeyDown.bind(this), false);
- this._preventTabOrder = false;
- this._showSelectionOnKeyboardFocus = false;
- this._focusable = true;
+ this.preventTabOrder = false;
+ this.showSelectionOnKeyboardFocus = false;
+ this.focusable = true;
this.setFocusable(true);
this.element = this.contentElement;
ARIAUtils.markAsTree(this.element);
- this._useLightSelectionColor = false;
- this._treeElementToScrollIntoView = null;
- this._centerUponScrollIntoView = false;
+ this.useLightSelectionColorInternal = false;
+ this.treeElementToScrollIntoView = null;
+ this.centerUponScrollIntoView = false;
}
setShowSelectionOnKeyboardFocus(show: boolean, preventTabOrder?: boolean): void {
this.contentElement.classList.toggle('hide-selection-when-blurred', show);
- this._preventTabOrder = Boolean(preventTabOrder);
- if (this._focusable) {
+ this.preventTabOrder = Boolean(preventTabOrder);
+ if (this.focusable) {
this.contentElement.tabIndex = Boolean(preventTabOrder) ? -1 : 0;
}
- this._showSelectionOnKeyboardFocus = show;
+ this.showSelectionOnKeyboardFocus = show;
}
- _createRootElement(): TreeElement {
+ private createRootElement(): TreeElement {
const rootElement = new TreeElement();
rootElement.treeOutline = this;
rootElement.root = true;
rootElement.selectable = false;
rootElement.expanded = true;
- rootElement._childrenListNode.classList.remove('children');
+ rootElement.childrenListNode.classList.remove('children');
return rootElement;
}
rootElement(): TreeElement {
- return this._rootElement;
+ return this.rootElementInternal;
}
firstChild(): TreeElement|null {
- return this._rootElement.firstChild();
+ return this.rootElementInternal.firstChild();
}
- _lastDescendent(): TreeElement|null {
- let last = this._rootElement.lastChild();
+ private lastDescendent(): TreeElement|null {
+ let last = this.rootElementInternal.lastChild();
while (last && last.expanded && last.childCount()) {
last = last.lastChild();
}
@@ -124,19 +122,19 @@
}
appendChild(child: TreeElement, comparator?: ((arg0: TreeElement, arg1: TreeElement) => number)): void {
- this._rootElement.appendChild(child, comparator);
+ this.rootElementInternal.appendChild(child, comparator);
}
insertChild(child: TreeElement, index: number): void {
- this._rootElement.insertChild(child, index);
+ this.rootElementInternal.insertChild(child, index);
}
removeChild(child: TreeElement): void {
- this._rootElement.removeChild(child);
+ this.rootElementInternal.removeChild(child);
}
removeChildren(): void {
- this._rootElement.removeChildren();
+ this.rootElementInternal.removeChildren();
}
treeElementFromPoint(x: number, y: number): TreeElement|null {
@@ -157,24 +155,24 @@
}
setComparator(comparator: ((arg0: TreeElement, arg1: TreeElement) => number)|null): void {
- this._comparator = comparator;
+ this.comparator = comparator;
}
setFocusable(focusable: boolean): void {
- this._focusable = focusable;
+ this.focusable = focusable;
this.updateFocusable();
}
updateFocusable(): void {
- if (this._focusable) {
- this.contentElement.tabIndex = (this._preventTabOrder || Boolean(this.selectedTreeElement)) ? -1 : 0;
+ if (this.focusable) {
+ this.contentElement.tabIndex = (this.preventTabOrder || Boolean(this.selectedTreeElement)) ? -1 : 0;
if (this.selectedTreeElement) {
- this.selectedTreeElement._setFocusable(true);
+ this.selectedTreeElement.setFocusable(true);
}
} else {
this.contentElement.removeAttribute('tabIndex');
if (this.selectedTreeElement) {
- this.selectedTreeElement._setFocusable(false);
+ this.selectedTreeElement.setFocusable(false);
}
}
}
@@ -188,10 +186,10 @@
}
useLightSelectionColor(): void {
- this._useLightSelectionColor = true;
+ this.useLightSelectionColorInternal = true;
}
- _bindTreeElement(element: TreeElement): void {
+ bindTreeElement(element: TreeElement): void {
if (element.treeOutline) {
console.error('Binding element for the second time: ' + new Error().stack);
}
@@ -199,7 +197,7 @@
element.onbind();
}
- _unbindTreeElement(element: TreeElement): void {
+ unbindTreeElement(element: TreeElement): void {
if (!element.treeOutline) {
console.error('Unbinding element that was not bound: ' + new Error().stack);
}
@@ -239,10 +237,10 @@
if (this.selectedTreeElement) {
this.selectedTreeElement.deselect();
}
- this._selectFirst(omitFocus, selectedByUser);
+ this.selectFirst(omitFocus, selectedByUser);
}
- _selectFirst(omitFocus: boolean|undefined = false, selectedByUser: boolean|undefined = true): boolean {
+ private selectFirst(omitFocus: boolean|undefined = false, selectedByUser: boolean|undefined = true): boolean {
let first = this.firstChild();
while (first && !first.selectable) {
first = first.traverseNextTreeElement(true);
@@ -254,8 +252,8 @@
return true;
}
- _selectLast(): boolean {
- let last = this._lastDescendent();
+ private selectLast(): boolean {
+ let last = this.lastDescendent();
while (last && !last.selectable) {
last = last.traversePreviousTreeElement(true);
}
@@ -266,7 +264,7 @@
return true;
}
- _treeKeyDown(event: KeyboardEvent): void {
+ private treeKeyDown(event: KeyboardEvent): void {
if (event.shiftKey || event.metaKey || event.ctrlKey || isEditing()) {
return;
}
@@ -274,9 +272,9 @@
let handled = false;
if (!this.selectedTreeElement) {
if (event.key === 'ArrowUp' && !event.altKey) {
- handled = this._selectLast();
+ handled = this.selectLast();
} else if (event.key === 'ArrowDown' && !event.altKey) {
- handled = this._selectFirst();
+ handled = this.selectFirst();
}
} else if (event.key === 'ArrowUp' && !event.altKey) {
handled = this.selectPrevious();
@@ -298,9 +296,9 @@
} else if (event.keyCode === Keys.Space.code) {
handled = this.selectedTreeElement.onspace();
} else if (event.key === 'Home') {
- handled = this._selectFirst();
+ handled = this.selectFirst();
} else if (event.key === 'End') {
- handled = this._selectLast();
+ handled = this.selectLast();
}
if (handled) {
@@ -308,16 +306,16 @@
}
}
- _deferredScrollIntoView(treeElement: TreeElement, center: boolean): void {
+ deferredScrollIntoView(treeElement: TreeElement, center: boolean): void {
const deferredScrollIntoView = (): void => {
- if (!this._treeElementToScrollIntoView) {
+ if (!this.treeElementToScrollIntoView) {
return;
}
// This function doesn't use scrollIntoViewIfNeeded because it always
// scrolls in both directions even if only one is necessary to bring the
// item into view.
- const itemRect = this._treeElementToScrollIntoView.listItemElement.getBoundingClientRect();
+ const itemRect = this.treeElementToScrollIntoView.listItemElement.getBoundingClientRect();
const treeRect = this.contentElement.getBoundingClientRect();
// Usually, this.element is the tree container that scrolls. But sometimes
@@ -333,29 +331,29 @@
const currentScrollY = viewRect.top - treeRect.top + this.contentElement.offsetTop;
// Only scroll into view on each axis if the item is not visible at all
- // but if we do scroll and _centerUponScrollIntoView is true
+ // but if we do scroll and centerUponScrollIntoView is true
// then we center the top left corner of the item in view.
let deltaLeft: number = itemRect.left - treeRect.left;
if (deltaLeft > currentScrollX && deltaLeft < currentScrollX + viewRect.width) {
deltaLeft = currentScrollX;
- } else if (this._centerUponScrollIntoView) {
+ } else if (this.centerUponScrollIntoView) {
deltaLeft = deltaLeft - viewRect.width / 2;
}
let deltaTop: number = itemRect.top - treeRect.top;
if (deltaTop > currentScrollY && deltaTop < currentScrollY + viewRect.height) {
deltaTop = currentScrollY;
- } else if (this._centerUponScrollIntoView) {
+ } else if (this.centerUponScrollIntoView) {
deltaTop = deltaTop - viewRect.height / 2;
}
scrollParentElement.scrollTo(deltaLeft, deltaTop);
- this._treeElementToScrollIntoView = null;
+ this.treeElementToScrollIntoView = null;
};
- if (!this._treeElementToScrollIntoView) {
+ if (!this.treeElementToScrollIntoView) {
this.element.window().requestAnimationFrame(deferredScrollIntoView);
}
- this._treeElementToScrollIntoView = treeElement;
- this._centerUponScrollIntoView = center;
+ this.treeElementToScrollIntoView = treeElement;
+ this.centerUponScrollIntoView = center;
}
onStartedEditingTitle(_treeElement: TreeElement): void {
@@ -374,30 +372,30 @@
export class TreeOutlineInShadow extends TreeOutline {
element: HTMLElement;
- _shadowRoot: ShadowRoot;
- _disclosureElement: Element;
- _renderSelection: boolean;
+ shadowRoot: ShadowRoot;
+ private readonly disclosureElement: Element;
+ renderSelection: boolean;
constructor() {
super();
this.contentElement.classList.add('tree-outline');
this.element = document.createElement('div');
- this._shadowRoot =
+ this.shadowRoot =
createShadowRootWithCoreStyles(this.element, {cssFile: 'ui/legacy/treeoutline.css', delegatesFocus: undefined});
- this._disclosureElement = this._shadowRoot.createChild('div', 'tree-outline-disclosure');
- this._disclosureElement.appendChild(this.contentElement);
- this._renderSelection = true;
+ this.disclosureElement = this.shadowRoot.createChild('div', 'tree-outline-disclosure');
+ this.disclosureElement.appendChild(this.contentElement);
+ this.renderSelection = true;
}
registerRequiredCSS(cssFile: string): void {
- appendStyle(this._shadowRoot, cssFile);
+ appendStyle(this.shadowRoot, cssFile);
}
registerCSSFiles(cssFiles: CSSStyleSheet[]): void {
- this._shadowRoot.adoptedStyleSheets = this._shadowRoot.adoptedStyleSheets.concat(cssFiles);
+ this.shadowRoot.adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets.concat(cssFiles);
}
hideOverflow(): void {
- this._disclosureElement.classList.add('tree-outline-disclosure-hide-overflow');
+ this.disclosureElement.classList.add('tree-outline-disclosure-hide-overflow');
}
makeDense(): void {
@@ -405,7 +403,7 @@
}
onStartedEditingTitle(treeElement: TreeElement): void {
- const selection = this._shadowRoot.getSelection();
+ const selection = this.shadowRoot.getSelection();
if (selection) {
selection.selectAllChildren(treeElement.titleElement);
}
@@ -418,67 +416,67 @@
parent: TreeElement|null;
previousSibling: TreeElement|null;
nextSibling: TreeElement|null;
- _boundOnFocus: () => void;
- _boundOnBlur: () => void;
- _listItemNode: HTMLLIElement;
+ private readonly boundOnFocus: () => void;
+ private readonly boundOnBlur: () => void;
+ readonly listItemNode: HTMLLIElement;
titleElement: Node;
- _title: string|Node;
- _children: TreeElement[]|null;
- _childrenListNode: HTMLOListElement;
- _hidden: boolean;
- _selectable: boolean;
+ titleInternal: string|Node;
+ private childrenInternal: TreeElement[]|null;
+ childrenListNode: HTMLOListElement;
+ private hiddenInternal: boolean;
+ private selectableInternal: boolean;
expanded: boolean;
selected: boolean;
- _expandable!: boolean;
- _collapsible: boolean;
+ private expandable!: boolean;
+ private collapsible: boolean;
toggleOnClick: boolean;
button: HTMLButtonElement|null;
root: boolean;
- _tooltip: string;
- _leadingIconsElement: HTMLElement|null;
- _trailingIconsElement: HTMLElement|null;
- _selectionElement: HTMLElement|null;
- _disableSelectFocus: boolean;
+ private tooltipInternal: string;
+ private leadingIconsElement: HTMLElement|null;
+ private trailingIconsElement: HTMLElement|null;
+ protected selectionElementInternal: HTMLElement|null;
+ private disableSelectFocus: boolean;
constructor(title?: string|Node, expandable?: boolean) {
this.treeOutline = null;
this.parent = null;
this.previousSibling = null;
this.nextSibling = null;
- this._boundOnFocus = this._onFocus.bind(this);
- this._boundOnBlur = this._onBlur.bind(this);
- this._listItemNode = document.createElement('li');
+ this.boundOnFocus = this.onFocus.bind(this);
+ this.boundOnBlur = this.onBlur.bind(this);
+ this.listItemNode = document.createElement('li');
- this.titleElement = this._listItemNode.createChild('span', 'tree-element-title');
- treeElementBylistItemNode.set(this._listItemNode, this);
- this._title = '';
+ this.titleElement = this.listItemNode.createChild('span', 'tree-element-title');
+ treeElementBylistItemNode.set(this.listItemNode, this);
+ this.titleInternal = '';
if (title) {
this.title = title;
}
- this._listItemNode.addEventListener('mousedown', (this._handleMouseDown.bind(this) as EventListener), false);
- this._listItemNode.addEventListener('click', (this._treeElementToggled.bind(this) as EventListener), false);
- this._listItemNode.addEventListener('dblclick', this._handleDoubleClick.bind(this), false);
- ARIAUtils.markAsTreeitem(this._listItemNode);
+ this.listItemNode.addEventListener('mousedown', (this.handleMouseDown.bind(this) as EventListener), false);
+ this.listItemNode.addEventListener('click', (this.treeElementToggled.bind(this) as EventListener), false);
+ this.listItemNode.addEventListener('dblclick', this.handleDoubleClick.bind(this), false);
+ ARIAUtils.markAsTreeitem(this.listItemNode);
- this._children = null;
- this._childrenListNode = document.createElement('ol');
- nodeToParentTreeElementMap.set(this._childrenListNode, this);
- this._childrenListNode.classList.add('children');
- ARIAUtils.markAsGroup(this._childrenListNode);
+ this.childrenInternal = null;
+ this.childrenListNode = document.createElement('ol');
+ nodeToParentTreeElementMap.set(this.childrenListNode, this);
+ this.childrenListNode.classList.add('children');
+ ARIAUtils.markAsGroup(this.childrenListNode);
- this._hidden = false;
- this._selectable = true;
+ this.hiddenInternal = false;
+ this.selectableInternal = true;
this.expanded = false;
this.selected = false;
this.setExpandable(expandable || false);
- this._collapsible = true;
+ this.collapsible = true;
this.toggleOnClick = false;
this.button = null;
this.root = false;
- this._tooltip = '';
- this._leadingIconsElement = null;
- this._trailingIconsElement = null;
- this._selectionElement = null;
- this._disableSelectFocus = false;
+ this.tooltipInternal = '';
+ this.leadingIconsElement = null;
+ this.trailingIconsElement = null;
+ this.selectionElementInternal = null;
+ this.disableSelectFocus = false;
}
static getTreeElementBylistItemNode(node: Node): TreeElement|undefined {
@@ -522,48 +520,48 @@
}
children(): TreeElement[] {
- return this._children || [];
+ return this.childrenInternal || [];
}
childCount(): number {
- return this._children ? this._children.length : 0;
+ return this.childrenInternal ? this.childrenInternal.length : 0;
}
firstChild(): TreeElement|null {
- return this._children ? this._children[0] : null;
+ return this.childrenInternal ? this.childrenInternal[0] : null;
}
lastChild(): TreeElement|null {
- return this._children ? this._children[this._children.length - 1] : null;
+ return this.childrenInternal ? this.childrenInternal[this.childrenInternal.length - 1] : null;
}
childAt(index: number): TreeElement|null {
- return this._children ? this._children[index] : null;
+ return this.childrenInternal ? this.childrenInternal[index] : null;
}
indexOfChild(child: TreeElement): number {
- return this._children ? this._children.indexOf(child) : -1;
+ return this.childrenInternal ? this.childrenInternal.indexOf(child) : -1;
}
appendChild(child: TreeElement, comparator?: ((arg0: TreeElement, arg1: TreeElement) => number)): void {
- if (!this._children) {
- this._children = [];
+ if (!this.childrenInternal) {
+ this.childrenInternal = [];
}
let insertionIndex;
if (comparator) {
- insertionIndex = Platform.ArrayUtilities.lowerBound(this._children, child, comparator);
- } else if (this.treeOutline && this.treeOutline._comparator) {
- insertionIndex = Platform.ArrayUtilities.lowerBound(this._children, child, this.treeOutline._comparator);
+ insertionIndex = Platform.ArrayUtilities.lowerBound(this.childrenInternal, child, comparator);
+ } else if (this.treeOutline && this.treeOutline.comparator) {
+ insertionIndex = Platform.ArrayUtilities.lowerBound(this.childrenInternal, child, this.treeOutline.comparator);
} else {
- insertionIndex = this._children.length;
+ insertionIndex = this.childrenInternal.length;
}
this.insertChild(child, insertionIndex);
}
insertChild(child: TreeElement, index: number): void {
- if (!this._children) {
- this._children = [];
+ if (!this.childrenInternal) {
+ this.childrenInternal = [];
}
if (!child) {
@@ -573,7 +571,7 @@
console.assert(
!child.parent, 'Attempting to insert a child that is already in the tree, reparenting is not supported.');
- const previousChild = (index > 0 ? this._children[index - 1] : null);
+ const previousChild = (index > 0 ? this.childrenInternal[index - 1] : null);
if (previousChild) {
previousChild.nextSibling = child;
child.previousSibling = previousChild;
@@ -581,7 +579,7 @@
child.previousSibling = null;
}
- const nextChild = this._children[index];
+ const nextChild = this.childrenInternal[index];
if (nextChild) {
nextChild.previousSibling = child;
child.nextSibling = nextChild;
@@ -589,26 +587,26 @@
child.nextSibling = null;
}
- this._children.splice(index, 0, child);
+ this.childrenInternal.splice(index, 0, child);
this.setExpandable(true);
child.parent = this;
if (this.treeOutline) {
- this.treeOutline._bindTreeElement(child);
+ this.treeOutline.bindTreeElement(child);
}
for (let current = child.firstChild(); this.treeOutline && current;
current = current.traverseNextTreeElement(false, child, true)) {
- this.treeOutline._bindTreeElement(current);
+ this.treeOutline.bindTreeElement(current);
}
child.onattach();
- child._ensureSelection();
+ child.ensureSelection();
if (this.treeOutline) {
this.treeOutline.dispatchEventToListeners(Events.ElementAttached, child);
}
- const nextSibling = child.nextSibling ? child.nextSibling._listItemNode : null;
- this._childrenListNode.insertBefore(child._listItemNode, nextSibling);
- this._childrenListNode.insertBefore(child._childrenListNode, nextSibling);
+ const nextSibling = child.nextSibling ? child.nextSibling.listItemNode : null;
+ this.childrenListNode.insertBefore(child.listItemNode, nextSibling);
+ this.childrenListNode.insertBefore(child.childrenListNode, nextSibling);
if (child.selected) {
child.select();
}
@@ -618,12 +616,12 @@
}
removeChildAtIndex(childIndex: number): void {
- if (!this._children || childIndex < 0 || childIndex >= this._children.length) {
+ if (!this.childrenInternal || childIndex < 0 || childIndex >= this.childrenInternal.length) {
throw 'childIndex out of range';
}
- const child = this._children[childIndex];
- this._children.splice(childIndex, 1);
+ const child = this.childrenInternal[childIndex];
+ this.childrenInternal.splice(childIndex, 1);
const parent = child.parent;
if (this.treeOutline && this.treeOutline.selectedTreeElement &&
@@ -646,14 +644,14 @@
child.parent = null;
if (this.treeOutline) {
- this.treeOutline._unbindTreeElement(child);
+ this.treeOutline.unbindTreeElement(child);
}
for (let current = child.firstChild(); this.treeOutline && current;
current = current.traverseNextTreeElement(false, child, true)) {
- this.treeOutline._unbindTreeElement(current);
+ this.treeOutline.unbindTreeElement(current);
}
- child._detach();
+ child.detach();
if (this.treeOutline) {
this.treeOutline.dispatchEventToListeners(Events.ElementsDetached);
}
@@ -667,7 +665,7 @@
return;
}
- const childIndex = this._children ? this._children.indexOf(child) : -1;
+ const childIndex = this.childrenInternal ? this.childrenInternal.indexOf(child) : -1;
if (childIndex === -1) {
throw 'child not found in this node\'s children';
}
@@ -681,23 +679,23 @@
this.select(true);
}
- if (this._children) {
- for (const child of this._children) {
+ if (this.childrenInternal) {
+ for (const child of this.childrenInternal) {
child.previousSibling = null;
child.nextSibling = null;
child.parent = null;
if (this.treeOutline) {
- this.treeOutline._unbindTreeElement(child);
+ this.treeOutline.unbindTreeElement(child);
}
for (let current = child.firstChild(); this.treeOutline && current;
current = current.traverseNextTreeElement(false, child, true)) {
- this.treeOutline._unbindTreeElement(current);
+ this.treeOutline.unbindTreeElement(current);
}
- child._detach();
+ child.detach();
}
}
- this._children = [];
+ this.childrenInternal = [];
if (this.treeOutline) {
this.treeOutline.dispatchEventToListeners(Events.ElementsDetached);
}
@@ -707,30 +705,30 @@
if (this.isHidden()) {
return false;
}
- return this._selectable;
+ return this.selectableInternal;
}
set selectable(x: boolean) {
- this._selectable = x;
+ this.selectableInternal = x;
}
get listItemElement(): HTMLLIElement {
- return this._listItemNode;
+ return this.listItemNode;
}
get childrenListElement(): HTMLOListElement {
- return this._childrenListNode;
+ return this.childrenListNode;
}
get title(): string|Node {
- return this._title;
+ return this.titleInternal;
}
set title(x: string|Node) {
- if (this._title === x) {
+ if (this.titleInternal === x) {
return;
}
- this._title = x;
+ this.titleInternal = x;
if (typeof x === 'string') {
this.titleElement.textContent = x;
@@ -740,25 +738,25 @@
this.tooltip = '';
}
- this._listItemNode.removeChildren();
- if (this._leadingIconsElement) {
- this._listItemNode.appendChild(this._leadingIconsElement);
+ this.listItemNode.removeChildren();
+ if (this.leadingIconsElement) {
+ this.listItemNode.appendChild(this.leadingIconsElement);
}
- this._listItemNode.appendChild(this.titleElement);
- if (this._trailingIconsElement) {
- this._listItemNode.appendChild(this._trailingIconsElement);
+ this.listItemNode.appendChild(this.titleElement);
+ if (this.trailingIconsElement) {
+ this.listItemNode.appendChild(this.trailingIconsElement);
}
- this._ensureSelection();
+ this.ensureSelection();
}
titleAsText(): string {
- if (!this._title) {
+ if (!this.titleInternal) {
return '';
}
- if (typeof this._title === 'string') {
- return this._title;
+ if (typeof this.titleInternal === 'string') {
+ return this.titleInternal;
}
- return this._title.textContent || '';
+ return this.titleInternal.textContent || '';
}
startEditingTitle<T>(editingConfig: Config<T>): void {
@@ -769,97 +767,97 @@
}
setLeadingIcons(icons: Icon[]): void {
- if (!this._leadingIconsElement && !icons.length) {
+ if (!this.leadingIconsElement && !icons.length) {
return;
}
- if (!this._leadingIconsElement) {
- this._leadingIconsElement = document.createElement('div');
- this._leadingIconsElement.classList.add('leading-icons');
- this._leadingIconsElement.classList.add('icons-container');
- this._listItemNode.insertBefore(this._leadingIconsElement, this.titleElement);
- this._ensureSelection();
+ if (!this.leadingIconsElement) {
+ this.leadingIconsElement = document.createElement('div');
+ this.leadingIconsElement.classList.add('leading-icons');
+ this.leadingIconsElement.classList.add('icons-container');
+ this.listItemNode.insertBefore(this.leadingIconsElement, this.titleElement);
+ this.ensureSelection();
}
- this._leadingIconsElement.removeChildren();
+ this.leadingIconsElement.removeChildren();
for (const icon of icons) {
- this._leadingIconsElement.appendChild(icon);
+ this.leadingIconsElement.appendChild(icon);
}
}
setTrailingIcons(icons: Icon[]): void {
- if (!this._trailingIconsElement && !icons.length) {
+ if (!this.trailingIconsElement && !icons.length) {
return;
}
- if (!this._trailingIconsElement) {
- this._trailingIconsElement = document.createElement('div');
- this._trailingIconsElement.classList.add('trailing-icons');
- this._trailingIconsElement.classList.add('icons-container');
- this._listItemNode.appendChild(this._trailingIconsElement);
- this._ensureSelection();
+ if (!this.trailingIconsElement) {
+ this.trailingIconsElement = document.createElement('div');
+ this.trailingIconsElement.classList.add('trailing-icons');
+ this.trailingIconsElement.classList.add('icons-container');
+ this.listItemNode.appendChild(this.trailingIconsElement);
+ this.ensureSelection();
}
- this._trailingIconsElement.removeChildren();
+ this.trailingIconsElement.removeChildren();
for (const icon of icons) {
- this._trailingIconsElement.appendChild(icon);
+ this.trailingIconsElement.appendChild(icon);
}
}
get tooltip(): string {
- return this._tooltip;
+ return this.tooltipInternal;
}
set tooltip(x: string) {
- if (this._tooltip === x) {
+ if (this.tooltipInternal === x) {
return;
}
- this._tooltip = x;
- Tooltip.install(this._listItemNode, x);
+ this.tooltipInternal = x;
+ Tooltip.install(this.listItemNode, x);
}
isExpandable(): boolean {
- return this._expandable;
+ return this.expandable;
}
setExpandable(expandable: boolean): void {
- if (this._expandable === expandable) {
+ if (this.expandable === expandable) {
return;
}
- this._expandable = expandable;
+ this.expandable = expandable;
- this._listItemNode.classList.toggle('parent', expandable);
+ this.listItemNode.classList.toggle('parent', expandable);
if (!expandable) {
this.collapse();
- ARIAUtils.unsetExpandable(this._listItemNode);
+ ARIAUtils.unsetExpandable(this.listItemNode);
} else {
- ARIAUtils.setExpanded(this._listItemNode, false);
+ ARIAUtils.setExpanded(this.listItemNode, false);
}
}
setCollapsible(collapsible: boolean): void {
- if (this._collapsible === collapsible) {
+ if (this.collapsible === collapsible) {
return;
}
- this._collapsible = collapsible;
+ this.collapsible = collapsible;
- this._listItemNode.classList.toggle('always-parent', !collapsible);
+ this.listItemNode.classList.toggle('always-parent', !collapsible);
if (!collapsible) {
this.expand();
}
}
get hidden(): boolean {
- return this._hidden;
+ return this.hiddenInternal;
}
set hidden(x: boolean) {
- if (this._hidden === x) {
+ if (this.hiddenInternal === x) {
return;
}
- this._hidden = x;
+ this.hiddenInternal = x;
- this._listItemNode.classList.toggle('hidden', x);
- this._childrenListNode.classList.toggle('hidden', x);
+ this.listItemNode.classList.toggle('hidden', x);
+ this.childrenListNode.classList.toggle('hidden', x);
if (x && this.treeOutline && this.treeOutline.selectedTreeElement &&
this.treeOutline.selectedTreeElement.hasAncestorOrSelf(this)) {
@@ -869,32 +867,32 @@
}
invalidateChildren(): void {
- if (this._children) {
+ if (this.childrenInternal) {
this.removeChildren();
- this._children = null;
+ this.childrenInternal = null;
}
}
- _ensureSelection(): void {
- if (!this.treeOutline || !this.treeOutline._renderSelection) {
+ private ensureSelection(): void {
+ if (!this.treeOutline || !this.treeOutline.renderSelection) {
return;
}
- if (!this._selectionElement) {
- this._selectionElement = document.createElement('div');
- this._selectionElement.classList.add('selection');
- this._selectionElement.classList.add('fill');
+ if (!this.selectionElementInternal) {
+ this.selectionElementInternal = document.createElement('div');
+ this.selectionElementInternal.classList.add('selection');
+ this.selectionElementInternal.classList.add('fill');
}
- this._listItemNode.insertBefore(this._selectionElement, this.listItemElement.firstChild);
+ this.listItemNode.insertBefore(this.selectionElementInternal, this.listItemElement.firstChild);
}
- _treeElementToggled(event: MouseEvent): void {
+ private treeElementToggled(event: MouseEvent): void {
const element = (event.currentTarget as Node | null);
if (!element || treeElementBylistItemNode.get(element) !== this || element.hasSelection()) {
return;
}
console.assert(Boolean(this.treeOutline));
- const showSelectionOnKeyboardFocus = this.treeOutline ? this.treeOutline._showSelectionOnKeyboardFocus : false;
+ const showSelectionOnKeyboardFocus = this.treeOutline ? this.treeOutline.showSelectionOnKeyboardFocus : false;
const toggleOnClick = this.toggleOnClick && (showSelectionOnKeyboardFocus || !this.selectable);
const isInTriangle = this.isEventWithinDisclosureTriangle(event);
if (!toggleOnClick && !isInTriangle) {
@@ -917,7 +915,7 @@
event.consume();
}
- _handleMouseDown(event: MouseEvent): void {
+ private handleMouseDown(event: MouseEvent): void {
const element = (event.currentTarget as Node | null);
if (!element) {
return;
@@ -936,7 +934,7 @@
this.selectOnMouseDown(event);
}
- _handleDoubleClick(event: Event): void {
+ private handleDoubleClick(event: Event): void {
const element = (event.currentTarget as Node | null);
if (!element || treeElementBylistItemNode.get(element) !== this) {
return;
@@ -946,23 +944,23 @@
if (handled) {
return;
}
- if (this._expandable && !this.expanded) {
+ if (this.expandable && !this.expanded) {
this.expand();
}
}
- _detach(): void {
- this._listItemNode.remove();
- this._childrenListNode.remove();
+ private detach(): void {
+ this.listItemNode.remove();
+ this.childrenListNode.remove();
}
collapse(): void {
- if (!this.expanded || !this._collapsible) {
+ if (!this.expanded || !this.collapsible) {
return;
}
- this._listItemNode.classList.remove('expanded');
- this._childrenListNode.classList.remove('expanded');
- ARIAUtils.setExpanded(this._listItemNode, false);
+ this.listItemNode.classList.remove('expanded');
+ this.childrenListNode.classList.remove('expanded');
+ ARIAUtils.setExpanded(this.listItemNode, false);
this.expanded = false;
this.oncollapse();
if (this.treeOutline) {
@@ -986,16 +984,16 @@
}
collapseChildren(): void {
- if (!this._children) {
+ if (!this.childrenInternal) {
return;
}
- for (const child of this._children) {
+ for (const child of this.childrenInternal) {
child.collapseRecursively();
}
}
expand(): void {
- if (!this._expandable || (this.expanded && this._children)) {
+ if (!this.expandable || (this.expanded && this.childrenInternal)) {
return;
}
@@ -1005,10 +1003,10 @@
this.expanded = true;
- this._populateIfNeeded();
- this._listItemNode.classList.add('expanded');
- this._childrenListNode.classList.add('expanded');
- ARIAUtils.setExpanded(this._listItemNode, true);
+ this.populateIfNeeded();
+ this.listItemNode.classList.add('expanded');
+ this.childrenListNode.classList.add('expanded');
+ ARIAUtils.setExpanded(this.listItemNode, true);
if (this.treeOutline) {
this.onexpand();
@@ -1029,7 +1027,7 @@
}
while (item) {
- await item._populateIfNeeded();
+ await item.populateIfNeeded();
if (depth < maxDepth) {
item.expand();
@@ -1041,7 +1039,7 @@
}
collapseOrAscend(altKey: boolean): boolean {
- if (this.expanded && this._collapsible) {
+ if (this.expanded && this.collapsible) {
if (altKey) {
this.collapseRecursively();
} else {
@@ -1072,7 +1070,7 @@
}
descendOrExpand(altKey: boolean): boolean {
- if (!this._expandable) {
+ if (!this.expandable) {
return false;
}
@@ -1107,7 +1105,7 @@
}
if (this.treeOutline) {
- this.treeOutline._deferredScrollIntoView(this, Boolean(center));
+ this.treeOutline.deferredScrollIntoView(this, Boolean(center));
}
}
@@ -1128,17 +1126,17 @@
event.consume(true);
}
- if (this._listItemNode.draggable && this._selectionElement && this.treeOutline) {
+ if (this.listItemNode.draggable && this.selectionElementInternal && this.treeOutline) {
const marginLeft = this.treeOutline.element.getBoundingClientRect().left -
- this._listItemNode.getBoundingClientRect().left - this.treeOutline.element.scrollLeft;
+ this.listItemNode.getBoundingClientRect().left - this.treeOutline.element.scrollLeft;
// By default the left margin extends far off screen. This is not a problem except when dragging an element.
// Setting the margin once here should be fine, because we believe the left margin should never change.
- this._selectionElement.style.setProperty('margin-left', marginLeft + 'px');
+ this.selectionElementInternal.style.setProperty('margin-left', marginLeft + 'px');
}
}
select(omitFocus?: boolean, selectedByUser?: boolean): boolean {
- omitFocus = omitFocus || this._disableSelectFocus;
+ omitFocus = omitFocus || this.disableSelectFocus;
if (!this.treeOutline || !this.selectable || this.selected) {
if (!omitFocus) {
this.listItemElement.focus();
@@ -1149,7 +1147,7 @@
const lastSelected = this.treeOutline.selectedTreeElement;
this.treeOutline.selectedTreeElement = null;
- if (this.treeOutline._rootElement === this) {
+ if (this.treeOutline.rootElementInternal === this) {
if (lastSelected) {
lastSelected.deselect();
}
@@ -1167,8 +1165,8 @@
this.listItemElement.focus();
}
- this._listItemNode.classList.add('selected');
- ARIAUtils.setSelected(this._listItemNode, true);
+ this.listItemNode.classList.add('selected');
+ ARIAUtils.setSelected(this.listItemNode, true);
this.treeOutline.dispatchEventToListeners(Events.ElementSelected, this);
if (lastSelected) {
lastSelected.deselect();
@@ -1176,33 +1174,33 @@
return this.onselect(selectedByUser);
}
- _setFocusable(focusable: boolean): void {
+ setFocusable(focusable: boolean): void {
if (focusable) {
- this._listItemNode.setAttribute('tabIndex', (this.treeOutline && this.treeOutline._preventTabOrder) ? '-1' : '0');
- this._listItemNode.addEventListener('focus', this._boundOnFocus, false);
- this._listItemNode.addEventListener('blur', this._boundOnBlur, false);
+ this.listItemNode.setAttribute('tabIndex', (this.treeOutline && this.treeOutline.preventTabOrder) ? '-1' : '0');
+ this.listItemNode.addEventListener('focus', this.boundOnFocus, false);
+ this.listItemNode.addEventListener('blur', this.boundOnBlur, false);
} else {
- this._listItemNode.removeAttribute('tabIndex');
- this._listItemNode.removeEventListener('focus', this._boundOnFocus, false);
- this._listItemNode.removeEventListener('blur', this._boundOnBlur, false);
+ this.listItemNode.removeAttribute('tabIndex');
+ this.listItemNode.removeEventListener('focus', this.boundOnFocus, false);
+ this.listItemNode.removeEventListener('blur', this.boundOnBlur, false);
}
}
- _onFocus(): void {
- if (!this.treeOutline || this.treeOutline._useLightSelectionColor) {
+ private onFocus(): void {
+ if (!this.treeOutline || this.treeOutline.useLightSelectionColor()) {
return;
}
if (!this.treeOutline.contentElement.classList.contains('hide-selection-when-blurred')) {
- this._listItemNode.classList.add('force-white-icons');
+ this.listItemNode.classList.add('force-white-icons');
}
}
- _onBlur(): void {
- if (!this.treeOutline || this.treeOutline._useLightSelectionColor) {
+ private onBlur(): void {
+ if (!this.treeOutline || this.treeOutline.useLightSelectionColor()) {
return;
}
if (!this.treeOutline.contentElement.classList.contains('hide-selection-when-blurred')) {
- this._listItemNode.classList.remove('force-white-icons');
+ this.listItemNode.classList.remove('force-white-icons');
}
}
@@ -1212,11 +1210,11 @@
}
deselect(): void {
- const hadFocus = this._listItemNode.hasFocus();
+ const hadFocus = this.listItemNode.hasFocus();
this.selected = false;
- this._listItemNode.classList.remove('selected');
- ARIAUtils.clearSelected(this._listItemNode);
- this._setFocusable(false);
+ this.listItemNode.classList.remove('selected');
+ ARIAUtils.clearSelected(this.listItemNode);
+ this.setFocusable(false);
if (this.treeOutline && this.treeOutline.selectedTreeElement === this) {
this.treeOutline.selectedTreeElement = null;
@@ -1227,9 +1225,9 @@
}
}
- async _populateIfNeeded(): Promise<void> {
- if (this.treeOutline && this._expandable && !this._children) {
- this._children = [];
+ private async populateIfNeeded(): Promise<void> {
+ if (this.treeOutline && this.expandable && !this.childrenInternal) {
+ this.childrenInternal = [];
await this.onpopulate();
}
}
@@ -1277,7 +1275,7 @@
depthChange: number,
}): TreeElement|null {
if (!dontPopulate) {
- this._populateIfNeeded();
+ this.populateIfNeeded();
}
if (info) {
@@ -1323,14 +1321,14 @@
let element: (TreeElement|null) =
skipUnrevealed ? (this.revealed() ? this.previousSibling : null) : this.previousSibling;
if (!dontPopulate && element) {
- element._populateIfNeeded();
+ element.populateIfNeeded();
}
while (element &&
(skipUnrevealed ? (element.revealed() && element.expanded ? element.lastChild() : null) :
element.lastChild())) {
if (!dontPopulate) {
- element._populateIfNeeded();
+ element.populateIfNeeded();
}
element =
(skipUnrevealed ? (element.revealed() && element.expanded ? element.lastChild() : null) :
@@ -1351,14 +1349,14 @@
isEventWithinDisclosureTriangle(event: MouseEvent): boolean {
const arrowToggleWidth = 10;
// FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
- const paddingLeftValue = window.getComputedStyle(this._listItemNode).paddingLeft;
+ const paddingLeftValue = window.getComputedStyle(this.listItemNode).paddingLeft;
console.assert(paddingLeftValue.endsWith('px'));
const computedLeftPadding = parseFloat(paddingLeftValue);
- const left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
- return event.pageX >= left && event.pageX <= left + arrowToggleWidth && this._expandable;
+ const left = this.listItemNode.totalOffsetLeft() + computedLeftPadding;
+ return event.pageX >= left && event.pageX <= left + arrowToggleWidth && this.expandable;
}
setDisableSelectFocus(toggle: boolean): void {
- this._disableSelectFocus = toggle;
+ this.disableSelectFocus = toggle;
}
}
diff --git a/front_end/ui/legacy/UIUtils.ts b/front_end/ui/legacy/UIUtils.ts
index 890c57d..2ee62df 100644
--- a/front_end/ui/legacy/UIUtils.ts
+++ b/front_end/ui/legacy/UIUtils.ts
@@ -33,8 +33,6 @@
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
import * as Host from '../../core/host/host.js';
@@ -157,44 +155,44 @@
}
class DragHandler {
- _glassPaneInUse?: boolean;
- _elementDraggingEventListener?: ((arg0: MouseEvent) => void|boolean);
- _elementEndDraggingEventListener?: ((arg0: MouseEvent) => void)|null;
- _dragEventsTargetDocument?: Document;
- _dragEventsTargetDocumentTop?: Document;
- _restoreCursorAfterDrag?: (() => void);
+ private glassPaneInUse?: boolean;
+ private elementDraggingEventListener?: ((arg0: MouseEvent) => void|boolean);
+ private elementEndDraggingEventListener?: ((arg0: MouseEvent) => void)|null;
+ private dragEventsTargetDocument?: Document;
+ private dragEventsTargetDocumentTop?: Document;
+ private restoreCursorAfterDrag?: (() => void);
constructor() {
- this._elementDragMove = this._elementDragMove.bind(this);
- this._elementDragEnd = this._elementDragEnd.bind(this);
- this._mouseOutWhileDragging = this._mouseOutWhileDragging.bind(this);
+ this.elementDragMove = this.elementDragMove.bind(this);
+ this.elementDragEnd = this.elementDragEnd.bind(this);
+ this.mouseOutWhileDragging = this.mouseOutWhileDragging.bind(this);
}
- _createGlassPane(): void {
- this._glassPaneInUse = true;
- if (!DragHandler._glassPaneUsageCount++) {
- DragHandler._glassPane = new GlassPane();
- DragHandler._glassPane.setPointerEventsBehavior(PointerEventsBehavior.BlockedByGlassPane);
- if (DragHandler._documentForMouseOut) {
- DragHandler._glassPane.show(DragHandler._documentForMouseOut);
+ private createGlassPane(): void {
+ this.glassPaneInUse = true;
+ if (!DragHandler.glassPaneUsageCount++) {
+ DragHandler.glassPane = new GlassPane();
+ DragHandler.glassPane.setPointerEventsBehavior(PointerEventsBehavior.BlockedByGlassPane);
+ if (DragHandler.documentForMouseOut) {
+ DragHandler.glassPane.show(DragHandler.documentForMouseOut);
}
}
}
- _disposeGlassPane(): void {
- if (!this._glassPaneInUse) {
+ private disposeGlassPane(): void {
+ if (!this.glassPaneInUse) {
return;
}
- this._glassPaneInUse = false;
- if (--DragHandler._glassPaneUsageCount) {
+ this.glassPaneInUse = false;
+ if (--DragHandler.glassPaneUsageCount) {
return;
}
- if (DragHandler._glassPane) {
- DragHandler._glassPane.hide();
- DragHandler._glassPane = null;
+ if (DragHandler.glassPane) {
+ DragHandler.glassPane.hide();
+ DragHandler.glassPane = null;
}
- DragHandler._documentForMouseOut = null;
- DragHandler._rootForMouseOut = null;
+ DragHandler.documentForMouseOut = null;
+ DragHandler.rootForMouseOut = null;
}
elementDragStart(
@@ -207,7 +205,7 @@
return;
}
- if (this._elementDraggingEventListener) {
+ if (this.elementDraggingEventListener) {
return;
}
@@ -216,105 +214,105 @@
}
const targetDocument = (event.target instanceof Node && event.target.ownerDocument) as Document;
- this._elementDraggingEventListener = elementDrag;
- this._elementEndDraggingEventListener = elementDragEnd;
+ this.elementDraggingEventListener = elementDrag;
+ this.elementEndDraggingEventListener = elementDragEnd;
console.assert(
- (DragHandler._documentForMouseOut || targetDocument) === targetDocument, 'Dragging on multiple documents.');
- DragHandler._documentForMouseOut = targetDocument;
- DragHandler._rootForMouseOut = event.target instanceof Node && event.target.getRootNode() || null;
- this._dragEventsTargetDocument = targetDocument;
+ (DragHandler.documentForMouseOut || targetDocument) === targetDocument, 'Dragging on multiple documents.');
+ DragHandler.documentForMouseOut = targetDocument;
+ DragHandler.rootForMouseOut = event.target instanceof Node && event.target.getRootNode() || null;
+ this.dragEventsTargetDocument = targetDocument;
try {
if (targetDocument.defaultView) {
- this._dragEventsTargetDocumentTop = targetDocument.defaultView.top.document;
+ this.dragEventsTargetDocumentTop = targetDocument.defaultView.top.document;
}
} catch (e) {
- this._dragEventsTargetDocumentTop = this._dragEventsTargetDocument;
+ this.dragEventsTargetDocumentTop = this.dragEventsTargetDocument;
}
- targetDocument.addEventListener('mousemove', this._elementDragMove, true);
- targetDocument.addEventListener('mouseup', this._elementDragEnd, true);
- DragHandler._rootForMouseOut &&
- DragHandler._rootForMouseOut.addEventListener('mouseout', this._mouseOutWhileDragging, {capture: true});
- if (this._dragEventsTargetDocumentTop && targetDocument !== this._dragEventsTargetDocumentTop) {
- this._dragEventsTargetDocumentTop.addEventListener('mouseup', this._elementDragEnd, true);
+ targetDocument.addEventListener('mousemove', this.elementDragMove, true);
+ targetDocument.addEventListener('mouseup', this.elementDragEnd, true);
+ DragHandler.rootForMouseOut &&
+ DragHandler.rootForMouseOut.addEventListener('mouseout', this.mouseOutWhileDragging, {capture: true});
+ if (this.dragEventsTargetDocumentTop && targetDocument !== this.dragEventsTargetDocumentTop) {
+ this.dragEventsTargetDocumentTop.addEventListener('mouseup', this.elementDragEnd, true);
}
const targetHtmlElement = (targetElement as HTMLElement);
if (typeof cursor === 'string') {
- this._restoreCursorAfterDrag = restoreCursor.bind(this, targetHtmlElement.style.cursor);
+ this.restoreCursorAfterDrag = restoreCursor.bind(this, targetHtmlElement.style.cursor);
targetHtmlElement.style.cursor = cursor;
targetDocument.body.style.cursor = cursor;
}
function restoreCursor(this: DragHandler, oldCursor: string): void {
targetDocument.body.style.removeProperty('cursor');
targetHtmlElement.style.cursor = oldCursor;
- this._restoreCursorAfterDrag = undefined;
+ this.restoreCursorAfterDrag = undefined;
}
event.preventDefault();
}
- _mouseOutWhileDragging(): void {
- this._unregisterMouseOutWhileDragging();
- this._createGlassPane();
+ private mouseOutWhileDragging(): void {
+ this.unregisterMouseOutWhileDragging();
+ this.createGlassPane();
}
- _unregisterMouseOutWhileDragging(): void {
- if (!DragHandler._rootForMouseOut) {
+ private unregisterMouseOutWhileDragging(): void {
+ if (!DragHandler.rootForMouseOut) {
return;
}
- DragHandler._rootForMouseOut.removeEventListener('mouseout', this._mouseOutWhileDragging, {capture: true});
+ DragHandler.rootForMouseOut.removeEventListener('mouseout', this.mouseOutWhileDragging, {capture: true});
}
- _unregisterDragEvents(): void {
- if (!this._dragEventsTargetDocument) {
+ private unregisterDragEvents(): void {
+ if (!this.dragEventsTargetDocument) {
return;
}
- this._dragEventsTargetDocument.removeEventListener('mousemove', this._elementDragMove, true);
- this._dragEventsTargetDocument.removeEventListener('mouseup', this._elementDragEnd, true);
- if (this._dragEventsTargetDocumentTop && this._dragEventsTargetDocument !== this._dragEventsTargetDocumentTop) {
- this._dragEventsTargetDocumentTop.removeEventListener('mouseup', this._elementDragEnd, true);
+ this.dragEventsTargetDocument.removeEventListener('mousemove', this.elementDragMove, true);
+ this.dragEventsTargetDocument.removeEventListener('mouseup', this.elementDragEnd, true);
+ if (this.dragEventsTargetDocumentTop && this.dragEventsTargetDocument !== this.dragEventsTargetDocumentTop) {
+ this.dragEventsTargetDocumentTop.removeEventListener('mouseup', this.elementDragEnd, true);
}
- delete this._dragEventsTargetDocument;
- delete this._dragEventsTargetDocumentTop;
+ delete this.dragEventsTargetDocument;
+ delete this.dragEventsTargetDocumentTop;
}
- _elementDragMove(event: MouseEvent): void {
+ private elementDragMove(event: MouseEvent): void {
if (event.buttons !== 1) {
- this._elementDragEnd(event);
+ this.elementDragEnd(event);
return;
}
- if (this._elementDraggingEventListener && this._elementDraggingEventListener(event)) {
- this._cancelDragEvents(event);
+ if (this.elementDraggingEventListener && this.elementDraggingEventListener(event)) {
+ this.cancelDragEvents(event);
}
}
- _cancelDragEvents(_event: Event): void {
- this._unregisterDragEvents();
- this._unregisterMouseOutWhileDragging();
+ private cancelDragEvents(_event: Event): void {
+ this.unregisterDragEvents();
+ this.unregisterMouseOutWhileDragging();
- if (this._restoreCursorAfterDrag) {
- this._restoreCursorAfterDrag();
+ if (this.restoreCursorAfterDrag) {
+ this.restoreCursorAfterDrag();
}
- this._disposeGlassPane();
+ this.disposeGlassPane();
- delete this._elementDraggingEventListener;
- delete this._elementEndDraggingEventListener;
+ delete this.elementDraggingEventListener;
+ delete this.elementEndDraggingEventListener;
}
- _elementDragEnd(event: Event): void {
- const elementDragEnd = this._elementEndDraggingEventListener;
- this._cancelDragEvents((event as MouseEvent));
+ private elementDragEnd(event: Event): void {
+ const elementDragEnd = this.elementEndDraggingEventListener;
+ this.cancelDragEvents((event as MouseEvent));
event.preventDefault();
if (elementDragEnd) {
elementDragEnd((event as MouseEvent));
}
}
- static _glassPaneUsageCount = 0;
- static _glassPane: GlassPane|null = null;
- static _documentForMouseOut: Document|null = null;
- static _rootForMouseOut: Node|null = null;
+ private static glassPaneUsageCount = 0;
+ private static glassPane: GlassPane|null = null;
+ private static documentForMouseOut: Document|null = null;
+ private static rootForMouseOut: Node|null = null;
}
export function isBeingEdited(node?: Node|null): boolean {
@@ -643,23 +641,23 @@
}
export class ElementFocusRestorer {
- _element: HTMLElement|null;
- _previous: HTMLElement|null;
+ private element: HTMLElement|null;
+ private previous: HTMLElement|null;
constructor(element: Element) {
- this._element = (element as HTMLElement | null);
- this._previous = (element.ownerDocument.deepActiveElement() as HTMLElement | null);
+ this.element = (element as HTMLElement | null);
+ this.previous = (element.ownerDocument.deepActiveElement() as HTMLElement | null);
(element as HTMLElement).focus();
}
restore(): void {
- if (!this._element) {
+ if (!this.element) {
return;
}
- if (this._element.hasFocus() && this._previous) {
- this._previous.focus();
+ if (this.element.hasFocus() && this.previous) {
+ this.previous.focus();
}
- this._previous = null;
- this._element = null;
+ this.previous = null;
+ this.element = null;
}
}
@@ -865,36 +863,36 @@
}
class InvokeOnceHandlers {
- _handlers: Map<Object, Set<Function>>|null;
- _autoInvoke: boolean;
+ private handlers: Map<Object, Set<Function>>|null;
+ private readonly autoInvoke: boolean;
constructor(autoInvoke: boolean) {
- this._handlers = null;
- this._autoInvoke = autoInvoke;
+ this.handlers = null;
+ this.autoInvoke = autoInvoke;
}
add(object: Object, method: () => void): void {
- if (!this._handlers) {
- this._handlers = new Map();
- if (this._autoInvoke) {
+ if (!this.handlers) {
+ this.handlers = new Map();
+ if (this.autoInvoke) {
this.scheduleInvoke();
}
}
- let methods = this._handlers.get(object);
+ let methods = this.handlers.get(object);
if (!methods) {
methods = new Set();
- this._handlers.set(object, methods);
+ this.handlers.set(object, methods);
}
methods.add(method);
}
scheduleInvoke(): void {
- if (this._handlers) {
- requestAnimationFrame(this._invoke.bind(this));
+ if (this.handlers) {
+ requestAnimationFrame(this.invoke.bind(this));
}
}
- _invoke(): void {
- const handlers = this._handlers;
- this._handlers = null;
+ private invoke(): void {
+ const handlers = this.handlers;
+ this.handlers = null;
if (handlers) {
for (const [object, methods] of handlers) {
for (const method of methods) {
@@ -955,35 +953,35 @@
}
export class LongClickController extends Common.ObjectWrapper.ObjectWrapper {
- _element: Element;
- _callback: (arg0: Event) => void;
- _editKey: (arg0: Event) => boolean;
- _longClickData!: {
+ private readonly element: Element;
+ private readonly callback: (arg0: Event) => void;
+ private readonly editKey: (arg0: Event) => boolean;
+ private longClickData!: {
mouseUp: (arg0: Event) => void,
mouseDown: (arg0: Event) => void,
reset: () => void,
}|undefined;
- _longClickInterval!: number|undefined;
+ private longClickInterval!: number|undefined;
constructor(
element: Element, callback: (arg0: Event) => void,
isEditKeyFunc: (arg0: Event) => boolean = (event): boolean => isEnterOrSpaceKey(event)) {
super();
- this._element = element;
- this._callback = callback;
- this._editKey = isEditKeyFunc;
- this._enable();
+ this.element = element;
+ this.callback = callback;
+ this.editKey = isEditKeyFunc;
+ this.enable();
}
reset(): void {
- if (this._longClickInterval) {
- clearInterval(this._longClickInterval);
- delete this._longClickInterval;
+ if (this.longClickInterval) {
+ clearInterval(this.longClickInterval);
+ delete this.longClickInterval;
}
}
- _enable(): void {
- if (this._longClickData) {
+ private enable(): void {
+ if (this.longClickData) {
return;
}
const boundKeyDown = keyDown.bind(this);
@@ -992,24 +990,24 @@
const boundMouseUp = mouseUp.bind(this);
const boundReset = this.reset.bind(this);
- this._element.addEventListener('keydown', boundKeyDown, false);
- this._element.addEventListener('keyup', boundKeyUp, false);
- this._element.addEventListener('mousedown', boundMouseDown, false);
- this._element.addEventListener('mouseout', boundReset, false);
- this._element.addEventListener('mouseup', boundMouseUp, false);
- this._element.addEventListener('click', boundReset, true);
+ this.element.addEventListener('keydown', boundKeyDown, false);
+ this.element.addEventListener('keyup', boundKeyUp, false);
+ this.element.addEventListener('mousedown', boundMouseDown, false);
+ this.element.addEventListener('mouseout', boundReset, false);
+ this.element.addEventListener('mouseup', boundMouseUp, false);
+ this.element.addEventListener('click', boundReset, true);
- this._longClickData = {mouseUp: boundMouseUp, mouseDown: boundMouseDown, reset: boundReset};
+ this.longClickData = {mouseUp: boundMouseUp, mouseDown: boundMouseDown, reset: boundReset};
function keyDown(this: LongClickController, e: Event): void {
- if (this._editKey(e)) {
- const callback = this._callback;
- this._longClickInterval = window.setTimeout(callback.bind(null, e), LongClickController.TIME_MS);
+ if (this.editKey(e)) {
+ const callback = this.callback;
+ this.longClickInterval = window.setTimeout(callback.bind(null, e), LongClickController.TIME_MS);
}
}
function keyUp(this: LongClickController, e: Event): void {
- if (this._editKey(e)) {
+ if (this.editKey(e)) {
this.reset();
}
}
@@ -1018,8 +1016,8 @@
if ((e as MouseEvent).which !== 1) {
return;
}
- const callback = this._callback;
- this._longClickInterval = window.setTimeout(callback.bind(null, e), LongClickController.TIME_MS);
+ const callback = this.callback;
+ this.longClickInterval = window.setTimeout(callback.bind(null, e), LongClickController.TIME_MS);
}
function mouseUp(this: LongClickController, e: Event): void {
@@ -1031,14 +1029,14 @@
}
dispose(): void {
- if (!this._longClickData) {
+ if (!this.longClickData) {
return;
}
- this._element.removeEventListener('mousedown', this._longClickData.mouseDown, false);
- this._element.removeEventListener('mouseout', this._longClickData.reset, false);
- this._element.removeEventListener('mouseup', this._longClickData.mouseUp, false);
- this._element.addEventListener('click', this._longClickData.reset, true);
- delete this._longClickData;
+ this.element.removeEventListener('mousedown', this.longClickData.mouseDown, false);
+ this.element.removeEventListener('mouseout', this.longClickData.reset, false);
+ this.element.removeEventListener('mouseup', this.longClickData.mouseUp, false);
+ this.element.addEventListener('click', this.longClickData.reset, true);
+ delete this.longClickData;
}
static readonly TIME_MS = 200;
@@ -1174,29 +1172,29 @@
}
export class CheckboxLabel extends HTMLSpanElement {
- _shadowRoot!: DocumentFragment;
+ private readonly shadowRootInternal!: DocumentFragment;
checkboxElement!: HTMLInputElement;
textElement!: HTMLElement;
constructor() {
super();
- CheckboxLabel._lastId = CheckboxLabel._lastId + 1;
- const id = 'ui-checkbox-label' + CheckboxLabel._lastId;
- this._shadowRoot =
+ CheckboxLabel.lastId = CheckboxLabel.lastId + 1;
+ const id = 'ui-checkbox-label' + CheckboxLabel.lastId;
+ this.shadowRootInternal =
createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/checkboxTextLabel.css', delegatesFocus: undefined});
- this.checkboxElement = (this._shadowRoot.createChild('input') as HTMLInputElement);
+ this.checkboxElement = (this.shadowRootInternal.createChild('input') as HTMLInputElement);
this.checkboxElement.type = 'checkbox';
this.checkboxElement.setAttribute('id', id);
- this.textElement = this._shadowRoot.createChild('label', 'dt-checkbox-text') as HTMLElement;
+ this.textElement = this.shadowRootInternal.createChild('label', 'dt-checkbox-text') as HTMLElement;
this.textElement.setAttribute('for', id);
- this._shadowRoot.createChild('slot');
+ this.shadowRootInternal.createChild('slot');
}
static create(title?: string, checked?: boolean, subtitle?: string): CheckboxLabel {
- if (!CheckboxLabel._constructor) {
- CheckboxLabel._constructor = registerCustomElement('span', 'dt-checkbox', CheckboxLabel);
+ if (!CheckboxLabel.constructorInternal) {
+ CheckboxLabel.constructorInternal = registerCustomElement('span', 'dt-checkbox', CheckboxLabel);
}
- const element = (CheckboxLabel._constructor() as CheckboxLabel);
+ const element = (CheckboxLabel.constructorInternal() as CheckboxLabel);
element.checkboxElement.checked = Boolean(checked);
if (title !== undefined) {
element.textElement.textContent = title;
@@ -1217,7 +1215,7 @@
this.checkboxElement.classList.add('dt-checkbox-themed');
const stylesheet = document.createElement('style');
stylesheet.textContent = 'input.dt-checkbox-themed:checked:after { background-color: ' + color + '}';
- this._shadowRoot.appendChild(stylesheet);
+ this.shadowRootInternal.appendChild(stylesheet);
}
set borderColor(color: string) {
@@ -1225,12 +1223,12 @@
this.checkboxElement.style.borderColor = color;
}
- static _lastId = 0;
- static _constructor: (() => Element)|null = null;
+ private static lastId = 0;
+ static constructorInternal: (() => Element)|null = null;
}
export class DevToolsIconLabel extends HTMLSpanElement {
- _iconElement: Icon;
+ private readonly iconElement: Icon;
constructor() {
super();
@@ -1238,14 +1236,14 @@
cssFile: undefined,
delegatesFocus: undefined,
});
- this._iconElement = Icon.create();
- this._iconElement.style.setProperty('margin-right', '4px');
- root.appendChild(this._iconElement);
+ this.iconElement = Icon.create();
+ this.iconElement.style.setProperty('margin-right', '4px');
+ root.appendChild(this.iconElement);
root.createChild('slot');
}
set type(type: string) {
- this._iconElement.setIconType(type);
+ this.iconElement.setIconType(type);
}
}
@@ -1306,63 +1304,63 @@
registerCustomElement('span', 'dt-slider', DevToolsSlider);
export class DevToolsSmallBubble extends HTMLSpanElement {
- _textElement: Element;
+ private textElement: Element;
constructor() {
super();
const root =
createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/smallBubble.css', delegatesFocus: undefined});
- this._textElement = root.createChild('div');
- this._textElement.className = 'info';
- this._textElement.createChild('slot');
+ this.textElement = root.createChild('div');
+ this.textElement.className = 'info';
+ this.textElement.createChild('slot');
}
set type(type: string) {
- this._textElement.className = type;
+ this.textElement.className = type;
}
}
registerCustomElement('span', 'dt-small-bubble', DevToolsSmallBubble);
export class DevToolsCloseButton extends HTMLDivElement {
- _buttonElement: HTMLElement;
- _hoverIcon: Icon;
- _activeIcon: Icon;
+ private buttonElement: HTMLElement;
+ private readonly hoverIcon: Icon;
+ private readonly activeIcon: Icon;
constructor() {
super();
const root =
createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/closeButton.css', delegatesFocus: undefined});
- this._buttonElement = (root.createChild('div', 'close-button') as HTMLElement);
- ARIAUtils.setAccessibleName(this._buttonElement, i18nString(UIStrings.close));
- ARIAUtils.markAsButton(this._buttonElement);
+ this.buttonElement = (root.createChild('div', 'close-button') as HTMLElement);
+ ARIAUtils.setAccessibleName(this.buttonElement, i18nString(UIStrings.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');
- this._buttonElement.appendChild(regularIcon);
- this._buttonElement.appendChild(this._hoverIcon);
- this._buttonElement.appendChild(this._activeIcon);
+ this.hoverIcon = Icon.create('mediumicon-red-cross-hover', 'hover-icon');
+ this.activeIcon = Icon.create('mediumicon-red-cross-active', 'active-icon');
+ this.buttonElement.appendChild(regularIcon);
+ this.buttonElement.appendChild(this.hoverIcon);
+ this.buttonElement.appendChild(this.activeIcon);
}
set gray(gray: boolean) {
if (gray) {
- this._hoverIcon.setIconType('mediumicon-gray-cross-hover');
- this._activeIcon.setIconType('mediumicon-gray-cross-active');
+ this.hoverIcon.setIconType('mediumicon-gray-cross-hover');
+ this.activeIcon.setIconType('mediumicon-gray-cross-active');
} else {
- this._hoverIcon.setIconType('mediumicon-red-cross-hover');
- this._activeIcon.setIconType('mediumicon-red-cross-active');
+ this.hoverIcon.setIconType('mediumicon-red-cross-hover');
+ this.activeIcon.setIconType('mediumicon-red-cross-active');
}
}
setAccessibleName(name: string): void {
- ARIAUtils.setAccessibleName(this._buttonElement, name);
+ ARIAUtils.setAccessibleName(this.buttonElement, name);
}
setTabbable(tabbable: boolean): void {
if (tabbable) {
- this._buttonElement.tabIndex = 0;
+ this.buttonElement.tabIndex = 0;
} else {
- this._buttonElement.tabIndex = -1;
+ this.buttonElement.tabIndex = -1;
}
}
}
diff --git a/front_end/ui/legacy/View.ts b/front_end/ui/legacy/View.ts
index bbed602..0bffae4 100644
--- a/front_end/ui/legacy/View.ts
+++ b/front_end/ui/legacy/View.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import type {TabbedPane} from './TabbedPane.js';
import type {ToolbarItem, ToolbarMenuButton} from './Toolbar.js';
import {ViewManager} from './ViewManager.js';
@@ -26,18 +24,18 @@
}
export class SimpleView extends VBox implements View {
- _title: string;
+ private readonly titleInternal: string;
constructor(title: string, isWebComponent?: boolean) {
super(isWebComponent);
- this._title = title;
+ this.titleInternal = title;
}
viewId(): string {
- return this._title;
+ return this.titleInternal;
}
title(): string {
- return this._title;
+ return this.titleInternal;
}
isCloseable(): boolean {
diff --git a/front_end/ui/legacy/ViewManager.ts b/front_end/ui/legacy/ViewManager.ts
index ddad58b..6cb416a 100644
--- a/front_end/ui/legacy/ViewManager.ts
+++ b/front_end/ui/legacy/ViewManager.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
@@ -30,61 +28,61 @@
const str_ = i18n.i18n.registerUIStrings('ui/legacy/ViewManager.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class PreRegisteredView implements View {
- _viewRegistration: ViewRegistration;
- _widgetRequested: boolean;
+ private readonly viewRegistration: ViewRegistration;
+ private widgetRequested: boolean;
constructor(viewRegistration: ViewRegistration) {
- this._viewRegistration = viewRegistration;
- this._widgetRequested = false;
+ this.viewRegistration = viewRegistration;
+ this.widgetRequested = false;
}
title(): Common.UIString.LocalizedString {
- return this._viewRegistration.title();
+ return this.viewRegistration.title();
}
commandPrompt(): Common.UIString.LocalizedString {
- return this._viewRegistration.commandPrompt();
+ return this.viewRegistration.commandPrompt();
}
isCloseable(): boolean {
- return this._viewRegistration.persistence === ViewPersistence.CLOSEABLE;
+ return this.viewRegistration.persistence === ViewPersistence.CLOSEABLE;
}
isTransient(): boolean {
- return this._viewRegistration.persistence === ViewPersistence.TRANSIENT;
+ return this.viewRegistration.persistence === ViewPersistence.TRANSIENT;
}
viewId(): string {
- return this._viewRegistration.id;
+ return this.viewRegistration.id;
}
location(): ViewLocationValues|undefined {
- return this._viewRegistration.location;
+ return this.viewRegistration.location;
}
order(): number|undefined {
- return this._viewRegistration.order;
+ return this.viewRegistration.order;
}
settings(): string[]|undefined {
- return this._viewRegistration.settings;
+ return this.viewRegistration.settings;
}
tags(): string|undefined {
- if (this._viewRegistration.tags) {
+ if (this.viewRegistration.tags) {
// Get localized keys and separate by null character to prevent fuzzy matching from matching across them.
- return this._viewRegistration.tags.map(tag => tag()).join('\0');
+ return this.viewRegistration.tags.map(tag => tag()).join('\0');
}
return undefined;
}
persistence(): ViewPersistence|undefined {
- return this._viewRegistration.persistence;
+ return this.viewRegistration.persistence;
}
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
async toolbarItems(): Promise<any> {
- if (this._viewRegistration.hasToolbar) {
+ if (this.viewRegistration.hasToolbar) {
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return this.widget().then(widget => (widget as any).toolbarItems());
@@ -93,12 +91,12 @@
}
async widget(): Promise<Widget> {
- this._widgetRequested = true;
- return this._viewRegistration.loadView();
+ this.widgetRequested = true;
+ return this.viewRegistration.loadView();
}
async disposeView(): Promise<void> {
- if (!this._widgetRequested) {
+ if (!this.widgetRequested) {
return;
}
@@ -107,28 +105,28 @@
}
experiment(): string|undefined {
- return this._viewRegistration.experiment;
+ return this.viewRegistration.experiment;
}
condition(): string|undefined {
- return this._viewRegistration.condition;
+ return this.viewRegistration.condition;
}
}
let viewManagerInstance: ViewManager|undefined;
export class ViewManager {
- _views: Map<string, View>;
- _locationNameByViewId: Map<string, string>;
- _locationOverrideSetting: Common.Settings.Setting<{[key: string]: string}>;
+ readonly views: Map<string, View>;
+ private readonly locationNameByViewId: Map<string, string>;
+ private readonly locationOverrideSetting: Common.Settings.Setting<{[key: string]: string}>;
private constructor() {
- this._views = new Map();
- this._locationNameByViewId = new Map();
+ this.views = new Map();
+ this.locationNameByViewId = new Map();
// Read override setting for location
- this._locationOverrideSetting = Common.Settings.Settings.instance().createSetting('viewsLocationOverride', {});
- const preferredExtensionLocations = this._locationOverrideSetting.get();
+ this.locationOverrideSetting = Common.Settings.Settings.instance().createSetting('viewsLocationOverride', {});
+ const preferredExtensionLocations = this.locationOverrideSetting.get();
// Views may define their initial ordering within a location. When the user has not reordered, we use the
// default ordering as defined by the views themselves.
@@ -157,13 +155,13 @@
for (const view of sortedViewExtensions) {
const viewId = view.viewId();
const location = view.location();
- if (this._views.has(viewId)) {
+ if (this.views.has(viewId)) {
throw new Error(`Duplicate view id '${viewId}'`);
}
- this._views.set(viewId, view);
+ this.views.set(viewId, view);
// Use the preferred user location if available
const locationName = preferredExtensionLocations[viewId] || location;
- this._locationNameByViewId.set(viewId, locationName as string);
+ this.locationNameByViewId.set(viewId, locationName as string);
}
}
@@ -182,7 +180,7 @@
viewManagerInstance = undefined;
}
- static _createToolbar(toolbarItems: ToolbarItem[]): Element|null {
+ static createToolbar(toolbarItems: ToolbarItem[]): Element|null {
if (!toolbarItems.length) {
return null;
}
@@ -194,7 +192,7 @@
}
locationNameForViewId(viewId: string): string {
- const locationName = this._locationNameByViewId.get(viewId);
+ const locationName = this.locationNameByViewId.get(viewId);
if (!locationName) {
throw new Error(`No location name for view with id ${viewId}`);
}
@@ -221,12 +219,12 @@
if (!overrideSaving) {
// Update the inner map of locations
- this._locationNameByViewId.set(viewId, locationName);
+ this.locationNameByViewId.set(viewId, locationName);
// Update the settings of location overwrites
- const locations = this._locationOverrideSetting.get();
+ const locations = this.locationOverrideSetting.get();
locations[viewId] = locationName;
- this._locationOverrideSetting.set(locations);
+ this.locationOverrideSetting.set(locations);
}
// Find new location and show view there
@@ -234,7 +232,7 @@
if (!location) {
throw new Error('Move view: Could not resolve location for view: ' + viewId);
}
- location._reveal();
+ location.reveal();
return location.showView(view, undefined, /* userGesture*/ true, /* omitFocus*/ false, shouldSelectTab);
});
}
@@ -244,7 +242,7 @@
if (!location) {
return Promise.resolve();
}
- location._reveal();
+ location.reveal();
return location.showView(view);
}
@@ -259,7 +257,7 @@
}
view(viewId: string): View {
- const view = this._views.get(viewId);
+ const view = this.views.get(viewId);
if (!view) {
throw new Error(`No view with id ${viewId} found!`);
}
@@ -275,17 +273,17 @@
}
showView(viewId: string, userGesture?: boolean, omitFocus?: boolean): Promise<void> {
- const view = this._views.get(viewId);
+ const view = this.views.get(viewId);
if (!view) {
console.error('Could not find view for id: \'' + viewId + '\' ' + new Error().stack);
return Promise.resolve();
}
- const locationName = this._locationNameByViewId.get(viewId);
+ const locationName = this.locationNameByViewId.get(viewId);
const location = locationForView.get(view);
if (location) {
- location._reveal();
+ location.reveal();
return location.showView(view, undefined, userGesture, omitFocus);
}
@@ -293,14 +291,14 @@
if (!location) {
throw new Error('Could not resolve location for view: ' + viewId);
}
- location._reveal();
+ location.reveal();
return location.showView(view, undefined, userGesture, omitFocus);
});
}
- async resolveLocation(location?: string): Promise<_Location|null> {
+ async resolveLocation(location?: string): Promise<Location|null> {
if (!location) {
- return Promise.resolve(null) as Promise<_Location|null>;
+ return Promise.resolve(null) as Promise<Location|null>;
}
const registeredResolvers = getRegisteredLocationResolvers().filter(resolver => resolver.name === location);
@@ -309,7 +307,7 @@
}
if (registeredResolvers.length) {
const resolver = (await registeredResolvers[0].loadResolver() as ViewLocationResolver);
- return resolver.resolveLocation(location) as _Location | null;
+ return resolver.resolveLocation(location) as Location | null;
}
throw new Error('Unresolved location: ' + location);
}
@@ -325,13 +323,13 @@
}
hasViewsForLocation(location: string): boolean {
- return Boolean(this._viewsForLocation(location).length);
+ return Boolean(this.viewsForLocation(location).length);
}
- _viewsForLocation(location: string): View[] {
+ viewsForLocation(location: string): View[] {
const result = [];
- for (const [id, view] of this._views.entries()) {
- if (this._locationNameByViewId.get(id) === location) {
+ for (const [id, view] of this.views.entries()) {
+ if (this.locationNameByViewId.get(id) === location) {
result.push(view);
}
}
@@ -342,13 +340,13 @@
const widgetForView = new WeakMap<View, Widget>();
export class ContainerWidget extends VBox {
- _view: View;
- _materializePromise?: Promise<void[]>;
+ private readonly view: View;
+ private materializePromise?: Promise<void[]>;
constructor(view: View) {
super();
this.element.classList.add('flex-auto', 'view-container', 'overflow-auto');
- this._view = view;
+ this.view = view;
this.element.tabIndex = -1;
ARIAUtils.markAsTabpanel(this.element);
ARIAUtils.setAccessibleName(this.element, i18nString(UIStrings.sPanel, {PH1: view.title()}));
@@ -357,43 +355,43 @@
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _materialize(): Promise<any> {
- if (this._materializePromise) {
- return this._materializePromise;
+ materialize(): Promise<any> {
+ if (this.materializePromise) {
+ return this.materializePromise;
}
const promises = [];
// TODO(crbug.com/1006759): Transform to async-await
- promises.push(this._view.toolbarItems().then(toolbarItems => {
- const toolbarElement = ViewManager._createToolbar(toolbarItems);
+ promises.push(this.view.toolbarItems().then(toolbarItems => {
+ const toolbarElement = ViewManager.createToolbar(toolbarItems);
if (toolbarElement) {
this.element.insertBefore(toolbarElement, this.element.firstChild);
}
}));
- promises.push(this._view.widget().then(widget => {
+ promises.push(this.view.widget().then(widget => {
// Move focus from |this| to loaded |widget| if any.
const shouldFocus = this.element.hasFocus();
this.setDefaultFocusedElement(null);
- widgetForView.set(this._view, widget);
+ widgetForView.set(this.view, widget);
widget.show(this.element);
if (shouldFocus) {
widget.focus();
}
}));
- this._materializePromise = Promise.all(promises);
- return this._materializePromise;
+ this.materializePromise = Promise.all(promises);
+ return this.materializePromise;
}
wasShown(): void {
- this._materialize().then(() => {
- const widget = widgetForView.get(this._view);
+ this.materialize().then(() => {
+ const widget = widgetForView.get(this.view);
if (widget) {
widget.show(this.element);
- this._wasShownForTest();
+ this.wasShownForTest();
}
});
}
- _wasShownForTest(): void {
+ private wasShownForTest(): void {
// This method is sniffed in tests.
}
}
@@ -401,41 +399,41 @@
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
export class _ExpandableContainerWidget extends VBox {
- _titleElement: HTMLDivElement;
- _titleExpandIcon: Icon;
- _view: View;
- _widget?: Widget;
- _materializePromise?: Promise<void[]>;
+ private titleElement: HTMLDivElement;
+ private readonly titleExpandIcon: Icon;
+ private readonly view: View;
+ private widget?: Widget;
+ private materializePromise?: Promise<void[]>;
constructor(view: View) {
super(true);
this.element.classList.add('flex-none');
this.registerRequiredCSS('ui/legacy/viewContainers.css');
- this._titleElement = document.createElement('div');
- this._titleElement.classList.add('expandable-view-title');
- ARIAUtils.markAsButton(this._titleElement);
- this._titleExpandIcon = Icon.create('smallicon-triangle-right', 'title-expand-icon');
- this._titleElement.appendChild(this._titleExpandIcon);
+ this.titleElement = document.createElement('div');
+ this.titleElement.classList.add('expandable-view-title');
+ ARIAUtils.markAsButton(this.titleElement);
+ this.titleExpandIcon = Icon.create('smallicon-triangle-right', 'title-expand-icon');
+ this.titleElement.appendChild(this.titleExpandIcon);
const titleText = view.title();
- createTextChild(this._titleElement, titleText);
- 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);
+ createTextChild(this.titleElement, titleText);
+ 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);
- ARIAUtils.setControls(this._titleElement, this.contentElement.createChild('slot'));
- this._view = view;
+ ARIAUtils.setControls(this.titleElement, this.contentElement.createChild('slot'));
+ this.view = view;
expandableContainerForView.set(view, this);
}
wasShown(): void {
- if (this._widget && this._materializePromise) {
- this._materializePromise.then(() => {
- if (this._titleElement.classList.contains('expanded') && this._widget) {
- this._widget.show(this.element);
+ if (this.widget && this.materializePromise) {
+ this.materializePromise.then(() => {
+ if (this.titleElement.classList.contains('expanded') && this.widget) {
+ this.widget.show(this.element);
}
});
}
@@ -443,80 +441,80 @@
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _materialize(): Promise<any> {
- if (this._materializePromise) {
- return this._materializePromise;
+ private materialize(): Promise<any> {
+ if (this.materializePromise) {
+ return this.materializePromise;
}
// TODO(crbug.com/1006759): Transform to async-await
const promises = [];
- promises.push(this._view.toolbarItems().then(toolbarItems => {
- const toolbarElement = ViewManager._createToolbar(toolbarItems);
+ promises.push(this.view.toolbarItems().then(toolbarItems => {
+ const toolbarElement = ViewManager.createToolbar(toolbarItems);
if (toolbarElement) {
- this._titleElement.appendChild(toolbarElement);
+ this.titleElement.appendChild(toolbarElement);
}
}));
- promises.push(this._view.widget().then(widget => {
- this._widget = widget;
- widgetForView.set(this._view, widget);
+ promises.push(this.view.widget().then(widget => {
+ this.widget = widget;
+ widgetForView.set(this.view, widget);
widget.show(this.element);
}));
- this._materializePromise = Promise.all(promises);
- return this._materializePromise;
+ this.materializePromise = Promise.all(promises);
+ return this.materializePromise;
}
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _expand(): Promise<any> {
- if (this._titleElement.classList.contains('expanded')) {
- return this._materialize();
+ expand(): Promise<any> {
+ if (this.titleElement.classList.contains('expanded')) {
+ return this.materialize();
}
- this._titleElement.classList.add('expanded');
- ARIAUtils.setExpanded(this._titleElement, true);
- this._titleExpandIcon.setIconType('smallicon-triangle-down');
- return this._materialize().then(() => {
- if (this._widget) {
- this._widget.show(this.element);
+ this.titleElement.classList.add('expanded');
+ ARIAUtils.setExpanded(this.titleElement, true);
+ this.titleExpandIcon.setIconType('smallicon-triangle-down');
+ return this.materialize().then(() => {
+ if (this.widget) {
+ this.widget.show(this.element);
}
});
}
- _collapse(): void {
- if (!this._titleElement.classList.contains('expanded')) {
+ private collapse(): void {
+ if (!this.titleElement.classList.contains('expanded')) {
return;
}
- this._titleElement.classList.remove('expanded');
- ARIAUtils.setExpanded(this._titleElement, false);
- this._titleExpandIcon.setIconType('smallicon-triangle-right');
- this._materialize().then(() => {
- if (this._widget) {
- this._widget.detach();
+ this.titleElement.classList.remove('expanded');
+ ARIAUtils.setExpanded(this.titleElement, false);
+ this.titleExpandIcon.setIconType('smallicon-triangle-right');
+ this.materialize().then(() => {
+ if (this.widget) {
+ this.widget.detach();
}
});
}
- _toggleExpanded(event: Event): void {
- if (event.type === 'keydown' && event.target !== this._titleElement) {
+ private toggleExpanded(event: Event): void {
+ if (event.type === 'keydown' && event.target !== this.titleElement) {
return;
}
- if (this._titleElement.classList.contains('expanded')) {
- this._collapse();
+ if (this.titleElement.classList.contains('expanded')) {
+ this.collapse();
} else {
- this._expand();
+ this.expand();
}
}
- _onTitleKeyDown(event: Event): void {
- if (event.target !== this._titleElement) {
+ private onTitleKeyDown(event: Event): void {
+ if (event.target !== this.titleElement) {
return;
}
const keyEvent = (event as KeyboardEvent);
if (keyEvent.key === 'ArrowLeft') {
- this._collapse();
+ this.collapse();
} else if (keyEvent.key === 'ArrowRight') {
- if (!this._titleElement.classList.contains('expanded')) {
- this._expand();
- } else if (this._widget) {
- this._widget.focus();
+ if (!this.titleElement.classList.contains('expanded')) {
+ this.expand();
+ } else if (this.widget) {
+ this.widget.focus();
}
}
}
@@ -524,26 +522,24 @@
const expandableContainerForView = new WeakMap<View, _ExpandableContainerWidget>();
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-class _Location {
- _manager: ViewManager;
- _revealCallback: (() => void)|undefined;
- _widget: Widget;
+class Location {
+ protected readonly manager: ViewManager;
+ private readonly revealCallback: (() => void)|undefined;
+ private readonly widgetInternal: Widget;
constructor(manager: ViewManager, widget: Widget, revealCallback?: (() => void)) {
- this._manager = manager;
- this._revealCallback = revealCallback;
- this._widget = widget;
+ this.manager = manager;
+ this.revealCallback = revealCallback;
+ this.widgetInternal = widget;
}
widget(): Widget {
- return this._widget;
+ return this.widgetInternal;
}
- _reveal(): void {
- if (this._revealCallback) {
- this._revealCallback();
+ reveal(): void {
+ if (this.revealCallback) {
+ this.revealCallback();
}
}
@@ -558,24 +554,24 @@
}
}
-const locationForView = new WeakMap<View, _Location>();
+const locationForView = new WeakMap<View, Location>();
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
-export class _TabbedLocation extends _Location implements TabbedViewLocation {
- _tabbedPane: TabbedPane;
- _allowReorder: boolean|undefined;
+export class _TabbedLocation extends Location implements TabbedViewLocation {
+ private tabbedPaneInternal: TabbedPane;
+ private readonly allowReorder: boolean|undefined;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _closeableTabSetting: Common.Settings.Setting<any>;
+ private readonly closeableTabSetting: Common.Settings.Setting<any>;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _tabOrderSetting: Common.Settings.Setting<any>;
+ private readonly tabOrderSetting: Common.Settings.Setting<any>;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- _lastSelectedTabSetting: Common.Settings.Setting<any>|undefined;
- _defaultTab: string|null|undefined;
- _views: Map<string, View>;
+ private readonly lastSelectedTabSetting: Common.Settings.Setting<any>|undefined;
+ private readonly defaultTab: string|null|undefined;
+ private readonly views: Map<string, View>;
constructor(
manager: ViewManager, revealCallback?: (() => void), location?: string, restoreSelection?: boolean,
@@ -586,60 +582,60 @@
}
super(manager, tabbedPane, revealCallback);
- this._tabbedPane = tabbedPane;
- this._allowReorder = allowReorder;
+ this.tabbedPaneInternal = tabbedPane;
+ this.allowReorder = allowReorder;
- this._tabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this._tabSelected, this);
- this._tabbedPane.addEventListener(TabbedPaneEvents.TabClosed, this._tabClosed, this);
+ this.tabbedPaneInternal.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
+ this.tabbedPaneInternal.addEventListener(TabbedPaneEvents.TabClosed, this.tabClosed, this);
- this._closeableTabSetting = Common.Settings.Settings.instance().createSetting('closeableTabs', {});
+ this.closeableTabSetting = Common.Settings.Settings.instance().createSetting('closeableTabs', {});
// As we give tabs the capability to be closed we also need to add them to the setting so they are still open
// until the user decide to close them
- this._setOrUpdateCloseableTabsSetting();
+ this.setOrUpdateCloseableTabsSetting();
- this._tabOrderSetting = Common.Settings.Settings.instance().createSetting(location + '-tabOrder', {});
- this._tabbedPane.addEventListener(TabbedPaneEvents.TabOrderChanged, this._persistTabOrder, this);
+ this.tabOrderSetting = Common.Settings.Settings.instance().createSetting(location + '-tabOrder', {});
+ this.tabbedPaneInternal.addEventListener(TabbedPaneEvents.TabOrderChanged, this.persistTabOrder, this);
if (restoreSelection) {
- this._lastSelectedTabSetting = Common.Settings.Settings.instance().createSetting(location + '-selectedTab', '');
+ this.lastSelectedTabSetting = Common.Settings.Settings.instance().createSetting(location + '-selectedTab', '');
}
- this._defaultTab = defaultTab;
+ this.defaultTab = defaultTab;
- this._views = new Map();
+ this.views = new Map();
if (location) {
this.appendApplicableItems(location);
}
}
- _setOrUpdateCloseableTabsSetting(): void {
+ private setOrUpdateCloseableTabsSetting(): void {
// Update the setting value, we respect the closed state decided by the user
// and append the new tabs with value of true so they are shown open
const defaultOptionsForTabs = {'security': true};
- const tabs = this._closeableTabSetting.get();
+ const tabs = this.closeableTabSetting.get();
const newClosable = Object.assign(defaultOptionsForTabs, tabs);
- this._closeableTabSetting.set(newClosable);
+ this.closeableTabSetting.set(newClosable);
}
widget(): Widget {
- return this._tabbedPane;
+ return this.tabbedPaneInternal;
}
tabbedPane(): TabbedPane {
- return this._tabbedPane;
+ return this.tabbedPaneInternal;
}
enableMoreTabsButton(): ToolbarMenuButton {
- const moreTabsButton = new ToolbarMenuButton(this._appendTabsToMenu.bind(this));
- this._tabbedPane.leftToolbar().appendToolbarItem(moreTabsButton);
- this._tabbedPane.disableOverflowMenu();
+ const moreTabsButton = new ToolbarMenuButton(this.appendTabsToMenu.bind(this));
+ this.tabbedPaneInternal.leftToolbar().appendToolbarItem(moreTabsButton);
+ this.tabbedPaneInternal.disableOverflowMenu();
return moreTabsButton;
}
appendApplicableItems(locationName: string): void {
- const views = this._manager._viewsForLocation(locationName);
- if (this._allowReorder) {
+ const views = this.manager.viewsForLocation(locationName);
+ if (this.allowReorder) {
let i = 0;
- const persistedOrders = this._tabOrderSetting.get();
+ const persistedOrders = this.tabOrderSetting.get();
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const orders = new Map<string, any>();
@@ -651,40 +647,40 @@
for (const view of views) {
const id = view.viewId();
- this._views.set(id, view);
+ this.views.set(id, view);
locationForView.set(view, this);
if (view.isTransient()) {
continue;
}
if (!view.isCloseable()) {
- this._appendTab(view);
- } else if (this._closeableTabSetting.get()[id]) {
- this._appendTab(view);
+ this.appendTab(view);
+ } else if (this.closeableTabSetting.get()[id]) {
+ this.appendTab(view);
}
}
// If a default tab was provided we open or select it
- if (this._defaultTab) {
- if (this._tabbedPane.hasTab(this._defaultTab)) {
+ if (this.defaultTab) {
+ if (this.tabbedPaneInternal.hasTab(this.defaultTab)) {
// If the tabbed pane already has the tab we just have to select it
- this._tabbedPane.selectTab(this._defaultTab);
+ this.tabbedPaneInternal.selectTab(this.defaultTab);
} else {
// If the tab is not present already it can be because:
// it doesn't correspond to this tabbed location
// or because it is closed
- const view = Array.from(this._views.values()).find(view => view.viewId() === this._defaultTab);
+ const view = Array.from(this.views.values()).find(view => view.viewId() === this.defaultTab);
if (view) {
- // _defaultTab is indeed part of the views for this tabbed location
+ // defaultTab is indeed part of the views for this tabbed location
this.showView(view);
}
}
- } else if (this._lastSelectedTabSetting && this._tabbedPane.hasTab(this._lastSelectedTabSetting.get())) {
- this._tabbedPane.selectTab(this._lastSelectedTabSetting.get());
+ } else if (this.lastSelectedTabSetting && this.tabbedPaneInternal.hasTab(this.lastSelectedTabSetting.get())) {
+ this.tabbedPaneInternal.selectTab(this.lastSelectedTabSetting.get());
}
}
- _appendTabsToMenu(contextMenu: ContextMenu): void {
- const views = Array.from(this._views.values());
+ private appendTabsToMenu(contextMenu: ContextMenu): void {
+ const views = Array.from(this.views.values());
views.sort((viewa, viewb) => viewa.title().localeCompare(viewb.title()));
for (const view of views) {
const title = view.title();
@@ -701,14 +697,14 @@
}
}
- _appendTab(view: View, index?: number): void {
- this._tabbedPane.appendTab(
+ private appendTab(view: View, index?: number): void {
+ this.tabbedPaneInternal.appendTab(
view.viewId(), view.title(), new ContainerWidget(view), undefined, false,
view.isCloseable() || view.isTransient(), index);
}
appendView(view: View, insertBefore?: View|null): void {
- if (this._tabbedPane.hasTab(view.viewId())) {
+ if (this.tabbedPaneInternal.hasTab(view.viewId())) {
return;
}
const oldLocation = locationForView.get(view);
@@ -716,12 +712,12 @@
oldLocation.removeView(view);
}
locationForView.set(view, this);
- this._manager._views.set(view.viewId(), view);
- this._views.set(view.viewId(), view);
+ this.manager.views.set(view.viewId(), view);
+ this.views.set(view.viewId(), view);
let index: number|undefined = undefined;
- const tabIds = this._tabbedPane.tabIds();
- if (this._allowReorder) {
- const orderSetting = this._tabOrderSetting.get();
+ const tabIds = this.tabbedPaneInternal.tabIds();
+ if (this.allowReorder) {
+ const orderSetting = this.tabOrderSetting.get();
const order = orderSetting[view.viewId()];
for (let i = 0; order && i < tabIds.length; ++i) {
if (orderSetting[tabIds[i]] && orderSetting[tabIds[i]] > order) {
@@ -737,17 +733,17 @@
}
}
}
- this._appendTab(view, index);
+ this.appendTab(view, index);
if (view.isCloseable()) {
- const tabs = this._closeableTabSetting.get();
+ const tabs = this.closeableTabSetting.get();
const tabId = view.viewId();
if (!tabs[tabId]) {
tabs[tabId] = true;
- this._closeableTabSetting.set(tabs);
+ this.closeableTabSetting.set(tabs);
}
}
- this._persistTabOrder();
+ this.persistTabOrder();
}
async showView(
@@ -755,48 +751,48 @@
shouldSelectTab: boolean|undefined = true): Promise<void> {
this.appendView(view, insertBefore);
if (shouldSelectTab) {
- this._tabbedPane.selectTab(view.viewId(), userGesture);
+ this.tabbedPaneInternal.selectTab(view.viewId(), userGesture);
}
if (!omitFocus) {
- this._tabbedPane.focus();
+ this.tabbedPaneInternal.focus();
}
- const widget = (this._tabbedPane.tabView(view.viewId()) as ContainerWidget);
- await widget._materialize();
+ const widget = (this.tabbedPaneInternal.tabView(view.viewId()) as ContainerWidget);
+ await widget.materialize();
}
removeView(view: View): void {
- if (!this._tabbedPane.hasTab(view.viewId())) {
+ if (!this.tabbedPaneInternal.hasTab(view.viewId())) {
return;
}
locationForView.delete(view);
- this._manager._views.delete(view.viewId());
- this._tabbedPane.closeTab(view.viewId());
- this._views.delete(view.viewId());
+ this.manager.views.delete(view.viewId());
+ this.tabbedPaneInternal.closeTab(view.viewId());
+ this.views.delete(view.viewId());
}
- _tabSelected(event: Common.EventTarget.EventTargetEvent): void {
+ private tabSelected(event: Common.EventTarget.EventTargetEvent): void {
const tabId = (event.data.tabId as string);
- if (this._lastSelectedTabSetting && event.data['isUserGesture']) {
- this._lastSelectedTabSetting.set(tabId);
+ if (this.lastSelectedTabSetting && event.data['isUserGesture']) {
+ this.lastSelectedTabSetting.set(tabId);
}
}
- _tabClosed(event: Common.EventTarget.EventTargetEvent): void {
+ private tabClosed(event: Common.EventTarget.EventTargetEvent): void {
const id = (event.data['tabId'] as string);
- const tabs = this._closeableTabSetting.get();
+ const tabs = this.closeableTabSetting.get();
if (tabs[id]) {
tabs[id] = false;
- this._closeableTabSetting.set(tabs);
+ this.closeableTabSetting.set(tabs);
}
- const view = this._views.get(id);
+ const view = this.views.get(id);
if (view) {
view.disposeView();
}
}
- _persistTabOrder(): void {
- const tabIds = this._tabbedPane.tabIds();
+ private persistTabOrder(): void {
+ const tabIds = this.tabbedPaneInternal.tabIds();
const tabOrders: {
[x: string]: number,
} = {};
@@ -804,7 +800,7 @@
tabOrders[tabIds[i]] = (i + 1) * _TabbedLocation.orderStep;
}
- const oldTabOrder = this._tabOrderSetting.get();
+ const oldTabOrder = this.tabOrderSetting.get();
const oldTabArray = Object.keys(oldTabOrder);
oldTabArray.sort((a, b) => oldTabOrder[a] - oldTabOrder[b]);
let lastOrder = 0;
@@ -815,7 +811,7 @@
}
tabOrders[key] = ++lastOrder;
}
- this._tabOrderSetting.set(tabOrders);
+ this.tabOrderSetting.set(tabOrders);
}
static orderStep = 10; // Keep in sync with descriptors.
@@ -823,16 +819,16 @@
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
-class _StackLocation extends _Location implements ViewLocation {
- _vbox: VBox;
- _expandableContainers: Map<string, _ExpandableContainerWidget>;
+class _StackLocation extends Location implements ViewLocation {
+ private readonly vbox: VBox;
+ private readonly expandableContainers: Map<string, _ExpandableContainerWidget>;
constructor(manager: ViewManager, revealCallback?: (() => void), location?: string) {
const vbox = new VBox();
super(manager, vbox, revealCallback);
- this._vbox = vbox;
+ this.vbox = vbox;
- this._expandableContainers = new Map();
+ this.expandableContainers = new Map();
if (location) {
this.appendApplicableItems(location);
@@ -845,43 +841,43 @@
oldLocation.removeView(view);
}
- let container = this._expandableContainers.get(view.viewId());
+ let container = this.expandableContainers.get(view.viewId());
if (!container) {
locationForView.set(view, this);
- this._manager._views.set(view.viewId(), view);
+ this.manager.views.set(view.viewId(), view);
container = new _ExpandableContainerWidget(view);
let beforeElement: (WidgetElement|null)|null = null;
if (insertBefore) {
const beforeContainer = expandableContainerForView.get(insertBefore);
beforeElement = beforeContainer ? beforeContainer.element : null;
}
- container.show(this._vbox.contentElement, beforeElement);
- this._expandableContainers.set(view.viewId(), container);
+ container.show(this.vbox.contentElement, beforeElement);
+ this.expandableContainers.set(view.viewId(), container);
}
}
async showView(view: View, insertBefore?: View|null): Promise<void> {
this.appendView(view, insertBefore);
- const container = this._expandableContainers.get(view.viewId());
+ const container = this.expandableContainers.get(view.viewId());
if (container) {
- await container._expand();
+ await container.expand();
}
}
removeView(view: View): void {
- const container = this._expandableContainers.get(view.viewId());
+ const container = this.expandableContainers.get(view.viewId());
if (!container) {
return;
}
container.detach();
- this._expandableContainers.delete(view.viewId());
+ this.expandableContainers.delete(view.viewId());
locationForView.delete(view);
- this._manager._views.delete(view.viewId());
+ this.manager.views.delete(view.viewId());
}
appendApplicableItems(locationName: string): void {
- for (const view of this._manager._viewsForLocation(locationName)) {
+ for (const view of this.manager.viewsForLocation(locationName)) {
this.appendView(view);
}
}
diff --git a/front_end/ui/legacy/Widget.ts b/front_end/ui/legacy/Widget.ts
index 55cee4f..6cc0034 100644
--- a/front_end/ui/legacy/Widget.ts
+++ b/front_end/ui/legacy/Widget.ts
@@ -28,8 +28,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
import * as Helpers from '../components/helpers/helpers.js';
@@ -41,10 +39,10 @@
export class WidgetElement extends HTMLDivElement {
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
- // eslint-disable-next-line @typescript-eslint/naming-convention
+ // eslint-disable-next-line @typescript-eslint/naming-convention, rulesdir/no_underscored_properties
__widget!: Widget|null;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
- // eslint-disable-next-line @typescript-eslint/naming-convention
+ // eslint-disable-next-line @typescript-eslint/naming-convention, rulesdir/no_underscored_properties
__widgetCounter!: number|null;
constructor() {
super();
@@ -54,23 +52,23 @@
export class Widget extends Common.ObjectWrapper.ObjectWrapper {
element!: WidgetElement;
contentElement: HTMLDivElement;
- _shadowRoot: ShadowRoot|undefined;
- _isWebComponent: boolean|undefined;
- _visible: boolean;
- _isRoot: boolean;
- _isShowing: boolean;
- _children: Widget[];
- _hideOnDetach: boolean;
- _notificationDepth: number;
- _invalidationsSuspended: number;
- _defaultFocusedChild: Widget|null;
- _parentWidget: Widget|null;
- _registeredCSSFiles: boolean;
- _defaultFocusedElement?: Element|null;
- _cachedConstraints?: Constraints;
- _constraints?: Constraints;
- _invalidationsRequested?: boolean;
- _externallyManaged?: boolean;
+ private shadowRoot: ShadowRoot|undefined;
+ private readonly isWebComponent: boolean|undefined;
+ protected visibleInternal: boolean;
+ private isRoot: boolean;
+ private isShowingInternal: boolean;
+ private readonly childrenInternal: Widget[];
+ private hideOnDetach: boolean;
+ private notificationDepth: number;
+ private invalidationsSuspended: number;
+ defaultFocusedChild: Widget|null;
+ private parentWidgetInternal: Widget|null;
+ private registeredCSSFiles: boolean;
+ private defaultFocusedElement?: Element|null;
+ private cachedConstraints?: Constraints;
+ private constraintsInternal?: Constraints;
+ private invalidationsRequested?: boolean;
+ private externallyManaged?: boolean;
constructor(isWebComponent?: boolean, delegatesFocus?: boolean) {
super();
this.contentElement = document.createElement('div');
@@ -79,29 +77,29 @@
this.element = (document.createElement('div') as WidgetElement);
this.element.classList.add('vbox');
this.element.classList.add('flex-auto');
- this._shadowRoot = createShadowRootWithCoreStyles(this.element, {
+ this.shadowRoot = createShadowRootWithCoreStyles(this.element, {
cssFile: undefined,
delegatesFocus,
});
- this._shadowRoot.appendChild(this.contentElement);
+ this.shadowRoot.appendChild(this.contentElement);
} else {
this.element = (this.contentElement as WidgetElement);
}
- this._isWebComponent = isWebComponent;
+ this.isWebComponent = isWebComponent;
this.element.__widget = this;
- this._visible = false;
- this._isRoot = false;
- this._isShowing = false;
- this._children = [];
- this._hideOnDetach = false;
- this._notificationDepth = 0;
- this._invalidationsSuspended = 0;
- this._defaultFocusedChild = null;
- this._parentWidget = null;
- this._registeredCSSFiles = false;
+ this.visibleInternal = false;
+ this.isRoot = false;
+ this.isShowingInternal = false;
+ this.childrenInternal = [];
+ this.hideOnDetach = false;
+ this.notificationDepth = 0;
+ this.invalidationsSuspended = 0;
+ this.defaultFocusedChild = null;
+ this.parentWidgetInternal = null;
+ this.registeredCSSFiles = false;
}
- static _incrementWidgetCounter(parentElement: WidgetElement, childElement: WidgetElement): void {
+ private static incrementWidgetCounter(parentElement: WidgetElement, childElement: WidgetElement): void {
const count = (childElement.__widgetCounter || 0) + (childElement.__widget ? 1 : 0);
if (!count) {
return;
@@ -114,7 +112,7 @@
}
}
- static _decrementWidgetCounter(parentElement: WidgetElement, childElement: WidgetElement): void {
+ private static decrementWidgetCounter(parentElement: WidgetElement, childElement: WidgetElement): void {
const count = (childElement.__widgetCounter || 0) + (childElement.__widget ? 1 : 0);
if (!count) {
return;
@@ -131,40 +129,40 @@
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/naming-convention
- static __assert(condition: any, message: string): void {
+ private static assert(condition: any, message: string): void {
if (!condition) {
throw new Error(message);
}
}
markAsRoot(): void {
- Widget.__assert(!this.element.parentElement, 'Attempt to mark as root attached node');
- this._isRoot = true;
+ Widget.assert(!this.element.parentElement, 'Attempt to mark as root attached node');
+ this.isRoot = true;
}
parentWidget(): Widget|null {
- return this._parentWidget;
+ return this.parentWidgetInternal;
}
children(): Widget[] {
- return this._children;
+ return this.childrenInternal;
}
childWasDetached(_widget: Widget): void {
}
isShowing(): boolean {
- return this._isShowing;
+ return this.isShowingInternal;
}
shouldHideOnDetach(): boolean {
if (!this.element.parentElement) {
return false;
}
- if (this._hideOnDetach) {
+ if (this.hideOnDetach) {
return true;
}
- for (const child of this._children) {
+ for (const child of this.childrenInternal) {
if (child.shouldHideOnDetach()) {
return true;
}
@@ -173,75 +171,76 @@
}
setHideOnDetach(): void {
- this._hideOnDetach = true;
+ this.hideOnDetach = true;
}
- _inNotification(): boolean {
- return Boolean(this._notificationDepth) || Boolean(this._parentWidget && this._parentWidget._inNotification());
+ private inNotification(): boolean {
+ return Boolean(this.notificationDepth) ||
+ Boolean(this.parentWidgetInternal && this.parentWidgetInternal.inNotification());
}
- _parentIsShowing(): boolean {
- if (this._isRoot) {
+ private parentIsShowing(): boolean {
+ if (this.isRoot) {
return true;
}
- return this._parentWidget !== null && this._parentWidget.isShowing();
+ return this.parentWidgetInternal !== null && this.parentWidgetInternal.isShowing();
}
- _callOnVisibleChildren(method: (this: Widget) => void): void {
- const copy = this._children.slice();
+ protected callOnVisibleChildren(method: (this: Widget) => void): void {
+ const copy = this.childrenInternal.slice();
for (let i = 0; i < copy.length; ++i) {
- if (copy[i]._parentWidget === this && copy[i]._visible) {
+ if (copy[i].parentWidgetInternal === this && copy[i].visibleInternal) {
method.call(copy[i]);
}
}
}
- _processWillShow(): void {
- this._callOnVisibleChildren(this._processWillShow);
- this._isShowing = true;
+ private processWillShow(): void {
+ this.callOnVisibleChildren(this.processWillShow);
+ this.isShowingInternal = true;
}
- _processWasShown(): void {
- if (this._inNotification()) {
+ private processWasShown(): void {
+ if (this.inNotification()) {
return;
}
this.restoreScrollPositions();
- this._notify(this.wasShown);
- this._callOnVisibleChildren(this._processWasShown);
+ this.notify(this.wasShown);
+ this.callOnVisibleChildren(this.processWasShown);
}
- _processWillHide(): void {
- if (this._inNotification()) {
+ private processWillHide(): void {
+ if (this.inNotification()) {
return;
}
this.storeScrollPositions();
- this._callOnVisibleChildren(this._processWillHide);
- this._notify(this.willHide);
- this._isShowing = false;
+ this.callOnVisibleChildren(this.processWillHide);
+ this.notify(this.willHide);
+ this.isShowingInternal = false;
}
- _processWasHidden(): void {
- this._callOnVisibleChildren(this._processWasHidden);
+ private processWasHidden(): void {
+ this.callOnVisibleChildren(this.processWasHidden);
}
- _processOnResize(): void {
- if (this._inNotification()) {
+ private processOnResize(): void {
+ if (this.inNotification()) {
return;
}
if (!this.isShowing()) {
return;
}
- this._notify(this.onResize);
- this._callOnVisibleChildren(this._processOnResize);
+ this.notify(this.onResize);
+ this.callOnVisibleChildren(this.processOnResize);
}
- _notify(notification: (this: Widget) => void): void {
- ++this._notificationDepth;
+ private notify(notification: (this: Widget) => void): void {
+ ++this.notificationDepth;
try {
notification.call(this);
} finally {
- --this._notificationDepth;
+ --this.notificationDepth;
}
}
@@ -261,9 +260,9 @@
}
show(parentElement: Element, insertBefore?: Node|null): void {
- Widget.__assert(parentElement, 'Attempt to attach widget with no parent element');
+ Widget.assert(parentElement, 'Attempt to attach widget with no parent element');
- if (!this._isRoot) {
+ if (!this.isRoot) {
// Update widget hierarchy.
let currentParent: (WidgetElement|null) = (parentElement as WidgetElement | null);
while (currentParent && !currentParent.__widget) {
@@ -272,65 +271,64 @@
if (!currentParent || !currentParent.__widget) {
throw new Error('Attempt to attach widget to orphan node');
}
- this._attach(currentParent.__widget);
+ this.attach(currentParent.__widget);
}
- this._showWidget((parentElement as WidgetElement), insertBefore);
+ this.showWidgetInternal((parentElement as WidgetElement), insertBefore);
}
- _attach(parentWidget: Widget): void {
- if (parentWidget === this._parentWidget) {
+ private attach(parentWidget: Widget): void {
+ if (parentWidget === this.parentWidgetInternal) {
return;
}
- if (this._parentWidget) {
+ if (this.parentWidgetInternal) {
this.detach();
}
- /** @type {?Widget} */
- this._parentWidget = parentWidget;
- this._parentWidget._children.push(this);
- this._isRoot = false;
+ this.parentWidgetInternal = parentWidget;
+ this.parentWidgetInternal.childrenInternal.push(this);
+ this.isRoot = false;
}
showWidget(): void {
- if (this._visible) {
+ if (this.visibleInternal) {
return;
}
if (!this.element.parentElement) {
throw new Error('Attempt to show widget that is not hidden using hideWidget().');
}
- this._showWidget((this.element.parentElement as WidgetElement), this.element.nextSibling);
+ this.showWidgetInternal((this.element.parentElement as WidgetElement), this.element.nextSibling);
}
- _showWidget(parentElement: WidgetElement, insertBefore?: Node|null): void {
+ private showWidgetInternal(parentElement: WidgetElement, insertBefore?: Node|null): void {
let currentParent: (WidgetElement|null)|WidgetElement = parentElement;
while (currentParent && !currentParent.__widget) {
currentParent = parentWidgetElementOrShadowHost(currentParent);
}
- if (this._isRoot) {
- Widget.__assert(!currentParent, 'Attempt to show root widget under another widget');
+ if (this.isRoot) {
+ Widget.assert(!currentParent, 'Attempt to show root widget under another widget');
} else {
- Widget.__assert(
- currentParent && currentParent.__widget === this._parentWidget,
+ Widget.assert(
+ currentParent && currentParent.__widget === this.parentWidgetInternal,
'Attempt to show under node belonging to alien widget');
}
- const wasVisible = this._visible;
+ const wasVisible = this.visibleInternal;
if (wasVisible && this.element.parentElement === parentElement) {
return;
}
- this._visible = true;
+ this.visibleInternal = true;
- if (!wasVisible && this._parentIsShowing()) {
- this._processWillShow();
+ if (!wasVisible && this.parentIsShowing()) {
+ this.processWillShow();
}
this.element.classList.remove('hidden');
// Reparent
if (this.element.parentElement !== parentElement) {
- if (!this._externallyManaged) {
- Widget._incrementWidgetCounter(parentElement, this.element);
+ if (!this.externallyManaged) {
+ Widget.incrementWidgetCounter(parentElement, this.element);
}
if (insertBefore) {
DOMExtension.DOMExtension.originalInsertBefore.call(parentElement, this.element, insertBefore);
@@ -339,50 +337,50 @@
}
}
- if (!wasVisible && this._parentIsShowing()) {
- this._processWasShown();
+ if (!wasVisible && this.parentIsShowing()) {
+ this.processWasShown();
}
- if (this._parentWidget && this._hasNonZeroConstraints()) {
- this._parentWidget.invalidateConstraints();
+ if (this.parentWidgetInternal && this.hasNonZeroConstraints()) {
+ this.parentWidgetInternal.invalidateConstraints();
} else {
- this._processOnResize();
+ this.processOnResize();
}
}
hideWidget(): void {
- if (!this._visible) {
+ if (!this.visibleInternal) {
return;
}
- this._hideWidget(false);
+ this.hideWidgetInternal(false);
}
- _hideWidget(removeFromDOM: boolean): void {
- this._visible = false;
+ private hideWidgetInternal(removeFromDOM: boolean): void {
+ this.visibleInternal = false;
const parentElement = (this.element.parentElement as WidgetElement);
- if (this._parentIsShowing()) {
- this._processWillHide();
+ if (this.parentIsShowing()) {
+ this.processWillHide();
}
if (removeFromDOM) {
// Force legal removal
- Widget._decrementWidgetCounter(parentElement, this.element);
+ Widget.decrementWidgetCounter(parentElement, this.element);
DOMExtension.DOMExtension.originalRemoveChild.call(parentElement, this.element);
} else {
this.element.classList.add('hidden');
}
- if (this._parentIsShowing()) {
- this._processWasHidden();
+ if (this.parentIsShowing()) {
+ this.processWasHidden();
}
- if (this._parentWidget && this._hasNonZeroConstraints()) {
- this._parentWidget.invalidateConstraints();
+ if (this.parentWidgetInternal && this.hasNonZeroConstraints()) {
+ this.parentWidgetInternal.invalidateConstraints();
}
}
detach(overrideHideOnDetach?: boolean): void {
- if (!this._parentWidget && !this._isRoot) {
+ if (!this.parentWidgetInternal && !this.isRoot) {
return;
}
@@ -392,32 +390,32 @@
// overrideHideOnDetach will override hideOnDetach and the client takes
// responsibility for the consequences.
const removeFromDOM = overrideHideOnDetach || !this.shouldHideOnDetach();
- if (this._visible) {
- this._hideWidget(removeFromDOM);
+ if (this.visibleInternal) {
+ this.hideWidgetInternal(removeFromDOM);
} else if (removeFromDOM && this.element.parentElement) {
const parentElement = (this.element.parentElement as WidgetElement);
// Force kick out from DOM.
- Widget._decrementWidgetCounter(parentElement, this.element);
+ Widget.decrementWidgetCounter(parentElement, this.element);
DOMExtension.DOMExtension.originalRemoveChild.call(parentElement, this.element);
}
// Update widget hierarchy.
- if (this._parentWidget) {
- const childIndex = this._parentWidget._children.indexOf(this);
- Widget.__assert(childIndex >= 0, 'Attempt to remove non-child widget');
- this._parentWidget._children.splice(childIndex, 1);
- if (this._parentWidget._defaultFocusedChild === this) {
- this._parentWidget._defaultFocusedChild = null;
+ if (this.parentWidgetInternal) {
+ const childIndex = this.parentWidgetInternal.childrenInternal.indexOf(this);
+ Widget.assert(childIndex >= 0, 'Attempt to remove non-child widget');
+ this.parentWidgetInternal.childrenInternal.splice(childIndex, 1);
+ if (this.parentWidgetInternal.defaultFocusedChild === this) {
+ this.parentWidgetInternal.defaultFocusedChild = null;
}
- this._parentWidget.childWasDetached(this);
- this._parentWidget = null;
+ this.parentWidgetInternal.childWasDetached(this);
+ this.parentWidgetInternal = null;
} else {
- Widget.__assert(this._isRoot, 'Removing non-root widget from DOM');
+ Widget.assert(this.isRoot, 'Removing non-root widget from DOM');
}
}
detachChildWidgets(): void {
- const children = this._children.slice();
+ const children = this.childrenInternal.slice();
for (let i = 0; i < children.length; ++i) {
children[i].detach();
}
@@ -450,8 +448,8 @@
return;
}
// No matter what notification we are in, dispatching onResize is not needed.
- if (!this._inNotification()) {
- this._callOnVisibleChildren(this._processOnResize);
+ if (!this.inNotification()) {
+ this.callOnVisibleChildren(this.processOnResize);
}
}
@@ -459,13 +457,13 @@
if (!this.isShowing()) {
return;
}
- this._notify(this.onLayout);
+ this.notify(this.onLayout);
this.doResize();
}
registerRequiredCSS(cssFile: string): void {
- if (this._isWebComponent) {
- appendStyle((this._shadowRoot as DocumentFragment), cssFile);
+ if (this.isWebComponent) {
+ appendStyle((this.shadowRoot as DocumentFragment), cssFile);
} else {
appendStyle(this.element, cssFile);
}
@@ -473,40 +471,40 @@
registerCSSFiles(cssFiles: CSSStyleSheet[]): void {
let root: ShadowRoot|Document;
- if (this._isWebComponent && this._shadowRoot !== undefined) {
- root = this._shadowRoot;
+ if (this.isWebComponent && this.shadowRoot !== undefined) {
+ root = this.shadowRoot;
} else {
root = Helpers.GetRootNode.getRootNode(this.contentElement);
}
root.adoptedStyleSheets = root.adoptedStyleSheets.concat(cssFiles);
- this._registeredCSSFiles = true;
+ this.registeredCSSFiles = true;
}
printWidgetHierarchy(): void {
const lines: string[] = [];
- this._collectWidgetHierarchy('', lines);
+ this.collectWidgetHierarchy('', lines);
console.log(lines.join('\n')); // eslint-disable-line no-console
}
- _collectWidgetHierarchy(prefix: string, lines: string[]): void {
- lines.push(prefix + '[' + this.element.className + ']' + (this._children.length ? ' {' : ''));
+ private collectWidgetHierarchy(prefix: string, lines: string[]): void {
+ lines.push(prefix + '[' + this.element.className + ']' + (this.childrenInternal.length ? ' {' : ''));
- for (let i = 0; i < this._children.length; ++i) {
- this._children[i]._collectWidgetHierarchy(prefix + ' ', lines);
+ for (let i = 0; i < this.childrenInternal.length; ++i) {
+ this.childrenInternal[i].collectWidgetHierarchy(prefix + ' ', lines);
}
- if (this._children.length) {
+ if (this.childrenInternal.length) {
lines.push(prefix + '}');
}
}
setDefaultFocusedElement(element: Element|null): void {
- this._defaultFocusedElement = element;
+ this.defaultFocusedElement = element;
}
setDefaultFocusedChild(child: Widget): void {
- Widget.__assert(child._parentWidget === this, 'Attempt to set non-child widget as default focused.');
- this._defaultFocusedChild = child;
+ Widget.assert(child.parentWidgetInternal === this, 'Attempt to set non-child widget as default focused.');
+ this.defaultFocusedChild = child;
}
focus(): void {
@@ -514,7 +512,7 @@
return;
}
- const element = (this._defaultFocusedElement as HTMLElement | null);
+ const element = (this.defaultFocusedElement as HTMLElement | null);
if (element) {
if (!element.hasFocus()) {
element.focus();
@@ -522,11 +520,11 @@
return;
}
- if (this._defaultFocusedChild && this._defaultFocusedChild._visible) {
- this._defaultFocusedChild.focus();
+ if (this.defaultFocusedChild && this.defaultFocusedChild.visibleInternal) {
+ this.defaultFocusedChild.focus();
} else {
- for (const child of this._children) {
- if (child._visible) {
+ for (const child of this.childrenInternal) {
+ if (child.visibleInternal) {
child.focus();
return;
}
@@ -551,26 +549,26 @@
}
constraints(): Constraints {
- if (typeof this._constraints !== 'undefined') {
- return this._constraints;
+ if (typeof this.constraintsInternal !== 'undefined') {
+ return this.constraintsInternal;
}
- if (typeof this._cachedConstraints === 'undefined') {
- this._cachedConstraints = this.calculateConstraints();
+ if (typeof this.cachedConstraints === 'undefined') {
+ this.cachedConstraints = this.calculateConstraints();
}
- return this._cachedConstraints;
+ return this.cachedConstraints;
}
setMinimumAndPreferredSizes(width: number, height: number, preferredWidth: number, preferredHeight: number): void {
- this._constraints = new Constraints(new Size(width, height), new Size(preferredWidth, preferredHeight));
+ this.constraintsInternal = new Constraints(new Size(width, height), new Size(preferredWidth, preferredHeight));
this.invalidateConstraints();
}
setMinimumSize(width: number, height: number): void {
- this._constraints = new Constraints(new Size(width, height));
+ this.constraintsInternal = new Constraints(new Size(width, height));
this.invalidateConstraints();
}
- _hasNonZeroConstraints(): boolean {
+ private hasNonZeroConstraints(): boolean {
const constraints = this.constraints();
return Boolean(
constraints.minimum.width || constraints.minimum.height || constraints.preferred.width ||
@@ -578,43 +576,44 @@
}
suspendInvalidations(): void {
- ++this._invalidationsSuspended;
+ ++this.invalidationsSuspended;
}
resumeInvalidations(): void {
- --this._invalidationsSuspended;
- if (!this._invalidationsSuspended && this._invalidationsRequested) {
+ --this.invalidationsSuspended;
+ if (!this.invalidationsSuspended && this.invalidationsRequested) {
this.invalidateConstraints();
}
}
invalidateConstraints(): void {
- if (this._invalidationsSuspended) {
- this._invalidationsRequested = true;
+ if (this.invalidationsSuspended) {
+ this.invalidationsRequested = true;
return;
}
- this._invalidationsRequested = false;
- const cached = this._cachedConstraints;
- delete this._cachedConstraints;
+ this.invalidationsRequested = false;
+ const cached = this.cachedConstraints;
+ delete this.cachedConstraints;
const actual = this.constraints();
- if (!actual.isEqual(cached || null) && this._parentWidget) {
- this._parentWidget.invalidateConstraints();
+ if (!actual.isEqual(cached || null) && this.parentWidgetInternal) {
+ this.parentWidgetInternal.invalidateConstraints();
} else {
this.doLayout();
}
}
// Excludes the widget from being tracked by its parents/ancestors via
- // __widgetCounter because the widget is being handled by external code.
+ // widgetCounter because the widget is being handled by external code.
// Widgets marked as being externally managed are responsible for
// finishing out their own lifecycle (i.e. calling detach() before being
// removed from the DOM). This is e.g. used for CodeMirror.
//
// Also note that this must be called before the widget is shown so that
- // so that its ancestor's __widgetCounter is not incremented.
+ // so that its ancestor's widgetCounter is not incremented.
markAsExternallyManaged(): void {
- Widget.__assert(!this._parentWidget, 'Attempt to mark widget as externally managed after insertion to the DOM');
- this._externallyManaged = true;
+ Widget.assert(
+ !this.parentWidgetInternal, 'Attempt to mark widget as externally managed after insertion to the DOM');
+ this.externallyManaged = true;
}
}
@@ -638,7 +637,7 @@
constraints = constraints.addHeight(child);
}
- this._callOnVisibleChildren(updateForChild);
+ this.callOnVisibleChildren(updateForChild);
return constraints;
}
}
@@ -658,41 +657,41 @@
constraints = constraints.heightToMax(child);
}
- this._callOnVisibleChildren(updateForChild);
+ this.callOnVisibleChildren(updateForChild);
return constraints;
}
}
export class VBoxWithResizeCallback extends VBox {
- _resizeCallback: () => void;
+ private readonly resizeCallback: () => void;
constructor(resizeCallback: () => void) {
super();
- this._resizeCallback = resizeCallback;
+ this.resizeCallback = resizeCallback;
}
onResize(): void {
- this._resizeCallback();
+ this.resizeCallback();
}
}
export class WidgetFocusRestorer {
- _widget: Widget|null;
- _previous: HTMLElement|null;
+ private widget: Widget|null;
+ private previous: HTMLElement|null;
constructor(widget: Widget) {
- this._widget = widget;
- this._previous = (widget.element.ownerDocument.deepActiveElement() as HTMLElement | null);
+ this.widget = widget;
+ this.previous = (widget.element.ownerDocument.deepActiveElement() as HTMLElement | null);
widget.focus();
}
restore(): void {
- if (!this._widget) {
+ if (!this.widget) {
return;
}
- if (this._widget.hasFocus() && this._previous) {
- this._previous.focus();
+ if (this.widget.hasFocus() && this.previous) {
+ this.previous.focus();
}
- this._previous = null;
- this._widget = null;
+ this.previous = null;
+ this.widget = null;
}
}
diff --git a/front_end/ui/legacy/XElement.ts b/front_end/ui/legacy/XElement.ts
index 8f667a7..8ec6fb7 100644
--- a/front_end/ui/legacy/XElement.ts
+++ b/front_end/ui/legacy/XElement.ts
@@ -4,8 +4,6 @@
import * as ComponentHelpers from '../components/helpers/helpers.js';
-/* eslint-disable rulesdir/no_underscored_properties */
-
// eslint-disable-next-line rulesdir/check_component_naming
export class XElement extends HTMLElement {
static get observedAttributes(): string[] {
diff --git a/front_end/ui/legacy/XLink.ts b/front_end/ui/legacy/XLink.ts
index 747fd5a..bcdb831 100644
--- a/front_end/ui/legacy/XLink.ts
+++ b/front_end/ui/legacy/XLink.ts
@@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Host from '../../core/host/host.js';
import * as Platform from '../../core/platform/platform.js';
import * as ComponentHelpers from '../components/helpers/helpers.js';
@@ -19,10 +17,10 @@
tabIndex: number;
target: string;
rel: string;
- _href: string|null;
- _clickable: boolean;
- _onClick: (arg0: Event) => void;
- _onKeyDown: (arg0: Event) => void;
+ hrefInternal: string|null;
+ private clickable: boolean;
+ private readonly onClick: (arg0: Event) => void;
+ private readonly onKeyDown: (arg0: Event) => void;
static create(url: string, linkText?: string, className?: string, preventClick?: boolean): HTMLElement {
if (!linkText) {
linkText = url;
@@ -46,18 +44,18 @@
this.target = '_blank';
this.rel = 'noopener';
- this._href = null;
- this._clickable = true;
+ this.hrefInternal = null;
+ this.clickable = true;
- this._onClick = (event: Event): void => {
+ this. Event): void => {
event.consume(true);
- Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab((this._href as string));
+ Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab((this.hrefInternal as string));
this.dispatchEvent(new Event('x-link-invoke'));
};
- this._onKeyDown = (event: Event): void => {
+ this. Event): void => {
if (isEnterOrSpaceKey(event)) {
event.consume(true);
- Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab((this._href as string));
+ Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab((this.hrefInternal as string));
}
this.dispatchEvent(new Event('x-link-invoke'));
};
@@ -69,13 +67,13 @@
}
get href(): string|null {
- return this._href;
+ return this.hrefInternal;
}
attributeChangedCallback(attr: string, oldValue: string|null, newValue: string|null): void {
if (attr === 'no-click') {
- this._clickable = !newValue;
- this._updateClick();
+ this.clickable = !newValue;
+ this.updateClick();
return;
}
@@ -95,23 +93,23 @@
href = null;
}
- this._href = href;
+ this.hrefInternal = href;
Tooltip.install(this, newValue);
- this._updateClick();
+ this.updateClick();
return;
}
super.attributeChangedCallback(attr, oldValue, newValue);
}
- _updateClick(): void {
- if (this._href !== null && this._clickable) {
- this.addEventListener('click', this._onClick, false);
- this.addEventListener('keydown', this._onKeyDown, false);
+ private updateClick(): void {
+ if (this.hrefInternal !== null && this.clickable) {
+ this.addEventListener('click', this.onClick, false);
+ this.addEventListener('keydown', this.onKeyDown, false);
this.style.setProperty('cursor', 'pointer');
} else {
- this.removeEventListener('click', this._onClick, false);
- this.removeEventListener('keydown', this._onKeyDown, false);
+ this.removeEventListener('click', this.onClick, false);
+ this.removeEventListener('keydown', this.onKeyDown, false);
this.style.removeProperty('cursor');
}
}
@@ -136,18 +134,18 @@
while (targetNode && !(targetNode instanceof XLink)) {
targetNode = targetNode.parentNodeOrShadowHost();
}
- if (!targetNode || !targetNode._href) {
+ if (!targetNode || !targetNode.href) {
return;
}
const node: XLink = targetNode;
contextMenu.revealSection().appendItem(openLinkExternallyLabel(), () => {
- if (node._href) {
- Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(node._href);
+ if (node.href) {
+ Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(node.href);
}
});
contextMenu.revealSection().appendItem(copyLinkAddressLabel(), () => {
- if (node._href) {
- Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(node._href);
+ if (node.href) {
+ Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(node.href);
}
});
}
diff --git a/front_end/ui/legacy/XWidget.ts b/front_end/ui/legacy/XWidget.ts
index c8ef36a..f8eeec3 100644
--- a/front_end/ui/legacy/XWidget.ts
+++ b/front_end/ui/legacy/XWidget.ts
@@ -2,31 +2,25 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as ComponentHelpers from '../components/helpers/helpers.js';
import {appendStyle} from './utils/append-style.js';
import {XElement} from './XElement.js';
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-let _observer: ResizeObserver|null = null;
+let observer: ResizeObserver|null = null;
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _storedScrollPositions = new WeakMap<Element, {
+const storedScrollPositions = new WeakMap<Element, {
scrollLeft: number,
scrollTop: number,
}>();
export class XWidget extends XElement {
- _visible: boolean;
- _shadowRoot!: DocumentFragment|null;
- _defaultFocusedElement: Element|null;
- _elementsToRestoreScrollPositionsFor: Element[];
- _onShownCallback!: (() => void)|null;
- _onHiddenCallback!: (() => void)|null;
- _onResizedCallback!: (() => void)|null;
+ private visible: boolean;
+ private readonly shadowRootInternal!: DocumentFragment|null;
+ private defaultFocusedElement: Element|null;
+ private elementsToRestoreScrollPositionsFor: Element[];
+ private onShownCallback!: (() => void)|null;
+ private onHiddenCallback!: (() => void)|null;
+ private onResizedCallback!: (() => void)|null;
constructor() {
super();
@@ -36,59 +30,59 @@
this.style.setProperty('justify-content', 'flex-start');
this.style.setProperty('contain', 'layout style');
- this._visible = false;
- this._defaultFocusedElement = null;
- this._elementsToRestoreScrollPositionsFor = [];
+ this.visible = false;
+ this.defaultFocusedElement = null;
+ this.elementsToRestoreScrollPositionsFor = [];
- if (!_observer) {
- _observer = new ResizeObserver(entries => {
+ if (!observer) {
+ observer = new ResizeObserver(entries => {
for (const entry of entries) {
const widget = (entry.target as XWidget);
- if (widget._visible && widget._onResizedCallback) {
- widget._onResizedCallback.call(null);
+ if (widget.visible && widget.onResizedCallback) {
+ widget.onResizedCallback.call(null);
}
}
});
}
- _observer.observe(this);
+ observer.observe(this);
this.setElementsToRestoreScrollPositionsFor([this]);
}
isShowing(): boolean {
- return this._visible;
+ return this.visible;
}
registerRequiredCSS(cssFile: string): void {
- appendStyle(this._shadowRoot || this, cssFile);
+ appendStyle(this.shadowRootInternal || this, cssFile);
}
setOnShown(callback: (() => void)|null): void {
- this._onShownCallback = callback;
+ this.>
}
setOnHidden(callback: (() => void)|null): void {
- this._onHiddenCallback = callback;
+ this.>
}
setOnResized(callback: (() => void)|null): void {
- this._onResizedCallback = callback;
+ this.>
}
setElementsToRestoreScrollPositionsFor(elements: Element[]): void {
- for (const element of this._elementsToRestoreScrollPositionsFor) {
- element.removeEventListener('scroll', XWidget._storeScrollPosition, {capture: false});
+ for (const element of this.elementsToRestoreScrollPositionsFor) {
+ element.removeEventListener('scroll', XWidget.storeScrollPosition, {capture: false});
}
- this._elementsToRestoreScrollPositionsFor = elements;
- for (const element of this._elementsToRestoreScrollPositionsFor) {
- element.addEventListener('scroll', XWidget._storeScrollPosition, {passive: true, capture: false});
+ this.elementsToRestoreScrollPositionsFor = elements;
+ for (const element of this.elementsToRestoreScrollPositionsFor) {
+ element.addEventListener('scroll', XWidget.storeScrollPosition, {passive: true, capture: false});
}
}
restoreScrollPositions(): void {
- for (const element of this._elementsToRestoreScrollPositionsFor) {
- const storedPositions = _storedScrollPositions.get(element);
+ for (const element of this.elementsToRestoreScrollPositionsFor) {
+ const storedPositions = storedScrollPositions.get(element);
if (storedPositions) {
element.scrollTop = storedPositions.scrollTop;
element.scrollLeft = storedPositions.scrollLeft;
@@ -96,32 +90,32 @@
}
}
- static _storeScrollPosition(event: Event): void {
+ private static storeScrollPosition(event: Event): void {
const element = (event.currentTarget as Element);
- _storedScrollPositions.set(element, {scrollLeft: element.scrollLeft, scrollTop: element.scrollTop});
+ storedScrollPositions.set(element, {scrollLeft: element.scrollLeft, scrollTop: element.scrollTop});
}
setDefaultFocusedElement(element: Element|null): void {
if (element && !this.isSelfOrAncestor(element)) {
throw new Error('Default focus must be descendant');
}
- this._defaultFocusedElement = element;
+ this.defaultFocusedElement = element;
}
focus(): void {
- if (!this._visible) {
+ if (!this.visible) {
return;
}
let element;
- if (this._defaultFocusedElement && this.isSelfOrAncestor(this._defaultFocusedElement)) {
- element = this._defaultFocusedElement;
+ if (this.defaultFocusedElement && this.isSelfOrAncestor(this.defaultFocusedElement)) {
+ element = this.defaultFocusedElement;
} else if (this.tabIndex !== -1) {
element = this;
} else {
let child = this.traverseNextNode(this);
while (child) {
- if ((child instanceof XWidget) && child._visible) {
+ if ((child instanceof XWidget) && child.visible) {
element = child;
break;
}
@@ -140,17 +134,17 @@
}
connectedCallback(): void {
- this._visible = true;
+ this.visible = true;
this.restoreScrollPositions();
- if (this._onShownCallback) {
- this._onShownCallback.call(null);
+ if (this.onShownCallback) {
+ this.onShownCallback.call(null);
}
}
disconnectedCallback(): void {
- this._visible = false;
- if (this._onHiddenCallback) {
- this._onHiddenCallback.call(null);
+ this.visible = false;
+ if (this.onHiddenCallback) {
+ this.onHiddenCallback.call(null);
}
}
}
diff --git a/front_end/ui/legacy/ZoomManager.ts b/front_end/ui/legacy/ZoomManager.ts
index 2ee4a96..0cea79b 100644
--- a/front_end/ui/legacy/ZoomManager.ts
+++ b/front_end/ui/legacy/ZoomManager.ts
@@ -2,22 +2,20 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/* eslint-disable rulesdir/no_underscored_properties */
-
import * as Common from '../../core/common/common.js';
import type * as Host from '../../core/host/host.js';
let zoomManagerInstance: ZoomManager|undefined;
export class ZoomManager extends Common.ObjectWrapper.ObjectWrapper {
- _frontendHost: Host.InspectorFrontendHostAPI.InspectorFrontendHostAPI;
- _zoomFactor: number;
+ private frontendHost: Host.InspectorFrontendHostAPI.InspectorFrontendHostAPI;
+ private zoomFactorInternal: number;
private constructor(window: Window, frontendHost: Host.InspectorFrontendHostAPI.InspectorFrontendHostAPI) {
super();
- this._frontendHost = frontendHost;
- this._zoomFactor = this._frontendHost.zoomFactor();
- window.addEventListener('resize', this._onWindowResize.bind(this), true);
+ this.frontendHost = frontendHost;
+ this.zoomFactorInternal = this.frontendHost.zoomFactor();
+ window.addEventListener('resize', this.onWindowResize.bind(this), true);
}
static instance(opts: {
@@ -43,22 +41,22 @@
}
zoomFactor(): number {
- return this._zoomFactor;
+ return this.zoomFactorInternal;
}
cssToDIP(value: number): number {
- return value * this._zoomFactor;
+ return value * this.zoomFactorInternal;
}
dipToCSS(valueDIP: number): number {
- return valueDIP / this._zoomFactor;
+ return valueDIP / this.zoomFactorInternal;
}
- _onWindowResize(): void {
- const oldZoomFactor = this._zoomFactor;
- this._zoomFactor = this._frontendHost.zoomFactor();
- if (oldZoomFactor !== this._zoomFactor) {
- this.dispatchEventToListeners(Events.ZoomChanged, {from: oldZoomFactor, to: this._zoomFactor});
+ private onWindowResize(): void {
+ const oldZoomFactor = this.zoomFactorInternal;
+ this.zoomFactorInternal = this.frontendHost.zoomFactor();
+ if (oldZoomFactor !== this.zoomFactorInternal) {
+ this.dispatchEventToListeners(Events.ZoomChanged, {from: oldZoomFactor, to: this.zoomFactorInternal});
}
}
}
diff --git a/front_end/ui/legacy/utils/focus-changed.ts b/front_end/ui/legacy/utils/focus-changed.ts
index 8986755..de2581f 100644
--- a/front_end/ui/legacy/utils/focus-changed.ts
+++ b/front_end/ui/legacy/utils/focus-changed.ts
@@ -6,23 +6,25 @@
// eslint-disable-next-line @typescript-eslint/naming-convention
function WidgetfocusWidgetForNode(node: Node|null): void {
while (node) {
- // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- if ((node as any).__widget) {
+ if (node.__widget) {
break;
}
+
node = node.parentNodeOrShadowHost();
}
if (!node) {
return;
}
- // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- let widget = (node as any).__widget;
- while (widget._parentWidget) {
- widget._parentWidget._defaultFocusedChild = widget;
- widget = widget._parentWidget;
+ let widget = node.__widget;
+ while (widget && widget.parentWidget()) {
+ const parentWidget = widget.parentWidget();
+ if (!parentWidget) {
+ break;
+ }
+
+ parentWidget.defaultFocusedChild = widget;
+ widget = parentWidget;
}
}
@@ -37,7 +39,7 @@
if (widget) {
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- (node as any)._defaultFocusedElement = widget;
+ (node as any).defaultFocusedElement = widget;
}
widget = node;
}
diff --git a/test/unittests/front_end/ui/ViewLocation_test.ts b/test/unittests/front_end/ui/ViewLocation_test.ts
index ec95736..9770c74 100644
--- a/test/unittests/front_end/ui/ViewLocation_test.ts
+++ b/test/unittests/front_end/ui/ViewLocation_test.ts
@@ -42,11 +42,11 @@
});
it('Prepends a tab correctly', () => {
- const thirdTab = tabbedLocation.tabbedPane()._tabsById.get('third');
+ const thirdTab = tabbedLocation.tabbedPane().tabsById.get('third');
if (!thirdTab) {
throw new Error('Could not find a tab');
}
- tabbedLocation.tabbedPane()._insertBefore(thirdTab, 0);
+ tabbedLocation.tabbedPane().insertBefore(thirdTab, 0);
assert.deepEqual(tabbedLocation.tabbedPane().tabIds(), ['third', 'first', 'second']);
});
diff --git a/test/unittests/front_end/ui/legacy/SuggestBox_test.ts b/test/unittests/front_end/ui/legacy/SuggestBox_test.ts
index d037ba4..c59fc79 100644
--- a/test/unittests/front_end/ui/legacy/SuggestBox_test.ts
+++ b/test/unittests/front_end/ui/legacy/SuggestBox_test.ts
@@ -46,7 +46,7 @@
suggestBox = new UI.SuggestBox.SuggestBox(delegate);
// Needed to render the `SuggestBox`.
- UI.GlassPane.GlassPane.setContainer(suggestBox._element);
+ UI.GlassPane.GlassPane.setContainer(suggestBox.element);
});
afterEach(() => {
diff --git a/test/webtests/http/tests/devtools/a11y-axe-core/quick-open-a11y-test.js b/test/webtests/http/tests/devtools/a11y-axe-core/quick-open-a11y-test.js
index c1b53e4..6a2cec3 100644
--- a/test/webtests/http/tests/devtools/a11y-axe-core/quick-open-a11y-test.js
+++ b/test/webtests/http/tests/devtools/a11y-axe-core/quick-open-a11y-test.js
@@ -10,8 +10,8 @@
QuickOpen.QuickOpen.show('');
- const dialogWidget = UI.Dialog._instance._widget;
- const filteredListWidget = dialogWidget._defaultFocusedChild;
+ const dialogWidget = UI.Dialog.instance.widget();
+ const filteredListWidget = dialogWidget.defaultFocusedChild;
TestRunner.assertTrue(filteredListWidget instanceof QuickOpen.FilteredListWidget);
await AxeCoreTestRunner.runValidation(filteredListWidget.contentElement);
diff --git a/test/webtests/http/tests/devtools/a11y-axe-core/settings/blackbox-a11y-test.js b/test/webtests/http/tests/devtools/a11y-axe-core/settings/blackbox-a11y-test.js
index 7482a10..d8e0fb3 100644
--- a/test/webtests/http/tests/devtools/a11y-axe-core/settings/blackbox-a11y-test.js
+++ b/test/webtests/http/tests/devtools/a11y-axe-core/settings/blackbox-a11y-test.js
@@ -10,11 +10,11 @@
const ignoreListWidget = await UI.viewManager.view('blackbox').widget();
async function testAddPattern() {
- const addPatternButton = ignoreListWidget._defaultFocusedElement;
+ const addPatternButton = ignoreListWidget.defaultFocusedElement;
// Make add pattern editor visible
addPatternButton.click();
- const ignoreListInputs = ignoreListWidget.list._editor._controls;
+ const ignoreListInputs = ignoreListWidget.list.editor.controls;
TestRunner.addResult(`Opened input box: ${Boolean(ignoreListInputs)}`);
await AxeCoreTestRunner.runValidation(ignoreListWidget.contentElement);
@@ -22,17 +22,17 @@
async function testPatternList() {
ignoreListWidget.list.appendItem('test*', true);
- TestRunner.addResult(`Added a pattern in the list: ${ignoreListWidget.list._items}`);
+ TestRunner.addResult(`Added a pattern in the list: ${ignoreListWidget.list.items}`);
await AxeCoreTestRunner.runValidation(ignoreListWidget.contentElement);
}
async function testPatternError() {
- const ignoreListEditor = ignoreListWidget.list._editor;
- const patternInput = ignoreListEditor._controls[0];
+ const ignoreListEditor = ignoreListWidget.list.editor;
+ const patternInput = ignoreListEditor.controls[0];
// Blur patternInput to run validator
patternInput.blur();
- const errorMessage = ignoreListEditor._errorMessageContainer.textContent;
+ const errorMessage = ignoreListEditor.errorMessageContainer.textContent;
TestRunner.addResult(`Error message: ${errorMessage}`);
await AxeCoreTestRunner.runValidation(ignoreListWidget.contentElement);
diff --git a/test/webtests/http/tests/devtools/a11y-axe-core/settings/emulated-device-a11y-test.js b/test/webtests/http/tests/devtools/a11y-axe-core/settings/emulated-device-a11y-test.js
index f94d85b..ad44abd 100644
--- a/test/webtests/http/tests/devtools/a11y-axe-core/settings/emulated-device-a11y-test.js
+++ b/test/webtests/http/tests/devtools/a11y-axe-core/settings/emulated-device-a11y-test.js
@@ -8,11 +8,11 @@
const devicesWidget = await UI.viewManager.view('devices').widget();
async function testNewDeviceError() {
- const addDeviceButton = devicesWidget._defaultFocusedElement;
+ const addDeviceButton = devicesWidget.defaultFocusedElement;
addDeviceButton.click();
TestRunner.addResult('Invalidating the device pixel ratio');
- const editor = devicesWidget.list._editor;
+ const editor = devicesWidget.list.editor;
const title = editor.control('title');
const width = editor.control('width');
const height = editor.control('height');
@@ -23,7 +23,7 @@
scale.value = ' zzz.213213';
scale.dispatchEvent(new Event('input'));
- const errorMessage = devicesWidget.list._editor._errorMessageContainer.textContent;
+ const errorMessage = devicesWidget.list.editor.errorMessageContainer.textContent;
TestRunner.addResult(`Error message: ${errorMessage}`);
}
diff --git a/test/webtests/http/tests/devtools/a11y-axe-core/settings/locations-a11y-test.js b/test/webtests/http/tests/devtools/a11y-axe-core/settings/locations-a11y-test.js
index 725fe87..fcebbc1 100644
--- a/test/webtests/http/tests/devtools/a11y-axe-core/settings/locations-a11y-test.js
+++ b/test/webtests/http/tests/devtools/a11y-axe-core/settings/locations-a11y-test.js
@@ -10,18 +10,18 @@
const locationsWidget = await UI.viewManager.view('emulation-locations').widget();
async function testAddLocation() {
- const addLocationButton = locationsWidget._defaultFocusedElement;
+ const addLocationButton = locationsWidget.defaultFocusedElement;
addLocationButton.click();
- const newLocationInputs = locationsWidget.list._editor._controls;
+ const newLocationInputs = locationsWidget.list.editor.controls;
TestRunner.addResult(`Opened input box: ${Boolean(newLocationInputs)}`);
await AxeCoreTestRunner.runValidation(locationsWidget.contentElement);
}
async function testNewLocationError() {
- const locationsEditor = locationsWidget.list._editor;
- const newLocationInputs = locationsEditor._controls;
+ const locationsEditor = locationsWidget.list.editor;
+ const newLocationInputs = locationsEditor.controls;
const nameInput = newLocationInputs[0];
const latitudeInput = newLocationInputs[1];
const longitudeInput = newLocationInputs[2];
@@ -29,21 +29,21 @@
TestRunner.addResult(`Invalidating the ${nameInput.getAttribute('aria-label')} input`);
nameInput.blur();
- errorMessage = locationsEditor._errorMessageContainer.textContent;
+ errorMessage = locationsEditor.errorMessageContainer.textContent;
TestRunner.addResult(`Error message: ${errorMessage}`);
TestRunner.addResult(`Invalidating the ${latitudeInput.getAttribute('aria-label')} input`);
nameInput.value = 'location';
latitudeInput.value = 'a.a';
latitudeInput.dispatchEvent(new Event('input'));
- errorMessage = locationsEditor._errorMessageContainer.textContent;
+ errorMessage = locationsEditor.errorMessageContainer.textContent;
TestRunner.addResult(`Error message: ${errorMessage}`);
TestRunner.addResult(`Invalidating the ${longitudeInput.getAttribute('aria-label')} input`);
latitudeInput.value = '1.1';
longitudeInput.value = '1a.1';
longitudeInput.dispatchEvent(new Event('input'));
- errorMessage = locationsEditor._errorMessageContainer.textContent;
+ errorMessage = locationsEditor.errorMessageContainer.textContent;
TestRunner.addResult(`Error message: ${errorMessage}`);
await AxeCoreTestRunner.runValidation(locationsWidget.contentElement);
diff --git a/test/webtests/http/tests/devtools/a11y-axe-core/settings/menu-a11y-test.js b/test/webtests/http/tests/devtools/a11y-axe-core/settings/menu-a11y-test.js
index 522e3de..310ccc0 100644
--- a/test/webtests/http/tests/devtools/a11y-axe-core/settings/menu-a11y-test.js
+++ b/test/webtests/http/tests/devtools/a11y-axe-core/settings/menu-a11y-test.js
@@ -15,9 +15,8 @@
const tabbedPane = Settings.SettingsScreen.instance().tabbedLocation.tabbedPane();
// force tabs to update
- tabbedPane._innerUpdateTabElements();
+ tabbedPane.innerUpdateTabElements();
- await AxeCoreTestRunner.runValidation(
- [tabbedPane._headerElement, tabbedPane._tabsElement]);
+ await AxeCoreTestRunner.runValidation([tabbedPane.headerElement, tabbedPane.tabsElement]);
TestRunner.completeTest();
})();
diff --git a/test/webtests/http/tests/devtools/a11y-axe-core/settings/shortcuts-a11y-test.js b/test/webtests/http/tests/devtools/a11y-axe-core/settings/shortcuts-a11y-test.js
index 3eabd40..5176c15 100644
--- a/test/webtests/http/tests/devtools/a11y-axe-core/settings/shortcuts-a11y-test.js
+++ b/test/webtests/http/tests/devtools/a11y-axe-core/settings/shortcuts-a11y-test.js
@@ -14,7 +14,7 @@
// Open Shortcuts pane using context menu action
await UI.actionRegistry.action('settings.shortcuts').execute();
- const settingsPaneElement = Settings.SettingsScreen.instance().tabbedLocation._tabbedPane._contentElement;
+ const settingsPaneElement = Settings.SettingsScreen.instance().tabbedLocation.tabbedPane().contentElement;
await AxeCoreTestRunner.runValidation(settingsPaneElement);
}
diff --git a/test/webtests/http/tests/devtools/a11y-axe-core/sources/dom-breakpoints-pane-a11y-test.js b/test/webtests/http/tests/devtools/a11y-axe-core/sources/dom-breakpoints-pane-a11y-test.js
index 9fa1390..7d11092 100644
--- a/test/webtests/http/tests/devtools/a11y-axe-core/sources/dom-breakpoints-pane-a11y-test.js
+++ b/test/webtests/http/tests/devtools/a11y-axe-core/sources/dom-breakpoints-pane-a11y-test.js
@@ -14,8 +14,8 @@
TestRunner.addResult('Testing accessibility in the DOM breakpoints pane.');
// Expand the DOM Breakpoints container
- const domBreakpointContainer = UI.panels.sources.sidebarPaneStack._expandableContainers.get('sources.domBreakpoints');
- await domBreakpointContainer._expand();
+ const domBreakpointContainer = UI.panels.sources.sidebarPaneStack.expandableContainers.get('sources.domBreakpoints');
+ await domBreakpointContainer.expand();
TestRunner.addResult('Setting DOM breakpoints.');
const rootElement = await ElementsTestRunner.nodeWithIdPromise('rootElement');
diff --git a/test/webtests/http/tests/devtools/a11y-axe-core/sources/sources-editor-pane-a11y-test.js b/test/webtests/http/tests/devtools/a11y-axe-core/sources/sources-editor-pane-a11y-test.js
index 001eea0..25ee2f9 100644
--- a/test/webtests/http/tests/devtools/a11y-axe-core/sources/sources-editor-pane-a11y-test.js
+++ b/test/webtests/http/tests/devtools/a11y-axe-core/sources/sources-editor-pane-a11y-test.js
@@ -38,7 +38,7 @@
async function runTest() {
// Verify contents of the TabHeader to make sure files are open
const tabbedPane = UI.panels.sources.sourcesView().editorContainer.tabbedPane;
- const tabs = tabbedPane._tabs;
+ const tabs = tabbedPane.tabs;
TestRunner.addResult('All tabs:');
tabs.forEach(tab => TestRunner.addResult(tab.title));
TestRunner.addResult('\n');