Fix metrics setting id style

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">
   <include src="automatic_settings_reset_banner.html">
 <if expr="chromeos">
   <include src="secondary_user_banner.html">
   <section>
     <div id="network-section-header" class="section-header">
@@ skipping 405 matching lines @@
               metric="Options_SpellingServiceCheckbox"
               pref="spellcheck.use_spelling_service" dialog-pref>
           <span>
             <span i18n-content="spellingPref"></span>
             <span id="spelling-enabled-indicator"
                 class="controlled-setting-indicator"
                 pref="spellcheck.use_spelling_service" dialog-pref>
             </span>
         </label>
       </div>
-      <div id="metricsReportingSetting"
+      <div id="metrics-reporting-setting"
           class="checkbox controlled-setting-with-label">
 <if expr="chromeos">
         <label>
-          <input id="metricsReportingEnabled"
+          <input id="metrics-reporting-enabled"
               pref="cros.metrics.reportingEnabled" type="checkbox">
           <span>
             <span i18n-content="enableLogging"></span>
             <span class="controlled-setting-indicator"
                 pref="cros.metrics.reportingEnabled"></span>
           </span>
         </label>
 </if>
 <if expr="not chromeos">
         <label>
-          <input id="metricsReportingEnabled" type="checkbox">
+          <input id="metrics-reporting-enabled" type="checkbox">
           <span>
             <span i18n-content="enableLogging"></span>
             <span id="metrics-reporting-disabled-icon"
                 class="controlled-setting-indicator"></span>
           </span>
         </label>
         <span id="metrics-reporting-reset-restart">
           <!-- Text filled by JavaScript -->
           <span></span><a is="action-link" role="button"
               class="standalone-action-link"></a><span></span>
         </span>
 </if>
       </div>
-      <div id="rapporDiv" class="checkbox controlled-setting-with-label">
+      <div id="rappor-setting" class="checkbox controlled-setting-with-label">
         <label>
           <input pref="rappor.enabled" type="checkbox"
               metric="Options_RapporEnabledCheckbox">
           <span>
             <span i18n-values=".innerHTML:enableRappor"></span>
             <span class="controlled-setting-indicator"
                 pref="rappor.enabled"></span>
           </span>
         </label>
       <div>
@@ skipping 549 matching lines @@
       </button>
     </div>
   </section>
   </div>  <!-- advanced-settings-container -->
   </div>  <!-- advanced-settings -->
   <footer id="advanced-settings-footer">
     <a is="action-link" id="advanced-settings-expander"
         i18n-content="showAdvancedSettings"></a>
   </footer>
 </div>