MD Settings: in spell-check page, disable add button when input is empty.

chrome/browser/resources/settings/languages_page/edit_dictionary_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.
 
 /**
  * @fileoverview 'settings-edit-dictionary-page' is a sub-page for editing
  * the "dictionary" of custom words used for spell check.
  */
 Polymer({
   is: 'settings-edit-dictionary-page',
 
   properties: {
+    /** @private {string} */
+    newWordValue: String,

[dpapad, 2017/02/04 01:13:16]

Nit (optional): Perhaps rename s/newWordValue/newWord/
I think it is fine since one is an ID and one is a Polymer property.

[scottchen, 2017/02/06 18:44:01]

I'm gonna keep this the same; I changed it to newWord and I got confused myself,
haha.

+
     /** @private {!Array<string>} */
     words_: {
       type: Array,
       value: function() { return []; },
     },
   },
 
   ready: function() {
     chrome.languageSettingsPrivate.getSpellcheckWords(function(words) {
       this.words_ = words;
     }.bind(this));
 
     // Updates are applied locally so they appear immediately, but we should
     // listen for changes in case they come from elsewhere.
     chrome.languageSettingsPrivate.onCustomDictionaryChanged.addListener(
         this.onCustomDictionaryChanged_.bind(this));
 
     // Add a key handler for the paper-input.
     this.$.keys.target = this.$.newWord;
   },
 
   /**
+   * Check if the new word text-field is empty.
+   * @param {string} value
+   * @return {bool} true if value is empty, false otherwise.

[dpapad, 2017/02/04 01:13:16]

This will blow up in compilation. s/bool/boolean. Also @private missing.

[scottchen, 2017/02/06 18:44:01]

Done.

+   */
+  isNewWordEmpty_: function(value) {

[dpapad, 2017/02/04 01:13:16]

I suggest not capturing the implementation details of this function in the name,
just the concept, which is validation.

s/isNewWordEmpty_/validateWord_
(you also need to reverse the returned boolean, so that true means valid).

[scottchen, 2017/02/06 18:44:01]

Done.

+    return !value.trim();
+  },
+
+  /**
    * Handles updates to the word list. Additions triggered by this element are
    * de-duped so the word list remains a set. Words are appended to the end
    * instead of re-sorting the list so it's clear what words were added.
    * @param {!Array<string>} added
    * @param {!Array<string>} removed
    */
   onCustomDictionaryChanged_: function(added, removed) {
     for (var i = 0; i < removed.length; i++)
       this.arrayDelete('words_', removed[i]);
 
@@ skipping 30 matching lines @@
     chrome.languageSettingsPrivate.removeSpellcheckWord(e.model.item);
     this.arrayDelete('words_', e.model.item);
   },
 
   /**
    * Adds the word in the paper-input to the dictionary, also appending it
    * to the end of the list of words shown to the user.
    */
   addWordFromInput_: function() {
     // Spaces are allowed, but removing leading and trailing whitespace.
-    var word = this.$.newWord.value.trim();
-    this.$.newWord.value = '';
+    var word = this.newWordValue.trim();
+    this.newWordValue = '';
     if (!word)
       return;
 
     var index = this.words_.indexOf(word);
     if (index == -1) {
       chrome.languageSettingsPrivate.addSpellcheckWord(word);
       this.push('words_', word);
     }
 
     // Scroll to the word (usually the bottom, or to the index if the word
     // is already present).
     this.$.list.scrollToIndex(index);
   },
 });