Bug 1457086 - Bump the markup badges font-size to 10px on 1dppx screens and 9px for higher resolution screens. r=rcaliman

devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js

@@ -51,8 +51,8 @@ async function runTests(inspector) {
   const onTooltipHidden = tooltip.once("hidden");
 
   info("Click on another tag to hide the event tooltip");
-  const h1 = await getContainerForSelector("h1", inspector);
-  const tag = h1.elt.querySelector(".tag");
+  const script = await getContainerForSelector("script", inspector);
+  const tag = script.elt.querySelector(".tag");
   EventUtils.synthesizeMouseAtCenter(tag, {}, inspector.markup.doc.defaultView);
 
   await onTooltipHidden;

devtools/client/themes/markup.css

@@ -394,7 +394,7 @@ ul.children + .tag-line::before {
 /* Markup Badges */
 .markup-badge {
   display: inline-block;
-  font-size: 9px;
+  font-size: 10px;
   font-weight: normal;
   line-height: 11px;
   vertical-align: 1px;
@@ -407,6 +407,12 @@ ul.children + .tag-line::before {
   color: var(--markup-badge-color);
 }
 
+@media (min-resolution: 1.1dppx) {
+  .markup-badge {
+    font-size: 9px;
+  }
+}
+
 .markup-badge.active {
   background-color: var(--markup-badge-active-background-color);
   border-color: var(--theme-selection-color);