Windows 93 – I plan to do better… eventually

EDIT: I did not make Windows 93. Zombectro and Jankenpopp did.

A friend of mine showed me Windows 93 today. I have to admit that it’s fairly impressive, but I found it to be quite coincidental that my friend shared it because I’ve had the idea of doing something like that for a long time.

Windows 93 – First boot.

I’ve had the ambitious idea of making a Web-based Windows 95/98 clone for years now (since 2008); I just haven’t had the time to actually do it. I intended it to be a project to help me learn jQuery and AJAX, as well as something to apply my then-few-months-old HTML/CSS/JavaScript knowledge. I chose Windows 95 because it has a simple interface that is relatively easy to recreate using HTML and CSS. I would have liked to copy Windows 98, but the gradient proved difficult to replicate with CSS 2 using unprefixed code.

Due to other priorities, and with hopes that new advances would make recreating the look much easier, I shelved the project. The next time I thought about reviving it was when I made a winmine (Minesweeper) clone in Java that looked almost exactly like the XP version, which I lamely called “Losemine” (whose source code I may or may not get around to publishing).

Losemine (winmine clone). On the left is the original WinXP winmine. The other two are the clone running on Linux and Windows.

Still, I didn’t end up doing anything with the clone project except think that I could make a DHTML port of Losemine and have that as one of my applications for the Windows clone.

Sometime in the beginning of September of this year, I started work on a Web-based Windows Classic theme designer (source code on GitHub). The goal is to be able to configure the colour scheme of a Windows theme through a Web interface and dynamically output a valid Windows theme file. My motivations for starting this project are to learn Git and to update my HTML/CSS/JavaScript skills. My biggest motivation is that ever since I migrated to Linux, I haven’t been able to sanely develop any Windows Classic themes. My options so far have been to reboot to Windows or run a Windows virtual machine. Rebooting to Windows every time I want to make a theme is highly unreasonable, and running a Windows virtual machine isn’t always an option when I only have 4GB of memory. I don’t want to stop making themes altogether, because I’ve made some really nice themes, even if I do say so myself (if any of them catch your eye, leave a comment and I’ll post a link to the theme file), some of which are featured here:

Vista-esque v1.00 (I need to update this screenshot to v1.02)

Storm Clouds

Peggy’s Pastels v2.02

Clouds Modern

Teal for Shelbi

Windows Hybrid (tPenguinLTG) – Dark

Clouds

Vista-esque Midnight (Blue)

Seawater Soft

Unwilling to go on without making some sort of attempt to ease theme development, I started work on the theme designer. Even from the conception of the Windows clone project, I wanted everything to look as close to the original as possible, even down to the pixel, much like the winmine clone. With the thought in mind that the theme engine will be crucial to the Windows clone project, I’m writing the code with the intent to reuse it in the Windows clone project with minimal edits.

This is what I have so far, as of writing this post (rendered on Pale Moon 24.7.2):

The theme preview area as of 2014-10-27 for my Windows Classic Theme Designer

Compare that with the original:

Preview area for Windows Standard

Apart from the “Selected” text, whose look I kept from previous versions of Windows to make it more useful, it’s actually a fairly accurate reconstruction. The only things I need to work on are the font details and the dialog window button. Overlaying my reconstruction with the original yields this:

My reconstruction overlaid on top of the real thing.

I spent a good month or so playing around with the titlebar and buttons just to get them to look right. Although it may not appear so, the titlebar gradient does not stretch from one end to the other; instead, it only spans the title itself. The left-most area with the icon and the right-most area with the window controls have solid-colour backgrounds, namely the left and right endpoints of the gradient. The window controls also would not have a predetermined width, since there aren’t always just the three window control buttons. These requirements made stretching the title area by floating the icon and window controls impossible as a solution. I tried using a CSS table, but that made the window control buttons flow vertically. After weeks of searching, I discovered that flexbox was exactly what I needed.

The buttons were also a fairly time-consuming element, although not as much as the titlebar. The problem with the buttons is that they require a compound border. CSS only provides a single border, so the hack that I settled with was using multiple solid box shadows. Box shadows don’t displace anything, so each button has to have at least a 2px border to compensate (which is probably why the dialog button in my reconstruction is off).

