1 files changed, 141 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/components/DropHarHandler.js b/devtools/client/netmonitor/src/components/DropHarHandler.js
new file mode 100644
index 0000000000..6c51a6b80e
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/DropHarHandler.js
@@ -0,0 +1,141 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  findDOMNode,
+} = require("resource://devtools/client/shared/vendor/react-dom.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+
+loader.lazyRequireGetter(
+  this,
+  "HarMenuUtils",
+  "resource://devtools/client/netmonitor/src/har/har-menu-utils.js",
+  true
+);
+
+const { div } = dom;
+
+const DROP_HAR_FILES = L10N.getStr("netmonitor.label.dropHarFiles");
+
+/**
+ * Helper component responsible for handling and  importing
+ * dropped *.har files.
+ */
+class DropHarHandler extends Component {
+  static get propTypes() {
+    return {
+      // List of actions passed to HAR importer.
+      actions: PropTypes.object.isRequired,
+      // Child component.
+      children: PropTypes.element.isRequired,
+      // Callback for opening split console.
+      openSplitConsole: PropTypes.func,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    // Drag and drop event handlers.
+    this.onDragEnter = this.onDragEnter.bind(this);
+    this.onDragOver = this.onDragOver.bind(this);
+    this.onDragLeave = this.onDragLeave.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+  }
+
+  // Drag Events
+
+  onDragEnter(event) {
+    event.preventDefault();
+    if (event.dataTransfer.files.length === 0) {
+      return;
+    }
+
+    startDragging(findDOMNode(this));
+  }
+
+  onDragLeave(event) {
+    const node = findDOMNode(this);
+    if (!node.contains(event.relatedTarget)) {
+      stopDragging(node);
+    }
+  }
+
+  onDragOver(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  }
+
+  onDrop(event) {
+    event.preventDefault();
+    stopDragging(findDOMNode(this));
+
+    const { files } = event.dataTransfer;
+    if (!files) {
+      return;
+    }
+
+    const { actions, openSplitConsole } = this.props;
+
+    // Import only the first dragged file for now
+    // See also:
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1438792
+    if (files.length) {
+      const file = files[0];
+      readFile(file).then(har => {
+        if (har) {
+          HarMenuUtils.appendPreview(har, actions, openSplitConsole);
+        }
+      });
+    }
+  }
+
+  // Rendering
+
+  render() {
+    return div(
+      {
+        onDragEnter: this.onDragEnter,
+        onDragOver: this.onDragOver,
+        onDragLeave: this.onDragLeave,
+        onDrop: this.onDrop,
+      },
+      this.props.children,
+      div({ className: "dropHarFiles" }, div({}, DROP_HAR_FILES))
+    );
+  }
+}
+
+// Helpers
+
+function readFile(file) {
+  return new Promise(resolve => {
+    const fileReader = new FileReader();
+    fileReader.onloadend = () => {
+      resolve(fileReader.result);
+    };
+    fileReader.readAsText(file);
+  });
+}
+
+function startDragging(node) {
+  node.setAttribute("dragging", "true");
+}
+
+function stopDragging(node) {
+  node.removeAttribute("dragging");
+}
+
+// Exports
+
+module.exports = DropHarHandler;