From f78fcf019c2de5a2e768202ba05b0dc853017437 Mon Sep 17 00:00:00 2001 From: Noemi Erli Date: Thu, 15 Nov 2018 18:28:19 +0200 Subject: [PATCH] Backed out 3 changesets (bug 1498115) for failures in browser_flexbox_container_properties.js Backed out changeset e7f8e9c7301b (bug 1498115) Backed out changeset ad62c3439651 (bug 1498115) Backed out changeset 06b4d9761d46 (bug 1498115) --- .../flexbox/components/FlexContainer.js | 73 +++++--------- .../components/FlexContainerProperties.js | 51 ++++++++++ .../inspector/flexbox/components/FlexItem.js | 33 +++---- .../flexbox/components/FlexItemList.js | 7 +- .../inspector/flexbox/components/Flexbox.js | 10 ++ .../inspector/flexbox/components/moz.build | 1 + .../client/inspector/flexbox/test/browser.ini | 1 - .../browser_flexbox_container_properties.js | 65 ------------- .../test/browser_flexbox_item_list_02.js | 2 +- ...wser_flexbox_pseudo_elements_are_listed.js | 2 +- .../browser_flexbox_text_nodes_are_listed.js | 2 +- devtools/client/inspector/index.xhtml | 1 - devtools/client/inspector/markup/markup.xhtml | 1 - .../test/browser_markup_display_node_01.js | 10 +- .../test/browser_markup_display_node_02.js | 6 +- .../test/browser_markup_events-overflow.js | 3 +- .../browser_markup_events-windowed-host.js | 3 +- .../browser_markup_events_click_to_close.js | 6 +- .../test/browser_markup_flex_display_badge.js | 3 +- .../browser_markup_grid_display_badge_01.js | 3 +- .../browser_markup_grid_display_badge_02.js | 9 +- .../browser_markup_shadowdom_open_debugger.js | 6 +- .../markup/test/helper_events_test_runner.js | 3 +- .../inspector/markup/views/element-editor.js | 8 +- devtools/client/jar.mn | 2 - .../client/locales/en-US/layout.properties | 5 +- devtools/client/themes/badge.css | 70 ------------- devtools/client/themes/layout.css | 97 ++++++------------- devtools/client/themes/markup.css | 88 +++++++++++++++-- 29 files changed, 245 insertions(+), 326 deletions(-) create mode 100644 devtools/client/inspector/flexbox/components/FlexContainerProperties.js delete mode 100644 devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js delete mode 100644 devtools/client/themes/badge.css diff --git a/devtools/client/inspector/flexbox/components/FlexContainer.js b/devtools/client/inspector/flexbox/components/FlexContainer.js index 3c7b4462ec79..0997a0aff493 100644 --- a/devtools/client/inspector/flexbox/components/FlexContainer.js +++ b/devtools/client/inspector/flexbox/components/FlexContainer.js @@ -75,55 +75,34 @@ class FlexContainer extends PureComponent { onHideBoxModelHighlighter, onShowBoxModelHighlighterForNode, } = this.props; - const { - nodeFront, - properties, - } = flexContainer; + const { nodeFront } = flexContainer; return createElement(Fragment, null, - 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"] - ) + 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 ) ); } diff --git a/devtools/client/inspector/flexbox/components/FlexContainerProperties.js b/devtools/client/inspector/flexbox/components/FlexContainerProperties.js new file mode 100644 index 000000000000..dec31ade5053 --- /dev/null +++ b/devtools/client/inspector/flexbox/components/FlexContainerProperties.js @@ -0,0 +1,51 @@ +/* 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/. */ + +"use strict"; + +const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react"); +const dom = require("devtools/client/shared/vendor/react-dom-factories"); +const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); +const { getStr } = require("devtools/client/inspector/layout/utils/l10n"); + +const ComputedProperty = createFactory(require("devtools/client/inspector/layout/components/ComputedProperty")); + +const Types = require("../types"); + +class FlexContainerProperties extends PureComponent { + static get propTypes() { + return { + properties: PropTypes.shape(Types.flexContainerProperties).isRequired, + }; + } + + render() { + const { properties } = this.props; + + return ( + dom.div( + { + id: "flex-container-properties", + className: "flexbox-container", + }, + dom.div({ className: "layout-properties-header" }, + getStr("flexbox.flexContainerProperties") + ), + dom.div( + { + className: "layout-properties-wrapper devtools-monospace", + tabIndex: 0, + }, + Object.entries(properties).map(([name, value]) => ComputedProperty({ + key: name, + name, + value, + })) + ) + ) + ); + } +} + +module.exports = FlexContainerProperties; diff --git a/devtools/client/inspector/flexbox/components/FlexItem.js b/devtools/client/inspector/flexbox/components/FlexItem.js index 6ceb45ff6606..9b47ea170bbb 100644 --- a/devtools/client/inspector/flexbox/components/FlexItem.js +++ b/devtools/client/inspector/flexbox/components/FlexItem.js @@ -19,7 +19,6 @@ class FlexItem extends PureComponent { static get propTypes() { return { flexItem: PropTypes.shape(Types.flexItem).isRequired, - index: PropTypes.number.isRequired, onHideBoxModelHighlighter: PropTypes.func.isRequired, onShowBoxModelHighlighterForNode: PropTypes.func.isRequired, setSelectedNode: PropTypes.func.isRequired, @@ -29,7 +28,6 @@ class FlexItem extends PureComponent { render() { const { flexItem, - index, onHideBoxModelHighlighter, onShowBoxModelHighlighterForNode, setSelectedNode, @@ -37,22 +35,23 @@ class FlexItem extends PureComponent { const { nodeFront } = flexItem; return ( - dom.button( - { - className: "devtools-button devtools-monospace", - onClick: () => { - setSelectedNode(nodeFront); - onHideBoxModelHighlighter(); + dom.li({}, + dom.button( + { + className: "devtools-button devtools-monospace", + onClick: () => { + setSelectedNode(nodeFront); + onHideBoxModelHighlighter(); + }, + onMouseOut: () => onHideBoxModelHighlighter(), + onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront), }, - onMouseOut: () => onHideBoxModelHighlighter(), - onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront), - }, - dom.span({ className: "flex-item-index" }, index), - Rep({ - defaultRep: ElementNode, - mode: MODE.TINY, - object: translateNodeFrontToGrip(nodeFront), - }) + Rep({ + defaultRep: ElementNode, + mode: MODE.TINY, + object: translateNodeFrontToGrip(nodeFront), + }) + ) ) ); } diff --git a/devtools/client/inspector/flexbox/components/FlexItemList.js b/devtools/client/inspector/flexbox/components/FlexItemList.js index 7a559e1e56b1..c2642054b362 100644 --- a/devtools/client/inspector/flexbox/components/FlexItemList.js +++ b/devtools/client/inspector/flexbox/components/FlexItemList.js @@ -7,7 +7,6 @@ const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react"); const dom = require("devtools/client/shared/vendor/react-dom-factories"); const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); -const { getStr } = require("devtools/client/inspector/layout/utils/l10n"); const FlexItem = createFactory(require(("./FlexItem"))); @@ -32,13 +31,11 @@ class FlexItemList extends PureComponent { } = this.props; return ( - dom.div( + dom.ol( { className: "flex-item-list" }, - dom.div({ className: "flex-item-list-header" }, getStr("flexbox.flexItems")), - flexItems.map((flexItem, index) => FlexItem({ + flexItems.map(flexItem => FlexItem({ key: flexItem.actorID, flexItem, - index: index + 1, onHideBoxModelHighlighter, onShowBoxModelHighlighterForNode, setSelectedNode, diff --git a/devtools/client/inspector/flexbox/components/Flexbox.js b/devtools/client/inspector/flexbox/components/Flexbox.js index 011b5be07d63..925e371a34b7 100644 --- a/devtools/client/inspector/flexbox/components/Flexbox.js +++ b/devtools/client/inspector/flexbox/components/Flexbox.js @@ -14,6 +14,9 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories"); const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); const { getStr } = require("devtools/client/inspector/layout/utils/l10n"); +loader.lazyGetter(this, "FlexContainerProperties", function() { + return createFactory(require("./FlexContainerProperties")); +}); loader.lazyGetter(this, "FlexItemList", function() { return createFactory(require("./FlexItemList")); }); @@ -43,6 +46,12 @@ class Flexbox extends PureComponent { }; } + renderFlexContainerProperties() { + return FlexContainerProperties({ + properties: this.props.flexContainer.properties, + }); + } + renderFlexItemList() { const { onHideBoxModelHighlighter, @@ -124,6 +133,7 @@ class Flexbox extends PureComponent { }), !flexItemShown && flexItems.length > 0 ? this.renderFlexItemList() : null, flexItemShown ? this.renderFlexItemSizing() : null, + !flexItemShown ? this.renderFlexContainerProperties() : null ) ); } diff --git a/devtools/client/inspector/flexbox/components/moz.build b/devtools/client/inspector/flexbox/components/moz.build index 8feff61c113e..5630bd1c9f93 100644 --- a/devtools/client/inspector/flexbox/components/moz.build +++ b/devtools/client/inspector/flexbox/components/moz.build @@ -7,6 +7,7 @@ DevToolsModules( 'Flexbox.js', 'FlexContainer.js', + 'FlexContainerProperties.js', 'FlexItem.js', 'FlexItemList.js', 'FlexItemSelector.js', diff --git a/devtools/client/inspector/flexbox/test/browser.ini b/devtools/client/inspector/flexbox/test/browser.ini index edf8c04f324e..18d8e67a9d56 100644 --- a/devtools/client/inspector/flexbox/test/browser.ini +++ b/devtools/client/inspector/flexbox/test/browser.ini @@ -20,7 +20,6 @@ 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 deleted file mode 100644 index e9dd5cd141de..000000000000 --- a/devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js +++ /dev/null @@ -1,65 +0,0 @@ -/* 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/flexbox/test/browser_flexbox_item_list_02.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js index 472f4d3631c1..927f5d9ce042 100644 --- a/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js +++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js @@ -18,7 +18,7 @@ add_task(async function() { info("Checking the initial state of the flex item list."); ok(flexItemList, "The flex item list is rendered."); - is(flexItemList.querySelectorAll("button").length, 1, + is(flexItemList.children.length, 1, "Got the correct number of flex items in the list."); info("Clicking on the first flex item to navigate to the flex item."); diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js b/devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js index 8b267d8fe739..660820ee0c7a 100644 --- a/devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js +++ b/devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js @@ -19,7 +19,7 @@ add_task(async function() { await selectNode(".container", inspector); const [flexItemList] = await onItemsListRendered; - const items = [...flexItemList.querySelectorAll("button .objectBox")]; + const items = [...flexItemList.querySelectorAll("li")]; is(items.length, 2, "There are 2 items displayed in the list"); is(items[0].textContent, "::before", "The first item is ::before"); diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js b/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js index d00f57b8d530..cb0305c8cf69 100644 --- a/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js +++ b/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js @@ -19,7 +19,7 @@ add_task(async function() { await selectNode(".container", inspector); const [flexItemList] = await onItemsListRendered; - const items = [...flexItemList.querySelectorAll("button .objectBox")]; + const items = [...flexItemList.querySelectorAll("li")]; is(items.length, 3, "There are 3 items displayed in the list"); is(items[0].textContent, "#text", "The first item is a text node"); diff --git a/devtools/client/inspector/index.xhtml b/devtools/client/inspector/index.xhtml index b49026aaca55..f95941fe96da 100644 --- a/devtools/client/inspector/index.xhtml +++ b/devtools/client/inspector/index.xhtml @@ -10,7 +10,6 @@ - diff --git a/devtools/client/inspector/markup/markup.xhtml b/devtools/client/inspector/markup/markup.xhtml index 8175d1c2d1e8..4eaec521bed2 100644 --- a/devtools/client/inspector/markup/markup.xhtml +++ b/devtools/client/inspector/markup/markup.xhtml @@ -7,7 +7,6 @@ - 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 471b92a41b42..351777e42193 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( - ".inspector-badge.interactive[data-display]"); + ".markup-badge[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( - ".inspector-badge[data-display]"); + ".markup-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( - ".inspector-badge.interactive[data-display]"); + ".markup-badge[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( - ".inspector-badge.interactive[data-display]"); + ".markup-badge[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( - ".inspector-badge.interactive[data-display]"); + ".markup-badge[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 3728fe3889d7..41eca56e1de8 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,8 +112,7 @@ async function runTestData(inspector, testActor, await selectNode(selector, inspector); const container = await getContainerForSelector(selector, inspector); - const beforeBadge = container.elt.querySelector( - ".inspector-badge.interactive[data-display]"); + const beforeBadge = container.elt.querySelector(".markup-badge[data-display]"); is(!!beforeBadge, before.visible, `Display badge is visible as expected for ${selector}: ${before.visible}`); if (before.visible) { @@ -138,8 +137,7 @@ async function runTestData(inspector, testActor, } ok(foundContainer, "Container is part of the list of changed nodes"); - const afterBadge = container.elt.querySelector( - ".inspector-badge.interactive[data-display]"); + const afterBadge = container.elt.querySelector(".markup-badge[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 0d55f03e3140..bc8b67d25d90 100644 --- a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js +++ b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js @@ -34,8 +34,7 @@ add_task(async function() { const { inspector } = await openInspectorForURL(TEST_URL); const markupContainer = await getContainerForSelector("#events", inspector); - const evHolder = markupContainer.elt.querySelector( - ".inspector-badge.interactive[data-event]"); + const evHolder = markupContainer.elt.querySelector(".markup-badge[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 40dc6d7752ed..c40482968174 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,8 +32,7 @@ add_task(async function() { async function runTests(inspector) { const markupContainer = await getContainerForSelector("#events", inspector); - const evHolder = markupContainer.elt.querySelector( - ".inspector-badge.interactive[data-event]"); + const evHolder = markupContainer.elt.querySelector(".markup-badge[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 4aa16df33698..9af7c4ea69a0 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,12 +27,10 @@ add_task(async function() { await inspector.markup.expandAll(); const container1 = await getContainerForSelector("#d1", inspector); - const evHolder1 = container1.elt.querySelector( - ".inspector-badge.interactive[data-event]"); + const evHolder1 = container1.elt.querySelector(".markup-badge[data-event]"); const container2 = await getContainerForSelector("#d2", inspector); - const evHolder2 = container2.elt.querySelector( - ".inspector-badge.interactive[data-event]"); + const evHolder2 = container2.elt.querySelector(".markup-badge[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 c6b608beac53..38e17b736d90 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,8 +26,7 @@ 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( - ".inspector-badge.interactive[data-display]"); + const flexDisplayBadge = flexContainer.elt.querySelector(".markup-badge[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 567a016152c6..29afaa3f60fc 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,8 +22,7 @@ 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( - ".inspector-badge.interactive[data-display]"); + const gridDisplayBadge = gridContainer.elt.querySelector(".markup-badge[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 a785d5ccd526..5028250ac2ae 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,12 +35,9 @@ 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( - ".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]"); + 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]"); 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 7a7cb9fb1256..ac2519ad9bb4 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,8 +63,7 @@ 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( - ".inspector-badge.interactive[data-custom]"); + let customBadge = testContainer.elt.querySelector(".markup-badge[data-custom]"); // Verify that the "custom" badge and menu item are hidden. ok(!customBadge, "[custom] badge is hidden"); @@ -81,8 +80,7 @@ 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( - ".inspector-badge.interactive[data-custom]"); + customBadge = testContainer.elt.querySelector(".markup-badge[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 4868dfd7cb44..d115aa0d7ca8 100644 --- a/devtools/client/inspector/markup/test/helper_events_test_runner.js +++ b/devtools/client/inspector/markup/test/helper_events_test_runner.js @@ -55,8 +55,7 @@ async function checkEventsForNode(test, inspector, testActor) { await beforeTest(inspector, testActor); } - const evHolder = container.elt.querySelector( - ".inspector-badge.interactive[data-event]"); + const evHolder = container.elt.querySelector(".markup-badge[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 cc5c5bc92c82..e27325ba9d15 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.className = "inspector-badge interactive"; + this._eventBadge.classList.add("markup-badge"); 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.className = "inspector-badge"; + this._displayBadge.classList.add("markup-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,8 +343,6 @@ 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"); } }, @@ -363,7 +361,7 @@ ElementEditor.prototype = { _createCustomBadge: function() { this._customBadge = this.doc.createElement("div"); - this._customBadge.className = "inspector-badge interactive"; + this._customBadge.classList.add("markup-badge"); 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 13c3fdd06229..5325ece39dac 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -93,7 +93,6 @@ devtools.jar: skin/images/add.svg (themes/images/add.svg) skin/images/alert.svg (themes/images/alert.svg) skin/images/arrowhead-left.svg (themes/images/arrowhead-left.svg) - skin/images/arrowhead-right.svg (themes/images/arrowhead-right.svg) skin/images/arrowhead-down.svg (themes/images/arrowhead-down.svg) skin/images/arrowhead-up.svg (themes/images/arrowhead-up.svg) skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg) @@ -180,7 +179,6 @@ 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/locales/en-US/layout.properties b/devtools/client/locales/en-US/layout.properties index 11fcd37086a1..b2afe7e3956e 100644 --- a/devtools/client/locales/en-US/layout.properties +++ b/devtools/client/locales/en-US/layout.properties @@ -21,8 +21,9 @@ flexbox.flexItemOf=Flex Item of %S # flex containers to display. flexbox.noFlexboxeOnThisPage=Select a Flex container or item to continue. -# LOCALIZATION NOTE (flexbox.flexItems): Header label displayed for the flex item list. -flexbox.flexItems=Flex Items +# LOCALIZATION NOTE (flexbox.flexContainerProperties): Header for the flex container +# properties in the Flexbox panel. +flexbox.flexContainerProperties=Flex Container Properties # LOCALIZATION NOTE (flexbox.itemSizing.baseSizeSectionHeader): Header label displayed # at the start of the flex item sizing Base Size section. diff --git a/devtools/client/themes/badge.css b/devtools/client/themes/badge.css deleted file mode 100644 index 95e6e6bc645d..000000000000 --- a/devtools/client/themes/badge.css +++ /dev/null @@ -1,70 +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/. */ - -: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 c75282e9f362..3cc11ab5aef4 100644 --- a/devtools/client/themes/layout.css +++ b/devtools/client/themes/layout.css @@ -96,6 +96,19 @@ 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 */ @@ -103,7 +116,8 @@ .flex-header { display: flex; align-items: center; - padding: 3px; + height: 32px; + padding: 0 3px; border-block-end: 1px solid var(--theme-splitter-color); } @@ -113,45 +127,18 @@ } .flex-header-content { - display: flex; flex: 1; - padding: 2px 0; + padding-top: 2px; 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 { - display: flex; - padding: 3px 0; -} - /** * Flex Item List */ @@ -159,52 +146,18 @@ .flex-item-list { font-size: 12px; margin: 0; + padding-inline-start: 34px; padding-top: 5px; padding-bottom: 5px; overflow: hidden; } -.flex-item-list .flex-item-list-header { - color: var(--theme-comment); - padding-inline-start: 23px; - margin-bottom: 4px; - -moz-user-select: none; -} - .flex-item-list .devtools-button { background-color: transparent; text-overflow: ellipsis; overflow: hidden; inline-size: 100%; text-align: start; - height: 24px; - margin: 0; - padding-inline-start: 28px; - padding-inline-end: 16px; - position: relative; -} - -.flex-item-list .devtools-button::after { - content: ""; - background-image: url(chrome://devtools/skin/images/arrowhead-right.svg); - background-size: 16px; - background-repeat: no-repeat; - background-position: center -1px; - fill: var(--theme-comment); - -moz-context-properties: fill; - position: absolute; - right: 7px; - width: 16px; - height: 16px; -} - -.flex-item-list .flex-item-index { - font-size: 12px; - font-weight: bold; -} - -.flex-item-list .objectBox-node { - padding-inline-start: 8px; } /** @@ -491,6 +444,20 @@ list-style: none; } +/** + * Flex Container Properties + */ + +#flex-container-properties { + border-block-start: 1px solid var(--theme-splitter-color); + margin-bottom: 5px; +} + +#flex-container-properties .layout-properties-header { + padding: 5px 0; + padding-inline-start: 20px; +} + /** * Grid Container */ diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css index c96ab303de5a..eaa628409ffe 100644 --- a/devtools/client/themes/markup.css +++ b/devtools/client/themes/markup.css @@ -3,6 +3,14 @@ * 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; @@ -11,6 +19,14 @@ } .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; @@ -233,13 +249,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(--badge-interactive-background-color); + background-color: var(--markup-badge-interactive-background-color); background-image: url(chrome://devtools/skin/images/more.svg); background-repeat: no-repeat; background-position: center; - border: 1px solid var(--badge-border-color); - color: var(--badge-color); - fill: var(--badge-interactive-color); + border: 1px solid var(--markup-badge-border-color); + color: var(--markup-badge-color); + fill: var(--markup-badge-interactive-color); display: block; width: 12px; height: 8px; @@ -248,11 +264,6 @@ 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 { @@ -401,3 +412,62 @@ 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); +}