Changing background or text color of addon drop-down?

[vurtomatic]

@seeba8 Hi, any possibility of adding styling option to the addon?

I'm using Nightly's dark theme and have modified userChrome.css for a dark background in Nighty.

Screencap: https://imgur.com/a/SeCNa

I think because of that, the addon's drop-down is difficult to read. Having the ability to change colors will let the addon work with different themes and userChrome.css modifications.

[seeba8]

Interesting that your stylesheet managed to change the background colour but not the text color. I'll have a look how I could do this. Not sure yet how to make css variable. I guess I could add / remove classes with JS, or maybe CSS3 --var thingies. Also, need to consider if I just want to add a dark theme (together with different icons e.g.) or if I want to make colours completely customisable. I'll need to figure out first how to do this, set colors of a class via Javascript. Anyway, thanks for the suggestion. I'll play around. If you have any ideas, let me know :

[vurtomatic]

I should've done this the first time, I think this illustrates better what's happening: https://imgur.com/a/5OqGT

The blue and purple links are default colors, I haven't styled them.

I understand this isn't really necessary nor the scope of the addon and it might not affect anyone else unless they too use a dark theme on Firefox and have made similar modifications.

I think the addon's drop-down is inheriting the browser's background color.

Maybe a quick fix is to simply set a background color for your addon's drop-down? A neutral white, off-white color, grey, or whatever a browser's default background color is, so you control how the drop-down looks instead of it inheriting the browser's color?

[seeba8]

Got it, thanks! I'll see what I can do. I do actually like the idea of implementing a dark mode - just overriding the background colour seems like a lazy solution. (Also, it will blind you by being so bright when everything else is pitchblack.)

Could you by any chance give me a screenshot of the options menu of the addon? I am not sure if I need to implement that there too or if it is different there.

[vurtomatic]

Options menu: https://imgur.com/a/jYndI

The look of the options menu remains default, all the option menu of the extensions look the same; I think that's fine for consistency.

[seeba8]

Cheers! Yep, that's looking fine, I agree. If you've got time, can you try this test version out? If everything is alright, I will push out the update to everyone soon. dist.zip

It might be best for you to uninstall the addon or create a new profile. Then, go to about: debugging, unzip the addon, click install from file and select the manifest.json.

[vurtomatic]

Wow that's fast and works perfectly!

Default: https://www.dropbox.com/s/s0trh7tfc5ev0ic/Screenshot%202017-10-12%2010.59.58.png?dl=0

Dark: https://www.dropbox.com/s/gx4pqkarulbnu6c/Screen%20Shot%202017-10-12%20at%2010.40.44%20AM.png?dl=0

Custom colors: https://www.dropbox.com/s/k56avbcdyu636zd/Screenshot%202017-10-12%2010.58.51.png?dl=0

The only catch is, after setting custom colors, clicking on Dark doesn't revert to your default Dark theme. It stays on the Custom colors. Clicking on Default reverts back to Default colors.

Amazing job, thank you so much, I hope the feature is useful for others too!

[seeba8]

Ok, not quite intended behaviour, I'll fix that and push the update out sometime today.

Interesting to see though that you changed the icons back from the envelope to eye / megaphone. Two questions about that: Did you do that in the userChrome.css, is that possible? Do you prefer the eye? I am kind of hesitant because the eye looks weird in firefox due to the yellow iris. That's why I tried out the envelope. I am not sold on it yet though... Would be interested in your input on that.

[vurtomatic]

Re. the icons, I didn't change them. Odd that I don't recall the envelope icons, the eye has been creeping me out since I installed the addon.

