notes on testing Firefox themes

Discuss application theming and theme development.
Locked
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: notes on testing themes

Post by patrickjdempsey »

For dark themes it is a necessity to strip out any and all OS colors, but for light themes users often expect some OS integration. I've stripped out all of the weird colors and my themes are basically just a handful of colors that work on all platforms and (so far) all OS themes I've seen. These are:

-moz-Dialog / -moz-DialogText - For all windows, panels, tabs and buttons.

-moz-Field / -moz-FieldText - For all text fields and richlists, as well as backgrounds of checkboxes and other details.

Highlight / HighlightText - I use this religiously replacing -moz-CellHighlight which is inconsistently different colors in different OS themes.

GrayText
- I use GrayText instead of hardcoding a grey because in some OS color schemes it is a color (like in Win Classic Rose). Also, this color is designed by the OS color scheme designer to be visible against both -moz-Dialog and -moz-Field, so it's usually safe.

-moz-nativehyperlinktext - Again, like GrayText this color is chosen by the OS scheme designer to work against the OS background color, so it's best not to mess with.

You can get a complete list of all of the insane colors Mozilla has available here: https://developer.mozilla.org/en/CSS/color_value ...but many of them I think are only really tested against Windows, some of them *will* fail on Linux and Mac and even in Windows Classic themes.

Back on topic, I've found it very very useful to test all of my various menus and panels running the Windows Classic "Rose" color scheme. This is useful for both light and dark themes because it's pretty easy to tell if something is the wrong color when it's grey instead of pink or pink instead of black. You may also want to test in the High Contrast theme with black backgrounds and green text. While pretty much every theme fails this, it's a great way to make sure all of your text is working the way you want it. Again, this helps test text for both dark themes with 100% custom colors, and light themes that follow the OS color scheme.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
Zigboom
Posts: 475
Joined: April 22nd, 2009, 5:09 am

Re: notes on testing themes

Post by Zigboom »

Thanks for the tip, it's a very good idea to test with extreme Windows themes such as the ones mentioned, then you know if you got your colors right or it's just luck.
-=# LavaFox & Black Fox - Dark & hot themes for Firefox #=-
https://addons.mozilla.org/en-US/firefox/user/4710003/
User avatar
CatThief
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Re: notes on testing themes

Post by CatThief »

Just to add to the mix, something that often renders quite poorly in Linux (especially on a .splitmenu-menuitem) is -moz-menuhover and -moz-menuhovertext. It depends on what is selected for the desktop; and since there are virtually hundreds of GTK styles out there, reverting back to the old way of doing things seemed like the safest bet.

Using Highlight and HighlightText solved the problem. Additionally I find this a bit peculiar since the default theme for Linux uses both -moz-menuhover and -moz-menuhovertext.

EDIT: I forgot to mention that backgrounds aren't drawn behind .menu-right either when using -moz-menuhover.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.
DMCrimson
Posts: 1025
Joined: February 13th, 2004, 6:11 am

Re: notes on testing themes

Post by DMCrimson »

Mods? Stickify this thread:) This is a good read on theme testing.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: notes on testing themes

Post by patrickjdempsey »

Oh, I mentioned this to mcdavis by email when the forum was down and forgot to post here:

You can test your about pages very easily by using Smart Text: https://addons.mozilla.org/en-us/firefo ... mart-text/

It's an alternative to Locationbar2 that I've found plays *a little* better with themes although users have to manually tweak the urlbar height which is bad. But if you click on the protocol "http://" you get a drop-down list that includes all of the about pages, including ones not in about:about. It makes testing that aspect a breeze.... I wish we had something like that for all of the various panels and popups.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: notes on testing themes

Post by mcdavis »

Yep, good one Patrick, that could save a lot of typing, and keep us from overlooking any.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: notes on testing themes

Post by mcdavis »

To test new-for-Fx7 in-AOM simple settings for add-ons, use this add-on from Geoff Lankow, who wrote the Mozilla code supporting this new feature set.

https://bugzilla.mozilla.org/attachment.cgi?id=541548
https://bugzilla.mozilla.org/show_bug.cgi?id=653637#c91

That shows up in the Add-ons Manager as "Inline Settings (Bootstrap)", version 1. Then just click the Options button.

Some Relevant Bugs:
- Bug 653637 - Provide a simple way for addons to have preferences UI (landed m-c 2011-06-03 for fx7)
- Bug 662012 - Add file, directory, and color type to add-on manager inline preferences (landed m-c 2011-06-19 for fx7)
- Bug 665515 - Unsupported types of inline settings show as an empty row (landed m-c 2011-07-02 for fx7)
- Bug 669342 - Menulists for inline preferences should use the Add-ons Manager styling (not landed yet)
- Bug 658530 - Update about:permissions style to use common in-content page styles (not landed yet)

