Improve button appearance in about:support UI (Troubleshooting Information) with the default theme

ASSIGNED
Assigned to

Status

defect
ASSIGNED
3 years ago
3 years ago

People

(Reporter: rsx11m.pub, Assigned: philip.chee)

Tracking

(Blocks 1 bug, {classic})

SeaMonkey 2.48 Branch
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
+++ This bug was initially created as a clone of Bug #1222818 +++

Toolkit made various changes to about: pages within the scope of their "Chameleon" (bug 1097111), mostly mimicking Windows 8-10 appearance. Those are not going well with the SeaMonkey styles at all (see bug 1192276 for an established example). It is my understanding that bug 1189918 and bug 1190465 now enables us to fork those style pages without harming theme developers, thus is should be done. [...]

Bug 1222818 reverted the changes in the about:support page, and involved reverting general style changes made. As mentioned in the quotes below, styling of the buttons remains somewhat unsatisfactory in that page, which is the task for this follow-up bug.

(Quoting rsx11m from bug 1222818 comment #19)
> Created bug 1222818 attachment 8764462 [details]
> Screenshot Linux (GTK3/KDE4)
> 
> Some concerns with Classic on Windows 7 Aero theme and Linux on KDE4. Those
> show a rather flat styling of the buttons with rectangular shape,
> additionally on Linux the highlight on hover doesn't work (stays the same).
> 
> Ideally, the shape of the underlying desktop theme should be taken here. I
> don't know how this is inherited by the application's theme, but it works
> for other buttons like those in the Preferences dialog.

(Quoting Philip Chee from 1222818 comment #20)
> Unfortunately aboutSupport.xhtml uses/inherits styling from us.css/forms.css
> etc. While the Preferences dialog is XUL and inherits from xul.css. I think
> in modern I @import url("chrome://global/skin/button.css"); to make the
> buttons look more Modern-like.
(Reporter)

Comment 1

3 years ago
(Quoting rsx11m from bug 1222818 comment #25)
> Comment on bug 1222818 attachment 8763660 [details] [diff] [review]
> v1.0 Proposed fix.
> 
> (In reply to rsx11m from bug 1222818 comment #24)
> > -moz-appearance: button;
> 
> Well, the brute-force approach of simply adding this to the button rule in
> aboutSupport.css didn't do the trick, thus apparently not *that*
> straight-forward. Too bad.
(Assignee)

Comment 2

3 years ago
> Created bug 1222818 attachment 8764462 [details]
> Screenshot Linux (GTK3/KDE4)

> Some concerns with Classic on Windows 7 Aero theme and Linux on KDE4. Those
> show a rather flat styling of the buttons with rectangular shape,
> additionally on Linux the highlight on hover doesn't work (stays the same).
So Top is Linux/KDE and bottom is Classic/Windows7 and bottom right is the Preferences window?

You could try injecting some CSS (using nsIStyleSheetService and -moz-document) to bind a XUL button to html buttons in aboutSupport.xhtml

http://hg.mozilla.org/comm-central/rev/b9b8db196a54#l1.6
http://hg.mozilla.org/comm-central/rev/b9b8db196a54#l3.43
(Reporter)

Comment 3

3 years ago
(In reply to Philip Chee from comment #2)
> So Top is Linux/KDE and bottom is Classic/Windows7 and bottom right is the Preferences window?

No, the top view is actually about:support before bug 1222818, the lower was for your first patch, and both on Linux/KDE4/GTK3.

> http://hg.mozilla.org/comm-central/rev/b9b8db196a54#l1.6
> http://hg.mozilla.org/comm-central/rev/b9b8db196a54#l3.43

Looks neat, I'll give this a try next week.
(Assignee)

Comment 4

3 years ago
(In reply to rsx11m from comment #3)
> (In reply to Philip Chee from comment #2)
> > So Top is Linux/KDE and bottom is Classic/Windows7 and bottom right is the Preferences window?
> 
> No, the top view is actually about:support before bug 1222818, the lower was
> for your first patch, and both on Linux/KDE4/GTK3.

If that is the case then have a look here:
about:support
(Reporter)

Comment 5

3 years ago
(In reply to Philip Chee from comment #4)
> If that is the case then have a look here:
> about:support

I don't understand what you mean, the screenshot *is* from about:support.
(Assignee)

Comment 6

3 years ago
(In reply to rsx11m from comment #5)
> (In reply to Philip Chee from comment #4)
> > If that is the case then have a look here:
> > about:support
> 
> I don't understand what you mean, the screenshot *is* from about:support.
Sigh. Too many tabs/windows

https://hg.mozilla.org/comm-central/annotate/635867a05c38/suite/themes/classic/communicator/aboutSupport.css#l31
But you should still try the binding method ...
(Reporter)

Updated

3 years ago
Assignee: nobody → rsx11m.pub
Status: NEW → ASSIGNED
(Reporter)

Comment 7

3 years ago
(In reply to Philip Chee from comment #2)
> You could try injecting some CSS (using nsIStyleSheetService and -moz-document)
> to bind a XUL button to html buttons in aboutSupport.xhtml
> 
> http://hg.mozilla.org/comm-central/rev/b9b8db196a54#l1.6
> http://hg.mozilla.org/comm-central/rev/b9b8db196a54#l3.43

Hmm, so the main problem why this doesn't work out of the box with aboutSupport.xhtml is that it's Toolkit code and we would need to fork it in order to apply the same trick that was done for the certError page. Seeing your hint for nsIStyleSheetService, I can guess that you could inject the binding in this way (how/where?), but then would still have to change the <button> to a <span> element in the document for each button to attach that binding to it. I'm at a loss how to realize that...

I've looked at your button CSS definitions in aboutSupport.css (which is ours at least), but couldn't find a way how to get some rules in here to utitlize the platform-global definitions rather than explicit rules.
(Reporter)

Comment 8

3 years ago
Putting Ratty in charge as he seems to have an idea how to solve this.
Assignee: rsx11m.pub → philip.chee
You need to log in before you can comment on or make changes to this bug.