(I could be and am probably wrong, but I didn't think userChrome.css lets you modify how addons look.)

I'd suggest a flatter / more "icon" look to feel more contemporary. The current icon aesthetics feels a little bit like the old Apple skeuomorphism.

"To read" icon: https://thenounproject.com/term/book/106822/ or Firefox Reader View icon: https://www.dropbox.com/s/me96lcvxeurny1z/Screenshot%202017-10-12%2011.23.22.png?dl=0

Megaphone icon: https://thenounproject.com/term/announce/938593/

[seeba8]

That's the current look on my end (ok, yes, I forgot the eye in the top.)

It is interesting that it is a megaphone on your end because I am just using a basic unicode char (http://www.fileformat.info/info/unicode/char/2709/browsertest.htm), just like for the pencil on the other side. Seems to be a problem with the font maybe? I do vastly prefer the envelope over both megaphone and creepy-eye.

I should probably change that to an icon then too, which I did not want to to keep the filesize as small as possible. Will ponder about that.

[vurtomatic]

That's odd, I didn't know those icons were unicodes.

It's actually weirder that I'm not seeing the same envelope if it's unicode. I should at least get some kind of envelope instead of a megaphone.

According to this tool, my system should display the envelope: https://www.dropbox.com/s/52v2m2waxw6elvd/Screenshot%202017-10-12%2012.21.06.png?dl=0

[seeba8]

The only catch is, after setting custom colors, clicking on Dark doesn't revert to your default Dark theme. It stays on the Custom colors. Clicking on Default reverts back to Default colors.

I cannot reproduce that... Can you try again? Maybe it was a one-off bug. Also, could you check the icons in the popup this time? I might have fixed that. (although I don't know how. But both my browsers show the correct envelope: ✉)

Edit Scrap that. Now I do have a bug as well with the default/dark selector. More precisely, for some reason now it thinks that default has my custom colours too. Let me fix that first.

[vurtomatic]

I'm seeing the envelope now but the megaphone remains.

Default: https://www.dropbox.com/s/hib0z0436d5t15u/Screenshot%202017-10-12%2016.26.09.png?dl=0

Dark: https://www.dropbox.com/s/aceq7b6ph3kmca1/Screenshot%202017-10-12%2016.27.23.png?dl=0

Custom: https://www.dropbox.com/s/7djw20vrisblgf4/Screenshot%202017-10-12%2016.29.09.png?dl=0

Yes to the same dark/custom bug, still there.

[seeba8]

Aaaah @ the icons: I think I know what those are. Is it possible that those bookmarks are not "to read" but "shared"? I never share my bookmarks so I completely forgot that I added that icon. Can you try marking one of the bookmarks with megaphone as "to read" in the edit menu? then, both symbols should appear. Vice versa, if you remove the "shared" property, the megaphone should disappear.

I am open to changing that symbol there's something better (I didn't search for that long as I don't share any pins). Working on the color bug right now.

[vurtomatic]

You're right, that megaphone is the "shared icon", sorry for the confusion!! The envelope icon appears when I toggle "to read": https://www.dropbox.com/s/4ekky760f1cntqw/Screenshot%202017-10-12%2016.44.44.png?dl=0

You could try this to indicate "share": 👥 https://www.emojibase.com/emoji/1f465/bustsinsilhouette

This for "to read": 🔖 https://www.emojibase.com/emoji/1f516/bookmark

The icons are really small (can't tell it's an envelope in the addon popup).

Another option would be to simplify them into more basic shapes, such as colored squares or circles to indicate "to read" and "shared".

[seeba8]

Enough tinkering for today: dist.zip 2AM tells me I should sleep now. But it's getting somewhere. I'm especially happy that I found icons which are both under a license and .svg, thus colourable.

[vurtomatic]

Looks great! https://www.dropbox.com/s/c89qfmrbmteqqhe/Screenshot%202017-10-12%2020.43.26.png?dl=0

Your new "edit" and "envelope" icons are much better: Bigger and easier to tell what they are.

Also noticed there's now a sidebar? Don't think it was there previously, popped up when I installed the versions you're working on. That's really cool.

[seeba8]

Yep, added a sidebar too in the meantime. Not sure if I will use it, or if anyone will. But I figured it can't hurt, people can always close it and never look at it again. Does not cause any kind of code to run when closed. I'll close this issue here, if you have any other suggestions about this one, just re-open it. Or about anything else: open a new one please :)

[seeba8]

@vurtomatic The changes are on Addons.Mozilla.Org now!

[vurtomatic]

Awesome work!!