Bug 1498115 - Part 3: Implement the new styles for the flex item list. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 15 Nov 2018 10:02:44 -0500
changeset 446609 0051c8d339a969d80b66e6ce243091a9dbb6a319
parent 446608 bbcd0df864115f756c6c8da8e60dcefe1f134ad7
child 446610 4e9dc6118ccad009700da01c9bcb189c8800e0ca
child 446690 20e31516e9bb4fdab1be492a5105cd26f91cc5e7
push id109900
push usergabriel.luong@gmail.com
push dateThu, 15 Nov 2018 18:28:45 +0000
treeherdermozilla-inbound@0051c8d339a9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1498115
milestone65.0a1
first release with
nightly linux32
0051c8d339a9 / 65.0a1 / 20181115223444 / files
nightly linux64
0051c8d339a9 / 65.0a1 / 20181115223444 / files
nightly mac
0051c8d339a9 / 65.0a1 / 20181115223444 / files
nightly win32
0051c8d339a9 / 65.0a1 / 20181115223444 / files
nightly win64
0051c8d339a9 / 65.0a1 / 20181115223444 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1498115 - Part 3: Implement the new styles for the flex item list. r=pbro
devtools/client/inspector/flexbox/components/FlexItem.js
devtools/client/inspector/flexbox/components/FlexItemList.js
devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js
devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js
devtools/client/jar.mn
devtools/client/locales/en-US/layout.properties
devtools/client/themes/layout.css
--- a/devtools/client/inspector/flexbox/components/FlexItem.js
+++ b/devtools/client/inspector/flexbox/components/FlexItem.js
@@ -14,47 +14,48 @@ const { Rep } = REPS;
 const ElementNode = REPS.ElementNode;
 
 const Types = require("../types");
 
 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,
     };
   }
 
   render() {
     const {
       flexItem,
+      index,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       setSelectedNode,
     } = this.props;
     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),
+        })
       )
     );
   }
 }
 
 module.exports = FlexItem;
--- a/devtools/client/inspector/flexbox/components/FlexItemList.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemList.js
@@ -2,16 +2,17 @@
  * 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 FlexItem = createFactory(require(("./FlexItem")));
 
 const Types = require("../types");
 
 class FlexItemList extends PureComponent {
   static get propTypes() {
     return {
@@ -26,21 +27,23 @@ class FlexItemList extends PureComponent
     const {
       flexItems,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       setSelectedNode,
     } = 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,
         }))
       )
     );
   }
 }
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
@@ -13,17 +13,17 @@ add_task(async function() {
   const { document: doc } = flexboxInspector;
 
   const onFlexItemListRendered = waitForDOM(doc, ".flex-item-list");
   await selectNode("#container", inspector);
   const [flexItemList] = await onFlexItemListRendered;
 
   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.");
   const onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");
   flexItemList.querySelector("button").click();
   const [flexOutlineContainer] = await onFlexItemOutlineRendered;
 
   info("Checking the selected flex item state.");
--- 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
@@ -14,14 +14,14 @@ add_task(async function() {
   const { document: doc } = flexboxInspector;
 
   // Select the flex container in the inspector.
   const onItemsListRendered = waitForDOM(doc,
     "#layout-flexbox-container .flex-item-list");
   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");
   is(items[1].textContent, "::after", "The second item is ::after");
 });
--- 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
@@ -14,14 +14,14 @@ add_task(async function() {
   const { document: doc } = flexboxInspector;
 
   // Select the flex container in the inspector.
   const onItemsListRendered = waitForDOM(doc,
     "#layout-flexbox-container .flex-item-list");
   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");
   is(items[2].textContent, "#text", "The third item is a text node");
 });
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -88,16 +88,17 @@ devtools.jar:
     skin/light-theme.css (themes/light-theme.css)
     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/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)
     skin/images/filters.svg (themes/images/filters.svg)
     skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
     skin/images/aboutdebugging-collapse-icon.svg (themes/images/aboutdebugging-collapse-icon.svg)
     skin/images/aboutdebugging-connect-icon.svg (themes/images/aboutdebugging-connect-icon.svg)
     skin/images/aboutdebugging-firefox-aurora.svg (themes/images/aboutdebugging-firefox-aurora.svg)
--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@@ -16,16 +16,19 @@ flexbox.flexContainer=Flex Container
 # LOCALIZATION NOTE) (flexbox.flexItemOf): The accordion header for the Flexbox panel
 # when a flex item is selected. %s represents the flex container selector.
 flexbox.flexItemOf=Flex Item of %S
 
 # LOCALIZATION NOTE (flexbox.noFlexboxeOnThisPage): In the case where there are no CSS
 # 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
 
 # LOCALIZATION NOTE (flexbox.itemSizing.flexibilitySectionHeader): Header label displayed
 # at the start of the flex item sizing Flexibility section.
 flexbox.itemSizing.flexibilitySectionHeader=Flexibility
 
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -143,38 +143,73 @@
 }
 
 .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
  */
 
 .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;
 }
 
 /**
  * Flex Item Selector
  */
 
 #flex-item-selector {
   background-position: right 4px center;