Files
react-native-devtools-frontend/front_end/panels/application/ApplicationPanelTreeElement.ts
T
Elorm Coch e730b99520 Reland "Improves voice accessibility for row elements in Network and application Panels."
Resolves regression: Text in network data grid appearing dull with up and down arrow navigation.

Update: The value for `isSelected` within backgroundColor() further checks if the active element is either the data grid element or within the data grid element.

Screenshot: https://i.imgur.com/VJVJynJ.gif

Reverts the revert commit 567afd4da6 -  "Revert "Improves voice accessibility for row elements in Network and application Panels."".

Bug: 1405151
Change-Id: I463881cd61eba9b4c81eb79a606ea8ec51c52c70
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4178572
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Sylvester Elorm Coch <elormcoch@microsoft.com>
2023-01-31 20:09:02 +00:00

95 lines
2.8 KiB
TypeScript

// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as Common from '../../core/common/common.js';
import type * as Platform from '../../core/platform/platform.js';
import * as UI from '../../ui/legacy/legacy.js';
import {type ResourcesPanel} from './ResourcesPanel.js';
export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
protected readonly resourcesPanel: ResourcesPanel;
constructor(resourcesPanel: ResourcesPanel, title: string, expandable: boolean) {
super(title, expandable);
this.resourcesPanel = resourcesPanel;
UI.ARIAUtils.setAccessibleName(this.listItemElement, title);
this.listItemElement.tabIndex = -1;
}
deselect(): void {
super.deselect();
this.listItemElement.tabIndex = -1;
}
get itemURL(): Platform.DevToolsPath.UrlString {
throw new Error('Unimplemented Method');
}
onselect(selectedByUser: boolean|undefined): boolean {
if (!selectedByUser) {
return false;
}
const path: Platform.DevToolsPath.UrlString[] = [];
for (let el: UI.TreeOutline.TreeElement|null = this; el; el = el.parent) {
const url = el instanceof ApplicationPanelTreeElement && el.itemURL;
if (!url) {
break;
}
path.push(url);
}
this.resourcesPanel.setLastSelectedItemPath(path);
return false;
}
showView(view: UI.Widget.Widget|null): void {
this.resourcesPanel.showView(view);
}
}
export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeElement {
protected readonly expandedSetting: Common.Settings.Setting<boolean>;
protected readonly categoryName: string;
protected categoryLink: Platform.DevToolsPath.UrlString|null;
constructor(resourcesPanel: ResourcesPanel, categoryName: string, settingsKey: string, settingsDefault = false) {
super(resourcesPanel, categoryName, false);
this.expandedSetting =
Common.Settings.Settings.instance().createSetting('resources' + settingsKey + 'Expanded', settingsDefault);
this.categoryName = categoryName;
this.categoryLink = null;
}
get itemURL(): Platform.DevToolsPath.UrlString {
return 'category://' + this.categoryName as Platform.DevToolsPath.UrlString;
}
setLink(link: Platform.DevToolsPath.UrlString): void {
this.categoryLink = link;
}
onselect(selectedByUser: boolean|undefined): boolean {
super.onselect(selectedByUser);
this.resourcesPanel.showCategoryView(this.categoryName, this.categoryLink);
return false;
}
onattach(): void {
super.onattach();
if (this.expandedSetting.get()) {
this.expand();
}
}
onexpand(): void {
this.expandedSetting.set(true);
}
oncollapse(): void {
this.expandedSetting.set(false);
}
}