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

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

import 'chrome://resources/ash/common/cr_elements/cr_dialog/cr_dialog.js';

import {CrDialogElement} from 'chrome://resources/ash/common/cr_elements/cr_dialog/cr_dialog.js';
import {I18nMixin} from 'chrome://resources/ash/common/cr_elements/i18n_mixin.js';
import {assert} from 'chrome://resources/js/assert.js';
import {EventTracker} from 'chrome://resources/js/event_tracker.js';
import {PolymerElementProperties} from 'chrome://resources/polymer/v3_0/polymer/interfaces.js';
import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {CanvasDrawingProvider} from './drawing_provider.js';
import {InputDataProviderInterface, TabletModeObserverReceiver} from './input_data_provider.mojom-webui.js';
import {getInputDataProvider} from './mojo_interface_provider.js';
import {getTemplate} from './touchscreen_tester.html.js';

// To ensure the tester works when the user rotates their screen, we
// need to set both the canvas width and height to be the larger number.
// Rather than looking for the correct display and find their size
// from backend, we take a simpler approach to set it as a very large
// number. The number is based on largest known supported resolution.
export const SCREEN_MAX_LENGTH = 9999;

// The dialog type enum, including intro-dialog and canvas-dialog.
export enum DialogType {
  INTRO = 'intro-dialog',
  CANVAS = 'canvas-dialog',
}

// The touch event type enum.
export enum TouchEventType {
  START = 'touchstart',
  MOVE = 'touchmove',
  END = 'touchend',
}

// The x and y coordinates to describe the touch location.
interface Point {
  x: number;
  y: number;
}

const TouchscreenTesterElementBase = I18nMixin(PolymerElement);

export class TouchscreenTesterElement extends TouchscreenTesterElementBase {
  static get is(): string {
    return 'touchscreen-tester';
  }

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

  static get properties(): PolymerElementProperties {
    return {
      touchscreenIdUnderTesting: {
        type: Number,
        value: -1,
        notify: true,
      },
    };
  }

  protected touchscreenIdUnderTesting: number;

  // Drawing provider.
  private drawingProvider: CanvasDrawingProvider;

  // A map that stores all the touches.
  // The key is the identifier of the touch. Value is the x and y coordinates
  // of the touch point.
  private touches: Map<number, Point> = new Map<number, Point>();

  // Indicates if the laptop is in tablet mode.
  private isTabletMode: boolean = false;

  // Manages all event listeners.
  private eventTracker: EventTracker = new EventTracker();

  private receiver: TabletModeObserverReceiver|null = null;

  private inputDataProvider: InputDataProviderInterface =
      getInputDataProvider();

  /**
   * For testing only.
   */
  getDrawingProvider(): CanvasDrawingProvider {
    return this.drawingProvider;
  }

  /**
   * For testing only.
   */
  getTouches(): Map<number, Point> {
    return this.touches;
  }

  /**
   * For testing only.
   */
  getIsTabletMode(): boolean {
    return this.isTabletMode;
  }

  /**
   * For testing only.
   */
  getEventTracker(): EventTracker {
    return this.eventTracker;
  }

  getDialog(dialogId: string): CrDialogElement {
    const dialog = this.shadowRoot!.getElementById(dialogId);
    assert(dialog);
    return dialog as CrDialogElement;
  }

  /**
   * Shows the tester's dialog.
   */
  async showTester(evdevId: number): Promise<void> {
    this.inputDataProvider.moveAppToTestingScreen(evdevId);

    this.receiver = new TabletModeObserverReceiver(this);
    const {isTabletMode} = await this.inputDataProvider.observeTabletMode(
        this.receiver.$.bindNewPipeAndPassRemote());
    this.isTabletMode = isTabletMode;

    const introDialog = this.getDialog(DialogType.INTRO);
    await introDialog.requestFullscreen();
    introDialog.showModal();

    this.addListeners();
  }

  /**
   * Add various event listeners.
   */
  private addListeners(): void {
    //  When user presses 'Esc' key, the tester will only exit the fullscreen
    //  mode. However, we want the tester to close when user has exited the
    //  fullscreen mode. Add a event listener to listen to the
    //  'fullscreenchange' event to handle this case.
    this.eventTracker.add(document, 'fullscreenchange', (e: Event) => {
      e.preventDefault();
      if (!document.fullscreenElement &&
          this.touchscreenIdUnderTesting !== -1) {
        this.closeTester();
        // Only when users closes the tester themselves, we call
        // moveAppBackToPreviousScreen function. If the screen is disconnected
        // or untestable, the window movement will be handled by display manager
        // itself.
        this.inputDataProvider.moveAppBackToPreviousScreen();
      }
    });

    // When in tablet mode, pressing volume up button will exit the tester.
    this.eventTracker.add(window, 'keydown', (e: Event) => {
      if ((e as KeyboardEvent).key === 'AudioVolumeUp' && this.isTabletMode) {
        // Exit fullscreen will trigger closing the tester.
        document.exitFullscreen();
      }
    });
  }

