cros: Allow user to configure note taking app in md-settings.

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

Index: chrome/browser/resources/settings/device_page/stylus.html
diff --git a/chrome/browser/resources/settings/device_page/stylus.html b/chrome/browser/resources/settings/device_page/stylus.html
index 2d4a4737370bbbb3357c04dfd5064bde03621a6d..2170086f768a797a09a5c04df33fbc8d6d049197 100644
--- a/chrome/browser/resources/settings/device_page/stylus.html
+++ b/chrome/browser/resources/settings/device_page/stylus.html
@@ -1,20 +1,40 @@
 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/polymer.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">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-stylus">
   <template>
-    <style include="settings-shared"></style>
+    <style include="settings-shared md-select">
+      .app-dropdown {
+        align-items: center;
+        display: flex;
+        /* 'secondary' class applies a top margin. This breaks centering. */
+        margin-top: 0;
+      }
 
-    <div class="settings-box">
+      .app-dropdown paper-spinner {
+        margin-left: 12px;
+      }
+
+      settings-toggle-button {
+        width: 100%;
+      }
+
+      paper-spinner {
+        @apply(--cr-icon-height-width);
+      }
+    </style>
+
+    <div class="settings-box continuation">
       <settings-toggle-button class="start"
           pref="{{prefs.settings.enable_stylus_tools}}"
           label="$i18n{stylusEnableStylusTools}">
       </settings-toggle-button>
     </div>
 
-    <div class="settings-box continuation">
+    <div class="settings-box">
       <settings-toggle-button class="start"
           pref="{{prefs.settings.launch_palette_on_eject_event}}"
           label="$i18n{stylusAutoOpenStylusTools}"
@@ -23,13 +43,41 @@
     </div>
 
     <div class="settings-box">
-      <!-- TODO(jdufault): This should launch an intent (using the
-        enable-intent-picker flag) that opens up the play store to a curated
-        list of apps. -->
-      <a is="action-link" target="_blank"
-         href="https://play.google.com/store/apps/collection/promotion_30023cb_stylus_apps">
-        $i18n{stylusFindMoreApps}
-      </a>
+      <div class="start">$i18n{stylusNoteTakingApp}</div>
+
+      <div class="secondary app-dropdown"

[stevenjb, 2017/01/19 17:48:53]

Is app-dropdown needed here? This is just a string.

[jdufault, 2017/01/25 00:52:22]

Yea, the secondary class adds a margin-top which breaks centering.

+          hidden$="[[!showNoApps_(appChoices_, waitingForAndroid_)]]">
+        <div>$i18n{stylusNoteTakingAppNoneAvailable}</div>

[stevenjb, 2017/01/19 17:48:53]

extra <div> shouldn't be necessary.

[jdufault, 2017/01/25 00:52:22]

Done.

+      </div>
+
+      <div class="secondary app-dropdown" hidden$="[[!waitingForAndroid_]]">
+        <div>$i18n{stylusNoteTakingAppWaitingForAndroid}</div>

[stevenjb, 2017/01/19 17:48:53]

<div> shouldn't be necessary?

[jdufault, 2017/01/25 00:52:22]

Done.

+        <paper-spinner active></paper-spinner>

[stevenjb, 2017/01/19 17:48:53]

Can we just modify the margin for this paper-spinner and eliminate app-dropdown
(which is kind of confusing to parse).

[jdufault, 2017/01/25 00:52:22]

I've rewritten the css selectors to remove the app-dropdown class.

+      </div>
+
+      <div class="md-select-wrapper"
+          hidden$="[[!showApps_(appChoices_, waitingForAndroid_)]]">
+        <select id="menu" class="md-select"
+            disabled="[[!prefs.settings.enable_stylus_tools.value]]"
+            on-change="onSelectedAppChanged_">
+          <template is="dom-repeat" items="[[appChoices_]]">
+            <option value="[[item.value]]" selected$="[[item.preferred]]">
+              [[item.name]]
+            </option>
+          </template>
+        </select>
+        <span class="md-select-underline"></span>
+      </div>
+    </div>
+
+    <div class="settings-box two-line" on-tap="onFindAppsTap_" actionable>
+      <div class="start">
+        $i18n{stylusFindMoreAppsPrimary}
+        <div class="secondary">
+          $i18n{stylusFindMoreAppsSecondary}
+        </div>
+      </div>
+      <button class="icon-external" is="paper-icon-button-light"></button>
     </div>
 
   </template>