Flow only recently added limited HTML form support and that lets us log into Google. We hadn’t concentrated on forms as they’re barely, if ever, used in TV UIs and there was plenty of other stuff to get on with. Pleasingly, Google Mail (Basic HTML version) rendered very well the first time we were able to log in. Full Google Mail doesn’t work yet, but it makes sense to start with the basic mode first.
Apart from the text along the top of the window, all the text seemed very small. I remembered many years ago I’d played around with quirks mode in browsers and that tables do something funny with font sizes. And a quick look in a web inspector showed it was exactly that. It turns out, for bonkers historic reasons, font sizes revert to the initial value when you enter a <table> element.
Flow already supported detection of quirks mode as that’s well specified in the HTML parser specification, so it was trivial to automatically insert an extra quirks stylesheet if the parser reports quirks mode. Instantly, Google Mail (basic) looked much better.
It wasn’t coloured correctly – there was no background blue highlighting the current folder and read emails. It turns out it also uses the attribute ‘bgcolor’ on <table> and <td> cells (again, easily spotted using the inspector). This attribute is marked as deprecated, but all browsers support it. Again, pretty trivial to add support for, mapping them to the CSS property ‘background-color’.
It surprised me that, although this isn’t the primary way to view Google Mail, it’s still the first major website that I’ve seen for a long time that relies on quirks mode and deprecated features.
After fixing the rendering issues, I realised you couldn’t actually read any emails – clicking had no effect. Each email in the inbox had an <a> tag with an href starting with a query ‘?’ and I suspected this was the problem though I couldn’t figure out what it was. Then I spotted there was a <base> element at the start. I’d added support for xml:base in our SVG browser eleven years ago, but HTML <base> behaves a little differently. Coincidentally, a colleague recently extended this to add HTML <base> support.
It turns out our HTMLAnchorElement code resolved relative URLs against the document’s URL, not the document’s base URL. A simple fix, which made the email view work well.
Google Mail isn’t exactly a priority for today, but since it so nearly worked first time, it seemed I may as well finish it. And, after very little effort it looks good and lets you read emails. There are a couple of outstanding bugs, such as the folder list’s table column being too narrow. We also don’t yet support <textarea> so writing an email is somewhat tricky but it’s now, otherwise, quite useable.
If you’d like to automatically receive our posts by email please join our mailing list.
