Replace Manage Languages with dialog and dropdown item

chrome/browser/resources/settings/languages_page/languages_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-languages-page' is the settings page
  * for language and input method settings.
  */
 (function() {
 'use strict';
@@ skipping 28 matching lines @@
       type: String,
       value: 'Placeholder, e.g. English (United States)',
     },
 
     /**
      * The language to display the details for.
      * @type {!LanguageState|undefined}
      * @private
      */
     detailLanguage_: Object,
+
+    /** @private */
+    showAddLanguagesDialog_: Boolean,
   },
 
   /**
    * Handler for clicking a language on the main page, which selects the
    * language as the prospective UI language on Chrome OS and Windows.
    * @param {!Event} e The tap event.
    */
   onLanguageTap_: function(e) {
     // Only change the UI language on platforms that allow it.
     if ((!cr.isChromeOS && !cr.isWindows) || loadTimeData.getBoolean('isGuest'))
@@ skipping 23 matching lines @@
     this.languageHelper.toggleSpellCheck(e.model.item.language.code,
                                          e.target.checked);
   },
 
   /** @private */
   onBackTap_: function() {
     this.$.pages.back();
   },
 
   /**
-   * Opens the Manage Languages page.
+   * Stamps and opens the Add Languages dialog, registering a listener to
+   * disable the dialog's dom-if again on close.
    * @private
    */
-  onManageLanguagesTap_: function() {
-    settings.navigateTo(settings.Route.MANAGE_LANGUAGES);
-    this.forceRenderList_('settings-manage-languages-page');
+  onAddLanguagesTap_: function() {
+    this.showAddLanguagesDialog_ = true;
+    this.async(function() {
+      var dialog = this.$$('settings-add-languages-dialog');
+      dialog.addEventListener('close', function() {
+        this.showAddLanguagesDialog_ = false;
+      }.bind(this));

[stevenjb, 2016/08/23 17:08:04]

Don't we need to call show() or showModal() on the dialog??

[michaelpg, 2016/08/23 23:37:06]

attached() does that (so we don't have to do it async)

+    });
   },
 
   /**
    * @param {number} index Index of the language in the list of languages.
    * @param {!Object} change Polymer change object for languages.enabled.*.
    * @return {boolean} True if the given language is the first one in the list
    *     of languages.
    * @private
    */
   isFirstLanguage_: function(index, change) {
@@ skipping 31 matching lines @@
   /**
    * Moves the language down in the list.
    * @param {!{model: !{item: !LanguageState}}} e
    * @private
    */
   onMoveDownTap_: function(e) {
     this.languageHelper.moveLanguage(e.model.item.language.code, 1);
   },
 
   /**
+   * Disables the language.
+   * @param {!{model: !{item: !LanguageState}}} e
+   * @private
+   */
+  onRemoveLanguageTap_: function(e) {
+    this.languageHelper.disableLanguage(e.model.item.language.code);
+  },
+
+  /**
    * Opens the Language Detail page for the language.
    * @param {!{model: !{item: !LanguageState}}} e
    * @private
    */
   onShowLanguageDetailTap_: function(e) {
     this.detailLanguage_ = e.model.item;
     settings.navigateTo(settings.Route.LANGUAGES_DETAIL);
   },
 
   /**
@@ skipping 166 matching lines @@
    * HACK(michaelpg): This is necessary to show the list when navigating to
    * the sub-page. Remove this function when PolymerElements/neon-animation#60
    * is fixed.
    * @param {string} tagName Name of the element containing the <iron-list>.
    */
   forceRenderList_: function(tagName) {
     this.$$(tagName).$$('iron-list').fire('iron-resize');
   },
 });
 })();