Firefox default theme gives me incorrect menu highlighting

[jez]

Wanting to base my theme on the default Firefox theme (I'm currently using 5.0), I've run into a rather early problem: even the default FF5 theme has a small issue! When I hover over a menu item, it is highlighted as white text on a light grey background, which is almost unreadable. The native dialogs highlight menus as white text on a blue background, so the text colour seems to be OK - it's the background that is wrong. Why is it light grey? Below are screenshots of what a native dialog's menu looks like, and a FF5 menu. I'm running Debian 6.0.2 and Firefox 5.0.

[patrickjdempsey]

You should definitely file a bug on this one. I think it has to do with the fact that Firefox uses Windows-centric colors for the menus:

Code: Select all

  background-color: -moz-menuhover;
  color: -moz-menuhovertext;

Instead of the generic:

Code: Select all

  background-color: highlight;
  color: highlightText;

For my theme I use Highlight for most OS's and only use -moz-menuhover when I detect windows. The Linux builds of the default theme should really use highlight for this.

[CatThief]

The Linux builds of the default theme should really use highlight for this.

I totally agree. I see mixed results on Linux depending on which GTK engine is in use, especially when the default desktop is something other than Gnome.

[jez]

You should definitely file a bug on this one. I think it has to do with the fact that Firefox uses Windows-centric colors for the menus:

Code: Select all

  background-color: -moz-menuhover;
  color: -moz-menuhovertext;

Instead of the generic:

Code: Select all

  background-color: highlight;
  color: highlightText;

For my theme I use Highlight for most OS's and only use -moz-menuhover when I detect windows. The Linux builds of the default theme should really use highlight for this.

How does your theme work; do you set -moz-appearance:none? For me, it doesn't matter what I set background-color to for menu and menuitem elements; they have -moz-appearance set to 'menuitem', which is what seems to be overriding the background color and causing it to be light grey. The white text is actually the correct highlight color; it's just meant to have a dark blueish background when highlighted.

[patrickjdempsey]

I think I have mine set to -moz-appearance:none specifically so I can override the colors.... here's a sampling of some of the craziness going on in my theme... honestly I'm still having issues with some things like horizontal positioning and I have no idea what do to next without multiple platforms to test against:

Code: Select all

/* correction for menu hovers by a13c */
menuitem[type="checkbox"],menuitem[checked="true"] {-moz-appearance: inherit;}
menuitem[type="radio"] {-moz-appearance: inherit;}

.menulist-menupopup > menuitem,
menulist > menupopup > menuitem,
.menulist-menupopup > menu,
menulist > menupopup > menu {
  -moz-appearance: none;
  font: message-box;
  color: -moz-FieldText;
}

menulist > menupopup > menuitem[_moz-menuactive="true"] {
  background-color: highlight;
  color: highlighttext;
}

menuitem[type="checkbox"],
menuitem[checked="true"] {
    -moz-appearance: checkmenuitem;
}
menuitem[type="checkbox"] > .menu-iconic-left {
  -moz-appearance: menucheckbox;
}

menuitem[type="radio"] {
  -moz-appearance: radiomenuitem;
}
menuitem[type="radio"][checked="true"] > .menu-iconic-left {
  -moz-appearance: menuradio;
}

@media all and (-moz-windows-default-theme) {
  
  menulist > menupopup > menuitem[_moz-menuactive="true"], 
  #appmenu-editmenu[_moz-menuactive="true"],
  #appmenuSecondaryPane > menu[_moz-menuactive="true"],
  #appmenuSecondaryPane > menuitem[_moz-menuactive="true"],
  #appmenuPrimaryPane > menu[_moz-menuactive="true"],
  #appmenuPrimaryPane > menuitem[_moz-menuactive="true"],
  .splitmenu-menuitem[_moz-menuactive="true"],
  .splitmenu-menu[_moz-menuactive="true"],
  menupopup > menu[_moz-menuactive="true"],
  menupopup > menuitem[_moz-menuactive="true"],
  popup > menu[_moz-menuactive="true"],
  popup > menuitem[_moz-menuactive="true"] {
  background-color: -moz-menuhover !important;
  color: -moz-menuhovertext !important;
  }
}

[ShareBird]

I think your issue has to do with the Windows theme you are using. The light grey indicates that you are hovering a disabled menu item; the font color is that is wrong in this case...

[jez]

ShareBird, this is the default Firefox theme that came with a download from mozilla.org.

[patrickjdempsey]

He's running Debian.

[ShareBird]

He's running Debian.

Heheh.... I've read your information on signature thinking it was his....

Anyway, if the theme is relying on -moz-appearance, those problems come probably from the system theme, I guess...