chrome/browser/resources/settings/google_assistant_page/google_assistant_page.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/md_select_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="google_assistant_browser_proxy.html">
<link rel="import" href="../controls/controlled_button.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../prefs/pref_util.html">

<dom-module id="settings-google-assistant-page">
  <template>
    <style include="settings-shared md-select">
      .text-area {
        margin-inline-end: 24px;
      }

      select.md-select {
        min-width: 200px;
      }

      /**
       * This style is copied from the settings_dropdown_menu.
       * We don't use the settings_dropdown_menu for the
       * dspHotwordState drop down (see below), because the
       * dspHotwordState manages 2 preferences. The
       * settings_dropdown_menu is designed to manage only a
       * single preference.
       */
      cr-policy-pref-indicator {
        height: 24px;
        order: 0;
        width: 24px;
      }
    </style>
    <settings-toggle-button id="googleAssistantEnable"
        class="first primary-toggle"
        pref="{{prefs.settings.voice_interaction.enabled}}"
        label="[[getAssistantOnOffLabel_(
            prefs.settings.voice_interaction.enabled.value)]]">
    </settings-toggle-button>
    <template is="dom-if"
        if="[[prefs.settings.voice_interaction.enabled.value]]">
      <settings-toggle-button id="googleAssistantContextEnable"
          pref="{{prefs.settings.voice_interaction.context.enabled}}"
          label="$i18n{googleAssistantEnableContext}"
          sub-label="$i18n{googleAssistantEnableContextDescription}">
      </settings-toggle-button>
      <template is="dom-if" if="[[assistantFeatureEnabled_]]">
        <settings-toggle-button id="googleAssistantHotwordEnable"
            pref="{{prefs.settings.voice_interaction.hotword.enabled}}"
            label="$i18n{googleAssistantEnableHotword}"
            sub-label="$i18n{googleAssistantEnableHotwordDescription}"
            hidden="[[!hotwordDspAvailable_]]">
        </settings-toggle-button>
        <div class="settings-box three-line"
            hidden="[[hotwordDspAvailable_]]">
          <div class="start text-area">
            <div class="label">
              $i18n{googleAssistantEnableHotword}
            </div>
            <div class="secondary label" hidden="[[!hotwordDefaultOn_]]">
              $i18n{googleAssistantEnableHotwordWithoutDspDescription}
            </div>
            <div class="secondary label" hidden="[[hotwordDefaultOn_]]">
              $i18n{googleAssistantEnableHotwordDescription}
            </div>
          </div>
          <template is="dom-if"
              if="[[prefs.settings.voice_interaction.enabled.controllerBy]]"
              restamp>
            <cr-policy-pref-indicator
                pref="{{prefs.settings.voice_interaction.hotword.enabled}}">
            </cr-policy-pref-indicator>
          </template>
          <select id="dspHotwordState" class="md-select"
              aria-labelledby="googleAssistantEnableHotword"
              on-change="onDspHotwordStateChange_"
              disabled="[[hotwordDisabled_]]">
            <template is="dom-repeat" items="[[hotwordDropdownList_]]">
              <option value="[[item.value]]"
                  selected="[[isDspHotwordStateMatch_(item.value)]]">
                [[item.name]]
              </option>
            </template>
          </select>
        </div>
        <template is="dom-if" if="[[shouldShowVoiceMatchSettings_]]">
          <div class="settings-box two-line">
            <div class="start text-area">
              <div class="label">
                $i18n{googleAssistantVoiceSettings}
              </div>
              <div class="secondary label">
                $i18n{googleAssistantVoiceSettingsDescription}
              </div>
            </div>
            <controlled-button id="button" class="secondary-button"
                on-click="onRetrainVoiceModelTapped_"
                label="$i18n{googleAssistantVoiceSettingsRetrainButton}"
                pref="{{prefs.settings.voice_interaction.hotword.enabled}}">
            </controlled-button>
          </div>
        </template>
        <settings-toggle-button id="googleAssistantNotificationEnable"
            pref="{{prefs.settings.voice_interaction.notification.enabled}}"
            label="$i18n{googleAssistantEnableNotification}"
            sub-label="$i18n{googleAssistantEnableNotificationDescription}">
        </settings-toggle-button>
        <settings-toggle-button id="googleAssistantLaunchWithMicOpen"
            pref="{{prefs.settings.voice_interaction.launch_with_mic_open}}"
            label="$i18n{googleAssistantLaunchWithMicOpen}"
            sub-label="$i18n{googleAssistantLaunchWithMicOpenDescription}">
        </settings-toggle-button>
      </template>
      <div id="googleAssistantSettings" class="settings-box"
          on-click="onGoogleAssistantSettingsTapped_" actionable>
        <div class="start">
          $i18n{googleAssistantSettings}
        </div>
        <paper-icon-button-light class="icon-external">
          <button></button>
        </paper-icon-button-light>
      </div>
    </template>
  </template>
  <script src="google_assistant_page.js"></script>
</dom-module>