Name Description Size
accessible.js The AccessibleHighlighter draws the bounds of an accessible object. Usage example: let h = new AccessibleHighlighter(env);, { x, y, w, h, [duration] }); h.hide(); h.destroy(); @param {Number} options.x X coordinate of the top left corner of the accessible object @param {Number} options.y Y coordinate of the top left corner of the accessible object @param {Number} options.w Width of the the accessible object @param {Number} options.h Height of the the accessible object @param {Number} options.duration Duration of time that the highlighter should be shown. @param {String|null} Name of the the accessible object @param {String} options.role Role of the the accessible object Structure: <div class="highlighter-container" aria-hidden="true"> <div class="accessible-root"> <svg class="accessible-elements" hidden="true"> <path class="accessible-bounds" points="..." /> </svg> <div class="accessible-infobar-container"> <div class="accessible-infobar"> <div class="accessible-infobar-text"> <span class="accessible-infobar-role">Accessible Role</span> <span class="accessible-infobar-name">Accessible Name</span> </div> </div> </div> </div> </div> 10335
auto-refresh.js Base class for auto-refresh-on-change highlighters. Sub classes will have a chance to update whenever the current node's geometry changes. Sub classes must implement the following methods: _show: called when the highlighter should be shown, _hide: called when the highlighter should be hidden, _update: called while the highlighter is shown and the geometry of the current node changes. Sub classes will have access to the following properties: - this.currentNode: the node to be shown - this.currentQuads: all of the node's box model region quads - the current window Emits the following events: - shown - hidden - updated 9960
box-model.js The BoxModelHighlighter draws the box model regions on top of a node. If the node is a block box, then each region will be displayed as 1 polygon. If the node is an inline box though, each region may be represented by 1 or more polygons, depending on how many line boxes the inline element has. Usage example: let h = new BoxModelHighlighter(env);, options); h.hide(); h.destroy(); @param {String} options.region Specifies the region that the guides should outline: "content" (default), "padding", "border" or "margin". @param {Boolean} options.hideGuides Defaults to false @param {Boolean} options.hideInfoBar Defaults to false @param {String} options.showOnly If set, only this region will be highlighted. Use with onlyRegionArea to only highlight the area of the region: "content", "padding", "border" or "margin" @param {Boolean} options.onlyRegionArea This can be set to true to make each region's box only highlight the area of the corresponding region rather than the area of nested regions too. This is useful when used with showOnly. Structure: <div class="highlighter-container" aria-hidden="true"> <div class="box-model-root"> <svg class="box-model-elements" hidden="true"> <g class="box-model-regions"> <path class="box-model-margin" points="..." /> <path class="box-model-border" points="..." /> <path class="box-model-padding" points="..." /> <path class="box-model-content" points="..." /> </g> <line class="box-model-guide-top" x1="..." y1="..." x2="..." y2="..." /> <line class="box-model-guide-right" x1="..." y1="..." x2="..." y2="..." /> <line class="box-model-guide-bottom" x1="..." y1="..." x2="..." y2="..." /> <line class="box-model-guide-left" x1="..." y1="..." x2="..." y2="..." /> </svg> <div class="box-model-infobar-container"> <div class="box-model-infobar-arrow highlighter-infobar-arrow-top" /> <div class="box-model-infobar"> <div class="box-model-infobar-text" align="center"> <span class="box-model-infobar-tagname">Node name</span> <span class="box-model-infobar-id">Node id</span> <span class="box-model-infobar-classes">.someClass</span> <span class="box-model-infobar-pseudo-classes">:hover</span> <span class="box-model-infobar-grid-type">Grid Type</span> <span class="box-model-infobar-flex-type">Flex Type</span> </div> </div> <div class="box-model-infobar-arrow box-model-infobar-arrow-bottom"/> </div> </div> </div> 24908
css-grid.js Given an `edge` of a box, return the name of the edge one move to the right. 59369
css-transform.js The CssTransformHighlighter is the class that draws an outline around a transformed element and an outline around where it would be if untransformed as well as arrows connecting the 2 outlines' corners. 6701
eye-dropper.js The EyeDropper allows the user to select a color of a pixel within the content page, showing a magnified circle and color preview while the user hover the page. 18213
flexbox.js Cached used by `FlexboxHighlighter.getFlexContainerPattern`. 30362
fonts.js This highlighter highlights runs of text in the page that have been rendered given a certain font. The highlighting is done with window selection ranges, so no extra markup is being inserted into the content page. 3611
geometry-editor.js Element geometry properties helper that gives names of position and size properties. 23558
measuring-tool.js The MeasuringToolHighlighter is used to measure distances in a content page. It allows users to click and drag with their mouse to draw an area whose dimensions will be displayed in a tooltip next to it. This allows users to measure distances between elements on a page. 21754 751
node-tabbing-order.js The NodeTabbingOrderHighlighter draws an outline around a node (based on its border bounds). Usage example: const h = new NodeTabbingOrderHighlighter(env); await h.isReady();, options); h.hide(); h.destroy(); @param {Number} options.index Tabbing index value to be displayed in the highlighter info bar. 9763
paused-debugger.js The PausedDebuggerOverlay is a class that displays a semi-transparent mask on top of the whole page and a toolbar at the top of the page. This is used to signal to users that script execution is current paused. The toolbar is used to display the reason for the pause in script execution as well as buttons to resume or step through the program. 6771
remote-node-picker-notice.js The RemoteNodePickerNotice is a class that displays a notice in a remote debugged page. This is used to signal to users they can click/tap an element to select it in the about:devtools-toolbox toolbox inspector. 5074
rulers.js The RulersHighlighter is a class that displays both horizontal and vertical rules on the page, along the top and left edges, with pixel graduations, useful for users to quickly check distances 8019
selector.js The SelectorHighlighter runs a given selector through querySelectorAll on the document of the provided context node and then uses the BoxModelHighlighter to highlight the matching nodes 3093
shapes.js The ShapesHighlighter draws an outline shapes in the page. The idea is to have something that is able to wrap complex shapes for css properties such as shape-outside/inside, clip-path but also SVG elements. Notes on shape transformation: When using transform mode to translate, scale, and rotate shapes, a transformation matrix keeps track of the transformations done to the original shape. When the highlighter is toggled on/off or between transform mode and point editing mode, the transformations applied to the shape become permanent. While transformations are being performed on a shape, there is an "original" and a "transformed" coordinate system. This is used when scaling or rotating a rotated shape. The "original" coordinate system is the one where (0,0) is at the top left corner of the page, the x axis is horizontal, and the y axis is vertical. The "transformed" coordinate system is the one where (0,0) is at the top left corner of the current shape. The x axis follows the north edge of the shape (from the northwest corner to the northeast corner) and the y axis follows the west edge of the shape (from the northwest corner to the southwest corner). Because of rotation, the "north" and "west" edges might not actually be at the top and left of the transformed shape. Imagine that the compass directions are also rotated along with the shape. A refresher for coordinates and change of basis that may be helpful: @param {String} options.hoverPoint The point to highlight. @param {Boolean} options.transformMode Whether to show the highlighter in transforms mode. @param {} options.mode 111837
tabbing-order.js The TabbingOrderHighlighter uses focus manager to traverse all focusable nodes on the page and then uses the NodeTabbingOrderHighlighter to highlight these nodes. 6821
viewport-size.js The ViewportSizeHighlighter is a class that displays the viewport width and height on a small overlay on the top right edge of the page while the rulers are turned on. 3244