1207225 - Badge should not extend beyond the button

Status: RESOLVED FIXED

(WebExtensions :: Untriaged, defect)

Description

[Markus Jaritz [:markus] (UX)]

To limit the size of a badge it shoud only be up to 4 characters and should not extend beyond the borders of the button. Even if 4 characters exceed the width of the button.

Comment 1

[Blake Winton (:bwinton) (:☕️)]

Attachment: The first attempt.

Hey Gijs,

I think there's probably a better way to do this, than just playing around in the CSS editor like I did, but I'm not sure what it is.

Also, Markus, it seemed really hard to get the text to just be chopped off, so can we live with the ellipses at the end?

Thanks,
Blake.

Comment 2

[:Gijs (he/him)]

Comment on attachment 8666777 [details] [diff] [review]
The first attempt.

Review of attachment 8666777 [details] [diff] [review]:
-----------------------------------------------------------------

For the next patch, can you also feedback?:zer0 ?

::: browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ +98,5 @@
>    border-image-source: linear-gradient(transparent, rgba(100%,100%,100%,.2) 20%, rgba(100%,100%,100%,.2) 80%, transparent);
>  }
>  
> +.toolbarbutton-badge {
> +  max-width: 28px;

I think we should probably stick this together with the other styles for badges here:

https://dxr.mozilla.org/mozilla-central/source/toolkit/themes/windows/global/toolbarbutton.css#153

(and the mac+linux equivalents)

Comment 3

[Blake Winton (:bwinton) (:☕️)]

Attachment: The second attempt.

Comment 4

[Markus Jaritz [:markus] (UX)]

Comment on attachment 8668442 [details] [diff] [review]
The second attempt.

Michael M did a Visual Design for how we envision badges to look and behave: https://invis.io/4C4ECXBEX 
Would this still result in the need for an overflow due to the possibility of 4 characters not fitting? If so, I think we should consider a solution other than an ellipsis as it will hide more than the last letter. (Is cutting of the last letter possible?)

Comment 5

[Matteo Ferretti [:zer0] [:matteo]]

Comment on attachment 8668442 [details] [diff] [review]
The second attempt.

28px seems reasonable; and I don't think it would be against the badge design on https://mozilla.invisionapp.com/share/4C4ECXBEX#/screens – but agreed that maybe the ellipses are.

Comment 6

[:Gijs (he/him)]

Comment on attachment 8668442 [details] [diff] [review]
The second attempt.

From IRC + the ui-review, it seems like this might need another iteration, though I dunno that centering it will be more acceptable for UX? What do things look like if you put in a string that's too long? Does setting position and overflow: hidden help?

Comment 7

[Blake Winton (:bwinton) (:☕️)]

Comment on attachment 8668442 [details] [diff] [review]
The second attempt.

(In reply to Markus Jaritz [:maritz] (UX) from comment #4)
> Michael M did a Visual Design for how we envision badges to look and behave:
> https://invis.io/4C4ECXBEX 

In email to me, Stephen Horlander said:
> Nothing in that spec is finalized. We need to reconcile all the things
> before we point at it for implementation.

so I'm going to re-request ui-review based on that, and the fact that this patch makes the badges look like the other badges we currently have.

> Would this still result in the need for an overflow due to the possibility
> of 4 characters not fitting? If so, I think we should consider a solution
> other than an ellipsis as it will hide more than the last letter. (Is
> cutting of the last letter possible?)

And I've played around with various combinations of text and value, label and description, and I could not find any way to not have the ellipses.  I know they're not ideal, but would you mind terribly if we left them in for this patch, and tried to fix them later in another bug?

Comment 8

[Markus Jaritz [:markus] (UX)]

Thanks for your efforts in omitting the ellipsis. :-)
I filed Bug 1213895 to follow up on the truncation, and when the styleguide has a go, we will file bugs to follow up on the visual design.

Comment 9

[Blake Winton (:bwinton) (:☕️)]

Comment on attachment 8668442 [details] [diff] [review]
The second attempt.

Given the comments above, I'm re-requesting review.

(Also, if you want to ping me on IRC tomorrow, I think I can explain the "centered" thing better in person…  :)

Comment 10

[:Gijs (he/him)]

Comment on attachment 8668442 [details] [diff] [review]
The second attempt.

rs=me if this is what we want! :-)

Comment 11

[Pulsebot]

https://hg.mozilla.org/integration/mozilla-inbound/rev/0f03a1bf6c1d

Comment 12

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/0f03a1bf6c1d

Comment 13

[Alfred Kayser]

Is there an example / addon where this toolbarbutton-badge is used?
I want to test the styling for this with my themes.
Thanks in advance, Alfred

Comment 14

[Blake Winton (:bwinton) (:☕️)]

Alfred: You could try it out with Whimsy at https://dl.dropboxusercontent.com/u/2301433/Firefox/WebExtensions/whimsy.xpi  

Comment 15

[Alfred Kayser]

Thanks!