References:
- http://www.oxymoronical.com/blog/2011/0 ... ns-Manager
- http://www.darktrojan.net/news/2011-06/ ... -mozilla-7
- http://www.darktrojan.net/news/2011-06/ ... -mozilla-7
- https://developer.mozilla.org/en/Instal ... ptionsType
- https://developer.mozilla.org/en/Extens ... ne_Options
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: notes on testing themes

Post by mcdavis »

Re the above ^ simple settings, you can also write an add-on that will show those in a tab, but I haven't seen an example of that yet.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: notes on testing themes

Post by mcdavis »

Updated notes about testing doorhanger notifications:

Doorhanger-style popup notifications (for fx4 and up)
- used in the following locations
1 - identity popup (from site icon in urlbar)
2 - in-content invalid form popup
-- data:text/html,<!DOCTYPE html><html><head><style> label { font-weight: bold; }</style></head><body><form><label>Name <input value="Jonh Smith"></label><br><br><label>SSN <input pattern="\d\d\d-\d\d-\d\d\d\d" value="Don't know" title="Social Security Number must be in the format: NNN-NN-NNNN"></label><br><br><label>Message<br><textarea></textarea></label><br><br><input type='submit' value='Next'></form></body></html>
3 - geolocation permission popup
-- http://www.mozilla.com/en-US/firefox/ge ... /#geo-demo
4 - add-ons manager installation popup
-- TODO Q: how trigger the four kinds of notifications?
.popup-notification-icon[popupid="xpinstall-disabled"],
.popup-notification-icon[popupid="addon-install-blocked"],
.popup-notification-icon[popupid="addon-install-failed"],
.popup-notification-icon[popupid="addon-install-complete"]
-- install a big add-on (Shine Bright) from AMO
-- cancel it before done
-- click the notif icon in AOM
-- restart the installation
-- let it finish
-- with multiple messages in the same popup
--- e.g. one successful + one failed add-on install
--- to test
---- install two versions of the same add-on by drag and drop from hard drive to the add-ons manager at the same time
or
---- rename some JPG to .xpi to create an invalid XPI .e.g somefile.jpg --> somefile.xpi
---- switch to the add-ons manager
---- try to install somefile.xpi by drag and drop onto add-ons manager (it won't work)
---- successfully install some other xpi
---- make sure you're still on the add-ons manager
---- notice in the urlbar the icon indicating notification from add-ons manager
---- click it to open the notification popup
---- should see both notifications in the same popup
5 - password saving and changing popup
-- e.g. change your AMO password
6 - indexedDB permission popup
-- http://html5-demos.appspot.com/static/h ... index.html (requires JS enabled)
-- https://developer.mozilla.org/en-US/dem ... indexeddb/
7 - also can be used by any add-on that feels like it

For Fx6 and up, two popup instances (save password popup and edit bookmark panel) show a Sync promo at the bottom. To see this, reset pref browser.syncPromoViewsLeft to its default value.



- Testing note: for Fx4 through Fx8 nightlies, the "side" attribute is not always correctly set for "bottom" cases, such as when the urlbar is in the Add-on Bar and the site identity popup opens upward from it. In these cases, the attribute may exist but have no value. The arrowhead doesn't show in this case and our shadow is cropped wrong. This is true with both the default theme and NNL.

- Testing note: be sure to test on Linux, where box-shadow / partial transparency in arrowpanel isn't supported by Gecko on that platform, and should not be used. See viewtopic.php?p=10544231#p10544231 for details.

- Bonus: to temporarily show arrowpanel popups so they stay visible while you style them:

#identity-popup {
display: -moz-box !important;
-moz-margin-start: 20px !important;
}

-- use that in Stylish
-- open the panel once, first, the normal way, else you don't see the arrowhead
-- also works with #notification-popup and #invalid-form-popup
-- works for #editBookmarkPanel, but you'll need to click the bookmark star to make the panel contents show
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
ShareBird
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil
Contact:

Re: notes on testing themes

Post by ShareBird »

Sorry if this was discussed before, but I didn't find what I'm looking for... Does someone know what newaddon.css does? And, most important, how can I test it?

Thanks
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: notes on testing themes

Post by mcdavis »

ShareBird wrote:Sorry if this was discussed before, but I didn't find what I'm looking for... Does someone know what newaddon.css does? And, most important, how can I test it?


Yes, I'm glad you asked, I've been meaning to post about that. That's from Bug 476430 - Make third-party add-ons disabled on startup, and allow users to activate them.

You can try this for testing, it's what I use, hopefully that'll help.

