Compatibility/Tools

General

• Simplified bug reporting form on https://bugzilla.mozilla.org/form.mobile.compat
• http://arewecompatibleyet.com - see AWCY Documentation

Github stuff

• https://github.com/karlcow/webcompat (especially mozua.sh for managing spoof settings on FirefoxOS)
• https://github.com/seiflotfy/mozcompat
• https://github.com/hallvors/mobilewebcompat
• https://github.com/miketaylr/commitgrep

Extensions for compatibility work

Site outreach letters extension (Hallvord)

http://hallvord.com/temp/moz/stdletters.xpi

Usage

1. Install add-on
2. In the add-ons overview page, edit the add-on's settings to add a signature
3. Visit any Tech Evang bug (note: page must load or be reloaded after installing the add-on)
4. Go to the contact form of the site that you want to contact (or go to the webmail and start composing an E-mail).
5. Right-click in the TEXTAREA for composing a message. In the right-click menu, you should now see a new entry saying "Insert standard letter (bug xxxxxx)".

In other words, the extension simply remembers the last bug you saw (last bugzilla tab focused) and uses data from that bug to pick a translation and customize a letter.

Localization note

The extension tries to pick the right translation depending on the [country-xx] whiteboard marker or ccTLD of the site we're dealing with. (Picking the right translation is based on the lang attributes in the Wiki page's markup - every letter should be marked up with pre lang="xx". I'm not sure if I've added all required country code to language code mappings, so shout if you see bugs).

Bugzilla test status annotations extension

http://arewecompatibleyet.hallvord.com/extensions/bugzilla-te-bug-annotations.xpi

What?

Extension that fills bugzilla Tech Evang listings with small red and green squares, depending on the result of the last test run against that site.

Why?

Seeing which bugs/sites are being tested, letting me know about broken tests (false positives or negatives), spotting sites that were fixed or regressed easily (hopefully)..

How?

1. The test extension pushes data to arewecompatibleyet.hallvord.com where the latest and greatest CSV of test results is always found on http://arewecompatibleyet.hallvord.com/data/testing/latest.csv (hostname will change)
2. The buzilla annotations extension, running in YOUR Firefox instance, pulls down latest.csv and annotates bugs accordingly. Hover square for a tooltip telling you how fresh the result is.

What does red and green mean?

For most bugs, green ("pass") means "yes, we get content that (on certain criteria like the presence of specific meta tags, the host name, or certain file names for external script or CSS files) *resembles* what a browser identifying as iPhone on Safari 5 gets". Content that "resembles" Safari is presumed to be a mobile and fancy site. Naturally, "fail" means the opposite.

Some tests are manually written or vetted, and goes into more depth, i.e. checks for a specific element in the DOM or some other specific feature that the bug is about. Since many of the tests are auto-generated by comparing with a Safari/iPhone page, there are a few false "pass"es where we do get the same content but it's broken due to -webkit-styling or other issues. I'll hopefully refine those tests as I notice them.

Hallvord's extension for automated testing of site compat bugs

(mostly for personal usage, but if you want to help write tests it would be awesome) https://builder.addons.mozilla.org/package/206667/latest/

Techniques

Server Side User Agent Detection

User Agent String detection on the server side leads to different strategies by the site owner. They are used for delivering content to specific browsers and/or specific devices.

The negotiation is done at the HTTP level.

• Redirection to a subsection of their domain. Ex: http://example.com/ to http://example.com/m
• Redirection to a another domain. Ex: http://example.com/ to http://m.example.com/
• Delivering different types of content on the same domain name.

We can explore what are the influence of an HTTP HEAD or GET and analyzes the answers. Often there will be redirects as indicated by the status code 301, 302, 307 or 308, with a Location: HTTP header Location: http://m.example.com/. (Be careful, some sites send location all in lowercase, in case you are grepping through HTTP headers)

Once we have identified that it is really done server-side, we can add the whiteboard flag [serversidesniff]. An example of an analysis of server side detection.

HTTP Introspection Tools

curl and httpie are two extremely useful tools for analyzing what is happening at the HTTP level.

Firefox

• Firefox Network Monitor (built-in from version 23)
• Firebug Add-on
• User Agent Switcher Very practical it will modify the HTTP header AND the navigator object properties.
• ModifyHeaders Add-on gives a way to modify the HTTP headers you are sending to a Web site. It will not work for JavasScript scripts looking for navigator.userAgent.

Others

• curl (CLI)
• httpie (CLI)
• Opera Dragonfly (Presto)

Client Side User Agent Detection

[lib-yui] [clientsniff]

Things to think about when testing

• Clearing cookies and storage information. Some Web sites, once it has been accessed the first time, will add a cookie for keeping your preferences. Some of these cookies might be for the type of site such as mobile or desktop. It is better to clear the cookies and storage information, if you need to test the site as a first user.
• Remove UA override already installed. Currently Firefox OS devices have a UA override mechanism. It helps users to get a mobile version even if the site is not doing the identification properly. The unfortunate consequence is that it becomes harder for testing. So it is necessary to remove the UA override from the device.
  • On 1.0 and 1.1, Firefox OS has an in-device list that you can edit with mozua.sh.
  • On 1.2, the list is dynamic and updated through a server side mechanism, you can deactivate the list entirely through preferences: set "general.useragent.updates.enabled" to false