chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -16,6 +16,23 @@ interface CachedScopeMap {
 
 const scopeToCachedIdentifiersMap = new WeakMap<SDK.DebuggerModel.ScopeChainEntry, CachedScopeMap>();
 const cachedMapByCallFrame = new WeakMap<SDK.DebuggerModel.CallFrame, Map<string, string>>();
+const cachedTextByDeferredContent = new WeakMap<TextUtils.ContentProvider.DeferredContent, TextUtils.Text.Text|null>();
+
+async function getTextFor(contentProvider: TextUtils.ContentProvider.ContentProvider):
+    Promise<TextUtils.Text.Text|null> {
+  // We intentionally cache based on the DeferredContent object rather
+  // than the ContentProvider object, which may appear as a more sensible
+  // choice, since the content of both Script and UISourceCode objects
+  // can change over time.
+  const deferredContent = await contentProvider.requestContent();
+  let text = cachedTextByDeferredContent.get(deferredContent);
+  if (text === undefined) {
+    const {content} = deferredContent;
+    text = content ? new TextUtils.Text.Text(content) : null;
+    cachedTextByDeferredContent.set(deferredContent, text);
+  }
+  return text;
+}
 
 export class IdentifierPositions {
   name: string;
@@ -31,6 +48,29 @@ export class IdentifierPositions {
   }
 }
 
+const tryParseScope = async function(scopeText: string): Promise<{
+  prefixLength: number, scopeTree: Formatter.FormatterWorkerPool.ScopeTreeNode,
+}|null> {
+  const prefixSuffixToTry = [
+    // We wrap the scope in a class constructor. This handles the case where the
+    // scope is a (non-arrow) function and the case where it is a constructor
+    // (so that parsing 'super' calls succeeds).
+    {prefix: 'class DummyClass extends DummyBase { constructor', suffix: '}'},
+    // Next, we try async generator, this handles functions with yield or await keywords.
+    {prefix: 'async function* __DEVTOOLS_DUMMY__', suffix: ''},
+    // Finally, try parse as an async arrow function.
+    {prefix: 'async ', suffix: ''},
+  ];
+  for (const {prefix, suffix} of prefixSuffixToTry) {
+    const scopeTree =
+        await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText + suffix);
+    if (scopeTree) {
+      return {prefixLength: prefix.length, scopeTree};
+    }
+  }
+  return null;
+};
+
 const computeScopeTree = async function(functionScope: SDK.DebuggerModel.ScopeChainEntry): Promise<{
   scopeTree: Formatter.FormatterWorkerPool.ScopeTreeNode, text: TextUtils.Text.Text, slide: number,
 }|null> {
@@ -43,35 +83,21 @@ const computeScopeTree = async function(functionScope: SDK.DebuggerModel.ScopeCh
   if (!script || !script.sourceMapURL || script !== functionEndLocation.script()) {
     return null;
   }
-  const {content} = await script.requestContent();
-  if (!content) {
+  const text = await getTextFor(script);
+  if (!text) {
     return null;
   }
-
-  const text = new TextUtils.Text.Text(content);
   const scopeRange = new TextUtils.TextRange.TextRange(
       functionStartLocation.lineNumber, functionStartLocation.columnNumber, functionEndLocation.lineNumber,
       functionEndLocation.columnNumber);
   const scopeText = text.extract(scopeRange);
   const scopeStart = text.toSourceRange(scopeRange).offset;
-  // We wrap the scope in a class constructor. This handles the case where the
-  // scope is a (non-arrow) function and the case where it is a constructor
-  // (so that parsing 'super' calls succeeds).
-  let prefix = 'class DummyClass extends DummyBase { constructor';
-  let suffix = '}';
-  let scopeTree =
-      await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText + suffix);
-  if (!scopeTree) {
-    // Try to parse the function as an arrow function.
-    prefix = '';
-    suffix = '';
-    scopeTree =
-        await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText + suffix);
-  }
-  if (!scopeTree) {
+  const prefixLengthAndscopeTree = await tryParseScope(scopeText);
+  if (!prefixLengthAndscopeTree) {
     return null;
   }
-  return {scopeTree, text, slide: scopeStart - prefix.length};
+  const {prefixLength, scopeTree} = prefixLengthAndscopeTree;
+  return {scopeTree, text, slide: scopeStart - prefixLength};
 };
 
 export const scopeIdentifiers = async function(
@@ -209,7 +235,6 @@ const resolveScope =
           if (!sourceMap) {
             return {variableMapping, thisMapping};
           }
-          const textCache = new Map<string, TextUtils.Text.Text>();
           // Extract as much as possible from SourceMap and resolve
           // missing identifier names from SourceMap ranges.
           const promises: Promise<void>[] = [];
@@ -233,7 +258,7 @@ const resolveScope =
               // mappings agree. However, that can be expensive for identifiers with many uses,
               // so we iterate sequentially, stopping at the first non-empty mapping.
               for (const position of id.positions) {
-                const sourceName = await resolveSourceName(script, sourceMap, id.name, position, textCache);
+                const sourceName = await resolveSourceName(script, sourceMap, id.name, position);
                 if (sourceName) {
                   handler(sourceName);
                   return;
@@ -273,8 +298,7 @@ const resolveScope =
 
   async function resolveSourceName(
       script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap, name: string,
-      position: {lineNumber: number, columnNumber: number},
-      textCache: Map<string, TextUtils.Text.Text>): Promise<string|null> {
+      position: {lineNumber: number, columnNumber: number}): Promise<string|null> {
     const ranges = sourceMap.findEntryRanges(position.lineNumber, position.columnNumber);
     if (!ranges) {
       return null;
@@ -287,7 +311,7 @@ const resolveScope =
     if (!uiSourceCode) {
       return null;
     }
-    const compiledText = getTextFor((await script.requestContent()).content);
+    const compiledText = await getTextFor(script);
     if (!compiledText) {
       return null;
     }
@@ -303,7 +327,7 @@ const resolveScope =
 
     // Extract the mapped name from the source code range and ensure that the punctuation
     // matches the one from the compiled code.
-    const sourceText = getTextFor((await uiSourceCode.requestContent()).content);
+    const sourceText = await getTextFor(uiSourceCode);
     if (!sourceText) {
       return null;
     }
@@ -355,18 +379,6 @@ const resolveScope =
 
       return {name, punctuation};
     }
-
-    function getTextFor(content: string|null): TextUtils.Text.Text|null {
-      if (!content) {
-        return null;
-      }
-      let text = textCache.get(content);
-      if (!text) {
-        text = new TextUtils.Text.Text(content);
-        textCache.set(content, text);
-      }
-      return text;
-    }
   }
 
   function findFunctionScope(): SDK.DebuggerModel.ScopeChainEntry|null {
@@ -455,11 +467,10 @@ export const resolveExpression = async(
   if (!sourceMap) {
     return '';
   }
-  const {content} = await script.requestContent();
-  if (!content) {
+  const text = await getTextFor(script);
+  if (!text) {
     return '';
   }
-  const text = new TextUtils.Text.Text(content);
   const textRange = sourceMap.reverseMapTextRange(
       uiSourceCode.url(),
       new TextUtils.TextRange.TextRange(lineNumber, startColumnNumber, lineNumber, endColumnNumber));
@@ -645,34 +656,66 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
 // paren that starts the scope. If there is no name associated with the scope
 // start or if the function scope does not start with a left paren (e.g., arrow
 // function with one parameter), the resolution returns null.
-export async function resolveFrameFunctionName(frame: SDK.DebuggerModel.CallFrame): Promise<string|null> {
-  const script = frame.script;
-  const scope = frame.localScope();
-  if (!scope || !script) {
+async function getFunctionNameFromScopeStart(
+    script: SDK.Script.Script, lineNumber: number, columnNumber: number): Promise<string|null> {
+  // To reduce the overhead of resolving function names,
+  // we check for source maps first and immediately leave
+  // this function if the script doesn't have a sourcemap.
+  const sourceMap = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().sourceMapForScript(script);
+  if (!sourceMap) {
     return null;
   }
-  const startLocation = scope.startLocation();
-  if (!startLocation) {
+
+  const name = sourceMap?.findEntry(lineNumber, columnNumber)?.name;
+  if (!name) {
     return null;
   }
-  const {content} = await script.requestContent();
-  if (!content) {
+
+  const text = await getTextFor(script);
+  if (!text) {
     return null;
   }
 
-  const text = new TextUtils.Text.Text(content);
-  const openRange = new TextUtils.TextRange.TextRange(
-      startLocation.lineNumber, startLocation.columnNumber, startLocation.lineNumber, startLocation.columnNumber + 1);
+  const openRange = new TextUtils.TextRange.TextRange(lineNumber, columnNumber, lineNumber, columnNumber + 1);
+
   if (text.extract(openRange) !== '(') {
     return null;
   }
 
-  const sourceMap = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().sourceMapForScript(script);
-  if (!sourceMap) {
+  return name;
+}
+
+export async function resolveDebuggerFrameFunctionName(frame: SDK.DebuggerModel.CallFrame): Promise<string|null> {
+  const startLocation = frame.localScope()?.startLocation();
+  if (!startLocation) {
     return null;
   }
-  const entry = sourceMap.findEntry(startLocation.lineNumber, startLocation.columnNumber);
-  return entry?.name ?? null;
+  return await getFunctionNameFromScopeStart(frame.script, startLocation.lineNumber, startLocation.columnNumber);
+}
+
+export async function resolveProfileFrameFunctionName(
+    {scriptId, lineNumber, columnNumber}: Partial<Protocol.Runtime.CallFrame>,
+    target: SDK.Target.Target|null): Promise<string|null> {
+  if (!target || lineNumber === undefined || columnNumber === undefined || scriptId === undefined) {
+    return null;
+  }
+  const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+  const script = debuggerModel?.scriptForId(String(scriptId));
+
+  if (!debuggerModel || !script) {
+    return null;
+  }
+
+  const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+  const location = new SDK.DebuggerModel.Location(debuggerModel, scriptId, lineNumber, columnNumber);
+  const functionInfoFromPlugin = await debuggerWorkspaceBinding.pluginManager?.getFunctionInfo(script, location);
+  if (functionInfoFromPlugin && 'frames' in functionInfoFromPlugin) {
+    const last = functionInfoFromPlugin.frames.at(-1);
+    if (last?.name) {
+      return last.name;
+    }
+  }
+  return await getFunctionNameFromScopeStart(script, lineNumber, columnNumber);
 }
 
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)

package/front_end/models/text_utils/TextUtils.ts

@@ -326,43 +326,27 @@ export class BalancedJSONTokenizer {
   }
 }
 
-export interface TokenizerFactory {
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  createTokenizer(mimeType: string):
-      (arg0: string, arg1: (arg0: string, arg1: string|null, arg2: number, arg3: number) => void) => void;
-}
-
-export function isMinified(text: string): boolean {
-  const kMaxNonMinifiedLength = 500;
-  let linesToCheck = 10;
-  let lastPosition = 0;
-  do {
-    let eolIndex = text.indexOf('\n', lastPosition);
+/**
+ * Heuristic to check whether a given text was likely minified. Intended to
+ * be used for HTML, CSS, and JavaScript inputs.
+ *
+ * A text is considered to be the result of minification if the average
+ * line length for the whole text is 80 characters or more.
+ *
+ * @param text The input text to check.
+ * @returns
+ */
+export const isMinified = function(text: string): boolean {
+  let lineCount = 0;
+  for (let lastIndex = 0; lastIndex < text.length; ++lineCount) {
+    let eolIndex = text.indexOf('\n', lastIndex);
     if (eolIndex < 0) {
       eolIndex = text.length;
     }
-    if (eolIndex - lastPosition > kMaxNonMinifiedLength && text.substr(lastPosition, 3) !== '//#') {
-      return true;
-    }
-    lastPosition = eolIndex + 1;
-  } while (--linesToCheck >= 0 && lastPosition < text.length);
-
-  // Check the end of the text as well
-  linesToCheck = 10;
-  lastPosition = text.length;
-  do {
-    let eolIndex = text.lastIndexOf('\n', lastPosition);
-    if (eolIndex < 0) {
-      eolIndex = 0;
-    }
-    if (lastPosition - eolIndex > kMaxNonMinifiedLength && text.substr(lastPosition, 3) !== '//#') {
-      return true;
-    }
-    lastPosition = eolIndex - 1;
-  } while (--linesToCheck >= 0 && lastPosition > 0);
-  return false;
-}
+    lastIndex = eolIndex + 1;
+  }
+  return (text.length - lineCount) / lineCount >= 80;
+};
 
 export const performSearchInContent = function(
     content: string, query: string, caseSensitive: boolean, isRegex: boolean): SearchMatch[] {

package/front_end/models/text_utils/text_utils-legacy.ts

@@ -41,7 +41,4 @@ TextUtils.FilterParser = TextUtilsModule.TextUtils.FilterParser;
 /** @constructor */
 TextUtils.BalancedJSONTokenizer = TextUtilsModule.TextUtils.BalancedJSONTokenizer;
 
-/** @interface */
-TextUtils.TokenizerFactory = TextUtilsModule.TextUtils.TokenizerFactory;
-
 TextUtils.isMinified = TextUtilsModule.TextUtils.isMinified;

package/front_end/models/timeline_model/TimelineModel.ts

@@ -337,8 +337,8 @@ export class TimelineModelImpl {
   targetByEvent(event: SDK.TracingModel.Event): SDK.Target.Target|null {
     // FIXME: Consider returning null for loaded traces.
     const workerId = this.workerIdByThread.get(event.thread);
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
-    return workerId ? SDK.TargetManager.TargetManager.instance().targetById(workerId) : mainTarget;
+    const mainFrameTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
+    return workerId ? SDK.TargetManager.TargetManager.instance().targetById(workerId) : mainFrameTarget;
   }
 
   navStartTimes(): Map<string, SDK.TracingModel.Event> {

package/front_end/models/timeline_model/timeline_model-legacy.ts

@@ -24,15 +24,6 @@ TimelineModel.LayerPaintEvent = TimelineModelModule.TimelineFrameModel.LayerPain
 /** @constructor */
 TimelineModel.PendingFrame = TimelineModelModule.TimelineFrameModel.PendingFrame;
 
-/** @constructor */
-TimelineModel.TimelineIRModel = TimelineModelModule.TimelineIRModel.TimelineIRModel;
-
-/** @enum {string} */
-TimelineModel.TimelineIRModel.Phases = TimelineModelModule.TimelineIRModel.Phases;
-
-/** @enum {string} */
-TimelineModel.TimelineIRModel.InputEvents = TimelineModelModule.TimelineIRModel.InputEvents;
-
 /** @constructor */
 TimelineModel.TimelineJSProfileProcessor = TimelineModelModule.TimelineJSProfile.TimelineJSProfileProcessor;
 

package/front_end/models/timeline_model/timeline_model.ts

@@ -5,13 +5,11 @@
 import './TimelineModelFilter.js';
 import './TracingLayerTree.js';
 import './TimelineModel.js';
-import './TimelineIRModel.js';
 import './TimelineJSProfile.js';
 import './TimelineFrameModel.js';
 import './TimelineProfileTree.js';
 
 import * as TimelineFrameModel from './TimelineFrameModel.js';
-import * as TimelineIRModel from './TimelineIRModel.js';
 import * as TimelineJSProfile from './TimelineJSProfile.js';
 import * as TimelineModel from './TimelineModel.js';
 import * as TimelineModelFilter from './TimelineModelFilter.js';
@@ -20,7 +18,6 @@ import * as TracingLayerTree from './TracingLayerTree.js';
 
 export {
   TimelineFrameModel,
-  TimelineIRModel,
   TimelineJSProfile,
   TimelineModel,
   TimelineModelFilter,

package/front_end/models/workspace/UISourceCode.ts

@@ -528,21 +528,27 @@ export class UILocation {
     this.columnNumber = columnNumber;
   }
 
-  linkText(skipTrim?: boolean, showColumnNumber?: boolean): string {
-    let linkText = this.uiSourceCode.displayName(skipTrim);
+  linkText(skipTrim: boolean = false, showColumnNumber: boolean = false): string {
+    const displayName = this.uiSourceCode.displayName(skipTrim);
+    const lineAndColumnText = this.lineAndColumnText(showColumnNumber);
+    return lineAndColumnText ? displayName + ':' + lineAndColumnText : displayName;
+  }
+
+  lineAndColumnText(showColumnNumber: boolean = false): string|undefined {
+    let lineAndColumnText;
     if (this.uiSourceCode.mimeType() === 'application/wasm') {
       // For WebAssembly locations, we follow the conventions described in
       // github.com/WebAssembly/design/blob/master/Web.md#developer-facing-display-conventions
       if (typeof this.columnNumber === 'number') {
-        linkText += `:0x${this.columnNumber.toString(16)}`;
+        lineAndColumnText = `0x${this.columnNumber.toString(16)}`;
       }
     } else {
-      linkText += ':' + (this.lineNumber + 1);
+      lineAndColumnText = `${this.lineNumber + 1}`;
       if (showColumnNumber && typeof this.columnNumber === 'number') {
-        linkText += ':' + (this.columnNumber + 1);
+        lineAndColumnText += ':' + (this.columnNumber + 1);
       }
     }
-    return linkText;
+    return lineAndColumnText;
   }
 
   id(): string {

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Platform from '../../core/platform/platform.js';
 
 import {AccessibilitySubPane} from './AccessibilitySubPane.js';
 import {ariaMetadata} from './ARIAMetadata.js';
@@ -181,7 +182,7 @@ export class ARIAAttributesTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    if (isEscKey(event)) {
+    if (Platform.KeyboardUtilities.isEscKey(event)) {
       this.editingCancelled();
       event.consume();
       return;

package/front_end/panels/application/AppManifestView.ts

@@ -91,6 +91,11 @@ const UIStrings = {
   */
   copyToClipboard: 'Copy to clipboard',
   /**
+  *@description Screen reader announcement string when the user clicks the copy to clipboard button.
+  *@example {/index.html} PH1
+  */
+  copiedToClipboard: 'Copied suggested ID {PH1} to clipboard',
+  /**
   *@description Text for the description of something
   */
   description: 'Description',
@@ -189,7 +194,7 @@ const UIStrings = {
   /**
   *@description Manifest installability error in the Application panel
   */
-  manifestStartUrlIsNotValid: 'Manifest start `URL` is not valid',
+  manifestStartUrlIsNotValid: 'Manifest \'`start_URL`\' is not valid',
   /**
   *@description Manifest installability error in the Application panel
   */
@@ -204,12 +209,12 @@ const UIStrings = {
   *@example {100} PH1
   */
   manifestDoesNotContainASuitable:
-      'Manifest does not contain a suitable icon - PNG, SVG or WebP format of at least {PH1}px is required, the `sizes` attribute must be set, and the `purpose` attribute, if set, must include `"any"`.',
+      'Manifest does not contain a suitable icon - PNG or SVG format of at least {PH1}px is required, the \'`sizes`\' attribute must be set, and the \'`purpose`\' attribute, if set, must include \'`any`\'.',
   /**
   *@description Manifest installability error in the Application panel
   */
   avoidPurposeAnyAndMaskable:
-      'Declaring an icon with `purpose: "any maskable"` is discouraged. It is likely to look incorrect on some platforms due to too much or too little padding.',
+      'Declaring an icon with \'`purpose: "any maskable"`\' is discouraged. It is likely to look incorrect on some platforms due to too much or too little padding.',
   /**
   *@description Manifest installability error in the Application panel
   */
@@ -220,7 +225,7 @@ const UIStrings = {
   *@example {100} PH1
   */
   noSuppliedIconIsAtLeastSpxSquare:
-      'No supplied icon is at least {PH1} pixels square in `PNG`, `SVG` or `WebP` format, with the purpose attribute unset or set to `"any"`.',
+      'No supplied icon is at least {PH1} pixels square in `PNG` or `SVG` format, with the purpose attribute unset or set to \'`any`\'.',
   /**
   *@description Manifest installability error in the Application panel
   */
@@ -264,12 +269,12 @@ const UIStrings = {
   /**
   *@description Manifest installability error in the Application panel
   */
-  manifestSpecifies: 'Manifest specifies `prefer_related_applications`: true',
+  manifestSpecifies: 'Manifest specifies \'`prefer_related_applications`: true\'',
   /**
   *@description Manifest installability error in the Application panel
   */
   preferrelatedapplicationsIsOnly:
-      '`prefer_related_applications` is only supported on `Chrome` Beta and Stable channels on `Android`.',
+      '\'`prefer_related_applications`\' is only supported on `Chrome` Beta and Stable channels on `Android`.',
   /**
   *@description Manifest installability error in the Application panel
   */
@@ -300,7 +305,7 @@ const UIStrings = {
   * be translated.
   * @example {ImageName} PH1
   */
-  sSrcIsNotSet: '{PH1} `src` is not set',
+  sSrcIsNotSet: '{PH1} \'`src`\' is not set',
   /**
   *@description Warning message for image resources from the manifest
   *@example {Screenshot} PH1
@@ -468,6 +473,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.descriptionField = this.identitySection.appendFlexedField(i18nString(UIStrings.description));
 
     this.startURLField = this.presentationSection.appendField(i18nString(UIStrings.startUrl));
+    UI.ARIAUtils.setAccessibleName(this.startURLField, i18nString(UIStrings.startUrl));
 
     const themeColorField = this.presentationSection.appendField(i18nString(UIStrings.themeColor));
     this.themeColorSwatch = new InlineEditor.ColorSwatch.ColorSwatch();
@@ -644,6 +650,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
             iconColor: 'var(--color-text-primary)',
           }],
           clickHandler: (): void => {
+            UI.ARIAUtils.alert(i18nString(UIStrings.copiedToClipboard, {PH1: recommendedId}));
             Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
           },
           compact: true,
@@ -1094,6 +1101,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
         }
       }
     }
+    image.width = image.naturalWidth;
 
     const purpose = typeof imageResource['purpose'] === 'string' ? imageResource['purpose'].toLowerCase() : '';
     if (purpose.includes('any') && purpose.includes('maskable')) {

package/front_end/panels/application/ApplicationPanelCacheSection.ts

@@ -194,7 +194,8 @@ export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = new ApplicationComponents.BackForwardCacheView.BackForwardCacheViewWrapper();
+      this.view = new ApplicationComponents.BackForwardCacheView.BackForwardCacheViewWrapper(
+          new ApplicationComponents.BackForwardCacheView.BackForwardCacheView());
     }
     this.showView(this.view);
     Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.back_forward_cache]);

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -190,6 +190,10 @@ const UIStrings = {
    * @example {"Identity"} PH1
    */
   onInvokeAlert: 'Scrolled to {PH1}',
+  /**
+   * @description Application sidebar panel
+   */
+  applicationSidebarPanel: 'Application panel sidebar',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/ApplicationPanelSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -251,6 +255,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     const applicationSectionTitle = i18nString(UIStrings.application);
     this.applicationTreeElement = this.addSidebarSection(applicationSectionTitle);
+    const applicationPanelSidebar = this.applicationTreeElement.treeOutline?.contentElement;
+    if (applicationPanelSidebar) {
+      applicationPanelSidebar.ariaLabel = i18nString(UIStrings.applicationSidebarPanel);
+    }
     const manifestTreeElement = new AppManifestTreeElement(panel);
     this.applicationTreeElement.appendChild(manifestTreeElement);
     manifestTreeElement.generateChildren();
@@ -345,10 +353,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
             new BackgroundServiceTreeElement(panel, Protocol.BackgroundService.ServiceName.PushMessaging);
         backgroundServiceTreeElement.appendChild(this.pushMessagingTreeElement);
       }
-      if (Root.Runtime.experiments.isEnabled('reportingApiDebugging')) {
-        this.reportingApiTreeElement = new ReportingApiTreeElement(panel);
-        backgroundServiceTreeElement.appendChild(this.reportingApiTreeElement);
-      }
+      this.reportingApiTreeElement = new ReportingApiTreeElement(panel);
+      backgroundServiceTreeElement.appendChild(this.reportingApiTreeElement);
     }
     const resourcesSectionTitle = i18nString(UIStrings.frames);
     const resourcesTreeElement = this.addSidebarSection(resourcesSectionTitle);
@@ -396,6 +402,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     treeElement.setCollapsible(false);
     treeElement.selectable = false;
     this.sidebarTree.appendChild(treeElement);
+    UI.ARIAUtils.markAsHeading(treeElement.listItemElement, 3);
     UI.ARIAUtils.setAccessibleName(treeElement.childrenListElement, title);
     return treeElement;
   }
@@ -1191,7 +1198,7 @@ export class IDBDatabaseTreeElement extends ApplicationPanelTreeElement {
   private view?: IDBDatabaseView;
 
   constructor(storagePanel: ResourcesPanel, model: IndexedDBModel, databaseId: DatabaseId) {
-    super(storagePanel, databaseId.name + ' - ' + databaseId.securityOrigin, false);
+    super(storagePanel, databaseId.name + ' - ' + databaseId.storageKey, false);
     this.model = model;
     this.databaseId = databaseId;
     this.idbObjectStoreTreeElements = new Map();
@@ -1201,8 +1208,7 @@ export class IDBDatabaseTreeElement extends ApplicationPanelTreeElement {
   }
 
   get itemURL(): Platform.DevToolsPath.UrlString {
-    return 'indexedDB://' + this.databaseId.securityOrigin + '/' + this.databaseId.name as
-        Platform.DevToolsPath.UrlString;
+    return 'indexedDB://' + this.databaseId.storageKey + '/' + this.databaseId.name as Platform.DevToolsPath.UrlString;
   }
 
   onattach(): void {
@@ -1316,7 +1322,7 @@ export class IDBObjectStoreTreeElement extends ApplicationPanelTreeElement {
   }
 
   get itemURL(): Platform.DevToolsPath.UrlString {
-    return 'indexedDB://' + this.databaseId.securityOrigin + '/' + this.databaseId.name + '/' + this.objectStore.name as
+    return 'indexedDB://' + this.databaseId.storageKey + '/' + this.databaseId.name + '/' + this.objectStore.name as
         Platform.DevToolsPath.UrlString;
   }
 
@@ -1453,7 +1459,7 @@ export class IDBIndexTreeElement extends ApplicationPanelTreeElement {
   }
 
   get itemURL(): Platform.DevToolsPath.UrlString {
-    return 'indexedDB://' + this.databaseId.securityOrigin + '/' + this.databaseId.name + '/' + this.objectStore.name +
+    return 'indexedDB://' + this.databaseId.storageKey + '/' + this.databaseId.name + '/' + this.objectStore.name +
         '/' + this.index.name as Platform.DevToolsPath.UrlString;
   }