458866 - Ctrl-Tab panel looks different to Windows task switcher

Status: RESOLVED WONTFIX

(Firefox :: Theme, defect)

Description

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1b1pre) Gecko/20081005
Minefield/3.1b1pre (.NET CLR 3.5.30729) ID:20081005033754

This is a follow-up from the discussion in bug 451300 starting from comment 29.

As you can see in attachment 341896 [details] the current Ctrl-Tab design looks different to the task switcher Vista uses itself. The text is bigger and not bold or anti-aliased. The latter one is activated as you can see in the smaller image inside the above attachment which says "Minefield...". So something is wrong here.

I've taken a look inside the fonts directory and following fonts are installed on my box:

Segoe UI Bold
Segoe UI Bold Italic
Segoe UI Italic
Segoe UI Standard

Rob, do you need any more information because it seems you are not able to reproduce? Marcia, can you see something similar?

Comment 1

[Rob Arnold [:robarnold]]

Henrik, if you change the fonts listed at browser\themes\winstripe\browser\browser-aero.css:93 to include "Segoe UI Standard" or "Segoe UI Bold", does it display with the correct font? (The size will still be wrong I'm pretty sure).

I'm not sure why you aren't seeing antialiased fonts, though it appears to affect your whole browser and not just ctrl-tab.

Comment 2

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Attachment: Ctrl-Tab with ClearType enabled

I've checked the system settings and noticed that ClearType was somehow disabled. I've no idea why and when that happened. Now it looks better but there is still an issue with the last letter. It looks like that it is cut-off on the right side.

In any way, even with ClearType disabled the Vista application switcher still shows a smooth font while we are not doing this. Do they ignore this setting or can it be overwritten and used even when it is not activated?

Comment 3

[(no longer active)]

Could it be because of the fact that the font declaration there is invalid?  (See bug 451300 comment 33)

Comment 4

[Dão Gottwald [:dao]]

(In reply to comment #3)
> Could it be because of the fact that the font declaration there is invalid? 
> (See bug 451300 comment 33)

seems quite likely

Comment 5

[Robert Strong (they/them - no direct email)]

From the error console:

Warning: Error in parsing value for 'font'.  Declaration dropped.
Source File: chrome://browser/skin/browser.css
Line: 2162

From browser.css
#ctrlTab-label:-moz-system-metric(windows-compositor) {
  font: Segoe UI, window;
  font-weight: normal;
  font-size: 1.5em;

Besides quoting of Segoe UI it also looks like font: should be changed to font-family:

Comment 6

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Attachment: Font with corrected CSS

Even with the font declaration fixed (means 'font-family: "Segoe UI", window;') the font is still not shown correctly as you can see in this attachment.

Opening the fonts dialog of Vista I can see that there is no simple "Segoe UI" listed. Any of the fonts with that name has a normal, italic or bold part behind. Are they selected automatically and the above uses "Segoe UI Standard"?

Comment 7

[Dão Gottwald [:dao]]

Can you try |font-family: "Segoe UI Standard", window;| and |font-family: "Segoe UI Bold", window;|?

Comment 8

[Dão Gottwald [:dao]]

Btw, I don't think "window" is a valid font family.

Comment 9

[Rain [:rain1] (inactive)]

The last letter being but off is very likely due to bug 363861.

Comment 10

[Rob Arnold [:robarnold]]

Attachment: WIP v1

With the recent fix of bug 457997 the glass color should now be correct since the panel has focus now.

I cannot figure out how to get the font size to be correct. When I have a web page with font: normal 1em "Segoe UI"; I get the right sized font, but when I put that into the panel, it comes out too small. I wish I knew why but this bug has already clearly demonstrated my inability to write proper font declarations :) I would like the font size to match alt-tab since that seems reasonable readable.

As for the special window font, it shouldn't be necessary. It is reasonable to expect that all Vista users (especially those with the compositor enabled) will have Segoe UI installed. Even those with the another default font, the old selector would pick Segoe UI so removing it shouldn't cause any new unexpected behavior.

I haven't found a workaround for the odd vertically aligned text rendering, but it doesn't appear to show up as much. Could be font size related.

I'm also unhappy with the UI for selected/hovered previews. The highlight color in Vista is a bright-ish blue which doesn't look good with the rest of the browser's UI. I'd like us to mimick the behavior of alt-tab where there is a rounded rect with a solid border and semi-transparent fill behind the preview. Also, there is a visual different in these rects for selected, hovered and selected and hovered (the rect becomes opaque). Accessing these through the theme may be difficult or impossible - I haven't looked - but still a hack either way. This might actually be a good use case for -moz-border-image (bug 378217).

So in this patch, I've played with the font size and declarations a bit. The font is no longer bold (matches the native precedents for text on glass) and the text/background remains the same color when hovered/selected. I added a box-shadow to the html|canvas but it seems to resize when they are applied. I haven't been able to figure out why so hopefully Dao can enlighten me here since it seems to work just fine on other platforms. Again, these changes only take place when the DWM compositor is enabled.

Comment 11

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Rob, if you think the wip is good enough please create a tryserver build. I could have a test-run to check the fix.

Comment 12

[Dão Gottwald [:dao]]

(In reply to comment #10)
> I cannot figure out how to get the font size to be correct. When I have a web
> page with font: normal 1em "Segoe UI"; I get the right sized font, but when I
> put that into the panel, it comes out too small.

The default font size for web pages is bigger, and since em is a relative unit, you need to bump the number in order to enlarge the text. E.g.: font: normal 1.2em "Segoe UI".

> So in this patch, I've played with the font size and declarations a bit. The
> font is no longer bold (matches the native precedents for text on glass) and
> the text/background remains the same color when hovered/selected. I added a
> box-shadow to the html|canvas but it seems to resize when they are applied.

Did you try to compensate the space needed for the box-shadow with negative margins? I'm not sure if it works for box-shadow, but that's what I do for the other themes:

.ctrlTab-thumbnail > html|canvas {
  border: 1px solid ThreeDShadow;
  margin: -1px;
}

Comment 13

[Dão Gottwald [:dao]]

This needs to be re-evaluated after bug 465076. Note that aero glass is disabled for the all-tabs panel because of bug 473152.

Comment 14

[Dão Gottwald [:dao]]

Bug 463305 was another issue with aero glass, I think, as the search field would resize when being focused.

Comment 15

[Dão Gottwald [:dao]]

Attachment: re-enable aero glass

Comment 16

[Dão Gottwald [:dao]]

Comment on attachment 403142 [details] [diff] [review]
re-enable aero glass

moved to bug 520372

Comment 17

[Dão Gottwald [:dao]]

This UI now looks distinctively different from the Windows application switcher. It doesn't try to match that look.