Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 21:01:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1909819 - [devtools] Use Highlighter types constant. r=devtools-reviewers,ochameau.

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D217692
This commit is contained in:
Nicolas Chevobbe 2024-07-26 08:09:26 +00:00
parent bff86f2777
commit 6ef0057411
50 changed files with 219 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
devtools/client/definitions.js
View File

@ -117,6 +117,10 @@ loader.lazyRequireGetter(
"resource://devtools/client/framework/menu-item.js"
);
const { TYPES: HIGHLIGHTER_TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
const L10N = new LocalizationHelper(
"devtools/client/locales/startup.properties"
@ -605,10 +609,10 @@ exports.ToolboxButtons = [
},
},
createHighlightButton(
["RulersHighlighter", "ViewportSizeHighlighter"],
[HIGHLIGHTER_TYPES.RULERS, HIGHLIGHTER_TYPES.VIEWPORT_SIZE],
"rulers"
),
createHighlightButton(["MeasuringToolHighlighter"], "measure"),
createHighlightButton([HIGHLIGHTER_TYPES.MEASURING], "measure"),
{
id: "command-button-jstracer",
description: l10n(

5
devtools/client/framework/toolbox.js
View File

@ -88,6 +88,7 @@ loader.lazyRequireGetter(
const lazy = {};
ChromeUtils.defineESModuleGetters(lazy, {
AppConstants: "resource://gre/modules/AppConstants.sys.mjs",
TYPES: "resource://devtools/shared/highlighters.mjs",
});
loader.lazyRequireGetter(this, "flags", "resource://devtools/shared/flags.js");
loader.lazyRequireGetter(
@ -2336,8 +2337,8 @@ Toolbox.prototype = {
// on will-navigate, otherwise we hold on to the stale highlighter
const hasHighlighters =
inspectorFront &&
(inspectorFront.hasHighlighter("RulersHighlighter") ||
inspectorFront.hasHighlighter("MeasuringToolHighlighter"));
(inspectorFront.hasHighlighter(lazy.TYPES.RULERS) ||
inspectorFront.hasHighlighter(lazy.TYPES.MEASURING));
if (hasHighlighters) {
inspectorFront.destroyHighlighters();
this.component.setToolboxButtons(this.toolbarButtons);

5
devtools/client/inspector/fonts/fonts.js
View File

@ -50,6 +50,9 @@ const {
const {
updatePreviewText,
} = require("resource://devtools/client/inspector/fonts/actions/font-options.js");
const { TYPES: HIGHLIGHTER_TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const FONT_PROPERTIES = [
"font-family",
@ -895,7 +898,7 @@ class FontInspector {
try {
this.fontsHighlighter =
await this.inspector.inspectorFront.getHighlighterByType(
"FontsHighlighter"
HIGHLIGHTER_TYPES.FONTS
);
} catch (e) {
// the FontsHighlighter won't be available when debugging a XUL document.

5
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
View File

@ -17,7 +17,10 @@ const TEST_URI = `
<div id="shape"></div>
`;
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

5
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
View File

@ -17,7 +17,10 @@ const TEST_URI = `
<div class="shape" id="shape2"></div>
`;
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

5
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
View File

@ -16,7 +16,10 @@ const TEST_URI = `
<div id="shape"></div>
`;
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

5
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js
View File

@ -26,7 +26,10 @@ const TEST_URI = `
<div id="shape-polygon"></div>
`;
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

8
devtools/client/inspector/shared/highlighters-overlay.js
View File

@ -1285,7 +1285,7 @@ class HighlightersOverlay {
*/
async showGeometryEditor(node) {
const highlighter = await this._getHighlighterTypeForNode(
"GeometryEditorHighlighter",
TYPES.GEOMETRY,
node
);
if (!highlighter) {
@ -1311,7 +1311,7 @@ class HighlightersOverlay {
const highlighter =
this.geometryEditorHighlighterShown.inspectorFront.getKnownHighlighter(
"GeometryEditorHighlighter"
TYPES.GEOMETRY
);
if (!highlighter) {
@ -1429,7 +1429,7 @@ class HighlightersOverlay {
switch (type) {
case "shapesEditor":
const highlighter = await this._getHighlighterTypeForNode(
"ShapesHighlighter",
TYPES.SHAPES,
node
);
if (!highlighter) {
@ -1726,7 +1726,7 @@ class HighlightersOverlay {
this._isRuleViewTransform(nodeInfo) ||
this._isComputedViewTransform(nodeInfo)
) {
type = "CssTransformHighlighter";
type = TYPES.TRANSFORM;
}
if (type) {

5
devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
View File

@ -15,7 +15,10 @@ const TEST_URI = `
Test the css transform highlighter
`;
const TYPE = "CssTransformHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const TYPE = TYPES.TRANSFORM;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

5
devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
View File

@ -16,7 +16,10 @@ const TEST_URI = `
Test the css transform highlighter
`;
var TYPE = "CssTransformHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const TYPE = TYPES.TRANSFORM;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

5
devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js
View File

@ -22,7 +22,10 @@ const TEST_URI = `
Test the css transform highlighter
`;
const TYPE = "CssTransformHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const TYPE = TYPES.TRANSFORM;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

5
devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-04.js
View File

@ -24,7 +24,10 @@ const TEST_URI = `
<div class="test"></div>
`;
const TYPE = "CssTransformHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const TYPE = TYPES.TRANSFORM;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

22
devtools/client/inspector/test/browser_inspector_highlighter-by-type.js
View File

@ -9,6 +9,10 @@
const TEST_URL = "data:text/html;charset=utf-8,custom highlighters";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
@ -18,20 +22,16 @@ add_task(async function () {
});
async function manyInstancesOfCustomHighlighters({ inspectorFront }) {
const h1 = await inspectorFront.getHighlighterByType("BoxModelHighlighter");
const h2 = await inspectorFront.getHighlighterByType("BoxModelHighlighter");
const h1 = await inspectorFront.getHighlighterByType(TYPES.BOXMODEL);
const h2 = await inspectorFront.getHighlighterByType(TYPES.BOXMODEL);
Assert.notStrictEqual(
h1,
h2,
"getHighlighterByType returns new instances every time (1)"
);
const h3 = await inspectorFront.getHighlighterByType(
"CssTransformHighlighter"
);
const h4 = await inspectorFront.getHighlighterByType(
"CssTransformHighlighter"
);
const h3 = await inspectorFront.getHighlighterByType(TYPES.TRANSFORM);
const h4 = await inspectorFront.getHighlighterByType(TYPES.TRANSFORM);
Assert.notStrictEqual(
h3,
h4,
@ -53,10 +53,8 @@ async function manyInstancesOfCustomHighlighters({ inspectorFront }) {
}
async function showHideMethodsAreAvailable({ inspectorFront }) {
const h1 = await inspectorFront.getHighlighterByType("BoxModelHighlighter");
const h2 = await inspectorFront.getHighlighterByType(
"CssTransformHighlighter"
);
const h1 = await inspectorFront.getHighlighterByType(TYPES.BOXMODEL);
const h2 = await inspectorFront.getHighlighterByType(TYPES.TRANSFORM);
ok("show" in h1, "Show method is present on the front API");
ok("show" in h2, "Show method is present on the front API");

5
devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_01.js
View File

@ -36,7 +36,10 @@ const TEST_URL = `
</div>
`;
const HIGHLIGHTER_TYPE = "CssGridHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.GRID;
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(

5
devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_02.js
View File

@ -17,7 +17,10 @@ const TEST_URL = `
<div class="grid"></div>
`;
const HIGHLIGHTER_TYPE = "CssGridHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.GRID;
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_01.js
View File

@ -7,7 +7,10 @@
// Test the creation of the CSS shapes highlighter.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
const SHAPE_IDS = ["polygon", "ellipse", "rect"];
const SHAPE_TYPES = [
{

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_02.js
View File

@ -7,7 +7,10 @@
// Make sure that the CSS shapes highlighters have the correct attributes.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_03.js
View File

@ -8,7 +8,10 @@
// in different zoom levels and with different geometry-box.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
const TEST_LEVELS = [0.5, 1, 2];
add_task(async function () {

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_04.js
View File

@ -7,7 +7,10 @@
// Test that shapes are updated correctly on mouse events.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
const env = await openInspectorForURL(TEST_URL);

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js
View File

@ -6,7 +6,10 @@
// Test hovering over shape points in the rule-view and shapes highlighter.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
const env = await openInspectorForURL(TEST_URL);

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-scale.js
View File

@ -7,7 +7,10 @@
// Test that shapes are updated correctly on mouse events in transform mode.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
const SHAPE_SELECTORS = ["#polygon-transform", "#circle", "#ellipse", "#inset"];
add_task(async function () {

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-translate.js
View File

@ -7,7 +7,10 @@
// Test that shapes are updated correctly on mouse events in transform mode.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
const SHAPE_SELECTORS = ["#polygon-transform", "#circle", "#ellipse", "#inset"];
add_task(async function () {

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_07.js
View File

@ -7,7 +7,10 @@
// Test that shapes are updated correctly for scaling on one axis in transform mode.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
const SHAPE_SELECTORS = ["#polygon-transform", "#ellipse"];
add_task(async function () {

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js
View File

@ -7,7 +7,10 @@
// Test that shapes in iframes are updated correctly on mouse events.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes_iframe.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
const env = await openInspectorForURL(TEST_URL);

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js
View File

@ -35,7 +35,10 @@ const TEST_URL = `data:text/html,<meta charset=utf8>${encodeURIComponent(`
<span id=abs class=target></span>
</div>`)}`;
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
const env = await openInspectorForURL(TEST_URL);

5
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_percent.js
View File

@ -8,7 +8,10 @@
// on top of screen %.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes-percent.html";
const HIGHLIGHTER_TYPE = "ShapesHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(

8
devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js
View File

@ -19,15 +19,17 @@ const TEST_URL = `
</span>
`;
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
"data:text/html;charset=utf-8," + encodeURI(TEST_URL)
);
const front = inspector.inspectorFront;
const highlighter = await front.getHighlighterByType(
"CssTransformHighlighter"
);
const highlighter = await front.getHighlighterByType(TYPES.TRANSFORM);
await isHiddenByDefault(highlighterTestFront, highlighter);
await has2PolygonsAnd4Lines(highlighterTestFront, highlighter);

8
devtools/client/inspector/test/browser_inspector_highlighter-csstransform_02.js
View File

@ -20,15 +20,17 @@ transform highlighter applies those values correctly to the SVG elements
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_csstransform.html";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
TEST_URL
);
const front = inspector.inspectorFront;
const highlighter = await front.getHighlighterByType(
"CssTransformHighlighter"
);
const highlighter = await front.getHighlighterByType(TYPES.TRANSFORM);
const nodeFront = await getNodeFront("#test-node", inspector);

5
devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-clipboard.js
View File

@ -5,7 +5,10 @@
// Test that the eyedropper can copy colors to the clipboard
const HIGHLIGHTER_TYPE = "EyeDropper";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.EYEDROPPER;
const ID = "eye-dropper-";
const TEST_URI =
"data:text/html;charset=utf-8,<style>html{background:red}</style>";

5
devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js
View File

@ -5,7 +5,10 @@
// Test the eyedropper mouse and keyboard handling.
const HIGHLIGHTER_TYPE = "EyeDropper";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.EYEDROPPER;
const ID = "eye-dropper-";
const TEST_URI = `
<style>

5
devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
View File

@ -7,7 +7,10 @@
// It should move around when the eyedropper is close to the edges of the viewport so as
// to always stay visible.
const HIGHLIGHTER_TYPE = "EyeDropper";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.EYEDROPPER;
const ID = "eye-dropper-";
const HTML = `

5
devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
View File

@ -20,7 +20,10 @@ const TEST_URL = `data:text/html;charset=utf-8,
width:5em;
height:50%;'></div>`;
const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.GEOMETRY;
const ID = "geometry-editor-";
const SIDES = ["left", "right", "top", "bottom"];

5
devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js
View File

@ -37,7 +37,10 @@ const TEST_URL = `data:text/html;charset=utf-8,
height:3em;'>relative</div>`;
const ID = "geometry-editor-";
const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.GEOMETRY;
const POSITIONED_ELEMENT_TESTS = [
{

5
devtools/client/inspector/test/browser_inspector_highlighter-geometry_03.js
View File

@ -11,7 +11,10 @@
const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
const ID = "geometry-editor-";
const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.GEOMETRY;
const PROPS = ["left", "right", "top", "bottom"];
add_task(async function () {

5
devtools/client/inspector/test/browser_inspector_highlighter-geometry_04.js
View File

@ -11,7 +11,10 @@
const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
const ID = "geometry-editor-";
const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.GEOMETRY;
const handlerMap = {
top: { cx: "x2", cy: "y2" },

5
devtools/client/inspector/test/browser_inspector_highlighter-geometry_05.js
View File

@ -11,7 +11,10 @@
const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_02.html";
const ID = "geometry-editor-";
const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.GEOMETRY;
const TEST_DATA = [
{

5
devtools/client/inspector/test/browser_inspector_highlighter-geometry_06.js
View File

@ -9,7 +9,10 @@
const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
const ID = "geometry-editor-";
const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.GEOMETRY;
const SIDES = ["top", "right", "bottom", "left"];

5
devtools/client/inspector/test/browser_inspector_highlighter-geometry_07.js
View File

@ -9,7 +9,10 @@
const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
const ID = "geometry-editor-";
const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.GEOMETRY;
const TESTS = {
".absolute-all-4": {

5
devtools/client/inspector/test/browser_inspector_highlighter-measure-keybinding.js
View File

@ -11,7 +11,10 @@ const TEST_URL = "data:text/html;charset=utf-8,measuring tool test";
const PREFIX = "measuring-tool-";
const HANDLER_PREFIX = "handler-";
const HIGHLIGHTED_HANDLER_CLASSNAME = "highlight";
const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.MEASURING;
const SMALL_DELTA = 1;
const LARGE_DELTA = 10;

5
devtools/client/inspector/test/browser_inspector_highlighter-measure_01.js
View File

@ -14,7 +14,10 @@ const TEST_URL = `data:text/html;charset=utf-8,
</div>`;
const PREFIX = "measuring-tool-";
const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.MEASURING;
const X = 32;
const Y = 20;

5
devtools/client/inspector/test/browser_inspector_highlighter-measure_02.js
View File

@ -14,7 +14,10 @@ const TEST_URL = `data:text/html;charset=utf-8,
</div>`;
const PREFIX = "measuring-tool-";
const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.MEASURING;
const SIDES = ["top", "right", "bottom", "left"];

5
devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
View File

@ -8,7 +8,10 @@ const TEST_URL = "data:text/html;charset=utf-8,measuring tool test";
const PREFIX = "measuring-tool-";
const HANDLER_PREFIX = "handler-";
const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.MEASURING;
const X = 32;
const Y = 20;

5
devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
View File

@ -8,7 +8,10 @@ const TEST_URL = "data:text/html;charset=utf-8,measuring tool test";
const PREFIX = "measuring-tool-";
const HANDLER_PREFIX = "handler-";
const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.MEASURING;
const X = 32;
const Y = 20;

6
devtools/client/inspector/test/browser_inspector_highlighter-rulers_01.js
View File

@ -21,13 +21,17 @@ const RULERS_MAX_Y_AXIS = 15000;
// currently the unit is in pixel.
const RULERS_TEXT_STEP = 100;
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
TEST_URL
);
const front = inspector.inspectorFront;
const highlighter = await front.getHighlighterByType("RulersHighlighter");
const highlighter = await front.getHighlighterByType(TYPES.RULERS);
await isHiddenByDefault(highlighter, inspector, highlighterTestFront);
await isVisibleAfterShow(highlighter, inspector, highlighterTestFront);

6
devtools/client/inspector/test/browser_inspector_highlighter-rulers_02.js
View File

@ -13,13 +13,17 @@ const TEST_URL =
const ID = "rulers-highlighter-";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
TEST_URL
);
const front = inspector.inspectorFront;
const highlighter = await front.getHighlighterByType("RulersHighlighter");
const highlighter = await front.getHighlighterByType(TYPES.RULERS);
// the rulers doesn't need any node, but as highligher it seems mandatory
// ones, so the body is given

7
devtools/client/inspector/test/browser_inspector_highlighter-rulers_03.js
View File

@ -12,6 +12,9 @@ const TEST_URL =
"width: 20px; height: 50px'></div>";
const ID = "viewport-size-highlighter-";
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
@ -21,9 +24,7 @@ add_task(async function () {
);
const front = inspector.inspectorFront;
const highlighter = await front.getHighlighterByType(
"ViewportSizeHighlighter"
);
const highlighter = await front.getHighlighterByType(TYPES.VIEWPORT_SIZE);
await isVisibleAfterShow(highlighter, inspector, highlighterTestFront);
await hasRightLabelsContent(highlighter, highlighterTestFront);

6
devtools/client/inspector/test/browser_inspector_highlighter-selector_01.js
View File

@ -47,12 +47,16 @@ const TEST_DATA = [
requestLongerTimeout(5);
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
TEST_URL
);
const front = inspector.inspectorFront;
const highlighter = await front.getHighlighterByType("SelectorHighlighter");
const highlighter = await front.getHighlighterByType(TYPES.SELECTOR);
const contextNode = await getNodeFront("body", inspector);

6
devtools/client/inspector/test/browser_inspector_highlighter-selector_02.js
View File

@ -40,6 +40,10 @@ const TEST_DATA = [
requestLongerTimeout(5);
const { TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
@ -61,7 +65,7 @@ add_task(async function () {
const inspectorFront = await contextNode.targetFront.getFront("inspector");
const highlighter = await inspectorFront.getHighlighterByType(
"SelectorHighlighter"
TYPES.SELECTOR
);
const highlighterTestFront = await getHighlighterTestFront(
inspector.toolbox,

5
devtools/client/styleeditor/StyleSheetEditor.sys.mjs
View File

@ -35,9 +35,10 @@ import {
showFilePicker,
} from "resource://devtools/client/styleeditor/StyleEditorUtil.sys.mjs";
import { TYPES as HIGHLIGHTER_TYPES } from "resource://devtools/shared/highlighters.mjs";
const LOAD_ERROR = "error-load";
const SAVE_ERROR = "error-save";
const SELECTOR_HIGHLIGHTER_TYPE = "SelectorHighlighter";
// max update frequency in ms (avoid potential typing lag and/or flicker)
// @see StyleEditor.updateStylesheet
@ -735,7 +736,7 @@ StyleSheetEditor.prototype = {
const walker = await this.getWalker();
try {
this.highlighter = await walker.parentFront.getHighlighterByType(
SELECTOR_HIGHLIGHTER_TYPE
HIGHLIGHTER_TYPES.SELECTOR
);
return this.highlighter;
} catch (e) {

13
devtools/server/actors/accessibility/walker.js
View File

@ -64,6 +64,15 @@ loader.lazyRequireGetter(
true
);
const lazy = {};
ChromeUtils.defineESModuleGetters(
lazy,
{
TYPES: "resource://devtools/shared/highlighters.mjs",
},
{ global: "contextual" }
);
const kStateHover = 0x00000004; // ElementState::HOVER
const {
@ -256,7 +265,7 @@ class AccessibleWalkerActor extends Actor {
if (!this._highlighter) {
this._highlighter = new CustomHighlighterActor(
this,
"AccessibleHighlighter"
lazy.TYPES.ACCESSIBLE
);
this.manage(this._highlighter);
@ -270,7 +279,7 @@ class AccessibleWalkerActor extends Actor {
if (!this._tabbingOrderHighlighter) {
this._tabbingOrderHighlighter = new CustomHighlighterActor(
this,
"TabbingOrderHighlighter"
lazy.TYPES.TABBING_ORDER
);
this.manage(this._tabbingOrderHighlighter);