About a week ago, I decided to rewrite my stylesheets to use SCSS/SASS. SASS supports variables, and variables are very useful when certain elements should take the same colour all the time. In fact, that’s what Windows does: in a standard theme file, there’s a section ([Control Panel\Colors]) that defines the various colours used throughout Windows. It contains something like the following:

ActiveTitle=10 36 106
Background=58 110 165
Hilight=10 36 106
HilightText=255 255 255
TitleText=255 255 255
Window=255 255 255
WindowText=0 0 0
Scrollbar=212 208 200
InactiveTitle=128 128 128
Menu=212 208 200
WindowFrame=0 0 0
MenuText=0 0 0
ActiveBorder=212 208 200
InactiveBorder=212 208 200
AppWorkspace=128 128 128
ButtonFace=212 208 200
ButtonShadow=128 128 128
GrayText=128 128 128
ButtonText=0 0 0
InactiveTitleText=212 208 200
ButtonHilight=255 255 255
ButtonDkShadow=64 64 64
ButtonLight=212 208 200
InfoText=0 0 0
InfoWindow=255 255 225
GradientActiveTitle=166 202 240
GradientInactiveTitle=192 192 192
ButtonAlternateFace=192 192 192
HotTrackingColor=0 0 128
MenuHilight=0 0 128
MenuBar=192 192 192

That is, the variable, followed by an equals sign (=), followed by space-delimited decimal RGB values.

Converting that into SCSS and formatting it nicely (and sorting, because it’s a mess otherwise) results in this:

$ActiveBorder:   rgb(212,208,200);
$ActiveTitle:    rgb( 10, 36,106);
$AppWorkspace:   rgb(128,128,128);
$Background:     rgb( 58,110,165);
$ButtonAlternateFace:   rgb(192,192,192);
$ButtonDkShadow:   rgb( 64, 64, 64);
$ButtonFace:     rgb(212,208,200);
$ButtonHilight:  rgb(255,255,255);
$ButtonLight:    rgb(212,208,200);
$ButtonShadow:   rgb(128,128,128);
$ButtonText:     rgb(  0,  0,  0);
$GradientActiveTitle:   rgb(166,202,240);
$GradientInactiveTitle: rgb(192,192,192);
$GrayText:       rgb(128,128,128);
$Hilight:        rgb( 10, 36,106);
$HilightText:    rgb(255,255,255);
$HotTrackingColor:      rgb(  0,  0,128);
$InactiveBorder: rgb(212,208,200);
$InactiveTitle:  rgb(128,128,128);
$InactiveTitleText:     rgb(212,208,200);
$InfoText:       rgb(  0,  0,  0);
$InfoWindow:     rgb(255,255,225);
$Menu:           rgb(212,208,200);
$MenuBar:        rgb(192,192,192);
$MenuHilight:    rgb(  0,  0,128);
$MenuText:       rgb(  0,  0,  0);
$Scrollbar:      rgb(212,208,200);
$TitleText:      rgb(255,255,255);
$Window:         rgb(255,255,255);
$WindowFrame:    rgb(  0,  0,  0);
$WindowText:     rgb(  0,  0,  0);

The original code can be easily converted using a regular expression substitution (i.e. search and replace). In Vim, this substitution can be used:

:s/\(.*\)\s*=\s*\(.*\)\s\+\(.*\)\s\+\(.*\)/$\1: rgb(\2,\3,\4)

Since the only things that change are the colours (and the fonts and font sizes, but that’s more advanced), I created a template file as a SASS partial and added an include directive for the template at the end of every theme file. This modular approach is nice because if there’s an error in the template, I only have to change it once in the template instead of once for every theme.

The next challenge is to figure out how to implement a scroll bar. If it weren’t for the little square in the corner when there are two scrollbars, absolutely-positioned elements would have done the trick.

The corner where two scrollbars meet

After that, the preview is more or less done, but that’s only half of the project. The second part is the actual configurator, using jQuery to make it dynamic.

It’s interesting to note that this project is completely text-based, even the images. The window control buttons, and eventually the scrollbar buttons, are SVG images, which is an XML-based format (and XML is text-based). Using SVG allows the buttons to scale cleanly when necessary and be recoloured dynamically.

Again, the theme designer, even in its currently-unusable-but-still-impressive state, can be accessed through the project page, and the source code through the GitHub repository.

It may take months to finish the theme designer, and it’ll probably take a few years for the Windows clone to surface, but when it does, it’ll be worth it.