459263 - toolbarbuttons lack native style (square corners, etc.)

Status: RESOLVED WONTFIX

(Mozilla Labs Graveyard :: Personas Plus, defect, P2)

Description

[Raphael Guardian]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

The "Personas for Firefox" addon causes the "Home", "Stop" and "Reload" icon borders to become square, opposed to rounded.

Furthermore, if the "Personal Menu" addon is installed, their icons' background changes to its default colour when the mouse is hovered over them.

Reproducible: Always

Steps to Reproduce:
1. Install "Personas for Firefox".
2. Install "Personal Menu".
3. View a persona.
4. Let the mouse hover an icon.
Actual Results:  
"Home" icon border is square.

"Personal Menu" icons background colour defaults to its default colour when hovered over.

Expected Results:  
"Home" icon border should be rounded.

"Personal Menu" icons background colour should remain the same when hovered over.

I am using the default theme.

Comment 1

[Raphael Guardian]

Attachment: screenshot of Navigation Toolbar when mouse was hovering over "Display Menu" icon

Comment 2

[Myk Melez [:myk] [@mykmelez]]

Yikes, that does look bad!  Sorry for the delay in responding to this bug.  Can you try out the latest version of personas and let us know if you still see the problem?

You can get the latest version from the following URL:

http://people.mozilla.com/~cbeard/personas/dist/personas-v1.0b1.xpi

Comment 3

[Raphael Guardian]

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Personas 1.0b1.1

> The "Personas for Firefox" addon causes the "Home", "Stop" and "Reload" icon
> borders to become square, opposed to rounded.

This part of the problem has been resolved, however it has been replaced by an even worse problem, the icons' (Home, Stop, etc.) background changes to its default colour when the mouse is hovered over them, regardless whether "Personal Menu" <https://addons.mozilla.org/en-US/firefox/addon/3895> is installed.

Comment 4

[Raphael Guardian]

Attachment: A screenshot of Navigation Toolbar when mouse was hovering over "Home" icon with Personas v1.0b1.1 installed (Note "Personal Menu" is not installed at all)

Comment 5

[Myk Melez [:myk] [@mykmelez]]

I see this problem as well.

Comment 6

[Chris Beard]

Attachment: screenshot showing transparency on button

this should be fixed now with a minor change to the skin for window (see attached screenshot)

http://hg.mozilla.org/labs/personas/rev/05c4fdc710da

Comment 7

[Raphael Guardian]

When the mouse is hovering over an icon (e.g. Home icon), the icon border is square opposed to rounded.

See <u>screenshot showing transparency on button</u>

Comment 8

[Logan]

Yes, I'm having this issue as well after installing the latest update to Personas. I do not have "Personal Menu" installed. All my buttons appear like in the "screenshot showing transparency on button" image uploaded on 2/28/09 by Chris Beard. When my mouse hovers over a button they appear as a raised square instead of rounded. All buttons (google toolbar, facebook toolbar, home etc.) are affected except for the menu bar (File, Edit, View, History...) buttons. The menu bar buttons are still rounded and shaded as they should be.

Comment 9

[Suneel]

Updating summary to reflect current issue (which is also the original issue on which this bug was filed). This will be a priority after upcoming release.

Comment 10

[Fernando Pereira Silveira]

I'm having this issue too; it also happens on bookmarks toolbar buttons. 

Apparently this is a regression, since it was fixed on 1.0b3 and got back on 1.0b4.

Comment 11

[Myk Melez [:myk] [@mykmelez]]

