chrome-devtools-frontend 1.0.927127 → 1.0.928589

package/front_end/panels/console/ConsoleSidebar.ts

@@ -8,7 +8,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as ConsoleComponents from './components/components.js';
 
 import type {LevelsMask} from './ConsoleFilter.js';
 import {ConsoleFilter, FilterType} from './ConsoleFilter.js';
@@ -63,8 +62,6 @@ export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.tree = new UI.TreeOutline.TreeOutlineInShadow();
     this.tree.addEventListener(UI.TreeOutline.Events.ElementSelected, this.selectionChanged.bind(this));
 
-    const deprecationWarning = new ConsoleComponents.SidebarDeprecation.SidebarDeprecation();
-    this.contentElement.appendChild(deprecationWarning);
     this.contentElement.appendChild(this.tree.element);
     this.selectedTreeElement = null;
     this.treeElements = [];

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -39,13 +39,16 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as TextEditor from '../../ui/legacy/components/text_editor/text_editor.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import * as TextEditorLegacy from '../../ui/legacy/components/text_editor/text_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
+
 import * as ElementsComponents from './components/components.js';
 import {canGetJSPath, cssPath, jsPath, xPath} from './DOMPath.js';
 import {ElementsPanel} from './ElementsPanel.js';
+
 import type {ElementsTreeOutline, UpdateRecord} from './ElementsTreeOutline.js';
 import {MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
@@ -986,9 +989,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private startEditingAsHTML(
+  private async startEditingAsHTML(
       commitCallback: (arg0: string, arg1: string) => void, disposeCallback: () => void,
-      maybeInitialValue: string|null): void {
+      maybeInitialValue: string|null): Promise<void> {
     if (maybeInitialValue === null) {
       return;
     }
@@ -1013,56 +1016,62 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // Append editor.
     this.listItemElement.appendChild(this.htmlEditElement);
 
-    const factory = TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditorFactory.instance();
-    const editor = factory.createEditor({
-      lineNumbers: false,
-      lineWrapping: Common.Settings.Settings.instance().moduleSetting('domWordWrap').get(),
-      mimeType: 'text/html',
-      autoHeight: false,
-      padBottom: false,
-      bracketMatchingSetting: undefined,
-      devtoolsAccessibleName: undefined,
-      maxHighlightLength: undefined,
-      placeholder: undefined,
-      lineWiseCopyCut: undefined,
-      inputStyle: undefined,
-    });
+    const TextEditor = await import('../../ui/components/text_editor/text_editor.js');
+    const CodeMirror = await import('../../third_party/codemirror.next/codemirror.next.js');
+    const {html} = await CodeMirror.html();
+    const editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({
+      doc: initialValue,
+      extensions: [
+        CodeMirror.keymap.of([
+          {
+            key: 'Mod-Enter',
+            run: (): boolean => {
+              this.editing?.commit();
+              return true;
+            },
+          },
+          {
+            key: 'Escape',
+            run: (): boolean => {
+              this.editing?.cancel();
+              return true;
+            },
+          },
+        ]),
+        TextEditor.Config.baseConfiguration(initialValue),
+        html(),
+        TextEditor.Config.domWordWrap,
+        CodeMirror.EditorView.theme({
+          '.cm-editor': {maxHeight: '300px'},
+          '.cm-scroller': {overflowY: 'auto'},
+        }),
+        CodeMirror.EditorView.domEventHandlers({
+          focusout: event => {
+            // The relatedTarget is null when no element gains focus, e.g. switching windows.
+            const relatedTarget = (event.relatedTarget as Node | null);
+            if (relatedTarget && !relatedTarget.isSelfOrDescendant(editor)) {
+              this.editing && this.editing.commit();
+            }
+          },
+        }),
+      ],
+    }));
     this.editing = {commit: commit.bind(this), cancel: dispose.bind(this), editor, resize: resize.bind(this)};
     resize.call(this);
-    editor.widget().show((this.htmlEditElement as HTMLElement));
-    editor.setText(initialValue);
-    editor.widget().focus();
-    editor.widget().element.addEventListener('focusout', event => {
-      // The relatedTarget is null when no element gains focus, e.g. switching windows.
-      const relatedTarget = (event.relatedTarget as Node | null);
-      if (relatedTarget && !relatedTarget.isSelfOrDescendant(editor.widget().element)) {
-        this.editing && this.editing.commit();
-      }
-    }, false);
-    editor.widget().element.addEventListener('keydown', keydown.bind(this), true);
+    this.htmlEditElement.appendChild(editor);
+    editor.editor.focus();
 
-    this.treeOutline && this.treeOutline.setMultilineEditing((this.editing as {
-      commit: () => void,
-      cancel: () => void,
-      editor: UI.TextEditor.TextEditor,
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      resize: () => any,
-    }));
+    this.treeOutline && this.treeOutline.setMultilineEditing(this.editing);
 
     function resize(this: ElementsTreeElement): void {
       if (this.treeOutline && this.htmlEditElement) {
         this.htmlEditElement.style.width = this.treeOutline.visibleWidth() - this.computeLeftIndent() - 30 + 'px';
       }
-
-      if (this.editing && this.editing.editor) {
-        (this.editing.editor as TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditor).onResize();
-      }
     }
 
     function commit(this: ElementsTreeElement): void {
       if (this.editing && this.editing.editor) {
-        commitCallback(initialValue, this.editing.editor.text());
+        commitCallback(initialValue, this.editing.editor.state.doc.toString());
       }
       dispose.call(this);
     }
@@ -1071,8 +1080,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (!this.editing || !this.editing.editor) {
         return;
       }
-      this.editing.editor.widget().element.removeEventListener('blur', this.editing.commit, true);
-      this.editing.editor.widget().detach();
       this.editing = null;
 
       // Remove editor.
@@ -1098,21 +1105,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
       disposeCallback();
     }
-
-    function keydown(this: ElementsTreeElement, event: Event): void {
-      const keyboardEvent = (event as KeyboardEvent);
-      const isMetaOrCtrl = UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent) &&
-          !keyboardEvent.altKey && !keyboardEvent.shiftKey;
-      if (keyboardEvent.key === 'Enter' && (isMetaOrCtrl || keyboardEvent.isMetaOrCtrlForTest)) {
-        keyboardEvent.consume(true);
-        this.editing && this.editing.commit();
-      } else if (
-          keyboardEvent.keyCode === UI.KeyboardShortcut.Keys.Esc.code ||
-          keyboardEvent.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
-        keyboardEvent.consume(true);
-        this.editing && this.editing.cancel();
-      }
-    }
   }
 
   private attributeEditingCommitted(
@@ -1732,14 +1724,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
 
           const javascriptSyntaxHighlighter =
-              new TextEditor.SyntaxHighlighter.SyntaxHighlighter('text/javascript', true);
+              new TextEditorLegacy.SyntaxHighlighter.SyntaxHighlighter('text/javascript', true);
           javascriptSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight);
         } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'style') {
           const newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-css-node');
           const text = node.nodeValue();
           newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
 
-          const cssSyntaxHighlighter = new TextEditor.SyntaxHighlighter.SyntaxHighlighter('text/css', true);
+          const cssSyntaxHighlighter = new TextEditorLegacy.SyntaxHighlighter.SyntaxHighlighter('text/css', true);
           cssSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight);
         } else {
           UI.UIUtils.createTextChild(titleDOM, '"');
@@ -2224,7 +2216,7 @@ export function adornerComparator(adornerA: Adorners.Adorner.Adorner, adornerB:
 export interface EditorHandles {
   commit: () => void;
   cancel: () => void;
-  editor?: UI.TextEditor.TextEditor|TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditor;
+  editor?: TextEditor.TextEditor.TextEditor;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   resize: () => any;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1631,7 +1631,6 @@ export interface MultilineEditorController {
   cancel: () => void;
   commit: () => void;
   resize: () => void;
-  editor: UI.TextEditor.TextEditor;
 }
 
 export interface ClipboardData {

package/front_end/panels/elements/components/LayoutPane.ts

@@ -17,6 +17,10 @@ import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {
+  /**
+  *@description Title of the input to select the overlay color for an element using the color picker
+  */
+  chooseElementOverlayColor: 'Choose the overlay color for this element',
   /**
   *@description Title of the show element button in the Layout pane of the Elements panel
   */
@@ -257,7 +261,7 @@ export class LayoutPane extends HTMLElement {
           } as NodeTextData}></${NodeText.litTagName}>
         </span>
       </label>
-      <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" class="color-picker-label" style="background: ${element.color};">
+      <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" title=${i18nString(UIStrings.chooseElementOverlayColor)} class="color-picker-label" style="background: ${element.color};">
         <input @change=${onColorChange} @input=${onColorChange} class="color-picker" type="color" value=${element.color} />
       </label>
       <button tabindex="0" @click=${onElementClick} title=${i18nString(UIStrings.showElementInTheElementsPanel)} class="show-element"></button>

package/front_end/panels/issues/GenericIssueDetailsView.ts

@@ -0,0 +1,68 @@
+// Copyright 2021 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 i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
+import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+
+import {AffectedResourcesView} from './AffectedResourcesView.js';
+
+const UIStrings = {
+  /**
+  *@description Label for number of affected resources indication in issue view
+  */
+  nResources: '{n, plural, =1 {# resource} other {# resources}}',
+  /**
+  *@description Title for the 'Frame' column.
+  */
+  frameId: 'Frame',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/issues/GenericIssueDetailsView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class GenericIssueDetailsView extends AffectedResourcesView {
+  protected getResourceNameWithCount(count: number): Platform.UIString.LocalizedString {
+    return i18nString(UIStrings.nResources, {n: count});
+  }
+
+  private appendDetails(genericIssues: ReadonlySet<IssuesManager.GenericIssue.GenericIssue>): void {
+    const header = document.createElement('tr');
+
+    const sampleIssueDetails = genericIssues.values().next().value.details();
+    if (sampleIssueDetails.frameId) {
+      this.appendColumnTitle(header, i18nString(UIStrings.frameId));
+    }
+
+    this.affectedResources.appendChild(header);
+    let count = 0;
+    for (const genericIssue of genericIssues) {
+      count++;
+      this.appendDetail(genericIssue);
+    }
+    this.updateAffectedResourceCount(count);
+  }
+
+  private appendDetail(genericIssue: IssuesManager.GenericIssue.GenericIssue): void {
+    const element = document.createElement('tr');
+    element.classList.add('affected-resource-directive');
+
+    const details = genericIssue.details();
+    if (details.frameId) {
+      element.appendChild(this.createFrameCell(details.frameId, genericIssue.getCategory()));
+    }
+
+    this.affectedResources.appendChild(element);
+  }
+
+  update(): void {
+    this.clear();
+    const issues = this.issue.getGenericIssues();
+    if (issues.size > 0) {
+      this.appendDetails(issues);
+    } else {
+      this.updateAffectedResourceCount(0);
+    }
+  }
+}

package/front_end/panels/issues/IssueAggregator.ts

@@ -45,6 +45,7 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
   private attributionReportingIssues = new Set<IssuesManager.AttributionReportingIssue.AttributionReportingIssue>();
   private wasmCrossOriginModuleSharingIssues =
       new Set<IssuesManager.WasmCrossOriginModuleSharingIssue.WasmCrossOriginModuleSharingIssue>();
+  private genericIssues = new Set<IssuesManager.GenericIssue.GenericIssue>();
   private representative?: IssuesManager.Issue.Issue;
   private aggregatedIssuesCount = 0;
   private key: AggregationKey;
@@ -130,6 +131,10 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     return this.wasmCrossOriginModuleSharingIssues;
   }
 
+  getGenericIssues(): ReadonlySet<IssuesManager.GenericIssue.GenericIssue> {
+    return this.genericIssues;
+  }
+
   getDescription(): IssuesManager.MarkdownIssueDescription.MarkdownIssueDescription|null {
     if (this.representative) {
       return this.representative.getDescription();
@@ -221,6 +226,9 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     if (issue instanceof IssuesManager.WasmCrossOriginModuleSharingIssue.WasmCrossOriginModuleSharingIssue) {
       this.wasmCrossOriginModuleSharingIssues.add(issue);
     }
+    if (issue instanceof IssuesManager.GenericIssue.GenericIssue) {
+      this.genericIssues.add(issue);
+    }
   }
 
   getKind(): IssuesManager.Issue.IssueKind {
@@ -301,6 +309,14 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return result;
   }
 
+  aggregatedIssueKinds(): Set<IssuesManager.Issue.IssueKind> {
+    const result = new Set<IssuesManager.Issue.IssueKind>();
+    for (const issue of this.aggregatedIssuesByKey.values()) {
+      result.add(issue.getKind());
+    }
+    return result;
+  }
+
   numberOfAggregatedIssues(): number {
     return this.aggregatedIssuesByKey.size;
   }

package/front_end/panels/issues/IssueKindView.ts

@@ -0,0 +1,95 @@
+// Copyright 2021 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 Common from '../../core/common/common.js';
+import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as Adorners from '../../ui/components/adorners/adorners.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+export function getGroupIssuesByKindSetting(): Common.Settings.Setting<boolean> {
+  return Common.Settings.Settings.instance().createSetting('groupIssuesByKind', false);
+}
+
+export function issueKindViewSortPriority(a: IssueKindView, b: IssueKindView): number {
+  if (a.getKind() === b.getKind()) {
+    return 0;
+  }
+  if (a.getKind() === IssuesManager.Issue.IssueKind.PageError) {
+    return -1;
+  }
+  if (a.getKind() === IssuesManager.Issue.IssueKind.BreakingChange &&
+      b.getKind() === IssuesManager.Issue.IssueKind.Improvement) {
+    return -1;
+  }
+  return 1;
+}
+
+export function getClassNameFromKind(kind: IssuesManager.Issue.IssueKind): string {
+  switch (kind) {
+    case IssuesManager.Issue.IssueKind.BreakingChange:
+      return 'breaking-changes';
+    case IssuesManager.Issue.IssueKind.Improvement:
+      return 'improvements';
+    case IssuesManager.Issue.IssueKind.PageError:
+      return 'page-errors';
+  }
+}
+
+export class IssueKindView extends UI.TreeOutline.TreeElement {
+  private kind: IssuesManager.Issue.IssueKind;
+  private issueCount: HTMLElement;
+
+  constructor(kind: IssuesManager.Issue.IssueKind) {
+    super(undefined, true);
+    this.kind = kind;
+    this.issueCount = document.createElement('span');
+
+    this.toggleOnClick = true;
+    this.listItemElement.classList.add('issue-kind');
+    this.listItemElement.classList.add(getClassNameFromKind(kind));
+    this.childrenListElement.classList.add('issue-kind-body');
+  }
+
+  getKind(): IssuesManager.Issue.IssueKind {
+    return this.kind;
+  }
+
+  private appendHeader(): void {
+    const header = document.createElement('div');
+    header.classList.add('header');
+
+    const issueKindIcon = new IconButton.Icon.Icon();
+    issueKindIcon.data = IssueCounter.IssueCounter.getIssueKindIconData(this.kind);
+    issueKindIcon.classList.add('leading-issue-icon');
+
+    const countAdorner = new Adorners.Adorner.Adorner();
+    countAdorner.data = {
+      name: 'countWrapper',
+      content: this.issueCount,
+    };
+    countAdorner.classList.add('aggregated-issues-count');
+    this.issueCount.textContent = '0';
+
+    const title = document.createElement('div');
+    title.classList.add('title');
+    title.textContent = IssuesManager.Issue.getIssueKindName(this.kind);
+
+    header.appendChild(issueKindIcon);
+    header.appendChild(countAdorner);
+    header.appendChild(title);
+
+    this.listItemElement.appendChild(header);
+  }
+
+  onattach(): void {
+    this.appendHeader();
+    this.expand();
+  }
+
+  update(count: number): void {
+    this.issueCount.textContent = `${count}`;
+  }
+}

package/front_end/panels/issues/IssueView.ts

@@ -29,6 +29,7 @@ import {AffectedSharedArrayBufferIssueDetailsView} from './AffectedSharedArrayBu
 import {AffectedSourcesView} from './AffectedSourcesView.js';
 import {AffectedTrustedWebActivityIssueDetailsView} from './AffectedTrustedWebActivityIssueDetailsView.js';
 import {CorsIssueDetailsView} from './CorsIssueDetailsView.js';
+import {GenericIssueDetailsView} from './GenericIssueDetailsView.js';
 import {WasmCrossOriginModuleSharingAffectedResourcesView} from './WasmCrossOriginModuleSharingAffectedResourcesView.js';
 import {AttributionReportingIssueDetailsView} from './AttributionReportingIssueDetailsView.js';
 
@@ -241,6 +242,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new AffectedElementsWithLowContrastView(this, this.issue),
       new AffectedTrustedWebActivityIssueDetailsView(this, this.issue),
       new CorsIssueDetailsView(this, this.issue),
+      new GenericIssueDetailsView(this, this.issue),
       new AffectedDocumentsInQuirksModeView(this, this.issue),
       new AttributionReportingIssueDetailsView(this, this.issue),
       new WasmCrossOriginModuleSharingAffectedResourcesView(this, this.issue),
@@ -442,6 +444,10 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     this.throttle.schedule(async () => this.doUpdate());
   }
 
+  getIssueKind(): IssuesManager.Issue.IssueKind {
+    return this.issue.getKind();
+  }
+
   isForHiddenIssue(): boolean {
     return this.issue.isHidden();
   }

package/front_end/panels/issues/IssuesPane.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -15,6 +16,7 @@ import issuesTreeStyles from './issuesTree.css.js';
 import type {AggregatedIssue, AggregationKey} from './IssueAggregator.js';
 import {Events as IssueAggregatorEvents, IssueAggregator} from './IssueAggregator.js';
 import {IssueView} from './IssueView.js';
+import {IssueKindView, getGroupIssuesByKindSetting, issueKindViewSortPriority} from './IssueKindView.js';
 
 const UIStrings = {
   /**
@@ -64,6 +66,14 @@ const UIStrings = {
    * @description Label for a checkbox which toggles grouping by category in the issues tab
    */
   groupByCategory: 'Group by category',
+  /**
+  * @description Title for a checkbox which toggles grouping by kind in the issues tab
+    */
+  groupDisplayedIssuesUnderKind: 'Group displayed issues as Page errors, Breaking changes and Improvements',
+  /**
+  * @description Label for a checkbox which toggles grouping by kind in the issues tab
+    */
+  groupByKind: 'Group by kind',
   /**
    * @description Title for a checkbox. Whether the issues tab should include third-party issues or not.
    */
@@ -91,6 +101,10 @@ const UIStrings = {
    *              browser behaviors.
    */
   quirksMode: 'Quirks Mode',
+  /**
+   * @description Category title for the different 'Generic' issues.
+   */
+  generic: 'Generic',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/IssuesPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -131,6 +145,8 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
         return i18nString(UIStrings.attributionReporting);
       case IssuesManager.Issue.IssueCategory.QuirksMode:
         return i18nString(UIStrings.quirksMode);
+      case IssuesManager.Issue.IssueCategory.Generic:
+        return i18nString(UIStrings.generic);
       case IssuesManager.Issue.IssueCategory.Other:
         return i18nString(UIStrings.other);
     }
@@ -162,6 +178,7 @@ let issuesPaneInstance: IssuesPane;
 export class IssuesPane extends UI.Widget.VBox {
   private categoryViews: Map<IssuesManager.Issue.IssueCategory, IssueCategoryView>;
   private issueViews: Map<AggregationKey, IssueView>;
+  private kindViews: Map<IssuesManager.Issue.IssueKind, IssueKindView>;
   private showThirdPartyCheckbox: UI.Toolbar.ToolbarSettingCheckbox|null;
   private issuesTree: UI.TreeOutline.TreeOutlineInShadow;
   private hiddenIssuesRow: HiddenIssuesRow;
@@ -176,6 +193,7 @@ export class IssuesPane extends UI.Widget.VBox {
     this.contentElement.classList.add('issues-pane');
 
     this.categoryViews = new Map();
+    this.kindViews = new Map();
     this.issueViews = new Map();
     this.showThirdPartyCheckbox = null;
 
@@ -231,6 +249,15 @@ export class IssuesPane extends UI.Widget.VBox {
       this.fullUpdate(true);
     });
 
+    const groupByKindSetting = getGroupIssuesByKindSetting();
+    const groupByKindSettingCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
+        groupByKindSetting, i18nString(UIStrings.groupDisplayedIssuesUnderKind), i18nString(UIStrings.groupByKind));
+    rightToolbar.appendToolbarItem(groupByKindSettingCheckbox);
+    groupByKindSetting.addChangeListener(() => {
+      this.fullUpdate(true);
+    });
+    groupByKindSettingCheckbox.setVisible(Root.Runtime.experiments.isEnabled('groupAndHideIssuesByKind'));
+
     const thirdPartySetting = IssuesManager.Issue.getShowThirdPartyIssuesSetting();
     this.showThirdPartyCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
         thirdPartySetting, i18nString(UIStrings.includeCookieIssuesCausedBy),
@@ -309,28 +336,45 @@ export class IssuesPane extends UI.Widget.VBox {
   }
 
   private getIssueViewParent(issue: AggregatedIssue): UI.TreeOutline.TreeOutline|UI.TreeOutline.TreeElement {
-    if (!getGroupIssuesByCategorySetting().get()) {
-      if (issue.isHidden()) {
-        return this.hiddenIssuesRow;
-      }
-      return this.issuesTree;
+    const groupByKind = Root.Runtime.experiments.isEnabled('groupAndHideIssuesByKind');
+    if (issue.isHidden()) {
+      return this.hiddenIssuesRow;
     }
+    if (groupByKind && getGroupIssuesByKindSetting().get()) {
+      const kind = issue.getKind();
+      const view = this.kindViews.get(kind);
+      if (view) {
+        return view;
+      }
 
-    const category = issue.getCategory();
-    const view = this.categoryViews.get(category);
-    if (view) {
-      return view;
+      const newView = new IssueKindView(kind);
+      this.issuesTree.appendChild(newView, (a, b) => {
+        if (a instanceof IssueKindView && b instanceof IssueKindView) {
+          return issueKindViewSortPriority(a, b);
+        }
+        return 0;
+      });
+      this.kindViews.set(kind, newView);
+      return newView;
     }
-
-    const newView = new IssueCategoryView(category);
-    this.issuesTree.appendChild(newView, (a, b) => {
-      if (a instanceof IssueCategoryView && b instanceof IssueCategoryView) {
-        return a.getCategoryName().localeCompare(b.getCategoryName());
+    if (getGroupIssuesByCategorySetting().get()) {
+      const category = issue.getCategory();
+      const view = this.categoryViews.get(category);
+      if (view) {
+        return view;
       }
-      return 0;
-    });
-    this.categoryViews.set(category, newView);
-    return newView;
+
+      const newView = new IssueCategoryView(category);
+      this.issuesTree.appendChild(newView, (a, b) => {
+        if (a instanceof IssueCategoryView && b instanceof IssueCategoryView) {
+          return a.getCategoryName().localeCompare(b.getCategoryName());
+        }
+        return 0;
+      });
+      this.categoryViews.set(category, newView);
+      return newView;
+    }
+    return this.issuesTree;
   }
 
   private clearViews<T>(views: Map<T, UI.TreeOutline.TreeElement>, preservedSet?: Set<T>): void {
@@ -349,6 +393,7 @@ export class IssuesPane extends UI.Widget.VBox {
 
   private fullUpdate(force: boolean): void {
     this.clearViews(this.categoryViews, force ? undefined : this.aggregator.aggregatedIssueCategories());
+    this.clearViews(this.kindViews, force ? undefined : this.aggregator.aggregatedIssueKinds());
     this.clearViews(this.issueViews, force ? undefined : this.aggregator.aggregatedIssueCodes());
     if (this.aggregator) {
       for (const issue of this.aggregator.aggregatedIssues()) {
@@ -358,9 +403,21 @@ export class IssuesPane extends UI.Widget.VBox {
     this.updateCounts();
   }
 
+  private updateIssueKindViewsCount(): void {
+    for (const view of this.kindViews.values()) {
+      const count =
+          this.issuesManager.numberOfIssues(view.getKind()) - this.issuesManager.numberOfHiddenIssues(view.getKind());
+      view.update(count);
+    }
+  }
+
   private updateCounts(): void {
+    const groupByKind = Root.Runtime.experiments.isEnabled('groupAndHideIssuesByKind');
     this.showIssuesTreeOrNoIssuesDetectedMessage(
         this.issuesManager.numberOfIssues(), this.issuesManager.numberOfHiddenIssues());
+    if (groupByKind && getGroupIssuesByKindSetting().get()) {
+      this.updateIssueKindViewsCount();
+    }
   }
 
   private showIssuesTreeOrNoIssuesDetectedMessage(issuesCount: number, hiddenIssueCount: number): void {
@@ -391,11 +448,17 @@ export class IssuesPane extends UI.Widget.VBox {
     await this.issueViewUpdatePromise;
     const key = this.aggregator.keyForIssue(issue);
     const issueView = this.issueViews.get(key);
+    const groupByKind = Root.Runtime.experiments.isEnabled('groupAndHideIssuesByKind');
     if (issueView) {
       if (issueView.isForHiddenIssue()) {
         this.hiddenIssuesRow.expand();
         this.hiddenIssuesRow.reveal();
       }
+      if (groupByKind && getGroupIssuesByKindSetting().get() && !issueView.isForHiddenIssue()) {
+        const kindView = this.kindViews.get(issueView.getIssueKind());
+        kindView?.expand();
+        kindView?.reveal();
+      }
       issueView.expand();
       issueView.reveal();
       issueView.select(false, true);