[MD settings] On Startup url entry messages

This CL adds descriptive text (error messages) when an entered URL is
invalid or too long. Too long is currently defined as 100KB, which was
chosen empirically based on how long a URL can be before the UI lags
(appears to freeze).

Bug: 575606
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I51e473de88d3370e3eba8d5eb0cf8fe27759eb9e
Reviewed-on: https://chromium-review.googlesource.com/854713Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Dave Schuyler <dschuyler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#529132}

chrome/app/settings_strings.grdp

@@ -2021,6 +2021,12 @@
   <message name="IDS_SETTINGS_ON_STARTUP_PAGE_TOOLTIP" desc="A tooltip to display for a page in the list of pages to open on startup">
     <ph name="PAGE_TITLE">$1<ex>Google</ex></ph> - <ph name="PAGE_URL">$2<ex>http://www.google.com/</ex></ph>
   </message>
+  <message name="IDS_SETTINGS_INVALID_URL" desc="Error message explaining that the URL being entered is invalid.">
+    Invalid URL
+  </message>
+  <message name="IDS_SETTINGS_URL_TOOL_LONG" desc="Error message asking that the user enter a shorter URL.">
+    Please enter a shorter URL
+  </message>
 
   <!-- Languages Page -->
   <if expr="chromeos">

chrome/browser/resources/settings/on_startup_page/startup_url_dialog.html

@@ -13,7 +13,11 @@
       <div slot="title">[[dialogTitle_]]</div>
       <div slot="body">
         <paper-input always-float-label id="url" label="$i18n{onStartupSiteUrl}"
-            value="{{url_}}" on-input="validate_" spellcheck="false" autofocus>
+            value="{{url_}}" on-input="validate_" spellcheck="false"
+            maxlength="[[urlLimit_]]" invalid="[[error_]]"
+            char-counter="[[showCharCounter_(error_)]]" autofocus
+            error-message="[[errorMessage_('$i18nPolymer{onStartupInvalidUrl}',
+                '$i18nPolymer{onStartupUrlTooLong}', error_)]]">
         </paper-input>
       </div>
       <div slot="button-container">

chrome/browser/resources/settings/on_startup_page/startup_url_dialog.js

@@ -2,6 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+(function() {
+
+/**
+ * Describe the current URL input error status.
+ * @enum {number}
+ */
+let UrlInputError = {
+  NONE: 0,
+  INVALID_URL: 1,
+  TOO_LONG: 2,
+};
+
 /**
  * @fileoverview 'settings-startup-url-dialog' is a component for adding
  * or editing a startup URL entry.
@@ -10,9 +22,22 @@ Polymer({
   is: 'settings-startup-url-dialog',
 
   properties: {
-    /** @private {string} */
+    /** @private {UrlInputError} */
+    error_: {
+      type: Number,
+      value: UrlInputError.NONE,
+    },
+
+    /** @private */
     url_: String,
 
+    /** @private */
+    urlLimit_: {
+      readOnly: true,
+      type: Number,
+      value: 100 * 1024,  // 100 KB.
+    },
+
     /**
      * If specified the dialog acts as an "Edit page" dialog, otherwise as an
      * "Add new page" dialog.
@@ -20,10 +45,10 @@ Polymer({
      */
     model: Object,
 
-    /** @private {string} */
+    /** @private */
     dialogTitle_: String,
 
-    /** @private {string} */
+    /** @private */
     actionButtonText_: String,
   },
 
@@ -48,6 +73,16 @@ Polymer({
     this.$.dialog.showModal();
   },
 
+  /**
+   * @param {string} invalidUrl
+   * @param {string} tooLong
+   * @return {string}
+   * @private
+   */
+  errorMessage_: function(invalidUrl, tooLong) {
+    return ['', invalidUrl, tooLong][this.error_];
+  },
+
   /** @private */
   onCancelTap_: function() {
     this.$.dialog.close();
@@ -67,10 +102,27 @@ Polymer({
     });
   },
 
+  /** @private */
+  showCharCounter_: function() {
+    return this.error_ == UrlInputError.TOO_LONG;
+  },
+
   /** @private */
   validate_: function() {
+    if (this.url_.length == 0) {
+      this.$.actionButton.disabled = true;
+      this.error_ = UrlInputError.NONE;
+      return;
+    }
+    if (this.url_.length >= this.urlLimit_) {
+      this.$.actionButton.disabled = true;
+      this.error_ = UrlInputError.TOO_LONG;
+      return;
+    }
     this.browserProxy_.validateStartupPage(this.url_).then(isValid => {
       this.$.actionButton.disabled = !isValid;
+      this.error_ = isValid ? UrlInputError.NONE : UrlInputError.INVALID_URL;
     });
   },
 });
+})();

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -1234,6 +1234,8 @@ void AddOnStartupStrings(content::WebUIDataSource* html_source) {
       {"onStartupEditPage", IDS_SETTINGS_ON_STARTUP_EDIT_PAGE},
       {"onStartupSiteUrl", IDS_SETTINGS_ON_STARTUP_SITE_URL},
       {"onStartupRemove", IDS_SETTINGS_ON_STARTUP_REMOVE},
+      {"onStartupInvalidUrl", IDS_SETTINGS_INVALID_URL},
+      {"onStartupUrlTooLong", IDS_SETTINGS_URL_TOOL_LONG},
   };
   AddLocalizedStringsBulk(html_source, localized_strings,
                           arraysize(localized_strings));

chrome/test/data/webui/settings/startup_urls_page_test.js

@@ -130,6 +130,7 @@ cr.define('settings_startup_urls_page', function() {
       return browserProxy.whenCalled('validateStartupPage').then(function(url) {
         assertEquals(expectedUrl, url);
         assertTrue(actionButton.disabled);
+        assertTrue(!!inputElement.invalid);
 
         browserProxy.setUrlValidity(true);
         browserProxy.resetResolver('validateStartupPage');
@@ -138,6 +139,7 @@ cr.define('settings_startup_urls_page', function() {
         return browserProxy.whenCalled('validateStartupPage');
       }).then(function() {
         assertFalse(actionButton.disabled);
+        assertFalse(!!inputElement.invalid);
       });
     });