--- a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
@@ -26,33 +26,33 @@ const TEST_URI = `
add_task(async function() {
let {inspector} = await openInspectorForURL("data:text/html;charset=utf-8," +
encodeURIComponent(TEST_URI));
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.");
});
--- a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
@@ -92,17 +92,17 @@ add_task(async function() {
await runTestData(inspector, testActor, data);
}
});
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}`);
is(displayNode.style.display, before.display,
`Got the correct before display style for ${selector}: ${displayNode.style.display}`);
info("Listening for the display-change event");
let onDisplayChanged = inspector.markup.walker.once("display-change");
--- a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js
@@ -29,17 +29,17 @@ const TEST_DATA = [
alignTop: false,
},
];
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.");
EventUtils.synthesizeMouseAtCenter(evHolder, {},
inspector.markup.doc.defaultView);
await tooltip.once("shown");
info("EventTooltip visible.");
--- a/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js
@@ -25,17 +25,17 @@ add_task(async function() {
await toolbox.switchHost("bottom");
await runTests(inspector);
await toolbox.destroy();
});
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.");
let onInspectorUpdated = inspector.once("inspector-updated");
let onTooltipShown = tooltip.once("shown");
EventUtils.synthesizeMouseAtCenter(evHolder, {}, inspector.markup.doc.defaultView);
--- a/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
@@ -22,20 +22,20 @@ const TEST_URL = `
add_task(async function() {
let {inspector, toolbox} = await openInspectorForURL(
"data:text/html;charset=utf-8," + encodeURI(TEST_URL));
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;
info("Click the event icon for the first element");
let onShown = tooltip.once("shown");
EventUtils.synthesizeMouseAtCenter(evHolder1, {},
inspector.markup.doc.defaultView);
await onShown;
--- a/devtools/client/inspector/markup/test/helper_events_test_runner.js
+++ b/devtools/client/inspector/markup/test/helper_events_test_runner.js
@@ -50,17 +50,17 @@ async function runEventPopupTests(url, t
async function checkEventsForNode(test, inspector, testActor) {
let {selector, expected, beforeTest, isSourceMapped} = test;
let container = await getContainerForSelector(selector, inspector);
if (typeof beforeTest === "function") {
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
is(evHolder.style.display, "none", "event bubble should be hidden");
return;
}
let tooltip = inspector.markup.eventDetailsTooltip;
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -166,24 +166,24 @@ ElementEditor.prototype = {
this.closeTag = this.doc.createElement("span");
this.closeTag.classList.add("tag", "theme-fg-color3");
close.appendChild(this.closeTag);
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);
},
set selected(value) {
if (this.textEditor) {
this.textEditor.selected = value;
}
},
--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -241,18 +241,19 @@ RuleEditor.prototype = {
editableItem({ element: this.closeBrace }, () => {
this.newProperty();
});
}
// 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);
}
},
/**
* Handler for clicks on font swatch icon.
* Toggles the selected state of the the current rule for the font editor.
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -112,17 +112,16 @@ devtools.jar:
skin/toolbars.css (themes/toolbars.css)
skin/toolbox.css (themes/toolbox.css)
skin/tooltips.css (themes/tooltips.css)
skin/images/accessibility.svg (themes/images/accessibility.svg)
skin/images/add.svg (themes/images/add.svg)
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)
skin/images/controls.png (themes/images/controls.png)
skin/images/controls@2x.png (themes/images/controls@2x.png)
skin/images/copy.svg (themes/images/copy.svg)
skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
skin/images/performance-details-waterfall.svg (themes/images/performance-details-waterfall.svg)
deleted file mode 100644
--- a/devtools/client/themes/images/font-swatch.svg
+++ /dev/null
@@ -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>
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -1,21 +1,29 @@
/* 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 {
+ --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;
--markup-hidden-tag-color: #97A4B3;
--markup-outline: var(--theme-splitter-color);
}
.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;
--markup-hidden-tag-color: #AFB5BF;
--markup-outline: var(--theme-selection-background);
}
* {
@@ -381,26 +389,33 @@ ul.children + .tag-line::before {
color: var(--theme-selection-color);
}
/* Applicable to the DOCTYPE */
.doctype {
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);
+}
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -1,22 +1,32 @@
/* 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/. */
/* 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);
--rule-flex-toggle-color: var(--grey-90);
--rule-shape-toggle-color: var(--grey-90);
}
: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;
--rule-flex-toggle-color: var(--grey-10);
--rule-shape-toggle-color: var(--grey-10);
}
/* Rule View Tabpanel */
@@ -448,40 +458,16 @@
background-size: 1em;
}
.ruleview-angleswatch {
background: url("chrome://devtools/skin/images/angle-swatch.svg");
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;
fill: var(--rule-shape-toggle-color);
border-radius: 0;
background-size: 1em;
box-shadow: none;
}
@@ -607,8 +593,39 @@
}
.ruleview-overridden-rule-filter {
opacity: 0.8;
}
.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);
+}
