chrome-devtools-frontend 1.0.1012379 → 1.0.1012587

package/config/gni/devtools_grd_files.gni

@@ -1252,6 +1252,7 @@ grd_files_debug_sources = [
   "front_end/panels/sources/navigatorTree.css.js",
   "front_end/panels/sources/navigatorView.css.js",
   "front_end/panels/sources/scopeChainSidebarPane.css.js",
+  "front_end/panels/sources/sourcesNavigator.css.js",
   "front_end/panels/sources/sourcesPanel.css.js",
   "front_end/panels/sources/sourcesView.css.js",
   "front_end/panels/sources/threadsSidebarPane.css.js",

package/front_end/core/host/UserMetrics.ts

@@ -627,8 +627,9 @@ export enum DevtoolsExperiments {
   'eyedropperColorPicker' = 60,
   'instrumentationBreakpoints' = 61,
   'cssAuthoringHints' = 62,
+  'authoredDeployedGrouping' = 63,
   // Increment this when new experiments are added.
-  'MaxValue' = 63,
+  'MaxValue' = 64,
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

package/front_end/core/i18n/locales/en-US.json

@@ -3291,7 +3291,7 @@
     "message": "DOM Storage Items"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
-    "message": "{PH1} cleared"
+    "message": "DOM Storage Items cleared"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "Number of entries shown in table: {PH1}"
@@ -9794,6 +9794,9 @@
   "panels/sources/NavigatorView.ts | authored": {
     "message": "Authored"
   },
+  "panels/sources/NavigatorView.ts | authoredTooltip": {
+    "message": "Contains original sources"
+  },
   "panels/sources/NavigatorView.ts | delete": {
     "message": "Delete"
   },
@@ -9803,6 +9806,9 @@
   "panels/sources/NavigatorView.ts | deployed": {
     "message": "Deployed"
   },
+  "panels/sources/NavigatorView.ts | deployedTooltip": {
+    "message": "Contains final sources the browser sees"
+  },
   "panels/sources/NavigatorView.ts | excludeFolder": {
     "message": "Exclude folder"
   },
@@ -10163,6 +10169,9 @@
   "panels/sources/sources-meta.ts | watch": {
     "message": "Watch"
   },
+  "panels/sources/SourcesNavigator.ts | authoredDescription": {
+    "message": "Group files by Authored/Deployed"
+  },
   "panels/sources/SourcesNavigator.ts | clearConfiguration": {
     "message": "Clear configuration"
   },
@@ -10233,7 +10242,7 @@
     "message": "Drop workspace folder here"
   },
   "panels/sources/SourcesPanel.ts | groupByAuthored": {
-    "message": "Group by Authored/Deployed (experimental)"
+    "message": "Group by Authored/Deployed"
   },
   "panels/sources/SourcesPanel.ts | groupByFolder": {
     "message": "Group by folder"
@@ -11906,9 +11915,15 @@
   "ui/components/panel_feedback/PanelFeedback.ts | videoAndDocumentation": {
     "message": "Video and documentation"
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | learnMoreLink": {
+    "message": "Learn More"
+  },
   "ui/components/panel_feedback/PreviewToggle.ts | previewTextFeedbackLink": {
     "message": "Send us your feedback."
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | shortFeedbackLink": {
+    "message": "Send feedback"
+  },
   "ui/components/request_link_icon/RequestLinkIcon.ts | clickToShowRequestInTheNetwork": {
     "message": "Click to open the network panel and show request for URL: {url}"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -3291,7 +3291,7 @@
     "message": "D̂ÓM̂ Śt̂ór̂áĝé Ît́êḿŝ"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
-    "message": "{PH1} ĉĺêár̂éd̂"
+    "message": "D̂ÓM̂ Śt̂ór̂áĝé Ît́êḿŝ ćl̂éâŕêd́"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "N̂úm̂b́êŕ ôf́ êńt̂ŕîéŝ śĥóŵń îń t̂áb̂ĺê: {PH1}"
@@ -9794,6 +9794,9 @@
   "panels/sources/NavigatorView.ts | authored": {
     "message": "Âút̂h́ôŕêd́"
   },
+  "panels/sources/NavigatorView.ts | authoredTooltip": {
+    "message": "Ĉón̂t́âín̂ś ôŕîǵîńâĺ ŝóûŕĉéŝ"
+  },
   "panels/sources/NavigatorView.ts | delete": {
     "message": "D̂él̂ét̂é"
   },
@@ -9803,6 +9806,9 @@
   "panels/sources/NavigatorView.ts | deployed": {
     "message": "D̂ép̂ĺôýêd́"
   },
+  "panels/sources/NavigatorView.ts | deployedTooltip": {
+    "message": "Ĉón̂t́âín̂ś f̂ín̂ál̂ śôúr̂ćêś t̂h́ê b́r̂óŵśêŕ ŝéêś"
+  },
   "panels/sources/NavigatorView.ts | excludeFolder": {
     "message": "Êx́ĉĺûd́ê f́ôĺd̂ér̂"
   },
@@ -10163,6 +10169,9 @@
   "panels/sources/sources-meta.ts | watch": {
     "message": "Ŵát̂ćĥ"
   },
+  "panels/sources/SourcesNavigator.ts | authoredDescription": {
+    "message": "Ĝŕôúp̂ f́îĺêś b̂ý Âút̂h́ôŕêd́/D̂ép̂ĺôýêd́"
+  },
   "panels/sources/SourcesNavigator.ts | clearConfiguration": {
     "message": "Ĉĺêár̂ ćôńf̂íĝúr̂át̂íôń"
   },
@@ -10233,7 +10242,7 @@
     "message": "D̂ŕôṕ ŵór̂ḱŝṕâćê f́ôĺd̂ér̂ h́êŕê"
   },
   "panels/sources/SourcesPanel.ts | groupByAuthored": {
-    "message": "Ĝŕôúp̂ b́ŷ Áût́ĥór̂éd̂/D́êṕl̂óŷéd̂ (éx̂ṕêŕîḿêńt̂ál̂)"
+    "message": "Ĝŕôúp̂ b́ŷ Áût́ĥór̂éd̂/D́êṕl̂óŷéd̂"
   },
   "panels/sources/SourcesPanel.ts | groupByFolder": {
     "message": "Ĝŕôúp̂ b́ŷ f́ôĺd̂ér̂"
@@ -11906,9 +11915,15 @@
   "ui/components/panel_feedback/PanelFeedback.ts | videoAndDocumentation": {
     "message": "V̂íd̂éô án̂d́ d̂óĉúm̂én̂t́ât́îón̂"
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | learnMoreLink": {
+    "message": "L̂éâŕn̂ Ḿôŕê"
+  },
   "ui/components/panel_feedback/PreviewToggle.ts | previewTextFeedbackLink": {
     "message": "Ŝén̂d́ ûś ŷóûŕ f̂éêd́b̂áĉḱ."
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | shortFeedbackLink": {
+    "message": "Ŝén̂d́ f̂éêd́b̂áĉḱ"
+  },
   "ui/components/request_link_icon/RequestLinkIcon.ts | clickToShowRequestInTheNetwork": {
     "message": "Ĉĺîćk̂ t́ô óp̂én̂ t́ĥé n̂ét̂ẃôŕk̂ ṕâńêĺ âńd̂ śĥóŵ ŕêq́ûéŝt́ f̂ór̂ ÚR̂Ĺ: {url}"
   },

package/front_end/core/root/Runtime.ts

@@ -292,6 +292,7 @@ export enum ExperimentName {
   EYEDROPPER_COLOR_PICKER = 'eyedropperColorPicker',
   INSTRUMENTATION_BREAKPOINTS = 'instrumentationBreakpoints',
   CSS_AUTHORING_HINTS = 'cssAuthoringHints',
+  AUTHORED_DEPLOYED_GROUPING = 'authoredDeployedGrouping',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/entrypoints/main/MainImpl.ts

@@ -402,6 +402,10 @@ export class MainImpl {
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.EYEDROPPER_COLOR_PICKER, 'Enable color picking outside the browser window');
 
+    // Change grouping of sources panel to use Authored/Deployed trees
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING, 'Group sources into Authored and Deployed trees');
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       'sourceOrderViewer',
       'hideIssuesFeature',

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

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -18,6 +18,7 @@ export interface PreviewToggleData {
   helperText: string|null;
   feedbackURL: string|null;
   experiment: Root.Runtime.ExperimentName;
+  learnMoreURL?: string;
   onChangeCallback?: (checked: boolean) => void;
 }
 
@@ -26,6 +27,14 @@ const UIStrings = {
   *@description Link text the user can click to provide feedback to the team.
   */
   previewTextFeedbackLink: 'Send us your feedback.',
+  /**
+  *@description Link text the user can click to provide feedback to the team.
+  */
+  shortFeedbackLink: 'Send feedback',
+  /**
+  *@description Link text the user can click to see documentation.
+  */
+  learnMoreLink: 'Learn More',
 };
 
 const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PreviewToggle.ts', UIStrings);
@@ -38,6 +47,7 @@ export class PreviewToggle extends HTMLElement {
   #name = '';
   #helperText: string|null = null;
   #feedbackURL: string|null = null;
+  #learnMoreURL: string|undefined;
   #experiment: string = '';
   #onChangeCallback?: (checked: boolean) => void;
 
@@ -49,6 +59,7 @@ export class PreviewToggle extends HTMLElement {
     this.#name = data.name;
     this.#helperText = data.helperText;
     this.#feedbackURL = data.feedbackURL;
+    this.#learnMoreURL = data.learnMoreURL;
     this.#experiment = data.experiment;
     this.#onChangeCallback = data.onChangeCallback;
     this.#render();
@@ -60,21 +71,31 @@ export class PreviewToggle extends HTMLElement {
     // clang-format off
     render(
       html`
-      <label class="experiment-preview">
-        <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
-        <${IconButton.Icon.Icon.litTagName} .data=${{
-          iconName: 'ic_preview_feature',
-          width: '16px',
-          height: '16px',
-          color: 'var(--color-text-secondary)',
-        } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>${this.#name}
-      </div>
-      <div class="helper">
-        ${this.#helperText && this.#feedbackURL
-          ? html`<p>${this.#helperText} <x-link href=${this.#feedbackURL}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>`
+      <div class="container">
+        <div class="checkbox-line">
+          <label class="experiment-preview">
+            <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
+            <${IconButton.Icon.Icon.litTagName} .data=${{
+              iconName: 'ic_preview_feature',
+              width: '16px',
+              height: '16px',
+              color: 'var(--color-text-secondary)',
+            } as IconButton.Icon.IconData}>
+            </${IconButton.Icon.Icon.litTagName}>${this.#name}
+          </label>
+          ${this.#feedbackURL && !this.#helperText
+            ? html`<div class="feedback"><x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.shortFeedbackLink)}</x-link></div>`
+            : nothing}
+        </div>
+        ${this.#learnMoreURL
+          ? html`<x-link class="x-link" href=${this.#learnMoreURL}>${i18nString(UIStrings.learnMoreLink)}</x-link>`
           : nothing}
-      </label>`,
+        <div class="helper">
+          ${this.#helperText && this.#feedbackURL
+            ? html`<p>${this.#helperText} <x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>`
+            : nothing}
+        </div>
+      </div>`,
       this.#shadow,
       {
         host: this,

package/front_end/ui/components/panel_feedback/previewToggle.css

@@ -18,7 +18,27 @@
   font-style: italic;
 }
 
-x-link { /* stylelint-disable-line selector-type-no-unknown */
+.feedback {
+  text-align: right;
+}
+
+.checkbox-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.container {
+  padding: 4px;
+}
+
+.x-link {
   color: var(--color-primary);
   text-decoration-line: underline;
+  padding: 4px;
+}
+
+.feedback .x-link {
+  color: var(--color-text-secondary);
 }

package/front_end/ui/legacy/ContextMenu.ts

@@ -111,7 +111,7 @@ export class Item {
         };
       }
       case 'checkbox': {
-        return {
+        const result = {
           type: 'checkbox',
           id: this.idInternal,
           label: this.label,
@@ -119,6 +119,11 @@ export class Item {
           enabled: !this.disabled,
           subItems: undefined,
         };
+        if (this.customElement) {
+          const resultAsSoftContextMenuItem = (result as SoftContextMenuDescriptor);
+          resultAsSoftContextMenuItem.element = (this.customElement as Element);
+        }
+        return result;
       }
     }
     throw new Error('Invalid item type:' + this.typeInternal);
@@ -187,12 +192,16 @@ export class Section {
     return item;
   }
 
-  appendCheckboxItem(label: string, handler: () => void, checked?: boolean, disabled?: boolean): Item {
+  appendCheckboxItem(
+      label: string, handler: () => void, checked?: boolean, disabled?: boolean, additionalElement?: Element): Item {
     const item = new Item(this.contextMenu, 'checkbox', label, disabled, checked);
     this.items.push(item);
     if (this.contextMenu) {
       this.contextMenu.setHandler(item.id(), handler);
     }
+    if (additionalElement) {
+      item.customElement = additionalElement;
+    }
     return item;
   }
 }

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.1012379"
+  "version": "1.0.1012587"
 }

package/scripts/eslint_rules/lib/lit_template_result_or_nothing.js

@@ -95,6 +95,9 @@ module.exports = {
 
     function checkTSTypeAnnotationForPotentialIssue(node) {
       const annotation = node.typeAnnotation;
+      if (!annotation) {
+        return;
+      }
       if (annotation.type === 'TSUnionType') {
         // matches foo(): X|Y
         checkUnionReturnTypeForLit(annotation);
@@ -137,6 +140,9 @@ module.exports = {
       },
       // Match values in interfaces or types.
       TSPropertySignature(node) {
+        if (!node.typeAnnotation) {
+          return;
+        }
         checkTSTypeAnnotationForPotentialIssue(node.typeAnnotation);
       },
     };