Settings cleanup: Swap neon-animatable elements with plain div.

Usage of neon-animatable is unnecessary now that neon-animation-pages has been
removed.

Bug: 902959
Change-Id: I7cbad2e8a2ba1f56234cc77ed9a40b4ef9aea314
Reviewed-on: https://chromium-review.googlesource.com/c/1343657
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#615719}

chrome/browser/resources/settings/a11y_page/a11y_page.html

@@ -5,7 +5,6 @@
 <link rel="import" href="../settings_shared_css.html">
 
 <if expr="chromeos">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="manage_a11y_page.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../settings_page/settings_animated_pages.html">
@@ -19,7 +18,7 @@
 <if expr="chromeos">
     <settings-animated-pages id="pages" current-route="{{currentRoute}}"
         section="a11y" focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <settings-toggle-button id="optionsInMenuToggle"
             label="$i18n{optionsInMenuLabel}"
             pref="{{prefs.settings.a11y.enable_menu}}">
@@ -37,7 +36,7 @@
                 aria-describedby="themesSecondary"></button>
           </paper-icon-button-light>
         </div>
-      </neon-animatable>
+      </div>
 
       <template is="dom-if" route-path="/manageAccessibility">
         <settings-subpage

chrome/browser/resources/settings/about_page/about_page.html

@@ -19,7 +19,6 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.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">
 
 <if expr="chromeos">
@@ -114,7 +113,7 @@
       <settings-section page-title="$i18n{aboutPageTitle}" section="about">
         <settings-animated-pages id="pages" section="about"
             focus-config="[[focusConfig_]]">
-          <neon-animatable route-path="default">
+          <div route-path="default">
             <div class="settings-box two-line">
               <img id="product-logo" on-click="onProductLogoTap_"
                   srcset="chrome://theme/current-channel-logo@1x 1x,
@@ -254,7 +253,7 @@
                 on-click="onDetailedBuildInfoTap_"
                 label="$i18n{aboutDetailedBuildInfo}"></cr-link-row>
 </if>
-          </neon-animatable>
+          </div>
 <if expr="chromeos">
           <template is="dom-if" route-path="/help/details">
             <settings-subpage page-title="$i18n{aboutDetailedBuildInfo}">

chrome/browser/resources/settings/android_apps_page/android_apps_page.html

@@ -2,7 +2,6 @@
 
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.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="../i18n_setup.html">
@@ -19,7 +18,7 @@
 
     <settings-animated-pages id="pages" section="androidApps"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <template is="dom-if" if="[[havePlayStoreApp]]" restamp>
           <div id="android-apps" class="settings-box two-line first"
               actionable$="[[androidAppsInfo.playStoreEnabled]]"
@@ -56,7 +55,7 @@
           <settings-android-settings-element>
           </settings-android-settings-element>
         </template>
-      </neon-animatable>
+      </div>
 
       <template is="dom-if" route-path="/androidApps/details">
         <settings-subpage

chrome/browser/resources/settings/appearance_page/appearance_page.html

@@ -3,7 +3,6 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.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/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="appearance_browser_proxy.html">
 <link rel="import" href="../controls/controlled_radio_button.html">
@@ -45,7 +44,7 @@
     </style>
     <settings-animated-pages id="pages" section="appearance"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
 <if expr="chromeos">
         <cr-link-row icon-class="icon-external" id="wallpaperButton"
             hidden="[[!pageVisibility.setWallpaper]]"
@@ -179,7 +178,7 @@
             label="$i18n{warnBeforeQuitting}">
         </settings-toggle-button>
 </if>
-      </neon-animatable>
+      </div>
       <template is="dom-if" route-path="/fonts">
         <settings-subpage
             associated-control="[[$$('#customize-fonts-subpage-trigger')]]"

chrome/browser/resources/settings/autofill_page/autofill_page.html

@@ -2,7 +2,6 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="autofill_section.html">
 <link rel="import" href="passwords_section.html">
 <link rel="import" href="payments_section.html">
