Bugzilla

After looking at this further it looks like the logic for positioning the infobar is as follows:

* it is sized such that it would in theory fit in the viewport
* its left-most boundary is aligned with the center of the element it points ti
* it is then moved to the left so its center point is aligned with the center of the element. This is done by setting this on the infobar container's first child: `positioned:relative;left:-50%`.

The problem with this is that this leaves the infobar container where it was, so not moved to the left, so sometimes overflowing the page.

If instead we used a css transform, this might fix the issue.
Here's something that seems to work:

```diff
--- a/devtools/server/actors/highlighters/utils/markup.js
+++ b/devtools/server/actors/highlighters/utils/markup.js
@@ -672,13 +672,13 @@ function moveInfobar(container, bounds, 
   // We need to scale the infobar Independently from the highlighter's container;
   // otherwise the `position: fixed` won't work, since "any value other than `none` for
   // the transform, results in the creation of both a stacking context and a containing
   // block. The object acts as a containing block for fixed positioned descendants."
   // (See https://www.w3.org/TR/css-transforms-1/#transform-rendering)
   container.setAttribute("style", `
     position:${position};
     transform-origin: 0 0;
-    transform: scale(${1 / zoom}) translate(${left}px, ${top}px)`);
+    transform: scale(${1 / zoom}) translate(calc(${left}px - 50%), ${top}px)`);
 
   container.setAttribute("position", positionAttribute);
 }
 exports.moveInfobar = moveInfobar;
```

After looking at this further it looks like the logic for positioning the infobar is as follows:

* it is sized such that it would in theory fit in the viewport
* its left-most boundary is aligned with the center of the element it points ti
* it is then moved to the left so its center point is aligned with the center of the element. This is done by setting this on the infobar container's first child: `positioned:relative;left:-50%`.

The problem with this is that this leaves the infobar container where it was, so not moved to the left, so sometimes overflowing the page.

If instead we used a css transform, this might fix the issue.
Here's something that seems to work:

```diff
--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -137,19 +137,16 @@
 
   font: var(--highlighter-font-family);
   font-size: var(--highlighter-font-size);
 }
 
 :-moz-native-anonymous [class$=infobar] {
   position: relative;
 
-  /* Centering the infobar in the container */
-  left: -50%;
-
   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;

--- a/devtools/server/actors/highlighters/utils/markup.js
+++ b/devtools/server/actors/highlighters/utils/markup.js
@@ -672,13 +672,13 @@ function moveInfobar(container, bounds, 
   // We need to scale the infobar Independently from the highlighter's container;
   // otherwise the `position: fixed` won't work, since "any value other than `none` for
   // the transform, results in the creation of both a stacking context and a containing
   // block. The object acts as a containing block for fixed positioned descendants."
   // (See https://www.w3.org/TR/css-transforms-1/#transform-rendering)
   container.setAttribute("style", `
     position:${position};
     transform-origin: 0 0;
-    transform: scale(${1 / zoom}) translate(${left}px, ${top}px)`);
+    transform: scale(${1 / zoom}) translate(calc(${left}px - 50%), ${top}px)`);
 
   container.setAttribute("position", positionAttribute);
 }
 exports.moveInfobar = moveInfobar;

```