diff --git a/devtools/server/actors/highlighters.js b/devtools/server/actors/highlighters.js
index e6fc60196b51..e902d2d08ef7 100644
--- a/devtools/server/actors/highlighters.js
+++ b/devtools/server/actors/highlighters.js
@@ -6,6 +6,10 @@
 
 const { Actor } = require("devtools/shared/protocol");
 const { customHighlighterSpec } = require("devtools/shared/specs/highlighters");
+const { TYPES } = ChromeUtils.importESModule(
+  "resource://devtools/shared/highlighters.mjs",
+  { global: "contextual" }
+);
 
 const EventEmitter = require("devtools/shared/event-emitter");
 
@@ -337,43 +341,23 @@ exports.HighlighterEnvironment = HighlighterEnvironment;
 // readable. Otherwise, linting rules force some array defs to span 4
 // lines instead, which is much harder to parse.
 const HIGHLIGHTERS = {
-  accessible: "devtools/server/actors/highlighters/accessible",
-  boxModel: "devtools/server/actors/highlighters/box-model",
-  cssGrid: "devtools/server/actors/highlighters/css-grid",
-  cssTransform: "devtools/server/actors/highlighters/css-transform",
-  eyeDropper: "devtools/server/actors/highlighters/eye-dropper",
-  flexbox: "devtools/server/actors/highlighters/flexbox",
-  fonts: "devtools/server/actors/highlighters/fonts",
-  geometryEditor: "devtools/server/actors/highlighters/geometry-editor",
-  measuringTool: "devtools/server/actors/highlighters/measuring-tool",
-  pausedDebugger: "devtools/server/actors/highlighters/paused-debugger",
-  rulers: "devtools/server/actors/highlighters/rulers",
-  selector: "devtools/server/actors/highlighters/selector",
-  shapes: "devtools/server/actors/highlighters/shapes",
-  tabbingOrder: "devtools/server/actors/highlighters/tabbing-order",
-  viewportSize: "devtools/server/actors/highlighters/viewport-size",
+  [TYPES.ACCESSIBLE]: "devtools/server/actors/highlighters/accessible",
+  [TYPES.BOXMODEL]: "devtools/server/actors/highlighters/box-model",
+  [TYPES.GRID]: "devtools/server/actors/highlighters/css-grid",
+  [TYPES.TRANSFORM]: "devtools/server/actors/highlighters/css-transform",
+  [TYPES.EYEDROPPER]: "devtools/server/actors/highlighters/eye-dropper",
+  [TYPES.FLEXBOX]: "devtools/server/actors/highlighters/flexbox",
+  [TYPES.FONTS]: "devtools/server/actors/highlighters/fonts",
+  [TYPES.GEOMETRY]: "devtools/server/actors/highlighters/geometry-editor",
+  [TYPES.MEASURING]: "devtools/server/actors/highlighters/measuring-tool",
+  [TYPES.PAUSED_DEBUGGER]:
+    "devtools/server/actors/highlighters/paused-debugger",
+  [TYPES.RULERS]: "devtools/server/actors/highlighters/rulers",
+  [TYPES.SELECTOR]: "devtools/server/actors/highlighters/selector",
+  [TYPES.SHAPES]: "devtools/server/actors/highlighters/shapes",
+  [TYPES.TABBING_ORDER]: "devtools/server/actors/highlighters/tabbing-order",
+  [TYPES.VIEWPORT_SIZE]: "devtools/server/actors/highlighters/viewport-size",
 };
-
-// Each array in this array is called as register(arr[0], arr[1]).
-const registerCalls = [
-  ["AccessibleHighlighter", HIGHLIGHTERS.accessible],
-  ["BoxModelHighlighter", HIGHLIGHTERS.boxModel],
-  ["CssGridHighlighter", HIGHLIGHTERS.cssGrid],
-  ["CssTransformHighlighter", HIGHLIGHTERS.cssTransform],
-  ["EyeDropper", HIGHLIGHTERS.eyeDropper],
-  ["FlexboxHighlighter", HIGHLIGHTERS.flexbox],
-  ["FontsHighlighter", HIGHLIGHTERS.fonts],
-  ["GeometryEditorHighlighter", HIGHLIGHTERS.geometryEditor],
-  ["MeasuringToolHighlighter", HIGHLIGHTERS.measuringTool],
-  ["PausedDebuggerOverlay", HIGHLIGHTERS.pausedDebugger],
-  ["RulersHighlighter", HIGHLIGHTERS.rulers],
-  ["SelectorHighlighter", HIGHLIGHTERS.selector],
-  ["ShapesHighlighter", HIGHLIGHTERS.shapes],
-  ["TabbingOrderHighlighter", HIGHLIGHTERS.tabbingOrder],
-  ["ViewportSizeHighlighter", HIGHLIGHTERS.viewportSize],
-];
-
-// Register each highlighter above.
-registerCalls.forEach(arr => {
-  registerHighlighter(arr[0], arr[1]);
-});
+for (const [typeName, modulePath] of Object.entries(HIGHLIGHTERS)) {
+  registerHighlighter(typeName, modulePath);
+}
diff --git a/devtools/shared/highlighters.mjs b/devtools/shared/highlighters.mjs
index c903dde0e918..bc4f4f9c8219 100644
--- a/devtools/shared/highlighters.mjs
+++ b/devtools/shared/highlighters.mjs
@@ -3,11 +3,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 export const TYPES = {
+  ACCESSIBLE: "AccessibleHighlighter",
   BOXMODEL: "BoxModelHighlighter",
+  EYEDROPPER: "EyeDropper",
   FLEXBOX: "FlexboxHighlighter",
+  FONTS: "FontsHighlighter",
   GEOMETRY: "GeometryEditorHighlighter",
   GRID: "CssGridHighlighter",
+  MEASURING: "MeasuringToolHighlighter",
+  PAUSED_DEBUGGER: "PausedDebuggerOverlay",
+  RULERS: "RulersHighlighter",
   SHAPES: "ShapesHighlighter",
   SELECTOR: "SelectorHighlighter",
+  TABBING_ORDER: "TabbingOrderHighlighter",
   TRANSFORM: "CssTransformHighlighter",
+  VIEWPORT_SIZE: "ViewportSizeHighlighter",
 };