| accessible.js |
The AccessibleHighlighter draws the bounds of an accessible object.
Usage example:
let h = new AccessibleHighlighter(env);
h.show(node, { 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} options.name
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
- this.win: 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);
h.show(node, 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 |
|
|
| css-grid.js |
Given an `edge` of a box, return the name of the edge one move to the right.
|
59082 |
| 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`.
|
30203 |
| 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.
|
23567 |
| 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 |
| moz.build |
|
785 |
| 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();
h.show(node, 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.
|
6550 |
| 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
|
3428 |
| 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:
https://www.math.ubc.ca/~behrend/math221/Coords.pdf
@param {String} options.hoverPoint
The point to highlight.
@param {Boolean} options.transformMode
Whether to show the highlighter in transforms mode.
@param {} options.mode
|
111843 |
| 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 |
| utils |
|
|
| viewport-size-on-resize.js |
The ViewportSizeOnResizeHighlighter is a class that displays the viewport
width and height when the viewport size resizes, even when the rulers are not displayed.
|
1413 |
| 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. This class is also extended by ViewportSizeOnResizeHighlighter,
which is used to show the viewport information when the rulers aren't displayed.
|
6520 |