WebUI Polymer 2 migration: Convert <button is=cr-link-row> to a <button> wrapper.

Polymer2 does not support HTML element extensions, so all such elements need to
be converted to wrappers.

Bug: 818279
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I1cb05f71bff45f04e5ca5f5e64489813d8db7136
Reviewed-on: https://chromium-review.googlesource.com/972332Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#544912}

chrome/browser/resources/md_extensions/detail_view.html

@@ -159,10 +159,6 @@
         margin: 0;
       }
 
-      button[is='cr-link-row'] {
-        width: 100%;
-      }
-
       #options-section .control-line:first-child {
         border-top: var(--cr-separator-line);
       }
@@ -380,20 +376,20 @@
             </template>
           </div>
         </template>
-        <button class="hr" is="cr-link-row" id="extensions-options"
+        <cr-link-row class="hr" is="" id="extensions-options"
             disabled="[[!isEnabled_(data.state)]]"
             hidden="[[!shouldShowOptionsLink_(data.*)]]"
             icon-class="icon-external" label="$i18n{itemOptions}"
             on-click="onExtensionOptionsTap_">
-        </button>
-        <button class="hr" hidden="[[!data.manifestHomePageUrl.length]]"
-            is="cr-link-row" icon-class="icon-external" id="extensionWebsite"
+        </cr-link-row>
+        <cr-link-row class="hr" hidden="[[!data.manifestHomePageUrl.length]]"
+            icon-class="icon-external" id="extensionWebsite"
             label="$i18n{extensionWebsite}" on-click="onExtensionWebSiteTap_">
-        </button>
-        <button class="hr" hidden="[[!data.webStoreUrl.length]]"
-            is="cr-link-row" icon-class="icon-external" id="viewInStore"
+        </cr-link-row>
+        <cr-link-row class="hr" hidden="[[!data.webStoreUrl.length]]"
+            icon-class="icon-external" id="viewInStore"
             label="$i18n{viewInStore}" on-click="onViewInStoreTap_">
-        </button>
+        </cr-link-row>
         <div class="section block">
           <div class="section-title">$i18n{itemSource}</div>
           <div id="source" class="section-content">
@@ -407,11 +403,11 @@
             </a>
           </div>
         </div>
-        <button class="hr" is="cr-link-row"
+        <cr-link-row class="hr"
             hidden="[[isControlled_(data.controlledInfo)]]"
             icon-class="subpage-arrow" id="remove-extension"
             label="$i18n{itemRemoveExtension}" on-click="onRemoveTap_">
-        </button>
+        </cr-link-row>
       </div>
     </div>
   </template>

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

@@ -56,8 +56,7 @@
         focus-config="[[focusConfig_]]">
       <neon-animatable route-path="default">
 <if expr="chromeos">
-        <button icon-class="icon-external" id="wallpaperButton"
-            is="cr-link-row"
+        <cr-link-row icon-class="icon-external" id="wallpaperButton"
             hidden="[[!pageVisibility.setWallpaper]]"
             on-click="openWallpaperManager_"
             label="$i18n{setWallpaper}" sub-label="$i18n{openWallpaperApp}"
@@ -67,15 +66,15 @@
                 indicator-type="devicePolicy">
             </cr-policy-indicator>
           </template>
-        </button>
+        </cr-link-row>
         <div class="hr"></div>
 </if>
         <div class="settings-row continuation" id="themeRow"
             hidden="[[!pageVisibility.setTheme]]">
-          <button class="first" icon-class="icon-external" is="cr-link-row"
+          <cr-link-row class="first" icon-class="icon-external"
               hidden="[[!pageVisibility.setTheme]]"
               label="$i18n{themes}" sub-label="[[themeSublabel_]]"
-              on-click="openThemeUrl_"></button>
+              on-click="openThemeUrl_"></cr-link-row>
 <if expr="not is_linux or chromeos">
           <template is="dom-if" if="[[prefs.extensions.theme.id.value]]">
             <div class="separator"></div>