@@ -24,7 +23,7 @@
     </style>
     <settings-animated-pages id="pages" section="autofill"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <cr-link-row id="passwordManagerButton" start-icon="settings20:vpn-key"
             label="$i18n{passwords}" icon-class="subpage-arrow"
             on-click="onPasswordsClick_"></cr-link-row>
@@ -36,7 +35,7 @@
             start-icon="settings20:location-on" label="$i18n{addressesTitle}"
             icon-class="subpage-arrow" on-click="onAddressesClick_">
         </cr-link-row>
-      </neon-animatable>
+      </div>
       <template is="dom-if" route-path="/passwords">
         <settings-subpage
             associated-control="[[$$('#passwordManagerButton')]]"

chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html

@@ -4,7 +4,6 @@
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.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-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../icons.html">
@@ -21,7 +20,7 @@
     </style>
     <settings-animated-pages id="pages" section="bluetooth"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <template is="dom-if" if="[[!isSecondaryUser_]]">
           <div id="bluetoothDevices"
               class="settings-box two-line" actionable on-click="onTap_">
@@ -63,7 +62,7 @@
             </div>
           </div>
         </template>
-      </neon-animatable>
+      </div>
 
       <template is="dom-if" route-path="/bluetoothDevices">
         <settings-subpage associated-control="[[$$('#bluetoothDevices')]]"

chrome/browser/resources/settings/crostini_page/crostini_page.html

@@ -2,7 +2,6 @@
 
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.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="../i18n_setup.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
@@ -20,7 +19,7 @@
 
     <settings-animated-pages id="pages" section="crostini"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <div id="crostini" class="settings-box two-line first"
             actionable$="[[prefs.crostini.enabled.value]]"
             on-click="onSubpageTap_">
@@ -52,7 +51,7 @@
             </paper-button>
           </template>
         </div>
-      </neon-animatable>
+      </div>
 
       <template is="dom-if" route-path="/crostini/details">
         <settings-subpage

chrome/browser/resources/settings/date_time_page/date_time_page.html

@@ -30,7 +30,7 @@
     </style>
     <settings-animated-pages id="pages" section="dateTime"
         focus-config="[[focusConfig_]]">
-      <neon-animatable id="main" route-path="default">
+      <div id="main" route-path="default">
         <template is="dom-if"
             if="[[!prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]"
             restamp>
@@ -84,7 +84,7 @@
             <button aria-label="$i18n{setDateTime}"></button>
           </paper-icon-button-light>
         </div>
-      </neon-animatable>
+      </div>
       <template is="dom-if" route-path="/dateTime/timeZone">
         <settings-subpage data-route="DATETIME_TIMEZONE_SUBPAGE"
             associated-control="[[$$('#timeZoneSettingsTrigger')]]"

chrome/browser/resources/settings/device_page/device_page.html

@@ -2,7 +2,6 @@
 
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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-icon-button/paper-icon-button-light.html">
 <link rel="import" href="device_page_browser_proxy.html">
 <link rel="import" href="display.html">
@@ -22,7 +21,7 @@
     <style include="settings-shared"></style>
     <settings-animated-pages id="pages" section="device"
         focus-config="[[focusConfig_]]">
-      <neon-animatable id="main" route-path="default">
+      <div id="main" route-path="default">
         <div id="pointersRow" class="settings-box first"
             on-click="onPointersTap_" actionable>
           <div class="start">
@@ -73,7 +72,7 @@
             </paper-icon-button-light>
           </div>
         </template>
-      </neon-animatable>
+      </div>
       <template is="dom-if" route-path="/pointer-overlay">
         <settings-subpage
             associated-control="[[$$('#pointersRow')]]"

chrome/browser/resources/settings/downloads_page/downloads_page.html

@@ -21,7 +21,7 @@
     </style>
   <settings-animated-pages id="pages" section="downloads"
       focus-config="[[focusConfig_]]">