http://home.comcast.net/~username54321/ ... waddon.xpi

Start at chrome://testaboutnewaddon/content/overview.xul after you install it and click from there. It lets you exercise the UI. I use the add-on because the live UI is hard to trigger, and if you don't give Firefox the exact right parameters for the live UI, it just closes itself, so this add-on is easier to use. The overview page talks about that.

Here are the notes I have for bug 476430.

Code: Select all

TOPIC: Handle Bug 476430 - Make third-party add-ons disabled on startup, and allow users to activate them
=========================================================================================================
outcome:
- for fx8 and up, all desktop platforms
- for each add-on deemed a suspicious install, opens a new tab containing about:newaddon to allow user to enable/disable
- styled using inContentUI.css
- can manually enter about:newaddon, but closes itself right away unless certain conditions apply
  - the add-on in question is passed in as url argument string about:newaddon?id={x@example.com}
- underlying chrome at chrome://mozapps/content/extensions/newaddon.xul
- populated with add-on-specific data
  - addon icon if available
    - prefers 64px icon if available, else the 32px one
  - addon type, so the right generic icon is used if no add-on-specific icon given
  - addon name
  - addon author
    - (if none, that field is hidden)
  - addon location
    - (not sure, but i think this is location in filesystem where the xpi/jar/dict file was found)
    - because may be long and cropped, also fills in tooltiptext
    - (if none, that field is hidden)
- shows Continue button which leaves it disabled
- but if allow is checked, then hides Continue and instead shows Restart/Cancel buttons
- if Cancel is clicked (to cancel restart) then shows Continue again and unchecks allow (again giving user the choice to Continue or Allow)
open questions:
- DONE Q: does this only run on the upgrade from fx7 to fx8? or any time an add-on is plopped into the profile / user area?
       A: any time the browser starts.  saw this on the upgrade to Firefox 9 when something new (Microsoft .Net Framework add-on) was added without my explicit permission.
- DONE Q: how test the actual page? A: use testaboutnewaddon.xpi instead
- DONE Q: when was dictionaryGeneric.png added? A: looks like Bug 591780 - Frontend support for restartless dictionaries
patch:
- (2011-08-12) https://hg.mozilla.org/mozilla-central/rev/eee41544cb84 (newaddon.xul, newaddon.css, firefox.js, nsBrowserGlue.cpp, etc.)
- (2011-08-16) https://hg.mozilla.org/mozilla-central/rev/36a5644e9d6f (newaddon.css)
theme impact:
- to test a simulated equivalent: use testaboutnewaddon.xpi and visit chrome://testaboutnewaddon/content/overview.xul
NNL impact:
- add new file global/newaddon.css and use styling similar to tab-modal prompts for this UI
- uses chrome://mozapps/skin/plugins/dictionaryGeneric.png, which for some reason we didn't have
  - so we add it now
- and DONE
Last edited by mcdavis on February 2nd, 2012, 4:58 pm, edited 2 times in total.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: notes on testing themes

Post by patrickjdempsey »

I *think* it's for the tabs that appear when you install a new global extension. You can force that page to appear by renaming/deleting extensions.sqlite. This will remove your theme and show the default theme. Be warned that the interface of these pages is extremely obtuse and uses the word "install" when it really means "enable". Also be warned that when I tried directly invoking these pages from my theme by copy-pasting the url, it made the tab instantly close and since it was the only tab open it made the browser instantly close. I filed a bug against that behavior but I haven't checked to see if it's fixed.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
ShareBird
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil
Contact:

Re: notes on testing themes

Post by ShareBird »

mcdavis wrote:
ShareBird wrote:Sorry if this was discussed before, but I didn't find what I'm looking for... Does someone know what newaddon.css does? And, most important, how can I test it?


Yes, I'm glad you asked, I've been meaning to post about that. That's from Bug 476430 - Make third-party add-ons disabled on startup, and allow users to activate them.

You can try this for testing, it's what I use, hopefully that'll help.

http://home.comcast.net/~username54321/ ... waddon.xpi

Wow!! Thank you so much dude! As always, very high-level and professional theme development workflow! :-) =D>

Thank you too Patrick! ;-)
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.
User avatar
ShareBird
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil
Contact:

Re: notes on testing themes

Post by ShareBird »

And of course the next question... What about that selectAddons.css??
I've found out it is called by chrome://mozapps/content/extensions/selectAddons.xul
But loading this file, it fills the whole window... :-k
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: notes on testing themes

Post by mcdavis »

That's for a dialog that runs before the theme (if it's a third-party theme) is loaded. So selectAddons.css needs to be in the default theme, but we don't need it in our themes.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
Locked