chrome-devtools-frontend 1.0.1011873 → 1.0.1013237

package/front_end/panels/application/AppManifestView.ts

@@ -15,6 +15,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as ApplicationComponents from './components/components.js';
 
 const UIStrings = {
   /**
@@ -44,6 +45,10 @@ const UIStrings = {
   /**
   *@description Text in App Manifest View of the Application panel
   */
+  protocolHandlers: 'Protocol Handlers',
+  /**
+  *@description Text in App Manifest View of the Application panel
+  */
   icons: 'Icons',
   /**
   *@description Text for the name of something
@@ -423,6 +428,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
   private target?: SDK.Target.Target;
   private resourceTreeModel?: SDK.ResourceTreeModel.ResourceTreeModel|null;
   private serviceWorkerManager?: SDK.ServiceWorkerManager.ServiceWorkerManager|null;
+  private protocolHandlersView: ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView;
   constructor() {
     super(true);
 
@@ -448,8 +454,10 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.errorsSection = this.reportView.appendSection(i18nString(UIStrings.errorsAndWarnings));
     this.installabilitySection = this.reportView.appendSection(i18nString(UIStrings.installability));
     this.identitySection = this.reportView.appendSection(i18nString(UIStrings.identity));
-
     this.presentationSection = this.reportView.appendSection(i18nString(UIStrings.presentation));
+    const protocolHandlersSection = this.reportView.appendSection(i18nString(UIStrings.protocolHandlers));
+    this.protocolHandlersView = new ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView();
+    protocolHandlersSection.contentElement.append(this.protocolHandlersView);
     this.iconsSection = this.reportView.appendSection(i18nString(UIStrings.icons), 'report-section-icons');
     this.shortcutSections = [];
     this.screenshotsSections = [];
@@ -701,6 +709,9 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
       this.newNoteUrlField.appendChild(link);
     }
 
+    const protocolHandlers = parsedManifest['protocol_handlers'] || [];
+    this.protocolHandlersView.data = {protocolHandlers, manifestLink: url};
+
     const icons = parsedManifest['icons'] || [];
     this.iconsSection.clearContent();
 

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/application/components/ProtocolHandlersView.ts

@@ -0,0 +1,182 @@
+// 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.
+
+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 Buttons from '../../../ui/components/buttons/buttons.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as Input from '../../../ui/components/input/input.js';
+// inspectorCommonStyles is imported for the chrome-select class that is used for the dropdown
+// eslint-disable-next-line rulesdir/es_modules_import
+import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import protocolHandlersViewStyles from './protocolHandlersView.css.js';
+
+const PROTOCOL_DOCUMENT_URL = 'https://web.dev/url-protocol-handler/';
+const UIStrings = {
+  /**
+ *@description Status message for when protocol handlers are detected in the manifest
+ *@example {protocolhandler/manifest.json} PH1
+ */
+  protocolDetected:
+      'Found valid protocol handler registration in the {PH1}. With the app installed, test the registered protocols.',
+  /**
+ *@description Status message for when protocol handlers are not detected in the manifest
+ *@example {protocolhandler/manifest.json} PH1
+ */
+  protocolNotDetected:
+      'Define protocol handlers in the {PH1} to register your app as a handler for custom protocols when your app is installed.',
+  /**
+ *@description Text wrapping a link pointing to more information on handling protocol handlers
+ *@example {https://example.com/} PH1
+ */
+  needHelpReadOur: 'Need help? Read {PH1}.',
+  /**
+ *@description Link text for more information on URL protocol handler registrations for PWAs
+ */
+  protocolHandlerRegistrations: 'URL protocol handler registration for PWAs',
+  /**
+ *@description In text hyperlink to the PWA manifest
+ */
+  manifest: 'manifest',
+  /**
+ *@description Text for test protocol button
+ */
+  testProtocol: 'Test protocol',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/ProtocolHandlersView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface HTMLSelectElementEvent extends Event {
+  target: HTMLSelectElement;
+}
+
+interface HTMLInputElementEvent extends Event {
+  target: HTMLInputElement;
+}
+
+export interface ProtocolHandler {
+  protocol: string;
+  url: string;
+}
+
+export interface ProtocolHandlersData {
+  protocolHandlers: ProtocolHandler[];
+  manifestLink: Platform.DevToolsPath.UrlString;
+}
+
+export class ProtocolHandlersView extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-protocol-handlers-view`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #protocolHandlers: ProtocolHandler[] = [];
+  #manifestLink: Platform.DevToolsPath.UrlString = Platform.DevToolsPath.EmptyUrlString;
+  #selectedProtocolState: string = '';
+  #queryInputState: string = '';
+
+  set data(data: ProtocolHandlersData) {
+    const isNewManifest = this.#manifestLink !== data.manifestLink;
+    this.#protocolHandlers = data.protocolHandlers;
+    this.#manifestLink = data.manifestLink;
+    if (isNewManifest) {
+      this.#update();
+    }
+  }
+
+  #update(): void {
+    this.#queryInputState = '';
+    this.#selectedProtocolState = this.#protocolHandlers[0]?.protocol ?? '';
+    this.#render();
+  }
+
+  #renderStatusMessage(): LitHtml.TemplateResult {
+    const manifestInTextLink = UI.XLink.XLink.create(this.#manifestLink, i18nString(UIStrings.manifest));
+    const statusString = this.#protocolHandlers.length > 0 ? UIStrings.protocolDetected : UIStrings.protocolNotDetected;
+    const iconData: IconButton.Icon.IconData = {
+      iconName: this.#protocolHandlers.length > 0 ? 'ic_checkmark_16x16' : 'ic_info_black_18dp',
+      color: this.#protocolHandlers.length > 0 ? 'var( --color-ic-file-image)' : 'var(--color-link)',
+      width: '16px',
+    };
+    return LitHtml.html`
+    <div class="protocol-handlers-row status">
+            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${iconData as IconButton.Icon.IconData}>
+            </${IconButton.Icon.Icon.litTagName}>
+            ${i18n.i18n.getFormatLocalizedString(str_, statusString, {
+      PH1: manifestInTextLink,
+    })}
+    </div>
+    `;
+  }
+
+  #renderProtocolTest(): LitHtml.LitTemplate {
+    if (this.#protocolHandlers.length === 0) {
+      return LitHtml.nothing;
+    }
+    const protocolOptions = this.#protocolHandlers.filter(p => p.protocol)
+                                .map(p => LitHtml.html`<option value=${p.protocol}>${p.protocol}://</option>`);
+    return LitHtml.html`
+       <div class="protocol-handlers-row">
+        <select class="chrome-select protocol-select" @change=${this.#handleProtocolSelect}>
+           ${protocolOptions}
+        </select>
+        <input .value=${this.#queryInputState} class="devtools-text-input" type="text" @change=${
+        this.#handleQueryInputChange}/>
+        <${Buttons.Button.Button.litTagName} .variant=${Buttons.Button.Variant.PRIMARY} @click=${
+        this.#handleTestProtocolClick}>
+            ${i18nString(UIStrings.testProtocol)}
+        </${Buttons.Button.Button.litTagName}>
+        </div>
+      `;
+  }
+
+  #handleProtocolSelect = (evt: HTMLSelectElementEvent): void => {
+    this.#selectedProtocolState = evt.target.value;
+  };
+
+  #handleQueryInputChange = (evt: HTMLInputElementEvent): void => {
+    this.#queryInputState = evt.target.value;
+    this.#render();
+  };
+
+  #handleTestProtocolClick = (): void => {
+    const protocolURL = `${this.#selectedProtocolState}://${this.#queryInputState}` as Platform.DevToolsPath.UrlString;
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(protocolURL);
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureTestProtocolClicked);
+  };
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [
+      protocolHandlersViewStyles,
+      inspectorCommonStyles,
+      Input.textInputStyles,
+    ];
+  }
+
+  #render(): void {
+    const protocolDocLink =
+        UI.XLink.XLink.create(PROTOCOL_DOCUMENT_URL, i18nString(UIStrings.protocolHandlerRegistrations));
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      ${this.#renderStatusMessage()}
+      <div class="protocol-handlers-row">
+          ${i18n.i18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOur, {PH1: protocolDocLink})}
+      </div>
+      ${this.#renderProtocolTest()}
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-protocol-handlers-view', ProtocolHandlersView);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-protocol-handlers-view': ProtocolHandlersView;
+  }
+}

