chrome-devtools-frontend 1.0.928589 → 1.0.929998

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -0,0 +1,171 @@
+// Copyright 2019 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 * 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 LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Label for the capture button in the CSS Overview Panel
+  */
+  captureOverview: 'Capture overview',
+  /**
+  *@description Header for the summary of CSS Overview
+  */
+  identifyCSSImprovements: 'Identify potential CSS improvements',
+  /**
+  *@description First point of the summarized features of CSS Overview
+  */
+  capturePageCSSOverview: 'Capture an overview of your page’s CSS',
+  /**
+  *@description Second point of the summarized features of CSS Overview
+  */
+  identifyCSSImprovementsWithExampleIssues:
+      'Identify potential CSS improvements (e.g. low contrast issues, unused declarations, color or font mismatches)',
+  /**
+  *@description Third point of the summarized features of CSS Overview
+  */
+  locateAffectedElements: 'Locate the affected elements in the Elements panel',
+  /**
+  *@description Title of the "Preview feature" reminder box
+  */
+  previewFeature: 'Preview feature',
+  /**
+  *@description Sentence to convey the feature is being actively worked on and we are looking for feedback
+  *@example {https://goo.gle/css-overview-feedback} PH1
+  */
+  activelyWorkingAndLookingForS: 'Our team is actively working on this feature and we are looking for your {PH1}!',
+  /**
+  *@description Link text of the inline anchor to navigate to a feedback page
+  */
+  feedbackInline: 'feedback',
+  /**
+  *@description Title of the section to the quick start video and documentation to CSS Overview panel
+  */
+  videoAndDocumentation: 'Video and documentation',
+  /**
+  *@description Title of the link to the quick start video and documentation to CSS Overview panel
+  */
+  quickStartWithCSSOverview: 'Quick start: get started with the new CSS Overview panel',
+  /**
+  *@description Link text of the standalone button to navigate to a feedback page
+  */
+  feedbackStandalone: 'Feedback',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/css_overview/components/CSSOverviewStartView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {render, html} = LitHtml;
+
+const FEEDBACK_LINK = 'https://goo.gle/css-overview-feedback';
+const DOC_LINK = 'https://developer.chrome.com/docs/devtools/css-overview';
+export class OverviewStartRequestedEvent extends Event {
+  static readonly eventName = 'overviewstartrequested';
+
+  constructor() {
+    super(OverviewStartRequestedEvent.eventName);
+  }
+}
+
+export class CSSOverviewStartView extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-css-overview-start-view`;
+  private readonly shadow = this.attachShadow({mode: 'open'});
+  #feedbackLink: HTMLAnchorElement;
+
+  constructor() {
+    super();
+    this.#feedbackLink = document.createElement('a');
+    this.#feedbackLink.href = FEEDBACK_LINK;
+    this.#feedbackLink.target = '_blank';
+    this.#feedbackLink.innerText = i18nString(UIStrings.feedbackInline);
+  }
+
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [cssOverviewStartViewStyles];
+    this.render();
+  }
+
+  show(): void {
+    this.classList.remove('hidden');
+  }
+
+  hide(): void {
+    this.classList.add('hidden');
+  }
+
+  private onStartCaptureClick(): void {
+    this.dispatchEvent(new OverviewStartRequestedEvent());
+  }
+
+  private render(): void {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      <div class="css-overview-start-view">
+        <h1 class="summary-header">${i18nString(UIStrings.identifyCSSImprovements)}</h1>
+        <ol class="summary-list">
+          <li>${i18nString(UIStrings.capturePageCSSOverview)}</li>
+          <li>${i18nString(UIStrings.identifyCSSImprovementsWithExampleIssues)}</li>
+          <li>${i18nString(UIStrings.locateAffectedElements)}</li>
+        </ol>
+        <div class="start-capture-wrapper">
+          <${Buttons.Button.Button.litTagName}
+            class="start-capture"
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            @click=${this.onStartCaptureClick}>
+            ${i18nString(UIStrings.captureOverview)}
+          </${Buttons.Button.Button.litTagName}>
+        </div>
+        <section class="preview-feature">
+          <h1 class="preview-header">
+            <${IconButton.Icon.Icon.litTagName} class="preview-icon" .data=${{
+                iconName: 'ic_preview_feature',
+                width: '24px',
+                height: '24px',
+                color: 'var(--color-primary)',
+              } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
+              ${i18nString(UIStrings.previewFeature)}
+          </h1>
+          <div class="feedback-prompt">${i18n.i18n.getFormatLocalizedString(str_, UIStrings.activelyWorkingAndLookingForS, {PH1: this.#feedbackLink})}</div>
+          <div class="resources">
+            <div class="thumbnail-wrapper">
+              <${IconButton.Icon.Icon.litTagName} .data=${{
+                iconName: 'preview_feature_video_thumbnail',
+                width: '144px',
+                height: '92px',
+              } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
+            </div>
+            <div>
+              <h1 class="video-doc-header">${i18nString(UIStrings.videoAndDocumentation)}</h1>
+              <a href=${DOC_LINK} target="_blank">${i18nString(UIStrings.quickStartWithCSSOverview)}</a>
+            </div>
+          </div>
+        </section>
+        <a class="feedback-standalone" href=${FEEDBACK_LINK} target="_blank">${i18nString(UIStrings.feedbackStandalone)}</a>
+      </div>
+    `, this.shadow, {
+      host: this,
+    });
+    // clang-format on
+
+    const startButton = this.shadow.querySelector<HTMLElement>('.start-capture');
+    if (startButton) {
+      startButton.focus();
+    }
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-css-overview-start-view', CSSOverviewStartView);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-css-overview-start-view': CSSOverviewStartView;
+  }
+}

package/front_end/panels/css_overview/components/components.ts

@@ -0,0 +1,9 @@
+// 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 CSSOverviewStartView from './CSSOverviewStartView.js';
+
+export {
+  CSSOverviewStartView,
+};

package/front_end/panels/css_overview/components/cssOverviewStartView.css

@@ -0,0 +1,134 @@
+/**
+ * Copyright 2019 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.
+ */
+
+h1 {
+  font-weight: normal;
+}
+
+.css-overview-start-view {
+  padding: 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background);
+}
+
+.summary-header {
+  color: var(--color-text-primary);
+  font-size: 18px;
+  font-weight: normal;
+  letter-spacing: 0.02em;
+  line-height: 1.33;
+  margin: 0;
+  padding: 0;
+}
+
+.summary-list {
+  counter-reset: custom-counter;
+  list-style: none;
+  margin: 16px 0 30px 30px;
+  padding: 0;
+}
+
+.summary-list li {
+  color: var(--color-text-primary);
+  counter-increment: custom-counter;
+  font-size: 13px;
+  letter-spacing: 0.03em;
+  line-height: 1.54;
+  margin-bottom: 9px;
+  position: relative;
+}
+
+.summary-list li::before {
+  --override-color-counter-background: rgba(26 115 232 / 25%);
+
+  box-sizing: border-box;
+  background: var(--override-color-counter-background);
+  border-radius: 50%;
+  color: var(--color-primary);
+  content: counter(custom-counter);
+  font-size: 12px;
+  height: 18px;
+  left: -30px;
+  line-height: 20px;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  width: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.start-capture-wrapper {
+  width: fit-content;
+}
+
+.preview-feature {
+  padding: 12px 16px;
+  border: 1px solid var(--color-details-hairline);
+  color: var(--color-text-primary);
+  font-size: 13px;
+  line-height: 20px;
+  border-radius: 12px;
+  margin: 42px 0;
+  letter-spacing: 0.01em;
+}
+
+.preview-header {
+  color: var(--color-primary);
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.01em;
+  margin: 9px 0 14px 0;
+}
+
+.preview-icon {
+  vertical-align: middle;
+}
+
+.feedback-prompt {
+  margin-bottom: 24px;
+}
+
+.resources {
+  display: flex;
+  flex-direction: row;
+}
+
+.thumbnail-wrapper {
+  width: 144px;
+  height: 92px;
+  margin-right: 20px;
+}
+
+.video-doc-header {
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.04em;
+  color: var(--color-text-primary);
+  margin-bottom: 2px;
+}
+
+.feedback-standalone {
+  width: fit-content;
+  padding: 0.5em;
+  align-self: flex-end;
+  color: var(--color-primary);
+  border: 1px solid var(--color-details-hairline);
+  border-radius: 2px;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.resources a {
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0.04em;
+  text-decoration-line: underline;
+  color: var(--color-primary);
+}

package/front_end/panels/css_overview/css_overview-meta.ts

@@ -40,9 +40,10 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showCssOverview),
   title: i18nLazyString(UIStrings.cssOverview),
   order: 95,
+  persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
   async loadView() {
     const CSSOverview = await loadCSSOverviewModule();
     return CSSOverview.CSSOverviewPanel.CSSOverviewPanel.instance();
   },
-  experiment: Root.Runtime.ExperimentName.CSS_OVERVIEW,
+  isPreviewFeature: true,
 });

