MD Settings: Google Play Store: Add subpage and polish (Take 2)

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

Index: chrome/browser/resources/settings/android_apps_page/android_apps_page.html
diff --git a/chrome/browser/resources/settings/android_apps_page/android_apps_page.html b/chrome/browser/resources/settings/android_apps_page/android_apps_page.html
index e8bbd3cab2021d1db80b93546f07e5cc7a34bb2e..f3264d6bc70b65ce10ef5f310b3065c1240ac389 100644
--- a/chrome/browser/resources/settings/android_apps_page/android_apps_page.html
+++ b/chrome/browser/resources/settings/android_apps_page/android_apps_page.html
@@ -1,64 +1,64 @@
+<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/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-button/paper-button.html">
-<link rel="import" href="android_apps_browser_proxy.html">
-<link rel="import" href="../controls/settings_toggle_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">
 <link rel="import" href="../prefs/prefs_behavior.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="android_apps_browser_proxy.html">
+<link rel="import" href="android_apps_subpage.html">
 
 <dom-module id="settings-android-apps-page">
   <template>
-    <style include="settings-shared">
-      a {
-        -webkit-margin-start: 4px;
-      }
-
-      .indented {
-        -webkit-margin-start: var(--settings-indent-width);
-      }
-    </style>
+    <style include="settings-shared"></style>
 
-    <div class="settings-box first">
-      <settings-toggle-button id="enabled" class="start"
-          pref="{{prefs.arc.enabled}}"
-          label="$i18n{androidAppsEnabled}"
-          on-settings-boolean-control-change="onArcEnabledChange_"
-          no-set-pref>
-        <a href="$i18nRaw{androidAppsLearnMoreUrl}" target="_blank"
-            class="more-actions" on-tap="stopPropagation_">
-          $i18n{androidAppsLearnMore}
-        </a>
-      </settings-toggle-button>
-    </div>
+    <settings-animated-pages id="pages" section="androidApps">
+      <neon-animatable route-path="default">
+        <div id="android-apps" class="settings-box two-line first" actionable
+            on-tap="onSubpageTap_">
+          <div class="start">
+            $i18n{androidAppsPageLabel}
+            <div class="secondary" id="secondaryText"
+                inner-h-t-m-l="[[i18n('androidAppsSubtext')]]">

[Dan Beam, 2017/04/04 23:23:33]

can we make this

$i18nRaw{androidAppsSubtext}

instead?

[stevenjb, 2017/04/05 16:43:23]

$i18n[Raw] doesn't work with inner-h-t-m-l. If we fixed it there are at least
(but maybe only) two places we could use it including here.

[Dan Beam, 2017/04/05 19:27:19]

<div class="secondary" id="secondaryText">
  $i18nRaw{androidAppsSubtext}
</div>

[stevenjb, 2017/04/05 19:29:24]

Oh, I didn't realize we could embed html that way, although in hindsight that
makes total sense. I'll keep that in mind when we invariably iterate on the
messaging. Thanks!

+            </div>
+          </div>
+          <cr-policy-pref-indicator pref="[[prefs.arc.enabled]]"
+              icon-aria-label="$i18n{androidAppsPageTitle}">
+          </cr-policy-pref-indicator>
+          <template is="dom-if" if="[[androidAppsInfo_.appReady]]">
+            <button class="subpage-arrow" is="paper-icon-button-light"
+                aria-label="$i18n{androidAppsPageTitle}"
+                aria-describedby="secondaryText">
+            </button>
+          </template>
+          <template is="dom-if" if="[[!androidAppsInfo_.appReady]]">
+            <div class="secondary-action">
+              <paper-button id="enable" class="secondary-button"
+                  on-tap="onEnableTap_"
+                  aria-label="$i18n{androidAppsPageTitle}"
+                  aria-describedby="secondaryText">
+                $i18n{androidAppsEnable}
+              </paper-button>
+            </div>
+          </template>
+        </div>
+      </neon-animatable>
 
-    <div id="manageApps" class="settings-box continuation indented"
-        on-keydown="onManageAndroidAppsKeydown_"
-        on-tap="onManageAndroidAppsTap_" actionable
-        hidden="[[!androidAppsInfo_.appReady]]">
-      <div class="start">
-        <div>$i18n{androidAppsManageApps}</div>
-      </div>
-      <button class="icon-external" is="paper-icon-button-light">
-      </button>
-    </div>
+      <template is="dom-if" route-path="/androidApps/details">
+        <settings-subpage
+            associated-control="[[$$('#android-apps')]]"
+            page-title="$i18n{androidAppsPageLabel}">
+          <settings-android-apps-subpage
+              android-apps-info="[[androidAppsInfo_]]" prefs="{{prefs}}">
+          </settings-android-apps-subpage>
+        </settings-subpage>
+      </template>
+    </settings-animated-pages>
 
-    <!-- Confirm disable android apps dialog -->
-    <dialog is="cr-dialog" id="confirmDisableDialog" close-text="$i18n{close}"
-        on-cancel="onConfirmDisableDialogCancel_">
-      <div class="title">$i18n{androidAppsDisableDialogTitle}</div>
-      <div class="body" inner-h-t-m-l="[[getDialogBody_()]]"></div>
-      <div class="button-container">
-        <paper-button class="cancel-button"
-            on-tap="onConfirmDisableDialogCancel_">
-          $i18n{cancel}
-        </paper-button>
-        <paper-button class="action-button"
-            on-tap="onConfirmDisableDialogConfirm_">
-          $i18n{confirm}
-        </paper-button>
-      </div>
-    </dialog>
   </template>
   <script src="android_apps_page.js"></script>
 </dom-module>