MD Settings: Languages model for language pages

chrome/browser/resources/settings/languages_page/languages_model.js

Index: chrome/browser/resources/settings/languages_page/languages_model.js
diff --git a/chrome/browser/resources/settings/languages_page/languages_model.js b/chrome/browser/resources/settings/languages_page/languages_model.js
new file mode 100644
index 0000000000000000000000000000000000000000..b7162d327277ca0a76eac3f1d2a0e7a28903ef6d
--- /dev/null
+++ b/chrome/browser/resources/settings/languages_page/languages_model.js
@@ -0,0 +1,392 @@
+// 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 'cr-settings-languages-model' provides convenient access to
+ * Chrome's language and input method settings.
+ *
+ * A singleton element, 'cr-settings-language-model-private', provides a
+ * read-only model object with information about languages and input methods.
+ * The singleton updates this model whenever Chrome's pref store and other
+ * settings change, and also provides an API for changing these settings.
+ *
+ * To access the model's object and the singleton's API, add an instance of
+ * cr-settings-languages-model to your local DOM:
+ *
+ *     <template>
+ *       <cr-settings-languages-model model="{{model}}">
+ *       </cr-settings-languages-model>
+ *       <div>[[model.someProperty]]</div>
+ *     </template>
+ *
+ * This element exposes the model and the API, so it can be used like any other
+ * Polymer element without having to actually create duplicate models.
+ *
+ * Internally, this element communicates with the singleton to propagate
+ * changes for data binding. Because each instance of this element has a
+ * reference to the same singleton, each element can add a listener for the
+ * singleton's 'model-changed' event. Once triggered, each element then forwards
+ * this event on to its host. From the perspective of the host, the element
+ * emits 'model-changed' events just like any other property change events.
+ *
+ * This data binding is one-way, child-to-host: the model property is read-only.

[stevenjb, 2015/09/22 16:47:33]

This seems to contradict 'model="{{model}}"' above? I *think* that is because
the [[]] one-way data binding is the wrong direction? We should call that out.

[michaelpg, 2015/09/23 21:27:27]

Yes, as described by
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html:

If the child property is notify: true and readOnly:true, and the host binding
uses curly-brace syntax, the binding is one-way, upward (child-to-host).