package/front_end/panels/css_overview/css_overview.ts

@@ -5,7 +5,6 @@
 import './CSSOverviewController.js';
 import './CSSOverviewUnusedDeclarations.js';
 import './CSSOverviewModel.js';
-import './CSSOverviewStartView.js';
 import './CSSOverviewProcessingView.js';
 import './CSSOverviewCompletedView.js';
 import './CSSOverviewSidebarPanel.js';
@@ -17,7 +16,6 @@ import * as CSSOverviewModel from './CSSOverviewModel.js';
 import * as CSSOverviewPanel from './CSSOverviewPanel.js';
 import * as CSSOverviewProcessingView from './CSSOverviewProcessingView.js';
 import * as CSSOverviewSidebarPanel from './CSSOverviewSidebarPanel.js';
-import * as CSSOverviewStartView from './CSSOverviewStartView.js';
 import * as CSSOverviewUnusedDeclarations from './CSSOverviewUnusedDeclarations.js';
 
 export {
@@ -27,6 +25,5 @@ export {
   CSSOverviewPanel,
   CSSOverviewProcessingView,
   CSSOverviewSidebarPanel,
-  CSSOverviewStartView,
   CSSOverviewUnusedDeclarations,
 };

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -676,9 +676,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   populateNodeContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
     // Add free-form node-related actions.
     const isEditable = this.hasEditableNode();
+    // clang-format off
     if (isEditable && !this.editing) {
+      // Eagerly load CodeMirror to avoid a delay when opening the "Edit as HTML" editor when the user actually clicks on it
+      import('../../ui/components/text_editor/text_editor.js');
       contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this));
     }
+    // clang-format on
     const isShadowRoot = this.nodeInternal.isShadowRoot();
 
     const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
@@ -1015,6 +1019,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
     // Append editor.
     this.listItemElement.appendChild(this.htmlEditElement);
+    this.htmlEditElement.addEventListener('keydown', event => {
+      if (event.key === 'Escape') {
+        event.consume(true);
+      }
+    });
 
     const TextEditor = await import('../../ui/components/text_editor/text_editor.js');
     const CodeMirror = await import('../../third_party/codemirror.next/codemirror.next.js');

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

