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 { State } from '../src/state';
import { LogList } from './log_list';

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

/**
 * Class to create action buttons that control the log list webview.
 */
export class LogViewActions {
  private root: HTMLDivElement;
  private clear: HTMLDivElement;
  private logWrap: HTMLDivElement;

  /**
   * Container of action buttons that interact with the log viewer.
   * @param {LogList} logList The log list webview.
   */
  constructor(private logList: LogList, private state: State) {
    this.root = document.createElement('div');
    this.root.id = 'log-view-actions';

    // Clear logs button
    this.clear = document.createElement('div');
    this.clear.id = 'clear';
    this.clear.title = 'Clear Logs';
    this.clear.classList.add('codicon', 'codicon-clear-all', 'icons', 'action-icon');

    // Clear logs onclick
    this.clear.addEventListener('click', (e) => {
      this.logList.reset();
    });

    // Wrap logs button to toggle log line text wrapping.
    this.logWrap = document.createElement('div');
    this.logWrap.id = 'wrap-logs';
    this.logWrap.classList.add('codicon', 'codicon-word-wrap', 'icons', 'action-icon');
    this.updateLogWrapBtn(this.state.shouldWrapLogs);

    this.logWrap.addEventListener('click', (e) => {
      this.state.shouldWrapLogs = !this.state.shouldWrapLogs;
      this.updateLogWrapBtn(this.state.shouldWrapLogs);
    });

    // TODO(fxbug.dev/99730): Save/Load Filter Button
    // TODO(fxbug.dev/95332): Field Visibility Dropdown
    this.root.appendChild(this.clear);
    this.root.appendChild(this.logWrap);
  }

  /**
   * Returns the core element.
   */
  get element(): HTMLDivElement {
    return this.root;
  }

  /**
   * Updates the log text wrap button state (attribute, title, etc) accordingly.
   * @param shouldWrapLogs whether or not the log wrapping is active
   */
  private updateLogWrapBtn(shouldWrapLogs: boolean) {
    this.logList.logWrapping = shouldWrapLogs;
    if (this.state.shouldWrapLogs) {
      this.logWrap.title = DONT_WRAP_LOGS;
      this.logWrap.setAttribute(WRAP_ACTIVE_ATTR, '');
    } else {
      this.logWrap.removeAttribute(WRAP_ACTIVE_ATTR);
      this.logWrap.title = WRAP_LOGS;
    }
  }
}