Bug 100525 – Web Inspector: The bubble for repeated errors is misplaced.

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Mike West]

Created attachment 170928 [details]
Uglay.

The bubble for repeated errors is misplaced, pushing the error content down a line. It's ugly. Let's fix that.

[Mike West]

Created attachment 170959 [details]
Patch

[Mike West]

Created attachment 170960 [details]
After.

[Alexander Pavlov (apavlov)]

(In reply to comment #2)
> Created an attachment (id=170960) [details]
> After.

In the screenshot, the right-arrow next to (42) is not horizontally aligned with that next to "This is error message" above (looks shifted rightwards 1 or 2 px). Is this misalignment intentionally allowed due to the potentially unbounded bubble width?

[Mike West]

Created attachment 171003 [details]
Three digits.

[Mike West]

(In reply to comment #3)
> (In reply to comment #2)
> > Created an attachment (id=170960) [details] [details]
> > After.
> 
> In the screenshot, the right-arrow next to (42) is not horizontally aligned with that next to "This is error message" above (looks shifted rightwards 1 or 2 px). Is this misalignment intentionally allowed due to the potentially unbounded bubble width?

Hrm. Yes, that was a compromise I was ok with making, but now I'm looking at it again. I think we can do better.

[Mike West]

Created attachment 171006 [details]
Patch

[Mike West]

Created attachment 171007 [details]
After the new patch.

[Mike West]

(In reply to comment #5)
> (In reply to comment #3)
> > (In reply to comment #2)
> > > Created an attachment (id=170960) [details] [details] [details]
> > > After.
> > 
> > In the screenshot, the right-arrow next to (42) is not horizontally aligned with that next to "This is error message" above (looks shifted rightwards 1 or 2 px). Is this misalignment intentionally allowed due to the potentially unbounded bubble width?
> 
> Hrm. Yes, that was a compromise I was ok with making, but now I'm looking at it again. I think we can do better.

How about the current patch? It looks like https://bugs.webkit.org/attachment.cgi?id=171007

[Pavel Feldman]

Comment on attachment 171006 [details]
Patch

Is flex box necessary to resolve this? We try not to use it due to its constant behavior changes.

[Mike West]

(In reply to comment #9)
> (From update of attachment 171006 [details])
> Is flex box necessary to resolve this? We try not to use it due to its constant behavior changes.

The bubble is inline-block, pushing the 'ol' (block) down to the next line. I tried two other solutions before landing on flexbox:

1. Make the 'ol' inline-block. This has the unfortunate side-effect of shrink-wrapping the list to fit it's content. I tried fiddling with the width via -webkit-calc, but that's even flakier than flexbox.

2. Float the bubble. This works. But I hate float.

I chatted a bit with Alexander about this; he's ok with landing it as-is. If either of us come up with a brilliant solution to #1 above, I'm more than happy to spin up another patch.

That said, flexbox is the future! If it's broken, we should fix it, rather than avoiding it. :)

[WebKit Review Bot]

Comment on attachment 171006 [details]
Patch

Clearing flags on attachment: 171006

Committed r132772: <http://trac.webkit.org/changeset/132772>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.