Diagnostics: localize strings for keyboard tester

These have now been finalized, and so can be sent for translation. The UI specs have also been changed, so make some positioning tweaks too. Screenshot: http://shortn/_DNEzRIZAbO Change-Id: Ief1b0f8d449c1e15f3d9effaf6be24e023c5b3bd Bug: 1207678 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3543356 Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org> Commit-Queue: Harry Cutts <hcutts@chromium.org> Cr-Commit-Position: refs/heads/main@{#984094}
chromium · Mar 22, 2022 · 7441053 · 7441053
1 parent 878b9d0
commit 7441053
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 43 deletions.
diff --git a/ash/webui/diagnostics_ui/diagnostics_ui.cc b/ash/webui/diagnostics_ui/diagnostics_ui.cc
@@ -84,18 +84,22 @@ diagnostics::metrics::NavigationView GetInitialView(const GURL url) {
   return diagnostics::metrics::NavigationView::kSystem;
 }
 
-std::u16string GetSettingsLinkLabel() {
-  int string_id = IDS_DIAGNOSTICS_SETTINGS_LINK_TEXT;
+std::u16string GetLinkLabel(int string_id, const char* url) {
   std::vector<std::u16string> replacements;
-  const char* kOsSettingsUrl = "chrome://os-settings/";
-  replacements.push_back(base::UTF8ToUTF16(kOsSettingsUrl));
-
+  replacements.push_back(base::UTF8ToUTF16(url));
   return l10n_util::GetStringFUTF16(string_id, replacements, nullptr);
 }
 
 std::unique_ptr<base::DictionaryValue> GetDataSourceUpdate() {
   auto update = std::make_unique<base::DictionaryValue>();
-  update->SetKey("settingsLinkText", base::Value(GetSettingsLinkLabel()));
+  update->SetKey("settingsLinkText",
+                 base::Value(GetLinkLabel(IDS_DIAGNOSTICS_SETTINGS_LINK_TEXT,
+                                          "chrome://os-settings/")));
+  // TODO(crbug.com/1207678): update this link when the Help Center is ready.
+  update->SetKey(
+      "keyboardTesterHelpLink",
+      base::Value(GetLinkLabel(IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_HELP_LINK,
+                               "https://support.google.com/chromebook/")));
   return update;
 }
 
@@ -200,6 +204,7 @@ void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
       {"inputDescriptionUsbTouchpad", IDS_INPUT_DIAGNOSTICS_USB_TOUCHPAD},
       {"inputDescriptionUsbTouchscreen", IDS_INPUT_DIAGNOSTICS_USB_TOUCHSCREEN},
       {"inputDeviceTest", IDS_INPUT_DIAGNOSTICS_RUN_TEST},
+      {"inputTesterDone", IDS_INPUT_DIAGNOSTICS_TESTER_DONE},
       {"internetConnectivityGroupLabel",
        IDS_DIAGNOSTICS_INTERNET_CONNECTIVITY_GROUP_LABEL},
       {"ipConfigInfoDrawerGateway",
@@ -208,6 +213,9 @@ void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
        IDS_NETWORK_DIAGNOSTICS_IP_CONFIG_INFO_DRAWER_SUBNET_MASK},
       {"ipConfigInfoDrawerTitle",
        IDS_NETWORK_DIAGNOSTICS_IP_CONFIG_INFO_DRAWER_TITLE},
+      {"keyboardTesterInstruction",
+       IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_INSTRUCTION},
+      {"keyboardTesterTitle", IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_TITLE},
       {"joinNetworkLinkText", IDS_DIAGNOSTICS_JOIN_NETWORK_LINK_TEXT},
       {"lanConnectivityFailedText",
        IDS_DIAGNOSTICS_LAN_CONNECTIVITY_FAILED_TEXT},

diff --git a/ash/webui/diagnostics_ui/resources/keyboard_tester.html b/ash/webui/diagnostics_ui/resources/keyboard_tester.html
@@ -7,18 +7,15 @@
     font-family: var(--diagnostics-google-sans-font-family);
   }
 
-  #instruction {
-    text-align: center;
-  }
-
   #diagram-border {
     border: 1px solid var(--google-blue-600);
     border-radius: 8px;
     padding: 6px;
   }
 
   #help {
-    text-align: end;
+    align-self: center;
+    flex-grow: 1;
   }
 
   a[href] {
@@ -27,9 +24,9 @@
   }
 </style>
 <cr-dialog id="dialog" show-close-button on-close="handleClose">
-  <div slot="title">[[dialogTitle_]]</div>
+  <div slot="title">[[i18n('keyboardTesterTitle')]]</div>
   <div slot="body">
-    <p id="instruction">Test your keyboard by typing</p>
+    <p>[[i18n('keyboardTesterInstruction')]]</p>
     <template is="dom-if" if="[[layoutIsKnown_]]">
       <div id="diagram-border">
         <keyboard-diagram
@@ -43,18 +40,12 @@
         </keyboard-diagram>
       </div>
     </template>
-    <p id="help">
-      For more help, go to the
-      <!--
-        TODO(crbug.com/1207678): update this link when the Help Center is
-        ready.
-      -->
-      <a href="https://support.google.com/chromebook/">Help Center</a>
-    </p>
   </div>
   <div slot="button-container">
