chrome-devtools-frontend 1.0.920568 → 1.0.922044

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -150,8 +150,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   private readonly countersView: CountersGraph;
   private readonly detailsSplitWidget: UI.SplitWidget.SplitWidget;
   private readonly detailsView: TimelineDetailsView;
-  private readonly onMainEntrySelected: (event?: Common.EventTarget.EventTargetEvent) => void;
-  private readonly onNetworkEntrySelected: (event?: Common.EventTarget.EventTargetEvent) => void;
+  private readonly onMainEntrySelected: (event?: Common.EventTarget.EventTargetEvent<number>) => void;
+  private readonly onNetworkEntrySelected: (event?: Common.EventTarget.EventTargetEvent<number>) => void;
   private nextExtensionIndex: number;
   private readonly boundRefresh: () => void;
   private selectedTrack: TimelineModel.TimelineModel.Track|null;
@@ -361,9 +361,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainFlameChart.scheduleUpdate();
   }
 
-  private onEntryHighlighted(commonEvent: Common.EventTarget.EventTargetEvent): void {
+  private onEntryHighlighted(commonEvent: Common.EventTarget.EventTargetEvent<number>): void {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
-    const entryIndex = (commonEvent.data as number);
+    const entryIndex = commonEvent.data;
     const event = this.mainDataProvider.eventByIndex(entryIndex);
     if (!event) {
       return;

package/front_end/panels/timeline/TimelineLayersView.ts

@@ -63,13 +63,13 @@ export class TimelineLayersView extends UI.SplitWidget.SplitWidget {
     }
   }
 
-  private onPaintProfilerRequested(event: Common.EventTarget.EventTargetEvent): void {
-    const selection = (event.data as LayerViewer.LayerViewHost.Selection);
-    this.layers3DView.snapshotForSelection(selection).then(snapshotWithRect => {
-      if (snapshotWithRect) {
-        this.showPaintProfilerCallback(snapshotWithRect.snapshot);
-      }
-    });
+  private async onPaintProfilerRequested(
+      event: Common.EventTarget.EventTargetEvent<LayerViewer.LayerViewHost.Selection>): Promise<void> {
+    const selection = event.data;
+    const snapshotWithRect = await this.layers3DView.snapshotForSelection(selection);
+    if (snapshotWithRect) {
+      this.showPaintProfilerCallback(snapshotWithRect.snapshot);
+    }
   }
 
   private update(): void {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -448,7 +448,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.loader = TimelineLoader.loadFromEvents(events, this);
   }
 
-  private onOverviewWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onOverviewWindowChanged(
+      event: Common.EventTarget.EventTargetEvent<PerfUI.TimelineOverviewPane.WindowChangedEvent>): void {
     if (!this.performanceModel) {
       return;
     }
@@ -1246,11 +1247,11 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         this.loadFromURL(url);
       }
     } else if (item.kind === 'file') {
-      const entry = items[0].webkitGetAsEntry();
-      if (!entry.isFile) {
+      const file = items[0].getAsFile();
+      if (!file) {
         return;
       }
-      entry.file(this.loadFromFile.bind(this));
+      this.loadFromFile(file);
     }
   }
 }

package/front_end/ui/legacy/ARIAUtils.ts

@@ -108,6 +108,18 @@ export function markAsListitem(element: Element): void {
   element.setAttribute('role', 'listitem');
 }
 
+export function markAsMain(element: Element): void {
+  element.setAttribute('role', 'main');
+}
+
+export function markAsComplementary(element: Element): void {
+  element.setAttribute('role', 'complementary');
+}
+
+export function markAsNavigation(element: Element): void {
+  element.setAttribute('role', 'navigation');
+}
+
 /**
  * Must contain children whose role is option.
  */

package/front_end/ui/legacy/Fragment.ts

@@ -67,7 +67,7 @@ export class Fragment {
     const template = document.createElement('template');
     template.innerHTML = html;
     const walker = template.ownerDocument.createTreeWalker(
-        template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false);
+        template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null);
     let valueIndex = 0;
     const emptyTextNodes = [];
     const binds: Bind[] = [];

package/front_end/ui/legacy/InspectorView.ts

@@ -51,6 +51,7 @@ import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from
 import {ViewManager} from './ViewManager.js';
 import type {Widget} from './Widget.js';
 import {VBox, WidgetFocusRestorer} from './Widget.js';
+import * as ARIAUtils from './ARIAUtils.js';
 
 const UIStrings = {
   /**
@@ -97,6 +98,14 @@ const UIStrings = {
    * @example {German} PH1
    */
   setToSpecificLanguage: 'Switch DevTools to {PH1}',
+  /**
+  *@description The aria label for main toolbar
+  */
+  mainToolbar: 'Main toolbar',
+  /**
+  *@description The aria label for the drawer.
+  */
+  drawer: 'Tool drawer',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/InspectorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -142,6 +151,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.drawerTabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
     this.drawerTabbedPane.setTabDelegate(this.tabDelegate);
 
+    const drawerElement = this.drawerTabbedPane.element;
+    ARIAUtils.markAsComplementary(drawerElement);
+    ARIAUtils.setAccessibleName(drawerElement, i18nString(UIStrings.drawer));
+
     this.drawerSplitWidget.installResizer(this.drawerTabbedPane.headerElement());
     this.drawerSplitWidget.setSidebarWidget(this.drawerTabbedPane);
     this.drawerTabbedPane.rightToolbar().appendToolbarItem(closeDrawerButton);
@@ -159,6 +172,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.tabbedPane.setAccessibleName(i18nString(UIStrings.panels));
     this.tabbedPane.setTabDelegate(this.tabDelegate);
 
+    const mainHeaderElement = this.tabbedPane.headerElement();
+    ARIAUtils.markAsNavigation(mainHeaderElement);
+    ARIAUtils.setAccessibleName(mainHeaderElement, i18nString(UIStrings.mainToolbar));
+
     // Store the initial selected panel for use in launch histograms
     Host.userMetrics.setLaunchPanel(this.tabbedPane.selectedTabId);
 

package/front_end/ui/legacy/SplitWidget.ts

@@ -38,7 +38,7 @@ import {ToolbarButton} from './Toolbar.js';
 import {Widget} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
 
-export class SplitWidget extends Widget {
+export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
   private sidebarElementInternal: HTMLElement;
   private mainElement: HTMLElement;
   private resizerElementInternal: HTMLElement;
@@ -869,6 +869,11 @@ export enum Events {
   ShowModeChanged = 'ShowModeChanged',
 }
 
+export type EventTypes = {
+  [Events.SidebarSizeChanged]: number,
+  [Events.ShowModeChanged]: string,
+};
+
 const MinPadding = 20;
 export interface SettingForOrientation {
   showMode: string;

package/front_end/ui/legacy/TabbedPane.ts

@@ -204,6 +204,10 @@ export class TabbedPane extends VBox {
     return this.headerElementInternal;
   }
 
+  tabbedPaneContentElement(): Element {
+    return this.contentElementInternal;
+  }
+
   isTabCloseable(id: string): boolean {
     const tab = this.tabsById.get(id);
     return tab ? tab.isCloseable() : false;

package/front_end/ui/legacy/UIUtils.ts

@@ -219,7 +219,7 @@ class DragHandler {
     DragHandler.rootForMouseOut = event.target instanceof Node && event.target.getRootNode() || null;
     this.dragEventsTargetDocument = targetDocument;
     try {
-      if (targetDocument.defaultView) {
+      if (targetDocument.defaultView && targetDocument.defaultView.top) {
         this.dragEventsTargetDocumentTop = targetDocument.defaultView.top.document;
       }
     } catch (e) {

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -173,6 +173,11 @@
   display: block;
 }
 
+.data-grid th.sort-ascending,
+.data-grid th.sort-descending {
+  padding-right: 14px;
+}
+
 .data-grid th.sortable:hover {
   background-color: var(--color-background-highlight);
 }

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -1294,7 +1294,6 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
       {value: toIndex},
       {value: ArrayGroupingTreeElement.bucketThreshold},
       {value: ArrayGroupingTreeElement.sparseIterationThreshold},
-      {value: ArrayGroupingTreeElement.getOwnPropertyNamesThreshold},
     ]);
 
     await callback(jsonValue);
@@ -1303,22 +1302,19 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
      * Note: must declare params as optional.
      */
     function packRanges(
-        this: Object, fromIndex?: number, toIndex?: number, bucketThreshold?: number, sparseIterationThreshold?: number,
-        getOwnPropertyNamesThreshold?: number): {
+        this: Object, fromIndex?: number, toIndex?: number, bucketThreshold?: number,
+        sparseIterationThreshold?: number): {
       ranges: number[][],
-      skipGetOwnPropertyNames: boolean,
     }|undefined {
       if (fromIndex === undefined || toIndex === undefined || sparseIterationThreshold === undefined ||
-          getOwnPropertyNamesThreshold === undefined || bucketThreshold === undefined) {
+          bucketThreshold === undefined) {
         return;
       }
       let ownPropertyNames: string[]|null = null;
       const consecutiveRange = (toIndex - fromIndex >= sparseIterationThreshold) && ArrayBuffer.isView(this);
-      const skipGetOwnPropertyNames = consecutiveRange && (toIndex - fromIndex >= getOwnPropertyNamesThreshold);
 
       function* arrayIndexes(object: Object): Generator<number, void, unknown> {
-        if (fromIndex === undefined || toIndex === undefined || sparseIterationThreshold === undefined ||
-            getOwnPropertyNamesThreshold === undefined) {
+        if (fromIndex === undefined || toIndex === undefined || sparseIterationThreshold === undefined) {
           return;
         }
 
@@ -1345,8 +1341,10 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
       if (consecutiveRange) {
         count = toIndex - fromIndex + 1;
       } else {
-        for (const i of arrayIndexes(this))  // eslint-disable-line
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        for (const ignored of arrayIndexes(this)) {
           ++count;
+        }
       }
 
       let bucketSize: number = count;
@@ -1386,13 +1384,10 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
         }
       }
 
-      return {ranges: ranges, skipGetOwnPropertyNames: skipGetOwnPropertyNames};
+      return {ranges: ranges};
     }
 
-    async function callback(result: {
-      ranges: Array<Array<number>>,
-      skipGetOwnPropertyNames: boolean,
-    }|undefined): Promise<void> {
+    async function callback(result: {ranges: Array<Array<number>>}|undefined): Promise<void> {
       if (!result) {
         return;
       }
@@ -1418,8 +1413,7 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
       if (topLevel) {
         // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
         // @ts-ignore
-        await ArrayGroupingTreeElement.populateNonIndexProperties(
-            treeNode, object, result.skipGetOwnPropertyNames, linkifier);
+        await ArrayGroupingTreeElement.populateNonIndexProperties(treeNode, object, linkifier);
       }
     }
   }
@@ -1487,57 +1481,14 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
 
   private static async populateNonIndexProperties(
       this: ArrayGroupingTreeElement, treeNode: UI.TreeOutline.TreeElement, object: SDK.RemoteObject.RemoteObject,
-      skipGetOwnPropertyNames: boolean, linkifier?: Components.Linkifier.Linkifier): Promise<void> {
-    // The definition of callFunction expects an unknown, and setting to `any` causes Closure to fail.
-    // However, leaving this as unknown also causes TypeScript to fail, so for now we leave this as unchecked.
-    // @ts-ignore  TODO(crbug.com/1011811): Fix after Closure is removed.
-    const result = await object.callFunction(buildObjectFragment, [{value: skipGetOwnPropertyNames}]);
-    if (!result.object || result.wasThrown) {
-      return;
-    }
-    const allProperties = await result.object.getOwnProperties(true /* generatePreview */);
-    result.object.release();
-    if (!allProperties.properties) {
+      linkifier?: Components.Linkifier.Linkifier): Promise<void> {
+    const {properties, internalProperties} = await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(
+        object, true /* generatePreview */, true /* nonIndexedPropertiesOnly */);
+    if (!properties) {
       return;
     }
-    const properties = allProperties.properties;
-    properties.sort(ObjectPropertiesSection.compareProperties);
-    for (const property of properties) {
-      parentMap.set(property, this.object);
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if (!ObjectPropertiesSection.isDisplayableProperty(property, (treeNode as any).property)) {
-        continue;
-      }
-      const childTreeElement = new ObjectPropertyTreeElement(property, linkifier);
-      childTreeElement.readOnly = true;
-      treeNode.appendChild(childTreeElement);
-    }
-
-    function buildObjectFragment(this: Object, skipGetOwnPropertyNames?: boolean): {
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/naming-convention
-      __proto__: any,
-    } {
-      // @ts-ignore __proto__ exists on Object.
-      const result = {__proto__: this.__proto__};
-      if (skipGetOwnPropertyNames) {
-        return result;
-      }
-      const names = Object.getOwnPropertyNames(this);
-      for (let i = 0; i < names.length; ++i) {
-        const name = names[i];
-        // Array index check according to the ES5-15.4.
-        if (String(Number(name) >>> 0) === name && Number(name) >>> 0 !== 0xffffffff) {
-          continue;
-        }
-        const descriptor = Object.getOwnPropertyDescriptor(this, name);
-        if (descriptor) {
-          Object.defineProperty(result, name, descriptor);
-        }
-      }
-      return result;
-    }
+    ObjectPropertyTreeElement.populateWithProperties(
+        treeNode, properties, internalProperties, false, false, object, linkifier);
   }
 
   async onpopulate(): Promise<void> {
@@ -1557,7 +1508,6 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
 
   private static bucketThreshold = 100;
   private static sparseIterationThreshold = 250000;
-  private static getOwnPropertyNamesThreshold = 500000;
 }
 
 export class ObjectPropertyPrompt extends UI.TextPrompt.TextPrompt {

package/front_end/ui/legacy/components/perf_ui/FilmStripView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
@@ -33,7 +34,7 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/perf_ui/FilmStripView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class FilmStripView extends UI.Widget.HBox {
+export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.HBox>(UI.Widget.HBox) {
   private statusLabel: HTMLElement;
   private zeroTime!: number;
   private spanTime!: number;
@@ -195,6 +196,12 @@ export enum Events {
   FrameExit = 'FrameExit',
 }
 
+export type EventTypes = {
+  [Events.FrameSelected]: number,
+  [Events.FrameEnter]: number,
+  [Events.FrameExit]: number,
+};
+
 export const Modes = {
   TimeBased: 'TimeBased',
   FrameBased: 'FrameBased',

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -85,7 +85,8 @@ interface GroupExpansionState {
   [key: string]: boolean;
 }
 
-export class FlameChart extends UI.Widget.VBox implements Calculator, ChartViewportDelegate {
+export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements Calculator, ChartViewportDelegate {
   private readonly groupExpansionSetting?: Common.Settings.Setting<GroupExpansionState>;
   private groupExpansionState: GroupExpansionState;
   private readonly flameChartDelegate: FlameChartDelegate;
@@ -2321,6 +2322,13 @@ export enum Events {
   EntryHighlighted = 'EntryHighlighted',
 }
 
+export type EventTypes = {
+  [Events.CanvasFocused]: number|void,
+  [Events.EntryInvoked]: number,
+  [Events.EntrySelected]: number,
+  [Events.EntryHighlighted]: number,
+};
+
 export const Colors = {
   SelectedGroupBackground: 'hsl(215, 85%, 98%)',
   SelectedGroupBorder: 'hsl(216, 68%, 54%)',

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -36,7 +36,8 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import {Events as OverviewGridEvents, OverviewGrid} from './OverviewGrid.js';
 import type {Calculator} from './TimelineGrid.js';
 
-export class TimelineOverviewPane extends UI.Widget.VBox {
+export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
   private readonly overviewCalculator: TimelineOverviewCalculator;
   private readonly overviewGrid: OverviewGrid;
   private readonly cursorArea: HTMLElement;
@@ -255,6 +256,15 @@ export enum Events {
   WindowChanged = 'WindowChanged',
 }
 
+export interface WindowChangedEvent {
+  startTime: number;
+  endTime: number;
+}
+
+export type EventTypes = {
+  [Events.WindowChanged]: WindowChangedEvent,
+};
+
 export class TimelineOverviewCalculator implements Calculator {
   private minimumBoundaryInternal!: number;
   private maximumBoundaryInternal!: number;

package/front_end/ui/legacy/components/source_frame/ImageView.ts

@@ -236,8 +236,11 @@ export class ImageView extends UI.View.SimpleView {
       return;
     }
 
-    const entry = items[0].webkitGetAsEntry();
-    const encoded = !entry.name.endsWith('.svg');
+    const file = items[0].getAsFile();
+    if (!file) {
+      return;
+    }
+    const encoded = !file.name.endsWith('.svg');
     const fileCallback = (file: Blob): void => {
       const reader = new FileReader();
       reader.onloadend = (): void => {
@@ -259,6 +262,6 @@ export class ImageView extends UI.View.SimpleView {
         reader.readAsText(file);
       }
     };
-    entry.file(fileCallback);
+    fileCallback(file);
   }
 }