Bug 1498115 - Part 2: Add badges to show the flex-direction and flex-wrap properties of the flex container. r=pbro

We move the .markup-badge styles from markup.css to inspector.css instead of common.css
for a smaller import size in the markup.xhtml.

devtools/client/inspector/flexbox/components/FlexContainer.js

@@ -75,9 +75,13 @@ class FlexContainer extends PureComponent {
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
     } = this.props;
-    const { nodeFront } = flexContainer;
+    const {
+      nodeFront,
+      properties,
+    } = flexContainer;
 
     return createElement(Fragment, null,
+      dom.div({ className: "flex-header-container-label" },
         Rep({
           defaultRep: ElementNode,
           mode: MODE.TINY,
@@ -104,6 +108,23 @@ class FlexContainer extends PureComponent {
           },
           color
         )
+      ),
+      dom.div({ className: "flex-header-container-properties" },
+        dom.div(
+          {
+            className: "inspector-badge",
+            title: `flex-direction: ${properties["flex-direction"]}`,
+          },
+          properties["flex-direction"]
+        ),
+        dom.div(
+          {
+            className: "inspector-badge",
+            title: `flex-wrap: ${properties["flex-wrap"]}`,
+          },
+          properties["flex-wrap"]
+        )
+      )
     );
   }
 }

devtools/client/inspector/flexbox/test/browser.ini

@@ -20,6 +20,7 @@ support-files =
 [browser_flexbox_accordion_state.js]
 [browser_flexbox_container_and_item.js]
 [browser_flexbox_container_element_rep.js]
+[browser_flexbox_container_properties.js]
 [browser_flexbox_empty_state.js]
 [browser_flexbox_highlighter_color_picker_on_ESC.js]
 [browser_flexbox_highlighter_color_picker_on_RETURN.js]

devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js

@@ -0,0 +1,65 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex container properties are shown when a flex container is selected.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #container1 {
+      display: flex;
+    }
+
+    #container2 {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+    }
+  </style>
+  <div id="container1">
+    <div id="item"></div>
+  </div>
+  <div id="container2"></div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Selecting the flex container #container1 and checking the values of the flex " +
+    "container properties for #container1.");
+  let onFlexContainerPropertiesRendered = waitForDOM(doc,
+    ".flex-header-container-properties");
+  await selectNode("#container1", inspector);
+  let [flexContainerProperties] = await onFlexContainerPropertiesRendered;
+
+  ok(flexContainerProperties, "The flex container properties is rendered.");
+  is(flexContainerProperties.children[0].textContent, "row",
+    "Got expected flex-direction.");
+  is(flexContainerProperties.children[1].textContent, "nowrap",
+    "Got expected flex-wrap.");
+
+  info("Selecting a flex item and expecting the flex container properties to not be " +
+    "shown.");
+  const onFlexHeaderRendered = waitForDOM(doc, ".flex-header");
+  await selectNode("#item", inspector);
+  const [flexHeader] = await onFlexHeaderRendered;
+
+  ok(!flexHeader.querySelector(".flex-header-container-properties"),
+    "The flex container properties is not shown in the header.");
+
+  info("Selecting the flex container #container2 and checking the values of the flex " +
+    "container properties for #container2.");
+  onFlexContainerPropertiesRendered = waitForDOM(doc,
+    ".flex-header-container-properties");
+  await selectNode("#container2", inspector);
+  [flexContainerProperties] = await onFlexContainerPropertiesRendered;
+
+  ok(flexContainerProperties, "The flex container properties is rendered.");
+  is(flexContainerProperties.children[0].textContent, "column",
+    "Got expected flex-direction.");
+  is(flexContainerProperties.children[1].textContent, "wrap",
+    "Got expected flex-wrap.");
+});

devtools/client/inspector/index.xhtml

@@ -10,6 +10,7 @@
 
   <link rel="stylesheet" href="chrome://devtools/skin/breadcrumbs.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/inspector.css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/badge.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/rules.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/changes.css"/>

devtools/client/inspector/markup/markup.xhtml

