[Hotword] Putting preferences under search for hotword service. Putting behind a flag.

chrome/browser/resources/options/browser_options.html

 <div id="settings" class="page" hidden>
   <header>
     <h1 i18n-content="settingsTitle"></h1>
   </header>
   <include src="reset_profile_settings_banner.html">
 <if expr="not pp_ifdef('chromeos')">
   <include src="sync_section.html">
 </if>
 <if expr="pp_ifdef('chromeos')">
   <section>
@@ skipping 121 matching lines @@
         <div class="settings-row">
           <select id="default-search-engine" class="weakrtl"></select>
           <span class="controlled-setting-indicator"
               pref="default_search_provider.enabled">
           </span>
           <button id="manage-default-search-engines"
               i18n-content="defaultSearchManageEngines">
           </button>
         </div>
       </div>
+      <div id ="hotword-search" hidden>
+        <div class="checkbox">
+          <span class="controlled-setting-with-label">
+            <input id="hotword-search-enable" pref="hotword.search_enabled"
+                type="checkbox">
+            <span>
+              <label for="hotword-search-enable"
+                  i18n-values=".innerHTML:hotwordSearchEnable">
+              </label>
+              <span class="controlled-setting-indicator"
+                  pref="hotword.search_enabled">
+              </span>
+            </span>
+          </span>
+          <div id="hotword-search-description" class="hotword-settings">
+            <span i18n-content="hotwordSearchDescription"></span>

[rpetterson, 2014/01/14 21:54:18]

This line is actually supposed to be a light gray per the mocks. I've tried
every combination of id, class, divs, spans, p's, etc. I can think of to get it
to listen to browser_options.css, but something keeps overriding it and making
it solid black. Even doing something like:

#hotword-search-description {
  color: #333;
}

doesn't work. Any ideas?

[samarth, 2014/01/17 01:26:41]

You're probably entering a "css specificity war".  In short, you can probably
make your style take effect by adding a more specific rule (e.g.
#hotword-search-description span {}).  Or adding a !important to the rule.  But
it's probably worth figuring out if there's a better way to restructure the
markup/css so you don't need to do that.

[rpetterson, 2014/01/17 23:53:24]

So I actually had this right before, but I just had the wrong color in there so
I couldn't see the effect. Thanks for the tip on the inspector. It was quite
helpful for figuring this out. I've updated the CSS.

+          </div>
+        </div>
+        <div id="hotword-settings-section" class="hotword-settings" hidden>
+          <div id="hotword-settings-section-container">
+            <div class="checkbox">
+              <span class="controlled-setting-with-label">
+                <input id="hotword-search-timeout"
+                    pref="hotword.search_timeout_enabled" type="checkbox">
+                <span>
+                  <label for="hotword-search-timeout"
+                      i18n-content="hotwordSearchTimeout">
+                  </label>
+                  <span class="controlled-setting-indicator"
+                      pref="hotword.search_timeout_enabled">
+                  </span>
+                </span>
+              </span>
+              <div id="hotword-search-timeout-description"
+                  class="hotword-settings">
+                <span i18n-content="hotwordSearchTimeoutDescription"></span>
+              </div>
+            </div>
+            <div class="checkbox">
+              <span class="controlled-setting-with-label">
+                <input id="hotword-search-incognito-enable"
+                    pref="hotword.incognito_search_enabled" type="checkbox">
+                <span>
+                  <label for="hotword-search-incognito-enable"
+                      i18n-content="hotwordSearchIncognito">
+                  </label>
+                  <span class="controlled-setting-indicator"
+                      pref="hotword.incognito_search_enabled">
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
   </section>
   <section id="sync-users-section" guest-visibility="hidden">
     <h3 i18n-content="sectionTitleUsers"></h3>
 <if expr="pp_ifdef('chromeos')">
     <include src="sync_section.html">
 </if>
     <div id="profiles-section" hidden>
       <list id="profiles-list" class="settings-list" hidden></list>
       <div id="profiles-single-message" class="settings-row"
           i18n-content="profilesSingleUser">
@@ skipping 704 matching lines @@
     </div>
   </section>
   </div>  <!-- advanced-settings-container -->
   </div>  <!-- advanced-settings -->
   <footer>
     <button id="advanced-settings-expander" class="link-button"
         i18n-content="showAdvancedSettings">
     </button>
   </footer>
   </div>