[FIX] devtools: Fix bad computation of highlight boxes on the page

This commit adds box-sizing: border-box to the highlight elements
created by the devtools on the page. This was making some of the
boxes overflow on some pages (like on POS sessions) because
the border-box box-sizing was not the default behavior on these
pages.
This commit is contained in:
Julien Carion (juca)
2023-03-30 14:29:47 +02:00
committed by Géry Debongnie
parent 94ae940e82
commit 23acf203e9
@@ -507,6 +507,7 @@
highlight.style.left = `${left}px`;
highlight.style.width = `${width}px`;
highlight.style.height = `${height}px`;
highlight.style.boxSizing = "border-box";
highlight.style.position = "fixed";
highlight.style.backgroundColor = "rgba(15, 139, 245, 0.4)";
highlight.style.borderStyle = "solid";
@@ -524,6 +525,7 @@
highlightMargins.style.height = `${height + marginBottom + marginTop}px`;
highlightMargins.style.position = "fixed";
highlightMargins.style.borderStyle = "solid";
highlightMargins.style.boxSizing = "border-box";
highlightMargins.style.borderWidth = `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`;
highlightMargins.style.borderColor = "rgba(241, 179, 121, 0.4)";
highlightMargins.style.zIndex = "10000";
@@ -537,6 +539,7 @@
highlight.style.left = `${left}px`;
highlight.style.width = `${width}px`;
highlight.style.height = `${height}px`;
highlight.style.boxSizing = "border-box";
highlight.style.position = "fixed";
highlight.style.backgroundColor = "rgba(15, 139, 245, 0.4)";
highlight.style.zIndex = "10000";