MD Settings: Fix subpage visibility and add appearance page tests

chrome/browser/resources/settings/appearance_page/appearance_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/iron-flex-layout/iron-flex-layout-classes.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="appearance_browser_proxy.html">
 <link rel="import" href="../controls/controlled_radio_button.html">
 <link rel="import" href="../controls/extension_controlled_indicator.html">
 <link rel="import" href="../controls/settings_dropdown_menu.html">
 <link rel="import" href="../controls/settings_radio_group.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../route.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">
 <link rel="import" href="appearance_fonts_page.html">
 <link rel="import" href="home_url_input.html">
 
 <dom-module id="settings-appearance-page">
   <template>
     <style include="settings-shared md-select iron-flex">
+      /* Conditional logic makes identifying the first settings-box complicated
+         so use first-of-type here. */
+      settings-box:first-of-type {
+        border-top: none;
+      }
+
       .secondary-button ~ .secondary-button {
         -webkit-margin-start: 12px;
       }
 
       #custom-input {
         margin-bottom: 1rem;
       }
 
       #customHomePage {
         --paper-input-container: {
           width: 200px;
         };
         width: 100%;  /* Pushes policy indicators to end. */
       }
     </style>
     <settings-animated-pages id="pages" section="appearance"
         focus-config="[[focusConfig_]]">
       <neon-animatable route-path="default">
 <if expr="chromeos">
-        <div class="settings-box first two-line" id="wallpaperButton"
-            on-tap="openWallpaperManager_" actionable
-            hidden="[[!pageVisibility.setWallpaper]]">
-          <div class="start">
-            $i18n{setWallpaper}
-            <div class="secondary" id="wallpaperSecondary">
-              $i18n{openWallpaperApp}
-            </div>
-          </div>
-          <button class="icon-external" is="paper-icon-button-light"
-              aria-label="$i18n{setWallpaper}"
-              aria-describedby="wallpaperSecondary"></button>
-        </div>
-        <div class="settings-box two-line"
-            hidden="[[!pageVisibility.setTheme]]">
-</if>
-<if expr="not chromeos">
-        <div class="settings-box two-line first"
-            hidden="[[!pageVisibility.setTheme]]">
-</if>
-          <a class="start two-line inherit-color no-outline" tabindex="-1"
-              target="_blank" href$="[[getThemeHref_(themeUrl_)]]">
-            <div class="flex">
-              $i18n{themes}
-              <div class="secondary" id="themesSecondary">
-                [[themeSublabel_]]
+        <template is="dom-if" if="[[showPage_(pageVisibility.setWallpaper)]]">
+          <div id="setWallpaper" class="settings-box two-line"
+              on-tap="openWallpaperManager_" actionable>
+            <div class="start">
+              $i18n{setWallpaper}
+              <div class="secondary" id="wallpaperSecondary">
+                $i18n{openWallpaperApp}
               </div>
             </div>
             <button class="icon-external" is="paper-icon-button-light"
-                actionable aria-label="$i18n{themes}"
-                aria-describedby="themesSecondary"></button>
-          </a>
+                aria-label="$i18n{setWallpaper}"
+                aria-describedby="wallpaperSecondary">
+            </button>
+          </div>
+        </template>
+</if>
+        <template is="dom-if" if="[[showPage_(pageVisibility.setTheme)]]">
+          <div id="setTheme" class="settings-box two-line">
+            <a class="start two-line inherit-color no-outline" tabindex="-1"
+                target="_blank" href$="[[getThemeHref_(themeUrl_)]]">
+              <div class="flex">
+                $i18n{themes}
+                <div class="secondary" id="themesSecondary">
+                  [[themeSublabel_]]
+                </div>
+              </div>
+              <button class="icon-external" is="paper-icon-button-light"
+                  actionable aria-label="$i18n{themes}"
+                  aria-describedby="themesSecondary">
+              </button>
+            </a>
 <if expr="not is_linux or chromeos">
-          <template is="dom-if" if="[[prefs.extensions.theme.id.value]]">
-            <div class="separator"></div>
-            <paper-button id="useDefault" on-tap="onUseDefaultTap_"
-                class="secondary-button">
-              $i18n{resetToDefaultTheme}
-            </paper-button>
-          </template>
+            <template is="dom-if" if="[[prefs.extensions.theme.id.value]]">
+              <div class="separator"></div>
+              <paper-button id="useDefault" on-tap="onUseDefaultTap_"
+                  class="secondary-button">
+                $i18n{resetToDefaultTheme}
+              </paper-button>
+            </template>
 </if>
 <if expr="is_linux and not chromeos">
