Is this actually specific to "Remember Password"? Every PopupNotification should be using this exact same style.

I think this isn't Win 8 specific but Windows specific.

Yes, this is more general. "Remember Password" was just the easiest repro-steps that I had at hand. I've updated the URL field to link to an easier reproduction.

Unassigning as I haven't been working on this and I don't want to hold people up.

This requires a bunch of css changes in http://hg.mozilla.org/mozilla-central/annotate/d92db71d4e67/toolkit/themes/windows/global/notification.css#l72 to update the box-shadow/background styling to match a 'normal' flat button such as it exists on e.g. the cert popup notification's "More Information" button.

Can this be reproduced on Windows 7? If so I can work on it.

(In reply to rn10950 from comment #6) > Can this be reproduced on Windows 7? If so I can work on it. In principle, yes, but the style will need to be updated for Windows 8 only; the basic issue is that you get Windows 7-ish styling on Windows 8. If you think you can work out how to get the Windows 8 styling while using Windows 7, and then invert the relevant media queries afterwards so it continues to work as it does now on Windows 7, but gets the right styling on Windows 8, then yes. But that's not super-straightforward... If that sounds tricky (it does to me, but YMMV - I do have win8 and win7 myself to check this on), might I suggest bug 1111138 or perhaps bug 1115924 or bug 1002991? Please CC/needinfo me on those if I'm not already, should you choose to work on them. :-)

I usually have Win7 in classic (Win95) mode. I think I have reproduced this.

(In reply to rn10950 from comment #8) > Created attachment 8551006 [details] > Windows 7 reproduction > > I usually have Win7 in classic (Win95) mode. I think I have reproduced this. Ah, fair enough. Yes, I guess the classic look can be the same as the win8 look. All yours then! :-)

I have discovered that this may depend on Bug 509642, the comment on http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/windows/global/notification.css#89. The button on the cert dialog is system native because it doesn't have the dropdown menu. We can use the CSS system colors (http://webdesign.about.com/od/colorcharts/l/blsystemcolors.htm) to make it look close to the system style, but I doubt there is a way to make it look 100% like the system theme.

rn10950 - thanks for looking! I'm traveling today, I'll investigate more tomorrow (Monday). I'll leave the needinfo to remind myself.

I was using Nightly on XP and I noticed something very interesting. The XP button style is different than the aero one, works on both classic and luna, and looks like it would fit better in 8/10 then the current one. I do not currently have access to a Windows 8 machine or VM, but Windows 8 and 10 pretty much look the same. (flat design) I have photoshopped the XP button style on the 10 window, and it actually does look better than the current one. If we can do OS detection, we should apply the XP CSS instead of the 7 one. I think the main culprit is that 8+ uses aero and sets %ifndef WINDOWS_AERO off, which activates the 7 style. If we can somehow tell %ifndef WINDOWS_AERO to only work on Vista/7, we may be able to fix this. But then, our other issue is that this also reproduces in Classic, with aero and DWM disabled, so I don't know.

I don't think we need to fix bug 509642 here. What would suffice for this bug is to use media queries to fix the gradient that looks so odd: http://hg.mozilla.org/mozilla-central/annotate/056c556b41b2/toolkit/themes/windows/global/notification.css#l106 If you leave the 'else' part of the ifdef there with a new ifndef WINDOWS_AERO: %ifndef WINDOWS_AERO box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 2px 2px rgba(255,255,255,.35) inset, 0 -1px 2px rgba(0,0,0,.1) inset, 0 1px 0 rgba(255,255,255,.35); %endif and then after that block add a new ifdef with a media query: %ifdef WINDOWS_AERO @media (-moz-os-version: windows-vista), (-moz-os-version: windows-win7) { /* Put these styles for the button (copy the selector): background-image: linear-gradient(rgba(250,250,250,.6), rgba(175,175,175,.25) 49%, rgba(0,0,0,.12) 51%, rgba(0,0,0,.09) 60%, rgba(0,0,0,.05)); box-shadow: 0 0 1px 1px rgba(255,255,255,.75) inset; in here... */ } %endif Then I think that alone will make Win10 and Win8 look better. Can you give that a shot?

I have tried the code you suggested, but the button just gets smaller in both Windows 7 and 10. I have included a screenshot of my modifications the code and the end result. I will experiment more when I get home at 3PM. (New York/EST) The code at this point looks ugly and I have a lot commented out, but when it's done I will clean that up before I submit a patch.

Nevermind, I am such an idiot. the file I modified is on my DESKTOP and not in mozilla-central. When I get home, I will put the file in the source dir.

OK, I got the button to look good under Win8/10. But, the :hover and :active of the "Share Location" button and the :active of the dropdown arrow are still the aero style. It looks like the code is on lines 159-183 of http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/windows/global/notification.css#159. I do need to know however, what values do you want me to set the :hover and :active to?

(In reply to rn10950 from comment #16) > OK, I got the button to look good under Win8/10. But, the :hover and :active > of the "Share Location" button and the :active of the dropdown arrow are > still the aero style. It looks like the code is on lines 159-183 of > http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/windows/global/ > notification.css#159. I do need to know however, what values do you want me > to set the :hover and :active to? What happens if we don't set them to anything at all on Win8/Win10? It looks like the current non-aero colors are for the white XP look you identified... I don't think we want that - just native(ish) styling on the button will look OK on win8, I think?

OK, here's the patch. I tested this on XP Classic, XP Luna, 7 Classic, 7 Aero Glass and Windows 10. I used -moz-windows-glass instead of -moz-os-version because the aero styles were showing up in classic. The basic style that we're using for XP and 10 is also now enabled in Windows Classic under Vista and 7.

Comment on attachment 8569082 [details] [diff] [review] bug999298_doorhangerbutton.diff Review of attachment 8569082 [details] [diff] [review]: ----------------------------------------------------------------- Nice work! Yes, this looks better on Win8 as well. I also tested Win7 Aero and Aero Basic... I'm ambivalent about whether basic should get the same styling as aero, but it seems like added code and the flat style looks just as good, so let's leave it as you've done it. This is basically ready to go, apart from the nits below. If you attach a new patch with the nits addressed, adjust the patch summary to include "r=gijs", and add the 'checkin-needed' keyword, we'll be shipping this! :-) ::: toolkit/themes/windows/global/notification.css @@ +119,5 @@ > + @media (-moz-windows-glass) { > + .popup-notification-menubutton:not([type="menu-button"]), > + .popup-notification-menubutton > .button-menubutton-button, > + .popup-notification-menubutton > .button-menubutton-dropmarker { > + background-color: transparent; Nit: this has a tab; don't do that, use the same indenting as below (ie 2 space from the selector above it) @@ +185,5 @@ > + .popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker { > + background-color: transparent; > + background-image: linear-gradient(rgba(250,250,250,.9), rgba(200,200,200,.6) 49%, rgba(0,0,0,.23) 51%, rgba(0,0,0,.17) 60%, rgba(0,0,0,.05)); > + } > + .popup-notification-menubutton:not([type="menu-button"]):hover, uber-nit: :hover rules should come before :hover:active rules.

Here is Patch v2.

(for sherriffs: these are CSS-only changes; I don't think they need a trypush)

This seems to be a low impact issue, that has already been verified on various Windows systems (comment 18, comment 19). Setting as qe-verify-... please set it back for verification if you think this needs any special attention from QA.