1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63


content / browser / resources / traces_internals / trace_report_list.html.ts [blame]

// Copyright 2024 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {html, nothing} from 'chrome://resources/lit/v3_0/lit.rollup.js';

import type {ClientTraceReport} from './trace_report.mojom-webui.js';
import type {TraceReportListElement} from './trace_report_list.js';

function getReportHtml(this: TraceReportListElement) {
  // clang-format off
  if (!this.hasTraces_()) {
    return html`
    <div class="empty-message">
      <cr-icon icon="cr:warning"></cr-icon>
      <h1>Could not find any traces saved locally.</h1>
    </div>`;
  }

  return html`${this.traces_.map((traceReport: ClientTraceReport) => html`
    <trace-report .trace="${traceReport}"></trace-report>`)}`;
  // clang-format on
}

export function getHtml(this: TraceReportListElement) {
  // clang-format off
  return html`
  <div class="header">
    <h1>Traces
      <span class="trace-counter" ?hidden="${!this.hasTraces_()}">
        ${this.traces_.length}
      </span>
    </h1>
    ${this.hasTraces_() ? html`
    <div class="utility-bar">
      <cr-button class="tonal-button" ?disabled="${!this.hasTraces_()}"
          @click="${this.onDeleteAllTracesClick_}">
        <cr-icon icon="cr:delete" slot="prefix-icon"></cr-icon>
        Delete All Traces
      </cr-button>
    </div>` : nothing}
  </div>
  ${this.isLoading_ ? html`
  <div class="loading-spinner"><div class="spinner"></div></div>` :
  html`
  <div class="report-list-container">
    ${getReportHtml.bind(this)()}
  </div>`}
  <cr-toast id="toast" duration="5000" ?hidden="${!this.notification_}">
    <div id="notification-card">
      <div class="icon-container ${this.getNotificationStyling_()}">
        <cr-icon icon="${this.getNotificationIcon_()}"></cr-icon>
      </div>
      <div class="notification-message">
        <h4 class="notification-type ${this.getNotificationStyling_()}">
          ${this.getNotificationType_()}
        </h4>
        <span class="notification-label">${this.getNotificationLabel_()}</span>
      </div>
    </div>
  </cr-toast>`;
  // clang-format on
}