diff --git a/devtools/client/inspector/flexbox/components/FlexContainer.js b/devtools/client/inspector/flexbox/components/FlexContainer.js index 0997a0aff493..3c7b4462ec79 100644 --- a/devtools/client/inspector/flexbox/components/FlexContainer.js +++ b/devtools/client/inspector/flexbox/components/FlexContainer.js @@ -75,34 +75,55 @@ class FlexContainer extends PureComponent { onHideBoxModelHighlighter, onShowBoxModelHighlighterForNode, } = this.props; - const { nodeFront } = flexContainer; + const { + nodeFront, + properties, + } = flexContainer; return createElement(Fragment, null, - Rep({ - defaultRep: ElementNode, - mode: MODE.TINY, - object: translateNodeFrontToGrip(nodeFront), - onDOMNodeMouseOut: () => onHideBoxModelHighlighter(), - onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront), - }), - dom.div({ - className: "layout-color-swatch", - ref: this.swatchEl, - style: { - backgroundColor: color, - }, - title: color, - }), - // The SwatchColorPicker relies on the nextSibling of the swatch element to - // apply the selected color. This is why we use a span in display: none for - // now. Ideally we should modify the SwatchColorPickerTooltip to bypass this - // requirement. See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578 - dom.span( - { - className: "layout-color-value", - ref: this.colorValueEl, - }, - color + dom.div({ className: "flex-header-container-label" }, + Rep({ + defaultRep: ElementNode, + mode: MODE.TINY, + object: translateNodeFrontToGrip(nodeFront), + onDOMNodeMouseOut: () => onHideBoxModelHighlighter(), + onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront), + }), + dom.div({ + className: "layout-color-swatch", + ref: this.swatchEl, + style: { + backgroundColor: color, + }, + title: color, + }), + // The SwatchColorPicker relies on the nextSibling of the swatch element to + // apply the selected color. This is why we use a span in display: none for + // now. Ideally we should modify the SwatchColorPickerTooltip to bypass this + // requirement. See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578 + dom.span( + { + className: "layout-color-value", + ref: this.colorValueEl, + }, + 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"] + ) ) ); } diff --git a/devtools/client/inspector/flexbox/test/browser.ini b/devtools/client/inspector/flexbox/test/browser.ini index 18d8e67a9d56..edf8c04f324e 100644 --- a/devtools/client/inspector/flexbox/test/browser.ini +++ b/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] diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js b/devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js new file mode 100644 index 000000000000..e9dd5cd141de --- /dev/null +++ b/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 = ` + +
+
+
+
+`; + +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."); +}); diff --git a/devtools/client/inspector/index.xhtml b/devtools/client/inspector/index.xhtml index f95941fe96da..b49026aaca55 100644 --- a/devtools/client/inspector/index.xhtml +++ b/devtools/client/inspector/index.xhtml @@ -10,6 +10,7 @@ + diff --git a/devtools/client/inspector/markup/markup.xhtml b/devtools/client/inspector/markup/markup.xhtml index 4eaec521bed2..8175d1c2d1e8 100644 --- a/devtools/client/inspector/markup/markup.xhtml +++ b/devtools/client/inspector/markup/markup.xhtml @@ -7,6 +7,7 @@ + diff --git a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js index 351777e42193..471b92a41b42 100644 --- a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js +++ b/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."); }); diff --git a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js index 41eca56e1de8..3728fe3889d7 100644 --- a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js +++ b/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) { diff --git a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js index bc8b67d25d90..0d55f03e3140 100644 --- a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js +++ b/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."); diff --git a/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js b/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js index c40482968174..40dc6d7752ed 100644 --- a/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js +++ b/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."); diff --git 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 index 9af7c4ea69a0..4aa16df33698 100644 --- 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 @@ -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; diff --git a/devtools/client/inspector/markup/test/browser_markup_flex_display_badge.js b/devtools/client/inspector/markup/test/browser_markup_flex_display_badge.js index 38e17b736d90..c6b608beac53 100644 --- a/devtools/client/inspector/markup/test/browser_markup_flex_display_badge.js +++ b/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."); diff --git a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_01.js b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_01.js index 29afaa3f60fc..567a016152c6 100644 --- a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_01.js +++ b/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."); diff --git a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js index 5028250ac2ae..a785d5ccd526 100644 --- a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js +++ b/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 gridDisplayBadge2 = grid2.elt.querySelector(".markup-badge[data-display]"); - const gridDisplayBadge3 = grid3.elt.querySelector(".markup-badge[data-display]"); + const gridDisplayBadge1 = grid1.elt.querySelector( + ".inspector-badge.interactive[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"), diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger.js index ac2519ad9bb4..7a7cb9fb1256 100644 --- a/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger.js +++ b/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."); diff --git a/devtools/client/inspector/markup/test/helper_events_test_runner.js b/devtools/client/inspector/markup/test/helper_events_test_runner.js index d115aa0d7ca8..4868dfd7cb44 100644 --- a/devtools/client/inspector/markup/test/helper_events_test_runner.js +++ b/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. diff --git a/devtools/client/inspector/markup/views/element-editor.js b/devtools/client/inspector/markup/views/element-editor.js index e27325ba9d15..cc5c5bc92c82 100644 --- a/devtools/client/inspector/markup/views/element-editor.js +++ b/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"); diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index 5325ece39dac..e44bbd1755af 100644 --- a/devtools/client/jar.mn +++ b/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) diff --git a/devtools/client/themes/badge.css b/devtools/client/themes/badge.css new file mode 100644 index 000000000000..95e6e6bc645d --- /dev/null +++ b/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); +} diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css index e9ebea4068a2..dc23fd5135f5 100644 --- a/devtools/client/themes/layout.css +++ b/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: 0 3px; + padding: 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 */ diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css index eaa628409ffe..c96ab303de5a 100644 --- a/devtools/client/themes/markup.css +++ b/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); - color: var(--markup-badge-color); - fill: var(--markup-badge-interactive-color); + border: 1px solid var(--badge-border-color); + color: var(--badge-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); -}