webviews/logging/components/log_view_actions.ts

// Copyright 2022 The Fuchsia 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 { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import * as styles from './styles';

export const DONT_WRAP_LOGS: string = 'Don\'t wrap logs';
export const WRAP_LOGS: string = 'Wrap logs';

export const RESUME_STREAMING_LOGS: string = 'Resume streaming logs';
export const PAUSE_STREAMING_LOGS: string = 'Pause streaming logs';

const ACTION_ICON_CLASSES: string = 'codicon icons action-icon';

export interface LogViewActionsParameters {
  wrappingLogs?: boolean;
  playActive?: boolean;
}

/**
 * Class to create action buttons that control the log list webview.
 */
@customElement('log-view-actions')
export class LogViewActions extends LitElement {
  static styles = [
    styles.VSCODE_CSS,
    styles.CODICON_CSS,
    css`
      .action-icon {
        background: none;
        border: none;
        color: var(--vscode-icon-foreground);
        height: var(--log-action-height);
        padding: var(--input-padding-vertical) var(--input-padding-horizontal);
        text-align: center;
      }

      .action-icon:hover {
        background: var(--vscode-toolbar-hoverBackground);
        border-radius: 5px;
        cursor: pointer;
      }

      #wrap-logs {
        color: var(--vscode-disabledForeground);
      }

      :host([wrappingLogs]) #wrap-logs {
        color: var(--vscode-icon-foreground);
      }
    `
  ];

  @property({ attribute: true, reflect: true, type: Boolean })
  public wrappingLogs: boolean;

  @property({ attribute: true, reflect: true, type: Boolean })
  public playActive: boolean = false;

  public static readonly wrapLogsChangeEvent: string = 'wrap-logs-change';
  public static readonly clearRequestedEvent: string = 'clear-requested';
  public static readonly playPauseChangeEvent: string = 'play-pause-change';

  constructor(params: LogViewActionsParameters | undefined) {
    super();
    this.wrappingLogs = params?.wrappingLogs ?? false;
    this.playActive = params?.playActive ?? false;
  }

  render() {
    const wrapLogsTitle = this.wrappingLogs ? DONT_WRAP_LOGS : WRAP_LOGS;
    const playPauseTitle = this.playActive ? PAUSE_STREAMING_LOGS : RESUME_STREAMING_LOGS;
    const playPauseIcon = this.playActive ? 'debug-pause' : 'play';

    return html`
      <div
        id="play-pause"
        title="${playPauseTitle}"
        class="${ACTION_ICON_CLASSES} codicon-${playPauseIcon}"
        @click="${this.onPlayPauseButtonClick}"
      ></div>

      <div
        id="clear"
        title="Clear Logs"
        class="${ACTION_ICON_CLASSES} codicon-clear-all"
        @click="${this.onClearButtonClick}"
      ></div>

      <div
        id="wrap-logs"
        title="Wrap Logs"
        class="${ACTION_ICON_CLASSES} codicon-word-wrap"
        @click="${this.onWrapLogsButtonClick}"
        title = "${wrapLogsTitle}"
      ></div>
        `;
  }

  private onClearButtonClick() {
    this.dispatchEvent(new CustomEvent(LogViewActions.clearRequestedEvent, {
      detail: {},
    }));
  }

  private onWrapLogsButtonClick() {
    this.wrappingLogs = !this.wrappingLogs;
    this.dispatchEvent(new CustomEvent(LogViewActions.wrapLogsChangeEvent, {
      detail: {
        wrapLogs: this.wrappingLogs,
      }
    }));
  }

  private onPlayPauseButtonClick() {
    this.playActive = !this.playActive;
    this.dispatchEvent(new CustomEvent(LogViewActions.playPauseChangeEvent, {
      detail: {
        playActive: this.playActive,
      }
    }));
  }
}