chrome-devtools-frontend 1.0.1011333 → 1.0.1012587

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -1247,7 +1247,7 @@ export const NativeFunctions = [
   },
   {
     name: 'add',
-    signatures: [['install_url']],
+    signatures: [['sub_apps']],
     receivers: ['SubApps']
   },
   {
@@ -1745,11 +1745,6 @@ export const NativeFunctions = [
     name: 'replaceWith',
     signatures: [['...nodes']]
   },
-  {
-    name: 'read',
-    signatures: [['?options']],
-    receivers: ['Clipboard']
-  },
   {
     name: 'read',
     signatures: [['view']],
@@ -2572,7 +2567,7 @@ export const NativeFunctions = [
   {
     name: 'focus',
     signatures: [['focus_behavior']],
-    receivers: ['FocusableMediaStreamTrack']
+    receivers: ['BrowserCaptureMediaStreamTrack','FocusableMediaStreamTrack']
   },
   {
     name: 'assign',
@@ -5898,10 +5893,6 @@ export const NativeFunctions = [
     name: 'registerProperty',
     signatures: [['definition']]
   },
-  {
-    name: 'setElement',
-    signatures: [['element','tag','?options']]
-  },
   {
     name: 'timeout',
     signatures: [['milliseconds']]
@@ -6767,7 +6758,7 @@ export const NativeFunctions = [
   },
   {
     name: 'ClipboardItem',
-    signatures: [['items','?options']]
+    signatures: [['items']]
   },
   {
     name: 'CompressionStream',
@@ -7113,6 +7104,10 @@ export const NativeFunctions = [
     name: 'cropTo',
     signatures: [['crop_id']]
   },
+  {
+    name: 'fromElement',
+    signatures: [['element']]
+  },
   {
     name: 'getDisplayMediaSet',
     signatures: [['?constraints']]
@@ -7121,10 +7116,6 @@ export const NativeFunctions = [
     name: 'setCaptureHandleConfig',
     signatures: [['?config']]
   },
-  {
-    name: 'produceCropId',
-    signatures: [['target']]
-  },
   {
     name: 'MediaStreamEvent',
     signatures: [['type','?eventInitDict']]
@@ -7399,7 +7390,7 @@ export const NativeFunctions = [
   },
   {
     name: 'requestPictureInPictureWindow',
-    signatures: [['options']]
+    signatures: [['?options']]
   },
   {
     name: 'PresentationConnectionAvailableEvent',

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,66 @@ 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();
+      try {
+        await this.#innerUnbind(binding);
+      } finally {
+        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 +440,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 +454,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 +567,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 +579,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/application/DOMStorageItemsView.ts

@@ -53,14 +53,14 @@ const UIStrings = {
   */
   value: 'Value',
   /**
-  *@description Data grid name for DOM Storage Items data grids
+  *@description Name for the "DOM Storage Items" table that shows the content of the DOM Storage.
   */
   domStorageItems: 'DOM Storage Items',
   /**
-   *@description Text for announcing number of entries after filtering
-   *@example {'DOM Storage Items'} PH1
+   *@description Text for announcing that the "DOM Storage Items" table was cleared, that is, all
+   * entries were deleted.
    */
-  domStorageItemsCleared: '{PH1} cleared',
+  domStorageItemsCleared: 'DOM Storage Items cleared',
   /**
   *@description Text in DOMStorage Items View of the Application panel
   */
@@ -154,7 +154,7 @@ export class DOMStorageItemsView extends StorageItemsView {
 
     this.dataGrid.rootNode().removeChildren();
     this.dataGrid.addCreationNode(false);
-    UI.ARIAUtils.alert(i18nString(UIStrings.domStorageItemsCleared, {PH1: this.dataGrid.displayName}));
+    UI.ARIAUtils.alert(i18nString(UIStrings.domStorageItemsCleared));
     this.setCanDeleteSelected(false);
   }
 

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/profiler/HeapSnapshotView.ts

@@ -181,7 +181,9 @@ const UIStrings = {
   heapSnapshotProfilesShowMemory:
       'Heap snapshot profiles show memory distribution among your page\'s JavaScript objects and related DOM nodes.',
   /**
-  *@description Text in Heap Snapshot View of a profiler tool
+  *@description Label for a checkbox in the heap snapshot view of the profiler tool. The "heap snapshot" contains the
+  * current state of JavaScript memory. With this checkbox enabled, the snapshot also includes internal data that is
+  * specific to Chrome (hence implementation-specific).
   */
   exposeInternals: 'Expose internals (includes additional implementation-specific details)',
   /**

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/sources/NavigatorView.ts

@@ -32,6 +32,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
@@ -64,10 +65,18 @@ const UIStrings = {
   /**
   *@description Text in Navigator View of the Sources panel
   */
+  authoredTooltip: 'Contains original sources',
+  /**
+  *@description Text in Navigator View of the Sources panel
+  */
   deployed: 'Deployed',
   /**
   *@description Text in Navigator View of the Sources panel
   */
+  deployedTooltip: 'Contains final sources the browser sees',
+  /**
+  *@description Text in Navigator View of the Sources panel
+  */
   areYouSureYouWantToExcludeThis: 'Are you sure you want to exclude this folder?',
   /**
   *@description Text in Navigator View of the Sources panel
@@ -162,7 +171,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private navigatorGroupByFolderSetting: Common.Settings.Setting<any>;
-  private navigatorGroupByAuthoredSetting: Common.Settings.Setting<boolean>;
+  private navigatorGroupByAuthoredExperiment?: string;
   private workspaceInternal!: Workspace.Workspace.WorkspaceImpl;
   private lastSelectedUISourceCode?: Workspace.UISourceCode.UISourceCode;
   private groupByFrame?: boolean;
@@ -173,7 +182,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private groupByFolder?: any;
-  constructor() {
+  constructor(enableAuthoredGrouping?: boolean) {
     super(true);
 
     this.placeholder = null;
@@ -198,9 +207,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
 
     this.navigatorGroupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByFolder');
     this.navigatorGroupByFolderSetting.addChangeListener(this.groupingChanged.bind(this));
-    this.navigatorGroupByAuthoredSetting =
-        Common.Settings.Settings.instance().moduleSetting('navigatorGroupByAuthored');
-    this.navigatorGroupByAuthoredSetting.addChangeListener(this.groupingChanged.bind(this));
+    if (enableAuthoredGrouping) {
+      this.navigatorGroupByAuthoredExperiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
+    }
 
     this.initGrouping();
 
@@ -686,8 +695,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       NavigatorTreeNode {
     if (this.groupByAuthored && isAuthored) {
       if (!this.authoredNode) {
-        this.authoredNode =
-            new NavigatorGroupTreeNode(this, null, 'group:Authored', Types.Authored, UIStrings.authored);
+        this.authoredNode = new NavigatorGroupTreeNode(
+            this, null, 'group:Authored', Types.Authored, i18nString(UIStrings.authored),
+            i18nString(UIStrings.authoredTooltip));
         this.rootNode.appendChild(this.authoredNode);
         this.authoredNode.treeNode().expand();
       }
@@ -712,8 +722,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   private rootOrDeployedNode(): NavigatorTreeNode {
     if (this.groupByAuthored) {
       if (!this.deployedNode) {
-        this.deployedNode =
-            new NavigatorGroupTreeNode(this, null, 'group:Deployed', Types.Deployed, UIStrings.deployed);
+        this.deployedNode = new NavigatorGroupTreeNode(
+            this, null, 'group:Deployed', Types.Deployed, i18nString(UIStrings.deployed),
+            i18nString(UIStrings.deployedTooltip));
         this.rootNode.appendChild(this.deployedNode);
       }
       return this.deployedNode;
@@ -1007,10 +1018,17 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
   }
 
+  /**
+   * Subclasses can override to listen to grouping changes.
+   */
+  onGroupingChanged(): void {
+  }
+
   private groupingChanged(): void {
     this.reset(true);
     this.initGrouping();
     // Reset the workspace to repopulate filesystem folders.
+    this.onGroupingChanged();
     this.resetWorkspace(Workspace.Workspace.WorkspaceImpl.instance());
     this.workspaceInternal.uiSourceCodes().forEach(this.addUISourceCode.bind(this));
   }
@@ -1019,7 +1037,11 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     this.groupByFrame = true;
     this.groupByDomain = this.navigatorGroupByFolderSetting.get();
     this.groupByFolder = this.groupByDomain;
-    this.groupByAuthored = this.navigatorGroupByAuthoredSetting.get();
+    if (this.navigatorGroupByAuthoredExperiment) {
+      this.groupByAuthored = Root.Runtime.experiments.isEnabled(this.navigatorGroupByAuthoredExperiment);
+    } else {
+      this.groupByAuthored = false;
+    }
   }
 
   private resetForTest(): void {
@@ -1130,14 +1152,18 @@ export class NavigatorFolderTreeElement extends UI.TreeOutline.TreeElement {
 
   setNode(node: NavigatorTreeNode): void {
     this.node = node;
-    const paths = [];
-    let currentNode: NavigatorTreeNode|null = node;
-    while (currentNode && !currentNode.isRoot()) {
-      paths.push(currentNode.title);
-      currentNode = currentNode.parent;
-    }
-    paths.reverse();
-    this.tooltip = paths.join('/');
+    if (node.tooltip) {
+      this.tooltip = node.tooltip;
+    } else {
+      const paths = [];
+      let currentNode: NavigatorTreeNode|null = node;
+      while (currentNode && !currentNode.isRoot() && currentNode.type === node.type) {
+        paths.push(currentNode.title);
+        currentNode = currentNode.parent;
+      }
+      paths.reverse();
+      this.tooltip = paths.join('/');
+    }
     UI.ARIAUtils.setAccessibleName(this.listItemElement, `${this.title}, ${this.nodeType}`);
   }
 
@@ -1303,12 +1329,14 @@ export class NavigatorTreeNode {
   isMerged: boolean;
   parent!: NavigatorTreeNode|null;
   title!: string;
+  tooltip?: string;
 
-  constructor(navigatorView: NavigatorView, id: string, type: string) {
+  constructor(navigatorView: NavigatorView, id: string, type: string, tooltip?: string) {
     this.id = id;
     this.navigatorView = navigatorView;
     this.type = type;
     this.childrenInternal = new Map();
+    this.tooltip = tooltip;
 
     this.populated = false;
     this.isMerged = false;
@@ -1719,9 +1747,9 @@ export class NavigatorGroupTreeNode extends NavigatorTreeNode {
   private hoverCallback?: ((arg0: boolean) => void);
   private treeElement?: NavigatorFolderTreeElement;
   constructor(
-      navigatorView: NavigatorView, project: Workspace.Workspace.Project|null, id: string, type: string,
-      title: string) {
-    super(navigatorView, id, type);
+      navigatorView: NavigatorView, project: Workspace.Workspace.Project|null, id: string, type: string, title: string,
+      tooltip?: string) {
+    super(navigatorView, id, type, tooltip);
     this.project = project;
     this.title = title;
     this.populate();

package/front_end/panels/sources/SourcesNavigator.ts

@@ -32,14 +32,17 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as Feedback from '../../ui/components/panel_feedback/panel_feedback.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
 
 import type {NavigatorUISourceCodeTreeNode} from './NavigatorView.js';
 import {NavigatorView} from './NavigatorView.js';
+import sourcesNavigatorStyles from './sourcesNavigator.css.js';
 
 const UIStrings = {
   /**
@@ -100,20 +103,61 @@ const UIStrings = {
   *@description Text to save content as a specific file type
   */
   saveAs: 'Save as...',
+  /**
+   *@description Description of the new experimental Authored/Deployed view
+   */
+  authoredDescription: 'Group files by Authored/Deployed',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesNavigator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let networkNavigatorViewInstance: NetworkNavigatorView;
 
 export class NetworkNavigatorView extends NavigatorView {
+  private previewToggle: Feedback.PreviewToggle.PreviewToggle;
   private constructor() {
-    super();
+    super(true);
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.InspectedURLChanged, this.inspectedURLChanged, this);
 
+    this.previewToggle = new Feedback.PreviewToggle.PreviewToggle();
+    this.onGroupingChanged();
+
+    const div = UI.Fragment.html`<div class="border-container"></div>`;
+    div.append(this.previewToggle);
+    this.contentElement.prepend(div);
+
     // Record the sources tool load time after the file navigator has loaded.
     Host.userMetrics.panelLoaded('sources', 'DevTools.Launch.Sources');
   }
+
+  onGroupingChanged(): void {
+    // Setting the data will re-render it.
+    this.previewToggle.data = {
+      name: i18nString(UIStrings.authoredDescription),
+      helperText: null,
+      experiment: Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING,
+      learnMoreURL: 'https://goo.gle/authored-deployed',
+      feedbackURL: 'https://goo.gle/authored-deployed-feedback',
+      onChangeCallback: this.onAuthoredDeployedChanged,
+    };
+  }
+
+  wasShown(): void {
+    this.registerCSSFiles([sourcesNavigatorStyles]);
+    super.wasShown();
+  }
+
+  private onAuthoredDeployedChanged(checked: boolean): void {
+    Host.userMetrics.experimentChanged(Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING, checked);
+    // Need to signal to the NavigatorView that grouping has changed. Unfortunately,
+    // it can't listen to an experiment, and this class doesn't directly interact
+    // with it, so we will convince it a different grouping setting changed. When we switch
+    // from using an experiment to a setting, it will listen to that setting and we
+    // won't need to do this.
+    const groupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByFolder');
+    groupByFolderSetting.set(groupByFolderSetting.get());
+  }
+
   static instance(opts: {
     forceNew: boolean|null,
   } = {forceNew: null}): NetworkNavigatorView {

package/front_end/panels/sources/SourcesPanel.ts

@@ -32,10 +32,12 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Extensions from '../../models/extensions/extensions.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
@@ -108,7 +110,7 @@ const UIStrings = {
   /**
   *@description Text in Sources Panel of the Sources panel
   */
-  groupByAuthored: 'Group by Authored/Deployed (experimental)',
+  groupByAuthored: 'Group by Authored/Deployed',
   /**
   *@description Text for pausing the debugger on exceptions
   */
@@ -547,16 +549,36 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     }
   }
 
+  private toggleAuthoredDeployedExperiment(): void {
+    const experiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
+    const checked = Root.Runtime.experiments.isEnabled(experiment);
+    Root.Runtime.experiments.setEnabled(experiment, !checked);
+    Host.userMetrics.experimentChanged(experiment, checked);
+    // Need to signal to the NavigatorView that grouping has changed. Unfortunately,
+    // it can't listen to an experiment, and this class doesn't directly interact
+    // with it, so we will convince it a different grouping setting changed. When we switch
+    // from using an experiment to a setting, it will listen to that setting and we
+    // won't need to do this.
+    const groupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByFolder');
+    groupByFolderSetting.set(groupByFolderSetting.get());
+  }
+
   private populateNavigatorMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
     const groupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByFolder');
     contextMenu.appendItemsAtLocation('navigatorMenu');
     contextMenu.viewSection().appendCheckboxItem(
         i18nString(UIStrings.groupByFolder), () => groupByFolderSetting.set(!groupByFolderSetting.get()),
         groupByFolderSetting.get());
-    const groupByAuthoredSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByAuthored');
+    const previewIcon = new IconButton.Icon.Icon();
+    const experiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
+    previewIcon.data = {
+      iconName: 'ic_preview_feature',
+      color: 'var(--icon-color)',
+      width: '14px',
+    };
     contextMenu.viewSection().appendCheckboxItem(
-        i18nString(UIStrings.groupByAuthored), () => groupByAuthoredSetting.set(!groupByAuthoredSetting.get()),
-        groupByAuthoredSetting.get());
+        i18nString(UIStrings.groupByAuthored), this.toggleAuthoredDeployedExperiment,
+        Root.Runtime.experiments.isEnabled(experiment), false, previewIcon);
   }
 
   setIgnoreExecutionLineEvents(ignoreExecutionLineEvents: boolean): void {

package/front_end/panels/sources/navigatorTree.css

@@ -91,6 +91,10 @@
   background-color: var(--override-folder-tree-item-color);
 }
 
+.navigator-folder-tree-item.force-white-icons {
+  --icon-color: var(--override-force-white-icons-background);
+}
+
 .navigator-sm-folder-tree-item .icon,
 .navigator-fs-tree-item .icon,
 .navigator-fs-folder-tree-item .icon {

package/front_end/panels/sources/sourcesNavigator.css

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+.border-container {
+  border-bottom: 1px solid var(--color-details-hairline);
+  flex-shrink: 0;
+}

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);