chromium/chrome/browser/resources/side_panel/read_anything/menus/color_menu.ts

// 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 './simple_action_menu.js';
import '../read_anything_toolbar.css.js';

import {WebUiListenerMixin} from '//resources/cr_elements/web_ui_listener_mixin.js';
import {loadTimeData} from '//resources/js/load_time_data.js';
import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {ToolbarEvent} from '../common.js';
import {ReadAnythingSettingsChange} from '../metrics_browser_proxy.js';
import {ReadAnythingLogger} from '../read_anything_logger.js';

import {getTemplate} from './color_menu.html.js';
import type {MenuStateItem} from './menu_util.js';
import {getIndexOfSetting} from './menu_util.js';
import type {SimpleActionMenu} from './simple_action_menu.js';

export interface ColorMenu {
  $: {
    menu: SimpleActionMenu,
  };
}

const ColorMenuBase = WebUiListenerMixin(PolymerElement);

// Stores and propagates the data for the color theme menu.
export class ColorMenu extends ColorMenuBase {
  private options_: Array<MenuStateItem<number>> = [
    {
      title: loadTimeData.getString('defaultColorTitle'),
      icon: 'read-anything-20:default-theme',
      data: chrome.readingMode.defaultTheme,
    },
    {
      title: loadTimeData.getString('lightColorTitle'),
      icon: 'read-anything-20:light-theme',
      data: chrome.readingMode.lightTheme,
    },
    {
      title: loadTimeData.getString('darkColorTitle'),
      icon: 'read-anything-20:dark-theme',
      data: chrome.readingMode.darkTheme,
    },
    {
      title: loadTimeData.getString('yellowColorTitle'),
      icon: 'read-anything-20:yellow-theme',
      data: chrome.readingMode.yellowTheme,
    },
    {
      title: loadTimeData.getString('blueColorTitle'),
      icon: 'read-anything-20:blue-theme',
      data: chrome.readingMode.blueTheme,
    },
  ];

  private logger_: ReadAnythingLogger = ReadAnythingLogger.getInstance();

  static get is() {
    return 'color-menu';
  }

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

  static get properties() {
    return {
      options_: Array,
      settingsPrefs: Object,
      toolbarEventEnum_: {
        type: Object,
        value: ToolbarEvent,
      },
    };
  }

  open(anchor: HTMLElement) {
    this.$.menu.open(anchor);
  }

  private restoredThemeIndex_(): number {
    return getIndexOfSetting(this.options_, chrome.readingMode.colorTheme);
  }

  private onThemeChange_(event: CustomEvent<{data: number}>) {
    chrome.readingMode.onThemeChange(event.detail.data);
    this.logger_.logTextSettingsChange(ReadAnythingSettingsChange.THEME_CHANGE);
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'color-menu': ColorMenu;
  }
}

customElements.define(ColorMenu.is, ColorMenu);