(In reply to comment #10)
> I'm having this issue too; it also happens on bookmarks toolbar buttons. 
> 
> Apparently this is a regression, since it was fixed on 1.0b3 and got back on
> 1.0b4.

Yes, this bug was fixed by a change that caused another problem (comment 3).  cbeard fixed that problem (comment 6), which made this bug reappear.

Personas removes native style from the toolbar buttons in order to be able to style their background color.  Removing native style is what causes buttons to appear square.

There isn't a simple solution to this problem.  One solution is to painstakingly recreate the native appearance of the buttons (modulo the things we want to be different, like the background color) via CSS rules.

Comment 12

[Myk Melez [:myk] [@mykmelez]]

Sean: we had to remove native (OS) style from Windows toolbarbuttons in order to make their backgrounds transparent (since the native appearance specifies a background color).  But that creates other problems, for example the buttons now have square corners instead of rounded ones.

How hard would it be to emulate the Windows XP and Vista native styles using CSS (and images, if necessary)?

Comment 13

[Sean Martell]

If you could isolate what images are being called to create the button look in XP/Vista, I can rebuild the PNGs with proper transparency.

Comment 14

[Myk Melez [:myk] [@mykmelez]]

(In reply to comment #13)
> If you could isolate what images are being called to create the button look in
> XP/Vista, I can rebuild the PNGs with proper transparency.

That's the thing: as far as I know, we're not using our own images at all; rather, we're applying the native OS theme using -moz-appearance.

As a result, it's not simply a case of modifying the images provided by Firefox; we need to actually create new images that mimic the appearance of the native OS theme (in both XP and Vista, which each have their own theme).

Comment 15

[Owen Skarpness]

Attachment: Screenshot of v1.0rc1 vs 1.0b1.1 mouseover

Does firefox write the code for the mouseover on the bookmarks toolbar differently than it does for the refresh/stop buttons? I'm not getting the opacity glitch with the bookmarks toolbar buttons on 1.0b1.1

Comment 16

[Myk Melez [:myk] [@mykmelez]]

(In reply to comment #15)
> Does firefox write the code for the mouseover on the bookmarks toolbar
> differently than it does for the refresh/stop buttons?

It's not exactly the same, but it's substantially similar.  In particular, both kinds of buttons specify |-moz-appearance: toolbarbutton|, which applies the OS theme to those buttons: borders (which includes corners), background color, etc.

And Personas overrides that OS theme for both kinds of buttons by setting |-moz-appearance: none| in order to make the background color of the toolbarbuttons be transparent (which is what causes this bug).


> I'm not getting the opacity glitch with the bookmarks toolbar buttons on
> 1.0b1.1

Just to make sure I understand: using Personas 1.0b1.1 with a persona selected the refresh/stop buttons have an opaque background but the bookmarks toolbar buttons have a transparent background?  Which version of Firefox are you using, and are you using it on Windows XP or Vista?

Comment 17

[Myk Melez [:myk] [@mykmelez]]

For me, on Windows XP with Firefox 3.0.7 and Personas 1.0b1.1 with a persona selected, both the Refresh/Stop/Home buttons and the Bookmarks Toolbar buttons have opaque backgrounds.  On Windows Vista with Firefox 3.0.7 and Personas 1.0b1.1 with a persona selected, those buttons all have transparent backgrounds.

So the opaque background problem was Windows XP-specific as far as I can tell, and it also was consistent between the Bookmarks Toolbar buttons and other toolbar buttons.

Of course the original (and current) issue in this bug report, the lack of native styling of the buttons, applies to both Windows XP and Windows Vista, as we've removed native styling on both OSes.

But given that Vista's native styling gives those buttons a transparent background, we could actually fix the current issue for Vista by separating the Personas style code for Vista and XP style code (similar to how we have separate the style code for Firefox 3.0 and Firefox 3.1 on Mac) and only removing the native styling for XP.

We'll still need a separate fix for XP, though.  Sean: perhaps you can create hover/active state background images that mimic the appearance of the default theme on Windows XP?

Comment 18

[Myk Melez [:myk] [@mykmelez]]

I split the Windows XP and Vista skins and removed |-moz-appearance: none| from the Vista skin in changeset http://hg.mozilla.org/labs/personas/rev/77893d7b73e3.

That means toolbar buttons now have native appearance on Vista.  So this bug only remains for XP.  To fix XP I think we'll need Sean to make XP-like background images for the buttons' hover and active states.

Comment 19

[Sean Martell]

Attachment: XP "native" rollover - replacement PNG

I've recreated the look of the beveled button that appears natively, creating a Personas-friendly alpha version.

Comment 20

[Sean Martell]

Attachment: new XP rollover example

An example of what the new PNG will look like.

Comment 21

[Myk Melez [:myk] [@mykmelez]]

Sean: do you know of an existing button that uses an image like this? I'm just wondering if we have a template for how to cut up an image like this and use it to specify a button's background via CSS.

Comment 22

[Sean Martell]

I don't know of any buttons that use an image in this way.

Perhaps check with Alex as he has a greater understanding of the current theme.

Comment 23

[Myk Melez [:myk] [@mykmelez]]

I checked with Alex and beltzner, and Alex suggested looking at the bookmark contextual dialog and users of http://mxr.mozilla.org/seamonkey/source/toolkit/themes/pinstripe/global/icons/round-button-leftcap.png, while beltzner suggested looking at the identity and search buttons on Mac OS X.

beltzner also noted that a number of button images have been replaced by -moz-border lately.  I looked into that, and it looks like a combination of -moz-border-radius and -moz-border-(top|bottom|left|right)-color can draw the borders, but there's no CSS property that can draw the background gradient.

So far I haven't found a good example of a sliced up button, but the more I think about this, the harder it seems, because toolbar buttons have two different basic sizes, but those change when button text is displayed. Plus bookmark toolbar items have variable widths.

Perhaps we're better off waiting for someone who understands the style system to fix -moz-appearance so its rules get inserted into the cascade and can be overridden on an individual basis.

Comment 24

[Raphael Guardian]

Attachment: Ubuntu screenshot

(In reply to comment #18)
> So this bug only remains for XP.

Here is a screenshot of Personas on Ubuntu.

Personas for Firefox 1.0
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.8

Comment 25

[Myk Melez [:myk] [@mykmelez]]

(In reply to comment #24)
> Here is a screenshot of Personas on Ubuntu.

Erm, right, and for Linux.  Linux is even harder to fix than XP, because there's no default theme to which we can direct users.  GNOME and KDE each have their own, and distributions like Ubuntu can override those with their own themes too.

Comment 26

[Owen Skarpness]

Maybe this is just a dumb question, but: Why not just make personas its own theme and default it to one style? Or just lock the default theme to vista as that seems to be the only one it's working correctly for. Is this type of thing possible? Could you use and/or lock it to the vista firefox theme on XP/Ubuntu?

Comment 27

[Logan]

Wait a minute. I keep hearing talk about XP and linux and stuff, but I have this problem on Vista. As of right now, I have the latest versions of Firefox, Personas, all extensions, along with all the latest updates for Vista. It's regular Vista, Home Premium whatever, 32-bit. 

If you need any other information, please let me know. I really want to get this problem fixed, I've had it for over a month now and I'm getting sick of it. I've looked in the Personas forum, but have not seen any complaints from other Personas users there. 

If it is something specific to me that I am doing to give myself this problem, I would like to correct this as quickly as possible. Thank you so much.

If you want a list of all of my extensions, they are:
Adblock Plus 1.0.1
Better Lifehacker 0.4.1
Customize Google 0.76
Download Statusbar 0.9.6.4
DownThemAll! 1.1.2
DragNDropToolbars 0.0.0.7
Facebook Toolbar 1.2.1
Favicon Picker 3  0.5
FireTorrent 1.0.1
Flagfox 3.3.10
FoxyProxy 2.8.14
FoxyTunes 3.0.4
Google Gears 0.5.4.2
Google Toolbar for Firefox 5.0.20090122Wb2
GooglePreview 3.18
Greasefire 1.0.3
Greasemonkey 0.8.20090123.1
gui:config 0.3.7
Highlighter 0.1.4
Locationbar^2  1.0.3
Microsoft .NET Framework Assistant 1.0
Personas for Firefox 1.0
Read it Later 0.9929
Shareaholic 1.6
Socialite 1.3.2.1
Ultimate MySpace Toolbar (unofficial) 2.0.0.11175mz
Undo Closed Tabs Button 3.0.3
United States English Dictionary 3.0.3
Update Notifier 0.1.5.4
WikiLook 1.3.7
Wikipedia Toolbar 0.5.9
WOT 20090325

Comment 28

[Myk Melez [:myk] [@mykmelez]]

Logan: the problem has been fixed on Vista, but the fix hasn't yet made it into a release.  It is, however, in the latest development build:

http://people.mozilla.com/~myk/personas/dist/personas-dev.xpi

Note that the latest development build contains other changes, some of which might be buggy.  Also, it doesn't automatically update to newer versions like the stable release does, although it should (I filed bug 486343 on that).

Suneel and I are talking today about how to push fixes like this Vista fix into an update to the stable release.

Comment 29

[Myk Melez [:myk] [@mykmelez]]

Note: the border in Sean's XP replacement image (attachment 369996 [details]) can be implemented in CSS using the following rules:

  border-style: solid;
  border-top-width: 5px;
  border-bottom-width: 4px;
  border-left-width: 1px;
  border-right-width: 1px;
  -moz-border-top-colors:    rgba(0, 0, 0, 0.10) rgba(253, 253, 253, 1.00) rgba(255, 255, 255, 1.00) rgba(255, 255, 255, 0.92) rgba(255, 255, 255, 0.78);
  -moz-border-bottom-colors: rgba(0, 0, 0, 0.10) rgba(23, 23, 21, 0.23)    rgba(102, 102, 98, 0.21)  rgba(186, 185, 175, 0.21);
  -moz-border-left-colors:   rgba(0, 0, 0, 0.09);
  -moz-border-right-colors:  rgba(0, 0, 0, 0.09);
  -moz-border-radius: 3px;

I don't know of any way to implement the background in CSS, though, without support in CSS for either gradients (bug 479220) or background-size (bug 189519).

Comment 30

[Logan]

Cool Myk, thanks for the info. Owen e-mailed me and told me to install v1.0b1.1 of personas, and it completely fixed the problem. If anyone else needs the fix for vista until they put it into a release version like Myk said, you can get it here: https://addons.mozilla.org/en-US/firefox/addons/versions/10900
Just scroll to the bottom of the page.

Comment 31

[Owen Skarpness]

I just tested the dev build available here <http://people.mozilla.com/~myk/personas/dist/personas-dev.xpi> and can confirm that the problem is fixed in this release at least for vista. Thanks, guys!

Comment 32

[Owen Skarpness]

Perhaps this should go into a new bug report: Randomly when starting firefox with the newest build, I've noticed personas switch back to either the default style, or perhaps simply fail to load the skin. The background is simply white, looking as it does as if it were in the process of changing skins, waiting for one to download or load.

This has not happened with any other build that I know of.

Comment 33

[Myk Melez [:myk] [@mykmelez]]

Owen: thanks for reporting that problem!  Please do file a separate bug report about it, as it's a different issue.

Comment 34

[Myk Melez [:myk] [@mykmelez]]

This affects multiple platforms, Windows XP -> All.

Comment 35

[Ryan Doherty (:rdoherty)]

wontfixing as personas the extension is no longer responsible for applying the style. If this is still a problem please open a bug under Firefox -> Theme component.