Bug 1498115 - Part 3: Implement the new styles for the flex item list. r=pbro

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),
+        })
       )
     );
   }

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,

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.");

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");

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");

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)

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

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;
 }
 
 /**