  /**
   * Close touchscreen tester.
   */
  closeTester(): void {
    this.getDialog(DialogType.INTRO).close();
    this.getDialog(DialogType.CANVAS).close();
    this.eventTracker.removeAll();
    this.inputDataProvider.setA11yTouchPassthrough(/*enabled=*/ false);
    this.touchscreenIdUnderTesting = -1;
    // Make sure to exit fullscreen if it's not already.
    if (document.fullscreenElement) {
      document.exitFullscreen();
    }
    if (this.receiver) {
      this.receiver.$.close();
    }
  }

  /**
   * Handle when get start button is clicked.
   */
  private onStartClick(): void {
    this.getDialog(DialogType.INTRO).close();
    this.getDialog(DialogType.CANVAS).showModal();

    this.setupCanvas();
    this.inputDataProvider.setA11yTouchPassthrough(/*enabled=*/ true);
  }

  /**
   * Set up canvas width, height and drawing context.
   */
  private setupCanvas(): void {
    const canvas = this.shadowRoot!.querySelector('canvas');
    assert(canvas);

    canvas.width = SCREEN_MAX_LENGTH;
    canvas.height = SCREEN_MAX_LENGTH;

    // CSS in .html file does not have access to this element,
    // therefore adjust it here to make the canvas cover the whole screen.
    const topContainer = this.getDialog(DialogType.CANVAS)!.shadowRoot!
                             .querySelector<HTMLElement>('.top-container');
    topContainer!.style.display = 'none';

    const ctx = canvas.getContext('2d');
    assert(ctx);
    this.drawingProvider = new CanvasDrawingProvider(ctx);
    this.observeDataSource(canvas);
  }

  /**
   * This is the only place that deals with Touch API.
   * In future enhancement to use evdev as data source, this is the place
   * to interact with mojo interface.
   */
  private observeDataSource(canvas: HTMLCanvasElement): void {
    for (const eventType
             of [TouchEventType.START, TouchEventType.MOVE,
                 TouchEventType.END]) {
      this.eventTracker.add(canvas, eventType, (e: Event) => {
        e.preventDefault();
        for (let i = 0; i < (e as TouchEvent).changedTouches.length; i++) {
          const currentTouch = (e as TouchEvent).changedTouches[i];
          const touchPt = {
            x: currentTouch.pageX - canvas.offsetLeft,
            y: currentTouch.pageY - canvas.offsetTop,
          };

          // Call corresponding function to handle those events.
          if (eventType === TouchEventType.START) {
            this.onDrawStart(
                currentTouch.identifier, touchPt, currentTouch.force);
          } else if (eventType === TouchEventType.MOVE) {
            this.onDraw(currentTouch.identifier, touchPt, currentTouch.force);
          } else if (eventType === TouchEventType.END) {
            this.onDrawEnd(currentTouch.identifier, touchPt);
          }
        }
      });
    }
  }

  /**
   * Handle when a 'touchstart' event is fired from Touch API, or a new touch
   * starts from evdev.
   * @param touchId The identifier of a touch.
   * @param touchPt The coordinates of a touch point.
   * @param pressure The pressure of a touch.
   */
  onDrawStart(touchId: number, touchPt: Point, pressure: number): void {
    this.touches.set(touchId, touchPt);
    this.drawingProvider.drawTrailMark(touchPt.x, touchPt.y);
    this.drawingProvider.drawTrail(
        touchPt.x - 1, touchPt.y, touchPt.x, touchPt.y, pressure);
  }

  /**
   * Handle when a 'touchmove' event is fired from Touch API, or an existing
   * touch moves from evdev.
   * @param touchId The identifier of a touch.
   * @param touchPt The coordinates of a touch point.
   * @param pressure The pressure of a touch.
   */
  onDraw(touchId: number, touchPt: Point, pressure: number): void {
    // Previous point of this touch.
    const previousPt = this.touches.get(touchId);
    if (previousPt) {
      this.drawingProvider.drawTrail(
          previousPt.x, previousPt.y, touchPt.x, touchPt.y, pressure);
    }

    // Update the coordinates of this touch.
    this.touches.set(touchId, touchPt);
  }

  /**
   * Handle when a 'touchend' event is fired from Touch API, or an existing
   * touch ends from evdev.
   * @param touchId The identifier of a touch.
   * @param touchPt The coordinates of a touch point.
   */
  onDrawEnd(touchId: number, touchPt: Point): void {
    this.drawingProvider.drawTrailMark(touchPt.x, touchPt.y);
    // This touch has ended. Remove it from the touches object.
    this.touches.delete(touchId);
  }

  /**
   * Implements TabletModeObserver.OnTabletModeChanged.
   * @param isTabletMode Is current display on tablet mode.
   */
  onTabletModeChanged(isTabletMode: boolean): void {
    this.isTabletMode = isTabletMode;
    // TODO(wenyu): Show exit instruction toaster.
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'touchscreen-tester': TouchscreenTesterElement;
  }
}

customElements.define(TouchscreenTesterElement.is, TouchscreenTesterElement);