MD Settings: Prevent <settings-languages> running init code after is detached.

chrome/browser/resources/settings/languages_page/languages.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-languages' handles Chrome's language and input
  * method settings. The 'languages' property, which reflects the current
  * language settings, must not be changed directly. Instead, changes to
  * language settings should be made using the LanguageHelper APIs provided by
  * this class via languageHelper.
@@ skipping 127 matching lines @@
         'prefs.translate_blocked_languages.value.*, languages)',
     'updateRemovableLanguages_(' +
         'prefs.intl.app_locale.value, languages.enabled)',
     // Observe Chrome OS prefs (ignored for non-Chrome OS).
     'updateRemovableLanguages_(' +
         'prefs.settings.language.preload_engines.value, ' +
         'prefs.settings.language.enabled_extension_imes.value, ' +
         'languages)',
   ],
 
+  /** @private {?Function} */
+  boundOnInputMethodChanged_: null,
+
   /** @override */
-  created: function() {
+  attached: function() {

[michaelpg, 2017/03/28 20:30:10]

Is there a way to do this without waiting for |attached|? I don't have data to
back this up, but I would expect this to have some (possibly miniscule)
performance impact since we have to wait for these round trips from Chrome
before displaying any language settings.

Maybe that means moving only the Promise.all().then() to attached().

     this.languageSettingsPrivate =
         settings.languageSettingsPrivateApiForTest ||
         /** @type {!LanguageSettingsPrivate} */(chrome.languageSettingsPrivate);
 
     this.inputMethodPrivate =
         settings.inputMethodPrivateApiForTest ||
         /** @type {!InputMethodPrivate} */(chrome.inputMethodPrivate);
 
     var promises = [];
 
@@ skipping 28 matching lines @@
       // Fetch the starting UI language, which affects which actions should be
       // enabled.
       promises.push(cr.sendWithPromise('getProspectiveUILanguage').then(
           function(prospectiveUILanguage) {
             this.originalProspectiveUILanguage_ =
                 prospectiveUILanguage || window.navigator.language;
           }.bind(this)));
     }
 
     Promise.all(promises).then(function(results) {
+      if (!this.isConnected) {
+        // Return early if this element was detached from the DOM before this
+        // async callback executes (can happen during testing).
+        return;
+      }
+
       this.createModel_(results[1], results[2], results[3], results[4]);
       this.resolver_.resolve();
     }.bind(this));
 
     if (cr.isChromeOS) {
+      this.boundOnInputMethodChanged_ = this.onInputMethodChanged_.bind(this);
       this.inputMethodPrivate.onChanged.addListener(
-          this.onInputMethodChanged_.bind(this));
+          assert(this.boundOnInputMethodChanged_));
     }
   },
 
+  /** @override */
+  detached: function() {
+    if (cr.isChromeOS) {
+      this.inputMethodPrivate.onChanged.removeListener(
+          assert(this.boundOnInputMethodChanged_));
+      this.boundOnInputMethodChanged_ = null;
+    }
+  },
+
   /**
    * Updates the prospective UI language based on the new pref value.
    * @param {string} prospectiveUILanguage
    * @private
    */
   prospectiveUILanguageChanged_: function(prospectiveUILanguage) {
     this.set('languages.prospectiveUILanguage',
         prospectiveUILanguage || this.originalProspectiveUILanguage_);
   },
 
@@ skipping 555 matching lines @@
     this.updateEnabledInputMethods_();
   },
 
   /** @param {string} id Removed input method ID. */
   onInputMethodRemoved_: function(id) {
     assert(cr.isChromeOS);
     this.updateEnabledInputMethods_();
   },
 });
 })();