package/front_end/panels/application/components/components.ts

@@ -7,6 +7,7 @@ import * as EndpointsGrid from './EndpointsGrid.js';
 import * as FrameDetailsView from './FrameDetailsView.js';
 import * as InterestGroupAccessGrid from './InterestGroupAccessGrid.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
+import * as ProtocolHandlersView from './ProtocolHandlersView.js';
 import * as ReportsGrid from './ReportsGrid.js';
 import * as StackTrace from './StackTrace.js';
 import * as TrustTokensView from './TrustTokensView.js';
@@ -17,6 +18,7 @@ export {
   FrameDetailsView,
   InterestGroupAccessGrid,
   OriginTrialTreeView,
+  ProtocolHandlersView,
   ReportsGrid,
   StackTrace,
   TrustTokensView,

package/front_end/panels/application/components/protocolHandlersView.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 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.
+ */
+
+.devtools-link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 2px 0; /* adjust focus ring size */
+}
+
+input.devtools-text-input[type="text"] {
+  padding: 3px 6px;
+  margin-left: 4px;
+  margin-right: 4px;
+  width: 250px;
+  height: 25px;
+}
+
+.protocol-handlers-row {
+  margin: 10px 0 2px 18px;
+}
+
+.inline-icon {
+  vertical-align: text-bottom;
+}
+
+@media (forced-colors: active) {
+  .devtools-link:not(.devtools-link-prevent-click) {
+    color: linktext;
+  }
+
+  .devtools-link:focus-visible {
+    background: Highlight;
+    color: HighlightText;
+  }
+}

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/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;
+}