DOMUI Prefs: Implement inline editability for startup pages

chrome/browser/resources/options/inline_editable_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', function() {
   const DeletableItem = options.DeletableItem;
   const DeletableItemList = options.DeletableItemList;
 
   /**
    * Creates a new list item with support for inline editing.
@@ skipping 72 matching lines @@
         // When this is called in response to the selectedChange event,
         // the list grabs focus immediately afterwards. Thus we must delay
         // our focus grab.
         if (focusElement) {
           window.setTimeout(function() {
             focusElement.focus();
             focusElement.select();
           }, 50);
         }
       } else {
-        if (!this.editCancelled_ && this.hasBeenEdited() &&
+        if (!this.editCancelled_ && this.hasBeenEdited &&
             this.currentInputIsValid) {
+          this.updateStaticValues_();
           cr.dispatchSimpleEvent(this, 'commitedit', true);
         } else {
+          this.resetEditableValues_();
           cr.dispatchSimpleEvent(this, 'canceledit', true);
         }
       }
     },
 
     /**
      * Whether the item is editable.
      * @type {boolean}
      */
     get editable() {
       return this.editable_;
     },
     set editable(editable) {
       this.editable_ = editable;
       if (!editable)
         this.editing = false;
     },
 
     /**
      * The HTML element that should have focus initially when editing starts.
-     * Should be overriden by subclasses.
+     * Defaults to the first <input> element; can be overriden by subclasses if
+     * a different element should be focused.
      * @type {HTMLElement}
      */
     get initialFocusElement() {
-      return null;
+      return this.contentElement.querySelector('input');
     },
 
     /**
      * Whether the input in currently valid to submit. If this returns false
      * when editing would be submitted, either editing will not be ended,
      * or it will be cancelled, depending on the context.
      * Can be overrided by subclasses to perform input validation.
+     * @type {boolean}
      */
     get currentInputIsValid() {
       return true;
     },
 
     /**
      * Returns true if the item has been changed by an edit.
      * Can be overrided by subclasses to return false when nothing has changed
      * to avoid unnecessary commits.
+     * @type {boolean}
      */
-    hasBeenEdited: function() {
+    get hasBeenEdited() {
       return true;
     },
 
     /**
+     * Returns a div containing an <input>, as well as static text if
+     * opt_alwaysEditable is not true.
+     * @param {string} text The text of the cell.
+     * @param {bool} opt_alwaysEditable True if the cell always shows the input.
+     * @return {HTMLElement} The HTML element for the cell.
+     * @private
+     */
+    createEditableTextCell: function(text, opt_alwaysEditable) {

[arv (Not doing code reviews), 2011/01/14 00:23:03]

I wish we could just use contentEditable but then we lose validation... which
might be worth it.

[stuartmorgan, 2011/01/14 00:37:09]

Most of our validation is done with callbacks to native code, and we'll be using
custom UI, so we don't really benefit much from using the HTML5 validation
stuff. I think this is definitely worth exploring post-M10.

+      var container = this.ownerDocument.createElement('div');
+
+      if (!opt_alwaysEditable) {
+        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 (!opt_alwaysEditable) {
+        inputEl.setAttribute('editmode', true);
+        inputEl.staticVersion = textEl;
+      }
+      container.appendChild(inputEl);
+
+      return container;
+    },
+
+    /**
+     * Resets the editable version of any controls created by createEditable*
+     * to match the static text.
+     * @private
+     */
+    resetEditableValues_: function() {
+      var editFields = this.querySelectorAll('[editmode=true]');
+      for (var i = 0; i < editFields.length; i++) {
+        var staticLabel = editFields[i].staticVersion;
+        if (!staticLabel)
+          continue;
+        if (editFields[i].tagName == 'INPUT')
+          editFields[i].value = staticLabel.textContent;
+        // Add more tag types here as new createEditable* methods are added.
+
+        editFields[i].setCustomValidity('');
+      }
+    },
+
+    /**
+     * Sets the static version of any controls created by createEditable*
+     * to match the current value of the editable version. Called on commit so
+     * that there's no flicker of the old value before the model updates.
+     * @private
+     */
+    updateStaticValues_: function() {
+      var editFields = this.querySelectorAll('[editmode=true]');
+      for (var i = 0; i < editFields.length; i++) {
+        var staticLabel = editFields[i].staticVersion;
+        if (!staticLabel)
+          continue;
+        if (editFields[i].tagName == 'INPUT')
+          staticLabel.textContent = editFields[i].value;
+        // Add more tag types here as new createEditable* methods are added.
+      }
+    },
+
+    /**
      * Called a key is pressed. Handles committing and cancelling edits.
      * @param {Event} e The key down event.
      * @private
      */
     handleKeyDown_: function(e) {
       if (!this.editing)
         return;
 
       var endEdit = false;
       switch (e.keyIdentifier) {
@@ skipping 47 matching lines @@
       }, 50);
     },
   };
 
   // Export
   return {
     InlineEditableItem: InlineEditableItem,
     InlineEditableItemList: InlineEditableItemList,
   };
 });