ash / webui / diagnostics_ui / resources / input_list.ts [blame]

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

import './diagnostics_shared.css.js';
import './input_card.js';
import './keyboard_tester.js';
import './touchscreen_tester.js';

import {loadTimeData} from 'chrome://resources/ash/common/load_time_data.m.js';
import {I18nMixin} from 'chrome://resources/ash/common/cr_elements/i18n_mixin.js';
import {assert} from 'chrome://resources/js/assert.js';
import {PolymerElementProperties} from 'chrome://resources/polymer/v3_0/polymer/interfaces.js';
import {afterNextRender, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {DiagnosticsBrowserProxy, DiagnosticsBrowserProxyImpl} from './diagnostics_browser_proxy.js';
import {ConnectionType, KeyboardInfo} from './input.mojom-webui.js';
import {InputCardElement} from './input_card.js';
import {ConnectedDevicesObserverReceiver, InputDataProviderInterface, InternalDisplayPowerStateObserverReceiver, LidStateObserverReceiver, TabletModeObserverReceiver, TouchDeviceInfo, TouchDeviceType} from './input_data_provider.mojom-webui.js';
import {getTemplate} from './input_list.html.js';
import {KeyboardTesterElement} from './keyboard_tester.js';
import {getInputDataProvider} from './mojo_interface_provider.js';
import {TouchpadTesterElement} from './touchpad_tester.js';
import {TouchscreenTesterElement} from './touchscreen_tester.js';

/**
 * @fileoverview
 * 'input-list' is responsible for displaying keyboard, touchpad, and
 * touchscreen cards.
 */

const InputListElementBase = I18nMixin(PolymerElement);

export interface HostDeviceStatus {
  isLidOpen: boolean;
  isTabletMode: boolean;
}

export class InputListElement extends InputListElementBase {
  static get is(): string {
    return 'input-list';
  }

  static get template(): HTMLTemplateElement {
    return getTemplate();
  }

  static get properties(): PolymerElementProperties {
    return {
      keyboards: {
        type: Array,
        value: () => [],
      },

      touchpads: {
        type: Array,
        value: () => [],
      },

      touchscreens: {
        type: Array,
        value: () => [],
      },

      showTouchpads: {
        type: Boolean,
        computed: 'computeShowTouchpads(touchpads.length)',
      },

      showTouchscreens: {
        type: Boolean,
        computed: 'computeShowTouchscreens(touchscreens.length)',
      },

      touchscreenIdUnderTesting: {
        type: Number,
        value: -1,
        notify: true,
      },

      hostDeviceStatus: {
        type: Object,
      },
    };
  }

  protected showTouchpads: boolean;
  protected showTouchscreens: boolean;
  // The evdev id of touchscreen under testing.
  protected touchscreenIdUnderTesting: number = -1;
  protected hostDeviceStatus:
      HostDeviceStatus = {isLidOpen: false, isTabletMode: false};
  private keyboards: KeyboardInfo[];
  private touchpads: TouchDeviceInfo[];
  private touchscreens: TouchDeviceInfo[];
  private connectedDevicesObserverReceiver: ConnectedDevicesObserverReceiver|
      null = null;
  private internalDisplayPowerStateObserverReceiver:
      InternalDisplayPowerStateObserverReceiver|null = null;
  private tabletModeReceiver: TabletModeObserverReceiver|null = null;
  private lidStateReceiver: LidStateObserverReceiver|null = null;
  private keyboardTester: KeyboardTesterElement;
  private touchscreenTester: TouchscreenTesterElement|null = null;
  private touchpadTester: TouchpadTesterElement|null = null;
  private browserProxy: DiagnosticsBrowserProxy =
      DiagnosticsBrowserProxyImpl.getInstance();
  private inputDataProvider: InputDataProviderInterface =
      getInputDataProvider();

  private computeShowTouchpads(numTouchpads: number): boolean {
    return numTouchpads > 0 && loadTimeData.getBoolean('isTouchpadEnabled');
  }

  private computeShowTouchscreens(numTouchscreens: number): boolean {
    return numTouchscreens > 0 &&
        loadTimeData.getBoolean('isTouchscreenEnabled');
  }

  constructor() {
    super();
    this.browserProxy.initialize();
    this.loadInitialDevices().then(() => {
      this.handleKeyboardTesterDirectOpen();
    });
    this.observeConnectedDevices();
    this.observeInternalDisplayPowerState();
    this.observeLidState();
    this.observeTabletMode();
  }

  override connectedCallback(): void {
    super.connectedCallback();
    const keyboardTester = this.shadowRoot!.querySelector('keyboard-tester');
    assert(keyboardTester);
    this.keyboardTester = keyboardTester;
  }

  private loadInitialDevices(): Promise<void> {
    return this.inputDataProvider.getConnectedDevices().then((devices) => {
      this.keyboards = devices.keyboards;
      this.touchpads = devices.touchDevices.filter(
          (device: TouchDeviceInfo) =>
              device.type === TouchDeviceType.kPointer);
      this.touchscreens = devices.touchDevices.filter(
          (device: TouchDeviceInfo) => device.type === TouchDeviceType.kDirect);
    });
  }

  private observeConnectedDevices(): void {
    this.connectedDevicesObserverReceiver =
        new ConnectedDevicesObserverReceiver(this);
    this.inputDataProvider.observeConnectedDevices(
        this.connectedDevicesObserverReceiver.$.bindNewPipeAndPassRemote());
  }

  private observeInternalDisplayPowerState(): void {
    this.internalDisplayPowerStateObserverReceiver =
        new InternalDisplayPowerStateObserverReceiver(this);
    this.inputDataProvider.observeInternalDisplayPowerState(
        this.internalDisplayPowerStateObserverReceiver.$
            .bindNewPipeAndPassRemote());
  }

  private observeLidState(): void {
    this.lidStateReceiver = new LidStateObserverReceiver(this);
    this.inputDataProvider
        .observeLidState(this.lidStateReceiver.$.bindNewPipeAndPassRemote())
        .then(({isLidOpen}: {isLidOpen: boolean}) => {
          this.onLidStateChanged(isLidOpen);
        });
  }

  private observeTabletMode(): void {
    this.tabletModeReceiver = new TabletModeObserverReceiver(this);
    this.inputDataProvider
        .observeTabletMode(this.tabletModeReceiver.$.bindNewPipeAndPassRemote())
        .then(({isTabletMode}: {isTabletMode: boolean}) => {
          this.onTabletModeChanged(isTabletMode);
        });
  }

  /**
   * Implements
   * InternalDisplayPowerStateObserver.OnInternalDisplayPowerStateChanged.
   * @param isDisplayOn Just applied value of whether the display power is on.
   */
  onInternalDisplayPowerStateChanged(isDisplayOn: boolean): void {
    // Find the internal touchscreen.
    const index = this.touchscreens.findIndex(
        (device: TouchDeviceInfo) =>
            device.connectionType === ConnectionType.kInternal);
    if (index != -1) {
      // Copy object to enforce dom to re-render.
      const internalTouchscreen = {...this.touchscreens[index]};
      internalTouchscreen.testable = isDisplayOn;
      this.splice('touchscreens', index, 1, internalTouchscreen);

      // If the internal display becomes untestable, and it is currently under
      // testing, close the touchscreen tester.
      if (!isDisplayOn &&
          internalTouchscreen.id === this.touchscreenIdUnderTesting) {
        assert(this.touchscreenTester);
        this.touchscreenTester.closeTester();
      }
    }
  }

  /**
   * Implements ConnectedDevicesObserver.OnKeyboardConnected.
   */
  onKeyboardConnected(newKeyboard: KeyboardInfo): void {
    this.push('keyboards', newKeyboard);
  }

  /**
   * Removes the device with the given evdev ID from one of the device list
   * properties.
   * @param path the property's path
   */

  private removeDeviceById(
      path: 'keyboards'|'touchpads'|'touchscreens', id: number): void {
    const index = this.get(path).findIndex(
        (device: KeyboardInfo|TouchDeviceInfo) => device.id === id);
    if (index !== -1) {
      this.splice(path, index, 1);
    }
  }

  private showDeviceDisconnectedToast(): void {
    this.dispatchEvent(new CustomEvent('show-toast', {
      composed: true,
      bubbles: true,
      detail: {message: loadTimeData.getString('deviceDisconnected')},
    }));
  }

  /**
   * Implements ConnectedDevicesObserver.OnKeyboardDisconnected.
   */
  onKeyboardDisconnected(id: number): void {
    this.removeDeviceById('keyboards', id);
    if (this.keyboards.length === 0 && this.keyboardTester?.isOpen()) {
      // When no keyboards are connected, the <diagnostics-app> component hides
      // the input page. If that happens while a <cr-dialog> is open, the rest
      // of the app remains unresponsive due to the dialog's native logic
      // blocking interaction with other elements. To prevent this we have to
      // explicitly close the dialog when this happens.
      this.keyboardTester.close();
      this.showDeviceDisconnectedToast();
    }
  }

  /**
   * Implements ConnectedDevicesObserver.OnTouchDeviceConnected.
   */
  onTouchDeviceConnected(newTouchDevice: TouchDeviceInfo): void {
    if (newTouchDevice.type === TouchDeviceType.kPointer) {
      this.push('touchpads', newTouchDevice);
    } else {
      this.push('touchscreens', newTouchDevice);
    }
  }

  /**
   * Implements ConnectedDevicesObserver.OnTouchDeviceDisconnected.
   */
  onTouchDeviceDisconnected(id: number): void {
    this.removeDeviceById('touchpads', id);
    this.removeDeviceById('touchscreens', id);

    // If the touchscreen under testing is disconnected, close the touchscreen
    // tester.
    if (id === this.touchscreenIdUnderTesting) {
      assert(this.touchscreenTester);
      this.touchscreenTester.closeTester();
    }
  }

  private handleKeyboardTestButtonClick(e: CustomEvent): void {
    const keyboard: KeyboardInfo|undefined = this.keyboards.find(
        (keyboard: KeyboardInfo) => keyboard.id === e.detail.evdevId);
    assert(keyboard);
    this.keyboardTester.keyboard = keyboard;
    this.keyboardTester.show();
  }

  /**
   * Show the keyboard tester directly if `showDefaultKeyboardTester` is present
   * in the query string.
   */
  private handleKeyboardTesterDirectOpen(): void {
    const params = new URLSearchParams(window.location.search);
    if (params.has('showDefaultKeyboardTester') && this.keyboards.length > 0 &&
        !this.keyboardTester?.isOpen()) {
      this.keyboardTester.keyboard = this.keyboards[0];
      this.keyboardTester.show();
    }
  }

  /**
   * Shows touchpad-tester interface when input-card "test" button for specific
   * device is clicked.
   */
  protected handleTouchpadTestButtonClick(e: CustomEvent): void {
    this.touchpadTester =
        this.shadowRoot!.querySelector(TouchpadTesterElement.is);
    assert(this.touchpadTester);
    const touchpad: TouchDeviceInfo|undefined = this.touchpads.find(
        (touchpad: TouchDeviceInfo) => touchpad.id === e.detail.evdevId);
    assert(touchpad);
    this.touchpadTester.show(touchpad);
  }

  /**
   * Handles when the touchscreen Test button is clicked.
   */
  private handleTouchscreenTestButtonClick(e: CustomEvent): void {
    this.touchscreenTester =
        this.shadowRoot!.querySelector('touchscreen-tester');
    assert(this.touchscreenTester);
    this.touchscreenIdUnderTesting = e.detail.evdevId;
    this.touchscreenTester.showTester(e.detail.evdevId);
  }

  /**
   * 'navigation-view-panel' is responsible for calling this function when
   * the active page changes.
   */
  onNavigationPageChanged({isActive}: {isActive: boolean}): void {
    if (isActive) {
      // Focus the first visible card title. If no cards are present,
      // fallback to focusing the element's main container.
      afterNextRender(this, () => {
        if (this.keyboards) {
          const keyboard: InputCardElement|null =
              this.shadowRoot!.querySelector('#keyboardInputCard');
          assert(keyboard);
          const keyboardTitle: HTMLDivElement|null =
              keyboard.querySelector('#keyboardTitle');
          assert(keyboardTitle);
          keyboardTitle.focus();
        } else {
          const inputListContainer: HTMLDivElement|null =
              this.shadowRoot!.querySelector('#inputListContainer');
          assert(inputListContainer);
          inputListContainer.focus();
        }
      });
      // TODO(ashleydp): Remove when a call can be made at a higher component
      // to avoid duplicate code in all navigatable pages.
      this.browserProxy.recordNavigation('input');
    }
  }

  onHostDeviceStatusChanged(): void {
    // If the keyboard tester isn't open or we aren't testing an internal
    // keyboard, do nothing.
    if (!this.keyboardTester.isOpen() ||
        this.keyboardTester.keyboard.connectionType !=
            ConnectionType.kInternal) {
      return;
    }

    // Keyboard tester remains open if the lid is open and we are not in tablet
    // mode.
    if (this.hostDeviceStatus.isLidOpen &&
        !this.hostDeviceStatus.isTabletMode) {
      return;
    }

    this.keyboardTester.close();
    this.dispatchEvent(new CustomEvent('show-toast', {
      composed: true,
      bubbles: true,
      detail: {message: this.getKeyboardTesterClosedToastString()},
    }));
  }

  getKeyboardTesterClosedToastString(): string {
    if (!this.hostDeviceStatus.isLidOpen) {
      return loadTimeData.getString('inputKeyboardTesterClosedToastLidClosed');
    }

    if (this.hostDeviceStatus.isTabletMode) {
      return loadTimeData.getString('inputKeyboardTesterClosedToastTabletMode');
    }

    return loadTimeData.getString('deviceDisconnected');
  }

  /**
   * Implements TabletModeObserver.OnTabletModeChanged.
   * @param isTabletMode Is current display on tablet mode.
   */
  onTabletModeChanged(isTabletMode: boolean): void {
    this.hostDeviceStatus = {
      ...this.hostDeviceStatus,
      isTabletMode: isTabletMode,
    };
    this.onHostDeviceStatusChanged();
  }

  onLidStateChanged(isLidOpen: boolean): void {
    this.hostDeviceStatus = {
      ...this.hostDeviceStatus,
      isLidOpen: isLidOpen,
    };
    this.onHostDeviceStatusChanged();
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'input-list': InputListElement;
  }
}

customElements.define(InputListElement.is, InputListElement);