Settings WebUI: manage-profile update profile name on route change,

cr-input skip validation when old and new values are both falsy

After validation, if the input value is invalid, the red underline will
be drawn under the input. When initializing the cr-input, the value
switches from undefined to '' and then it is updated to new values from
there. This causes an issue because the underline opacity and width
have transition. So if the value is valid after initialization, the
underline will appear blue and then transition away (the color change
is instant). This CL addresses this by skipping validation until a real
value has been set.

Bug: 907022
Change-Id: I2369cb41467c3d6ee9b3b30004188579df107906
Reviewed-on: https://chromium-review.googlesource.com/c/1345415Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#610200}

chrome/browser/resources/settings/people_page/manage_profile.js

@@ -78,6 +78,8 @@ Polymer({
   /** @protected */
   currentRouteChanged: function() {
     if (settings.getCurrentRoute() == settings.routes.MANAGE_PROFILE) {
+      if (this.profileName)
+        this.$.name.value = this.profileName;
       if (loadTimeData.getBoolean('profileShortcutsEnabled')) {
         this.browserProxy_.getProfileShortcutStatus().then(status => {
           if (status == ProfileShortcutStatus.PROFILE_SHORTCUT_SETTING_HIDDEN) {

ui/webui/resources/cr_elements/cr_input/cr_input.js

@@ -284,8 +284,14 @@ Polymer({
       this.focus();
   },
 
-  /** @private */
-  onValueChanged_: function() {
+  /**
+   * @param {string} newValue
+   * @param {string} oldValue
+   * @private
+   */
+  onValueChanged_: function(newValue, oldValue) {
+    if (!newValue && !oldValue)
+      return;
     if (this.autoValidate)
       this.validate();
   },