Bug 1455163 - Style the inspector markup and font editor toggle badges. r=pbro

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

@@ -31,28 +31,28 @@ add_task(async function() {
   info("Check the display node is shown and the value of #grid.");
   await selectNode("#grid", inspector);
   let gridContainer = await getContainerForSelector("#grid", inspector);
-  let gridDisplayNode = gridContainer.elt.querySelector(".markupview-display");
+  let gridDisplayNode = gridContainer.elt.querySelector(".markupview-display-badge");
   is(gridDisplayNode.textContent, "grid", "Got the correct display type for #grid.");
   is(gridDisplayNode.style.display, "inline-block", "#grid display node is shown.");
 
   info("Check the display node is shown and the value of #flex.");
   await selectNode("#flex", inspector);
   let flexContainer = await getContainerForSelector("#flex", inspector);
-  let flexDisplayNode = flexContainer.elt.querySelector(".markupview-display");
+  let flexDisplayNode = flexContainer.elt.querySelector(".markupview-display-badge");
   is(flexDisplayNode.textContent, "flex", "Got the correct display type for #flex");
   is(flexDisplayNode.style.display, "inline-block", "#flex display node is shown.");
 
   info("Check the display node is shown and the value of #block.");
   await selectNode("#block", inspector);
   let blockContainer = await getContainerForSelector("#block", inspector);
-  let blockDisplayNode = blockContainer.elt.querySelector(".markupview-display");
+  let blockDisplayNode = blockContainer.elt.querySelector(".markupview-display-badge");
   is(blockDisplayNode.textContent, "block", "Got the correct display type for #block");
   is(blockDisplayNode.style.display, "none", "#block display node is hidden.");
 
   info("Check the display node is shown and the value of span.");
   await selectNode("span", inspector);
   let spanContainer = await getContainerForSelector("span", inspector);
-  let spanDisplayNode = spanContainer.elt.querySelector(".markupview-display");
+  let spanDisplayNode = spanContainer.elt.querySelector(".markupview-display-badge");
   is(spanDisplayNode.textContent, "inline", "Got the correct display type for #span");
   is(spanDisplayNode.style.display, "none", "span display node is hidden.");
 });

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

