Tabs in title bar: what's the secret?

Question

Chrome and Firefox 4, among other applications, now put some of their user interface in the title bar. In Windows, the OS normally controls the entire title bar. An application can create a custom title bar by removing the OS title bar and drawing a "fake" title bar instead (like WinAmp), but only the OS knows how to draw the non-customized elements of the title bar (e.g. Close/Minimize/Maximize), which vary by OS version.

By what mechanism do apps like Chrome and Firefox "share" the title bar with the OS (put custom elements in the title bar while keeping the original OS visual theme)?

In Chrome, the tabs encroach upon the title bar so that there is not enough space for title text.

Bridgetbridgetown

Could you kindly post a picture so everybody who hasn't got chrome can see what you're talking about? – Desecrate

you can get the source for both those programs – Jotter

As an aside, I hate that they do this. Give me my "title" bar back! – Dunedin

"Only the OS knows how to draw the non-customized elements of the title bar (e.g. Close/Minimize/Maximize), which vary by OS version." -- Not necessarily true. You can detect the OS version (and the OS theme/colours) and create your own buttons. – Sidwohl

It is possible to draw close/... buttons exactly looking like the native ones, see the nsNativeThemeWin.cpp file in mozilla. – Pasley

I would study the source if I had to... but to be honest, I was only curious. The last time I tried to look at the source code of an enormous program, I couldn't even find the source file that contained what I was looking for. (Let the teasing begin!) – Bridgetbridgetown

@LightnessRacesinOrbit forums.macrumors.com/posts/21540623 – Colorfast

Answer 1

Microsoft has a very detailed explanation in the article Custom Window Frame Using DWM.

Decumbent

I guess this answer, in combination with mining FireFox's source code to learn how it deals with WinXP, would let someone modify the title bar across all popular Windows versions. – Bridgetbridgetown

Answer 2

The title bar and the window border belongs to the non-client area (NC) of the window. If you're writing a message pump based application you can provide your own logic and appearance of this area using the WM_NCPAINT and WM_NCHITTEST window messages (just like Jon wrote).

While this area has been quite moderately used in previous Windows versions, Microsoft has recently (at least since Vista) started to make the non-client area more attractive and feature rich.

In modern applications it is quite common to completely ignore the non-client area and instead create a window that does not have a strict window border and thus consists of ONLY a client area. With this method the window must provide it's own implementation for drawing the window title and window buttons (minimize, maximize/resore and close). Combining this technique with window transparency makes it possible and quite easy to create exciting user interfaces.

If you are using WPF you'll find the WindowChrome class very useful for this purpose. This class is part of the .NET 4 framework and available as a separate library for .NET 3.5.

Edit

Obviously someone does not like this answer. Just to be clear: I'm not saying that this is how Chrome or any other application is doing it. I am saying that how I've described it is a feasible solution which myself and the company I work for has used in several projects and I know for a fact that several other applications use the same approach. It might not be the best, but it is certainly a way to go about it! :-)

Romney

I'd like to add something to my nonclient area but Microsoft.Windows.Shell.dll, which is supposed to contain WindowChrome, is not listed in VS2010's "Add Reference" dialog. Any idea where to get it? – Bridgetbridgetown

@Bridgetbridgetown You can download it here. – Shalna

It's important to note that WindowChrome does not work in Windows 7 Basic Theme or in WinXP (IIRC the title bar is drawn normally so it appears to be "on top" of your customizations). To find out if it's available, call the Microsoft.Windows.Shell.SystemParameters2.Current.IsGlassEnabled property – Bridgetbridgetown

Answer 3

I'm too lazy to go looking at chrome and firefox's source to find out exactly what they did, but it most likely includes custom handling for WM_NCPAINT and WM_NCHITTEST. They can allow the OS to do the basic titlebar painting, then stick their own bits on top. The alternative is to do all the painting themselves, including calls to the DWM api to handle all the fancy bits. Either way, it's an ugly thing to try and do, and if you don't do it just right, it'll look and feel terrible.

Tribe

Once, a long time ago I tried to handle WM_NCPAINT and WM_NCHITTEST, but the OS would sometimes paint over what I painted, and it was a major problem that I couldn't find any API that would tell me the location and size of built-in elements (minimize button, close button etc.) - which you really need to know if you want to add an extra button beside them. Have you personally has success with this approach, Jon? Also note that Chrome and FF seem to enlarge the title bar area (in particular the blurry see-through effect of Windows 7 Aero), any idea how they do that? – Bridgetbridgetown

As noted above, you'll need to go sifting through the Chrome and FF code if you want to understand their specific implementation. I've had some limited success with WM_NCPAINT and WM_NCHITTEST in the past, but it's generally been lots of effort with extremely limited rewards. In general I recommend leaving those bits to the OS unless you've got a very specific requirement to do otherwise. – Tribe

@Qwertie: If you're using WPF, it's easy to enlarge the title bar area using the WindowChrome class. They call the area you're referring the Glass Frame. Simply change the value of the GlassFrameThickness property. – Shalna

Answer 4

Perhaps this is worth to look at as well: https://github.com/lstratman/.NETTitleBarTabs

and another link: http://www.nuget.org/packages/TitleBarTabs/

I have not tried it myself, and will look into it to see how and how well it works.

Brochure