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

Status: ASSIGNED

(SeaMonkey :: Themes, defect)

Description

[rsx11m]

+++ 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.

Comment 1

[rsx11m]

(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.

Comment 2

[Philip Chee]

> 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

Comment 3

[rsx11m]

(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.

Comment 4

[Philip Chee]

(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

Comment 5

[rsx11m]

(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.

Comment 6

[Philip Chee]

(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 ...

Comment 7

[rsx11m]

(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.

Comment 8

[rsx11m]

Putting Ratty in charge as he seems to have an idea how to solve this.