@@ -97,7 +97,7 @@ async function runTestData(inspector, testActor,
                       {selector, before, changeStyle, after}) {
   await selectNode(selector, inspector);
   let container = await getContainerForSelector(selector, inspector);
-  let displayNode = container.elt.querySelector(".markupview-display");
+  let displayNode = container.elt.querySelector(".markupview-display-badge");
 
   is(displayNode.textContent, before.textContent,
     `Got the correct before display type for ${selector}: ${displayNode.textContent}`);

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

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

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

@@ -30,7 +30,7 @@ add_task(async function() {
 
 async function runTests(inspector) {
   let markupContainer = await getContainerForSelector("#events", inspector);
-  let evHolder = markupContainer.elt.querySelector(".markupview-events");
+  let evHolder = markupContainer.elt.querySelector(".markupview-event-badge");
   let 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,10 @@ add_task(async function() {
   await inspector.markup.expandAll();
 
   let container1 = await getContainerForSelector("#d1", inspector);
-  let evHolder1 = container1.elt.querySelector(".markupview-events");
+  let evHolder1 = container1.elt.querySelector(".markupview-event-badge");
 
   let container2 = await getContainerForSelector("#d2", inspector);
-  let evHolder2 = container2.elt.querySelector(".markupview-events");
+  let evHolder2 = container2.elt.querySelector(".markupview-event-badge");
 
   let tooltip = inspector.markup.eventDetailsTooltip;
 

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

@@ -55,7 +55,7 @@ async function checkEventsForNode(test, inspector, testActor) {
     await beforeTest(inspector, testActor);
   }
 
-  let evHolder = container.elt.querySelector(".markupview-events");
+  let evHolder = container.elt.querySelector(".markupview-event-badge");
 
   if (expected.length === 0) {
     // if no event is expected, simply check that the event bubble is hidden

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

@@ -171,14 +171,14 @@ ElementEditor.prototype = {
     close.appendChild(this.doc.createTextNode(">"));
 
     this.eventNode = this.doc.createElement("div");
-    this.eventNode.classList.add("markupview-events");
+    this.eventNode.classList.add("markupview-event-badge");
     this.eventNode.dataset.event = "true";
-    this.eventNode.textContent = "ev";
+    this.eventNode.textContent = "event";
     this.eventNode.title = INSPECTOR_L10N.getStr("markupView.event.tooltiptext");
     this.elt.appendChild(this.eventNode);
 
     this.displayNode = this.doc.createElement("div");
-    this.displayNode.classList.add("markupview-display");
+    this.displayNode.classList.add("markupview-display-badge");
     this.elt.appendChild(this.displayNode);
   },
 

devtools/client/inspector/rules/views/rule-editor.js

@@ -246,8 +246,9 @@ RuleEditor.prototype = {
     // Create the font editor toggle icon visible on hover.
     if (this.ruleView.showFontEditor) {
       this.fontSwatch = createChild(this.element, "div", {
-        class: "ruleview-fontswatch"
+        class: "ruleview-font-editor-toggle"
       });
+      this.fontSwatch.textContent = "Aa";
 
       this.fontSwatch.addEventListener("click", this._onFontSwatchClick);
     }

devtools/client/jar.mn

@@ -117,7 +117,6 @@ devtools.jar:
     skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg)
     skin/images/filters.svg (themes/images/filters.svg)
     skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
-    skin/images/font-swatch.svg (themes/images/font-swatch.svg)
     skin/images/grid.svg (themes/images/grid.svg)
     skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)
     skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)

devtools/client/themes/images/font-swatch.svg

@@ -1,6 +0,0 @@
-<!-- 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/. -->
-<svg viewBox="0 0 16 11" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" fill="context-fill" d="M2,0 L14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,9 C16,10.1045695 15.1045695,11 14,11 L2,11 C0.8954305,11 1.3527075e-16,10.1045695 0,9 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M6.84277344,8.70001221 L8.27978516,8.70001221 L6.078125,2.35870361 L4.51806641,2.35870361 L2.31640625,8.70001221 L3.64794922,8.70001221 L4.13574219,7.18829346 L6.36376953,7.18829346 L6.84277344,8.70001221 Z M5.21679688,3.67706299 L4.42138672,6.16436768 L6.08251953,6.16436768 L5.29589844,3.67706299 L5.21679688,3.67706299 Z M10.4946289,8.77471924 C9.56298828,8.77471924 8.90820312,8.20343018 8.90820312,7.31573486 C8.90820312,6.43682861 9.58056641,5.92706299 10.784668,5.85675049 L11.9580078,5.78643799 L11.9580078,5.39093018 C11.9580078,4.9866333 11.6679688,4.75811768 11.140625,4.75811768 C10.6791992,4.75811768 10.371582,4.9163208 10.2661133,5.20635986 L9.08837891,5.20635986 C9.171875,4.30987549 9.99365234,3.74737549 11.2109375,3.74737549 C12.4941406,3.74737549 13.2192383,4.3538208 13.2192383,5.39093018 L13.2192383,8.70001221 L11.9799805,8.70001221 L11.9799805,8.06719971 L11.9008789,8.06719971 C11.6503906,8.51104736 11.1230469,8.77471924 10.4946289,8.77471924 Z M10.9165039,7.81231689 C11.5097656,7.81231689 11.9580078,7.43438721 11.9580078,6.94219971 L11.9580078,6.58624268 L10.9780273,6.64776611 C10.4287109,6.68731689 10.1606445,6.8850708 10.1606445,7.23223877 C10.1606445,7.59259033 10.4726562,7.81231689 10.9165039,7.81231689 Z"></path>
-</svg>

devtools/client/themes/markup.css

@@ -3,6 +3,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
+  --markup-badge-background-color: var(--grey-20);
+  --markup-badge-border-color: #CACAD1;
+  --markup-badge-color: var(--grey-90);
+  --markup-badge-hover-background-color: #DFDFE8;
   --markup-hidden-attr-name-color: #BA89B8;
   --markup-hidden-attr-value-color: #5C6D87;
   --markup-hidden-punctuation-color: #909090;
@@ -11,6 +15,10 @@
 }
 
 .theme-dark:root {
+  --markup-badge-background-color: var(--grey-70);
+  --markup-badge-border-color: var(--grey-50);
+  --markup-badge-color: var(--grey-30);
+  --markup-badge-hover-background-color: var(--grey-80);
   --markup-hidden-attr-name-color: #B07EB3;
   --markup-hidden-attr-value-color: #9893A3;
   --markup-hidden-punctuation-color: #909090;
@@ -386,21 +394,28 @@ ul.children + .tag-line::before {
   font-style: italic;
 }
 
-/* Display and Events Bubble */
-.markupview-display,
-.markupview-events {
+/* Display and Event Badges */
+.markupview-display-badge,
+.markupview-event-badge {
   display: none;
-  font-size: 8px;
-  font-weight: bold;
-  line-height: 10px;
+  font-size: 9px;
+  font-weight: normal;
+  line-height: 11px;
+  vertical-align: 1px;
+  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(--theme-body-color-alt);
-  color: var(--theme-body-background);
+  background-color: var(--markup-badge-background-color);
+  color: var(--markup-badge-color);
 }
 
-.markupview-events {
+.markupview-event-badge {
   cursor: pointer;
 }
+
+.markupview-event-badge:focus,
+.markupview-event-badge:hover {
+  background-color: var(--markup-badge-hover-background-color);
+}

devtools/client/themes/rules.css

@@ -4,6 +4,11 @@
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 :root {
+  --rule-badge-active-background-color: var(--blue-50);
+  --rule-badge-background-color: var(--grey-20);
+  --rule-badge-border-color: #CACAD1;
+  --rule-badge-color: var(--grey-90);
+  --rule-badge-hover-background-color: #DFDFE8;
   --rule-highlight-background-color: var(--theme-highlight-yellow);
   --rule-overridden-item-border-color: var(--theme-content-color3);
   --rule-header-background-color: var(--theme-toolbar-background);
@@ -12,6 +17,11 @@
 }
 
 :root.theme-dark {
+  --rule-badge-active-background-color: var(--blue-60);
+  --rule-badge-background-color: var(--grey-70);
+  --rule-badge-border-color: var(--grey-50);
+  --rule-badge-color: var(--grey-30);
+  --rule-badge-hover-background-color: var(--grey-80);
   --rule-highlight-background-color: #521C76;
   --rule-overridden-item-border-color: var(--theme-content-color1);
   --rule-header-background-color: #222225;
@@ -453,30 +463,6 @@
   background-size: 1em;
 }
 
-.ruleview-rule:not(:hover) .ruleview-fontswatch:not(.active) {
-  visibility: hidden;
-}
-
-.ruleview-fontswatch {
-  position: absolute;
-  width: 1.45em;
-  height: 1em;
-  right: 1.5em;
-  bottom: 0.5em;
-  font-size: 1em;
-
-  background: url("chrome://devtools/skin/images/font-swatch.svg");
-  -moz-context-properties: fill;
-  fill: var(--grey-40);
-  background-size: contain;
-  cursor: pointer;
-  -moz-user-select: none;
-}
-
-.ruleview-fontswatch.active {
-  fill: var(--blue-50);
-}
-
 .ruleview-shapeswatch {
   background: url("chrome://devtools/skin/images/tool-shadereditor.svg");
   -moz-context-properties: fill;
@@ -612,3 +598,34 @@
 .ruleview-overridden-rule-filter:hover {
   opacity: 1;
 }
+
+.ruleview-rule:not(:hover) .ruleview-font-editor-toggle:not(.active) {
+  visibility: hidden;
+}
+
+.ruleview-font-editor-toggle {
+  position: absolute;
+  right: 1.5em;
+  bottom: 0.5em;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 11px;
+  border: 1px solid var(--rule-badge-border-color);
+  border-radius: 3px;
+  padding: 0px 4px;
+  -moz-user-select: none;
+  cursor: pointer;
+  background-color: var(--rule-badge-background-color);
+  color: var(--rule-badge-color);
+}
+
+.ruleview-font-editor-toggle:focus,
+.ruleview-font-editor-toggle:hover {
+  background-color: var(--rule-badge-hover-background-color);
+}
+
+.ruleview-font-editor-toggle.active {
+  background-color: var(--rule-badge-active-background-color);
+  border-color: var(--rule-badge-active-background-color);
+  color: var(--theme-selection-color);
+}