diff --git a/devtools/client/inspector/flexbox/components/FlexItem.js b/devtools/client/inspector/flexbox/components/FlexItem.js index 9b47ea170bbb..6ceb45ff6606 100644 --- a/devtools/client/inspector/flexbox/components/FlexItem.js +++ b/devtools/client/inspector/flexbox/components/FlexItem.js @@ -19,6 +19,7 @@ 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, @@ -28,6 +29,7 @@ class FlexItem extends PureComponent { render() { const { flexItem, + index, onHideBoxModelHighlighter, onShowBoxModelHighlighterForNode, setSelectedNode, @@ -35,23 +37,22 @@ class FlexItem extends PureComponent { const { nodeFront } = flexItem; return ( - dom.li({}, - dom.button( - { - className: "devtools-button devtools-monospace", - onClick: () => { - setSelectedNode(nodeFront); - onHideBoxModelHighlighter(); - }, - onMouseOut: () => onHideBoxModelHighlighter(), - onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront), + dom.button( + { + className: "devtools-button devtools-monospace", + onClick: () => { + setSelectedNode(nodeFront); + onHideBoxModelHighlighter(); }, - Rep({ - defaultRep: ElementNode, - mode: MODE.TINY, - object: translateNodeFrontToGrip(nodeFront), - }) - ) + onMouseOut: () => onHideBoxModelHighlighter(), + onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront), + }, + dom.span({ className: "flex-item-index" }, index), + 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 c2642054b362..7a559e1e56b1 100644 --- a/devtools/client/inspector/flexbox/components/FlexItemList.js +++ b/devtools/client/inspector/flexbox/components/FlexItemList.js @@ -7,6 +7,7 @@ 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"))); @@ -31,11 +32,13 @@ class FlexItemList extends PureComponent { } = this.props; return ( - dom.ol( + dom.div( { className: "flex-item-list" }, - flexItems.map(flexItem => FlexItem({ + dom.div({ className: "flex-item-list-header" }, getStr("flexbox.flexItems")), + flexItems.map((flexItem, index) => FlexItem({ key: flexItem.actorID, flexItem, + index: index + 1, onHideBoxModelHighlighter, onShowBoxModelHighlighterForNode, setSelectedNode, 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 927f5d9ce042..472f4d3631c1 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.children.length, 1, + is(flexItemList.querySelectorAll("button").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 660820ee0c7a..8b267d8fe739 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("li")]; + const items = [...flexItemList.querySelectorAll("button .objectBox")]; 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 cb0305c8cf69..d00f57b8d530 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("li")]; + const items = [...flexItemList.querySelectorAll("button .objectBox")]; 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/jar.mn b/devtools/client/jar.mn index e44bbd1755af..13c3fdd06229 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -93,6 +93,7 @@ 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) diff --git a/devtools/client/locales/en-US/layout.properties b/devtools/client/locales/en-US/layout.properties index 9b19c937eb5d..11fcd37086a1 100644 --- a/devtools/client/locales/en-US/layout.properties +++ b/devtools/client/locales/en-US/layout.properties @@ -21,6 +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.itemSizing.baseSizeSectionHeader): Header label displayed # at the start of the flex item sizing Base Size section. flexbox.itemSizing.baseSizeSectionHeader=Base Size diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css index dc23fd5135f5..c75282e9f362 100644 --- a/devtools/client/themes/layout.css +++ b/devtools/client/themes/layout.css @@ -148,6 +148,7 @@ .flex-header-container-label, .flex-header-container-properties { + display: flex; padding: 3px 0; } @@ -158,18 +159,52 @@ .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; } /**