@@ -165,10 +164,10 @@
               menu-options="[[fontSizeOptions_]]">
           </settings-dropdown-menu>
         </div>
-        <button class="hr" is="cr-link-row"
+        <cr-link-row class="hr"
             icon-class="subpage-arrow" id="customize-fonts-subpage-trigger"
             label="$i18n{customizeFonts}" on-click="onCustomizeFontsTap_">
-        </button>
+        </cr-link-row>
         <div class="settings-box" hidden="[[!pageVisibility.pageZoom]]">
           <div id="pageZoom" class="start">$i18n{pageZoom}</div>
           <div class="md-select-wrapper">

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

@@ -209,11 +209,11 @@
         </div>
       </template>
 
-      <button is="cr-link-row" icon-class="subpage-arrow" class="indented hr"
+      <cr-link-row icon-class="subpage-arrow" class="indented hr"
           id="overscan" label="$i18n{displayOverscanPageTitle}"
           sub-label="$i18n{displayOverscanPageText}" on-click="onOverscanTap_"
           hidden$="[[!showOverscanSetting_(selectedDisplay)]]">
-      </button>
+      </cr-link-row>
 
       <settings-display-overscan-dialog id="displayOverscan"
           display-id="{{overscanDisplayId}}"

chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html

@@ -23,10 +23,10 @@
     <settings-animated-pages id="pages" section="passwordsAndForms"
         focus-config="[[focusConfig_]]">
       <neon-animatable route-path="default">
-        <button is="cr-link-row" icon-class="subpage-arrow"
+        <cr-link-row icon-class="subpage-arrow"
             id="autofillManagerButton" label="$i18n{autofill}"
             sub-label="$i18n{autofillDetail}" on-click="onAutofillTap_">
-        </button>
+        </cr-link-row>
         <div class="settings-box two-line">
           <div class="start two-line" on-click="onPasswordsTap_" actionable
               id="passwordManagerButton">

ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html

@@ -12,12 +12,16 @@
       :host {
         align-items: center;
         align-self: stretch;
+        display: block;
+        flex: 1;
+      }
+
+      :host > button {
         background: none;
         border: none;
         color: inherit;
         cursor: pointer;
         display: flex;
-        flex: 1;
         font-family: inherit;
         font-size: 100%;  /* Specifically for Mac OSX, harmless elsewhere. */
         line-height: 154%;  /* 20px. */
@@ -25,6 +29,7 @@
         min-height: var(--cr-section-min-height);
         outline: none;
         padding: 0 var(--cr-section-padding);
+        width: 100%;
       }
 
       :host([disabled]) {
@@ -70,15 +75,17 @@
         font-weight: 400;
       }
     </style>
-    <div id="outer" noSubLabel$="[[!subLabel]]">
-      <div id="labelWrapper" hidden="[[!label]]">
-        <div id="label" class="label">[[label]]</div>
-        <div id="subLabel" class="secondary label">[[subLabel]]</div>
-      </div>
-      <slot></slot>
-      <div id="icon" class$="cr-icon [[iconClass]]" aria-hidden="true">
+    <button disabled="[[disabled]]">
+      <div id="outer" noSubLabel$="[[!subLabel]]">
+        <div id="labelWrapper" hidden="[[!label]]">
+          <div id="label" class="label">[[label]]</div>
+          <div id="subLabel" class="secondary label">[[subLabel]]</div>
+        </div>
+        <slot></slot>
+        <div id="icon" class$="cr-icon [[iconClass]]" aria-hidden="true">
+        </div>
       </div>
-    </div>
+    </button>
   </template>
   <script src="cr_link_row.js"></script>
 </dom-module>

ui/webui/resources/cr_elements/cr_link_row/cr_link_row.js

@@ -12,7 +12,6 @@
  */
 Polymer({
   is: 'cr-link-row',
-  extends: 'button',
 
   behaviors: [Polymer.PaperRippleBehavior],
 
@@ -26,6 +25,11 @@ Polymer({
       /* Value used for noSubLabel attribute. */
       value: '',
     },
+
+    disabled: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
   },
 
   listeners: {