if(typeof exports === 'object' && typeof module === 'object')

module.exports = factory(require("devtools/client/shared/vendor/react-prop-types"), require("devtools/client/shared/vendor/react-dom-factories"), require("devtools/client/shared/vendor/react"), require("Services"), require("devtools/shared/flags"), require("devtools/client/shared/vendor/react-dom"), require("devtools/client/shared/vendor/lodash"));

else if(typeof define === 'function' && define.amd)

define(["devtools/client/shared/vendor/react-prop-types", "devtools/client/shared/vendor/react-dom-factories", "devtools/client/shared/vendor/react", "Services", "devtools/shared/flags", "devtools/client/shared/vendor/react-dom", "devtools/client/shared/vendor/lodash"], factory);

else {

var a = typeof exports === 'object' ? factory(require("devtools/client/shared/vendor/react-prop-types"), require("devtools/client/shared/vendor/react-dom-factories"), require("devtools/client/shared/vendor/react"), require("Services"), require("devtools/shared/flags"), require("devtools/client/shared/vendor/react-dom"), require("devtools/client/shared/vendor/lodash")) : factory(root["devtools/client/shared/vendor/react-prop-types"], root["devtools/client/shared/vendor/react-dom-factories"], root["devtools/client/shared/vendor/react"], root["Services"], root["devtools/shared/flags"], root["devtools/client/shared/vendor/react-dom"], root["devtools/client/shared/vendor/lodash"]);

for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];

}

/******/ // Check if module is in cache

/******/ if(installedModules[moduleId]) {

/******/ return installedModules[moduleId].exports;

/******/ }

/******/ // Create a new module (and put it into the cache)

/******/ var module = installedModules[moduleId] = {

/******/ i: moduleId,

/******/ l: false,

/******/ exports: {}

/******/ };

/******/ // Execute the module function

/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ // Flag the module as loaded

/******/ module.l = true;

/******/ // Return the exports of the module

/******/ return module.exports;

/******/ if(!__webpack_require__.o(exports, name)) {

/******/ Object.defineProperty(exports, name, {

/******/ configurable: false,

/******/ enumerable: true,

/******/ get: getter

/******/ });

/******/ }

/******/ var getter = module && module.__esModule ?

/******/ function getDefault() { return module['default']; } :

/******/ function getModuleExports() { return module; };

/******/ __webpack_require__.d(getter, 'a', getter);

/******/ return getter;

if (!isNode() && isBrowser()) {

const href = window.location ? window.location.href : "";

return href.match(/^file:/) || href.match(/localhost:/);

}

return "production" != "production";

static get propTypes() {

return {

expanded: _propTypes2.default.bool

};

}

shouldComponentUpdate(nextProps, nextState) {

return this.props.expanded !== nextProps.expanded;

}

render() {

const { expanded } = this.props;

const classNames = ["arrow"];

if (expanded) {

classNames.push("expanded");

}

return _reactDomFactories2.default.button({

className: classNames.join(" ")

});

}

static get propTypes() {

return {

id: _propTypes2.default.any.isRequired,

index: _propTypes2.default.number.isRequired,

depth: _propTypes2.default.number.isRequired,

focused: _propTypes2.default.bool.isRequired,

active: _propTypes2.default.bool.isRequired,

expanded: _propTypes2.default.bool.isRequired,

item: _propTypes2.default.any.isRequired,

isExpandable: _propTypes2.default.bool.isRequired,

onClick: _propTypes2.default.func,

shouldItemUpdate: _propTypes2.default.func,

renderItem: _propTypes2.default.func.isRequired

};

}

constructor(props) {

super(props);

this.treeNodeRef = _react2.default.createRef();

this._onKeyDown = this._onKeyDown.bind(this);

}

componentDidMount() {

// Make sure that none of the focusable elements inside the tree node

// container are tabbable if the tree node is not active. If the tree node

// is active and focus is outside its container, focus on the first

// focusable element inside.

const elms = this.getFocusableElements();

if (this.props.active) {

if (elms.length > 0 && !elms.includes(document.activeElement)) {

elms[0].focus();

}

} else {

elms.forEach(elm => elm.setAttribute("tabindex", "-1"));

}

}

shouldComponentUpdate(nextProps) {

return this.props.item !== nextProps.item || this.props.shouldItemUpdate && this.props.shouldItemUpdate(this.props.item, nextProps.item) || this.props.focused !== nextProps.focused || this.props.expanded !== nextProps.expanded;

}

