Skip to content

GitLab

T
tangled
Commit cd00499d authored by dschuyler's avatar dschuyler Committed by Commit Bot
Browse files
Options

[i18n] use Polymer data binding to change locale strings 

This CL uses Polymer variable binding to swap out i18n strings rather
than using i18n-content.

BUG=692763
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2886843005
Cr-Commit-Position: refs/heads/master@{#476358}
parent 4dc3eafa
Show whitespace changes
Inline Side-by-side
Showing with 123 additions and 50 deletions
chrome/browser/resources/chromeos/login/oobe_welcome.html
View file @ cd00499d
......@@ -5,6 +5,7 @@
<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_network_select.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
......@@ -89,9 +90,9 @@
on-accessibility-button-clicked="onWelcomeAccessibilityButtonClicked_"
on-timezone-button-clicked="onWelcomeTimezoneButtonClicked_"
on-next-button-clicked="onWelcomeNextButtonClicked_"
timezone-button-visible="[[isTimezoneButtonVisible_(highlightStrength)]]"
debugging-link-visible="[[debuggingLinkVisible]]"
>
timezone-button-visible=
"[[isTimezoneButtonVisible_(highlightStrength)]]"
debugging-link-visible="[[debuggingLinkVisible]]">
</oobe-welcome-dialog>
<oobe-dialog id="languageScreen" role="dialog" hidden has-buttons
i18n-values="aria-label:languageSectionTitle">
......@@ -99,15 +100,16 @@
icon1x="oobe-welcome-32:language" icon2x="oobe-welcome-64:language">
</hd-iron-icon>
<div class="header">
<h1 class="title" i18n-content="languageSectionTitle"></h1>
<h1 class="title">[[i18nDynamic(locale, 'languageSectionTitle')]]</h1>
</div>
<div class="footer layout vertical">
<template is="dom-if" if="[[enabled]]">
<div id="languageDropdownContainer"
class="flex layout center horizontal justified
language-selection-entry">
<div class="language-selection-title layout vertical center-justified"
i18n-content="languageDropdownTitle">
<div class=
"language-selection-title layout vertical center-justified">
[[i18nDynamic(locale, 'languageDropdownTitle')]]
</div>
<oobe-i18n-dropdown id="languageSelect" items="[[languages]]"
on-select-item="onLanguageSelected_"
......@@ -118,8 +120,9 @@
<div id="keyboardDropdownContainer"
class="flex layout center horizontal justified
language-selection-entry">
<div class="language-selection-title layout vertical center-justified"
i18n-content="keyboardDropdownTitle">
<div class=
"language-selection-title layout vertical center-justified">
[[i18nDynamic(locale, 'keyboardDropdownTitle')]]
</div>
<oobe-i18n-dropdown id="keyboardSelect" items="[[keyboards]]"
on-select-item="onKeyboardSelected_"
......@@ -130,7 +133,7 @@
</div>
<div class="bottom-buttons layout horizontal end-justified">
<oobe-text-button inverse on-tap="closeLanguageSection_">
<div i18n-content="oobeOKButtonText"></div>
<div>[[i18nDynamic(locale, 'oobeOKButtonText')]]</div>
</oobe-text-button>
</div>
</oobe-dialog>
......@@ -141,8 +144,12 @@
icon2x="oobe-welcome-64:accessibility">
</hd-iron-icon>
<div class="header">
<h1 class="title" i18n-content="accessibilitySectionTitle"></h1>
<div class="subtitle" i18n-content="accessibilitySectionHint"></div>
<h1 class="title">
[[i18nDynamic(locale, 'accessibilitySectionTitle')]]
</h1>
<div class="subtitle">
[[i18nDynamic(locale, 'accessibilitySectionHint')]]
</div>
</div>
<div class="footer layout vertical">
<oobe-a11y-option checked="[[a11yStatus.spokenFeedbackEnabled]]"
......@@ -150,56 +157,76 @@
chrome-message="enableSpokenFeedback"
i18n-values="label-for-aria:spokenFeedbackOption"
class="focus-on-show">
<span class="title" i18n-content="spokenFeedbackOption"></span>
<span class="checked-value" i18n-content="spokenFeedbackOptionOn">
<span class="title">
[[i18nDynamic(locale, 'spokenFeedbackOption')]]
</span>
<span class="checked-value">
[[i18nDynamic(locale, 'spokenFeedbackOptionOn')]]
</span>
<span class="unchecked-value" i18n-content="spokenFeedbackOptionOff">
<span class="unchecked-value">
[[i18nDynamic(locale, 'spokenFeedbackOptionOff')]]
</span>
</oobe-a11y-option>
<oobe-a11y-option checked="[[a11yStatus.largeCursorEnabled]]"
on-change="onA11yOptionChanged_"
chrome-message="enableLargeCursor"
i18n-values="label-for-aria:largeCursorOption">
<span class="title" i18n-content="largeCursorOption"></span>
<span class="checked-value" i18n-content="largeCursorOptionOn">
<span class="title">
[[i18nDynamic(locale, 'largeCursorOption')]]
</span>
<span class="unchecked-value" i18n-content="largeCursorOptionOff">
<span class="checked-value">
[[i18nDynamic(locale, 'largeCursorOptionOn')]]
</span>
<span class="unchecked-value">
[[i18nDynamic(locale, 'largeCursorOptionOff')]]
</span>
</oobe-a11y-option>
<oobe-a11y-option checked="[[a11yStatus.highContrastEnabled]]"
on-change="onA11yOptionChanged_"
chrome-message="enableHighContrast"
i18n-values="label-for-aria:highContrastOption">
<span class="title" i18n-content="highContrastOption"></span>
<span class="checked-value" i18n-content="highContrastOptionOn">
<span class="title">
[[i18nDynamic(locale, 'highContrastOption')]]
</span>
<span class="checked-value">
[[i18nDynamic(locale, 'highContrastOptionOn')]]
</span>
<span class="unchecked-value" i18n-content="highContrastOptionOff">
<span class="unchecked-value">
[[i18nDynamic(locale, 'highContrastOptionOff')]]
</span>
</oobe-a11y-option>
<oobe-a11y-option checked="[[a11yStatus.screenMagnifierEnabled]]"
on-change="onA11yOptionChanged_"
chrome-message="enableScreenMagnifier"
i18n-values="label-for-aria:screenMagnifierOption">
<span class="title" i18n-content="screenMagnifierOption"></span>
<span class="checked-value" i18n-content="screenMagnifierOptionOn">
<span class="title">
[[i18nDynamic(locale, 'screenMagnifierOption')]]
</span>
<span class="unchecked-value" i18n-content="screenMagnifierOptionOff">
<span class="checked-value">
[[i18nDynamic(locale, 'screenMagnifierOptionOn')]]
</span>
<span class="unchecked-value">
[[i18nDynamic(locale, 'screenMagnifierOptionOff')]]
</span>
</oobe-a11y-option>
<oobe-a11y-option checked="[[a11yStatus.virtualKeyboardEnabled]]"
on-change="onA11yOptionChanged_"
chrome-message="enableVirtualKeyboard"
i18n-values="label-for-aria:virtualKeyboardOption">
<span class="title" i18n-content="virtualKeyboardOption"></span>
<span class="checked-value" i18n-content="virtualKeyboardOptionOn">
<span class="title">
[[i18nDynamic(locale, 'virtualKeyboardOption')]]
</span>
<span class="checked-value">
[[i18nDynamic(locale, 'virtualKeyboardOptionOn')]]
</span>
<span class="unchecked-value" i18n-content="virtualKeyboardOptionOff">
<span class="unchecked-value">
[[i18nDynamic(locale, 'virtualKeyboardOptionOff')]]
</span>
</oobe-a11y-option>
</div>
<div class="bottom-buttons layout horizontal end-justified">
<oobe-text-button inverse on-tap="closeAccessibilitySection_">
<div i18n-content="oobeOKButtonText"></div>
<div>[[i18nDynamic(locale, 'oobeOKButtonText')]]</div>
</oobe-text-button>
</div>
</oobe-dialog>
......@@ -209,13 +236,14 @@
icon1x="oobe-welcome-32:timezone" icon2x="oobe-welcome-64:timezone">
</hd-iron-icon>
<div class="header">
<h1 class="title" i18n-content="timezoneSectionTitle"></h1>
<h1 class="title">[[i18nDynamic(locale, 'timezoneSectionTitle')]]</h1>
</div>
<div class="footer layout vertical">
<div class="flex layout center horizontal justified
timezone-selection-entry">
<div class="timezone-selection-title layout vertical center-justified"
i18n-content="timezoneDropdownTitle">
<div class=
"timezone-selection-title layout vertical center-justified">
[[i18nDynamic(locale, 'timezoneDropdownTitle')]]
</div>
<oobe-i18n-dropdown id="timezoneSelect" items="[[timezones]]"
on-select-item="onTimezoneSelected_"
......@@ -226,7 +254,7 @@
</div>
<div class="bottom-buttons layout horizontal end-justified">
<oobe-text-button inverse on-tap="closeTimezoneSection_">
<div i18n-content="oobeOKButtonText"></div>
<div>[[i18nDynamic(locale, 'oobeOKButtonText')]]</div>
</oobe-text-button>
</div>
</oobe-dialog>
......@@ -237,8 +265,10 @@
icon1x="oobe-welcome-32:wifi" icon2x="oobe-welcome-64:wifi">
</hd-iron-icon>
<div class="header">
<h1 class="title" i18n-content="networkSectionTitle"></h1>
<div class="subtitle" i18n-content="networkSectionHint"></div>
<h1 class="title">[[i18nDynamic(locale, 'networkSectionTitle')]]</h1>
<div class="subtitle">
[[i18nDynamic(locale, 'networkSectionHint')]]
</div>
</div>
<div class="footer layout vertical">
<cr-network-select id="networkSelect"
......
chrome/browser/resources/chromeos/login/oobe_welcome.js
View file @ cd00499d
......@@ -9,6 +9,8 @@
Polymer({
is: 'oobe-welcome-md',
behaviors: [I18nBehavior],
properties: {
/**
* Currently selected system language (display name).
......@@ -32,7 +34,7 @@ Polymer({
*/
languages: {
type: Array,
observer: "onLanguagesChanged_",
observer: 'onLanguagesChanged_',
},
/**
......@@ -41,7 +43,7 @@ Polymer({
*/
keyboards: {
type: Array,
observer: "onKeyboardsChanged_",
observer: 'onKeyboardsChanged_',
},
/**
......@@ -130,6 +132,8 @@ Polymer({
addWiFiNetworkMenuName: loadTimeData.getString('addWiFiNetworkMenuName'),
proxySettingsMenuName: loadTimeData.getString('proxySettingsMenuName'),
};
this.i18nUpdateLocale();
},
/**
......@@ -207,21 +211,27 @@ Polymer({
customItemName: 'proxySettingsMenuName',
polymerIcon: 'oobe-welcome-20:add-proxy',
customData: {
onTap: function() { self.OpenProxySettingsDialog_(); },
onTap: function() {
self.OpenProxySettingsDialog_();
},
},
},
{
customItemName: 'addWiFiNetworkMenuName',
polymerIcon: 'oobe-welcome-20:add-wifi',
customData: {
onTap: function() { self.OpenAddWiFiNetworkDialog_(); },
onTap: function() {
self.OpenAddWiFiNetworkDialog_();
},
},
},
{
customItemName: 'addMobileNetworkMenuName',
polymerIcon: 'oobe-welcome-20:add-cellular',
customData: {
onTap: function() { self.OpenAddWiFiNetworkDialog_(); },
onTap: function() {
self.OpenAddWiFiNetworkDialog_();
},
},
},
];
......@@ -275,7 +285,7 @@ Polymer({
},
/**
* Handle Networwork Setup screen "Proxy settings" button.
* Handle Network Setup screen "Proxy settings" button.
*
* @private
*/
......@@ -284,7 +294,7 @@ Polymer({
},
/**
* Handle Networwork Setup screen "Add WiFi network" button.
* Handle Network Setup screen "Add WiFi network" button.
*
* @private
*/
......@@ -293,7 +303,7 @@ Polymer({
},
/**
* Handle Networwork Setup screen "Add cellular network" button.
* Handle Network Setup screen "Add cellular network" button.
*
* @private
*/
......
chrome/test/data/webui/i18n_behavior_test.html
View file @ cd00499d
......@@ -35,6 +35,12 @@ function testI18nAdvanced() {
I18nBehavior.i18nAdvanced('customTag', {tags: ['X-FOO']});
}
function testI18nDynamic() {
var locale = 'en';
assertEquals("I'm just text, nobody should have a problem with me!",
I18nBehavior.i18nDynamic(locale, 'text'));
}
function testI18nExists() {
assertTrue(I18nBehavior.i18nExists('text'));
assertFalse(I18nBehavior.i18nExists('missingText'));
......
ui/webui/resources/js/i18n_behavior.js
View file @ cd00499d
......@@ -4,17 +4,23 @@
/**
* @fileoverview
* 'I18nBehavior' is a behavior to mix in loading of
* internationalization strings.
*
* Example:
* behaviors: [
* I18nBehavior,
* ],
* 'I18nBehavior' is a behavior to mix in loading of internationalization
* strings.
*/
/** @polymerBehavior */
var I18nBehavior = {
properties: {
/**
* The language the UI is presented in. Used to signal dynamic language
* change.
*/
locale: {
type: String,
value: '',
},
},
/**
* Returns a translated string where $1 to $9 are replaced by the given
* values.
......@@ -59,6 +65,19 @@ var I18nBehavior = {
.firstChild.innerHTML;
},
/**
* Similar to 'i18n', with an unused |locale| parameter used to trigger
* updates when |this.locale| changes.
* @param {string} locale The UI language used.
* @param {string} id The ID of the string to translate.
* @param {...string} var_args Values to replace the placeholders $1 to $9
* in the string.
* @return {string} A translated, sanitized, substituted string.
*/
i18nDynamic: function(locale, id, var_args) {
return this.i18n.apply(this, Array.prototype.slice.call(arguments, 1));
},
/**
* Returns true if a translation exists for |id|.
* @param {string} id
......@@ -67,6 +86,14 @@ var I18nBehavior = {
i18nExists: function(id) {
return loadTimeData.valueExists(id);
},
/**
* Call this when UI strings may have changed. This will send an update to any
* data bindings to i18nDynamic(locale, ...).
*/
i18nUpdateLocale: function() {
this.locale = loadTimeData.getString('language');
},
};
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment