Commit inline editable list changes when window loses focus.

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 54 matching lines @@
      * @type {HTMLElement}
      * @private
      */
     editClickTarget_: null,
 
     /** @inheritDoc */
     decorate: function() {
       DeletableItem.prototype.decorate.call(this);
 
       this.editFields_ = [];
-      this.addEventListener('mousedown', this.handleMouseDown_.bind(this));
-      this.addEventListener('keydown', this.handleKeyDown_.bind(this));
+      this.addEventListener('mousedown', this.handleMouseDown_);
+      this.addEventListener('keydown', this.handleKeyDown_);
       this.addEventListener('leadChange', this.handleLeadChange_);
     },
 
     /** @inheritDoc */
     selectionChanged: function() {
       this.updateEditState();
     },
 
     /**
      * Called when this element gains or loses 'lead' status. Updates editing
@@ skipping 245 matching lines @@
 
   InlineEditableItemList.prototype = {
     __proto__: DeletableItemList.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       DeletableItemList.prototype.decorate.call(this);
       this.setAttribute('inlineeditable', '');
       this.addEventListener('hasElementFocusChange',
                             this.handleListFocusChange_);
+
+      this.eventTracker = new EventTracker();
+      this.addEventListener('DOMNodeInsertedIntoDocument',
+                            this.handleNodeInserted_);
+      if (document.documentElement.contains(this))
+        this.handleNodeInserted_();
+      this.addEventListener('DOMNodeRemovedFromDocument',
+                            this.handleNodeRemoved_);
     },
 
     /**
      * Called when the list hierarchy as a whole loses or gains focus; starts
      * or ends editing for the lead item if necessary.
      * @param {Event} e The change event.
      * @private
      */
     handleListFocusChange_: function(e) {
       var leadItem = this.getListItemByIndex(this.selectionModel.leadIndex);
       if (leadItem) {
         if (e.newValue)
           leadItem.updateEditState();
         else
           leadItem.editing = false;
       }
     },
+
+    /**
+     * Handles blur events on window. When the user switches tabs or
+     * otherwise defocuses window, we treat that as a commit (same as if they
+     * clicked away within the page).
+     * @param {Event} e The blur event.
+     * @private
+     */
+    handleWindowBlur_: function(e) {
+      var focusElement = this.ownerDocument.activeElement;
+      if (this.contains(focusElement))
+        focusElement.blur();
+    },
+
+    /**
+     * Handles DOMNodeInsertedIntoDocument event. Connect to the blur event on
+     * window (see above). This could be done in decorate(), but instead it's
+     * here so as to mirror the remove call.
+     * @param {Event} e The node inserted event.
+     * @private
+     */
+    handleNodeInserted_: function(e) {
+      if (e && e.target == this) {

[Rick Byers, 2011/05/25 18:17:23]

You call above with u undefined so that will be a no-op.  Did you mean this to
be "if(!e || e.target == this)" perhaps?

+        this.eventTracker.add(window, 'blur',
+                              this.handleWindowBlur_.bind(this));
+      }
+    },
+
+    /**
+     * Handles DOMNodeRemovedFromDocument event. This is the closest thing to
+     * a destructor that we have. Disconnect from window events so |this|
+     * doesn't stick around (and leak).
+     * @param {Event} e The node removed event.
+     * @private
+     */
+    handleNodeRemoved_: function(e) {
+      if (e.target == this)
+        this.eventTracker.removeAll();
+    },
   };
 
   // Export
   return {
     InlineEditableItem: InlineEditableItem,
     InlineEditableItemList: InlineEditableItemList,
   };
 });