DOMUI Prefs: Implement inline editability for startup pages

chrome/browser/resources/options/search_engine_manager_engine_list.js

 // Copyright (c) 2010 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.
 
 cr.define('options.search_engines', function() {
   const InlineEditableItemList = options.InlineEditableItemList;
   const InlineEditableItem = options.InlineEditableItem;
   const ListInlineHeaderSelectionController =
       options.ListInlineHeaderSelectionController;
 
@@ skipping 105 matching lines @@
       // For non-heading rows, start with a favicon.
       if (!engine['heading']) {
         var faviconDivEl = this.ownerDocument.createElement('div');
         faviconDivEl.className = 'favicon';
         var imgEl = this.ownerDocument.createElement('img');
         imgEl.src = 'chrome://favicon/iconurl/' + engine['iconURL'];
         faviconDivEl.appendChild(imgEl);
         nameColEl.appendChild(faviconDivEl);
       }
 
-      var nameEl = this.createEditableTextCell_(nameText);
+      var nameEl = this.createEditableTextCell(nameText, this.isPlaceholder_);
       nameColEl.appendChild(nameEl);
 
       // Then the keyword column.
-      var keywordEl = this.createEditableTextCell_(keywordText);
+      var keywordEl = this.createEditableTextCell(keywordText,
+                                                  this.isPlaceholder_);
       keywordEl.className = 'keyword-column';
       this.contentElement.appendChild(keywordEl);
 
       // And the URL column.
-      var urlEl = this.createEditableTextCell_(urlText);
+      var urlEl = this.createEditableTextCell(urlText, this.isPlaceholder_);
       urlEl.className = 'url-column';
       this.contentElement.appendChild(urlEl);
 
       // Do final adjustment to the input fields.
       if (!engine['heading']) {
         this.nameField_ = nameEl.querySelector('input');
         this.keywordField_ = keywordEl.querySelector('input');
         this.urlField_ = urlEl.querySelector('input');
 
         if (engine['urlLocked'])
@@ skipping 13 matching lines @@
           fields[i].oninput = this.startFieldValidation_.bind(this);
         }
       }
 
       // Listen for edit events.
       this.addEventListener('edit', this.onEditStarted_.bind(this));
       this.addEventListener('canceledit', this.onEditCancelled_.bind(this));
       this.addEventListener('commitedit', this.onEditCommitted_.bind(this));
     },
 
-    /**
-     * Returns a div containing an <input>, as well as static text if needed.
-     * @param {string} text The text of the cell.
-     * @return {HTMLElement} The HTML element for the cell.
-     * @private
-     */
-    createEditableTextCell_: function(text) {
-      var container = this.ownerDocument.createElement('div');
-
-      if (!this.isPlaceholder_) {
-        var textEl = this.ownerDocument.createElement('div');
-        textEl.className = 'static-text';
-        textEl.textContent = text;
-        textEl.setAttribute('editmode', false);
-        container.appendChild(textEl);
-      }
-
-      var inputEl = this.ownerDocument.createElement('input');
-      inputEl.type = 'text';
-      inputEl.value = text;
-      if (!this.isPlaceholder_) {
-        inputEl.setAttribute('editmode', true);
-        inputEl.staticVersion = textEl;
-      }
-      container.appendChild(inputEl);
-
-      return container;
-    },
-
-    /** @inheritDoc */
-    get initialFocusElement() {
-      return this.nameField_;
-    },
-
     /** @inheritDoc */
     get currentInputIsValid() {
       return !this.waitingForValidation_ && this.currentlyValid_;
     },
 
     /** @inheritDoc */
