Bug 1547205 - Fix regression in tree indentation r=nchevobbe
authorDavid Walsh <dwalsh@mozilla.com>
Wed, 15 May 2019 05:53:16 +0000
changeset 535792 6138ca044e5c74d47923dac3accd8cafba1cc1a0
parent 535791 b143758e66ec86fac847d65cb4243d8f92f6b3e2
child 535793 ad2eae2743d4ffc3c0771efea055041e13b3954c
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1547205
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1547205 - Fix regression in tree indentation r=nchevobbe Replacement for D29008 Differential Revision: https://phabricator.services.mozilla.com/D30933
devtools/client/debugger/dist/vendors.css
devtools/client/debugger/dist/vendors.js
devtools/client/debugger/packages/devtools-components/src/tree.css
devtools/client/debugger/packages/devtools-components/src/tree.js
devtools/client/debugger/src/components/App.css
devtools/client/shared/components/reps/reps.css
devtools/client/shared/components/reps/reps.js
--- a/devtools/client/debugger/dist/vendors.css
+++ b/devtools/client/debugger/dist/vendors.css
@@ -34,20 +34,22 @@
 .tree-indent {
   display: inline-block;
   width: 12px;
   margin-inline-start: 3px;
   border-inline-start: 1px solid #a2d1ff;
   flex-shrink: 0;
 }
 
-.debugger .tree-indent {
-  width: 16px;
-  margin-inline-start: 0px;
-  border-inline-start: 0;
+.tree-node[data-expandable="false"] .tree-last-indent {
+  /* The 13px value is taken from the total width and margins of the arrow
+  element of expandables nodes (10px width + 3px margins). That way the
+  node's text are indented the same for both expandable and non-expandable
+  nodes */
+  margin-inline-end: 13px;
 }
 
 /* For non expandable root nodes, we don't have .tree-indent elements, so we declare
    the margin on the start of the node */
 .tree-node[data-expandable="false"][aria-level="1"] {
   padding-inline-start: 15px;
 }
 
--- a/devtools/client/debugger/dist/vendors.js
+++ b/devtools/client/debugger/dist/vendors.js
@@ -229,16 +229,17 @@ class ArrowExpander extends Component {
     }
     return _reactDomFactories2.default.button({
       className: classNames.join(" ")
     });
   }
 }
 
 const treeIndent = _reactDomFactories2.default.span({ className: "tree-indent" }, "\u200B");
