chrome-devtools-frontend 1.0.1010831 → 1.0.1011873

package/config/gni/devtools_grd_files.gni

@@ -544,6 +544,7 @@ grd_files_debug_sources = [
   "front_end/core/common/JavaScriptMetaData.js",
   "front_end/core/common/Lazy.js",
   "front_end/core/common/Linkifier.js",
+  "front_end/core/common/Mutex.js",
   "front_end/core/common/Object.js",
   "front_end/core/common/ParsedURL.js",
   "front_end/core/common/Progress.js",

package/docs/workflows.md

@@ -59,7 +59,7 @@ This works with Chromium 79 or later.
 **(Requires `brew install coreutils` on Mac.)**
 
 ```bash
-<path-to-chrome>/chrome --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
+<path-to-devtools-frontend>/third_party/chrome/chrome-<platform>/chrome --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
 ```
 
 Note that `$(realpath out/Default/gen/front_end)` expands to the absolute path to build artifacts for DevTools frontend.
@@ -79,7 +79,7 @@ Serve the content of `out/Default/gen/front_end` on a web server, e.g. via `pyth
 Then point to that web server when starting Chromium, for example:
 
 ```bash
-<path-to-chrome>/chrome --custom-devtools-frontend=http://localhost:8000/
+<path-to-devtools-frontend>/third_party/chrome/chrome-<platform>/chrome --custom-devtools-frontend=http://localhost:8000/
 ```
 
 Open DevTools via F12 on Windows/Linux or Cmd+Option+I on Mac.
@@ -91,7 +91,7 @@ Serve the content of `out/Default/gen/front_end` on a web server, e.g. via `pyth
 Then point to that web server when starting Chromium, for example:
 
 ```bash
-<path-to-chrome>/chrome --custom-devtools-frontend=http://localhost:8000/ --remote-debugging-port=9222
+<path-to-devtools-frontend>/third_party/chrome/chrome-<platform>/chrome --custom-devtools-frontend=http://localhost:8000/ --remote-debugging-port=9222
 ```
 
 In a regular Chrome tab, go to the URL `http://localhost:9222#custom=true`. It lists URLs that can be copied to new Chrome tabs to inspect individual debug targets.

package/front_end/core/common/Mutex.ts

@@ -0,0 +1,42 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+type ReleaseFn = () => void;
+
+/**
+ * Use Mutex class to coordinate local concurrent operations.
+ * Once `acquire` promise resolves, you hold the lock and must
+ * call `release` function returned by `acquire` to release the
+ * lock. Failing to `release` the lock may lead to deadlocks.
+ */
+export class Mutex {
+  #locked = false;
+  #acquiringQueue: Array<(release: ReleaseFn) => void> = [];
+
+  acquire(): Promise<ReleaseFn> {
+    let resolver = (_release: ReleaseFn): void => {};
+    const promise = new Promise<ReleaseFn>((resolve): void => {
+      resolver = resolve;
+    });
+    this.#acquiringQueue.push(resolver);
+    this.#processAcquiringQueue();
+    return promise;
+  }
+
+  #processAcquiringQueue(): void {
+    if (this.#locked) {
+      return;
+    }
+    const nextAquirePromise = this.#acquiringQueue.shift();
+    if (nextAquirePromise) {
+      this.#locked = true;
+      nextAquirePromise(this.#release.bind(this));
+    }
+  }
+
+  #release(): void {
+    this.#locked = false;
+    this.#processAcquiringQueue();
+  }
+}

package/front_end/core/common/common.ts

@@ -14,6 +14,7 @@ import * as EventTarget from './EventTarget.js';
 import * as JavaScriptMetaData from './JavaScriptMetaData.js';
 import * as Lazy from './Lazy.js';
 import * as Linkifier from './Linkifier.js';
+import * as Mutex from './Mutex.js';
 import * as ObjectWrapper from './Object.js';
 import * as ParsedURL from './ParsedURL.js';
 import * as Progress from './Progress.js';