+ * Any changes should be made through this element's public functions.
+ *
+ * @group Chrome Settings Elements
+ * @element cr-settings-languages-model
+ */
+
+/**
+ * @typedef {{spellCheckEnabled: boolean}}
+ */
+var LanguageState;
+
+/**
+ * @typedef {{language: !chrome.languageSettingsPrivate.Language,
+ *            state: !LanguageState}}
+ */
+var LanguageInfo;
+
+/**
+ * The model includes:
+ *     supportedLanguages: an array of languages, ordered alphabetically.
+ *     enabledLanguages: an array of enabled language info and state, ordered by
+ *         preference.
+ * @typedef {{
+ *      supportedLanguages: !Array<!chrome.languageSettingsPrivate.Language>,
+ *      enabledLanguages: !Array<!LanguageInfo>
+ *  }}
+ */
+var LanguagesModel;
+
+(function() {
+'use strict';
+
+/**
+ * This element has a reference to the singleton, exposing its model to other
+ * Polymer objects.
+ * */
+Polymer({
+  is: 'cr-settings-languages-model',
+
+  properties: {
+    /**
+     * Singleton element created at startup which provides the model shared by
+     * all instances of cr-settings-language-model.
+     * @type {!Element}
+     */
+    privateModel_: {
+      type: Object,
+      value: document.createElement('cr-settings-languages-model-private'),
+    },
+
+    /**
+     * The singleton's private model, exposed as a property so hosts can bind

[stevenjb, 2015/09/22 16:47:33]

This is super confusing, why is the above member named 'privateModel_' but this
one described as 'private model'?

+     * to it.
+     * @type {LanguagesModel|undefined}
+     */
+    model: {
+      type: Object,
+      notify: true,
+      readOnly: true,
+    },
+  },
+
+  ready: function() {
+    // Set the 'model' property to reference the singleton's model.
+    this._setModel(this.privateModel_.model);
+    // Have to manually notify the host of changes to this model property
+    // by listening for changes to the singleton's model property.
+    this.listen(this.privateModel_, 'model-changed', 'privateModelChanged_');
+  },
+
+  /**
+   * Forwards changes to the model reported by the singleton to the host.
+   * From the host's perspective, our 'model' property will have changed.
+   * @private
+   */
+  privateModelChanged_: function(e) {
+    // Forward the change notification to the host.
+    this.fire(e.type, e.detail, {bubbles: false});
+  },
+
+  // Forward public methods to the singleton.

[michaelpg, 2015/09/22 04:03:15]

Obviously forwarding all these methods is ugly. But doing them in the instance
of this element, instead of in the singleton, is tricky at best.

We could actually implement these methods here, and say:

<cr-settings-languages-model> has functions which change prefs
<cr-settings-languages-model-private> provides the read-only data model that
reflects the prefs

But I don't know how to do that without other ugly changes -- can chat more in
depth if someone wants.

+
+  /** @param {string} languageCode */
+  setUILanguage: function(languageCode) {
+    this.privateModel_.setUILanguage(languageCode);
+  },
+
+  /** @param {string} languageCode */
+  enableLanguage: function(languageCode) {
+    this.privateModel_.enableLanguage(languageCode);
+  },
+
+  /** @param {string} languageCode */
+  disableLanguage: function(languageCode) {
+    this.privateModel_.disableLanguage(languageCode);
+  },
+
+  /**
+   * @param {string} languageCode
+   * @return {boolean}
+   */
+  isEnabled: function(languageCode) {
+    return this.privateModel_.isEnabled(languageCode);
+  },
+
+  /**
+   * @param {string} languageCode
+   * @param {boolean} enable
+   */
+  toggleSpellCheck: function(languageCode, enable) {
+    this.privateModel_.toggleSpellCheck(languageCode, enable);
+  },
+});
+
+var preferredLanguagesPath;
+if (cr.isChromeOS)
+  preferredLanguagesPath = 'prefs.settings.language.preferred_languages.value';
+else
+  preferredLanguagesPath = 'prefs.intl.accept_languages.value';
+
+/**
+ * Privately used element that contains, listens to and updates the shared
+ * languages model.
+ */
+Polymer({
+  is: 'cr-settings-languages-model-private',
+
+  properties: {
+    /**
+     * @type {LanguagesModel|undefined}
+     */
+    model: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * Object containing all preferences, for use by Polymer controls.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+  },
+
+  /**
+   * Hash map of model.supportedLanguages using language codes as keys for
+   * fast lookup. Not data bound.
+   * @private {!Object<!chrome.languageSettingsPrivate.Language>}
+   */
+  supportedLanguageMap_: {},
+
+  /**
+   * Hash maps of model.enabledLanguages using language codes as keys for
+   * fast lookup. Not data bound.
+   * @private {!Object<!LanguageInfo>}
+   */
+  enabledLanguageMap_: {},
+
+  observers: [
+    'preferredLanguagesPrefChanged_(' + preferredLanguagesPath + ')',
+    'spellCheckDictionariesPrefChanged_(prefs.spellcheck.dictionaries.value.*)',
+  ],
+
+  /** @override */
+  created: function() {
+    chrome.languageSettingsPrivate.getLanguageList(function(languageList) {
+      // Wait until prefs are initialized before creating the model, so we can
+      // include information about enabled languages.
+      CrSettingsPrefs.initialized.then(function() {
+        this.createModel_(languageList);
+        this.initialized_ = true;
+      }.bind(this));
+    }.bind(this));
+  },
+
+  /**
+   * Constructs the model with the given language list.
+   * @param {!Array<!chrome.languageSettingsPrivate.Language>}
+   *     supportedLanguages
+   */
+  createModel_: function(supportedLanguages) {
+    // Populate the hash map of supported languages.
+    for (var i = 0; i < supportedLanguages.length; i++) {
+      this.supportedLanguageMap_[supportedLanguages[i].code] =
+          supportedLanguages[i];
+    }
+
+    // Create a list of enabled language info from the supported languages.
+    var enabledLanguages = this.getEnabledLanguages_();
+    // Populate the hash map of enabled languages.
+    for (var i = 0; i < enabledLanguages.length; i++) {
+      var languageInfo = enabledLanguages[i];
+      this.enabledLanguageMap_[languageInfo.language.code] = languageInfo;
+    }
+
+    // Initialize the Polymer model.
+    this.model = {
+      supportedLanguages: supportedLanguages,
+      enabledLanguages: enabledLanguages,
+    };
+  },
+
+  /**
+   * Returns a list of LanguageInfos for each enabled language in the supported
+   * languages list.
+   * @private
+   * @return {!Array<!LanguageInfo>}
+   */
+  getEnabledLanguages_: function() {
+    assert(CrSettingsPrefs.isInitialized);
+
+    var languageCodes = this.get(preferredLanguagesPath).split(',');
+    var enabledLanguages = [];
+    var spellCheckMap = this.getSpellCheckMap_();
+    for (var i = 0; i < languageCodes.length; i++) {
+      var code = languageCodes[i];
+      var language = this.supportedLanguageMap_[code];
+      if (!language)
+        continue;
+      var state = {spellCheckEnabled: !!spellCheckMap[code]};
+      enabledLanguages.push({language: language, state: state});
+    }
+    return enabledLanguages;
+  },
+
+  /**
+   * Creates a map whose keys are languages enabled for spell check.
+   * @return {!Object<boolean>}
+   */
+  getSpellCheckMap_: function() {
+    assert(CrSettingsPrefs.isInitialized);
+
+    var spellCheckPref = /** @type {chrome.settingsPrivate.PrefObject} */(
+        this.get('prefs.spellcheck.dictionaries'));
+    var spellCheckCodes = spellCheckPref.value;
+    var spellCheckMap = {};
+    for (var i = 0; i < spellCheckCodes.length; i++)
+      spellCheckMap[spellCheckCodes[i]] = true;
+    return spellCheckMap;
+  },
+
+  /** @private */
+  preferredLanguagesPrefChanged_: function() {
+    if (!this.initialized_)
+      return;
+
+    var enabledLanguages = this.getEnabledLanguages_();
+    // Reset the enabled language map. Do this before notifying of the change
+    // via model.enabledLanguages.
+    this.enabledLanguageMap_ = {};
+    for (var i = 0; i < enabledLanguages.length; i++) {
+      var languageInfo = enabledLanguages[i];
+      this.enabledLanguageMap_[languageInfo.language.code] = languageInfo;
+    }
+    this.set('model.enabledLanguages', enabledLanguages);
+  },
+
+  /**
+   * Updates the spellCheckEnabled state of each enabled language.
+   * @private
+   */
+  spellCheckDictionariesPrefChanged_: function() {
+    if (!this.initialized_)
+      return;
+
+    var spellCheckMap = this.getSpellCheckMap_();
+    for (var i = 0; i < this.model.enabledLanguages.length; i++) {
+      this.set('model.enabledLanguages.' + i + '.state.spellCheckEnabled',
+               !!spellCheckMap[this.model.enabledLanguages[i].language.code]);
+    }
+  },
+
+  /**
+   * Windows and Chrome OS only: Sets the prospective UI language to the chosen
+   * language. This dosen't affect the actual UI language until a restart.
+   * @param {string} languageCode
+   */
+  setUILanguage: function(languageCode) {
+    // Set the prospective UI language. This won't take effect until a restart.
+    chrome.send('setUILanguage', [languageCode]);
+  },
+
+  /**
+   * Enables the language, making it available for spell check and input.
+   * @param {string} languageCode
+   */
+  enableLanguage: function(languageCode) {
+    if (!CrSettingsPrefs.isInitialized)
+      return;
+
+    var languageCodes = this.get(preferredLanguagesPath);
+    var index = languageCodes.split(',').indexOf(languageCode);
+    if (index > -1)
+      return;
+    this.set(preferredLanguagesPath, languageCodes + ',' + languageCode);
+  },
+
+  /**
+   * Disables the language.
+   * @param {string} languageCode
+   */
+  disableLanguage: function(languageCode) {
+    if (!CrSettingsPrefs.isInitialized)
+      return;
+
+    // Don't disable the UI language.
+    var appLocale = this.get('prefs.intl.app_locale.value') ||
+                    navigator.language;
+    if (languageCode == appLocale)
+      return;
+
+    var languageCodes = this.get(preferredLanguagesPath).split(',');
+    // Don't disable the only enabled language.
+    if (languageCodes.length == 1)
+      return;
+
+    // Remove the language from spell check.
+    var spellCheckIndex =
+        this.get('prefs.spellcheck.dictionaries.value').indexOf(languageCode);
+    if (spellCheckIndex != -1)
+      this.splice('prefs.spellcheck.dictionaries.value', spellCheckIndex, 1);
+
+    var languageIndex = languageCodes.indexOf(languageCode);
+    if (languageIndex == -1)
+      return;
+    languageCodes.splice(languageIndex, 1);
+    this.set(preferredLanguagesPath, languageCodes.join(','));
+  },
+
+  /**
+   * @param {string} languageCode
+   * @return {boolean} True if the language is enabled.
+   */
+  isEnabled: function(languageCode) {
+    return !!this.enabledLanguageMap_[languageCode];
+  },
+
+  /**
+   * Enables or disables spell check for the given language.
+   * @param {string} languageCode
+   * @param {boolean} enable
+   */
+  toggleSpellCheck: function(languageCode, enable) {
+    if (!this.initialized_)
+      return;
+
+    var spellCheckPref = /** @type {chrome.settingsPrivate.PrefObject} */(
+        this.get('prefs.spellcheck.dictionaries'));
+    if (enable) {
+      if (spellCheckPref.value.indexOf(languageCode) == -1)
+        this.push('prefs.spellcheck.dictionaries.value', languageCode);
+    } else {
+      // TODO: need update externs before committing
+      this.arrayDelete('prefs.spellcheck.dictionaries.value', languageCode);
+    }
+  },
+});
+})();