1547205 - ObjectInspector non-expandable nodes are not properly aligned

Status: RESOLVED FIXED

(DevTools :: Shared Components, defect, P1)

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Go to data:text/html,<meta charset=utf8><script>console.dir([1, document, 2])</script>
2. Open the console

Expected results

I get the following expanded object:

▼ (3) […]
​|   0: 1
​| ▶︎ 1: HTMLDocument data:text/html,<meta charset=utf8><script>console.dir([1, document, 2])</script>
​|   2: 2
​|   length: 3
​| ▶︎ <prototype>: [

Actual results

I get:

▼ (3) […]
​| 0: 1
​| ▶︎ 1: HTMLDocument data:text/html,<meta charset=utf8><script>console.dir([1, document, 2])</script>
​| 2: 2
​| length: 3
​| ▶︎ <prototype>: [

which doesn't look good

---

Looks like only 68 is impacted, I'm running a mozregression to find the bug which regressed it.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: ObjectInspector debugger mis-alignment

More specifically, it was regressed by https://github.com/firefox-devtools/debugger/pull/8066, where this was done:

- /* Align with expandables siblings (where we have the arrow) */
- .tree-node[data-expandable="false"] .tree-indent:last-of-type {
-   margin-inline-end: 15px;
+ .debugger .tree-indent {
+   width: 16px;
+   margin-inline-start: 0px;
+   border-inline-start: 0;
  }

Since we removed the rule for non-expandables node, it doesn't look great in the debugger either (see attachment)

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Jaril, David, could you have a look at this?

Adding back:

.tree-node[data-expandable="false"] .tree-indent:last-of-type {
  margin-inline-end: 13px;
}

to tree.css seems to work fine in console, but might be weird in debugger?

Another weird thing in the debugger is that the ObjectInspector nodes don't use a monospaced font, which makes it tricker to properly align things I guess.

Comment 3

[David Walsh :davidwalsh]

Attachment: Bug 1547205 - Fix regression in tree indentation r=jaril

Comment 4

[David Walsh :davidwalsh]

I've opened https://phabricator.services.mozilla.com/D29008 to get the ball rolling on this.

Comment 5

[jaril]

Attachment: Bug 1547205 - Fix regression in tree indentation r=davidwalsh

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6138ca044e5c
Fix regression in tree indentation r=nchevobbe

Comment 7

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/6138ca044e5c