MD Settings: validate home button url input

chrome/browser/resources/settings/appearance_page/appearance_page.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * 'settings-appearance-page' is the settings page containing appearance
  * settings.
  *
  * Example:
  *
@@ skipping 82 matching lines @@
 
   /** @private {?settings.AppearanceBrowserProxy} */
   browserProxy_: null,
 
   /** @private {string} */
   themeUrl_: '',
 
   observers: [
     'themeChanged_(prefs.extensions.theme.id.value, useSystemTheme_)',
 
-// <if expr="is_linux and not chromeos">
+    // <if expr="is_linux and not chromeos">
     // NOTE: this pref only exists on Linux.
     'useSystemThemePrefChanged_(prefs.extensions.theme.use_system.value)',
-// </if>
+    // </if>
   ],
 
   created: function() {
     this.browserProxy_ = settings.AppearanceBrowserProxyImpl.getInstance();
   },
 
   ready: function() {
     this.$.defaultFontSize.menuOptions = this.fontSizeOptions_;
     // TODO(dschuyler): Look into adding a listener for the
     // default zoom percent.
@@ skipping 34 matching lines @@
   /** @private */
   onDisableExtension_: function() {
     this.fire('refresh-pref', 'homepage');
   },
 
   /** @private */
   onThemesTap_: function() {
     window.open(this.themeUrl_ || loadTimeData.getString('themesGalleryUrl'));
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * ChromeOS only.
    * @private
    */
   openWallpaperManager_: function() {
     this.browserProxy_.openWallpaperManager();
   },
-// </if>
+  // </if>
 
   /** @private */
   onUseDefaultTap_: function() {
     this.browserProxy_.useDefaultTheme();
   },
 
-// <if expr="is_linux and not chromeos">
+  // <if expr="is_linux and not chromeos">
   /**
    * @param {boolean} useSystemTheme
    * @private
    */
   useSystemThemePrefChanged_: function(useSystemTheme) {
     this.useSystemTheme_ = useSystemTheme;
   },
 
   /**
    * @param {string} themeId
@@ skipping 24 matching lines @@
    */
   showThemesSecondary_: function(themeId, useSystemTheme) {
     return this.showUseClassic_(themeId, useSystemTheme) ||
            this.showUseSystem_(themeId, useSystemTheme);
   },
 
   /** @private */
   onUseSystemTap_: function() {
     this.browserProxy_.useSystemTheme();
   },
-// </if>
+  // </if>
 
   /**
    * @param {string} themeId
    * @param {boolean} useSystemTheme
    * @private
    */
   themeChanged_: function(themeId, useSystemTheme) {
     if (themeId) {
       assert(!useSystemTheme);
 
       this.browserProxy_.getThemeInfo(themeId).then(function(info) {
         this.themeSublabel_ = info.name;
       }.bind(this));
 
       this.themeUrl_ = 'https://chrome.google.com/webstore/detail/' + themeId;
       return;
     }
 
     var i18nId;
-// <if expr="is_linux and not chromeos">
+    // <if expr="is_linux and not chromeos">
     i18nId = useSystemTheme ? 'systemTheme' : 'classicTheme';
-// </if>
-// <if expr="not is_linux or chromeos">
+    // </if>
+    // <if expr="not is_linux or chromeos">
     i18nId = 'chooseFromWebStore';
-// </if>
+    // </if>
     this.themeSublabel_ = this.i18n(i18nId);
     this.themeUrl_ = '';
   },
 
   /** @private */
   onZoomLevelChange_: function() {
     chrome.settingsPrivate.setDefaultZoom(parseFloat(this.$.zoomLevel.value));
   },
 
   /**
    * @param {boolean} bookmarksBarVisible if bookmarks bar option is visible.
    * @return {string} 'first' if the argument is false or empty otherwise.
    * @private
    */
   getFirst_: function(bookmarksBarVisible) {
     return !bookmarksBarVisible ? 'first' : '';
   },
 
   /**
    * @see content::ZoomValuesEqual().
    * @param {number} zoom1
    * @param {number} zoom2
    * @return {boolean}
    * @private
    */
   zoomValuesEqual_: function(zoom1, zoom2) {
     return Math.abs(zoom1 - zoom2) <= 0.001;
   },
+
+  validate_: function(event) {

[dpapad, 2017/03/24 01:39:31]

@param, @private missing.

[scottchen, 2017/03/24 20:48:54]

Done.

+    var inputElement = Polymer.dom(event).localTarget;
+
+    if (inputElement.value == '') {
+      inputElement.invalid = false;

[dpapad, 2017/03/24 01:39:31]

Can we use data binding instead?


// in appearance_page.html
<settings-input invalid="[[isHomePageInvalid_]]" ...></settings-input>

Then here just do

if (inputElement.value == '')
  this.isHomepageInvalid_ = false;

...

[scottchen, 2017/03/24 20:48:54]

Done.

+      return;
+    }
+
+    this.browserProxy_.validateStartupPage(inputElement.value)
+        .then(function(isValid) {
+          inputElement.invalid = !isValid;
+        }.bind(this));
+  },
 });