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/cr_link_row/cr_link_row.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/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.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;
      }

      cr-policy-pref-indicator {
        margin-inline-end: var(--cr-controlled-by-spacing);
      }
    </style>
    <settings-toggle-button id="google-assistant-enable"
        class="first primary-toggle"
        pref="{{prefs.settings.voice_interaction.enabled}}"
        label="[[getAssistantOnOffLabel_(
            prefs.settings.voice_interaction.enabled.value)]]"
        disabled="{{prefs.settings.assistant.disabled_by_policy.value}}">
    </settings-toggle-button>
    <template is="dom-if"
        if="[[prefs.settings.voice_interaction.enabled.value]]">
      <settings-toggle-button id="google-assistant-context-enable"
          pref="{{prefs.settings.voice_interaction.context.enabled}}"
          label="$i18n{googleAssistantEnableContext}"
          sub-label="$i18n{googleAssistantEnableContextDescription}">
      </settings-toggle-button>
      <template is="dom-if" if="[[isAssistantAllowed_]]">
        <settings-toggle-button id="google-assistant-hotword-enable"
            pref="{{prefs.settings.voice_interaction.hotword.enabled}}"
            label="$i18n{googleAssistantEnableHotword}"
            sub-label="$i18n{googleAssistantEnableHotwordDescription}"
            on-settings-boolean-control-change="onEnableHotwordChange_"
            hidden="[[!hotwordDspAvailable_]]">
        </settings-toggle-button>
        <div class="settings-box" id="dsp-hotword-container"
            hidden="[[hotwordDspAvailable_]]">
          <div class="start text-area settings-box-text">
            <div class="label">
              $i18n{googleAssistantEnableHotword}
            </div>
            <div class="secondary label">
              $i18n{googleAssistantEnableHotwordWithoutDspDescription}
            </div>
          </div>
          <template is="dom-if" if="[[hotwordEnforced_]]" restamp>
            <cr-policy-pref-indicator id="hotword-policy-pref-indicator"
                pref="{{prefs.settings.voice_interaction.hotword.enabled}}">
            </cr-policy-pref-indicator>
          </template>
          <!-- We don't use the settings_dropdown_menu for the dspHotwordState
               drop down, because the dspHotwordState manages 2 preferences.
               The settings_dropdown_menu is designed to manage only a single
               preference. -->
          <select id="dsp-hotword-state" class="md-select"
              aria-labelledby="googleAssistantEnableHotword"
              on-change="onDspHotwordStateChange_"
              disabled="[[hotwordEnforced_]]">
            <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 continuation embedded">
            <div class="start text-area settings-box-text">
              <div class="label">
                $i18n{googleAssistantVoiceSettings}
              </div>
              <div class="secondary label">
                $i18n{googleAssistantVoiceSettingsDescription}
              </div>
            </div>
            <controlled-button id="retrain-voice-model"
                on-click="onRetrainVoiceModelTapped_"
                label="$i18n{googleAssistantVoiceSettingsRetrainButton}"
                pref="{{prefs.settings.voice_interaction.hotword.enabled}}">
            </controlled-button>
          </div>
        </template>
        <settings-toggle-button id="google-assistant-notification-enable"
            pref="{{prefs.settings.voice_interaction.notification.enabled}}"
            label="$i18n{googleAssistantEnableNotification}"
            sub-label="$i18n{googleAssistantEnableNotificationDescription}">
        </settings-toggle-button>
        <settings-toggle-button id="google-assistant-launch-with-mic-open"
            pref="{{prefs.settings.voice_interaction.launch_with_mic_open}}"
            label="$i18n{googleAssistantLaunchWithMicOpen}"
            sub-label="$i18n{googleAssistantLaunchWithMicOpenDescription}">
        </settings-toggle-button>
      </template>
      <cr-link-row id="google-assistant-settings" class="hr"
          on-click="onGoogleAssistantSettingsTapped_"
          label="$i18n{googleAssistantSettings}" external></cr-link-row>
    </template>
  </template>
  <script src="google_assistant_page.js"></script>
</dom-module>