Fix style for non-expandable root nodes in Tree component.

Fixes #886.

If a Tree contained multiple roots, some expandables, some not, the
non-expandable node weren't aligned to the expanded one.
This is because we align non-expandable items adding a margin to the
last tree-indent element of the node.
However, non-expandable root do not have any tree-indent element child,
so they were missing a margin.
This patch adds a specific margin-inline-start for non-expandable root nodes.
The multiple root tree story is modified to also include non-expandable root
nodes.

Author: nchevobbe

packages/devtools-components/src/tree.css

@@ -43,6 +43,12 @@
   margin-inline-end: 15px;
 }
 
+/* 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="0"] {
+  padding-inline-start: 15px
+}
+
 .tree .tree-node[data-expandable="true"] {
   cursor: default;
 }

packages/devtools-components/stories/tree.js

@@ -28,7 +28,7 @@ storiesOf("Tree", module)
   .add("Multiple root tree", () => {
     return renderTree({
       autoExpandDepth: Infinity,
-      getRoots: () => ["A", "W"],
+      getRoots: () => ["A", "P", "M", "Q", "W", "R"],
     });
   })
   .add("focused node", () => {
@@ -133,6 +133,13 @@ storiesOf("Tree", module)
 // M
 // `-- N
 //     `-- O
+// P
+// Q
+// R
+// W
+// `-- X
+//     `-- Z
+// `-- Y
 const TEST_TREE = {
   children: {
     A: ["B", "C", "D"],
@@ -150,6 +157,9 @@ const TEST_TREE = {
     M: ["N"],
     N: ["O"],
     O: [],
+    P: [],
+    Q: [],
+    R: [],
     W: ["X", "Y"],
     X: ["Z"],
     Y: [],
@@ -171,6 +181,9 @@ const TEST_TREE = {
     M: null,
     N: "M",
     O: "N",
+    P: null,
+    Q: null,
+    R: null,
     W: null,
     X: "W",
     Y: "W",