Open piroor opened 2 years ago
There is possible solution: generating image with HTML Canvas or SVG and setting its data: URI as the icon image. How about the idea?
Here is a trial of SVG icon: https://github.com/piroor/addon-minimal-digital-clock/commit/60245817ec0b3d4a29799ff363f91caae9a81c01
Screenshot:
It looks too small, thus I think we need to do something more...
Another trial with vertical layout: https://github.com/piroor/addon-minimal-digital-clock/commit/082d477ba8c5ef4813ea05921a5089c92e663d81 https://github.com/piroor/addon-minimal-digital-clock/commit/37478c96191e16550fdd3cbc123a2b20fc13822c
Screenshot:
This looks better than my previous trial. How about that?
@piroor Thank you for reporting! This add-ons uses the badge text because we allocates a large text area in the form of the horizontal layout. For the reason, the vertical layout is not acceptable, but I think that a add-ons with such a layout is good.
Thank you for the feedback! I agree my changes looks not good especially on a high-res screen.
After more try I've updated the workaround userChrome.css:
.toolbarbutton-badge-stack {
position: relative;
}
.toolbarbutton-badge {
max-width: 24px !important;
position: absolute;
right: var(--toolbarbutton-inner-padding);
top: var(--toolbarbutton-inner-padding);
}
I've filed a bug 1733844 - 4 letters badge text of extension buttons is unexpectedly truncated and I'm planning to propose a patch based on the workaround.
On Firefox 92, the clock digits is unexpectedly truncated so I cannot see the "minutes" part.
Steps to reproduce
Expected result
I get four digits as the clock.
Actual result
I get only three digits as the clock. Screenshot:![image](https://user-images.githubusercontent.com/70062/133254273-a3cf8ee4-ef00-418a-bb90-71dfc19a4046.png)
Background
The max width of the badge text is 20px on Firefox 92. It was 24px on Firefox 91 or older. Related bug: 1714135 - Toolbar elements get pushed when an extension counter badge reaches 3 digits
Workaround
A userChrome.css hack is available to take back the old appearance.