1298487 - Modern theme for about:networking

Status: RESOLVED FIXED

(SeaMonkey :: Themes, defect)

Description

[Philip Chee]

about:networking is un-themed in modern.

Comment 1

[Philip Chee]

Attachment: Patch v1 css for about:networking (modern)

There is this nifty toolkit about page which doesn't yet have any modern theming so here is one.

Comment 2

[Philip Chee]

Attachment: Diff with toolkit windows aboutNetworking.css

Comment 3

[Frank-Rainer Grahl (:frg)]

Looks good at first glance. Could you compare the font used to the one in about:buildconfig. The regular font for the list items might look a little more fuzzy here but not sure.

Comment 4

[Ian Neal]

Comment on attachment 8785444 [details] [diff] [review]
Patch v1 css for about:networking (modern)

Seems a good starting point, for some reason there is always a scroll bar.
Should there be a differentiation of DNS Lookup from the other buttons (like there is in classic)?
Does classic also need some formatting? e.g. the icon on the warning dialog is partly off screen

Comment 5

[Philip Chee]

(In reply to Frank-Rainer Grahl from comment #3)
> Looks good at first glance. Could you compare the font used to the one in
> about:buildconfig. The regular font for the list items might look a little
> more fuzzy here but not sure.

both have font: message-box; which maps to font-family: -moz-use-system-font; which on my platform maps to Tahoma 11px on both pages. Might be different if you are on Linux

Comment 6

[Frank-Rainer Grahl (:frg)]

>>
both have font: message-box; which maps to font-family: -moz-use-system-font; which on my platform maps to Tahoma 11px on both pages. Might be different if you are on Linux
<<

No then its good. I just thought it might look a little bit more fuzzy but when same font it seems its just the different words which causes this. May need to adjust Clear Type.

Comment 7

[rsx11m]

Comment on attachment 8785444 [details] [diff] [review]
Patch v1 css for about:networking (modern)

Looks good in general, and I don't see any font issues on Linux with GTK3 (it's the same font as used with other about: pages, like the Troubleshooting page).

A couple of remarks on the top row of buttons:

 - There is no or little padding of the text to the left; should the text be centered?
 - In contrast to other buttons, there is no visual "pushed" feedback, they stay the same.
 - Similarly, it's difficult to tell which button is active right now, they change style in classic (ok, the title of the tab makes it unambiguous).

(In reply to Ian Neal from comment #4)
> Should there be a differentiation of DNS Lookup from the other buttons (like
> there is in classic)?

I'd say yes. The DNS Lookup is an interactive tool without regard of the current status of SeaMonkey (other than DNS availability) whereas the other functions are strictly queries on currently open connections.

> Does classic also need some formatting? e.g. the icon on the warning dialog
> is partly off screen

I've noticed the same in Firefox 48.0, also there is no padding of the text on a small screen, which is irritating. This should be a bug against toolkit.

Comment 8

[rsx11m]

Comment on attachment 8785446 [details] [diff] [review]
Diff with toolkit windows aboutNetworking.css

>+#categories > .category
>+{
>+  -moz-appearance: button;
>+  background-color: #AAB6C4;
>+  background-clip: padding-box;
>+  color: #000000;

Looks like the "pushing" styles may need to be added here and overwrite the default background-color and color?

> #categories hr {
>-  border-top-color: rgba(255,255,255,0.15);
>+  display: none;
> }

This should be the separator for the DNS Lookup button, but it would have to be vertically oriented in modern.

>-.title::before {
>-  content: "";
>-  left: -2.3em;
>-  top: 0;
>-  position: absolute;
>-  display: block;
>-  width: 1.6em;
>-  height: 1.6em;
>-  background: url("chrome://global/skin/icons/warning.svg") no-repeat left center;
>-  background-size: 1.6em;
>-}

The -2.3em with absolute positioning relative to the title are probably the reason that the icon gets pushed outside of the window in classic.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/9e6680b42e03
Modern theme for about:networking. r=IanN

Comment 10

[Frank-Rainer Grahl (:frg)]

Comment on attachment 8785444 [details] [diff] [review]
Patch v1 css for about:networking (modern)

Lets fix the nits in a followup bug as discussed in one of the last status meetings (add 4 moz-color removals to the list).

[Approval Request Comment]
Regression caused by (bug #): --
User impact if declined: broken about page with Modern theme
Testing completed (on m-c, etc.): c-esr52
Risk to taking this patch (and alternatives if risky): none already broken.
String changes made by this patch: --

Comment 11

[Ian Neal]

Comment on attachment 8785446 [details] [diff] [review]
Diff with toolkit windows aboutNetworking.css

Cancelling unneeded feedback requests

Comment 12

[Ian Neal]

Comment on attachment 8785444 [details] [diff] [review]
Patch v1 css for about:networking (modern)

a=me

Comment 13

[Frank-Rainer Grahl (:frg)]

https://hg.mozilla.org/releases/comm-beta/rev/d1f2c2d881cbbaa6880696c7271de4884847044f
https://hg.mozilla.org/releases/comm-esr52/rev/ae24724700fef59ac37f782f17568ec73a62543b

Comment 14

[Frank-Rainer Grahl (:frg)]

Target 2.53.1
https://gitlab.com/seamonkey-project/seamonkey-2.53-comm/-/commit/3e1918816ed8d9a5da88d00e48dcbe99304bfff2