@@ -58,6 +59,7 @@ export {
   JavaScriptMetaData,
   Lazy,
   Linkifier,
+  Mutex,
   ObjectWrapper,
   ParsedURL,
   Progress,

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -315,7 +315,7 @@ export class CSSMatchedStyles {
     for (let i = 0; i < pseudoPayload.length; ++i) {
       const entryPayload = pseudoPayload[i];
       // PseudoElement nodes are not created unless "content" css property is set.
-      const pseudoElement = this.#nodeInternal.pseudoElements().get(entryPayload.pseudoType) || null;
+      const pseudoElement = this.#nodeInternal.pseudoElements().get(entryPayload.pseudoType)?.at(-1) || null;
       const pseudoStyles = [];
       const rules = entryPayload.matches || [];
 

package/front_end/core/sdk/DOMModel.ts

@@ -69,7 +69,7 @@ export class DOMNode {
   #xmlVersion!: string|undefined;
   #isSVGNodeInternal!: boolean;
   #creationStackTraceInternal: Promise<Protocol.Runtime.StackTrace|null>|null;
-  pseudoElementsInternal: Map<string, DOMNode>;
+  #pseudoElements: Map<string, DOMNode[]>;
   #distributedNodesInternal: DOMNodeShortcut[];
   assignedSlot: DOMNodeShortcut|null;
   readonly shadowRootsInternal: DOMNode[];
@@ -100,7 +100,7 @@ export class DOMNode {
     this.#agent = this.#domModelInternal.getAgent();
     this.index = undefined;
     this.#creationStackTraceInternal = null;
-    this.pseudoElementsInternal = new Map();
+    this.#pseudoElements = new Map();
     this.#distributedNodesInternal = [];
     this.assignedSlot = null;
     this.shadowRootsInternal = [];
@@ -319,32 +319,33 @@ export class DOMNode {
   }
 
   hasPseudoElements(): boolean {
-    return this.pseudoElementsInternal.size > 0;
+    return this.#pseudoElements.size > 0;
   }
 
-  pseudoElements(): Map<string, DOMNode> {
-    return this.pseudoElementsInternal;
+  pseudoElements(): Map<string, DOMNode[]> {
+    return this.#pseudoElements;
   }
 
-  beforePseudoElement(): DOMNode|null {
-    if (!this.pseudoElementsInternal) {
-      return null;
-    }
-    return this.pseudoElementsInternal.get(DOMNode.PseudoElementNames.Before) || null;
+  beforePseudoElement(): DOMNode|undefined {
+    return this.#pseudoElements.get(DOMNode.PseudoElementNames.Before)?.at(-1);
   }
 
-  afterPseudoElement(): DOMNode|null {
-    if (!this.pseudoElementsInternal) {
-      return null;
-    }
-    return this.pseudoElementsInternal.get(DOMNode.PseudoElementNames.After) || null;
+  afterPseudoElement(): DOMNode|undefined {
+    return this.#pseudoElements.get(DOMNode.PseudoElementNames.After)?.at(-1);
   }
 
-  markerPseudoElement(): DOMNode|null {
-    if (!this.pseudoElementsInternal) {
-      return null;
-    }
-    return this.pseudoElementsInternal.get(DOMNode.PseudoElementNames.Marker) || null;
+  markerPseudoElement(): DOMNode|undefined {
+    return this.#pseudoElements.get(DOMNode.PseudoElementNames.Marker)?.at(-1);
+  }
+
+  pageTransitionPseudoElements(): DOMNode[] {
+    return [
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransition) || [],
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransitionContainer) || [],
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransitionImageWrapper) || [],
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransitionOutgoingImage) || [],
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransitionIncomingImage) || [],
+    ];
   }
 
   hasAssignedSlot(): boolean {
@@ -632,7 +633,12 @@ export class DOMNode {
   removeChild(node: DOMNode): void {
     const pseudoType = node.pseudoType();
     if (pseudoType) {
-      this.pseudoElementsInternal.delete(pseudoType);
+      const updatedPseudoElements = this.#pseudoElements.get(pseudoType)?.filter(element => element !== node);
+      if (updatedPseudoElements && updatedPseudoElements.length > 0) {
+        this.#pseudoElements.set(pseudoType, updatedPseudoElements);
+      } else {
+        this.#pseudoElements.delete(pseudoType);
+      }
     } else {
       const shadowRootIndex = this.shadowRootsInternal.indexOf(node);
       if (shadowRootIndex !== -1) {
@@ -678,7 +684,12 @@ export class DOMNode {
       if (!pseudoType) {
         throw new Error('DOMNode.pseudoType() is expected to be defined.');
       }
-      this.pseudoElementsInternal.set(pseudoType, node);
+      const currentPseudoElements = this.#pseudoElements.get(pseudoType);
+      if (currentPseudoElements) {
+        currentPseudoElements.push(node);
+      } else {
+        this.#pseudoElements.set(pseudoType, [node]);
+      }
     }
   }
 
@@ -960,6 +971,11 @@ export namespace DOMNode {
     Before = 'before',
     After = 'after',
     Marker = 'marker',
+    PageTransition = 'page-transition',
+    PageTransitionContainer = 'page-transition-container',
+    PageTransitionImageWrapper = 'page-transition-image-wrapper',
+    PageTransitionOutgoingImage = 'page-transition-outgoing-image',
+    PageTransitionIncomingImage = 'page-transition-incoming-image',
   }
 
   // TODO(crbug.com/1167717): Make this a const enum again
@@ -1375,11 +1391,15 @@ export class DOMModel extends SDKModel<EventTypes> {
     if (!pseudoType) {
       throw new Error('DOMModel._pseudoElementAdded expects pseudoType to be defined.');
     }
-    const previousPseudoType = parent.pseudoElements().get(pseudoType);
-    if (previousPseudoType) {
-      throw new Error('DOMModel._pseudoElementAdded expects parent to not already have this pseudo type added.');
+    const currentPseudoElements = parent.pseudoElements().get(pseudoType);
+    if (currentPseudoElements) {
+      Platform.DCHECK(
+          () => pseudoType.startsWith('page-transition'),
+          'DOMModel.pseudoElementAdded expects parent to not already have this pseudo type added; only page-transition* pseudo elements can coexist under the same parent.');
+      currentPseudoElements.push(node);
+    } else {
+      parent.pseudoElements().set(pseudoType, [node]);
     }
-    parent.pseudoElements().set(pseudoType, node);
     this.dispatchEventToListeners(Events.NodeInserted, node);
     this.scheduleMutationEvent(node);
   }
@@ -1420,7 +1440,9 @@ export class DOMModel extends SDKModel<EventTypes> {
     }
     const pseudoElements = node.pseudoElements();
     for (const value of pseudoElements.values()) {
-      this.unbind(value);
+      for (const pseudoElement of value) {
+        this.unbind(pseudoElement);
+      }
     }
     const templateContent = node.templateContent();
     if (templateContent) {

package/front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js

@@ -64,7 +64,7 @@ ElementsTestRunner.findNode = async function(matchFunction, callback) {
       }
 
       const pseudoElementsMap = node.pseudoElements();
-      const pseudoElements = pseudoElementsMap ? [...pseudoElementsMap.values()] : [];
+      const pseudoElements = pseudoElementsMap ? [...pseudoElementsMap.values()].flat() : [];
       const children = (node.children() || []).concat(node.shadowRoots()).concat(pseudoElements);
       if (node.templateContent()) {
         children.push(node.templateContent());

package/front_end/models/bindings/BreakpointManager.ts

@@ -133,7 +133,7 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     }
 
     const debuggerModel = script.debuggerModel;
-    const uiSourceCode = await this.getUpdatedUISourceCode(script);
+    const uiSourceCode = await this.getUISourceCodeWithUpdatedBreakpointInfo(script);
     if (this.#hasBreakpointsForUrl(script.sourceURL)) {
       await this.#restoreBreakpointsForUrl(uiSourceCode);
     }
@@ -165,7 +165,8 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     }
   }
 
-  async getUpdatedUISourceCode(script: SDK.Script.Script): Promise<Workspace.UISourceCode.UISourceCode> {
+  async getUISourceCodeWithUpdatedBreakpointInfo(script: SDK.Script.Script):
+      Promise<Workspace.UISourceCode.UISourceCode> {
     const isSnippet = script.sourceURL.startsWith('snippet://');
     const projectType = isSnippet ? Workspace.Workspace.projectTypes.Network : undefined;
 

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -8,6 +8,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as Bindings from '../bindings/bindings.js';
 import * as Workspace from '../workspace/workspace.js';
 
 import type {FileSystem} from './FileSystemWorkspaceBinding.js';
@@ -35,6 +36,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
   private enabled: boolean;
   private eventDescriptors: Common.EventTarget.EventDescriptor[];
   #headerOverridesMap: Map<Platform.DevToolsPath.EncodedPathString, HeaderOverrideWithRegex[]> = new Map();
+  readonly #sourceCodeToBindProcessMutex = new WeakMap<Workspace.UISourceCode.UISourceCode, Common.Mutex.Mutex>();
 
   private constructor(workspace: Workspace.Workspace.WorkspaceImpl) {
     super();
@@ -66,6 +68,8 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     });
 
     PersistenceImpl.instance().addNetworkInterceptor(this.canHandleNetworkUISourceCode.bind(this));
+    Bindings.BreakpointManager.BreakpointManager.instance().addUpdateBindingsCallback(
+        this.networkUISourceCodeAdded.bind(this));
 
     this.eventDescriptors = [];
     void this.enabledChanged();
@@ -301,24 +305,63 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     return path;
   }
 
-  private async unbind(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
+  async #unbind(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
     const binding = this.bindings.get(uiSourceCode);
     if (binding) {
-      this.bindings.delete(binding.network);
-      this.bindings.delete(binding.fileSystem);
-      await PersistenceImpl.instance().removeBinding(binding);
+      const mutex = this.#getOrCreateMutex(binding.network);
+      const release = await mutex.acquire();
+      await this.#innerUnbind(binding);
+      release();
     }
   }
 
-  private async bind(
+  async #unbindUnguarded(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
+    const binding = this.bindings.get(uiSourceCode);
+    if (binding) {
+      await this.#innerUnbind(binding);
+    }
+  }
+
+  #innerUnbind(binding: PersistenceBinding): Promise<void> {
+    this.bindings.delete(binding.network);
+    this.bindings.delete(binding.fileSystem);
+    return PersistenceImpl.instance().removeBinding(binding);
+  }
+
+  async #bind(
       networkUISourceCode: Workspace.UISourceCode.UISourceCode,
       fileSystemUISourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
-    if (this.bindings.has(networkUISourceCode)) {
-      await this.unbind(networkUISourceCode);
+    const mutex = this.#getOrCreateMutex(networkUISourceCode);
+    const release = await mutex.acquire();
+    try {
+      const existingBinding = this.bindings.get(networkUISourceCode);
+      if (existingBinding) {
+        const {network, fileSystem} = existingBinding;
+        if (networkUISourceCode === network && fileSystemUISourceCode === fileSystem) {
+          return;
+        }
+      }
+
+      await this.#unbindUnguarded(networkUISourceCode);
+      await this.#unbindUnguarded(fileSystemUISourceCode);
+      await this.#innerAddBinding(networkUISourceCode, fileSystemUISourceCode);
+    } finally {
+      release();
     }
-    if (this.bindings.has(fileSystemUISourceCode)) {
-      await this.unbind(fileSystemUISourceCode);
+  }
+
+  #getOrCreateMutex(networkUISourceCode: Workspace.UISourceCode.UISourceCode): Common.Mutex.Mutex {
+    let mutex = this.#sourceCodeToBindProcessMutex.get(networkUISourceCode);
+    if (!mutex) {
+      mutex = new Common.Mutex.Mutex();
+      this.#sourceCodeToBindProcessMutex.set(networkUISourceCode, mutex);
     }
+    return mutex;
+  }
+
+  async #innerAddBinding(
+      networkUISourceCode: Workspace.UISourceCode.UISourceCode,
+      fileSystemUISourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
     const binding = new PersistenceBinding(networkUISourceCode, fileSystemUISourceCode);
     this.bindings.set(networkUISourceCode, binding);
     this.bindings.set(fileSystemUISourceCode, binding);
@@ -394,7 +437,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     const project = this.projectInternal as FileSystem;
     const fileSystemUISourceCode = project.uiSourceCodeForURL(this.fileUrlFromNetworkUrl(url));
     if (fileSystemUISourceCode) {
-      await this.bind(uiSourceCode, fileSystemUISourceCode);
+      await this.#bind(uiSourceCode, fileSystemUISourceCode);
     }
   }
 
@@ -408,7 +451,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     const networkUISourceCode =
         this.networkUISourceCodeForEncodedPath.get(Common.ParsedURL.ParsedURL.join(relativePath, '/'));
     if (networkUISourceCode) {
-      await this.bind(networkUISourceCode, uiSourceCode);
+      await this.#bind(networkUISourceCode, uiSourceCode);
     }
   }
 
@@ -521,7 +564,8 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
 
   private async networkUISourceCodeRemoved(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
     if (uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network) {
-      await this.unbind(uiSourceCode);
+      await this.#unbind(uiSourceCode);
+      this.#sourceCodeToBindProcessMutex.delete(uiSourceCode);
       this.networkUISourceCodeForEncodedPath.delete(this.encodedPathFromUrl(uiSourceCode.url()));
     }
   }
@@ -532,7 +576,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     }
     this.updateInterceptionPatterns();
     this.originalResponseContentPromises.delete(uiSourceCode);
-    await this.unbind(uiSourceCode);
+    await this.#unbind(uiSourceCode);
   }
 
   async setProject(project: Workspace.Workspace.Project|null): Promise<void> {

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1218,6 +1218,8 @@ export class ElementsTreeOutline extends
       visibleChildren.push(templateContent);
     }
 
+    visibleChildren.push(...node.pageTransitionPseudoElements());
+
     const markerPseudoElement = node.markerPseudoElement();
     if (markerPseudoElement) {
       visibleChildren.push(markerPseudoElement);

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -110,8 +110,14 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
       multiplier = 5;
     }
 
+    let contentTypeBonus = 0;
+    if (uiSourceCode.contentType().isFromSourceMap()) {
+      contentTypeBonus = 100;
+      // Maybe also have a bonus for being a script?
+    }
+
     const fullDisplayName = uiSourceCode.fullDisplayName();
-    return score + multiplier * this.scorer.calculateScore(fullDisplayName, null);
+    return score + multiplier * (contentTypeBonus + this.scorer.calculateScore(fullDisplayName, null));
   }
 
   renderItem(itemIndex: number, query: string, titleElement: Element, subtitleElement: Element): void {

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -454,6 +454,9 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
   #removeAuthenticatorSections(): void {
     this.#authenticatorsView.innerHTML = '';
+    for (const dataGrid of this.#dataGrids.values()) {
+      dataGrid.asWidget().detach();
+    }
     this.#dataGrids.clear();
   }
 
@@ -788,7 +791,11 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
         child.remove();
       }
     }
-    this.#dataGrids.delete(authenticatorId);
+    const dataGrid = this.#dataGrids.get(authenticatorId);
+    if (dataGrid) {
+      dataGrid.asWidget().detach();
+      this.#dataGrids.delete(authenticatorId);
+    }
 
     if (this.#model) {
       void this.#model.removeAuthenticator(authenticatorId);

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

@@ -25,7 +25,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  overflow: overlay;
+  overflow: scroll;
   transform: translateZ(0);
   background-color: var(--color-background);
 }

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1010831"
+  "version": "1.0.1011873"
 }