| .eslintrc.mjs |
|
313 |
- |
| Accordion.css |
Accordion |
2693 |
- |
| Accordion.js |
Add initial data to the `state.opened` map.
This happens only on initial mount of the accordion.
|
6863 |
89 % |
| AppErrorBoundary.css |
Base styles (common to most error boundaries) |
2368 |
- |
| AppErrorBoundary.js |
Error boundary that wraps around the a given component.
|
9782 |
85 % |
| FileSearchBar.css |
Display an outline on the container when the child input is focused. If another element
is focused (e.g. a button), we only want the outline on that element |
901 |
- |
| FileSearchBar.js |
|
9713 |
82 % |
| Frame.js |
Get the tooltip message.
@param {string|undefined} messageSource
@param {string} url
@returns {string}
|
12831 |
92 % |
| HSplitBox.js |
|
4790 |
89 % |
| List.css |
List |
856 |
- |
| List.js |
Makes sure that none of the focusable elements inside the list item container are
tabbable if the list item is not active. If the list item is active and focus is
outside its container, focus on the first focusable element inside.
|
9498 |
87 % |
| MdnLink.css |
Learn more links |
1111 |
- |
| MdnLink.js |
|
918 |
85 % |
| menu |
|
|
84 % |
| moz.build |
|
925 |
- |
| NotificationBox.css |
Layout |
3227 |
- |
| NotificationBox.js |
This component represents Notification Box - HTML alternative for
<xul:notificationbox> binding.
See also MDN for more info about <xul:notificationbox>:
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/notificationbox
This component can maintain its own state (list of notifications)
as well as consume list of notifications provided as a prop
(coming e.g. from Redux store).
|
12582 |
91 % |
| object-inspector |
|
|
92 % |
| reps |
|
|
86 % |
| SearchBox.js |
global window |
6942 |
88 % |
| SearchBoxAutocompletePopup.js |
autocompleteProvider takes search-box's entire input text as `filter` argument
ie. "is:cached pr"
returned value is array of objects like below
[{value: "is:cached protocol", displayValue: "protocol"}[, ...]]
`value` is used to update the search-box input box for given item
`displayValue` is used to render the autocomplete list
|
4424 |
95 % |
| SearchModifiers.css |
Search Modifiers |
1584 |
- |
| SearchModifiers.js |
|
2352 |
88 % |
| Sidebar.js |
|
2534 |
73 % |
| SidebarToggle.css |
Rotate button icon 90deg if the toolbox container is
in vertical mode (sidebar displayed under the main panel) |
1090 |
- |
| SidebarToggle.js |
Sidebar toggle button. This button is used to exapand
and collapse Sidebar.
|
2281 |
84 % |
| SmartTrace.css |
SmartTrace Component
Styles for React component at `devtools/client/shared/components/SmartTrace.js`
|
3840 |
- |
| SmartTrace.js |
|
10731 |
89 % |
| splitter |
|
|
83 % |
| StackTrace.js |
|
2476 |
89 % |
| tabs |
|
|
87 % |
| test |
|
|
- |
| throttling |
|
|
98 % |
| tree |
|
|
83 % |
| Tree.css |
We can remove the outline since we do add our own focus style on nodes |
2238 |
- |
| Tree.js |
An arrow that displays whether its node is expanded (▼) or collapsed
(▶). When its node has no children, it is hidden.
|
30574 |
77 % |
| VirtualizedTree.js |
A fast, generic, expandable and collapsible tree component.
This tree component is fast: it can handle trees with *many* items. It only
renders the subset of those items which are visible in the viewport. It's
been battle tested on huge trees in the memory panel. We've optimized tree
traversal and rendering, even in the presence of cross-compartment wrappers.
This tree component doesn't make any assumptions about the structure of your
tree data. Whether children are computed on demand, or stored in an array in
the parent's `_children` property, it doesn't matter. We only require the
implementation of `getChildren`, `getRoots`, `getParent`, and `isExpanded`
functions.
This tree component is well tested and reliable. See
devtools/client/shared/components/test/mochitest/test_tree_* and its usage in
the performance and memory panels.
This tree component doesn't make any assumptions about how to render items in
the tree. You provide a `renderItem` function, and this component will ensure
that only those items whose parents are expanded and which are visible in the
viewport are rendered. The `renderItem` function could render the items as a
"traditional" tree or as rows in a table or anything else. It doesn't
restrict you to only one certain kind of tree.
The only requirement is that every item in the tree render as the same
height. This is required in order to compute which items are visible in the
viewport in constant time.
### Example Usage
Suppose we have some tree data where each item has this form:
{
id: Number,
label: String,
parent: Item or null,
children: Array of child items,
expanded: bool,
}
Here is how we could render that data with this component:
class MyTree extends Component {
static get propTypes() {
// The root item of the tree, with the form described above.
return {
root: PropTypes.object.isRequired
};
}
render() {
return Tree({
itemHeight: 20, // px
getRoots: () => [this.props.root],
getParent: item => item.parent,
getChildren: item => item.children,
getKey: item => item.id,
isExpanded: item => item.expanded,
renderItem: (item, depth, isFocused, arrow, isExpanded) => {
let className = "my-tree-item";
if (isFocused) {
className += " focused";
}
return dom.div(
{
className,
// Apply 10px nesting per expansion depth.
style: { marginLeft: depth * 10 + "px" }
},
// Here is the expando arrow so users can toggle expansion and
// collapse state.
arrow,
// And here is the label for this item.
dom.span({ className: "my-tree-item-label" }, item.label)
);
},
onExpand: item => dispatchExpandActionToRedux(item),
onCollapse: item => dispatchCollapseActionToRedux(item),
});
}
}
|
30778 |
89 % |