chrome-devtools-frontend 1.0.1036726 → 1.0.1038685

package/config/gni/devtools_grd_files.gni

@@ -1379,7 +1379,6 @@ grd_files_debug_sources = [
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/ConnectionTransport.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/ConsoleMessage.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/Coverage.js",
-  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/DOMWorld.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/Debug.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/DeviceDescriptors.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/Dialog.js",
@@ -1390,10 +1389,12 @@ grd_files_debug_sources = [
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/ExecutionContext.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/FileChooser.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/FirefoxTargetManager.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/Frame.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/FrameManager.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/HTTPRequest.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/HTTPResponse.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/Input.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/IsolatedWorld.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/JSHandle.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/LifecycleWatcher.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/NetworkConditions.js",
@@ -1413,15 +1414,17 @@ grd_files_debug_sources = [
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/Tracing.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/USKeyboardLayout.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/WebWorker.js",
-  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/assert.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/fetch.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/types.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/common/util.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/compat.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/constants.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/environment.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/generated/injected.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/generated/version.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/initializePuppeteer.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/injected/Poller.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/injected/injected.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/node/BrowserFetcher.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/node/BrowserRunner.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/node/ChromeLauncher.js",
@@ -1437,6 +1440,10 @@ grd_files_debug_sources = [
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/puppeteer.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/revisions.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/types.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/DeferredPromise.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/ErrorLike.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/assert.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/getPackageDirectory.js",
   "front_end/third_party/puppeteer/package/lib/esm/vendor/mitt/src/index.js",
   "front_end/third_party/wasmparser/package/dist/esm/WasmDis.js",
   "front_end/third_party/wasmparser/package/dist/esm/WasmParser.js",

package/front_end/core/common/ParsedURL.ts

@@ -177,7 +177,7 @@ export class ParsedURL {
    */
   static encodedFromParentPathAndName(parentPath: Platform.DevToolsPath.EncodedPathString, name: string):
       Platform.DevToolsPath.EncodedPathString {
-    return ParsedURL.concatenate(parentPath, '/', encodeURIComponent(name));
+    return ParsedURL.concatenate(parentPath, '/', ParsedURL.preEncodeSpecialCharactersInPath(name));
   }
 
   /**

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -134,6 +134,9 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
   }
 
   async storageKeyForFrame(frameId: Protocol.Page.FrameId): Promise<string|null> {
+    if (!this.framesInternal.has(frameId)) {
+      return null;
+    }
     const response = await this.storageAgent.invoke_getStorageKeyForFrame({frameId: frameId});
     if (response.getError() === 'Frame tree node for given frame not found') {
       return null;
@@ -540,11 +543,11 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     const storageKeys = new Set<string>();
     let mainStorageKey: string|null = null;
 
-    for (const {isMainFrame, storageKey} of await Promise.all(
-             [...this.framesInternal.values()].map(async f => f.storageKey.then(k => ({
-                                                                                  isMainFrame: f.isMainFrame(),
-                                                                                  storageKey: k,
-                                                                                }))))) {
+    for (const {isMainFrame, storageKey} of await Promise.all([...this.framesInternal.values()].map(
+             f => f.getStorageKey(/* forceFetch */ false).then(k => ({
+                                                                 isMainFrame: f.isMainFrame(),
+                                                                 storageKey: k,
+                                                               }))))) {
       if (isMainFrame) {
         mainStorageKey = storageKey;
       }
@@ -570,7 +573,7 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
   }
 
   async getMainStorageKey(): Promise<string|null> {
-    return this.mainFrame ? this.mainFrame.storageKey : null;
+    return this.mainFrame ? this.mainFrame.getStorageKey(/* forceFetch */ false) : null;
   }
 
   getMainSecurityOrigin(): string|null {
@@ -767,6 +770,7 @@ export class ResourceTreeFrame {
     this.#urlInternal = framePayload.url as Platform.DevToolsPath.UrlString;
     this.#domainAndRegistryInternal = framePayload.domainAndRegistry;
     this.#securityOriginInternal = framePayload.securityOrigin;
+    void this.getStorageKey(/* forceFetch */ true);
     this.#unreachableUrlInternal =
         framePayload.unreachableUrl as Platform.DevToolsPath.UrlString || Platform.DevToolsPath.EmptyUrlString;
     this.#adFrameStatusInternal = framePayload?.adFrameStatus;
@@ -827,8 +831,8 @@ export class ResourceTreeFrame {
     return this.#securityOriginInternal;
   }
 
-  get storageKey(): Promise<string|null> {
-    if (!this.#storageKeyInternal) {
+  getStorageKey(forceFetch: boolean): Promise<string|null> {
+    if (!this.#storageKeyInternal || forceFetch) {
       this.#storageKeyInternal = this.#model.storageKeyForFrame(this.#idInternal);
     }
     return this.#storageKeyInternal;

package/front_end/entrypoints/main/MainImpl.ts

@@ -298,7 +298,7 @@ export class MainImpl {
         'https://developer.chrome.com/blog/new-in-devtools-92/#source-order');
     Root.Runtime.experiments.register('webauthnPane', 'WebAuthn Pane');
     Root.Runtime.experiments.register(
-        'keyboardShortcutEditor', 'Enable keyboard shortcut editor', true,
+        'keyboardShortcutEditor', 'Enable keyboard shortcut editor', false,
         'https://developer.chrome.com/blog/new-in-devtools-88/#keyboard-shortcuts');
 
     // Back/forward cache
@@ -429,6 +429,7 @@ export class MainImpl {
       Root.Runtime.ExperimentName.CSS_LAYERS,
       ...('EyeDropper' in window ? [Root.Runtime.ExperimentName.EYEDROPPER_COLOR_PICKER] : []),
       'lighthousePanelFR',
+      'keyboardShortcutEditor',
     ]);
 
     Root.Runtime.experiments.setNonConfigurableExperiments([

package/front_end/panels/media/PlayerPropertiesView.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import playerPropertiesViewStyles from './playerPropertiesView.css.js';
@@ -136,7 +137,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 type TabData = {
-  [x: string]: string,
+  [x: string]: string|object,
 };
 
 // Keep this enum in sync with panels/media/base/media_log_properties.h
@@ -179,7 +180,7 @@ export class PropertyRenderer extends UI.Widget.VBox {
     super();
     this.contentElement.classList.add('media-property-renderer');
     const titleElement = this.contentElement.createChild('span', 'media-property-renderer-title');
-    this.contents = this.contentElement.createChild('span', 'media-property-renderer-contents');
+    this.contents = this.contentElement.createChild('div', 'media-property-renderer-contents');
     UI.UIUtils.createTextChild(titleElement, title);
     this.title = title;
     this.value = null;
@@ -213,16 +214,36 @@ export class PropertyRenderer extends UI.Widget.VBox {
     }
   }
 
+  protected unsetNestedContents(): void {
+    this.contentElement.classList.add('media-property-renderer-hidden');
+    if (this.pseudoColorProtectionElement === null) {
+      this.pseudoColorProtectionElement = document.createElement('div');
+      this.pseudoColorProtectionElement.classList.add('media-property-renderer');
+      this.pseudoColorProtectionElement.classList.add('media-property-renderer-hidden');
+      (this.contentElement.parentNode as HTMLElement)
+          .insertBefore(this.pseudoColorProtectionElement, this.contentElement);
+    }
+  }
+
+  changeNestedContents(value: object): void {
+    if (value === null || Object.keys(value).length === 0) {
+      this.unsetNestedContents();
+    } else {
+      if (this.pseudoColorProtectionElement !== null) {
+        this.pseudoColorProtectionElement.remove();
+        this.pseudoColorProtectionElement = null;
+      }
+      this.contentElement.classList.remove('media-property-renderer-hidden');
+      this.contents.removeChildren();
+      const jsonWrapperElement =
+          new SourceFrame.JSONView.JSONView(new SourceFrame.JSONView.ParsedJSON(value, '', ''), true);
+      jsonWrapperElement.show(this.contents);
+    }
+  }
+
   changeContents(value: string|null): void {
     if (value === null) {
-      this.contentElement.classList.add('media-property-renderer-hidden');
-      if (this.pseudoColorProtectionElement === null) {
-        this.pseudoColorProtectionElement = document.createElement('div');
-        this.pseudoColorProtectionElement.classList.add('media-property-renderer');
-        this.pseudoColorProtectionElement.classList.add('media-property-renderer-hidden');
-        (this.contentElement.parentNode as HTMLElement)
-            .insertBefore(this.pseudoColorProtectionElement, this.contentElement);
-      }
+      this.unsetNestedContents();
     } else {
       if (this.pseudoColorProtectionElement !== null) {
         this.pseudoColorProtectionElement.remove();
@@ -260,6 +281,13 @@ export class DefaultPropertyRenderer extends PropertyRenderer {
   }
 }
 
+export class NestedPropertyRenderer extends PropertyRenderer {
+  constructor(title: Platform.UIString.LocalizedString, content: object) {
+    super(title);
+    this.changeNestedContents(content);
+  }
+}
+
 export class DimensionPropertyRenderer extends PropertyRenderer {
   private width: number;
   private height: number;
@@ -337,7 +365,11 @@ export class TrackManager {
   addNewTab(tabs: GenericTrackMenu|NoTracksPlaceholderMenu, tabData: TabData, tabNumber: number): void {
     const tabElements = [];
     for (const [name, data] of Object.entries(tabData)) {
-      tabElements.push(new DefaultPropertyRenderer(i18n.i18n.lockedString(name), data));
+      if (typeof data === 'object') {
+        tabElements.push(new NestedPropertyRenderer(i18n.i18n.lockedString(name), data));
+      } else {
+        tabElements.push(new DefaultPropertyRenderer(i18n.i18n.lockedString(name), data));
+      }
     }
     const newTab = new AttributesView(tabElements);
 

package/front_end/panels/media/playerPropertiesView.css

@@ -12,6 +12,8 @@
   line-height: 20px;
   min-height: 28px;
   padding: 4px 10px;
+  display: block;
+  overflow: hidden;
 }
 
 .media-property-renderer-hidden {
@@ -19,14 +21,23 @@
 }
 
 .media-property-renderer-title {
-  font-size: 14px;
+  font-size: 12px;
+  float: left;
+  width: 150px;
+}
+
+.media-property-renderer-title::first-letter {
+  text-transform: uppercase;
 }
 
 .media-property-renderer-contents {
-  position: absolute;
+  position: relative;
   left: 200px;
+}
+
+.media-property-renderer-contents > .json-view {
   overflow: hidden;
-  height: 20px;
+  padding: 0;
 }
 
 .media-property-renderer:nth-child(even) {
@@ -37,10 +48,18 @@
   background: var(--color-background-hover-overlay);
 }
 
+.media-property-renderer:has(.json-view) {
+  padding-bottom: 0;
+}
+
 .-theme-with-dark-background .media-property-renderer:nth-child(even) {
   background: rgb(41 41 41);
 }
 
+.media-property-renderer:has(.json-view > .expanded) {
+  padding-bottom: 4px;
+}
+
 .media-properties-frame {
   display: block;
   overflow-x: hidden;

package/front_end/panels/sources/NavigatorView.ts

@@ -1266,6 +1266,10 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  updateAccessibleName(): void {
+    UI.ARIAUtils.setAccessibleName(this.listItemElement, `${this.uiSourceCodeInternal.name()}, ${this.nodeType}`);
+  }
+
   get uiSourceCode(): Workspace.UISourceCode.UISourceCode {
     return this.uiSourceCodeInternal;
   }
@@ -1523,6 +1527,11 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
       tooltip = i18nString(UIStrings.sFromSourceMap, {PH1: this.uiSourceCodeInternal.displayName()});
     }
     this.treeElement.tooltip = tooltip;
+    this.treeElement.updateAccessibleName();
+
+    this.parent?.childrenInternal.delete(this.id);
+    this.id = 'UISourceCode:' + this.uiSourceCodeInternal.canononicalScriptId();
+    this.parent?.childrenInternal.set(this.id, this);
   }
 
   hasChildren(): boolean {

package/front_end/panels/sources/components/BreakpointsView.ts

@@ -119,19 +119,14 @@ export class BreakpointsView extends HTMLElement {
   }
 
   #renderBreakpointGroup(group: BreakpointGroup): LitHtml.TemplateResult {
-    const groupClassMap = {
-      'expanded': group.expanded,
-    };
     // clang-format off
     return LitHtml.html`
-      <div data-group='true' class=${LitHtml.Directives.classMap(groupClassMap)}>
-        <div class='group-header' @click=${(): void => this.#onGroupExpandToggled(group)}>
-            <span class='triangle'></span>
-            ${this.#renderFileIcon()}
-            <span class='group-header-title'>${group.name}</span>
-        </div>
-        ${group.expanded? LitHtml.html`
-          ${group.breakpointItems.map(entry => this.#renderBreakpointEntry(entry))}` : LitHtml.nothing}
+      <details data-group='true' ?open=${group.expanded} @click=${(e: Event): void => this.#onGroupExpandToggled(e, group)}>
+        <summary>
+          <span class='group-header'>${this.#renderFileIcon()}<span class='group-header-title'>${group.name}</span></span>
+        </summary>
+        ${LitHtml.html`
+          ${group.breakpointItems.map(entry => this.#renderBreakpointEntry(entry))}`}
       </div>
       `;
     // clang-format on
@@ -155,7 +150,7 @@ export class BreakpointsView extends HTMLElement {
 
     // clang-format off
     return LitHtml.html`
-    <div class=${LitHtml.Directives.classMap(classMap)} aria-label=${breakpointItemDescription}  tabIndex=${breakpointItem.isHit ? 0 : 1}>
+    <div class=${LitHtml.Directives.classMap(classMap)} aria-label=${breakpointItemDescription}  tabIndex=${breakpointItem.isHit ? 0 : -1}>
       <label class='checkbox-label'>
         <input type='checkbox' aria-label=${breakpointItem.location} ?indeterminate=${breakpointItem.status === BreakpointStatus.INDETERMINATE} ?checked=${breakpointItem.status === BreakpointStatus.ENABLED} @change=${(e: Event): void => this.#onCheckboxToggled(e, breakpointItem)}>
       </label>
@@ -185,10 +180,10 @@ export class BreakpointsView extends HTMLElement {
     return i18nString(UIStrings.breakpointHit, {PH1: checkboxDescription});
   }
 
-  #onGroupExpandToggled(group: BreakpointGroup): void {
-    group.expanded = !group.expanded;
-    this.dispatchEvent(new ExpandedStateChangedEvent(group.url, group.expanded));
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  #onGroupExpandToggled(e: Event, group: BreakpointGroup): void {
+    const detailsElement = e.target as HTMLDetailsElement;
+    group.expanded = detailsElement.open;
+    this.dispatchEvent(new ExpandedStateChangedEvent(group.url, detailsElement.open));
   }
 
   #onCheckboxToggled(e: Event, item: BreakpointItem): void {

package/front_end/panels/sources/components/breakpointsView.css

@@ -35,26 +35,34 @@ input {
   margin: 3px 0;
 }
 
-.triangle {
-  margin-left: 6px;
-  margin-right: 4px;
-  display: inline-block;
+details > summary {
+  height: 18px;
+  list-style: none;
+  display: flex;
+  padding: 4px 4px 4px 6px;
+  align-items: center;
+}
+
+details > summary::before {
+  display: block;
+  user-select: none;
   -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
   -webkit-mask-position: 0 0;
-  background-color: var(--color-text-primary);
+  background-color: var(--color-text-secondary);
+  content: "";
   height: 12px;
-  width: 8px;
+  width: 9px;
+  overflow: hidden;
 }
 
-.group-header {
-  display: flex;
-  align-items: center;
-  height: 18px;
+details[open] > summary::before {
+  -webkit-mask-position: -16px 0;
 }
 
-.expanded > .group-header > .triangle {
-  -webkit-mask-position: -16px 0;
+.group-header {
+  display: inline-flex;
+  align-items: center;
 }
 
 .group-header-title {
@@ -84,7 +92,7 @@ input {
 }
 
 .checkbox-label {
-  padding-left: 24px;
+  padding-left: 20px;
   display: flex;
   align-items: center;
 }

package/front_end/panels/timeline/TimelineLoader.ts

@@ -136,7 +136,7 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
     this.firstRawChunk = false;
 
     if (this.state === State.Initial) {
-      if (chunk.startsWith('{"nodes":[')) {
+      if (chunk.match(/^{(\s)*"nodes":(\s)*\[/)) {
         this.state = State.LoadingCPUProfileFormat;
       } else if (chunk[0] === '{') {
         this.state = State.LookingForEvents;

package/front_end/services/puppeteer/PuppeteerConnection.ts

@@ -100,7 +100,7 @@ export async function getPuppeteerConnection(
   );
 
   const [, browser] = await Promise.all([
-    connection.createSession({ targetId: mainTargetId }),
+    connection._createSession({targetId: mainTargetId}, /* emulateAutoAttach=*/ true),
     browserPromise,
   ]);