@@ -251,7 +251,7 @@ export class LayoutPane extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`<div class="element">
-      <label data-element="true" class="checkbox-label" title=${element.name}>
+      <label data-element="true" class="checkbox-label">
         <input data-input="true" type="checkbox" .checked=${element.enabled} @change=${onElementToggle} />
         <span class="node-text-container" data-label="true" @mouseenter=${onMouseEnter} @mouseleave=${onMouseLeave}>
           <${NodeText.litTagName} .data=${{

package/front_end/panels/elements/elements-meta.ts

@@ -450,6 +450,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ADORNER,
+  storageType: Common.Settings.SettingStorageType.Synced,
   settingName: 'adornerSettings',
   settingType: Common.Settings.SettingType.ARRAY,
   defaultValue: [],

package/front_end/panels/elements/layoutPane.css

@@ -144,7 +144,7 @@
 }
 
 .color-picker {
-  visibility: hidden;
+  opacity: 0%;
 }
 
 .color-picker-label {

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -389,4 +389,13 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
 
     return false;
   }
+
+  ondelete(): boolean {
+    if (this.eventListenerInternal.canRemove()) {
+      this.removeListener();
+      return true;
+    }
+
+    return false;
+  }
 }

package/front_end/panels/help/ReleaseNoteText.ts

@@ -35,6 +35,35 @@ function getLocalizedReleaseNoteURL(url: string): string {
 }
 
 export const releaseNoteText: ReleaseNote[] = [
+  {
+    version: 38,
+    header: 'Highlights from the Chrome 96 update',
+    highlights: [
+      {
+        title: 'New preview feature: CSS Overview panel',
+        subtitle: 'Use the CSS overview panel to identify CSS improvements on your page.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-96/#css-overview'),
+      },
+      {
+        title: 'Enable emulating prefers-contrast media and auto dark mode',
+        subtitle:
+            'Emulate the user preference on using a different contrast mode for the page and Chrome’s auto dark mode.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-96/#emulation'),
+      },
+      {
+        title: 'New Payload tab in the Network panel',
+        subtitle: 'A new Payload tab is available when you click to inspect a network request.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-96/#payload'),
+      },
+      {
+        title: 'Option to hide CORS errors in the Console',
+        subtitle:
+            'Now that CORS errors are reported in the Issues tab, you can hide CORS errors in the Console to reduce clutter.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-96/#hide-cors-errors'),
+      },
+    ],
+    link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-96'),
+  },
   {
     version: 37,
     header: 'Highlights from the Chrome 95 update',

package/front_end/panels/help/help-meta.ts

@@ -105,6 +105,7 @@ UI.ActionRegistration.registerActionExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.APPEARANCE,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.showWhatsNewAfterEachUpdate),
   settingName: 'help.show-release-note',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/issues/IssueKindView.ts

@@ -3,12 +3,25 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.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';
 
+import * as Components from './components/components.js';
+
+const UIStrings = {
+  /**
+    * @description Menu entry for hiding all current issues belonging to a particular kind.
+    * @example {Page Errors} PH1
+    */
+  hideAllCurrent: 'Hide all current {PH1}',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/issues/IssueKindView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export function getGroupIssuesByKindSetting(): Common.Settings.Setting<boolean> {
   return Common.Settings.Settings.instance().createSetting('groupIssuesByKind', false);
 }
@@ -77,9 +90,32 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     title.classList.add('title');
     title.textContent = IssuesManager.Issue.getIssueKindName(this.kind);
 
+    const hideAvailableIssuesBtn = new Components.HideIssuesMenu.HideIssuesMenu();
+    hideAvailableIssuesBtn.classList.add('hide-available-issues');
+    hideAvailableIssuesBtn.data = {
+      menuItemLabel: i18nString(UIStrings.hideAllCurrent, {PH1: IssuesManager.Issue.getIssueKindName(this.kind)}),
+      menuItemAction: (): void => {
+        const setting = IssuesManager.IssuesManager.getHideIssueByCodeSetting();
+        const values = setting.get();
+        for (const issue of IssuesManager.IssuesManager.IssuesManager.instance().issues()) {
+          if (issue.getKind() === this.kind) {
+            values[issue.code()] = IssuesManager.IssuesManager.IssueStatus.Hidden;
+          }
+        }
+        setting.set(values);
+      },
+    };
+
     header.appendChild(issueKindIcon);
     header.appendChild(countAdorner);
     header.appendChild(title);
+    header.appendChild(hideAvailableIssuesBtn);
+    header.addEventListener('mouseenter', () => {
+      hideAvailableIssuesBtn.setVisible(true);
+    });
+    header.addEventListener('mouseleave', () => {
+      hideAvailableIssuesBtn.setVisible(false);
+    });
 
     this.listItemElement.appendChild(header);
   }

package/front_end/panels/issues/IssueView.ts

@@ -72,9 +72,17 @@ const UIStrings = {
   */
   learnMoreS: 'Learn more: {PH1}',
   /**
- *@description The kind of resolution for a mixed content issue
- */
+  *@description The kind of resolution for a mixed content issue
+  */
   automaticallyUpgraded: 'automatically upgraded',
+  /**
+  *@description Menu entry for hiding a particular issue, in the Hide Issues context menu.
+  */
+  hideIssuesLikeThis: 'Hide issues like this',
+  /**
+  *@description Menu entry for unhiding a particular issue, in the Hide Issues context menu.
+  */
+  unhideIssuesLikeThis: 'Unhide issues like this',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/IssueView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -371,8 +379,15 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     }
     this.listItemElement.classList.toggle('hidden-issue', this.issue.isHidden());
     const data: HiddenIssuesMenuData = {
-      issueCode: this.issue.code(),
-      forHiddenIssue: this.issue.isHidden(),
+      menuItemLabel: this.issue.isHidden() ? i18nString(UIStrings.unhideIssuesLikeThis) :
+                                             i18nString(UIStrings.hideIssuesLikeThis),
+      menuItemAction: () => {
+        const setting = IssuesManager.IssuesManager.getHideIssueByCodeSetting();
+        const values = setting.get();
+        values[this.issue.code()] = this.issue.isHidden() ? IssuesManager.IssuesManager.IssueStatus.Unhidden :
+                                                            IssuesManager.IssuesManager.IssueStatus.Hidden;
+        setting.set(values);
+      },
     };
     this.hiddenIssuesMenu.data = data;
   }

package/front_end/panels/issues/IssuesPane.ts

@@ -405,8 +405,7 @@ export class IssuesPane extends UI.Widget.VBox {
 
   private updateIssueKindViewsCount(): void {
     for (const view of this.kindViews.values()) {
-      const count =
-          this.issuesManager.numberOfIssues(view.getKind()) - this.issuesManager.numberOfHiddenIssues(view.getKind());
+      const count = this.issuesManager.numberOfIssues(view.getKind());
       view.update(count);
     }
   }
@@ -421,7 +420,7 @@ export class IssuesPane extends UI.Widget.VBox {
   }
 
   private showIssuesTreeOrNoIssuesDetectedMessage(issuesCount: number, hiddenIssueCount: number): void {
-    if (issuesCount > 0) {
+    if (issuesCount > 0 || hiddenIssueCount > 0) {
       this.hiddenIssuesRow.hidden = hiddenIssueCount === 0;
       this.hiddenIssuesRow.update(hiddenIssueCount);
       this.issuesTree.element.hidden = false;

package/front_end/panels/issues/components/HideIssuesMenu.ts

@@ -3,13 +3,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Common from '../../../core/common/common.js';
+import * as Common from '../../../core/common/common.js';
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import hideIssuesMenuStyles from './hideIssuesMenu.css.js';
 
@@ -17,38 +16,27 @@ const UIStrings = {
   /**
   *@description Title for the tooltip of the (3 dots) Hide Issues menu icon.
   */
-  tooltipTitle: 'Hide issues menu',
-  /**
-  *@description Menu entry for hiding a particular issue, in the Hide Issues context menu.
-  */
-  hideIssueByCode: 'Hide issues like this',
-  /**
-  *@description Menu entry for Unhiding a particular issue, in the Hide Issues context menu.
-  */
-  UnhideIssueByCode: 'Unhide issues like this',
+  tooltipTitle: 'Hide issues',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/issues/components/HideIssuesMenu.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface HiddenIssuesMenuData {
-  issueCode: string;
-  forHiddenIssue: boolean;
+  menuItemLabel: Common.UIString.LocalizedString;
+  menuItemAction: () => void;
 }
 
 export class HideIssuesMenu extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-hide-issues-menu`;
   private readonly shadow: ShadowRoot = this.attachShadow({mode: 'open'});
