Name Description Size
SplitView.jsm this must be kept in sync with CSS (ie. splitview.css) 9285
WeakMapMap.js WeakMapMap is a weakmap collection dual-keyed using an object and a string. This is useful for keeping data compartmentalized e.g. grouped by tab. It's name comes from the internal structure which maps a WeakMap to a map, which contains the target data. Usage: const myWeakMapMap = new WeakMapMap(); const key = { randomObject: true }; myWeakMapMap.set(key, "text1", "Some value1"); myWeakMapMap.set(key, "text2", "Some value2"); myWeakMapMap.get(key, "text1"); // Returns "Some value1" myWeakMapMap.get(key, "text2"); // Returns "Some value2" myWeakMapMap.has(key, "text1"); // Returns true myWeakMapMap.has(key, "notakey"); // Returns false 2901
async-store-helper.js asyncStoreHelper wraps asyncStorage so that it is easy to define project specific properties. It is similar to PrefsHelper. e.g. const asyncStore = asyncStoreHelper("r", {a: "_a"}) asyncStore.a // => asyncStorage.getItem("r._a") asyncStore.a = 2 // => asyncStorage.setItem("r._a", 2) 1624
autocomplete-popup.js Autocomplete popup UI implementation. @constructor @param {Document} toolboxDoc The toolbox document to attach the autocomplete popup panel. @param {Object} options An object consiting any of the following options: - listId {String} The id for the list <UL> element. - position {String} The position for the tooltip ("top" or "bottom"). - useXulWrapper {Boolean} If the tooltip is hosted in a XUL document, use a XUL panel in order to use all the screen viewport available (defaults to false). - autoSelect {Boolean} Boolean to allow the first entry of the popup panel to be automatically selected when the popup shows. - onSelect {String} Callback called when the selected index is updated. - onClick {String} Callback called when the autocomplete popup receives a click event. The selectedIndex will already be updated if need be. - input {Element} Optional input element the popup will be bound to. If provided the event listeners for navigating the autocomplete list are going to be automatically added. 19842
browser-loader-mocks.js Retrieve a mocked module matching the provided uri, eg "resource://path/to/file.js". 2372
browser-loader.js Create a loader to be used in a browser environment. This evaluates modules in their own environment, but sets window (the normal global object) as the sandbox prototype, so when a variable is not defined it checks `window` before throwing an error. This makes all browser APIs available to modules by default, like a normal browser environment, but modules are still evaluated in their own scope. Another very important feature of this loader is that it *only* deals with modules loaded from under `baseURI`. Anything loaded outside of that path will still be loaded from the devtools loader, so all system modules are still shared and cached across instances. An exception to this is anything under `devtools/client/shared/{vendor/components}`, which is where shared libraries and React components live that should be evaluated in a browser environment. @param string baseURI Base path to load modules from. If null or undefined, only the shared vendor/components modules are loaded with the browser loader. @param Object window The window instance to evaluate modules within @param Boolean useOnlyShared If true, ignores `baseURI` and only loads the shared BROWSER_BASED_DIRS via BrowserLoader. @return Object An object with two properties: - loader: the Loader instance - require: a function to require modules with 9741
build 4
components 32
css-angle.js This module is used to convert between various angle units. Usage: let {angleUtils} = require("devtools/client/shared/css-angle"); let angle = new angleUtils.CssAngle("180deg"); angle.authored === "180deg" angle.valid === true angle.rad === "3,14rad" angle.grad === "200grad" angle.turn === "0.5turn" angle.toString() === "180deg"; // Outputs the angle value and its unit // Angle objects can be reused angle.newAngle("-1TURN") === "-1TURN"; // true 9329
curl.js Copyright (C) 2007, 2008 Apple Inc. All rights reserved. Copyright (C) 2008, 2009 Anthony Ricaud <> Copyright (C) 2011 Google Inc. All rights reserved. Copyright (C) 2009 Mozilla Foundation. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 15030
demangle.js Exposes a function that demangles function names. Can be found at: 277464
devices.js This is a catalog of common web-enabled devices and their properties, intended for (mobile) device emulation. The properties of a device are: - name: brand and model(s). - width: viewport width. - height: viewport height. - pixelRatio: ratio from viewport to physical screen pixels. - userAgent: UA string of the device's browser. - touch: whether it has a touch screen. - os: default OS, such as "ios", "fxos", "android". The device types are: ["phones", "tablets", "laptops", "televisions", "consoles", "watches"]. To propose new devices for the shared catalog, check out the repo at and file a pull request. You can easily add more devices to this catalog from your own code (e.g. an addon) like so: var myPhone = { name: "My Phone", ... }; require("devtools/client/shared/devices").addDevice(myPhone, "phones"); 4451
enum.js Create a simple enum-like object with keys mirrored to values from an array. This makes comparison to a specfic value simpler without having to repeat and mis-type the value. 566
events.js Prevent event default behaviour and stop its propagation. @param {Object} event Event or react synthetic event. 692
fluent-l10n 2
focus.js Simplied selector targetting elements that can receive the focus, full version at 2134
getjson.js Downloads and caches a JSON file from an URL given by a pref. @param {String} prefName The preference for the target URL @return {Promise} - Resolved with the JSON object in case of successful request or cache hit - Rejected with an error message in case of failure 2351
inplace-editor.js Basic use: let spanToEdit = document.getElementById("somespan"); editableField({ element: spanToEdit, done: function(value, commit, direction) { if (commit) { spanToEdit.textContent = value; } }, trigger: "dblclick" }); See editableField() for more options. 57581
key-shortcuts.js Helper to listen for keyboard events described in .properties file. let shortcuts = new KeyShortcuts({ window }); shortcuts.on("Ctrl+F", event => { // `event` is the KeyboardEvent which relates to the key shortcuts }); @param DOMWindow window The window object of the document to listen events from. @param DOMElement target Optional DOM Element on which we should listen events from. If omitted, we listen for all events fired on `window`. 8668
keycodes.js Keyboard handling is a mess. It would be good to use DOM L3 Keyboard events, however only Webkit supports them, and there isn't a shim on Modernizr: and when the code that uses this KeyEvent was written, nothing was clear, so instead, we're using this unmodern shim: See BUG 664991: keyboard handling should be updated to use DOM-L3 3272
link.js Retrieve the most recent chrome window. 2630 1633
node-attribute-parser.js This module contains a small element attribute value parser. It's primary goal is to extract link information from attribute values (like the href in <a href="/some/link.html"> for example). There are several types of linkable attribute values: - TYPE_URI: a URI (e.g. <a href="uri">). - TYPE_URI_LIST: a space separated list of URIs (e.g. <a ping="uri1 uri2">). - TYPE_IDREF: a reference to an other element in the same document via its id (e.g. <label for="input-id"> or <key command="command-id">). - TYPE_IDREF_LIST: a space separated list of IDREFs (e.g. <output for="id1 id2">). - TYPE_JS_RESOURCE_URI: a URI to a javascript resource that can be opened in the devtools (e.g. <script src="uri">). - TYPE_CSS_RESOURCE_URI: a URI to a css resource that can be opened in the devtools (e.g. <link href="uri">). parseAttribute is the parser entry function, exported on this module. 11730
options-view.js OptionsView constructor. Takes several options, all required: - branchName: The name of the prefs branch, like "devtools.debugger." - menupopup: The XUL `menupopup` item that contains the pref buttons. Fires an event, PREF_CHANGE_EVENT, with the preference name that changed as the second argument. Fires events on opening/closing the XUL panel (OPTIONS_SHOW_EVENT, OPTIONS_HIDDEN_EVENT) as the second argument in the listener, used for tests mostly. 6383
output-parser.js This module is used to process CSS text declarations and output DOM fragments (to be appended to panels in DevTools) for CSS values decorated with additional UI and functionality. For example: - attaching swatches for values instrumented with specialized tools: colors, timing functions (cubic-bezier), filters, shapes, display values (flex/grid), etc. - adding previews where possible (images, fonts, CSS transforms). - converting between color types on Shift+click on their swatches. Usage: const OutputParser = require("devtools/client/shared/output-parser"); const parser = new OutputParser(document, cssProperties); parser.parseCssProperty("color", "red"); // Returns document fragment. @param {Document} document Used to create DOM nodes. @param {Object} cssProperties Instance of CssProperties, an object which provides an interface for working with the database of supported CSS properties and values. Two items are of interest from this object: - supportsTypes - A function that returns a boolean when asked if a css property name supports a given css type. The function is executed like supportsType("color", "timing-function") - supportsCssColor4ColorFunction - A function for checking the supporting of css-color-4 color function. 61068
poller.js @constructor Poller Takes a function that is to be called on an interval, and can be turned on and off via methods to execute `fn` on the interval specified during `on`. If `fn` returns a promise, the polling waits for that promise to resolve before waiting the interval to call again. Specify the `wait` duration between polling here, and optionally an `immediate` boolean, indicating whether the function should be called immediately when toggling on. @param {function} fn @param {number} wait @param {boolean?} immediate 3007
prefs.js Shortcuts for lazily accessing and setting various preferences. Usage: let prefs = new Prefs("", { myIntPref: ["Int", ""], myCharPref: ["Char", ""], myJsonPref: ["Json", ""], myFloatPref: ["Float", ""] ... }); Get/set: prefs.myCharPref = "foo"; let aux = prefs.myCharPref; Observe: prefs.registerObserver(); prefs.on("pref-changed", (prefValue) => { ... }); @param string prefsRoot The root path to the required preferences branch. @param object prefsBlueprint An object containing { accessorName: [prefType, prefName] } keys. 5979
react-utils.js Create React factories for given arguments. Example: const { Tabs, TabPanel } = createFactories(require("devtools/client/shared/components/tabs/Tabs")); 825
redux 6
remote-debugging 6
save-screenshot.js Creates a string from an object for use when screenshot is passed the `--help` argument @param object param The param object to be formatted. @return string The formatted information from the param object as a string 7707
scroll.js Scroll the document so that the element "elem" appears in the viewport. @param {DOMNode} elem The element that needs to appear in the viewport. @param {Boolean} centered true if you want it centered, false if you want it to appear on the top of the viewport. It is true by default, and that is usually what you want. @param {Boolean} smooth true if you want the scroll to happen smoothly, instead of instantly. It is false by default. 4692
source-map devtools-source-map is maintained on GitHub at: 5
source-utils.js Takes a string and returns an object containing all the properties available on an URL instance, with additional properties (fileName), Leverages caching. @param {String} location @return {Object?} An object containing most properties available in 10897
sourceeditor This is the CodeMirror editor packaged for the Mozilla Project. CodeMirror 12
splitview.css 1706
stylesheet-utils.js eslint-env browser 2107
suggestion-picker.js Allows to find the lowest ranking index in an index of suggestions, by comparing it to another array of "most relevant" items which has been sorted by relevance. Example usage: let sortedBrowsers = ["firefox", "safari", "edge", "chrome"]; let myBrowsers = ["brave", "chrome", "firefox"]; let bestBrowserIndex = findMostRelevantIndex(myBrowsers, sortedBrowsers); // returns "2", the index of firefox in myBrowsers array @param {Array} items Array of items to compare against sortedItems. @param {Array} sortedItems Array of sorted items that suggestions are evaluated against. Array should be sorted by relevance, most relevant item first. @return {Number} 4227
telemetry.js This is the telemetry module to report metrics for tools. Comprehensive documentation is in docs/frontend/ 26263
test 209
test-helpers 3
theme-switching.js eslint-env browser 3858
theme.js Takes a theme name and returns the contents of its variable rule block. The first time this runs fetches the variables CSS file and caches it. 2914
thread-utils.js 1986
toolbarbutton.css 2545
undo.js A simple undo stack manager. Actions are added along with the necessary code to reverse the action. @param integer maxUndo Maximum number of undo steps. defaults to 50. 4404
unicode-url.js Gets a readble Unicode hostname from a hostname. If the `hostname` is a readable ASCII hostname, such as, then this function will simply return the original `hostname`. If the `hostname` is a Punycode hostname representing a Unicode domain name, such as xn--g6w.xn--8pv, then this function will return the readable Unicode domain name by decoding the Punycode hostname. @param {string} hostname the hostname from which the Unicode hostname will be parsed, such as, xn--g6w.xn--8pv. @return {string} The Unicode hostname. It may be the same as the `hostname` passed to this function if the `hostname` itself is a readable ASCII hostname or a Unicode hostname. 4103
vendor 42
view-source.js Tries to open a Stylesheet file in the Style Editor. If the file is not found, it is opened in source view instead. Returns a promise resolving to a boolean indicating whether or not the source was able to be displayed in the StyleEditor, as the built-in Firefox View Source is the fallback. @param {Toolbox} toolbox @param {string} sourceURL @param {number} sourceLine @return {Promise<boolean>} 5758
webgl-utils.js 1542
widgets 22
workers-listener.js Listening to worker updates requires watching various sources. This class provides a single addListener/removeListener API that will aggregate all possible worker update events. Only supports one listener at a time. 4674
zoom-keys.js Register generic keys to control zoom level of the given document. Used by both the toolboxes and the browser console. @param {DOMWindow} The window on which we should listent to key strokes and modify the zoom factor. @param {KeyShortcuts} KeyShortcuts instance where the zoom keys should be added. 2287