-    hasBeenEdited: function(e) {
+    get hasBeenEdited() {
       var engine = this.searchEngine_;
       return this.nameField_.value != engine['name'] ||
              this.keywordField_.value != engine['keyword'] ||
              this.urlField_.value != engine['url'];
     },
 
     /**
      * Called when entering edit mode; starts an edit session in the model.
      * @param {Event} e The edit event.
      * @private
      */
     onEditStarted_: function(e) {
       var editIndex = this.searchEngine_['modelIndex'];
       chrome.send('editSearchEngine', [String(editIndex)]);
+      this.startFieldValidation_();
     },
 
     /**
      * Called when committing an edit; updates the model.
      * @param {Event} e The end event.
      * @private
      */
     onEditCommitted_: function(e) {
       chrome.send('searchEngineEditCompleted', this.getInputFieldValues_());
-      // Update the static version immediately to prevent flickering before
-      // the model update callback updates the UI.
-      var editFields = [ this.nameField_, this.keywordField_, this.urlField_ ];
-      for (var i = 0; i < editFields.length; i++) {
-        var staticLabel = editFields[i].staticVersion;
-        if (staticLabel)
-          staticLabel.textContent = editFields[i].value;
-      }
     },
 
     /**
      * Called when cancelling an edit; informs the model and resets the control
      * states.
      * @param {Event} e The cancel event.
      * @private
      */
     onEditCancelled_: function() {
       chrome.send('searchEngineEditCancelled');
-      var engine = this.searchEngine_;
-      this.nameField_.value = engine['name'];
-      this.keywordField_.value = engine['keyword'];
-      this.urlField_.value = engine['url'];
 
-      var editFields = [ this.nameField_, this.keywordField_, this.urlField_ ];
-      for (var i = 0; i < editFields.length; i++) {
-        editFields[i].classList.remove('invalid');
+      if (this.isPlaceholder_) {
+        var engine = this.searchEngine_;
+        this.nameField_.value = '';
+        this.keywordField_.value = '';
+        this.urlField_.value = '';
       }
       this.currentlyValid_ = !this.isPlaceholder_;
     },
 
     /**
      * Returns the input field values as an array suitable for passing to
      * chrome.send. The order of the array is important.
      * @private
      * @return {array} The current input field values.
      */
@@ skipping 14 matching lines @@
       chrome.send('checkSearchEngineInfoValidity', args);
     },
 
     /**
      * Callback for the completion of an input validition check.
      * @param {Object} validity A dictionary of validitation results.
      */
     validationComplete: function(validity) {
       this.waitingForValidation_ = false;
       // TODO(stuartmorgan): Implement the full validation UI with
-      // checkmark/exclamation mark icons and tooltips.
-      if (validity['name'])
-        this.nameField_.classList.remove('invalid');
-      else
-        this.nameField_.classList.add('invalid');
+      // checkmark/exclamation mark icons and tooltips showing the errors.
+      if (validity['name']) {
+        this.nameField_.setCustomValidity('');
+      } else {
+        this.nameField_.setCustomValidity(
+            templateData.editSearchEngineInvalidTitleToolTip);
+      }
 
-      if (validity['keyword'])
-        this.keywordField_.classList.remove('invalid');
-      else
-        this.keywordField_.classList.add('invalid');
+      if (validity['keyword']) {
+        this.keywordField_.setCustomValidity('');
+      } else {
+        this.keywordField_.setCustomValidity(
+            templateData.editSearchEngineInvalidKeywordToolTip);
+      }
 
-      if (validity['url'])
-        this.urlField_.classList.remove('invalid');
-      else
-        this.urlField_.classList.add('invalid');
+      if (validity['url']) {
+        this.urlField_.setCustomValidity('');
+      } else {
+        this.urlField_.setCustomValidity(
+            templateData.editSearchEngineInvalidURLToolTip);
+      }
 
       this.currentlyValid_ = validity['name'] && validity['keyword'] &&
           validity['url'];
     },
   };
 
   var SearchEngineList = cr.ui.define('list');
 
   SearchEngineList.prototype = {
     __proto__: InlineEditableItemList.prototype,
@@ skipping 37 matching lines @@
     },
   };
 
   // Export
   return {
     SearchEngineList: SearchEngineList
   };
 
 });