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;
PK