tdulcet / Server-Status

🔒 Quickly view basic info about every webpage, including server location, IP addresses, certificate expiration date and issuer, HTTP status code and load time
https://addons.mozilla.org/firefox/addon/server-status/
Mozilla Public License 2.0
23 stars 4 forks source link

Icon similar to IPvFoo #1

Open kkeijzer opened 2 years ago

kkeijzer commented 2 years ago

First off, thanks for this extension. It looks very promising. This is not really an issue, but more of a feature request.

Could you include an option where the icon shows the IPv6 status like IPvFoo does? (So basically three numbers being either 4 or 6?) I want to replace IPvFoo, as it never worked very well on Firefox, but I would miss the quick IPv6 status information with this add-on, which is what I find the most important.

I assume that more people want to replace IPvFoo with something that works decently on Firefox, and they would probably miss the icon as well.

tdulcet commented 2 years ago

No problem. Thanks for the feature request!

I would have no problem including this functionality and pull requests are always welcome. You may have noticed that all the "icons" used by this extension are actually just Unicode emojis. The reason I did not implement the feature initially is that there are not any emojis similar to the icons used by IPvFoo. The closest would be the digit (4️ and 6️) and keycap emojis (4️⃣ and 6️⃣), although when creating the icons it is not currently possible to change the color of the emojis themselves. Now that I am thinking about this some more, it seems there would be four possible options to implement this, although I am open to any other ideas:

  1. Use those digit or keycap emojis. I think this would provide a bad UX since we would then not be able do the green/red coloring like IPvFoo.
    1. Use the digit emojis and change the background color. According to Emojipedia, on some systems the digit emojis have a transparent background, which the extension could color. However, they are also not implemented by many systems, including Twemoji, which Firefox falls back to.
    2. Use the black and white digit symbols (such as ❹ and ❻ or ④ and ⑥) and change the text or background color.
  2. Use one of the existing three supported icon options, but add a badge to show the IP version.
  3. Find a volunteer to create some actual icons.

I implemented a quick prototype of 1, which also shows what the badge could look like for 3: image More testing would be needed for 2 to see if the appearance would be acceptable on all systems.

You said you wanted to have all three numbers, so another question would be how to show the last two numbers that represent the other requests on the page. This would also be a deviation from all the other icon options which only show information for the main/first request. Unless we go with 4, it would obviously not be possible to show this in the icon. That would just leave the badge text, which can show up to 3-4 characters. Maybe it could show 4 in red 🟥 for IPv4 only, 6 in green 🟩 for IPv6 only and 4/6 in yellow 🟨 for both. I am open to any other ideas...

Anyway, let me know if you have any preferences.

kkeijzer commented 2 years ago

I think that what you said the last paragraph makes the most sense. I don't necessarily need all three separate numbers on the icon as long as the dropdown menu shows the IP addresses anyway.

What I basically want to know on first glance is whether the site is 100% IPv6 (so no IPv4 elements), partially IPv6 (the site itself is IPv6 but subdomains or external content are IPv4) or 100% IPv4.

It sounds like a good idea to use green / yellow / red for that. I can always just click the button for more details after all.

I don't really have a preference regarding the emoji options. I don't know that much about emoji's at all to be honest, so I would pick whatever works best and is easy to use/maintain.

In addition, perhaps the IP addresses in the "requests" dropdown menu can also have different formatting depending on whether it's IPv6 or IPv4? Currently they're all blue and bold, but perhaps they can have different colours as well, like IPvFoo also has?

tdulcet commented 2 years ago

OK, thanks for the additional information. I was already planning to release a new version 1.0.2 in a few weeks with some mostly minor improvements, so assuming my testing of option 2 is goes well, I will also include it, which should look similar to my prototype above. This version will include some changes to how IPv6 addresses are displayed in the tooltip when hovering over the icon, so the new icon option would be a good complement to that.

Changing the badge text and color to represent the other requests on the page would require more significant changes to the extension, so I will save that for a more major update, such as a potential version 1.1. It also would require some rethinking of the existing icon/badge options to see if they could also somehow represent the other requests on the page:

In addition, perhaps the IP addresses in the "requests" dropdown menu can also have different formatting depending on whether it's IPv6 or IPv4? Currently they're all blue and bold, but perhaps they can have different colours as well, like IPvFoo also has?

Well, they are blue because that is the default styling for links (if you enable Firefox's dark mode, they would be white) and only the most recently used one for each hostname is bold (if none are bold that means the last request was cached): image

Anyway, changing the color would be trivial, although for users like myself who's ISP does not (yet) support IPv6, it would mean all IP addresses for all pages would be red, which would seem to indicate an issue when it is not necessarily one. In general, except for the icon, I would like to reserve red for actual problems such as an expired certificate. Maybe less strong colors, such as purple for IPv4 (red and blue combined) and teal for IPv6 (green and blue combined). I would be OK with including something like that in the next version.

tdulcet commented 2 years ago

I did some testing of option 2 and I do not like the appearance of the colored background on systems where the digit emojis are the same as the keycap emojis, so I decided to go with option 1 for now, but also with the colored badge text: image

If you are interested in trying this now, I am happy to provide instructions, otherwise it should hopefully be available on AMO in a couple of weeks.

kkeijzer commented 2 years ago

This looks very nice. I'd definitely like to try it if you could tell me how I can build an xpi. I can't say I've ever done that before.

tdulcet commented 2 years ago

This looks very nice. I'd definitely like to try it if you could tell me how I can build an xpi. I can't say I've ever done that before.

Thanks. I just added the new icon option in https://github.com/tdulcet/Server-Status/commit/f22279d9a9786b9e2db4a9caeefc4d64e860b539.

If you want to try it, no need to build the XPI. If you have git installed, you can download it with this command:

git clone --recurse-submodules https://github.com/tdulcet/Server-Status.git

Then follow these instructions to install it in Firefox. Feedback on the changes is welcome! Note that this will only temporary install the extension until the next Firefox restart. To permanently install it you would need to use either Firefox Developer Edition or Firefox Nightly.

tdulcet commented 2 years ago

I just published v1.0.2 on AMO with the new icon option and other changes mentioned above. Feedback is welcome. You should automatically get the update within 24 hours or you can force it from the Add-ons manager.

I will keep this issue open while I consider adding support for changing the badge text and color to represent the other requests on the page...

tdulcet commented 2 years ago

I recently noticed on some Linux system without an emoji font installed that the keycap emojis are not rendered with the "Twemoji Mozilla" fallback font bundled with Firefox as they should be, which causes them to get cutoff when the extension generates the icons: image

I just filed Bug 1794298 on BMO, so hopefully they will be able to fix this soon if it is affecting any users.

ghost commented 1 year ago

this is the extension we all wanted but didn't know existed