@@ -7,6 +7,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/badge.css" type="text/css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/markup.css" type="text/css"/>
   <link rel="stylesheet" href="chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css" type="text/css"/>
   <link rel="stylesheet" href="chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css" type="text/css"/>

devtools/client/inspector/markup/test/browser_markup_display_node_01.js

@@ -41,7 +41,7 @@ add_task(async function() {
   await selectNode("#grid", inspector);
   const gridContainer = await getContainerForSelector("#grid", inspector);
   const gridDisplayNode = gridContainer.elt.querySelector(
-    ".markup-badge[data-display]");
+    ".inspector-badge.interactive[data-display]");
   ok(gridDisplayNode, "#grid display node is shown.");
   is(gridDisplayNode.textContent, "grid", "Got the correct display type for #grid.");
 
@@ -49,7 +49,7 @@ add_task(async function() {
   await selectNode("#subgrid", inspector);
   const subgridContainer = await getContainerForSelector("#subgrid", inspector);
   const subgridDisplayNode = subgridContainer.elt.querySelector(
-    ".markup-badge[data-display]");
+    ".inspector-badge[data-display]");
   ok(subgridDisplayNode, "#subgrid display node is shown");
   is(subgridDisplayNode.textContent, "subgrid",
     "Got the correct display type for #subgrid");
@@ -58,7 +58,7 @@ add_task(async function() {
   await selectNode("#flex", inspector);
   const flexContainer = await getContainerForSelector("#flex", inspector);
   const flexDisplayNode = flexContainer.elt.querySelector(
-    ".markup-badge[data-display]");
+    ".inspector-badge.interactive[data-display]");
   ok(flexDisplayNode, "#flex display node is shown.");
   is(flexDisplayNode.textContent, "flex", "Got the correct display type for #flex");
 
@@ -66,13 +66,13 @@ add_task(async function() {
   await selectNode("#block", inspector);
   const blockContainer = await getContainerForSelector("#block", inspector);
   const blockDisplayNode = blockContainer.elt.querySelector(
-    ".markup-badge[data-display]");
+    ".inspector-badge.interactive[data-display]");
   ok(!blockDisplayNode, "#block display node is hidden.");
 
   info("Check the display node is hidden for span.");
   await selectNode("span", inspector);
   const spanContainer = await getContainerForSelector("span", inspector);
   const spanDisplayNode = spanContainer.elt.querySelector(
-    ".markup-badge[data-display]");
+    ".inspector-badge.interactive[data-display]");
   ok(!spanDisplayNode, "span display node is hidden.");
 });

devtools/client/inspector/markup/test/browser_markup_display_node_02.js

@@ -112,7 +112,8 @@ async function runTestData(inspector, testActor,
   await selectNode(selector, inspector);
   const container = await getContainerForSelector(selector, inspector);
 
-  const beforeBadge = container.elt.querySelector(".markup-badge[data-display]");
+  const beforeBadge = container.elt.querySelector(
+    ".inspector-badge.interactive[data-display]");
   is(!!beforeBadge, before.visible,
     `Display badge is visible as expected for ${selector}: ${before.visible}`);
   if (before.visible) {
@@ -137,7 +138,8 @@ async function runTestData(inspector, testActor,
   }
   ok(foundContainer, "Container is part of the list of changed nodes");
 
-  const afterBadge = container.elt.querySelector(".markup-badge[data-display]");
+  const afterBadge = container.elt.querySelector(
+    ".inspector-badge.interactive[data-display]");
   is(!!afterBadge, after.visible,
     `Display badge is visible as expected for ${selector}: ${after.visible}`);
   if (after.visible) {

devtools/client/inspector/markup/test/browser_markup_events-overflow.js

@@ -34,7 +34,8 @@ add_task(async function() {
   const { inspector } = await openInspectorForURL(TEST_URL);
 
   const markupContainer = await getContainerForSelector("#events", inspector);
-  const evHolder = markupContainer.elt.querySelector(".markup-badge[data-event]");
+  const evHolder = markupContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-event]");
   const tooltip = inspector.markup.eventDetailsTooltip;
 
   info("Clicking to open event tooltip.");

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

@@ -32,7 +32,8 @@ add_task(async function() {
 
 async function runTests(inspector) {
   const markupContainer = await getContainerForSelector("#events", inspector);
-  const evHolder = markupContainer.elt.querySelector(".markup-badge[data-event]");
+  const evHolder = markupContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-event]");
   const tooltip = inspector.markup.eventDetailsTooltip;
 
   info("Clicking to open event tooltip.");

devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js

@@ -27,10 +27,12 @@ add_task(async function() {
   await inspector.markup.expandAll();
 
   const container1 = await getContainerForSelector("#d1", inspector);
-  const evHolder1 = container1.elt.querySelector(".markup-badge[data-event]");
+  const evHolder1 = container1.elt.querySelector(
+    ".inspector-badge.interactive[data-event]");
 
   const container2 = await getContainerForSelector("#d2", inspector);
-  const evHolder2 = container2.elt.querySelector(".markup-badge[data-event]");
+  const evHolder2 = container2.elt.querySelector(
+    ".inspector-badge.interactive[data-event]");
 
   const tooltip = inspector.markup.eventDetailsTooltip;
 

devtools/client/inspector/markup/test/browser_markup_flex_display_badge.js

@@ -26,7 +26,8 @@ add_task(async function() {
   info("Check the flex display badge is shown and not active.");
   await selectNode("#flex", inspector);
   const flexContainer = await getContainerForSelector("#flex", inspector);
-  const flexDisplayBadge = flexContainer.elt.querySelector(".markup-badge[data-display]");
+  const flexDisplayBadge = flexContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]");
   ok(!flexDisplayBadge.classList.contains("active"), "flex display badge is not active.");
   ok(flexDisplayBadge.classList.contains("interactive"),
     "flex display badge is interactive.");

devtools/client/inspector/markup/test/browser_markup_grid_display_badge_01.js

@@ -22,7 +22,8 @@ add_task(async function() {
   info("Check the grid display badge is shown and not active.");
   await selectNode("#grid", inspector);
   const gridContainer = await getContainerForSelector("#grid", inspector);
-  const gridDisplayBadge = gridContainer.elt.querySelector(".markup-badge[data-display]");
+  const gridDisplayBadge = gridContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]");
   ok(!gridDisplayBadge.classList.contains("active"), "grid display badge is not active.");
   ok(gridDisplayBadge.classList.contains("interactive"),
     "grid display badge is interactive.");

devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js

@@ -35,9 +35,12 @@ add_task(async function() {
   const grid1 = await getContainerForSelector("#grid1", inspector);
   const grid2 = await getContainerForSelector("#grid2", inspector);
   const grid3 = await getContainerForSelector("#grid3", inspector);
-  const gridDisplayBadge1 = grid1.elt.querySelector(".markup-badge[data-display]");
+  const gridDisplayBadge1 = grid1.elt.querySelector(
-  const gridDisplayBadge2 = grid2.elt.querySelector(".markup-badge[data-display]");
+    ".inspector-badge.interactive[data-display]");
-  const gridDisplayBadge3 = grid3.elt.querySelector(".markup-badge[data-display]");
+  const gridDisplayBadge2 = grid2.elt.querySelector(
+    ".inspector-badge.interactive[data-display]");
+  const gridDisplayBadge3 = grid3.elt.querySelector(
+    ".inspector-badge.interactive[data-display]");
 
   info("Check the initial state of the grid display badges and grid highlighters");
   ok(!gridDisplayBadge1.classList.contains("active"),

devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger.js

@@ -63,7 +63,8 @@ async function runTest(inspector, toolbox, selector, contentMethod) {
   await selectNode(selector, inspector);
   const testFront = await getNodeFront(selector, inspector);
   const testContainer = inspector.markup.getContainer(testFront);
-  let customBadge = testContainer.elt.querySelector(".markup-badge[data-custom]");
+  let customBadge = testContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-custom]");
 
   // Verify that the "custom" badge and menu item are hidden.
   ok(!customBadge, "[custom] badge is hidden");
@@ -80,7 +81,8 @@ async function runTest(inspector, toolbox, selector, contentMethod) {
   // Test element should now have a custom element definition.
 
   // Check that the badge opens the debugger.
-  customBadge = testContainer.elt.querySelector(".markup-badge[data-custom]");
+  customBadge = testContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-custom]");
   ok(customBadge, "[custom] badge is visible");
 
   info("Click on the `custom` badge and verify that the debugger opens.");

devtools/client/inspector/markup/test/helper_events_test_runner.js

@@ -55,7 +55,8 @@ async function checkEventsForNode(test, inspector, testActor) {
     await beforeTest(inspector, testActor);
   }
 
-  const evHolder = container.elt.querySelector(".markup-badge[data-event]");
+  const evHolder = container.elt.querySelector(
+    ".inspector-badge.interactive[data-event]");
 
   if (expected.length === 0) {
     // If no event is expected, check that event bubble is hidden.

devtools/client/inspector/markup/views/element-editor.js

@@ -287,7 +287,7 @@ ElementEditor.prototype = {
 
   _createEventBadge: function() {
     this._eventBadge = this.doc.createElement("div");
-    this._eventBadge.classList.add("markup-badge");
+    this._eventBadge.className = "inspector-badge interactive";
     this._eventBadge.dataset.event = "true";
     this._eventBadge.textContent = "event";
     this._eventBadge.title = INSPECTOR_L10N.getStr("markupView.event.tooltiptext");
@@ -319,7 +319,7 @@ ElementEditor.prototype = {
 
   _createDisplayBadge: function() {
     this._displayBadge = this.doc.createElement("div");
-    this._displayBadge.classList.add("markup-badge");
+    this._displayBadge.className = "inspector-badge";
     this._displayBadge.addEventListener("click", this.onDisplayBadgeClick);
     // Badges order is [event][display][custom], insert display badge before custom.
     this.elt.insertBefore(this._displayBadge, this._customBadge);
@@ -343,6 +343,8 @@ ElementEditor.prototype = {
     } else if (displayType === "grid" || displayType === "inline-grid") {
       this._displayBadge.classList.toggle("interactive",
         this.highlighters.canGridHighlighterToggle(this.node));
+    } else {
+      this._displayBadge.classList.remove("interactive");
     }
   },
 
@@ -361,7 +363,7 @@ ElementEditor.prototype = {
 
   _createCustomBadge: function() {
     this._customBadge = this.doc.createElement("div");
-    this._customBadge.classList.add("markup-badge");
+    this._customBadge.className = "inspector-badge interactive";
     this._customBadge.dataset.custom = "true";
     this._customBadge.textContent = "custom…";
     this._customBadge.title = INSPECTOR_L10N.getStr("markupView.custom.tooltiptext");

devtools/client/jar.mn

@@ -179,6 +179,7 @@ devtools.jar:
     skin/images/dock-side-right.svg (themes/images/dock-side-right.svg)
     skin/images/dock-undock.svg (themes/images/dock-undock.svg)
     skin/floating-scrollbars-responsive-design.css (themes/floating-scrollbars-responsive-design.css)
+    skin/badge.css (themes/badge.css)
     skin/inspector.css (themes/inspector.css)
     skin/images/profiler-stopwatch.svg (themes/images/profiler-stopwatch.svg)
     skin/images/debugging-addons.svg (themes/images/debugging-addons.svg)

devtools/client/themes/badge.css

@@ -0,0 +1,70 @@
+/* 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/. */
+
+:root {
+  --badge-active-background-color: var(--blue-50);
+  --badge-active-border-color: #FFFFFFB3;
+  --badge-background-color: white;
+  --badge-border-color: #CACAD1;
+  --badge-color: var(--grey-60);
+  --badge-hover-background-color: #DFDFE8;
+  --badge-interactive-background-color: var(--grey-20);
+  --badge-interactive-color: var(--grey-90);
+}
+
+.theme-dark:root {
+  --badge-active-background-color: var(--blue-60);
+  --badge-active-border-color: #FFF6;
+  --badge-background-color: var(--grey-80);
+  --badge-border-color: var(--grey-50);
+  --badge-color: var(--grey-40);
+  --badge-hover-background-color: var(--grey-80);
+  --badge-interactive-background-color: var(--grey-70);
+  --badge-interactive-color: var(--grey-30);
+}
+
+/* Inspector badge */
+.inspector-badge {
+  display: inline-block;
+  /* 9px text is too blurry on low-resolution screens */
+  font-size: 10px;
+  font-weight: normal;
+  line-height: 10px;
+  height: 12px;
+  margin-top: 1px;
+  vertical-align: top;
+  border: 1px solid var(--badge-border-color);
+  border-radius: 3px;
+  padding: 0px 2px;
+  margin-inline-start: 5px;
+  -moz-user-select: none;
+  background-color: var(--badge-background-color);
+  color: var(--badge-color);
+  box-sizing: border-box;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .inspector-badge {
+    font-size: 9px;
+  }
+}
+
+/* Inspector badges that are interactive/clickable */
+.inspector-badge.interactive {
+  background-color: var(--badge-interactive-background-color);
+  color: var(--badge-interactive-color);
+  cursor: pointer;
+}
+
+.inspector-badge:not(.active).interactive:focus,
+.inspector-badge:not(.active).interactive:hover {
+  background-color: var(--badge-hover-background-color);
+}
+
+.inspector-badge.active,
+.inspector-badge.interactive.active {
+  background-color: var(--badge-active-background-color);
+  border-color: var(--badge-active-border-color);
+  color: var(--theme-selection-color);
+}

devtools/client/themes/layout.css

@@ -96,19 +96,6 @@
   flex-direction: column;
 }
 
-#layout-flexbox-container .flex-header-content:not(.flex-item-shown) {
-  overflow: hidden;
-  display: flex;
-}
-
-#layout-flexbox-container .flex-header-content:not(.flex-item-shown) .objectBox {
-  max-width: calc(100% - 20px);
-  margin-inline-end: 5px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
 /**
  * Header
  */
@@ -116,8 +103,7 @@
 .flex-header {
   display: flex;
   align-items: center;
-  height: 32px;
+  padding: 3px;
-  padding: 0 3px;
   border-block-end: 1px solid var(--theme-splitter-color);
 }
 
@@ -127,18 +113,44 @@
 }
 
 .flex-header-content {
+  display: flex;
   flex: 1;
-  padding-top: 2px;
+  padding: 2px 0;
   padding-inline-start: 20px;
   -moz-user-select: none;
 }
 
+.flex-header-content:not(.flex-item-shown) {
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.flex-header-content:not(.flex-item-shown) .objectBox {
+  max-width: calc(100% - 20px);
+  margin-inline-end: 5px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .flex-header-content.flex-item-shown {
-  display: flex;
   justify-content: center;
   padding: 0;
 }
 
+.flex-header-container-properties {
+  display: flex;
+}
+
+.flex-header-container-properties .inspector-badge:first-child {
+  margin-inline-start: 0;
+}
+
+.flex-header-container-label,
+.flex-header-container-properties {
+  padding: 3px 0;
+}
+
 /**
  * Flex Item List
  */

devtools/client/themes/markup.css

@@ -3,14 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
-  --markup-badge-active-background-color: var(--blue-50);
-  --markup-badge-active-border-color: #FFFFFFB3;
-  --markup-badge-background-color: white;
-  --markup-badge-border-color: #CACAD1;
-  --markup-badge-color: var(--grey-60);
-  --markup-badge-hover-background-color: #DFDFE8;
-  --markup-badge-interactive-background-color: var(--grey-20);
-  --markup-badge-interactive-color: var(--grey-90);
   --markup-hidden-attr-name-color: #BA89B8;
   --markup-hidden-attr-value-color: #5C6D87;
   --markup-hidden-punctuation-color: #909090;
@@ -19,14 +11,6 @@
 }
 
 .theme-dark:root {
-  --markup-badge-active-background-color: var(--blue-60);
-  --markup-badge-active-border-color: #FFF6;
-  --markup-badge-background-color: var(--grey-80);
-  --markup-badge-border-color: var(--grey-50);
-  --markup-badge-color: var(--grey-40);
-  --markup-badge-hover-background-color: var(--grey-80);
-  --markup-badge-interactive-background-color: var(--grey-70);
-  --markup-badge-interactive-color: var(--grey-30);
   --markup-hidden-attr-name-color: #B07EB3;
   --markup-hidden-attr-value-color: #9893A3;
   --markup-hidden-punctuation-color: #909090;
@@ -249,13 +233,13 @@ ul.children + .tag-line::before {
 .expandable.collapsed .markup-expand-badge::before {
   /* Display an ellipsis character in collapsed nodes that can be expanded. */
   content: "";
-  background-color: var(--markup-badge-interactive-background-color);
+  background-color: var(--badge-interactive-background-color);
   background-image: url(chrome://devtools/skin/images/more.svg);
   background-repeat: no-repeat;
   background-position: center;
-  border: 1px solid var(--markup-badge-border-color);
+  border: 1px solid var(--badge-border-color);
-  color: var(--markup-badge-color);
+  color: var(--badge-color);
-  fill: var(--markup-badge-interactive-color);
+  fill: var(--badge-interactive-color);
   display: block;
   width: 12px;
   height: 8px;
@@ -264,6 +248,11 @@ ul.children + .tag-line::before {
   -moz-context-properties: fill;
 }
 
+.expandable.collapsed .markup-expand-badge:focus::before,
+.expandable.collapsed .markup-expand-badge:hover::before {
+  background-color: var(--badge-hover-background-color);
+}
+
 /* Hide HTML void elements (img, hr, br, …) closing tag when the element is not
  * expanded (it can be if it has pseudo-elements attached) */
 .child.collapsed > .tag-line .void-element .close {
@@ -412,62 +401,3 @@ ul.children + .tag-line::before {
 .doctype {
   font-style: italic;
 }
-
-/* Markup Badges */
-.markup-badge {
-  display: inline-block;
-  /* 9px text is too blurry on low-resolution screens */
-  font-size: 10px;
-  font-weight: normal;
-  line-height: 10px;
-  height: 10px;
-  margin-top: 1px;
-  vertical-align: top;
-  border: 1px solid var(--markup-badge-border-color);
-  border-radius: 3px;
-  padding: 0px 2px;
-  margin-inline-start: 5px;
-  -moz-user-select: none;
-  background-color: var(--markup-badge-background-color);
-  color: var(--markup-badge-color);
-}
-
-@media (min-resolution: 1.1dppx) {
-  .markup-badge {
-    font-size: 9px;
-  }
-}
-
-/* Markup badges that are interactive/clickable */
-.markup-badge[data-custom],
-.markup-badge[data-display="flex"].interactive,
-.markup-badge[data-display="grid"].interactive,
-.markup-badge[data-display="inline-flex"].interactive,
-.markup-badge[data-display="inline-grid"].interactive,
-.markup-badge[data-event] {
-  background-color: var(--markup-badge-interactive-background-color);
-  color: var(--markup-badge-interactive-color);
-  cursor: pointer;
-}
-
-.markup-badge[data-display="flex"]:not(.active).interactive:focus,
-.markup-badge[data-display="flex"]:not(.active).interactive:hover,
-.markup-badge[data-display="grid"]:not(.active).interactive:focus,
-.markup-badge[data-display="grid"]:not(.active).interactive:hover,
-.markup-badge[data-display="inline-flex"]:not(.active).interactive:focus,
-.markup-badge[data-display="inline-flex"]:not(.active).interactive:hover,
-.markup-badge[data-display="inline-grid"]:not(.active).interactive:focus,
-.markup-badge[data-display="inline-grid"]:not(.active).interactive:hover,
-.markup-badge[data-event]:focus,
-.markup-badge[data-event]:hover,
-.expandable.collapsed .markup-expand-badge:focus::before,
-.expandable.collapsed .markup-expand-badge:hover::before {
-  background-color: var(--markup-badge-hover-background-color);
-}
-
-.markup-badge.active,
-.markup-badge.interactive.active {
-  background-color: var(--markup-badge-active-background-color);
-  border-color: var(--markup-badge-active-border-color);
-  color: var(--theme-selection-color);
-}