multi-account-containers icon indicating copy to clipboard operation
multi-account-containers copied to clipboard

Add "toolbar" to icon color list

Open aaronkollasch opened this issue 3 years ago • 2 comments

Facebook Container uses the icon color "toolbar", which is not included in src/popup.js.

In the "Manage Containers" panel, if I click on "Facebook" and then go back, the icon color for Facebook turns blue with no obvious way to reset it. The only way to change the color back is under the Container Tabs setting in about:preferences.

Since "toolbar" is a user-selectable color in about:preferences, I think it makes sense to include it as an option in the MAC popup as well.

aaronkollasch avatar Nov 03 '21 23:11 aaronkollasch

The toolbar color is a special color based on the --toolbar-field-color variable. This means the color will change depending on the theme and this patch doesn't take this into consideration (See screenshots below). For most theme, it is possible to get the color value from the Theming API. However, it isn't possible with a few of them especially the *System theme` on a Linux system.

Taking this technical limitations and the complexity that using the Theming API would add only to get one more color, I'd propose that we close this pull request. As an alternative, I'd invite people to contribute a patch directly in Firefox to add the ability to set a custom color (See bug 1325057). This would be a more robust solution.

mac-toolbar-color-issue mac-toolbar-color-issue-2

dannycolin avatar Jun 23 '22 00:06 dannycolin

I think the toolbar color is still a nice option to have (separate from a custom color choice), particularly because it does adapt to the browser theme. The color mismatch you showed also applies to the list of containers in the MAC popup, even before this patch. See screenshots below.

Perhaps a simpler solution to the visual issue you identified is to adapt the radio button's color to the browser's foreground color, which should at least reflect whether the browser/popup is in light or dark mode. This would make the toolbar radio button match the icons in the picker below it. While the color may not perfectly match the actual color used in the toolbar, it does align with the toolbar button's treatment in Firefox's preferences. I've added a commit with this change.

Screenshots:

With Facebook Container installed, compare MAC's icons: imageimage

to Firefox's container settings dialog: image image

and after the patch: image image

aaronkollasch avatar Jun 23 '22 02:06 aaronkollasch

The color mismatch you showed also applies to the list of containers in the MAC popup, even before this patch. See screenshots below.

This is because Facebook Container (a separated addon) is using the toolbar color and I wish it wasn't exactly because Multi-Account Containers doesn't support it. However, that's something that should be fixed in Facebook Container but I'd still prefer we don't amplify the issue.

Perhaps a simpler solution to the visual issue you identified is to adapt the radio button's color to the browser's foreground color, which should at least reflect whether the browser/popup is in light or dark mode.

There's an issue with the Theming API itself that prevents this solution to work. If the user set the browser to follow the "System theme", you can't retrieve the theme colors at all becauase it returns an empty object at least on Linux. See: https://bugzilla.mozilla.org/show_bug.cgi?id=1435216

dannycolin avatar Dec 08 '22 15:12 dannycolin

I brought up Facebook Container since it is probably the most common use of the toolbar color, but it is not the only way to use the color – the toolbar color can be chosen for any container in the user-facing about:preferences#containers. If a user has selected the "toolbar" option for a container and opens it in MAC's "Manage Containers" pane, MAC changes the color to blue for no apparent reason.

I realize that MAC cannot exactly match the color used in the browser theme. However, I do not believe this is necessary to support the toolbar color. I note that even Firefox ignores the browser's theme in its about:preferences page when representing the toolbar color (it has only a dark and light mode). In the screenshot from about:preferences below, the "toolbar" selector matches the color of the icons below it, and neither change with the browser theme.

image

Because Firefox itself depicts "toolbar" in this way, I would think that MAC should behave similarly – the toolbar color needs only match the foreground color of the popup, whether it is light or dark. It is possible with only minor tweaks to get the MAC "Manage Containers" page to match the appearance of Firefox's container settings pane in both dark and light modes, when following the "System theme" or any other theme.

I've been using this personally on Linux and macOS with no issues. While it would be nice to have the popup theme match the browser theme, I don't think it's necessary to interpret the meaning of the "toolbar" color option. With dark themes, the toolbar color in the browser and MAC popup are both off-white typically, and the reverse is true for light themes.

Thank you for considering.

aaronkollasch avatar Dec 09 '22 04:12 aaronkollasch