Name Description Size
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) 1621
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. 19684
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 9282
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. 15543
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, see 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"); 4694
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
focus.js Simplied selector targetting elements that can receive the focus, full version at 2134
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. 58194
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`. 8658
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. 2540 1521
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. 11670
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") 62981
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. 5982
react-utils.js Create React factories for given arguments. Example: const { Tabs, TabPanel } = createFactories(require("devtools/client/shared/components/tabs/Tabs")); 825
screenshot.js Take a screenshot of a browser element matching the passed target and save it to a file or the clipboard. @param {TargetFront} targetFront: The targetFront of the frame we want to take a screenshot of. @param {Window} window: The DevTools Client window. @param {Object} args @param {Boolean} args.fullpage: Should the screenshot be the height of the whole page @param {String} args.filename: Expected filename for the screenshot @param {Boolean} args.clipboard: Whether or not the screenshot should be saved to the clipboard. @param {Number} args.dpr: Scale of the screenshot. Defaults to the window `devicePixelRatio`. ⚠️ Note that the scale might be decreased if the resulting image would be too big to draw safely. Warning will be emitted to the console if that's the case. @param {Number} args.delay: Number of seconds to wait before taking the screenshot @param {Boolean} Set to true to receive a message with the screenshot command documentation. @param {Boolean} args.disableFlash: Set to true to disable the flash animation when the screenshot is taken. @param {Boolean} args.ignoreDprForFileScale: Set to true to if the resulting screenshot file size shouldn't be impacted by the dpr. Note that the dpr will still be taken into account when taking the screenshot, only the size of the file will be different. @returns {Array<Object{text, level}>} An array of object representing the different messages emitted throught the process, that should be displayed to the user. 13373
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-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 10911
string-utils.js Fetches the full text of a LongString. @param {DevToolsClient} client @param {object|string} stringGrip: A long string grip. If the param is a simple string, it will be returned as is. @return {Promise<String>} The full string content. 1291
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/ 26566
theme-switching.js eslint-env browser 4078
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. 3248
thread-utils.js Bug 1720512 - We used to store invalid breakpoints, leading to blank debugger. Filter out only the one that look invalid. 3282
toolbarbutton.css Legacy `devtools-toolbarbutton` styles, extracted from common.css because we're only using them in Style Editor, and it makes maintaining the newer `devtools-button` styles easier. 2487
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. 4244
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. 4065
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|Object} stylesheetResourceOrGeneratedURL @param {number} generatedLine @param {number} generatedColumn @return {Promise<boolean>} 5332
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
webgl-utils.js 1465
worker-utils.js 3663
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. 2262