Badge should not extend beyond the button

RESOLVED FIXED in Firefox 44

Status

RESOLVED FIXED
3 years ago
5 months ago

People

(Reporter: designakt, Assigned: bwinton)

Tracking

unspecified
mozilla44

Firefox Tracking Flags

(firefox44 fixed)

Details

(Whiteboard: [webextension-polish])

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

3 years ago
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.
(Assignee)

Comment 1

3 years ago
Created attachment 8666777 [details] [diff] [review]
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.
Assignee: nobody → bwinton
Status: NEW → ASSIGNED
Attachment #8666777 - Flags: ui-review?(mjaritz)
Attachment #8666777 - Flags: review?(gijskruitbosch+bugs)

Comment 2

3 years ago
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)
Attachment #8666777 - Flags: review?(gijskruitbosch+bugs)
(Assignee)

Comment 3

3 years ago
Created attachment 8668442 [details] [diff] [review]
The second attempt.
Attachment #8666777 - Attachment is obsolete: true
Attachment #8666777 - Flags: ui-review?(mjaritz)
Attachment #8668442 - Flags: ui-review?(mjaritz)
Attachment #8668442 - Flags: review?(gijskruitbosch+bugs)
Attachment #8668442 - Flags: feedback?(zer0)
(Reporter)

Comment 4

3 years ago
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?)
Attachment #8668442 - Flags: ui-review?(mjaritz) → ui-review-
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.
Attachment #8668442 - Flags: feedback?(zer0) → feedback+

Comment 6

3 years ago
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?
Attachment #8668442 - Flags: review?(gijskruitbosch+bugs)
(Assignee)

Comment 7

3 years ago
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?
Attachment #8668442 - Flags: ui-review- → ui-review?(mjaritz)
(Reporter)

Updated

3 years ago
Attachment #8668442 - Flags: ui-review?(mjaritz) → ui-review+
(Reporter)

Comment 8

3 years ago
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.
(Assignee)

Comment 9

3 years ago
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…  :)
Attachment #8668442 - Flags: review?(gijskruitbosch+bugs)

Comment 10

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

rs=me if this is what we want! :-)
Attachment #8668442 - Flags: review?(gijskruitbosch+bugs) → review+
https://hg.mozilla.org/mozilla-central/rev/0f03a1bf6c1d
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
status-firefox44: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla44

Comment 13

3 years ago
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 15

3 years ago
Thanks!

Updated

5 months ago
Product: Toolkit → WebExtensions
You need to log in before you can comment on or make changes to this bug.