-          <div class="layout horizontal center" hidden="[[!showThemesSecondary_(
-              prefs.extensions.theme.id.value, useSystemTheme_)]]"
-              id="themesSecondaryActions">
-            <div class="separator"></div>
-            <template is="dom-if" if="[[showUseClassic_(
-                prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp>
-              <paper-button id="useDefault" on-tap="onUseDefaultTap_"
-                  class="secondary-button">
-                $i18n{useClassicTheme}
-              </paper-button>
-            </template>
-            <template is="dom-if" if="[[showUseSystem_(
-                prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp>
-              <paper-button id="useSystem" on-tap="onUseSystemTap_"
-                  class="secondary-button">
-                $i18n{useSystemTheme}
-              </paper-button>
-            </template>
-          </div>
+            <div class="layout horizontal center"
+                hidden="[[!showThemesSecondary_(
+                    prefs.extensions.theme.id.value, useSystemTheme_)]]"
+                id="themesSecondaryActions">
+              <div class="separator"></div>
+              <template is="dom-if" if="[[showUseClassic_(
+                  prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp>
+                <paper-button id="useDefault" on-tap="onUseDefaultTap_"
+                    class="secondary-button">
+                  $i18n{useClassicTheme}
+                </paper-button>
+              </template>
+              <template is="dom-if" if="[[showUseSystem_(
+                  prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp>
+                <paper-button id="useSystem" on-tap="onUseSystemTap_"
+                    class="secondary-button">
+                  $i18n{useSystemTheme}
+                </paper-button>
+              </template>
+            </div>
 </if>
-        </div>
-        <div class="settings-box"
-            hidden="[[!pageVisibility.homeButton]]">
-          <settings-toggle-button class="start" elide-label
-              pref="{{prefs.browser.show_home_button}}"
-              label="$i18n{showHomeButton}"
-              sub-label="[[getShowHomeSubLabel_(
-                  prefs.browser.show_home_button.value,
-                  prefs.homepage_is_newtabpage.value,
-                  prefs.homepage.value)]]">
-          </settings-toggle-button>
-        </div>
-        <template is="dom-if" if="[[prefs.browser.show_home_button.value]]">
-          <div class="list-frame" hidden="[[!pageVisibility.homeButton]]">
-            <settings-radio-group pref="{{prefs.homepage_is_newtabpage}}">
-              <controlled-radio-button class="list-item" name="true"
-                  pref="[[prefs.homepage_is_newtabpage]]"
-                  label="$i18n{homePageNtp}" no-extension-indicator>
-              </controlled-radio-button>
-              <controlled-radio-button id="custom-input" class="list-item"
-                  name="false" pref="[[prefs.homepage_is_newtabpage]]"
-                  no-extension-indicator>
-                <!-- TODO(dbeam): this can show double indicators when both
-                     homepage and whether to use the NTP as the homepage are
-                     managed. -->
-                <home-url-input id="customHomePage" pref="{{prefs.homepage}}"
-                    can-tab="[[!prefs.homepage_is_newtabpage.value]]">
-                </home-url-input>
-              </controlled-radio-button>
-              <template is="dom-if" if="[[prefs.homepage.extensionId]]">
-                <extension-controlled-indicator
-                    extension-id="[[prefs.homepage.extensionId]]"
-                    extension-can-be-disabled="[[
-                        prefs.homepage.extensionCanBeDisabled]]"
-                    extension-name="[[prefs.homepage.controlledByName]]"
-                    on-disable-extension="onDisableExtension_">
-                </extension-controlled-indicator>
-              </template>
-            </settings-radio-group>
           </div>
         </template>
