[MD settings] adding isNewTabPage setting radio buttons

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

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://md-settings/checkbox/checkbox.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-radio-button/paper-radio-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 
 <dom-module id="cr-settings-appearance-page">
   <link rel="import" type="css"
       href="chrome://md-settings/settings_page/settings_page.css">
   <link rel="import" type="css"
       href="chrome://md-settings/appearance_page/appearance_page.css">
   <link rel="import" type="css" href="chrome://resources/css/widgets.css">
   <link rel="import" href="chrome://resources/html/action_link.html">
   <template>
     <div id="action-container">
       <paper-button i18n-content="setWallpaper"></paper-button>
       <paper-button id="get-themes" i18n-content="getThemes"
           on-tap="openThemesGallery_">
       </paper-button>
       <paper-button id="resetTheme" i18n-content="resetToDefaultTheme" disabled
           on-tap="resetTheme_">
       </paper-button>
     </div>
     <hr>
     <cr-settings-checkbox pref="{{prefs.browser.show_home_button}}"
         i18n-values="label:showHomeButton">
     </cr-settings-checkbox>
-    <div id="change-home-page-section"
-        hidden$="[[!prefs.browser.show_home_button.value]]">
-      <div id="change-home-page-section-container">
-        <span id="home-page-ntp" i18n-content="homePageNtp"></span>
-        <span id="home-page-url"></span>
-        <a is="action-link" id="change-home-page"
-            i18n-content="changeHomePage">
-        </a>
-      </div>
+    <div class="radio-container">
+      <paper-radio-group
+          hidden="[[!prefs.browser.show_home_button.value]]"

[Dan Beam, 2015/09/15 23:44:44]

can we use <template is="dom-if" if="prefs.browser.show_home_button.value">
instead?

[dschuyler, 2015/09/16 00:14:28]

hidden should be better, right?  Dom-if is documented as being slow.  I can find
a link about the topic if that will help.  The dom-if template is useful iff the
contents are heavy to initially create.  This holds a radio group, some buttons
and an input.  That doesn't feel heavy, but 'heavy' wasn't explicitly defined in
the docs.

[Dan Beam, 2015/09/16 00:23:19]

probably not
I haven't found this to be particularly true in practice
no, i know what you're talking about
it probably is
element.querySelector('* /deep/ *') => how many nodes are in the sub-dom?

[dschuyler, 2015/09/16 01:37:30]

querySelector says 1.  querySelectorAll says 27.

I tried it with the dom-if because I didn't feel that it's big deal to use 
hidden or dom-if, but when I did change to dom-if, the paper radio buttons lost
their
labels.  I didn't go too far into that since I know that hidden works well.
I don't want to get sidetracked on debugging dom-if vs. hidden unless
you feel that it's a priority thing to do.
My first guess about why the labels are missing is that it is something 
related to prefs values coming later in the initial load.

[Dan Beam, 2015/09/16 01:56:34]

fix for that is:

  <... i18n-content="homePageNtp"></...>

needs to change to:

  <...>[[i18n_.homePageNtp]]</...>

and you need to make something like:

  properties: {
    i18n_: {
      type: Object,
      value: function() {
        return {
          homePageNtp: loadTimeData.getString('homePageNtp'),
        };
      },
    },
  },

(just value: {homepageNtp: loadTimeData.getString(...)} might also work)

+          selected="{{isNewTabPageString}}">

[Dan Beam, 2015/09/15 23:44:44]

can this be {{prefs.browser.show_home_button}} and depend on stringification?

[dschuyler, 2015/09/16 00:14:28]

That may work one way (reading), but the writing would then want to write a
string I believe.

+        <paper-radio-button name="t" i18n-content="homePageNtp">

[Dan Beam, 2015/09/15 23:44:44]

why can't we just bind this to a boolean property like we did with numbers?

[dschuyler, 2015/09/16 00:14:28]

I haven't seen that work with bools.  We can set the value to true, but setting
it back to false changes the type.

+        </paper-radio-button>
+        <paper-radio-button name="f" i18n-content="openThisPage">
+        </paper-radio-button>
+      </paper-radio-group>
     </div>
     <cr-settings-checkbox pref="{{prefs.bookmark_bar.show_on_all_tabs}}"
         i18n-values="label:showBookmarksBar">
     </cr-settings-checkbox>
   </template>
   <script src="appearance_page.js"></script>
 </dom-module>