change default style for nsIAlertsService when clickable

RESOLVED FIXED in mozilla32

Status

()

defect
--
trivial
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: hunboy, Assigned: hunboy)

Tracking

Trunk
mozilla32
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(6 attachments, 5 obsolete attachments)

Assignee

Description

5 years ago
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)
(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.
Component: Theme → Themes
Product: Firefox → Toolkit
Assignee

Comment 2

5 years ago
Mathew, I've tested, can't reach it from chatzilla xul css. the trynotification popup is a different window object.
OS: Windows 7 → All
Hardware: x86 → All
Sure, but you can overlay that window or programmatically append the stylesheet you want added.
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
Flags: needinfo?(shorlander)
Summary: change default style for nsIAlertsService when clickable (try notification popup) → change default style for nsIAlertsService when clickable
Assignee

Comment 5

5 years ago
Posted patch proposal patch (obsolete) — Splinter Review

Comment 6

5 years ago
-.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)
Assignee

Comment 7

5 years ago
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.
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.
Assignee

Comment 9

5 years ago
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.
(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.
Assignee: nobody → utasir
Status: NEW → ASSIGNED
Assignee

Comment 11

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

Comment 12

5 years ago
This one for discuss.
Attachment #8412579 - Attachment is obsolete: true
Assignee

Updated

5 years ago
Attachment #8412230 - Attachment description: popupscr.png → current clickable layout
Assignee

Comment 13

5 years ago
Based on discuss on chat.
Attachment #8413387 - Attachment is obsolete: true
Assignee

Comment 14

5 years ago
Posted patch patch v1.0 (obsolete) — Splinter Review
Patch for graphical presentation based on discuss on chat.
Attachment #8413396 - Attachment is obsolete: true
Attachment #8414062 - Flags: review?(shorlander)
Attachment #8414062 - Flags: review?(MattN+bmo)
Flags: needinfo?(shorlander)
"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?
Assignee

Comment 16

5 years ago
(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?
(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.
Assignee

Comment 18

5 years ago
Posted image 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?
Assignee

Comment 19

5 years ago
Posted image dark OS with patch
Dão,

here is the patched new style with dark OS

what is your opininon? acceptable or not?
(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.
Assignee

Comment 21

5 years ago
Posted patch patch v1.1 (obsolete) — Splinter Review
New Patch is based on Dão's additional instruction.
Attachment #8414062 - Attachment is obsolete: true
Attachment #8414062 - Flags: review?(shorlander)
Attachment #8414062 - Flags: review?(MattN+bmo)
Attachment #8414843 - Flags: review?(MattN+bmo)
Attachment #8414843 - Flags: review?(MattN+bmo) → review+
Assignee

Comment 23

5 years ago
Posted patch patch v1.1Splinter Review
Attachment #8414843 - Attachment is obsolete: true
Attachment #8418380 - Flags: review?(MattN+bmo)
Attachment #8418380 - Flags: review?(MattN+bmo) → review+
Styling only change so a try push isn't likely to find anything.
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/7a6a07449272
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → mozilla32
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*
Assignee

Comment 28

5 years ago
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.
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?
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.
You need to log in before you can comment on or make changes to this bug.