dom-ui settings: Layout tweaks to bring Under the Hood closer to mocks....

chrome/browser/resources/options/advanced_options.html

-<div class="page hidden" id="advancedPage">
+<div id="advancedPage" class="page hidden">
   <h1 i18n-content="advancedPage"></h1>
   <section>
     <h3 i18n-content="advancedSectionTitlePrivacy"></h3>
     <div>
-      <div>
+      <div class="section-group">
         <button id="privacyContentSettingsButton"
             i18n-content="privacyContentSettingsButton"></button>
         <button id="privacyClearDataButton"
             i18n-content="privacyClearDataButton"></button>
       </div>
       <div i18n-content="improveBrowsingExperience" class="informational-text">
       </div>
       <div>
         <span i18n-content="disableWebServices" class="informational-text">
         </span>
@@ skipping 32 matching lines @@
       <label class="checkbox" id="metricsReportingSetting">
         <input id="metricsReportingEnabled" type="checkbox">
         <span i18n-content="enableLogging"></span>
       </label>
 </if>
     </div>
   </section>
   <section>
     <h3 i18n-content="advancedSectionTitleContent"></h3>
     <div>
-<if expr="os == 'darwin'">
-      <label class="checkbox">
-        <input id="tabsToLinksPref" pref="webkit.webprefs.tabs_to_links"
-            metric="Options_TabsToLinks" type="checkbox">
-        <span i18n-content="tabsToLinksPref"></span>
-      </label>
-</if>
-      <div>
-        <label>
+      <div class="section-group">
+        <label class="web-content-select-label">
           <span i18n-content="defaultFontSizeLabel"></span>
           <select id="defaultFontSize">
             <option value="9" i18n-content="fontSizeLabelVerySmall"></option>
             <option value="12" i18n-content="fontSizeLabelSmall"></option>
             <option value="16" i18n-content="fontSizeLabelMedium"></option>
             <option value="20" i18n-content="fontSizeLabelLarge"></option>
             <option value="24" i18n-content="fontSizeLabelVeryLarge"></option>
           </select>
         </label>
         <button id="fontSettingsCustomizeFontsButton"
             i18n-content="fontSettingsCustomizeFontsButton"></button>
       </div>
-      <div>
-        <label>
+      <div class="section-group">
+        <label class="web-content-select-label">
           <span i18n-content="defaultZoomLevelLabel"></span>
           <select id="defaultZoomLevel" pref="profile.default_zoom_level"
                   dataType="real" metric="Options_ChangeDefaultZoomLevel">
             <option value="-3">57%</option>
             <option value="-2">69%</option>
             <option value="-1">83%</option>
             <option value="0">100%</option>
             <option value="1">120%</option>
             <option value="2">144%</option>
             <option value="3">172%</option>
             <option value="4">207%</option>
             <option value="5">248%</option>
             <option value="6">298%</option>
           </select>
         </label>
       </div>
+<if expr="not pp_ifdef('chromeos') or os == 'win32'">
+      <div class="section-group">
+</if>
 <if expr="not pp_ifdef('chromeos')">
-      <div>
         <button id="language-button"
             i18n-content="languageAndSpellCheckSettingsButton"></button>
+</if>
+<if expr="os == 'win32'">
+        <button id="gearSettingsConfigureGearsButton"
+            i18n-content="gearSettingsConfigureGearsButton"></button>
+</if>
+<if expr="not pp_ifdef('chromeos') or os == 'win32'">
       </div>
 </if>
-<if expr="os == 'win32'">
-      <div>
-        <label style="display:inline;">
-          <span i18n-content="gearSettingsGroupName"></span>
-          <button id="gearSettingsConfigureGearsButton"
-              i18n-content="gearSettingsConfigureGearsButton"></button>
-        </label>
-      </div>
+<if expr="os == 'darwin'">
+      <label class="checkbox">
+        <input id="tabsToLinksPref" pref="webkit.webprefs.tabs_to_links"
+            metric="Options_TabsToLinks" type="checkbox">
+        <span i18n-content="tabsToLinksPref"></span>
+      </label>
 </if>
     </div>
   </section>
   <section>
     <h3 i18n-content="advancedSectionTitleNetwork"></h3>
     <div>
       <div id="proxiesLabel"></div>
-      <button id="proxiesConfigureButton"
-          i18n-content="proxiesConfigureButton"></button>
+      <div class="section-group">
+        <button id="proxiesConfigureButton"
+            i18n-content="proxiesConfigureButton"></button>
+      </div>
     </div>
   </section>
   <section>
     <h3 i18n-content="advancedSectionTitleTranslate"></h3>
     <div>
       <label class="checkbox">
         <input id="enableTranslate" pref="translate.enabled"
             metric="Options_Translate" type="checkbox">
         <span i18n-content="translateEnableTranslate"></span>
       </label>
     </div>
   </section>
 <if expr="not pp_ifdef('chromeos')">
   <section>
     <h3 i18n-content="downloadLocationGroupName"></h3>
     <div>
-      <div>
+      <div id="download-location-group">
         <label>
           <span i18n-content="downloadLocationBrowseTitle"></span>
           <input id="downloadLocationPath" type="text" size="60" disabled>
         </label>
         <button id="downloadLocationChangeButton"
             i18n-content="downloadLocationChangeButton"></button>
       </div>
       <label class="checkbox">
         <input id="promptForDownload" pref="download.prompt_for_download"
             metric="Options_AskForSaveLocation" type="checkbox">
         <span i18n-content="downloadLocationAskForSaveLocation"></span>
       </label>
       <div i18n-content="autoOpenFileTypesInfo"></div>
-      <div><button id="autoOpenFileTypesResetToDefault"
-          i18n-content="autoOpenFileTypesResetToDefault"></button></div>
+      <div class="section-group">
+        <button id="autoOpenFileTypesResetToDefault"
+            i18n-content="autoOpenFileTypesResetToDefault"></button>
+      </div>
     </div>
   </section>
 </if>
   <section>
     <h3 i18n-content="advancedSectionTitleSecurity"></h3>
     <div>
       <div><button id="certificatesManageButton"
           i18n-content="certificatesManageButton"></button></div>
 <if expr="os == 'win32'">
       <!-- Configure these options for manual handling on windows -->
@@ skipping 29 matching lines @@
       </label>
 </if>
     </div>
   </section>
 <if expr="not pp_ifdef('chromeos')">
   <section id="cloud-print-proxy-section">
     <h3 i18n-content="advancedSectionTitleCloudPrint"></h3>
     <div>
       <div id="cloudPrintProxyLabel"
            i18n-content="cloudPrintProxyDisabledLabel"></div>
-      <div>
+      <div class="section-group">
         <button id="cloudPrintProxySetupButton"
                 i18n-content="cloudPrintProxyDisabledButton"></button>
         <button id="cloudPrintProxyManageButton"
                 i18n-content="cloudPrintProxyEnabledManageButton"></button>
       </div>
     </div>
   </section>
 </if>
 <if expr="pp_ifdef('remoting') and not pp_ifdef('chromeos')">
   <section id="remoting-section">
     <h3 i18n-content="advancedSectionTitleRemoting"></h3>
     <div>
       <div id="remotingStatus" class="section-text"></div>
-      <div>
+      <div class="section-group">
         <button id="remotingSetupButton"
                 i18n-content="remotingSetupButton"
                 style="display:none;"></button>
         <button id="remotingStopButton"
                 i18n-content="remotingStopButton"
                 style="display:none;"></button>
       </div>
     </div>
   </section>
 </if>
 </div>