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">
@@ skipping 23 matching lines @@
         --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"
+        <div class="settings-box first two-line" id="setWallpaper"
             on-tap="openWallpaperManager_" actionable
-            hidden="[[!pageVisibility.setWallpaper]]">
+            hidden="[[!showPage_(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]]">
+        <div id="setTheme" class="settings-box two-line"
+            hidden="[[!showPage_(pageVisibility.setTheme)]]">
 </if>
 <if expr="not chromeos">
-        <div class="settings-box two-line first"
-            hidden="[[!pageVisibility.setTheme]]">
+        <div id="setTheme" class="settings-box two-line first"
+            hidden="[[!showPage_(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_]]
               </div>
             </div>
             <button class="icon-external" is="paper-icon-button-light"
@@ skipping 24 matching lines @@
             <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]]">
+        <div id="homeButton" class="settings-box"
+            hidden="[[!showPage_(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]]">
+          <div class="list-frame"
+              hidden="[[!showPage_(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]]">
+        <div id="bookmarksBar" class="settings-box"
+            hidden="[[!showPage_(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)]]">
 <if expr="is_linux and not chromeos">
           <settings-toggle-button class="start"
               pref="{{prefs.browser.custom_chrome_frame}}"
               label="$i18n{showWindowDecorations}"
               inverted>
           </settings-toggle-button>
         </div>
         <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 class="settings-box"
+            hidden="[[!showPage_(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>
           </div>
         </div>
       </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>