[FilesTS] Convert FilesFormatDialog to TS

Bug: b/289003444
Change-Id: I315b8a4855201d09f3a9a11358f9e3a2ecdc43d4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4942575
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Ben Reich <benreich@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1211872}

ui/file_manager/file_manager/common/js/files_app_entry_types.js

@@ -195,6 +195,10 @@ export class EntryList {
     return this.label_;
   }
 
+  get devicePath() {
+    return this.devicePath_;
+  }
+
   get isNativeType() {
     return false;
   }

ui/file_manager/file_manager/externs/polymer_elements/files_format_dialog.js

@@ -0,0 +1,7 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+class FilesFormatDialog extends HTMLElement {
+  showEraseModal(root) {}
+}

ui/file_manager/file_manager/foreground/elements/BUILD.gn

@@ -35,7 +35,6 @@ js_type_check("closure_compile_jsmodules") {
                     "browser_resolver_prefix_replacements=\"chrome-extension://pmfjbimdmchhbnneeidfognadeopoehp/=./image_loader/\"",
                   ]
   deps = [
-    ":files_format_dialog",
     ":files_spinner",
     ":xf_button",
     ":xf_circular_progress",
@@ -47,7 +46,6 @@ js_type_check("closure_compile_jsmodules") {
 html_to_js("web_components") {
   visibility += [ "//ui/file_manager/*" ]
   js_files = [
-    "files_format_dialog.js",
     "files_spinner.js",
     "icons.js",
     "xf_button.js",
@@ -57,30 +55,13 @@ html_to_js("web_components") {
   ]
 }
 
-js_library("files_format_dialog") {
-  deps = [
-    "//ash/webui/common/resources:i18n_behavior",
-    "//third_party/polymer/v3_0/components-chromium/iron-icon:iron-icon",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-    "//ui/file_manager/file_manager/common/js:files_app_entry_types",
-    "//ui/file_manager/file_manager/common/js:util",
-    "//ui/file_manager/file_manager/common/js:volume_manager_types",
-    "//ui/file_manager/file_manager/externs:volume_info",
-    "//ui/file_manager/file_manager/foreground/js:file_rename",
-  ]
-  externs_list = [
-    "//ui/webui/resources/cr_elements/cr_button/cr_button_externs.js",
-    "//ui/webui/resources/cr_elements/cr_dialog/cr_dialog_externs.js",
-    "//ui/webui/resources/cr_elements/cr_input/cr_input_externs.js",
-  ]
-}
-
 js_library("files_spinner") {
 }
 
 html_to_wrapper("polymer_elements") {
   visibility += [ "//ui/file_manager/*" ]
   in_files = [
+    "files_format_dialog.html",
     "files_metadata_box.html",
     "files_toast.html",
     "files_tooltip.html",

ui/file_manager/file_manager/foreground/elements/files_format_dialog.html

@@ -129,25 +129,25 @@
   }
 </style>
 
-<cr-dialog id="dialog" close-text="[[i18n('CLOSE_LABEL')]]"
+<cr-dialog id="dialog" close-text="$i18n{CLOSE_LABEL}"
            single-partition-format$="[[getSinglePartitionFormat()]]">
   <div slot="title">
-    [[i18n('FORMAT_DIALOG_TITLE', title)]]
+    [[getStrf('FORMAT_DIALOG_TITLE', title)]]
   </div>
   <div slot="body">
-    <div>[[getDialogMessage_(isErase_)]]</div>
-    <div id="warning-container" hidden="[[!space_used_]]" role="alert">
+    <div>[[getDialogMessage(isErase_)]]</div>
+    <div id="warning-container" hidden="[[!spaceUsed_]]" role="alert">
       <iron-icon id="warning-icon" icon="cr:warning"></iron-icon>
       <div id="warning-message">
-        [[i18n('FORMAT_DIALOG_DELETE_WARNING', space_used_)]]
+        [[getStrf('FORMAT_DIALOG_DELETE_WARNING', spaceUsed_)]]
       </div>
     </div>
-    <cr-input label="[[i18n('FORMAT_DIALOG_DRIVE_NAME_LABEL')]]"
+    <cr-input label="$i18n{FORMAT_DIALOG_DRIVE_NAME_LABEL}"
         id="label" value="{{label_}}" auto-validate="true">
     </cr-input>
     <div id="disk-format">
       <label id="format-type-label" class="cr-form-field-label">
-        [[i18n('FORMAT_DIALOG_FORMAT_LABEL')]]
+        $i18n{FORMAT_DIALOG_FORMAT_LABEL}
       </label>
       <select class="md-select" aria-labelledby="format-type-label"
           value="{{formatType_::change}}">
@@ -158,12 +158,12 @@
     </div>
   </div>
   <div slot="button-container">
-    <cr-button class="cancel-button" on-click="cancel_" id="cancel">
-      [[i18n('CANCEL_LABEL')]]
+    <cr-button class="cancel-button" on-click="cancel" id="cancel">
+      $i18n{CANCEL_LABEL}
     </cr-button>
-    <cr-button class="action-button" on-click="format_"
+    <cr-button class="action-button" on-click="format"
         id="format-button">
-      [[getConfirmLabel_(isErase_)]]
+      [[getConfirmLabel(isErase_)]]
     </cr-button>
   </div>
 </cr-dialog>