MD Settings: Add Hotword (OK Google) section to search_page

chrome/browser/resources/settings/search_page/search_page.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/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+<link rel="import" href="/controls/settings_checkbox.html">
+<link rel="import" href="/icons.html">
+<link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/search_engines_page/search_engines_page.html">
 <link rel="import" href="/search_engines_page/search_engines_browser_proxy.html">
 <link rel="import" href="/settings_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="settings-search-page">
   <template>
-    <style include="settings-shared md-select"></style>
+    <style include="settings-shared md-select">
+      iron-icon {
+        -webkit-padding-end: 16px;
+      }
+ 
+      .indented {
+        -webkit-margin-start: 36px;
+      }
+    </style>
     <settings-animated-pages id="pages" section="search">
       <neon-animatable route-path="default">
+        <!-- Omnibox search engine -->
         <div class="settings-box first">
           <p class="start">$i18n{searchExplanation}</p>
           <div>
             <select class="md-select" on-change="onChange_">
               <template is="dom-repeat" items="[[searchEngines_]]">
                 <option selected$="[[item.default]]">[[item.name]]</option>
               </template>
             </select>
             <span class="md-select-underline"></span>
           </div>
         </div>
+
+        <template is="dom-if" if="[[hotwordInfo_.allowed]]">
+          <!-- Hotword (OK Google) -->
+          <div class="settings-box two-line">
+            <settings-checkbox id="hotwordSearchEnable" class="start"
+                label="$i18n{searchOkGoogleLabel}"
+                sub-label="[[getHotwordSearchEnableSubLabel_(
+                           hotwordInfo_.alwaysOn)]]"
+                pref="{{hotwordSearchEnablePref_}}"
+                on-change="onHotwordSearchEnableChange_">
+              <a href="$i18nRaw{hotwordLearnMoreUrl}" target="_blank"
+                  on-tap="doNothing_">
+                $i18n{learnMore}.

[michaelpg, 2016/11/27 22:25:36]

"." should be part of i18n if it's required. "Learn more" + "." doesn't
translate well.

[stevenjb, 2016/11/28 20:53:36]

Switched to a hotword specific string.

+              </a>
+            </settings-checkbox>
+            <div class="secondary-action"
+                hidden$="[[!getShowHotwordSearchRetrain_(hotwordInfo_.*)]]">
+              <paper-button on-tap="onRetrainTap_" class="secondary-button">
+                $i18n{searchOkGoogleRetrain}
+              </paper-button>
+            </div>
+          </div>
+
+          <template is="dom-if"
+              if="[[getShowHotwordError_(hotwordInfo_.*,
+                  hotwordSearchEnablePref_)]]">
+            <div class="settings-box continuation indented">
+              <iron-icon icon="settings:warning"></iron-icon>
+              <div inner-h-t-m-l="[[hotwordInfo_.errorMessage]]"</div>

[michaelpg, 2016/11/27 22:25:35]

missing >

[stevenjb, 2016/11/28 20:53:36]

<grumble>sloppy html parsing</grumble>

Done.

+            </div>
+          </template>
+
+          <template is="dom-if" if="[[hotwordInfo_.historyEnabled]]">
+            <div class="settings-box two-line continuation indented"
+                on-tap="onManageAudioHistoryTap_" actionable>
+              <div class="start">
+                <div>[[i18n('searchOkGoogleAudioHistoryLabel',

[michaelpg, 2016/11/27 22:25:34]

nit: if [[]] has to break, can those be separate lines from the <div> </div>?

[stevenjb, 2016/11/28 20:53:36]

Done.

+                  hotwordInfo_.userName)]]</div>
+                <div class="secondary">$i18n{searchOkGoogleAudioHistorySubtext}
+                </div>
+              </div>
+              <button class="icon-external" is="paper-icon-button-light">
+              </button>
+            </div>
+          </template>
+        </template>
+
+        <!-- Manage search engines -->
         <div id="subpage-trigger" class="settings-box two-line"
             on-tap="onManageSearchEnginesTap_" actionable>
           <div class="start">
             $i18n{searchEnginesManage}
             <div class="secondary">
               $i18n{searchEnginesManageDescription}
             </div>
           </div>
           <button class="subpage-arrow" is="paper-icon-button-light"></button>
         </div>
       </neon-animatable>
       <template is="dom-if" route-path="/searchEngines">
         <settings-subpage
             associated-control="[[$$('#subpage-trigger')]]"
             page-title="$i18n{searchEnginesManage}">
           <settings-search-engines-page></settings-search-engines-page>
         </settings-subpage>
       </template>
     </settings-animated-pages>
   </template>
   <script src="search_page.js"></script>
 </dom-module>