[ProfilePicker]: Make the 'Add' button fully clickable.

Before this CL only the icon with the '+' was clickable. The full card
should be clickable.

Fixed: 1167120
Change-Id: I4c326ad8c17fc34425ed3cb9934304eac801777a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2632668
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: David Roger <droger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#844111}

chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html

@@ -91,7 +91,9 @@
   }
 
   #addProfile.profile-item {
+    --hover-bg-color: none;
     border: 1px dashed var(--google-grey-300);
+    box-shadow: none;
     position: relative;
   }
 
@@ -100,13 +102,11 @@
     top: 0;
   }
 
-  cr-icon-button[iron-icon='profiles:add'] {
-    --cr-icon-button-icon-size: var(--avatar-icon-size);
-    --cr-icon-button-size: 84px;
-    --cr-icon-button-fill-color: var(--google-grey-refresh-100);
-    --cr-icon-button-margin-end: 0;
-    --cr-icon-button-margin-start: 0;
-    --cr-icon-button-stroke-color: var(--google-grey-refresh-700);
+  iron-icon[icon='profiles:add'] {
+    --iron-icon-height: var(--avatar-icon-size);
+    --iron-icon-width: var(--avatar-icon-size);
+    --iron-icon-fill-color: var(--google-grey-refresh-100);
+    --iron-icon-stroke-color: var(--google-grey-refresh-700);
   }
 
   #browseAsGuestButton {
@@ -141,10 +141,9 @@
       border-color: var(--google-grey-refresh-700);
     }
 
-    cr-icon-button[iron-icon='profiles:add'] {
-      --cr-icon-button-fill-color: var(--google-grey-refresh-500);
-      --cr-icon-button-stroke-color: rgb(48, 48, 50);
-      color: var(--google-grey-refresh-500);
+    iron-icon[icon='profiles:add'] {
+      --iron-icon-fill-color: var(--google-grey-refresh-500);
+      --iron-icon-stroke-color: rgb(48, 48, 50);
     }
   }
 </style>
@@ -165,14 +164,13 @@
           class="profile-item" profile-state="[[item]]">
       </profile-card>
     </template>
-    <div id="addProfile" class="profile-item">
+    <cr-button id="addProfile" class="profile-item"
+        on-click="onAddProfileClick_" aria-labelledby="addProfileButtonLabel">
       <div id="addProfileButtonLabel" class="profile-card-info">
         $i18n{addSpaceButton}
       </div>
-      <cr-icon-button iron-icon="profiles:add"
-          on-click="onAddProfileClick_" aria-labelledby="addProfileButtonLabel">
-      </cr-icon-button>
-    </div>
+      <iron-icon icon="profiles:add"></iron-icon>
+    </cr-button>
   </div>
 </div>
 <div id="rightBanner" class="banner"></div>

chrome/test/data/webui/signin/local_profile_customization_focus_test.js

@@ -48,7 +48,7 @@ suite('LocalProfileCustomizationFocusTest', function() {
   /** @param {!ProfilePickerMainViewElement} mainView */
   function navigateToProfileCreationFromMainView(mainView) {
     mainView.$$('#addProfile').focus();
-    mainView.$$('#addProfile').querySelectorAll('cr-icon-button')[0].click();
+    mainView.$$('#addProfile').click();
     flush();
   }
 

chrome/test/data/webui/signin/profile_picker_app_test.js

@@ -82,8 +82,8 @@ suite('ProfilePickerAppTest', function() {
         'profiles-list-changed', [browserProxy.profileSample]);
     flushTasks();
     assertEquals(
-        mainView.shadowRoot.querySelectorAll('profile-card').length, 1);
-    mainView.$$('#addProfile').querySelectorAll('cr-icon-button')[0].click();
+        mainView.$$('#wrapper').querySelectorAll('profile-card').length, 1);
+    mainView.$$('#addProfile').click();
     await waitForProfileCretionLoad();
     assertEquals(
         testElement.shadowRoot.querySelectorAll('[slot=view]').length, 2);