+    <div id="help" inner-h-t-m-l="[[i18nAdvanced('keyboardTesterHelpLink')]]"></div>
+
     <cr-button class="action-button" on-click="close">
-      Done
+      [[i18n('inputTesterDone')]]
     </cr-button>
   </div>
 </cr-dialog>
diff --git a/ash/webui/diagnostics_ui/resources/keyboard_tester.js b/ash/webui/diagnostics_ui/resources/keyboard_tester.js
@@ -7,9 +7,10 @@ import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import {MechanicalLayout as DiagramMechanicalLayout, PhysicalLayout as DiagramPhysicalLayout, TopRowKey as DiagramTopRowKey} from 'chrome://resources/ash/common/keyboard_diagram.js';
 import {KeyboardKeyState} from 'chrome://resources/ash/common/keyboard_key.js';
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {ConnectionType, InputDataProviderInterface, KeyboardInfo, KeyboardObserverInterface, KeyboardObserverReceiver, KeyEvent, KeyEventType, MechanicalLayout, NumberPadPresence, PhysicalLayout, TopRowKey} from './diagnostics_types.js';
+import {InputDataProviderInterface, KeyboardInfo, KeyboardObserverInterface, KeyboardObserverReceiver, KeyEvent, KeyEventType, MechanicalLayout, NumberPadPresence, PhysicalLayout, TopRowKey} from './diagnostics_types.js';
 
 /**
  * @fileoverview
@@ -49,6 +50,8 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  behaviors: [I18nBehavior],
+
   /** @private {?KeyboardObserverReceiver} */
   receiver_: null,
 
@@ -70,12 +73,6 @@ Polymer({
      */
     keyboard: KeyboardInfo,
 
-    /** @protected */
-    dialogTitle_: {
-      type: String,
-      computed: 'computeDialogTitle_(keyboard)',
-    },
-
     /** @private */
     layoutIsKnown_: {
       type: Boolean,
@@ -113,20 +110,6 @@ Polymer({
     },
   },
 
-  /**
-   * @param {?KeyboardInfo} keyboard
-   * @return {string}
-   * @private
-   */
-  computeDialogTitle_(keyboard) {
-    if (!keyboard) {
-      return '';
-    }
-    return keyboard.connectionType === ConnectionType.kInternal ?
-        'Test your internal keyboard' :
-        'Test your external keyboard';
-  },
-
   /**
    * @param {?KeyboardInfo} keyboard
    * @return {boolean}

diff --git a/chromeos/chromeos_strings.grd b/chromeos/chromeos_strings.grd
@@ -1182,6 +1182,21 @@ Try tapping the mic to ask me anything.
         USB touchscreen
       </message>
 
+      <message name="IDS_INPUT_DIAGNOSTICS_TESTER_DONE" desc="Text for a button the user clicks to indicate that they are done testing an input device, causing the dialog to close.">
+        Done
+      </message>
+
+      <!-- Input diagnostics: keyboard tester -->
+      <message name="IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_HELP_LINK" desc="Text offering a link to the help center page for a keyboard testing UI.">
+        For more help, go to the <ph name="BEGIN_LINK">&lt;a target="_blank" href="$1"&gt;</ph>Help Center<ph name="END_LINK">&lt;/a&gt;</ph>.
+      </message>
+      <message name="IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_INSTRUCTION" desc="Instruction text in a keyboard testing UI. Appears above a visual representation showing the keys currently pressed on the keyboard.">
+        Type any key on your keyboard. You can press up to 4 keys at the same time.
+      </message>
+      <message name="IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_TITLE" desc="Title for a dialog allowing the user to test their keyboard.">
+        Test your keyboard
+      </message>
+
       <!-- Ash keyboard diagram ARIA labels -->
       <message name="IDS_KEYBOARD_DIAGRAM_ARIA_LABEL_NOT_PRESSED" desc="ARIA label that describes a key that has not yet been pressed, as part of a keyboard testing UI. Key names could be single letters like Q, or a phrase like 'Down arrow'.">
         <ph name="KEY_NAME">$1<ex>Q</ex></ph> key not pressed

diff --git a/chromeos/chromeos_strings_grd/IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_HELP_LINK.png.sha1 b/chromeos/chromeos_strings_grd/IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_HELP_LINK.png.sha1
@@ -0,0 +1 @@
+21e7d114d6b04d59ab498b6ddb1d513968041c0c
diff --git a/chromeos/chromeos_strings_grd/IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_INSTRUCTION.png.sha1 b/chromeos/chromeos_strings_grd/IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_INSTRUCTION.png.sha1
@@ -0,0 +1 @@
+21e7d114d6b04d59ab498b6ddb1d513968041c0c
diff --git a/chromeos/chromeos_strings_grd/IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_TITLE.png.sha1 b/chromeos/chromeos_strings_grd/IDS_INPUT_DIAGNOSTICS_KEYBOARD_TESTER_TITLE.png.sha1
@@ -0,0 +1 @@
+21e7d114d6b04d59ab498b6ddb1d513968041c0c
diff --git a/chromeos/chromeos_strings_grd/IDS_INPUT_DIAGNOSTICS_TESTER_DONE.png.sha1 b/chromeos/chromeos_strings_grd/IDS_INPUT_DIAGNOSTICS_TESTER_DONE.png.sha1
@@ -0,0 +1 @@
+21e7d114d6b04d59ab498b6ddb1d513968041c0c