[DevTools] Add buttons for HAR import and export

Screenshots:
https://bugs.chromium.org/p/chromium/issues/detail?id=904585#c2

Bug: 904585
Change-Id: I8e0eea42cb94d69c92c6a013bbdc2807b6e94a14
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1333108
Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/master@{#661557}
diff --git a/third_party/blink/renderer/devtools/front_end/network/NetworkLogView.js b/third_party/blink/renderer/devtools/front_end/network/NetworkLogView.js
index c2cc71c..81b20b2 100644
--- a/third_party/blink/renderer/devtools/front_end/network/NetworkLogView.js
+++ b/third_party/blink/renderer/devtools/front_end/network/NetworkLogView.js
@@ -453,13 +453,13 @@
     if (entry.isDirectory)
       return;
 
-    entry.file(this._onLoadFromFile.bind(this));
+    entry.file(this.onLoadFromFile.bind(this));
   }
 
   /**
    * @param {!File} file
    */
-  async _onLoadFromFile(file) {
+  async onLoadFromFile(file) {
     const outputStream = new Common.StringOutputStream();
     const reader = new Bindings.ChunkedFileReader(file, /* chunkSize */ 10000000);
     const success = await reader.read(outputStream);
@@ -1212,7 +1212,7 @@
     }
     footerSection.appendItem(Common.UIString('Copy all as HAR'), this._copyAll.bind(this));
 
-    contextMenu.saveSection().appendItem(Common.UIString('Save all as HAR with content'), this._exportAll.bind(this));
+    contextMenu.saveSection().appendItem(ls`Save all as HAR with content`, this.exportAll.bind(this));
 
     contextMenu.editSection().appendItem(Common.UIString('Clear browser cache'), this._clearBrowserCache.bind(this));
     contextMenu.editSection().appendItem(
@@ -1325,7 +1325,7 @@
     InspectorFrontendHost.copyText(commands);
   }
 
-  async _exportAll() {
+  async exportAll() {
     const url = SDK.targetManager.mainTarget().inspectedURL();
     const parsedURL = url.asParsedURL();
     const filename = parsedURL ? parsedURL.host : 'network-log';
diff --git a/third_party/blink/renderer/devtools/front_end/network/NetworkPanel.js b/third_party/blink/renderer/devtools/front_end/network/NetworkPanel.js
index 6bbf1a8..6e8a942 100644
--- a/third_party/blink/renderer/devtools/front_end/network/NetworkPanel.js
+++ b/third_party/blink/renderer/devtools/front_end/network/NetworkPanel.js
@@ -118,6 +118,10 @@
         new Network.NetworkLogView(this._filterBar, this._progressBarContainer, this._networkLogLargeRowsSetting);
     this._splitWidget.setSidebarWidget(this._networkLogView);
 
+    this._fileSelectorElement =
+        UI.createFileSelectorElement(this._networkLogView.onLoadFromFile.bind(this._networkLogView));
+    panel.element.appendChild(this._fileSelectorElement);
+
     this._detailsWidget = new UI.VBox();
     this._detailsWidget.element.classList.add('network-details-view');
     this._splitWidget.setMainWidget(this._detailsWidget);
@@ -238,6 +242,14 @@
         new UI.ToolbarSettingCheckbox(Common.moduleSetting('network.group-by-frame'), '', ls`Group by frame`));
     settingsToolbarRight.appendToolbarItem(
         new UI.ToolbarSettingCheckbox(this._networkRecordFilmStripSetting, '', ls`Capture screenshots`));
+
+    this._panelToolbar.appendSeparator();
+    const importHarButton = new UI.ToolbarButton(ls`Import HAR file...`, 'largeicon-load');
+    importHarButton.addEventListener(UI.ToolbarButton.Events.Click, () => this._fileSelectorElement.click(), this);
+    this._panelToolbar.appendToolbarItem(importHarButton);
+    const exportHarButton = new UI.ToolbarButton(ls`Export all as HAR with content...`, 'largeicon-download');
+    exportHarButton.addEventListener(UI.ToolbarButton.Events.Click, () => this._networkLogView.exportAll(), this);
+    this._panelToolbar.appendToolbarItem(exportHarButton);
   }
 
   _updateSettingsPaneVisibility() {