chrome-devtools-frontend 1.0.1535712 → 1.0.1536371

package/docs/contributing/issues.md

@@ -48,10 +48,11 @@ to Markdown (with a preview below the text input box).
 1.  Replace `<from chrome://version/>` and `<OS version>` with the relevant
     version information.
 1.  Outline exact steps to reproduce the problem. Make sure to provide steps
-    that are easy and accessible. Ideally create a minified test case on
-    [glitch.com](http://glitch.com) or [GitHub](http://github.com). Also
-    make sure to include screenshots and videos that help us to reproduce
-    and understand the problem you are facing.
+    that are easy and accessible. Ideally create a [minimal, reproducible
+    example](https://stackoverflow.com/help/minimal-reproducible-example), e.g.
+    on [codepen.io](https://codepen.io), [jsbin.com](https://jsbin.com) or
+    [GitHub](https://github.com). Also make sure to include screenshots and
+    videos that help us to reproduce and understand the problem you are facing.
 
 ## Overview
 
@@ -173,25 +174,21 @@ DevTools we want to
 1. reduce the number of regressions that ship to the (Chrome) Stable channel, and
 2. reduce the number of bugs overall.
 
-The following SLOs (Service Level Objectives) apply to issues of type Bug,
-Vulnerability, and Privacy Issue. other types of issues such as Feature Request
-or Task are out of scope for SLOs (with the notable exception of Postmortem action
-items, where Chrome also enforces SLOs for non-bug issues). We also explicitly
-restrict these SLOs to bugs in [crbug], and are not concerned with bugs that are
-tracked in other places such as GitHub. Below is a high level summary of our SLOs
-(Googlers can check the [Chrome DevTools SLO Policy] and [Chrome SLO Policy] for
-more details):
+The following SLOs (Service Level Objectives) apply to issues of type "Bug",
+"Vulnerability", and "Privacy Issue". other types of issues such as "Feature
+Request" or "Task" are out of scope for SLOs (with the notable exception of
+Postmortem action items, where Chrome also enforces SLOs for non-bug issues).
+We also explicitly restrict these SLOs to bugs in [crbug], and are not concerned
+with bugs that are tracked in other places such as GitHub. Below is a high level
+summary of our SLOs (Googlers can check the [Chrome SLO Policy] for details):
 
 |      | Assignment     | Response           | Closure
 | ---- | -------------- | ------------------ | --------
 | `P0` | 1 business day | Every business day | 1 week
 | `P1` | 1 week         | 1 week             | 4 weeks
-| `P2` | 2 months       | -                  | 6 months
-| `P3` | 1 year         | -                  | -
 
-The first two rows are identical to [go/chrome-slo], with the last two rows being
-specific to Chrome DevTools. [crbug] provides a **Nearest SLO** column that
-surfaces SLO violations easily:
+These are identical to [go/chrome-slo]. [crbug] provides a **Nearest SLO**
+column that surfaces SLO violations easily:
 
 ![Nearest SLO in crbug](./images/issues-nearestslo.png "Nearest SLO in crbug")
 
@@ -200,7 +197,7 @@ surfaces SLO violations easily:
 
 ### Release Blocking Issues
 
-In accordance with go/chrome-slo there are special SLOs for issues that are
+In compliance with [go/chrome-slo] there are special SLOs for issues that are
 severe enough to block a release shipping to users (see [go/chrome-release-slos]).
 They apply to bug types in the same way as the above SLOs.
 
@@ -237,12 +234,11 @@ refreshed every 2-4 hours, to see SLO compliance for a given lead.
   [How to file a good browser bug]: https://web.dev/articles/how-to-file-a-good-bug
   [Open Chromium DevTools Bugs]: https://issues.chromium.org/issues?q=status:open%20componentid:1457055%2B%20type:bug
   [goo.gle/devtools-bug]: https://goo.gle/devtools-bug
-  [Chrome DevTools SLO Policy]: https://b.corp.google.com/slos/61348
-  [Chrome SLO Policy]: https://b.corp.google.com/slos/1834
+  [Chrome SLO Policy]: http://b/slos/1834
   [go/chrome-slo]: http://go/chrome-slo
   [go/chrome-release-slos]: http://go/chrome-release-slos
   [go/chrome-tooling/project-management]: http://go/chrome-tooling/project-management
-  [Buganizer SLO Compliance]: go/b-slo-compliance
+  [Buganizer SLO Compliance]: http://go/b-slo-compliance
   [TaskFlow]: http://go/chrome-devtools:taskflow
   [TaskFlow Inbox]: http://go/chrome-devtools:taskflow/inbox
   [Chromium>Platform>DevTools]: https://issues.chromium.org/components/1457055

package/front_end/core/common/Console.ts

@@ -8,14 +8,7 @@ import {reveal} from './Revealer.js';
 let consoleInstance: Console|undefined;
 
 export class Console extends ObjectWrapper<EventTypes> {
-  readonly #messages: Message[];
-  /**
-   * Instantiable via the instance() factory below.
-   */
-  constructor() {
-    super();
-    this.#messages = [];
-  }
+  readonly #messages: Message[] = [];
 
   static instance(opts?: {forceNew: boolean}): Console {
     if (!consoleInstance || opts?.forceNew) {

package/front_end/core/common/ParsedURL.ts

@@ -57,33 +57,23 @@ type BrandedPathString =
     Platform.DevToolsPath.UrlString|Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.EncodedPathString;
 
 export class ParsedURL {
-  isValid: boolean;
+  isValid = false;
   url: string;
-  scheme: string;
-  user: string;
-  host: string;
-  port: string;
-  path: string;
-  queryParams: string;
-  fragment: string;
-  folderPathComponents: string;
-  lastPathComponent: string;
+  scheme = '';
+  user = '';
+  host = '';
+  port = '';
+  path = '';
+  queryParams = '';
+  fragment = '';
+  folderPathComponents = '';
+  lastPathComponent = '';
   readonly blobInnerScheme: string|undefined;
   #displayName?: string;
   #dataURLDisplayName?: string;
 
   constructor(url: string) {
-    this.isValid = false;
     this.url = url;
-    this.scheme = '';
-    this.user = '';
-    this.host = '';
-    this.port = '';
-    this.path = '';
-    this.queryParams = '';
-    this.fragment = '';
-    this.folderPathComponents = '';
-    this.lastPathComponent = '';
 
     const isBlobUrl = this.url.startsWith('blob:');
     const urlToMatch = isBlobUrl ? url.substring(5) : url;

package/front_end/core/common/SegmentedRange.ts

@@ -24,11 +24,10 @@ export class Segment<T> {
 }
 
 export class SegmentedRange<T> {
-  #segments: Array<Segment<T>>;
+  #segments: Array<Segment<T>> = [];
   readonly #mergeCallback: ((arg0: Segment<T>, arg1: Segment<T>) => Segment<T>| null)|undefined;
 
   constructor(mergeCallback?: ((arg0: Segment<T>, arg1: Segment<T>) => Segment<T>| null)) {
-    this.#segments = [];
     this.#mergeCallback = mergeCallback;
   }
 

package/front_end/core/common/StringOutputStream.ts

@@ -8,10 +8,7 @@ export interface OutputStream {
 }
 
 export class StringOutputStream implements OutputStream {
-  #data: string;
-  constructor() {
-    this.#data = '';
-  }
+  #data = '';
 
   async write(chunk: string): Promise<void> {
     this.#data += chunk;

package/front_end/core/i18n/i18nImpl.ts

@@ -1,7 +1,6 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as I18n from '../../third_party/i18n/i18n.js';
 import type * as Platform from '../platform/platform.js';
@@ -117,29 +116,6 @@ export function registerUIStrings(
   return i18nInstance.registerFileStrings(path, stringStructure);
 }
 
-/**
- * Returns a span element that may contains other DOM element as placeholders
- */
-export function getFormatLocalizedString(
-    registeredStrings: I18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
-    placeholders: Record<string, Object>): HTMLSpanElement {
-  const formatter =
-      registeredStrings.getLocalizedStringSetFor(DevToolsLocale.instance().locale).getMessageFormatterFor(stringId);
-
-  const element = document.createElement('span');
-  for (const icuElement of formatter.getAst()) {
-    if (icuElement.type === /* argumentElement */ 1) {
-      const placeholderValue = placeholders[icuElement.value];
-      if (placeholderValue) {
-        element.append(placeholderValue as Node | string);
-      }
-    } else if ('value' in icuElement) {
-      element.append(String(icuElement.value));
-    }
-  }
-  return element;
-}
-
 export function serializeUIString(string: string, values: Record<string, Object> = {}): string {
   const serializedMessage = {string, values};
   return JSON.stringify(serializedMessage);

package/front_end/core/sdk/AnimationModel.ts

@@ -836,12 +836,11 @@ export class AnimationGroup {
   readonly #id: string;
   #scrollNode: AnimationDOMNode|undefined;
   #animations: AnimationImpl[];
-  #paused: boolean;
+  #paused = false;
   constructor(animationModel: AnimationModel, id: string, animations: AnimationImpl[]) {
     this.#animationModel = animationModel;
     this.#id = id;
     this.#animations = animations;
-    this.#paused = false;
   }
 
   isScrollDriven(): boolean {

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -361,7 +361,7 @@ export class CSSMatchedStyles {
       inheritedResult.matchedCSSRules = cleanUserAgentPayload(inheritedResult.matchedCSSRules);
     }
 
-    this.#environmentVariables = await this.cssModel().getEnvironmentVariales();
+    this.#environmentVariables = await this.cssModel().getEnvironmentVariables();
 
     this.#mainDOMCascade = await this.buildMainCascade(
         inlinePayload, attributesPayload, matchedPayload, inheritedPayload, animationStylesPayload,
@@ -450,7 +450,7 @@ export class CSSMatchedStyles {
     nodeCascades.push(new NodeCascade(this, nodeStyles, this.#node, false /* #isInherited */));
 
     // Walk the node structure and identify styles with inherited properties.
-    let parentNode: (DOMNode|null) = this.#node.parentNode;
+    let parentNode: DOMNode|null = this.#node.parentNode;
     const traverseParentInFlatTree = async(node: DOMNode): Promise<DOMNode|null> => {
       if (node.hasAssignedSlot()) {
         return await node.assignedSlot?.deferredNode.resolvePromise() ?? null;

package/front_end/core/sdk/CSSModel.ts

@@ -407,7 +407,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     };
   }
 
-  async getEnvironmentVariales(): Promise<Record<string, string>> {
+  async getEnvironmentVariables(): Promise<Record<string, string>> {
     const response = await this.agent.invoke_getEnvironmentVariables();
     if (response.getError()) {
       return {};

package/front_end/core/sdk/CSSProperty.ts

@@ -41,9 +41,9 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   implicit: boolean;
   text: string|null|undefined;
   range: TextUtils.TextRange.TextRange|null;
-  #active: boolean;
-  #nameRange: TextUtils.TextRange.TextRange|null;
-  #valueRange: TextUtils.TextRange.TextRange|null;
+  #active = true;
+  #nameRange: TextUtils.TextRange.TextRange|null = null;
+  #valueRange: TextUtils.TextRange.TextRange|null = null;
   #invalidString?: Common.UIString.LocalizedString;
   #longhandProperties: CSSProperty[] = [];
 
@@ -62,9 +62,6 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.implicit = implicit;  // A longhand, implicitly set by missing values of shorthand.
     this.text = text;
     this.range = range ? TextUtils.TextRange.TextRange.fromObject(range) : null;
-    this.#active = true;
-    this.#nameRange = null;
-    this.#valueRange = null;
 
     if (longhandProperties && longhandProperties.length > 0) {
       for (const property of longhandProperties) {

package/front_end/core/sdk/CSSStyleDeclaration.ts

@@ -14,14 +14,14 @@ import type {Target} from './Target.js';
 export class CSSStyleDeclaration {
   readonly #cssModel: CSSModel;
   parentRule: CSSRule|null;
-  #allProperties!: CSSProperty[];
+  #allProperties: CSSProperty[] = [];
   styleSheetId?: Protocol.CSS.StyleSheetId;
-  range!: TextUtils.TextRange.TextRange|null;
+  range: TextUtils.TextRange.TextRange|null = null;
   cssText?: string;
   #shorthandValues = new Map<string, string>();
   #shorthandIsImportant = new Set<string>();
   #activePropertyMap = new Map<string, CSSProperty>();
-  #leadingProperties!: CSSProperty[]|null;
+  #leadingProperties: CSSProperty[]|null = null;
   type: Type;
   // For CSSStyles coming from animations,
   // This holds the name of the animation.
@@ -97,7 +97,7 @@ export class CSSStyleDeclaration {
     this.#computeInactiveProperties();
 
     // TODO(changhaohan): verify if this #activePropertyMap is still necessary, or if it is
-    // providing different information against the activeness in allPropertiesInternal.
+    // providing different information against the activeness in #allProperties.
     this.#activePropertyMap = new Map();
     for (const property of this.#allProperties) {
       if (!property.activeInStyle()) {

package/front_end/core/sdk/DebuggerModel.ts

@@ -1402,14 +1402,13 @@ export class Scope implements ScopeChainEntry {
   readonly #name: string|undefined;
   #ordinal: number;
   readonly #locationRange: LocationRange|null;
-  #object: RemoteObject|null;
+  #object: RemoteObject|null = null;
   constructor(callFrame: CallFrame, ordinal: number) {
     this.#callFrame = callFrame;
     this.#payload = callFrame.getPayload().scopeChain[ordinal];
     this.#type = this.#payload.type;
     this.#name = this.#payload.name;
     this.#ordinal = ordinal;
-    this.#object = null;
 
     const start =
         this.#payload.startLocation ? Location.fromPayload(callFrame.debuggerModel, this.#payload.startLocation) : null;

package/front_end/core/sdk/EnhancedTracesParser.ts

@@ -164,6 +164,10 @@ export class EnhancedTracesParser {
           if (frame.url === 'about:blank') {
             continue;
           }
+          if (!frame.isInPrimaryMainFrame) {
+            continue;
+          }
+
           const frameId = frame.frame as string as Protocol.Target.TargetID;
           if (!this.#targets.find(target => target.targetId === frameId)) {
             const frameType = frame.isOutermostMainFrame ? 'page' : 'iframe';

package/front_end/core/sdk/SourceMap.ts

@@ -128,7 +128,7 @@ export class SourceMap {
   readonly #compiledURL: Platform.DevToolsPath.UrlString;
   readonly #sourceMappingURL: Platform.DevToolsPath.UrlString;
   readonly #baseURL: Platform.DevToolsPath.UrlString;
-  #mappings: SourceMapEntry[]|null;
+  #mappings: SourceMapEntry[]|null = null;
 
   readonly #sourceInfos: SourceInfo[] = [];
   readonly #sourceInfoByURL = new Map<Platform.DevToolsPath.UrlString, SourceInfo>();
@@ -154,7 +154,6 @@ export class SourceMap {
     this.#baseURL = (Common.ParsedURL.schemeIs(sourceMappingURL, 'data:')) ? compiledURL : sourceMappingURL;
     this.#debugId = 'debugId' in payload ? (payload.debugId as DebugId | undefined) : undefined;
 
-    this.#mappings = null;
     if ('sections' in this.#json) {
       if (this.#json.sections.find(section => 'url' in section)) {
         Common.Console.Console.instance().warn(
@@ -435,7 +434,7 @@ export class SourceMap {
   #computeReverseMappings(mappings: SourceMapEntry[]): void {
     const reverseMappingsPerUrl = new Map<Platform.DevToolsPath.UrlString, number[]>();
     for (let i = 0; i < mappings.length; i++) {
-      const entryUrl = mappings[i].sourceURL;
+      const entryUrl = mappings[i]?.sourceURL;
       if (!entryUrl) {
         continue;
       }

package/front_end/entrypoints/node_app/NodeConnectionsPanel.ts

@@ -7,6 +7,7 @@ import type * 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 Buttons from '../../ui/components/buttons/buttons.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import nodeConnectionsPanelStyles from './nodeConnectionsPanel.css.js';
@@ -97,7 +98,7 @@ export class NodeConnectionsView extends UI.Widget.VBox implements UI.ListWidget
         'https://nodejs.org/en/docs/inspector/', i18nString(UIStrings.nodejsDebuggingGuide), undefined, undefined,
         'node-js-debugging');
     networkDiscoveryFooter.appendChild(
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.specifyNetworkEndpointAnd, {PH1: documentationLink}));
+        uiI18n.getFormatLocalizedString(str_, UIStrings.specifyNetworkEndpointAnd, {PH1: documentationLink}));
 
     this.#list = new UI.ListWidget.ListWidget(this);
     this.#list.registerRequiredCSS(nodeConnectionsPanelStyles);

package/front_end/generated/InspectorBackendCommands.js

@@ -1340,8 +1340,7 @@ inspectorBackend.registerType("SystemInfo.GPUDevice", [{"name": "vendorId", "typ
 inspectorBackend.registerType("SystemInfo.Size", [{"name": "width", "type": "number", "optional": false, "description": "Width in pixels.", "typeRef": null}, {"name": "height", "type": "number", "optional": false, "description": "Height in pixels.", "typeRef": null}]);
 inspectorBackend.registerType("SystemInfo.VideoDecodeAcceleratorCapability", [{"name": "profile", "type": "string", "optional": false, "description": "Video codec profile that is supported, e.g. VP9 Profile 2.", "typeRef": null}, {"name": "maxResolution", "type": "object", "optional": false, "description": "Maximum video dimensions in pixels supported for this |profile|.", "typeRef": "SystemInfo.Size"}, {"name": "minResolution", "type": "object", "optional": false, "description": "Minimum video dimensions in pixels supported for this |profile|.", "typeRef": "SystemInfo.Size"}]);
 inspectorBackend.registerType("SystemInfo.VideoEncodeAcceleratorCapability", [{"name": "profile", "type": "string", "optional": false, "description": "Video codec profile that is supported, e.g H264 Main.", "typeRef": null}, {"name": "maxResolution", "type": "object", "optional": false, "description": "Maximum video dimensions in pixels supported for this |profile|.", "typeRef": "SystemInfo.Size"}, {"name": "maxFramerateNumerator", "type": "number", "optional": false, "description": "Maximum encoding framerate in frames per second supported for this |profile|, as fraction's numerator and denominator, e.g. 24/1 fps, 24000/1001 fps, etc.", "typeRef": null}, {"name": "maxFramerateDenominator", "type": "number", "optional": false, "description": "", "typeRef": null}]);
-inspectorBackend.registerType("SystemInfo.ImageDecodeAcceleratorCapability", [{"name": "imageType", "type": "string", "optional": false, "description": "Image coded, e.g. Jpeg.", "typeRef": "SystemInfo.ImageType"}, {"name": "maxDimensions", "type": "object", "optional": false, "description": "Maximum supported dimensions of the image in pixels.", "typeRef": "SystemInfo.Size"}, {"name": "minDimensions", "type": "object", "optional": false, "description": "Minimum supported dimensions of the image in pixels.", "typeRef": "SystemInfo.Size"}, {"name": "subsamplings", "type": "array", "optional": false, "description": "Optional array of supported subsampling formats, e.g. 4:2:0, if known.", "typeRef": "SystemInfo.SubsamplingFormat"}]);
-inspectorBackend.registerType("SystemInfo.GPUInfo", [{"name": "devices", "type": "array", "optional": false, "description": "The graphics devices on the system. Element 0 is the primary GPU.", "typeRef": "SystemInfo.GPUDevice"}, {"name": "auxAttributes", "type": "object", "optional": true, "description": "An optional dictionary of additional GPU related attributes.", "typeRef": null}, {"name": "featureStatus", "type": "object", "optional": true, "description": "An optional dictionary of graphics features and their status.", "typeRef": null}, {"name": "driverBugWorkarounds", "type": "array", "optional": false, "description": "An optional array of GPU driver bug workarounds.", "typeRef": "string"}, {"name": "videoDecoding", "type": "array", "optional": false, "description": "Supported accelerated video decoding capabilities.", "typeRef": "SystemInfo.VideoDecodeAcceleratorCapability"}, {"name": "videoEncoding", "type": "array", "optional": false, "description": "Supported accelerated video encoding capabilities.", "typeRef": "SystemInfo.VideoEncodeAcceleratorCapability"}, {"name": "imageDecoding", "type": "array", "optional": false, "description": "Supported accelerated image decoding capabilities.", "typeRef": "SystemInfo.ImageDecodeAcceleratorCapability"}]);
+inspectorBackend.registerType("SystemInfo.GPUInfo", [{"name": "devices", "type": "array", "optional": false, "description": "The graphics devices on the system. Element 0 is the primary GPU.", "typeRef": "SystemInfo.GPUDevice"}, {"name": "auxAttributes", "type": "object", "optional": true, "description": "An optional dictionary of additional GPU related attributes.", "typeRef": null}, {"name": "featureStatus", "type": "object", "optional": true, "description": "An optional dictionary of graphics features and their status.", "typeRef": null}, {"name": "driverBugWorkarounds", "type": "array", "optional": false, "description": "An optional array of GPU driver bug workarounds.", "typeRef": "string"}, {"name": "videoDecoding", "type": "array", "optional": false, "description": "Supported accelerated video decoding capabilities.", "typeRef": "SystemInfo.VideoDecodeAcceleratorCapability"}, {"name": "videoEncoding", "type": "array", "optional": false, "description": "Supported accelerated video encoding capabilities.", "typeRef": "SystemInfo.VideoEncodeAcceleratorCapability"}]);
 inspectorBackend.registerType("SystemInfo.ProcessInfo", [{"name": "type", "type": "string", "optional": false, "description": "Specifies process type.", "typeRef": null}, {"name": "id", "type": "number", "optional": false, "description": "Specifies process id.", "typeRef": null}, {"name": "cpuTime", "type": "number", "optional": false, "description": "Specifies cumulative CPU usage in seconds across all threads of the process since the process start.", "typeRef": null}]);
 
 // Target.

package/front_end/generated/SupportedCSSProperties.js

@@ -640,6 +640,7 @@ export const generatedProperties = [
    "row-rule-color",
    "row-rule-outset",
    "row-rule-style",
+   "row-rule-visibility-items",
    "row-rule-width",
    "ruby-align",
    "ruby-overhang",
@@ -3726,6 +3727,16 @@ export const generatedProperties = [
   ],
   "name": "row-rule-style"
  },
+ {
+  "inherited": false,
+  "keywords": [
+   "all",
+   "around",
+   "between",
+   "none"
+  ],
+  "name": "row-rule-visibility-items"
+ },
  {
   "keywords": [
    "thin",
@@ -6510,6 +6521,14 @@ export const generatedPropertyValues = {
    "double"
   ]
  },
+ "row-rule-visibility-items": {
+  "values": [
+   "all",
+   "around",
+   "between",
+   "none"
+  ]
+ },
  "row-rule-width": {
   "values": [
    "thin",

package/front_end/generated/protocol.ts

@@ -18029,29 +18029,6 @@ export namespace SystemInfo {
     Unknown = 'unknown',
   }
 
-  /**
-   * Describes a supported image decoding profile with its associated minimum and
-   * maximum resolutions and subsampling.
-   */
-  export interface ImageDecodeAcceleratorCapability {
-    /**
-     * Image coded, e.g. Jpeg.
-     */
-    imageType: ImageType;
-    /**
-     * Maximum supported dimensions of the image in pixels.
-     */
-    maxDimensions: Size;
-    /**
-     * Minimum supported dimensions of the image in pixels.
-     */
-    minDimensions: Size;
-    /**
-     * Optional array of supported subsampling formats, e.g. 4:2:0, if known.
-     */
-    subsamplings: SubsamplingFormat[];
-  }
-
   /**
    * Provides information about the GPU(s) on the system.
    */
@@ -18080,10 +18057,6 @@ export namespace SystemInfo {
      * Supported accelerated video encoding capabilities.
      */
     videoEncoding: VideoEncodeAcceleratorCapability[];
-    /**
-     * Supported accelerated image decoding capabilities.
-     */
-    imageDecoding: ImageDecodeAcceleratorCapability[];
   }
 
   /**

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -7,6 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -626,65 +627,65 @@ export class AXNodeIgnoredReasonTreeElement extends AXNodePropertyTreeElement {
     let reasonElement: Element|null = null;
     switch (reason) {
       case 'activeModalDialog':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsHiddenBy, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsHiddenBy, {});
         break;
       case 'hiddenByChildTree':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsHiddenByChildTree, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsHiddenByChildTree, {});
         break;
       case 'ancestorIsLeafNode':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.ancestorChildrenAreAll, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.ancestorChildrenAreAll, {});
         break;
       case 'ariaHiddenElement': {
         const ariaHiddenSpan = document.createElement('span', {is: 'source-code'}).textContent = 'aria-hidden';
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsPlaceholder, {PH1: ariaHiddenSpan});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsPlaceholder, {PH1: ariaHiddenSpan});
         break;
       }
       case 'ariaHiddenSubtree': {
         const ariaHiddenSpan = document.createElement('span', {is: 'source-code'}).textContent = 'aria-hidden';
         const trueSpan = document.createElement('span', {is: 'source-code'}).textContent = 'true';
-        reasonElement = i18n.i18n.getFormatLocalizedString(
+        reasonElement = uiI18n.getFormatLocalizedString(
             str_, UIStrings.placeholderIsPlaceholderOnAncestor, {PH1: ariaHiddenSpan, PH2: trueSpan});
         break;
       }
       case 'emptyAlt':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementHasEmptyAltText, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementHasEmptyAltText, {});
         break;
       case 'emptyText':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.noTextContent, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.noTextContent, {});
         break;
       case 'inertElement':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsInert, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsInert, {});
         break;
       case 'inertSubtree':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsInAnInertSubTree, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsInAnInertSubTree, {});
         break;
       case 'inheritsPresentation':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementsInheritsPresentational, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementsInheritsPresentational, {});
         break;
       case 'labelContainer':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.partOfLabelElement, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.partOfLabelElement, {});
         break;
       case 'labelFor':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.labelFor, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.labelFor, {});
         break;
       case 'notRendered':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsNotRendered, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsNotRendered, {});
         break;
       case 'notVisible':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsNotVisible, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsNotVisible, {});
         break;
       case 'presentationalRole': {
         const role = axNode?.role()?.value || '';
         const rolePresentationSpan = document.createElement('span', {is: 'source-code'}).textContent = 'role=' + role;
         reasonElement =
-            i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementHasPlaceholder, {PH1: rolePresentationSpan});
+            uiI18n.getFormatLocalizedString(str_, UIStrings.elementHasPlaceholder, {PH1: rolePresentationSpan});
         break;
       }
       case 'probablyPresentational':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsPresentational, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsPresentational, {});
         break;
       case 'uninteresting':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementNotInteresting, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementNotInteresting, {});
         break;
     }
     if (reasonElement) {

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -15,7 +15,7 @@ import {SourceOrderPane} from './SourceOrderView.js';
 
 let accessibilitySidebarViewInstance: AccessibilitySidebarView;
 
-export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget {
+export class AccessibilitySidebarView extends UI.Widget.VBox {
   #node: SDK.DOMModel.DOMNode|null;
   #axNode: SDK.AccessibilityModel.AccessibilityNode|null;
   private skipNextPullNode: boolean;
@@ -24,8 +24,8 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
   private readonly ariaSubPane: ARIAAttributesPane;
   private readonly axNodeSubPane: AXNodeSubPane;
   private readonly sourceOrderSubPane: SourceOrderPane;
-  private constructor(throttlingTimeout?: number) {
-    super(false /* useShadowDom */, throttlingTimeout);
+  private constructor() {
+    super();
     this.element.classList.add('accessibility-sidebar-view');
     this.#node = null;
     this.#axNode = null;
@@ -44,12 +44,9 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     this.pullNode();
   }
 
-  static instance(opts?: {
-    forceNew: boolean,
-    throttlingTimeout: number,
-  }): AccessibilitySidebarView {
+  static instance(opts?: {forceNew: boolean}): AccessibilitySidebarView {
     if (!accessibilitySidebarViewInstance || opts?.forceNew) {
-      accessibilitySidebarViewInstance = new AccessibilitySidebarView(opts?.throttlingTimeout);
+      accessibilitySidebarViewInstance = new AccessibilitySidebarView();
     }
     return accessibilitySidebarViewInstance;
   }
@@ -65,7 +62,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
   setNode(node: SDK.DOMModel.DOMNode|null, fromAXTree?: boolean): void {
     this.skipNextPullNode = Boolean(fromAXTree);
     this.#node = node;
-    this.update();
+    this.requestUpdate();
   }
 
   accessibilityNodeCallback(axNode: SDK.AccessibilityModel.AccessibilityNode|null): void {
@@ -85,7 +82,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     this.breadcrumbsSubPane.setAXNode(axNode);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const node = this.node();
     this.axNodeSubPane.setNode(node);
     this.ariaSubPane.setNode(node);
@@ -109,7 +106,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     super.wasShown();
 
     // Pull down the latest date for this node.
-    void this.doUpdate();
+    void this.performUpdate();
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.onNodeChange, this, {scoped: true});
@@ -152,6 +149,6 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     if (this.node() !== node) {
       return;
     }
-    this.update();
+    this.requestUpdate();
   }
 }