-    <neon-animatable route-path="default">
+    <div route-path="default">
       <div class="settings-box first two-line">
         <div class="start">
           <div>$i18n{downloadLocation}</div>
@@ -72,7 +72,7 @@
           </paper-button>
         </div>
       </template>
-    </neon-animatable>
+    </div>
 
 <if expr="chromeos">
     <template is="dom-if" route-path="/smbShares">

chrome/browser/resources/settings/internet_page/internet_page.html

@@ -7,7 +7,6 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.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-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../prefs/prefs.html">
 <link rel="import" href="../route.html">
@@ -32,7 +31,7 @@
     </style>
     <settings-animated-pages id="pages" section="internet"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <network-summary default-network="{{defaultNetwork}}"
             device-states="{{deviceStates}}"
             networking-private="[[networkingPrivate]]">
@@ -96,7 +95,7 @@
             <div>$i18n{internetAddConnectionNotAllowed}</div>
           </div>
         </template>
-      </neon-animatable>
+      </div>
 
       <template is="dom-if" route-path="/networkDetail" no-search restamp>
         <settings-subpage page-title="$i18n{internetDetailPageTitle}">

chrome/browser/resources/settings/languages_page/languages_page.html

@@ -9,7 +9,6 @@
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.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-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
@@ -118,7 +117,7 @@
     </settings-languages>
     <settings-animated-pages id="pages" section="languages"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <div class$="settings-box first [[getLanguageListTwoLine_()]]"
             actionable on-click="toggleExpandButton_">
           <div class="start">
@@ -374,7 +373,7 @@
             </cr-action-menu>
           </template>
         </cr-lazy-render>
-      </neon-animatable>
+      </div>
 <if expr="chromeos">
       <template is="dom-if" route-path="/inputMethods">
         <settings-subpage

chrome/browser/resources/settings/multidevice_page/multidevice_page.html

@@ -5,7 +5,6 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.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="../i18n_setup.html">
@@ -31,7 +30,7 @@
     </style>
     <settings-animated-pages id="pages" section="multidevice"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <div id="multidevice-item"
             class="settings-box two-line"
             on-click="handleItemClick_"
@@ -88,7 +87,7 @@
             </settings-multidevice-feature-toggle>
           </template>
         </div>
-      </neon-animatable>
+      </div>
       <template is="dom-if" route-path="/multidevice/features" restamp>
         <settings-subpage associated-control="[[$$('#multidevice-item')]]"
             page-title="[[getLabelText_(pageContentData)]]">

chrome/browser/resources/settings/people_page/people_page.html

@@ -8,7 +8,6 @@
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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="../controls/settings_toggle_button.html">
@@ -128,7 +127,7 @@
     </style>
     <settings-animated-pages id="pages" section="people"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
 <if expr="not chromeos">
         <template is="dom-if" if="[[shouldShowSyncAccountControl_(diceEnabled_,
             syncStatus.syncSystemEnabled, syncStatus.signinAllowed)]]">
@@ -317,7 +316,7 @@
         </div>
 </if>
 
-      </neon-animatable>
+      </div>
       <template is="dom-if" route-path="/syncSetup"
           no-search="[[!isAdvancedSyncSettingsSearchable_(
               syncStatus, unifiedConsentEnabled_)]]">

chrome/browser/resources/settings/printing_page/printing_page.html

 <link rel="import" href="chrome://resources/html/polymer.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-icon-button/paper-icon-button-light.html">
 <link rel="import" href="cloud_printers.html">
 <link rel="import" href="../route.html">
@@ -19,7 +18,7 @@
     <style include="settings-shared"></style>
     <settings-animated-pages id="pages" section="printing"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
 <if expr="chromeos">
         <div id="cupsPrinters" class="settings-box first"
             on-click="onTapCupsPrinters_" actionable>
@@ -45,7 +44,7 @@
             <button aria-label="$i18n{cloudPrintersTitle}"></button>
           </paper-icon-button-light>
         </div>