/**

getFocusableElements() {

return this.treeNodeRef.current ? Array.from(this.treeNodeRef.current.querySelectorAll(FOCUSABLE_SELECTOR)) : [];

}

/**

_wrapMoveFocus(current, back) {

const elms = this.getFocusableElements();

let next;

if (elms.length === 0) {

return false;

}

if (back) {

if (elms.indexOf(current) === 0) {

next = elms[elms.length - 1];

next.focus();

}

} else if (elms.indexOf(current) === elms.length - 1) {

next = elms[0];

next.focus();

}

return !!next;

}

_onKeyDown(e) {

const { target, key, shiftKey } = e;

if (key !== "Tab") {

return;

}

const focusMoved = this._wrapMoveFocus(target, shiftKey);

if (focusMoved) {

// Focus was moved to the begining/end of the list, so we need to prevent

// the default focus change that would happen here.

e.preventDefault();

}

e.stopPropagation();

}

render() {

const {

depth,

id,

item,

focused,

active,

expanded,

renderItem,

isExpandable

} = this.props;

const arrow = isExpandable ? ArrowExpanderFactory({

item,

expanded

}) : null;

let ariaExpanded;

if (this.props.isExpandable) {

ariaExpanded = false;

}

if (this.props.expanded) {

ariaExpanded = true;

}

const indents = Array.from({ length: depth }, (_, i) => {

if (i == depth - 1) {

return treeLastIndent;

}

return treeIndent;

});

const items = indents.concat(renderItem(item, depth, focused, arrow, expanded));

return _reactDomFactories2.default.div({

id,

className: `tree-node${focused ? " focused" : ""}${active ? " active" : ""}`,

onClick: this.props.onClick,

onKeyDownCapture: active ? this._onKeyDown : null,

role: "treeitem",

ref: this.treeNodeRef,

"aria-level": depth + 1,

"aria-expanded": ariaExpanded,

"data-expandable": this.props.isExpandable

}, ...items);

}

let animationId = null;

let argsToPass = null;

return function (...args) {

argsToPass = args;

if (animationId !== null) {

return;

}

animationId = requestAnimationFrame(() => {

fn.call(this, ...argsToPass);

animationId = null;

argsToPass = null;

});

};

static get propTypes() {

return {

// Required props

// A function to get an item's parent, or null if it is a root.

//

// Type: getParent(item: Item) -> Maybe<Item>

//

// Example:

//

// // The parent of this item is stored in its `parent` property.

// getParent: item => item.parent

getParent: _propTypes2.default.func.isRequired,

// A function to get an item's children.

//

// Type: getChildren(item: Item) -> [Item]

//

// Example:

//

// // This item's children are stored in its `children` property.

// getChildren: item => item.children

getChildren: _propTypes2.default.func.isRequired,

// A function to check if the tree node for the item should be updated.

//

// Type: shouldItemUpdate(prevItem: Item, nextItem: Item) -> Boolean

//

// Example:

//

// // This item should be updated if it's type is a long string

// shouldItemUpdate: (prevItem, nextItem) =>

// nextItem.type === "longstring"

shouldItemUpdate: _propTypes2.default.func,

// A function which takes an item and ArrowExpander component instance and

// returns a component, or text, or anything else that React considers

// renderable.

//

// Type: renderItem(item: Item,

// depth: Number,

// isFocused: Boolean,

// arrow: ReactComponent,

// isExpanded: Boolean) -> ReactRenderable

//

// Example:

//

// renderItem: (item, depth, isFocused, arrow, isExpanded) => {

// let className = "my-tree-item";

// if (isFocused) {

// className += " focused";

// }

// return dom.div(

// {

// className,

// style: { marginLeft: depth * 10 + "px" }

// },

// arrow,

// dom.span({ className: "my-tree-item-label" }, item.label)

// );

// },

renderItem: _propTypes2.default.func.isRequired,

// A function which returns the roots of the tree (forest).

//

// Type: getRoots() -> [Item]

//

// Example:

//

// // In this case, we only have one top level, root item. You could

// // return multiple items if you have many top level items in your

// // tree.

// getRoots: () => [this.props.rootOfMyTree]

getRoots: _propTypes2.default.func.isRequired,

// A function to get a unique key for the given item. This helps speed up

// React's rendering a *TON*.

//

// Type: getKey(item: Item) -> String

//

// Example:

//

// getKey: item => `my-tree-item-${item.uniqueId}`

getKey: _propTypes2.default.func.isRequired,

// A function to get whether an item is expanded or not. If an item is not

// expanded, then it must be collapsed.

//

// Type: isExpanded(item: Item) -> Boolean

//

// Example:

//

// isExpanded: item => item.expanded,

isExpanded: _propTypes2.default.func.isRequired,

// Optional props

// The currently focused item, if any such item exists.

focused: _propTypes2.default.any,

// Handle when a new item is focused.

onFocus: _propTypes2.default.func,

// The depth to which we should automatically expand new items.

autoExpandDepth: _propTypes2.default.number,

// Should auto expand all new items or just the new items under the first

// root item.

autoExpandAll: _propTypes2.default.bool,

// Auto expand a node only if number of its children

// are less than autoExpandNodeChildrenLimit

autoExpandNodeChildrenLimit: _propTypes2.default.number,

// Note: the two properties below are mutually exclusive. Only one of the

// label properties is necessary.

// ID of an element whose textual content serves as an accessible label

// for a tree.

labelledby: _propTypes2.default.string,

// Accessibility label for a tree widget.

label: _propTypes2.default.string,

// Optional event handlers for when items are expanded or collapsed.

// Useful for dispatching redux events and updating application state,

// maybe lazily loading subtrees from a worker, etc.

//

// Type:

// onExpand(item: Item)

// onCollapse(item: Item)

//

// Example:

//

// onExpand: item => dispatchExpandActionToRedux(item)

onExpand: _propTypes2.default.func,

onCollapse: _propTypes2.default.func,

// The currently active (keyboard) item, if any such item exists.

active: _propTypes2.default.any,

// Optional event handler called with the current focused node when the

// Enter key is pressed. Can be useful to allow further keyboard actions

// within the tree node.

onActivate: _propTypes2.default.func,

isExpandable: _propTypes2.default.func,

// Additional classes to add to the root element.

className: _propTypes2.default.string,

// style object to be applied to the root element.

style: _propTypes2.default.object,

// Prevents blur when Tree loses focus

preventBlur: _propTypes2.default.bool

};

}

static get defaultProps() {

return {

autoExpandDepth: AUTO_EXPAND_DEPTH,

autoExpandAll: true

};

}

constructor(props) {

super(props);

this.state = {

seen: new Set()

};

this.treeRef = _react2.default.createRef();

this._onExpand = oncePerAnimationFrame(this._onExpand).bind(this);

this._onCollapse = oncePerAnimationFrame(this._onCollapse).bind(this);

this._focusPrevNode = oncePerAnimationFrame(this._focusPrevNode).bind(this);

this._focusNextNode = oncePerAnimationFrame(this._focusNextNode).bind(this);

this._focusParentNode = oncePerAnimationFrame(this._focusParentNode).bind(this);

this._focusFirstNode = oncePerAnimationFrame(this._focusFirstNode).bind(this);

this._focusLastNode = oncePerAnimationFrame(this._focusLastNode).bind(this);

this._autoExpand = this._autoExpand.bind(this);

this._preventArrowKeyScrolling = this._preventArrowKeyScrolling.bind(this);

this._preventEvent = this._preventEvent.bind(this);

this._dfs = this._dfs.bind(this);

this._dfsFromRoots = this._dfsFromRoots.bind(this);

this._focus = this._focus.bind(this);

this._activate = this._activate.bind(this);

this._scrollNodeIntoView = this._scrollNodeIntoView.bind(this);

this._onBlur = this._onBlur.bind(this);

this._onKeyDown = this._onKeyDown.bind(this);

this._nodeIsExpandable = this._nodeIsExpandable.bind(this);

}

componentDidMount() {

this._autoExpand();

if (this.props.focused) {

this._scrollNodeIntoView(this.props.focused);

}

}

componentWillReceiveProps(nextProps) {

this._autoExpand();

}

componentDidUpdate(prevProps, prevState) {

if (this.props.focused && prevProps.focused !== this.props.focused) {

this._scrollNodeIntoView(this.props.focused);

}

}

_autoExpand() {

const { autoExpandDepth, autoExpandNodeChildrenLimit } = this.props;

if (!autoExpandDepth) {

return;

}

// Automatically expand the first autoExpandDepth levels for new items. Do

// not use the usual DFS infrastructure because we don't want to ignore

// collapsed nodes.

const autoExpand = (item, currentDepth) => {

if (currentDepth >= autoExpandDepth || this.state.seen.has(item)) {

return;

}

const children = this.props.getChildren(item);

if (autoExpandNodeChildrenLimit && children.length > autoExpandNodeChildrenLimit) {

return;

}

this.props.onExpand(item);

this.state.seen.add(item);

const length = children.length;

for (let i = 0; i < length; i++) {

autoExpand(children[i], currentDepth + 1);

}

};

const roots = this.props.getRoots();

const length = roots.length;

if (this.props.autoExpandAll) {

for (let i = 0; i < length; i++) {

autoExpand(roots[i], 0);

}

} else if (length != 0) {

autoExpand(roots[0], 0);

}

}

_preventArrowKeyScrolling(e) {

switch (e.key) {

case "ArrowUp":

case "ArrowDown":

case "ArrowLeft":

case "ArrowRight":

this._preventEvent(e);

break;

}

}

_preventEvent(e) {

e.preventDefault();

e.stopPropagation();

if (e.nativeEvent) {

if (e.nativeEvent.preventDefault) {

e.nativeEvent.preventDefault();

}

if (e.nativeEvent.stopPropagation) {

e.nativeEvent.stopPropagation();

}

}

}

/**

_dfs(item, maxDepth = Infinity, traversal = [], _depth = 0) {

traversal.push({ item, depth: _depth });

if (!this.props.isExpanded(item)) {

return traversal;

}

const nextDepth = _depth + 1;

if (nextDepth > maxDepth) {

return traversal;

}

const children = this.props.getChildren(item);

const length = children.length;

for (let i = 0; i < length; i++) {

this._dfs(children[i], maxDepth, traversal, nextDepth);

}

return traversal;

}

/**

_dfsFromRoots(maxDepth = Infinity) {

const traversal = [];

const roots = this.props.getRoots();

const length = roots.length;

for (let i = 0; i < length; i++) {

this._dfs(roots[i], maxDepth, traversal);

}

return traversal;

}

/**

_onExpand(item, expandAllChildren) {

if (this.props.onExpand) {

this.props.onExpand(item);

if (expandAllChildren) {

const children = this._dfs(item);

const length = children.length;

for (let i = 0; i < length; i++) {

this.props.onExpand(children[i].item);

}

}

}

}

/**

_onCollapse(item) {

if (this.props.onCollapse) {

this.props.onCollapse(item);

}

}

/**

_focus(item, options = {}) {

const { preventAutoScroll } = options;

if (item && !preventAutoScroll) {

this._scrollNodeIntoView(item, options);

}

if (this.props.active != undefined) {

this._activate(undefined);

if (this.treeRef.current !== document.activeElement) {

this.treeRef.current.focus();

}

}

if (this.props.onFocus) {

this.props.onFocus(item);

}

}

/**

_activate(item) {

if (this.props.onActivate) {

this.props.onActivate(item);

}

}

/**

_scrollNodeIntoView(item, options = {}) {

if (item !== undefined) {

const treeElement = this.treeRef.current;

const element = document.getElementById(this.props.getKey(item));

if (element) {

const { top, bottom } = element.getBoundingClientRect();

const closestScrolledParent = node => {

if (node == null) {

return null;

}

if (node.scrollHeight > node.clientHeight) {

return node;

}

return closestScrolledParent(node.parentNode);

};

const scrolledParent = closestScrolledParent(treeElement);

const scrolledParentRect = scrolledParent ? scrolledParent.getBoundingClientRect() : null;

const isVisible = !scrolledParent || top >= scrolledParentRect.top && bottom <= scrolledParentRect.bottom;

if (!isVisible) {

const { alignTo } = options;

const scrollToTop = alignTo ? alignTo === "top" : !scrolledParentRect || top < scrolledParentRect.top;

element.scrollIntoView(scrollToTop);

}

}

}

}

/**

_onBlur(e) {

if (this.props.active != undefined) {

const { relatedTarget } = e;

if (!this.treeRef.current.contains(relatedTarget)) {

this._activate(undefined);

}

} else if (!this.props.preventBlur) {

this._focus(undefined);

}

}

/**

// eslint-disable-next-line complexity

_onKeyDown(e) {

if (this.props.focused == null) {

return;

}

// Allow parent nodes to use navigation arrows with modifiers.

if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) {