Name Description Size
AbstractTreeItem.jsm A very generic and low-level tree view implementation. It is not intended to be used alone, but as a base class that you can extend to build your own custom implementation. Language: - An "item" is an instance of an AbstractTreeItem. - An "element" or "node" is a Node. The following events are emitted by this tree, always from the root item, with the first argument pointing to the affected child item: - "expand": when an item is expanded in the tree - "collapse": when an item is collapsed in the tree - "focus": when an item is selected in the tree For example, you can extend this abstract class like this: function MyCustomTreeItem(dataSrc, properties) { AbstractTreeItem.call(this, properties); this.itemDataSrc = dataSrc; } MyCustomTreeItem.prototype = extend(AbstractTreeItem.prototype, { _displaySelf: function(document, arrowNode) { let node = document.createXULElement("hbox"); ... // Append the provided arrow node wherever you want. node.appendChild(arrowNode); ... // Use `this.itemDataSrc` to customize the tree item and // `this.level` to calculate the indentation. node.style.marginInlineStart = (this.level * 10) + "px"; node.appendChild(document.createTextNode(this.itemDataSrc.label)); ... return node; }, _populateSelf: function(children) { ... // Use `this.itemDataSrc` to get the data source for the child items. let someChildDataSrc = this.itemDataSrc.children[0]; ... children.push(new MyCustomTreeItem(someChildDataSrc, { parent: this, level: this.level + 1 })); ... } }); And then you could use it like this: let dataSrc = { label: "root", children: [{ label: "foo", children: [] }, { label: "bar", children: [{ label: "baz", children: [] }] }] }; let root = new MyCustomTreeItem(dataSrc, { parent: null }); root.attachTo(Node); root.expand(); The following tree view will be generated (after expanding all nodes): ▼ root ▶ foo ▼ bar ▶ baz The way the data source is implemented is completely up to you. There's no assumptions made and you can use it however you like inside the `_displaySelf` and `populateSelf` methods. If you need to add children to a node at a later date, you just need to modify the data source: dataSrc[...path-to-foo...].children.push({ label: "lazily-added-node" children: [] }); The existing tree view will be modified like so (after expanding `foo`): ▼ root ▼ foo ▶ lazily-added-node ▼ bar ▶ baz Everything else is taken care of automagically! @param AbstractTreeItem parent The parent tree item. Should be null for root items. @param number level The indentation level in the tree. The root item is at level 0. 18312
Chart.js A factory for creating charts. Example usage: let myChart = Chart.Pie(document, { ... }); 16454
CubicBezierPresets.js 2219
CubicBezierWidget.js CubicBezier data structure helper Accepts an array of coordinates and exposes a few useful getters @param {Array} coordinates i.e. [.42, 0, .58, 1] 26781
FilterWidget.js This is a CSS Filter Editor widget used for Rule View's filter swatches 31855
FlameGraph.js A flamegraph visualization. This implementation is responsable only with drawing the graph, using a data source consisting of rectangles and their corresponding widths. Example usage: let graph = new FlameGraph(node); graph.once("ready", () => { let data = FlameGraphUtils.createFlameGraphDataFromThread(thread); let bounds = { startTime, endTime }; graph.setData({ data, bounds }); }); Data source format: [ { color: "string", blocks: [ { x: number, y: number, width: number, height: number, text: "string" }, ... ] }, { color: "string", blocks: [...] }, ... { color: "string", blocks: [...] } ] Use `FlameGraphUtils` to convert profiler data (or any other data source) into a drawable format. @param Node parent The parent node holding the graph. @param number sharpness [optional] Defaults to the current device pixel ratio. 48275
Graphs.js Small data primitives for all graphs. 44493
GraphsWorker.js eslint-env worker 3274
LineGraphWidget.js A basic line graph, plotting values on a curve and adding helper lines and tooltips for maximum, average and minimum values. @see AbstractCanvasGraph for emitted events and other options. Example usage: let graph = new LineGraphWidget(node, "units"); graph.once("ready", () => { graph.setData(src); }); Data source format: [ { delta: x1, value: y1 }, { delta: x2, value: y2 }, ... { delta: xn, value: yn } ] where each item in the array represents a point in the graph. @param Node parent The parent node holding the graph. @param object options [optional] `metric`: The metric displayed in the graph, e.g. "fps" or "bananas". `min`: Boolean whether to show the min tooltip/gutter/line (default: true) `max`: Boolean whether to show the max tooltip/gutter/line (default: true) `avg`: Boolean whether to show the avg tooltip/gutter/line (default: true) 14339
MountainGraphWidget.js A mountain graph, plotting sets of values as line graphs. @see AbstractCanvasGraph for emitted events and other options. Example usage: let graph = new MountainGraphWidget(node); graph.format = ...; graph.once("ready", () => { graph.setData(src); }); The `graph.format` traits are mandatory and will determine how each section of the moutain will be styled: [ { color: "#f00", ... }, { color: "#0f0", ... }, ... { color: "#00f", ... } ] Data source format: [ { delta: x1, values: [y11, y12, ... y1n] }, { delta: x2, values: [y21, y22, ... y2n] }, ... { delta: xm, values: [ym1, ym2, ... ymn] } ] where the [ymn] values is assumed to aready be normalized from [0..1]. @param Node parent The parent node holding the graph. 6060
ShapesInContextEditor.js The ShapesInContextEditor: - communicates with the ShapesHighlighter actor from the server; - listens to events for shape change and hover point coming from the shape-highlighter; - writes shape value changes to the CSS declaration it was triggered from; - synchronises highlighting coordinate points on mouse over between the shapes highlighter and the shape value shown in the Rule view. It is instantiated once in HighlightersOverlay by calls to .getInContextEditor(). 12040
Spectrum.js Spectrum creates a color picker widget in any container you give it. Simple usage example: const {Spectrum} = require("devtools/client/shared/widgets/Spectrum"); let s = new Spectrum(containerElement, [255, 126, 255, 1]); s.on("changed", (rgba, color) => { console.log("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")"); }); s.show(); s.destroy(); Note that the color picker is hidden by default and you need to call show to make it appear. This 2 stages initialization helps in cases you are creating the color picker in a parent element that hasn't been appended anywhere yet or that is hidden. Calling show() when the parent element is appended and visible will allow spectrum to correctly initialize its various parts. Fires the following events: - changed : When the user changes the current color 22672
TableWidget.js A table widget with various features like resizble/toggleable columns, sorting, keyboard navigation etc. @param {Node} node The container element for the table widget. @param {object} options - initialColumns: map of key vs display name for initial columns of the table. See @setupColumns for more info. - uniqueId: the column which will be the unique identifier of each entry in the table. Default: name. - wrapTextInElements: Don't ever use 'value' attribute on labels. Default: false. - emptyText: text to display when no entries in the table to display. - highlightUpdated: true to highlight the changed/added row. - removableColumns: Whether columns are removeable. If set to false, the context menu in the headers will not appear. - firstColumn: key of the first column that should appear. - cellContextMenuId: ID of a <menupopup> element to be set as a context menu of every cell. 55388
TreeWidget.js A tree widget with keyboard navigation and collapsable structure. @param {Node} node The container element for the tree widget. @param {Object} options - emptyText {string}: text to display when no entries in the table. - defaultType {string}: The default type of the tree items. For ex. 'js' - sorted {boolean}: Defaults to true. If true, tree items are kept in lexical order. If false, items will be kept in insertion order. - contextMenuId {string}: ID of context menu to be displayed on tree items. 18326
cubic-bezier.css 4736
filter-widget.css 4983
graphs-frame.xhtml 789
moz.build 694
spectrum.css 7197
tooltip 13
view-helpers.js Helper for draining a rapid succession of events and invoking a callback once everything settles down. @param string id A string identifier for the named timeout. @param number wait The amount of milliseconds to wait after no more events are fired. @param function callback Invoked when no more events are fired after the specified time. 12623
widgets.css 2268