Web Inspector: REGRESSION: Unexpected empty space above large expanded object with source location

• Component: Web Inspector
• Status: RESOLVED CONFIGURATION CHANGED

[Joseph Pecoraro]

Created attachment 247175 [details]
[TEST] Test Page

* SUMMARY
REGRESSION: Unexpected empty space above large expanded object with source location.

* TEST
<script>
console.log(window.navigator);
</script>

* STEPS TO REPRODUCE
1. Inspect test page
2. Expand Navigator object in console
  => unexpected space above "Navigator"

[Radar WebKit Bug Importer]

<rdar://problem/19931917>

[Timothy Hatcher]

Does this still happen?

[Joseph Pecoraro]

Yes, and it is very ugly!

[Nikita Vasilyev]

Created attachment 252179 [details]
.object-tree {display: block}

Changing .object-tree{display: inline-block} to .object-tree{display: block} fixes the issues.

However, it backfires in a few other places.

On the attached screenshot .object-tree has a purple outline for debugging purposes. When .object-tree is inside of "display: inline" elements, as on the screenshot, it doesn’t look nice.

[Nikita Vasilyev]

My plan is to find all the cases when .object-tree is inside of "display: inline" elements and convert them to "display: inline-block".

[Joseph Pecoraro]

(In reply to comment #5)
> My plan is to find all the cases when .object-tree is inside of "display:
> inline" elements and convert them to "display: inline-block".

Can we assume the outer is block, and any inner is inline-block?

  .object-tree { display: block; }
  .object-tree .object-tree { display: inline-block; }

I have a feeling object-tree is inline-block for a reason, but I don't completely remember. Maybe that was a hold-out from when console.log("msg", obj1, obj2) displayed multiple objects on one line. Now that we no longer do that, or only show the preview on the same line as the message, we may be able to get away with ObjectTreeView being display:block.

[Nikita Vasilyev]

(In reply to comment #6)
> (In reply to comment #5)
> > My plan is to find all the cases when .object-tree is inside of "display:
> > inline" elements and convert them to "display: inline-block".
> 
> Can we assume the outer is block, and any inner is inline-block?
> 
>   .object-tree { display: block; }
>   .object-tree .object-tree { display: inline-block; }

It doesn’t solve the problem and also messes things up even more :)
https://cldup.com/sYON7eoFTz-3000x3000.png

> 
> I have a feeling object-tree is inline-block for a reason, but I don't
> completely remember. Maybe that was a hold-out from when console.log("msg",
> obj1, obj2) displayed multiple objects on one line. Now that we no longer do
> that, or only show the preview on the same line as the message, we may be
> able to get away with ObjectTreeView being display:block.

Yes, I think that was the only reason.

[Joseph Pecoraro]

(In reply to comment #7)
> (In reply to comment #6)
> > (In reply to comment #5)
> > > My plan is to find all the cases when .object-tree is inside of "display:
> > > inline" elements and convert them to "display: inline-block".
> > 
> > Can we assume the outer is block, and any inner is inline-block?
> > 
> >   .object-tree { display: block; }
> >   .object-tree .object-tree { display: inline-block; }
> 
> It doesn’t solve the problem and also messes things up even more :)
> https://cldup.com/sYON7eoFTz-3000x3000.png

You should give a different border to the block vs inline-block groups. It looks to me like the inner ones are not displaying inline-block, otherwise I would expect them to be on the same line as the numbers. But I don't know for certain what is happening here.

[Timothy Hatcher]

We have had similar issues with running into the source code location in the past.

[Nikita Vasilyev]

This has been fixed a while ago.