+const treeLastIndent = _reactDomFactories2.default.span({ className: "tree-indent tree-last-indent" }, "\u200B");
 
 class TreeNode extends Component {
   static get propTypes() {
     return {
       id: _propTypes2.default.any.isRequired,
       index: _propTypes2.default.number.isRequired,
       depth: _propTypes2.default.number.isRequired,
       focused: _propTypes2.default.bool.isRequired,
@@ -354,17 +355,23 @@ class TreeNode extends Component {
     let ariaExpanded;
     if (this.props.isExpandable) {
       ariaExpanded = false;
     }
     if (this.props.expanded) {
       ariaExpanded = true;
     }
 
-    const indents = Array.from({ length: depth }).fill(treeIndent);
+    const indents = Array.from({ length: depth }, (_, i) => {
+      if (i == depth - 1) {
+        return treeLastIndent;
+      }
+      return treeIndent;
+    });
+
     const items = indents.concat(renderItem(item, depth, focused, arrow, expanded));
 
     return _reactDomFactories2.default.div({
       id,
       className: `tree-node${focused ? " focused" : ""}${active ? " active" : ""}`,
       onClick: this.props.onClick,
       onKeyDownCapture: active ? this._onKeyDown : null,
       role: "treeitem",
--- a/devtools/client/debugger/packages/devtools-components/src/tree.css
+++ b/devtools/client/debugger/packages/devtools-components/src/tree.css
@@ -34,20 +34,22 @@
 .tree-indent {
   display: inline-block;
   width: 12px;
   margin-inline-start: 3px;
   border-inline-start: 1px solid #a2d1ff;
   flex-shrink: 0;
 }
 
-.debugger .tree-indent {
-  width: 16px;
-  margin-inline-start: 0px;
-  border-inline-start: 0;
+.tree-node[data-expandable="false"] .tree-last-indent {
+  /* The 13px value is taken from the total width and margins of the arrow
+  element of expandables nodes (10px width + 3px margins). That way the
+  node's text are indented the same for both expandable and non-expandable
+  nodes */
+  margin-inline-end: 13px;
 }
 
 /* For non expandable root nodes, we don't have .tree-indent elements, so we declare
    the margin on the start of the node */
 .tree-node[data-expandable="false"][aria-level="1"] {
   padding-inline-start: 15px;
 }
 
--- a/devtools/client/debugger/packages/devtools-components/src/tree.js
+++ b/devtools/client/debugger/packages/devtools-components/src/tree.js
@@ -48,16 +48,20 @@ class ArrowExpander extends Component {
     }
     return dom.button({
       className: classNames.join(" ")
     });
   }
 }
 
 const treeIndent = dom.span({ className: "tree-indent" }, "\u200B");
+const treeLastIndent = dom.span(
+  { className: "tree-indent tree-last-indent" },
+  "\u200B"
+);
 
 class TreeNode extends Component {
   static get propTypes() {
     return {
       id: PropTypes.any.isRequired,
       index: PropTypes.number.isRequired,
       depth: PropTypes.number.isRequired,
       focused: PropTypes.bool.isRequired,
@@ -185,17 +189,23 @@ class TreeNode extends Component {
     let ariaExpanded;
     if (this.props.isExpandable) {
       ariaExpanded = false;
     }
     if (this.props.expanded) {
       ariaExpanded = true;
     }
 
-    const indents = Array.from({ length: depth }).fill(treeIndent);
+    const indents = Array.from({length: depth}, (_, i) => {
+      if (i == depth - 1) {
+        return treeLastIndent;
+      }
+      return treeIndent;
+    })
+
     const items = indents.concat(
       renderItem(item, depth, focused, arrow, expanded)
     );
 
     return dom.div(
       {
         id,
         className: `tree-node${focused ? " focused" : ""}${
--- a/devtools/client/debugger/src/components/App.css
+++ b/devtools/client/debugger/src/components/App.css
@@ -24,16 +24,22 @@ button:focus {
 }
 
 .debugger {
   display: flex;
   flex: 1;
   height: 100%;
 }
 
+.debugger .tree-indent {
+  width: 16px;
+  margin-inline-start: 0;
+  border-inline-start: 0;
+}
+
 .editor-pane {
   display: flex;
   position: relative;
   flex: 1;
   background-color: var(--theme-body-background);
   height: 100%;
   overflow: hidden;
 }
--- a/devtools/client/shared/components/reps/reps.css
+++ b/devtools/client/shared/components/reps/reps.css
@@ -34,20 +34,22 @@
 .tree-indent {
   display: inline-block;
   width: 12px;
   margin-inline-start: 3px;
   border-inline-start: 1px solid #a2d1ff;
   flex-shrink: 0;
 }
 
-.debugger .tree-indent {
-  width: 16px;
-  margin-inline-start: 0px;
-  border-inline-start: 0;
+.tree-node[data-expandable="false"] .tree-last-indent {
+  /* The 13px value is taken from the total width and margins of the arrow
+  element of expandables nodes (10px width + 3px margins). That way the
+  node's text are indented the same for both expandable and non-expandable
+  nodes */
+  margin-inline-end: 13px;
 }
 
 /* For non expandable root nodes, we don't have .tree-indent elements, so we declare
    the margin on the start of the node */
 .tree-node[data-expandable="false"][aria-level="1"] {
   padding-inline-start: 15px;
 }
 
--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@@ -170,16 +170,17 @@ class ArrowExpander extends Component {
     }
     return _reactDomFactories2.default.button({
       className: classNames.join(" ")
     });
   }
 }
 
 const treeIndent = _reactDomFactories2.default.span({ className: "tree-indent" }, "\u200B");
+const treeLastIndent = _reactDomFactories2.default.span({ className: "tree-indent tree-last-indent" }, "\u200B");
 
 class TreeNode extends Component {
   static get propTypes() {
     return {
       id: _propTypes2.default.any.isRequired,
       index: _propTypes2.default.number.isRequired,
       depth: _propTypes2.default.number.isRequired,
       focused: _propTypes2.default.bool.isRequired,
@@ -295,17 +296,23 @@ class TreeNode extends Component {
     let ariaExpanded;
     if (this.props.isExpandable) {
       ariaExpanded = false;
     }
     if (this.props.expanded) {
       ariaExpanded = true;
     }
 
-    const indents = Array.from({ length: depth }).fill(treeIndent);
+    const indents = Array.from({ length: depth }, (_, i) => {
+      if (i == depth - 1) {
+        return treeLastIndent;
+      }
+      return treeIndent;
+    });
+
     const items = indents.concat(renderItem(item, depth, focused, arrow, expanded));
 
     return _reactDomFactories2.default.div({
       id,
       className: `tree-node${focused ? " focused" : ""}${active ? " active" : ""}`,
       onClick: this.props.onClick,
       onKeyDownCapture: active ? this._onKeyDown : null,
       role: "treeitem",