-      </neon-animatable>
+      </div>
 <if expr="chromeos">
       <template is="dom-if" route-path="/cupsPrinters">
         <settings-subpage

chrome/browser/resources/settings/privacy_page/privacy_page.html

@@ -5,7 +5,6 @@
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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="../clear_browsing_data_dialog/clear_browsing_data_dialog.html">
@@ -83,7 +82,7 @@
     </template>
     <settings-animated-pages id="pages" section="privacy"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <template is="dom-if" if="[[!unifiedConsentEnabled_]]">
           <div class="settings-box first">
             <p class="privacy-explanation">
@@ -181,7 +180,7 @@
             hidden="[[!unifiedConsentEnabled_]]">
           <div class="start">$i18nRaw{syncAndPersonalizationLink}</div>
         </div>
-      </neon-animatable>
+      </div>
 <if expr="use_nss_certs">
       <template is="dom-if" route-path="/certificates">
         <settings-subpage

chrome/browser/resources/settings/reset_page/reset_page.html

@@ -3,7 +3,6 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.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-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="reset_profile_dialog.html">
@@ -24,7 +23,7 @@
   <template>
     <style include="settings-shared"></style>
     <settings-animated-pages id="reset-pages" section="reset">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <div class="settings-box first" id="resetProfile"
             on-click="onShowResetProfileDialog_" actionable>
           <div id="resetProfileTrigger" class="start">$i18n{resetTrigger}</div>
@@ -85,7 +84,7 @@
           </div>
         </template>
 </if>
-      </neon-animatable>
+      </div>
 <if expr="_google_chrome and is_win">
       <template is="dom-if" route-path="/cleanup">
         <settings-subpage id="chromeCleanupSubpage"

chrome/browser/resources/settings/search_page/search_page.html

@@ -4,7 +4,6 @@
 <link rel="import" href="chrome://resources/html/assert.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/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="../controls/extension_controlled_indicator.html">
@@ -43,7 +42,7 @@
     </style>
     <settings-animated-pages id="pages" section="search"
         focus-config="[[focusConfig_]]">
-      <neon-animatable route-path="default">
+      <div route-path="default">
         <!-- Omnibox search engine -->
         <div class="settings-box first block">
           <div id="search-wrapper">
@@ -119,7 +118,7 @@
           </div>
         </template>
 </if>
-      </neon-animatable>
+      </div>
       <template is="dom-if" route-path="/searchEngines">
         <settings-subpage
             associated-control="[[$$('#engines-subpage-trigger')]]"

chrome/browser/resources/settings/settings_page/settings_animated_pages.js

@@ -94,10 +94,9 @@ Polymer({
       subpagePaths.push(settings.routes.INTERNET_NETWORKS.path);
     // </if>
 
-    // Only handle iron-select events from neon-animatable elements and the
+    // Only handle iron-select events from div elements and the
     // given whitelist of settings-subpage instances.
-    // TODO(dpapad): Remove neon-animatable here.
-    const whitelist = ['settings-subpage#site-settings', 'neon-animatable'];
+    const whitelist = ['settings-subpage#site-settings', 'div[route-path]'];
     whitelist.push.apply(
         whitelist,
         subpagePaths.map(path => `settings-subpage[route-path="${path}"]`));

chrome/test/data/webui/settings/settings_animated_pages_test.js

@@ -7,12 +7,12 @@ suite('settings-animated-pages', function() {
     document.body.innerHTML = `
       <settings-animated-pages
           section="${settings.routes.SEARCH_ENGINES.section}">
-        <neon-animatable route-path="default">
+        <div route-path="default">
           <button id="subpage-trigger"></button>
-        </neon-animatable>
-        <neon-animatable route-path="${settings.routes.SEARCH_ENGINES.path}">
+        </div>
+        <div route-path="${settings.routes.SEARCH_ENGINES.path}">
           <button id="subpage-trigger"></button>
-        </neon-animatable>
+        </div>
       </settings-animated-pages>`;
 
     const animatedPages =