-  private code: string = '';
   private visible: boolean = false;
-  private hideIssueSetting: Common.Settings.Setting<IssuesManager.IssuesManager.HideIssueMenuSetting> =
-      IssuesManager.IssuesManager.getHideIssueByCodeSetting();
-  private forHiddenIssue: boolean = false;
+  private menuItemLabel: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
+  private menuItemAction: () => void = () => {};
 
   set data(data: HiddenIssuesMenuData) {
-    this.classList.add('hide-issues-menu');
-    this.code = data.issueCode;
-    this.forHiddenIssue = data.forHiddenIssue;
+    this.menuItemLabel = data.menuItemLabel;
+    this.menuItemAction = data.menuItemAction;
     this.render();
   }
 
@@ -67,27 +55,10 @@ export class HideIssuesMenu extends HTMLElement {
   onMenuOpen(event: Event): void {
     event.stopPropagation();
     const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu: true});
-    if (this.forHiddenIssue) {
-      contextMenu.headerSection().appendItem(i18nString(UIStrings.UnhideIssueByCode), () => this.onUnhideIssueByCode());
-      contextMenu.show();
-      return;
-    }
-    contextMenu.headerSection().appendItem(i18nString(UIStrings.hideIssueByCode), () => this.onHideIssueByCode());
+    contextMenu.headerSection().appendItem(this.menuItemLabel, () => this.menuItemAction());
     contextMenu.show();
   }
 
-  onHideIssueByCode(): void {
-    const values = this.hideIssueSetting.get();
-    values[this.code] = IssuesManager.IssuesManager.IssueStatus.Hidden;
-    this.hideIssueSetting.set(values);
-  }
-
-  onUnhideIssueByCode(): void {
-    const values = this.hideIssueSetting.get();
-    values[this.code] = IssuesManager.IssuesManager.IssueStatus.Unhidden;
-    this.hideIssueSetting.set(values);
-  }
-
   private render(): void {
     this.classList.toggle('hidden', !this.visible);
     // Disabled until https://crbug.com/1079231 is fixed.