devtools/client/shared/components

firefox-main/devtools/client/shared/components

	Name	Description	Size	Coverage
	.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.	11647	87 %
	CloseButton.css	inherit the button's text color for the icon's color	755	-
	CloseButton.js		1067	100 %
	DebuggerImage.css	use background-color for the icon color, and mask-image for its shape	6334	-
	DebuggerImage.js		1172	82 %
	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	976	-
	FileSearchBar.js		9907	83 %
	Frame.js	Get the tooltip message. @param {string\|undefined} messageSource @param {string} url @returns {string}	12831	92 %
	HSplitBox.js		4790	89 %
	images			-
	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	hide .devtools-button's ::before icon as we put ours in ::after	1345	-
	MdnLink.js		1172	100 %
	menu			84 %
	moz.build		993	-
	NotificationBox.css	Layout	3452	-
	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).	12825	93 %
	object-inspector			95 %
	reps			87 %
	SearchBox.js	global window	6927	87 %
	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 %
	SearchInput.css	Don't show the box-shadow focus indicator, only keep the outline, otherwise the shadow overlap the first item in the result list	4865	-
	SearchInput.js		9026	84 %
	SearchModifiers.css	Search Modifiers	1611	-
	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`	3849	-
	SmartTrace.js		10731	89 %
	splitter			87 %
	StackTrace.js		2476	89 %
	tabs			87 %
<1%	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.	31463	78 %
	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), }); } }	31671	89 %

Revision control

Other Tools