-        <div class="settings-box"
-            hidden="[[!pageVisibility.bookmarksBar]]">
-          <settings-toggle-button class="start"
-              pref="{{prefs.bookmark_bar.show_on_all_tabs}}"
-              label="$i18n{showBookmarksBar}">
-          </settings-toggle-button>
-        </div>
-        <div class$="settings-box [[getFirst_(pageVisibility.bookmarksBar)]]">
+        <template is="dom-if" if="[[showPage_(pageVisibility.homeButton)]]">
+          <div id="homeButton" class="settings-box">
+            <settings-toggle-button class="start" elide-label
+                pref="{{prefs.browser.show_home_button}}"
+                label="$i18n{showHomeButton}"
+                sub-label="[[getShowHomeSubLabel_(
+                    prefs.browser.show_home_button.value,
+                    prefs.homepage_is_newtabpage.value,
+                    prefs.homepage.value)]]">
+            </settings-toggle-button>
+          </div>
+          <template is="dom-if" if="[[prefs.browser.show_home_button.value]]">
+            <div class="list-frame">
+              <settings-radio-group pref="{{prefs.homepage_is_newtabpage}}">
+                <controlled-radio-button class="list-item" name="true"
+                    pref="[[prefs.homepage_is_newtabpage]]"
+                    label="$i18n{homePageNtp}" no-extension-indicator>
+                </controlled-radio-button>
+                <controlled-radio-button id="custom-input" class="list-item"
+                    name="false" pref="[[prefs.homepage_is_newtabpage]]"
+                    no-extension-indicator>
+                  <!-- TODO(dbeam): this can show double indicators when both
+                       homepage and whether to use the NTP as the homepage are
+                       managed. -->
+                  <home-url-input id="customHomePage" pref="{{prefs.homepage}}"
+                      can-tab="[[!prefs.homepage_is_newtabpage.value]]">
+                  </home-url-input>
+                </controlled-radio-button>
+                <template is="dom-if" if="[[prefs.homepage.extensionId]]">
+                  <extension-controlled-indicator
+                      extension-id="[[prefs.homepage.extensionId]]"
+                      extension-can-be-disabled="[[
+                          prefs.homepage.extensionCanBeDisabled]]"
+                      extension-name="[[prefs.homepage.controlledByName]]"
+                      on-disable-extension="onDisableExtension_">
+                  </extension-controlled-indicator>
+                </template>
+              </settings-radio-group>
+            </div>
+          </template>
+        </template>
+        <template is="dom-if" if="[[showPage_(pageVisibility.bookmarksBar)]]">
+          <div id="bookmarksBar" class="settings-box">
+            <settings-toggle-button class="start"
+                pref="{{prefs.bookmark_bar.show_on_all_tabs}}"
+                label="$i18n{showBookmarksBar}">
+            </settings-toggle-button>
+          </div>
+        </template>
 <if expr="is_linux and not chromeos">
+        <div class$="settings-box">
           <settings-toggle-button class="start"
               pref="{{prefs.browser.custom_chrome_frame}}"
               label="$i18n{showWindowDecorations}"
               inverted>
           </settings-toggle-button>
         </div>
+</if>
         <div class="settings-box">
-</if>
           <div class="start">$i18n{fontSize}</div>
           <settings-dropdown-menu id="defaultFontSize" label="$i18n{fontSize}"
               pref="{{prefs.webkit.webprefs.default_font_size}}"
               menu-options="[[fontSizeOptions_]]">
           </settings-dropdown-menu>
         </div>
         <div id="customize-fonts-subpage-trigger" class="settings-box"
             on-tap="onCustomizeFontsTap_" actionable>
           <div class="start">
             $i18n{customizeFonts}
           </div>
           <button class="subpage-arrow" is="paper-icon-button-light"
               aria-label="$i18n{customizeFonts}"></button>
         </div>
-        <div class="settings-box" hidden="[[!pageVisibility.pageZoom]]">
-          <div id="pageZoom" class="start">$i18n{pageZoom}</div>
-          <div class="md-select-wrapper">
-            <select id="zoomLevel" class="md-select" aria-labelledby="pageZoom"
-                on-change="onZoomLevelChange_">
-              <template is="dom-repeat" items="[[pageZoomLevels_]]">
-                <option value="[[item]]"
-                    selected="[[zoomValuesEqual_(item, defaultZoom_)]]">
-                  [[formatZoom_(item)]]%
-                </option>
-              </template>
-            </select>
-            <span class="md-select-underline"></span>
+        <template is="dom-if" if="[[showPage_(pageVisibility.pageZoom)]]">
+          <div class="settings-box">
+            <div id="pageZoom" class="start">$i18n{pageZoom}</div>
+            <div class="md-select-wrapper">
+              <select id="zoomLevel" class="md-select"
+                  aria-labelledby="pageZoom"
+                  on-change="onZoomLevelChange_">
+                <template is="dom-repeat" items="[[pageZoomLevels_]]">
+                  <option value="[[item]]"
+                      selected="[[zoomValuesEqual_(item, defaultZoom_)]]">
+                    [[formatZoom_(item)]]%
+                  </option>
+                </template>
+              </select>
+              <span class="md-select-underline"></span>
+            </div>
           </div>
-        </div>
+        </template>
       </neon-animatable>
       <template is="dom-if" route-path="/fonts">
         <settings-subpage
             associated-control="[[$$('#customize-fonts-subpage-trigger')]]"
             page-title="$i18n{customizeFonts}">
           <settings-appearance-fonts-page prefs="{{prefs}}">
           </settings-appearance-fonts-page>
         </settings-subpage>
       </template>
     </settings-animated-pages>
   </template>
   <script src="appearance_page.js"></script>
 </dom-module>