From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 19:32:43 +0200
Subject: Adding upstream version 1:115.7.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 devtools/server/actors/highlighters.css | 1088 +++++++++++++++++++++++++++++++
 1 file changed, 1088 insertions(+)
 create mode 100644 devtools/server/actors/highlighters.css

(limited to 'devtools/server/actors/highlighters.css')

diff --git a/devtools/server/actors/highlighters.css b/devtools/server/actors/highlighters.css
new file mode 100644
index 0000000000..c0b51ac6dc
--- /dev/null
+++ b/devtools/server/actors/highlighters.css
@@ -0,0 +1,1088 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*
+  The :-moz-native-anonymous selector prefix prevents the styles defined here
+  from impacting web content. Indeed, this pseudo-class is only available to chrome code.
+  This stylesheet is loaded as a ua stylesheet via the addon sdk, so having this
+  pseudo-class is important.
+
+  A specific selector should still be specified to avoid impacting non-devtools
+  chrome content.
+*/
+
+:-moz-native-anonymous .highlighter-container {
+  /*
+  Content CSS applying to the html element impact the highlighters.
+  To avoid that, possible cases have been set to initial.
+  */
+  text-transform: initial;
+  text-indent: initial;
+  letter-spacing: initial;
+  word-spacing: initial;
+  color: initial;
+  direction: initial;
+  writing-mode: initial;
+}
+
+:-moz-native-anonymous .highlighter-container {
+  --highlighter-accessibility-bounds-color: #6a5acd;
+  --highlighter-accessibility-bounds-opacity: 0.6;
+  --highlighter-box-border-color: #444444;
+  --highlighter-box-content-color: hsl(197, 71%, 73%);
+  --highlighter-box-margin-color: #edff64;
+  --highlighter-box-padding-color: #6a5acd;
+  --highlighter-bubble-text-color: hsl(216, 33%, 97%);
+  --highlighter-bubble-background-color: hsl(214, 13%, 24%);
+  --highlighter-bubble-border-color: rgba(255, 255, 255, 0.2);
+  --highlighter-bubble-arrow-size: 8px;
+  --highlighter-font-family: message-box;
+  --highlighter-font-size: 11px;
+  --highlighter-guide-color: hsl(200, 100%, 40%);
+  --highlighter-infobar-color: hsl(210, 30%, 85%);
+  --highlighter-marker-color: #000;
+
+  --grey-40: #b1b1b3;
+  --red-40: #ff3b6b;
+  --yellow-60: #d7b600;
+  --blue-60: #0060df;
+}
+
+/**
+ * Highlighters are asbolute positioned in the page by default.
+ * A single highlighter can have fixed position in its css class if needed (see below the
+ * eye dropper or rulers highlighter, for example); but if it has to handle the
+ * document's scrolling (as rulers does), it would lag a bit behind due the APZ (Async
+ * Pan/Zoom module), that performs asynchronously panning and zooming on the compositor
+ * thread rather than the main thread.
+ */
+:-moz-native-anonymous .highlighter-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  /* The container for all highlighters doesn't react to pointer-events by
+     default. This is because most highlighters cover the whole viewport but
+     don't contain UIs that need to be accessed.
+     If your highlighter has UI that needs to be interacted with, add
+     'pointer-events:auto;' on its container element. */
+  pointer-events: none;
+}
+
+:-moz-native-anonymous .highlighter-container.box-model {
+  /* Make the box-model container have a z-index other than auto so it always sits above
+     other highlighters. */
+  z-index: 1;
+}
+
+:-moz-native-anonymous .highlighter-container [hidden] {
+  display: none;
+}
+
+:-moz-native-anonymous .highlighter-container [dragging] {
+  cursor: grabbing;
+}
+
+/* Box Model Highlighter */
+
+:-moz-native-anonymous .box-model-regions {
+  opacity: 0.6;
+}
+
+/* Box model regions can be faded (see the onlyRegionArea option in
+   highlighters.js) in order to only display certain regions. */
+:-moz-native-anonymous .box-model-regions [faded] {
+  display: none;
+}
+
+:-moz-native-anonymous .box-model-content {
+  fill: var(--highlighter-box-content-color);
+}
+
+:-moz-native-anonymous .box-model-padding {
+  fill: var(--highlighter-box-padding-color);
+}
+
+:-moz-native-anonymous .box-model-border {
+  fill: var(--highlighter-box-border-color);
+}
+
+:-moz-native-anonymous .box-model-margin {
+  fill: var(--highlighter-box-margin-color);
+}
+
+:-moz-native-anonymous .box-model-content,
+:-moz-native-anonymous .box-model-padding,
+:-moz-native-anonymous .box-model-border,
+:-moz-native-anonymous .box-model-margin {
+  stroke: none;
+}
+
+:-moz-native-anonymous .box-model-guide-top,
+:-moz-native-anonymous .box-model-guide-right,
+:-moz-native-anonymous .box-model-guide-bottom,
+:-moz-native-anonymous .box-model-guide-left {
+  stroke: var(--highlighter-guide-color);
+  stroke-dasharray: 5 3;
+  shape-rendering: crispEdges;
+}
+
+@media (prefers-reduced-motion) {
+  :-moz-native-anonymous .use-simple-highlighters :is(
+     .box-model-content,
+     .box-model-padding,
+     .box-model-border,
+     .box-model-margin
+  ) {
+    fill: none;
+    stroke-width: 3;
+  }
+
+  :-moz-native-anonymous .use-simple-highlighters .box-model-content {
+    stroke: var(--highlighter-box-content-color);
+  }
+
+  :-moz-native-anonymous .use-simple-highlighters .box-model-padding {
+    stroke: var(--highlighter-box-padding-color);
+  }
+
+  :-moz-native-anonymous .use-simple-highlighters .box-model-border {
+    stroke: var(--highlighter-box-border-color);
+  }
+
+  :-moz-native-anonymous .use-simple-highlighters .box-model-margin {
+    stroke: var(--highlighter-box-margin-color);
+  }
+}
+
+/* Highlighter - Infobar */
+
+:-moz-native-anonymous [class$="infobar-container"] {
+  position: absolute;
+  max-width: 95%;
+
+  font: var(--highlighter-font-family);
+  font-size: var(--highlighter-font-size);
+}
+
+:-moz-native-anonymous [class$="infobar"] {
+  position: relative;
+
+  padding: 5px;
+  min-width: 75px;
+
+  border-radius: 3px;
+  background: var(--highlighter-bubble-background-color) no-repeat padding-box;
+
+  color: var(--highlighter-bubble-text-color);
+  text-shadow: none;
+
+  border: 1px solid var(--highlighter-bubble-border-color);
+}
+
+/* Arrows */
+
+:-moz-native-anonymous
+  [class$="infobar-container"]
+  > [class$="infobar"]:before {
+  left: calc(50% - var(--highlighter-bubble-arrow-size));
+  border: var(--highlighter-bubble-arrow-size) solid
+    var(--highlighter-bubble-border-color);
+}
+
+:-moz-native-anonymous [class$="infobar-container"] > [class$="infobar"]:after {
+  left: calc(50% - 7px);
+  border: 7px solid var(--highlighter-bubble-background-color);
+}
+
+:-moz-native-anonymous [class$="infobar-container"] > [class$="infobar"]:before,
+:-moz-native-anonymous [class$="infobar-container"] > [class$="infobar"]:after {
+  content: "";
+  display: none;
+  position: absolute;
+  height: 0;
+  width: 0;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
+:-moz-native-anonymous
+  [class$="infobar-container"][position="top"]:not([hide-arrow])
+  > [class$="infobar"]:before,
+:-moz-native-anonymous
+  [class$="infobar-container"][position="top"]:not([hide-arrow])
+  > [class$="infobar"]:after {
+  border-bottom: 0;
+  top: 100%;
+  display: block;
+}
+
+:-moz-native-anonymous
+  [class$="infobar-container"][position="bottom"]:not([hide-arrow])
+  > [class$="infobar"]:before,
+:-moz-native-anonymous
+  [class$="infobar-container"][position="bottom"]:not([hide-arrow])
+  > [class$="infobar"]:after {
+  border-top: 0;
+  bottom: 100%;
+  display: block;
+}
+
+/* Text Container */
+
+:-moz-native-anonymous [class$="infobar-text"] {
+  overflow: hidden;
+  white-space: nowrap;
+  direction: ltr;
+  padding-bottom: 1px;
+  display: flex;
+  justify-content: center;
+  max-width: 768px;
+}
+
+:-moz-native-anonymous .box-model-infobar-tagname {
+  color: hsl(285, 100%, 75%);
+}
+
+:-moz-native-anonymous .box-model-infobar-id {
+  color: hsl(103, 46%, 54%);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:-moz-native-anonymous .box-model-infobar-classes,
+:-moz-native-anonymous .box-model-infobar-pseudo-classes {
+  color: hsl(200, 74%, 57%);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:-moz-native-anonymous [class$="infobar-dimensions"],
+:-moz-native-anonymous [class$="infobar-grid-type"],
+:-moz-native-anonymous [class$="infobar-flex-type"] {
+  border-inline-start: 1px solid #5a6169;
+  margin-inline-start: 6px;
+  padding-inline-start: 6px;
+}
+
+:-moz-native-anonymous [class$="infobar-grid-type"]:empty,
+:-moz-native-anonymous [class$="infobar-flex-type"]:empty {
+  display: none;
+}
+
+:-moz-native-anonymous [class$="infobar-dimensions"] {
+  color: var(--highlighter-infobar-color);
+}
+
+:-moz-native-anonymous [class$="infobar-grid-type"],
+:-moz-native-anonymous [class$="infobar-flex-type"] {
+  color: var(--grey-40);
+}
+
+/* CSS Grid Highlighter */
+
+:-moz-native-anonymous .css-grid-canvas {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  image-rendering: -moz-crisp-edges;
+}
+
+:-moz-native-anonymous .css-grid-regions {
+  opacity: 0.6;
+}
+
+:-moz-native-anonymous .css-grid-areas,
+:-moz-native-anonymous .css-grid-cells {
+  opacity: 0.5;
+  stroke: none;
+}
+
+:-moz-native-anonymous .css-grid-area-infobar-name,
+:-moz-native-anonymous .css-grid-cell-infobar-position,
+:-moz-native-anonymous .css-grid-line-infobar-number {
+  color: hsl(285, 100%, 75%);
+}
+
+:-moz-native-anonymous .css-grid-line-infobar-names:not(:empty) {
+  color: var(--highlighter-infobar-color);
+  border-inline-start: 1px solid #5a6169;
+  margin-inline-start: 6px;
+  padding-inline-start: 6px;
+}
+
+/* CSS Transform Highlighter */
+
+:-moz-native-anonymous .css-transform-transformed {
+  fill: var(--highlighter-box-content-color);
+  opacity: 0.8;
+}
+
+:-moz-native-anonymous .css-transform-untransformed {
+  fill: #66cc52;
+  opacity: 0.8;
+}
+
+:-moz-native-anonymous .css-transform-transformed,
+:-moz-native-anonymous .css-transform-untransformed,
+:-moz-native-anonymous .css-transform-line {
+  stroke: var(--highlighter-guide-color);
+  stroke-dasharray: 5 3;
+  stroke-width: 2;
+}
+
+/* Element Geometry Highlighter */
+
+:-moz-native-anonymous .geometry-editor-root {
+  /* The geometry editor can be interacted with, so it needs to react to
+     pointer events */
+  pointer-events: auto;
+  user-select: none;
+}
+
+:-moz-native-anonymous .geometry-editor-offset-parent {
+  stroke: var(--highlighter-guide-color);
+  shape-rendering: crispEdges;
+  stroke-dasharray: 5 3;
+  fill: transparent;
+}
+
+:-moz-native-anonymous .geometry-editor-current-node {
+  stroke: var(--highlighter-guide-color);
+  fill: var(--highlighter-box-content-color);
+  shape-rendering: crispEdges;
+  opacity: 0.6;
+}
+
+:-moz-native-anonymous .geometry-editor-arrow {
+  stroke: var(--highlighter-guide-color);
+  shape-rendering: crispEdges;
+}
+
+:-moz-native-anonymous .geometry-editor-root circle {
+  stroke: var(--highlighter-guide-color);
+  fill: var(--highlighter-box-content-color);
+}
+
+:-moz-native-anonymous .geometry-editor-handler-top,
+:-moz-native-anonymous .geometry-editor-handler-bottom {
+  cursor: ns-resize;
+}
+
+:-moz-native-anonymous .geometry-editor-handler-right,
+:-moz-native-anonymous .geometry-editor-handler-left {
+  cursor: ew-resize;
+}
+
+:-moz-native-anonymous [dragging] .geometry-editor-handler-top,
+:-moz-native-anonymous [dragging] .geometry-editor-handler-right,
+:-moz-native-anonymous [dragging] .geometry-editor-handler-bottom,
+:-moz-native-anonymous [dragging] .geometry-editor-handler-left {
+  cursor: grabbing;
+}
+
+:-moz-native-anonymous .geometry-editor-handler-top.dragging,
+:-moz-native-anonymous .geometry-editor-handler-right.dragging,
+:-moz-native-anonymous .geometry-editor-handler-bottom.dragging,
+:-moz-native-anonymous .geometry-editor-handler-left.dragging {
+  fill: var(--highlighter-guide-color);
+}
+
+:-moz-native-anonymous .geometry-editor-label-bubble {
+  fill: var(--highlighter-bubble-background-color);
+  shape-rendering: crispEdges;
+}
+
+:-moz-native-anonymous .geometry-editor-label-text {
+  fill: var(--highlighter-bubble-text-color);
+  font: var(--highlighter-font-family);
+  font-size: 10px;
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+/* Rulers Highlighter */
+
+:-moz-native-anonymous .rulers-highlighter-elements {
+  shape-rendering: crispEdges;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+:-moz-native-anonymous .rulers-highlighter-elements > g {
+  opacity: 0.8;
+}
+
+:-moz-native-anonymous .rulers-highlighter-elements > g > rect {
+  fill: #fff;
+}
+
+:-moz-native-anonymous .rulers-highlighter-ruler-graduations {
+  stroke: #bebebe;
+}
+
+:-moz-native-anonymous .rulers-highlighter-ruler-markers {
+  stroke: #202020;
+}
+
+:-moz-native-anonymous .rulers-highlighter-horizontal-labels > text,
+:-moz-native-anonymous .rulers-highlighter-vertical-labels > text {
+  stroke: none;
+  fill: #202020;
+  font: var(--highlighter-font-family);
+  font-size: 9px;
+  dominant-baseline: hanging;
+}
+
+:-moz-native-anonymous .rulers-highlighter-horizontal-labels > text {
+  text-anchor: start;
+}
+
+:-moz-native-anonymous .rulers-highlighter-vertical-labels > text {
+  transform: rotate(-90deg);
+  text-anchor: end;
+}
+
+:-moz-native-anonymous .viewport-size-highlighter-viewport-infobar-container {
+  shape-rendering: crispEdges;
+  background-color: rgba(255, 255, 255, 0.7);
+  font: var(--highlighter-font-family);
+  position: fixed;
+  top: 30px;
+  right: 0px;
+  font-size: 12px;
+  padding: 4px;
+}
+
+/* Measuring Tool Highlighter */
+
+:-moz-native-anonymous .measuring-tool-tool {
+  pointer-events: auto;
+}
+
+:-moz-native-anonymous .measuring-tool-root {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: auto;
+  cursor: crosshair;
+}
+
+:-moz-native-anonymous .measuring-tool-elements {
+  position: absolute;
+}
+
+:-moz-native-anonymous .measuring-tool-root path {
+  shape-rendering: geometricPrecision;
+  pointer-events: auto;
+}
+
+:-moz-native-anonymous .measuring-tool-root .measuring-tool-box-path,
+:-moz-native-anonymous .measuring-tool-root .measuring-tool-diagonal-path {
+  fill: rgba(135, 206, 235, 0.6);
+  stroke: var(--highlighter-guide-color);
+}
+
+:-moz-native-anonymous .measuring-tool-root circle {
+  stroke: var(--highlighter-guide-color);
+  stroke-width: 2px;
+  fill: #fff;
+  vector-effect: non-scaling-stroke;
+}
+
+:-moz-native-anonymous .measuring-tool-handler-top,
+:-moz-native-anonymous .measuring-tool-handler-bottom {
+  cursor: ns-resize;
+}
+
+:-moz-native-anonymous .measuring-tool-handler-right,
+:-moz-native-anonymous .measuring-tool-handler-left {
+  cursor: ew-resize;
+}
+
+:-moz-native-anonymous .measuring-tool-handler-topleft,
+:-moz-native-anonymous .measuring-tool-handler-bottomright {
+  cursor: nwse-resize;
+}
+
+:-moz-native-anonymous .measuring-tool-handler-topright,
+:-moz-native-anonymous .measuring-tool-handler-bottomleft {
+  cursor: nesw-resize;
+}
+
+:-moz-native-anonymous .mirrored .measuring-tool-handler-topleft,
+:-moz-native-anonymous .mirrored .measuring-tool-handler-bottomright {
+  cursor: nesw-resize;
+}
+
+:-moz-native-anonymous .mirrored .measuring-tool-handler-topright,
+:-moz-native-anonymous .mirrored .measuring-tool-handler-bottomleft {
+  cursor: nwse-resize;
+}
+
+:-moz-native-anonymous [class^=measuring-tool-handler].dragging {
+  fill: var(--highlighter-guide-color);
+}
+
+:-moz-native-anonymous .dragging .measuring-tool-box-path,
+:-moz-native-anonymous .dragging .measuring-tool-diagonal-path {
+  opacity: 0.45;
+}
+
+:-moz-native-anonymous .measuring-tool-label-size,
+:-moz-native-anonymous .measuring-tool-label-position {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  border-radius: 4px;
+  padding: 4px;
+  white-space: pre-line;
+  font: var(--highlighter-font-family);
+  font-size: 10px;
+  pointer-events: none;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+:-moz-native-anonymous .measuring-tool-label-position {
+  color: #fff;
+  background: hsla(214, 13%, 24%, 0.8);
+}
+
+:-moz-native-anonymous .measuring-tool-label-size {
+  color: var(--highlighter-bubble-text-color);
+  background: var(--highlighter-bubble-background-color);
+  border: 1px solid var(--highlighter-bubble-border-color);
+  line-height: 1.5em;
+}
+
+:-moz-native-anonymous [class^=measuring-tool-guide] {
+  stroke: var(--highlighter-guide-color);
+  stroke-dasharray: 5 3;
+  shape-rendering: crispEdges;
+}
+
+/* Eye Dropper */
+
+:-moz-native-anonymous .eye-dropper-root {
+  --magnifier-width: 96px;
+  --magnifier-height: 96px;
+  /* Width accounts for all color formats (hsl being the longest) */
+  --label-width: 160px;
+  --label-height: 23px;
+  --background-color: #e0e0e0;
+  color: #333;
+
+  position: fixed;
+  /* Tool start position. This should match the X/Y defines in JS */
+  top: 100px;
+  left: 100px;
+
+  /* Prevent interacting with the page when hovering and clicking */
+  pointer-events: auto;
+
+  /* Offset the UI so it is centered around the pointer */
+  transform: translate(
+    calc(var(--magnifier-width) / -2),
+    calc(var(--magnifier-height) / -2)
+  );
+
+  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
+
+  /* We don't need the UI to be reversed in RTL locales, otherwise the # would appear
+     to the right of the hex code. Force LTR */
+  direction: ltr;
+}
+
+:-moz-native-anonymous .eye-dropper-canvas {
+  image-rendering: -moz-crisp-edges;
+  cursor: none;
+  width: var(--magnifier-width);
+  height: var(--magnifier-height);
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px var(--background-color);
+  display: block;
+}
+
+:-moz-native-anonymous .eye-dropper-color-container {
+  background-color: var(--background-color);
+  border-radius: 2px;
+  width: var(--label-width);
+  height: var(--label-height);
+  position: relative;
+
+  --label-horizontal-center: translateX(
+    calc((var(--magnifier-width) - var(--label-width)) / 2)
+  );
+  --label-horizontal-left: translateX(
+    calc((-1 * var(--label-width) + var(--magnifier-width) / 2))
+  );
+  --label-horizontal-right: translateX(calc(var(--magnifier-width) / 2));
+  --label-vertical-top: translateY(
+    calc((-1 * var(--magnifier-height)) - var(--label-height))
+  );
+
+  /* By default the color label container sits below the canvas.
+     Here we just center it horizontally */
+  transform: var(--label-horizontal-center);
+  transition: transform 0.1s ease-in-out;
+}
+
+/* If there isn't enough space below the canvas, we move the label container to the top */
+:-moz-native-anonymous .eye-dropper-root[top] .eye-dropper-color-container {
+  transform: var(--label-horizontal-center) var(--label-vertical-top);
+}
+
+/* If there isn't enough space right of the canvas to horizontally center the label
+   container, offset it to the left */
+:-moz-native-anonymous .eye-dropper-root[left] .eye-dropper-color-container {
+  transform: var(--label-horizontal-left);
+}
+:-moz-native-anonymous
+  .eye-dropper-root[left][top]
+  .eye-dropper-color-container {
+  transform: var(--label-horizontal-left) var(--label-vertical-top);
+}
+
+/* If there isn't enough space left of the canvas to horizontally center the label
+   container, offset it to the right */
+:-moz-native-anonymous .eye-dropper-root[right] .eye-dropper-color-container {
+  transform: var(--label-horizontal-right);
+}
+:-moz-native-anonymous
+  .eye-dropper-root[right][top]
+  .eye-dropper-color-container {
+  transform: var(--label-horizontal-right) var(--label-vertical-top);
+}
+
+:-moz-native-anonymous .eye-dropper-color-preview {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  inset-inline-start: 3px;
+  inset-block-start: 3px;
+  box-shadow: 0px 0px 0px black;
+  border: solid 1px #fff;
+}
+
+:-moz-native-anonymous .eye-dropper-color-value {
+  text-shadow: 1px 1px 1px #fff;
+  font: var(--highlighter-font-family);
+  font-size: var(--highlighter-font-size);
+  text-align: center;
+  padding: 4px 0;
+}
+
+/* Paused Debugger Overlay */
+
+:-moz-native-anonymous .paused-dbg-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  zoom: 1;
+  right: 0;
+  bottom: 0;
+
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  /* We don't have access to DevTools themes here, but some of these colors come from the
+     themes. Theme variable names are given in comments. */
+  --text-color: #585959; /* --theme-body-color-alt */
+  --toolbar-background: #fcfcfc; /* --theme-toolbar-background */
+  --toolbar-border: #dde1e4; /* --theme-splitter-color */
+  --toolbar-box-shadow: 0 2px 2px 0 rgba(155, 155, 155, 0.26); /* --rdm-box-shadow */
+  --overlay-background: #dde1e4a8;
+}
+
+:-moz-native-anonymous .paused-dbg-root[overlay] {
+  background-color: var(--overlay-background);
+  pointer-events: auto;
+}
+
+:-moz-native-anonymous .paused-dbg-toolbar {
+  /* Show the toolbar at the top, but not too high to prevent it overlaping OS toolbar on Android */
+  margin-top: 30px;
+  display: inline-flex;
+  user-select: none;
+
+  color: var(--text-color);
+  box-shadow: var(--toolbar-box-shadow);
+  background-color: var(--toolbar-background);
+  border: 1px solid var(--toolbar-border);
+  border-radius: 4px;
+
+  font: var(--highlighter-font-family);
+  font-size: var(--highlighter-font-size);
+}
+
+:-moz-native-anonymous .paused-dbg-toolbar button {
+  margin: 8px 4px 6px 6px;
+  width: 16px;
+  height: 16px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 16px 16px;
+  background-color: var(--text-color);
+
+  border: 0px;
+  appearance: none;
+}
+
+:-moz-native-anonymous .paused-dbg-divider {
+  width: 1px;
+  height: 16px;
+  margin-top: 10px;
+  background-color: var(--toolbar-border);
+}
+
+:-moz-native-anonymous .paused-dbg-reason,
+:-moz-native-anonymous .paused-dbg-step-button-wrapper,
+:-moz-native-anonymous .paused-dbg-resume-button-wrapper {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+:-moz-native-anonymous .paused-dbg-step-button-wrapper,
+:-moz-native-anonymous .paused-dbg-resume-button-wrapper {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+:-moz-native-anonymous button.paused-dbg-step-button {
+  margin-left: 6px;
+  margin-right: 6px;
+  mask-image: url(chrome://devtools/content/shared/images/stepOver.svg);
+  padding: 0;
+}
+
+:-moz-native-anonymous button.paused-dbg-resume-button {
+  margin-right: 6px;
+  mask-image: url(chrome://devtools/content/shared/images/resume.svg);
+  padding: 0;
+}
+
+:-moz-native-anonymous .paused-dbg-step-button-wrapper.hover,
+:-moz-native-anonymous .paused-dbg-resume-button-wrapper.hover {
+  background-color: var(--toolbar-border);
+  border-radius: 2px;
+}
+
+:-moz-native-anonymous .paused-dbg-reason {
+  padding: 3px 16px;
+  margin: 8px 0px;
+  font: var(--highlighter-font-family);
+  font-size: var(--highlighter-font-size);
+}
+
+
+/* Remote Node Picker Notice Highlighter */
+
+:-moz-native-anonymous #node-picker-notice-root {
+  position: fixed;
+  max-width: 100vw;
+  /* Position at the bottom of the screen so it doesn't get into the user's way */
+  bottom: 0;
+  left: 0;
+  right: 0;
+  zoom: 1;
+
+  z-index: 2;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  /* We don't have access to DevTools themes here, but some of these colors come from the
+     themes. Theme variable names are given in comments. */
+  --text-color: #585959; /* --theme-body-color-alt */
+  --toolbar-background: #fcfcfc; /* --theme-toolbar-background */
+  --toolbar-border: #dde1e4; /* --theme-splitter-color */
+  --toolbar-button-hover-background: rgba(12, 12, 13, 0.15); /* --theme-toolbarbutton-hover-background */
+  --toolbar-box-shadow: 0 2px 2px 0 rgba(155, 155, 155, 0.26); /* --rdm-box-shadow */
+}
+
+:-moz-native-anonymous #node-picker-notice-root[overlay] {
+  pointer-events: auto;
+}
+
+:-moz-native-anonymous #node-picker-notice-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  padding: 8px 16px;
+
+  color: var(--text-color);
+  box-shadow: var(--toolbar-box-shadow);
+  background-color: var(--toolbar-background);
+  border: 1px solid var(--toolbar-border);
+  border-radius: 2px;
+
+  font: var(--highlighter-font-family);
+  font-size: var(--highlighter-font-size);
+
+  user-select: none;
+}
+
+:-moz-native-anonymous #node-picker-notice-info {
+  font: var(--highlighter-font-family);
+  font-size: var(--highlighter-font-size);
+  text-align: center;
+}
+
+:-moz-native-anonymous #node-picker-notice-icon {
+  width: 16px;
+  height: 16px;
+
+  background-image: url(chrome://devtools/content/shared/images/command-pick.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+:-moz-native-anonymous #node-picker-notice-icon.touch {
+  background-image: url(chrome://devtools/content/shared/images/command-pick-remote-touch.svg);
+}
+
+
+:-moz-native-anonymous #node-picker-notice-hide-button {
+  border: 0px;
+  border-radius: 2px;
+  appearance: none;
+  background-color: var(--toolbar-border);
+  color: currentColor;
+  font-size: 1em;
+  padding-inline: 4px;
+}
+
+/* We can't use :hover as it wouldn't work if the page is paused, so we add a specific class for this */
+:-moz-native-anonymous #node-picker-notice-hide-button.hover {
+  background-color: var(--toolbar-button-hover-background);
+}
+
+/* Shapes highlighter */
+
+:-moz-native-anonymous .shapes-root {
+  pointer-events: none;
+}
+
+:-moz-native-anonymous .shapes-shape-container {
+  position: absolute;
+  overflow: visible;
+}
+
+:-moz-native-anonymous .shapes-polygon,
+:-moz-native-anonymous .shapes-ellipse,
+:-moz-native-anonymous .shapes-rect,
+:-moz-native-anonymous .shapes-bounding-box,
+:-moz-native-anonymous .shapes-rotate-line,
+:-moz-native-anonymous .shapes-quad {
+  fill: transparent;
+  stroke: var(--highlighter-guide-color);
+  shape-rendering: geometricPrecision;
+  vector-effect: non-scaling-stroke;
+}
+
+:-moz-native-anonymous .shapes-markers {
+  fill: #fff;
+}
+
+:-moz-native-anonymous .shapes-markers-outline {
+  fill: var(--highlighter-guide-color);
+}
+
+:-moz-native-anonymous .shapes-marker-hover {
+  fill: var(--highlighter-guide-color);
+}
+
+/* Accessible highlighter */
+
+:-moz-native-anonymous .accessible-infobar {
+  min-width: unset;
+}
+
+:-moz-native-anonymous .accessible-infobar-text {
+  display: grid;
+  grid-template-areas:
+    "role name"
+    "audit audit";
+  grid-template-columns: min-content 1fr;
+}
+
+:-moz-native-anonymous .accessible-infobar-role {
+  grid-area: role;
+  color: #9cdcfe;
+}
+
+:-moz-native-anonymous .accessible-infobar-name {
+  grid-area: name;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit {
+  grid-area: audit;
+  padding-top: 5px;
+  padding-bottom: 2px;
+}
+
+:-moz-native-anonymous .accessible-bounds {
+  fill: var(--highlighter-accessibility-bounds-color);
+  opacity: var(--highlighter-accessibility-bounds-opacity);
+}
+
+@media (prefers-reduced-motion) {
+  :-moz-native-anonymous .use-simple-highlighters .accessible-bounds {
+    fill: none;
+    stroke: var(--highlighter-accessibility-bounds-color);
+    stroke-width: 3;
+  }
+}
+
+:-moz-native-anonymous .accessible-infobar-name,
+:-moz-native-anonymous .accessible-infobar-audit {
+  color: var(--highlighter-infobar-color);
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:empty::before,
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:empty::after,
+:-moz-native-anonymous .accessible-infobar-name:empty {
+  display: none;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio::before {
+  content: "";
+  height: 8px;
+  width: 8px;
+  display: inline-flex;
+  background-color: var(--accessibility-highlighter-contrast-ratio-color);
+  box-shadow: 0 0 0 1px var(--grey-40),
+    4px 3px var(--accessibility-highlighter-contrast-ratio-bg),
+    4px 3px 0 1px var(--grey-40);
+  margin-inline-start: 3px;
+  margin-inline-end: 9px;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio::after {
+  margin-inline-start: 2px;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.AA::after,
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.AAA::after {
+  color: #90E274;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-audit::before,
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.FAIL::after {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  content: "";
+  vertical-align: -2px;
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.FAIL:after {
+  color: #E57180;
+  margin-inline-start: 3px;
+  background-image: url(chrome://devtools/skin/images/error-small.svg);
+  fill: var(--red-40);
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.AA::after {
+  content: "AA\2713";
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.AAA::after {
+  content: "AAA\2713";
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio-label,
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio-separator::before {
+  margin-inline-end: 3px;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio-separator::before {
+  content: "-";
+  margin-inline-start: 3px;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-audit {
+  display: block;
+  padding-block-end: 5px;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-audit:last-child {
+  padding-block-end: 0;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-audit::before {
+  margin-inline-end: 4px;
+  background-image: none;
+  fill: currentColor;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-audit.FAIL::before {
+  background-image: url(chrome://devtools/skin/images/error-small.svg);
+  fill: var(--red-40);
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-audit.WARNING::before {
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  fill: var(--yellow-60);
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-audit.BEST_PRACTICES::before {
+  background-image: url(chrome://devtools/skin/images/info-small.svg);
+}
+
+:-moz-native-anonymous .accessible-infobar-name {
+  border-inline-start: 1px solid #5a6169;
+  margin-inline-start: 6px;
+  padding-inline-start: 6px;
+}
+
+/* Tabbing-order highlighter */
+
+:-moz-native-anonymous .tabbing-order-infobar {
+  min-width: unset;
+}
+
+:-moz-native-anonymous .tabbing-order .tabbing-order-infobar-container {
+  font-size:calc(var(--highlighter-font-size) + 2px);
+}
+
+:-moz-native-anonymous .tabbing-order .tabbing-order-bounds {
+  position: absolute;
+  display: block;
+  outline: 2px solid #000;
+  outline-offset: -2px;
+}
+
+:-moz-native-anonymous .tabbing-order.focused .tabbing-order-bounds {
+  outline-color: var(--blue-60);
+}
+
+:-moz-native-anonymous .tabbing-order.focused .tabbing-order-infobar {
+  background-color: var(--blue-60);
+}
+
+:-moz-native-anonymous .tabbing-order.focused .tabbing-order-infobar-text {
+  text-decoration: underline;
+}
+
+:-moz-native-anonymous .tabbing-order.focused .tabbing-order-infobar:after {
+  border-top-color: var(--blue-60);
+  border-bottom-color: var(--blue-60);
+}
-- 
cgit v1.2.3