1001204 - change default style for nsIAlertsService when clickable

Status: RESOLVED FIXED

(Toolkit :: Themes, defect)

Description

[Robert Utasi [:hunboy]]

Attachment: current clickable layout

when nsIAlertsService is clickable the blue underlined text is not too esthetic (actually nasty - see attachment).

As I know (hopefully well) there is no way to modify this style from any xul app, this depends on Theme basically

AR: text is default anchor text

ER: text can be black and turn to blue (without underline) exclusively when
    hovered (such as thunderbird behavior)

Comment 1

[Matthew N. [:MattN]]

(In reply to Robert Utasi [:hunboy] from comment #0)
> As I know (hopefully well) there is no way to modify this style from any xul
> app, this depends on Theme basically

I'm not sure that I understand what you're saying here. You should be able to override these theme styles with your own code from within the XUL application if you feel the need.

See for example https://mxr.mozilla.org/mozilla-central/source/toolkit/themes/windows/global/alerts/alert.css for Windows.

Comment 2

[Robert Utasi [:hunboy]]

Mathew, I've tested, can't reach it from chatzilla xul css. the trynotification popup is a different window object.

Comment 3

[Matthew N. [:MattN]]

Sure, but you can overlay that window or programmatically append the stylesheet you want added.

Comment 4

[Matthew N. [:MattN]]

So, I talked with Robert on IRC and it seems like there isn't a good way to target only Chatzilla alerts with our current DOM (separate issue if we want to solve it) but I can see how we may want to change the toolkit design anyways.

Stephen, we currently use[1] color: -moz-nativehyperlinktext; and text-decoration:underline; on the alert text when a notification is clickable so it looks like attachment 8412230 [details] except with blue text by default. Your design from bug 796111 attachment 666677 [details] doesn't show any underline or different color so I was wondering what was expected. Do you have a nicer design for clickable notifications? Can we at least drop the text-decoration? Can we only show the underline on hover like we do for links in doorhanger notifications? http://grab.by/wl9a

[1] https://mxr.mozilla.org/mozilla-central/source/toolkit/themes/windows/global/alerts/alert.css?rev=546ccc10a18f#56

Comment 5

[Robert Utasi [:hunboy]]

Attachment: proposal patch

Comment 6

[Stefan [:stefanh]]

-.alertText[clickable="true"] {
+#alertNotification[clickable="true"]:hover .alertText[clickable="true"] {
   color: -moz-nativehyperlinktext;
-  text-decoration: underline;
 }

In the application UI we do the opposite (show the underline upon :hover)

Comment 7

[Robert Utasi [:hunboy]]

Stefan,

in this proposal it doesn't show underline at all.
The cursor: pointer and turning blue when hovered is enough to figure, it's clickable.

Comment 8

[Dão Gottwald [:dao]]

Do you want this to look like a link? Then it should look and behave like other links in the UI. Otherwise you should use neither the link color nor the underline. Blue on hover seems undecided and inconsistent.

Comment 9

[Robert Utasi [:hunboy]]

Dão,

> Do you want this to look like a link?
> Then it should look and behave like other links in the UI.

Actually I dont want to look like a link at all, because really hard to reading.
So this should look same as unclcikable mode while not hovered for normal reading way.

And while the whole popup is clickable (which is normal), not only the alertText, the linkstyle for the alertText isn't too lucky based on your comment.

This is not a real link in other way, just looks like that at this moment. It fires observer. Or closes popup.

> Otherwise you should use neither the link color nor the underline.
> Blue on hover seems undecided and inconsistent.

Idea: this can have lighter background color when hovered perhaps. That should be consistent and improves the contrast rate. This can be 1 possible compromise if using blue is inconsistent.

Idea: the the border can be different colored when clickable.

Btw the cursor:pointer represents itself if the popup is clickable. We really don't need more information about it.

(Although Thunderbird works in this way (blue on hover) this was the original idea I mentioned.
 But I'm not fond of it. Just was a sample idea.)

So at this point we need clarify, this is a link or not? I vote: not.

Comment 10

[Matthew N. [:MattN]]

(In reply to Robert Utasi [:hunboy] from comment #9)
> Btw the cursor:pointer represents itself if the popup is clickable. We
> really don't need more information about it.

A user shouldn't have to move their mouse to the notification only to find out that it's not clickable IMO. Note that for web notifications it's always clickable (since we focus the tab that opened it). Extensions notifications aren't necessarily clickable.

Comment 11

[Robert Utasi [:hunboy]]

Attachment: Graphical presentation of some possible variations of the layout

Here are some graphical samples to present what I have been talking about at Comment 9 .
I think it looks cute.

Comment 12

[Robert Utasi [:hunboy]]

Attachment: possible patch for graphical presentation

This one for discuss.

Comment 13

[Robert Utasi [:hunboy]]

Attachment: graphical presentation

Based on discuss on chat.

Comment 14

[Robert Utasi [:hunboy]]

Attachment: patch v1.0

Patch for graphical presentation based on discuss on chat.

Comment 15

[Dão Gottwald [:dao]]

"light background for better contrast" seems misguided -- for a dark / high-contrast OS theme, it will actually decrease the contrast. I'm not sure what problem you're trying to solve here. The contrast should already be fine with the default theme. Why are you trying to improve it?

Comment 16

[Robert Utasi [:hunboy]]

(In reply to Dão Gottwald [:dao] from comment #15)
> "light background for better contrast" seems misguided -- for a dark /
> high-contrast OS theme, it will actually decrease the contrast. I'm not sure
> what problem you're trying to solve here. The contrast should already be
> fine with the default theme. Why are you trying to improve it?

Dão,

For a better readability with default chrome theme. The default chrome theme is light, and I've tried several variants for light view and this value looked the best to me. And from app/extension i cannot modify the theme itself.

Yes, this is decreasing the contrast with the dark / high-contrast OS theme, but this can be fixable in the theme itself. I don't see dark theme in the trunk, so i can't fix that.
(this would be rgba(0,0,0,0.3) instead of rgba(255,255,255,0.3) )
 This is theme owner's related. Where is that theme source?

Comment 17

[Dão Gottwald [:dao]]

(In reply to Robert Utasi [:hunboy] from comment #16)
> (In reply to Dão Gottwald [:dao] from comment #15)
> > "light background for better contrast" seems misguided -- for a dark /
> > high-contrast OS theme, it will actually decrease the contrast. I'm not sure
> > what problem you're trying to solve here. The contrast should already be
> > fine with the default theme. Why are you trying to improve it?
> 
> Dão,
> 
> For a better readability with default chrome theme.

This is -moz-DialogText for the text color on a -moz-Dialog background. Readability should be just fine unless you have dramatically lower than average eye-sight, in which case you should enable a high-contrast theme in your operating system's settings.

> Yes, this is decreasing the contrast with the dark / high-contrast OS theme,
> but this can be fixable in the theme itself.

No, I'm talking about high-contrast OS themes, not Firefox themes.

Comment 18

[Robert Utasi [:hunboy]]

Attachment: dark OS

Dão, see the picture

You've pointed to a good problem, here is the current (not the modified one) result of dark OS, this is worse than I thought, so this requires improve in any case.

We just removed the -moz-nativehyperlinktext so this one fixes the totally unreadability in dark OS.

So you suggest, not to modify the actual background?

Comment 19

[Robert Utasi [:hunboy]]

Attachment: dark OS with patch

Dão,

here is the patched new style with dark OS

what is your opininon? acceptable or not?

Comment 20

[Dão Gottwald [:dao]]

(In reply to Robert Utasi [:hunboy] from comment #18)
> So you suggest, not to modify the actual background?

Exactly. Leave the gradient at 10-20% opacity and only make it lighter on hover.

(In reply to Robert Utasi [:hunboy] from comment #19)
> what is your opininon? acceptable or not?

It's a regression for high-contrast users for no good reason as far as I can tell, so I think this means not acceptable.

Comment 21

[Robert Utasi [:hunboy]]

Attachment: patch v1.1

New Patch is based on Dão's additional instruction.

Comment 22

[Robert Utasi [:hunboy]]

Attachment: graphical presentation for patch v1.1

Comment 23

[Robert Utasi [:hunboy]]

Attachment: patch v1.1

Comment 24

[Matthew N. [:MattN]]

Styling only change so a try push isn't likely to find anything.

Comment 25

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/integration/fx-team/rev/7a6a07449272

Comment 26

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/7a6a07449272

Comment 27

[Diego Casorran [:diegocr]]

So, we'll need now to hover the alert notification to know whether it's clickable or no? That's not nice. No doubt that looked weird on Windows XP (Er, and its Classic Theme), but what about other OSs? Here on w7 the underline text looked nice.

Hence, i see the solution worse than the [inexistent] problem [for newer OSs]

*IMHO*

Comment 28

[Robert Utasi [:hunboy]]

Diego,

I've tested it on w7 theme as well (only there is no screenshot of that, i can't make 100 screenshots however I have more, just I didnot upload them all), i'm just using virtual machines for testing everything on different Os's, so I have winXP testmachine too.

This is a compromise, not the same as I planned at first. Based on comment 8 it's not a link so can't  look like a link. It was hard discuss before compromise. The system alerts are always clickable, and blue underlined text isn't readable well. And not compatible to high contrast dark OS.

As I mentioned before this is not an "I like/don't like" issue. This is readability issue and Dão has right with it (with dark Os pointing), there is no 2 same person with same eyesight.

Comment 29

[Diego Casorran [:diegocr]]

Well, then it looks like you intentionally submitted screenshots for the worse-looking notification on any platform :)

Also, according to MDN "the text is made to look like a link"; so... huh?

Comment 30

[Diego Casorran [:diegocr]]

How about what Matthew proposed and apparently ignored, make it look like doorhanger notifications? This should indeed be better than making clickable text the same than non-clickable.