Web Inspector: ObjectTree array index hints are clipped when shown in popover

• Component: Web Inspector
• Status: RESOLVED FIXED

[Brian Burg]

Oops

[Radar WebKit Bug Importer]

<rdar://problem/20384458>

[Brian Burg]

Created attachment 249930 [details]
screenshot of clipped values

[Nikita Vasilyev]

Created attachment 250141 [details]
Reduction

[Nikita Vasilyev]

Created attachment 250143 [details]
Patch

[Nikita Vasilyev]

Created attachment 250144 [details]
Screenshot with the patch applied

The red bars on the screenshot are purely for debugging and aren't present in the patch.

    .object-tree-array-index .index-name {outline: 1px solid red;}

[Brian Burg]

Comment on attachment 250143 [details]
Patch

r=me

[Timothy Hatcher]

Comment on attachment 250143 [details]
Patch

Is Set and Map also broken?

[WebKit Commit Bot]

Comment on attachment 250143 [details]
Patch

Clearing flags on attachment: 250143

Committed r182359: <http://trac.webkit.org/changeset/182359>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Joseph Pecoraro]

(In reply to comment #7)
> Comment on attachment 250143 [details]
> Patch
> 
> Is Set and Map also broken?

Also, are these popover only issues or are there regressions in the console as well?

[Nikita Vasilyev]

(In reply to comment #10)
> (In reply to comment #7)
> > Comment on attachment 250143 [details]
> > Patch
> > 
> > Is Set and Map also broken?

Set was clipped, now it’s fine.

Can’t test map at the moment, it’s broken: https://bugs.webkit.org/show_bug.cgi?id=143428

> Also, are these popover only issues or are there regressions in the console
> as well?

In the console it wasn't clipped because there was enough extra space on the left.

[Joseph Pecoraro]

(In reply to comment #11)
> (In reply to comment #10)
> > (In reply to comment #7)
> > > Comment on attachment 250143 [details]
> > > Patch
> > > 
> > > Is Set and Map also broken?
> 
> Set was clipped, now it’s fine.
> 
> Can’t test map at the moment, it’s broken:
> https://bugs.webkit.org/show_bug.cgi?id=143428

That has a patch. You can apply that patch and test.

> > Also, are these popover only issues or are there regressions in the console
> > as well?
> 
> In the console it wasn't clipped because there was enough extra space on the
> left.

The styles I had matched http://timothy.hatcher.name/console/ pretty closely. Do they still match?

[Timothy Hatcher]

(In reply to comment #12)
> > In the console it wasn't clipped because there was enough extra space on the
> > left.
> 
> The styles I had matched http://timothy.hatcher.name/console/ pretty
> closely. Do they still match?

It looks like the indices no long line up under the disclosure triangle, but under the Array icon in the console. That is okay with me. But it likely should shift to the right more in that case to like up more in the center of the icon.

I'm more curious how it looks next to other objects, etc. If it isn't garishly indented now, it should be fine.

[Nikita Vasilyev]

Created attachment 250205 [details]
Map before/after

(In reply to comment #12)
> (In reply to comment #11)
> > (In reply to comment #10)
> > > (In reply to comment #7)
> > > > Comment on attachment 250143 [details]
> > > > Patch
> > > > 
> > > > Is Set and Map also broken?
> > 
> > Set was clipped, now it’s fine.
> > 
> > Can’t test map at the moment, it’s broken:
> > https://bugs.webkit.org/show_bug.cgi?id=143428
> 
> That has a patch. You can apply that patch and test.

Map was clipped too.

[Nikita Vasilyev]

Created attachment 250206 [details]
[Animated GIF] Safari 8/before the patch/after the patch

While I do like how on http://timothy.hatcher.name/console/ the indices are aligned under ▼, they don’t work well when nested inside an object.

    console.dir({
      b: ["Zoidberg", "bar", "baz"],
      property: "Zoidberg"
    })

Take a look at the GIF. It may look like `property: "Zoidberg"` is in Array Prototype. We may want to increase the left margin even further to fix it. What do you think?


(In reply to comment #12)
> The styles I had matched http://timothy.hatcher.name/console/ pretty
> closely. Do they still match?

They don’t, intentionally. See above.

[Timothy Hatcher]

Yeah, I think we might want a few pixels more margin. At least line up the characters so monospace values make sense.