chrome-devtools-frontend/front_end/panels/issues/HiddenIssuesRow.ts

Chrome DevTools UI

// 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.
/* eslint-disable rulesdir/no-imperative-dom-api */

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 UI from '../../ui/legacy/legacy.js';

const UIStrings = {
  /**
   * @description Title for the hidden issues row
   */
  hiddenIssues: 'Hidden issues',
  /**
   * @description Label for the button to unhide all hidden issues
   */
  unhideAll: 'Unhide all',
} as const;

const str_ = i18n.i18n.registerUIStrings('panels/issues/HiddenIssuesRow.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

export class HiddenIssuesRow extends UI.TreeOutline.TreeElement {
  #numHiddenAggregatedIssues: HTMLElement;

  constructor() {
    super(undefined, true);
    this.#numHiddenAggregatedIssues = document.createElement('span');
    this.toggleOnClick = true;
    this.listItemElement.classList.add('issue-category', 'hidden-issues');
    this.childrenListElement.classList.add('hidden-issues-body');
    this.#appendHeader();
  }

  #appendHeader(): void {
    const unhideAllIssuesBtn = UI.UIUtils.createTextButton(
        i18nString(UIStrings.unhideAll), () => IssuesManager.IssuesManager.IssuesManager.instance().unhideAllIssues(),
        {className: 'unhide-all-issues-button', jslogContext: 'issues.unhide-all-hiddes'});
    const countAdorner = new Adorners.Adorner.Adorner();
    countAdorner.data = {
      name: 'countWrapper',
      content: this.#numHiddenAggregatedIssues,
    };
    countAdorner.classList.add('aggregated-issues-count');
    this.#numHiddenAggregatedIssues.textContent = '0';
    const header = document.createElement('div');
    const title = document.createElement('div');
    header.classList.add('header');
    title.classList.add('title');
    title.textContent = i18nString(UIStrings.hiddenIssues);
    header.appendChild(countAdorner);
    header.appendChild(title);
    header.appendChild(unhideAllIssuesBtn);
    this.listItemElement.appendChild(header);
  }

  update(count: number): void {
    this.#numHiddenAggregatedIssues.textContent = `${count}`;
  }
}