[Files] Create util functions to get plural strings

Bug: b:317335793
Change-Id: I02d592f703c24541fbc44f5c4279356adb147871
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5172611
Reviewed-by: Ben Reich <benreich@chromium.org>
Commit-Queue: Wenbo Jie <wenbojie@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1243910}

ui/file_manager/file_manager/common/js/translations.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {loadTimeData} from 'chrome://resources/ash/common/load_time_data.m.js';
+import {PluralStringProxyImpl} from 'chrome://resources/js/plural_string_proxy.js';
 
 import type {EntryLocation} from '../../background/js/entry_location_impl.js';
 import type {FilesAppEntry} from '../../externs/files_app_entry_interfaces.js';
@@ -293,3 +294,42 @@ export function getFileErrorString(name: string|null|undefined) {
       'FILE_ERROR_GENERIC';
   return loadTimeData.getString(error!);
 }
+
+/**
+ * Get the plural string with a specified count.
+ * Note: the string id to get must be handled by `PluralStringHandler` in C++
+ * side.
+ *
+ * @param id The translation string resource id.
+ * @param count The number count to get the plural.
+ */
+export async function getPluralString(
+    id: string, count: number): Promise<string> {
+  return PluralStringProxyImpl.getInstance().getPluralString(id, count);
+}
+
+/**
+ * Get the plural string with a specified count and placeholder values.
+ * Note: the string id to get must be handled by `PluralStringHandler` in C++
+ * side.
+ *
+ * ```
+ * {NUM_FILE, plural,
+ *    = 1 {1 file with <ph name="FILE_SIZE">$1<ex>44 MB</ex></ph> size.},
+ *    other {# files with <ph name="FILE_SIZE">$1<ex>44 MB</ex></ph> size.}}
+ *
+ * await getPluralStringWithPlaceHolders(id, 2, '44 MB')
+ * => "2 files with 44 MB size"
+ * ```
+ *
+ * @param id The translation string resource id.
+ * @param count The number count to get the plural.
+ * @param placeholders The placeholder value to replace.
+ */
+export async function getPluralStringWithPlaceHolders(
+    id: string, count: number,
+    ...placeholders: Array<string|number>): Promise<string> {
+  const strWithPlaceholders =
+      await PluralStringProxyImpl.getInstance().getPluralString(id, count);
+  return loadTimeData.substituteString(strWithPlaceholders, ...placeholders);
+}

ui/file_manager/file_manager/foreground/elements/xf_display_panel.ts

@@ -2,9 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {PluralStringProxyImpl} from 'chrome://resources/js/plural_string_proxy.js';
-
-import {str, strf} from '../../common/js/translations.js';
+import {getPluralString, str, strf} from '../../common/js/translations.js';
 
 import {PanelButton} from './xf_button.js';
 import {getTemplate} from './xf_display_panel.html.js';
@@ -33,9 +31,6 @@ export class DisplayPanel extends HTMLElement {
 
   private toggleSummaryBound_ = this.toggleSummary_.bind(this);
 
-  /** Plural string proxy to call remote methods to get plural strings. */
-  private pluralStringProxy_ = PluralStringProxyImpl.getInstance();
-
   constructor() {
     super();
     this.createElement_();
@@ -377,8 +372,7 @@ export class DisplayPanel extends HTMLElement {
           `generateWarningMessage_ expected errors > 0, but got ${errors}.`);
       return '';
     }
-    return this.pluralStringProxy_.getPluralString(
-        'ERROR_PROGRESS_SUMMARY', errors);
+    return getPluralString('ERROR_PROGRESS_SUMMARY', errors);
   }
 
   /**
@@ -392,8 +386,7 @@ export class DisplayPanel extends HTMLElement {
           warnings}.`);
       return '';
     }
-    return this.pluralStringProxy_.getPluralString(
-        'WARNING_PROGRESS_SUMMARY', warnings);
+    return getPluralString('WARNING_PROGRESS_SUMMARY', warnings);
   }
 }