Settings: Change subpage help icon to a cr-icon-button.

Previously it was implemented as an iron-icon-button + paper-ripple
inside a <a> element, which was problematic (infinite ripples showing
when holding down the enter key).

By leveraging cr-icon-button the bug above is fixed. As a side effect
the focus indicator changes from an outline to a ripple, which will
change back once cr-icon-button itself will transition from ripples to
outlines for focus (soon).

Fixed: 1167155
Change-Id: Ic899c251b3c56bf7b73fcde8682afa73b9918730
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2644461
Commit-Queue: John Lee <johntlee@chromium.org>
Auto-Submit: dpapad <dpapad@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#846224}

chrome/browser/resources/settings/settings_page/settings_subpage.html

@@ -9,9 +9,7 @@
 <link rel="import" href="chrome://resources/cr_elements/find_shortcut_behavior.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/util.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../router.html">
@@ -58,7 +56,7 @@
         width: 36px;
       }
 
-      cr-icon-button {
+      #closeButton {
         /* Centers the ripple on the icon with appropriate margin on right. */
         margin-inline-end: 10px;
         margin-inline-start: -10px;
@@ -80,7 +78,7 @@
     </style>
     <div class="cr-row first" id="headerLine">
       <cr-icon-button class="icon-arrow-back" id="closeButton"
-          hidden="[[hideCloseButton]]" on-click="onTapBack_"
+          hidden="[[hideCloseButton]]" on-click="onBackClick_"
           aria-label$="[[getBackButtonAriaLabel_(pageTitle)]]"
           aria-roledescription$=
               "[[getBackButtonAriaRoleDescription_(pageTitle)]]">
@@ -91,11 +89,9 @@
       <h1 class="cr-title-text">[[pageTitle]]</h1>
       <slot name="subpage-title-extra"></slot>
       <template is="dom-if" if="[[learnMoreUrl]]">
-        <a id="learnMore" aria-label="$i18n{learnMore}"
-            href="[[learnMoreUrl]]" target="_blank">
-          <iron-icon icon="cr:help-outline"></iron-icon>
-          <paper-ripple class="circle" center></paper-ripple>
-        </a>
+        <cr-icon-button iron-icon="cr:help-outline"
+            aria-label="$i18n{learnMore}" on-click="onHelpClick_">
+        </cr-icon-button>
       </template>
       <template is="dom-if" if="[[searchLabel]]">
         <cr-search-field label="[[searchLabel]]"

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

@@ -219,10 +219,15 @@ Polymer({
   },
 
   /** @private */
-  onTapBack_() {
+  onBackClick_() {
     settings.Router.getInstance().navigateToPreviousRoute();
   },
 
+  /** @private */
+  onHelpClick_() {
+    window.open(this.learnMoreUrl);
+  },
+
   /** @private */
   onSearchChanged_(e) {
     if (this.searchTerm === e.detail) {