search

notetau / addon-minimal-digital-clock

a firefox extension that add minimal digital clock in toolbar
6 stars 3 forks source link

Badge text is unexpectedly truncated on Firefox 92 and later #4

Open piroor opened 3 years ago

piroor commented 3 years ago

On Firefox 92, the clock digits is unexpectedly truncated so I cannot see the "minutes" part.

Steps to reproduce

  1. Install Firefox 92.
  2. Install Minimal Digital Clock.

Expected result

I get four digits as the clock.

Actual result

I get only three digits as the clock. Screenshot: image

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.

.toolbarbutton-badge {
  max-width: 24px !important;
}
piroor commented 3 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?

piroor commented 3 years ago

Here is a trial of SVG icon: https://github.com/piroor/addon-minimal-digital-clock/commit/60245817ec0b3d4a29799ff363f91caae9a81c01 Screenshot: image It looks too small, thus I think we need to do something more...

piroor commented 3 years ago

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: image

This looks better than my previous trial. How about that?

notetau commented 3 years ago

@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.

piroor commented 3 years ago

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.