diff options
Diffstat (limited to 'devtools/client/netmonitor/src/components/DropHarHandler.js')
-rw-r--r-- | devtools/client/netmonitor/src/components/DropHarHandler.js | 141 |
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; |