planet.webcompat.com

January 06, 2019

This is a new chapter. I'll try to move forward in a semi-regular basis. The work done by the awesome core engineers of Mozilla is essential. Some of the things they fix or explain have direct impact on the web compatibility work. A couple of years ago at Mozilla Hands. I gave a lightning talk called "They fixed it". I quickly put forward to the audience all the (webcompat) cool bugs which had been fixed by Core engineers.

The site Channel NewsAsia is using a transform with a rotation for their headers when scrolling the content. The headers had a wider gap in Firefox than Chrome. An issue was reported. Brian Birtlesdigged into the isssue. He explained in details why the interpolation looks worse in Firefox than Chrome. Firefox has implemented the new specification. Web developers rely on an old version of the algorithm in Chrome. Chrome will change soon(?) and it will be equally broken. That was quite cool, Brian. Thanks!

I will probably write often about the Virtual Viewport and associated issues. Basically to make it short, Chrome/Safari have the notion of a virtual viewport in addition to the device viewport. This creates a series of different behavior for websites on Chrome vs Firefox on Android. We had a lot of webcompat issues about it. So as I said I will talk more about it in the future. In the mean time big big shout out to Hiroyuki Ikezoe and Botond Ballo

November 29, 2018

Picture-in-Picture: Allows websites to create a floating video window that is always on top of other windows so that users may continue consuming media while they interact with other sites or applications on their device.

November 01, 2018

Identifying the origin of the issue

On webcompat, we try to diagnose bugs reported about sites, we do not have the original sources. If we are lucky, web developers have included a way to reach the original JavaScript source files (through sourcemap). But modern websites have often a series of optimization layers (with multiple minifications).

To check during the investigation, that we thought was right we need to play with the code. With real CSS files (as opposed to CSS in JavaScript), it is easy to hand make a working solution. With JavaScript it's near impossible apart of just observing why it fails and guessing how it could work.

How do we overcome the lack of access to JavaScript?

One possible solution is to create a local proxy on your laptop and to use a man in the middle technique to capture the HTTP requests and replace the website JavaScript HTTP request by a call to a local file of your choice. On macOs for example, you could use Charles Proxy or on Unix you may want to use MITM

This is tedious and not always successful, specifically when JavaScript is written and minified on the fly.

Last week, a lunch in Tokyo

During a lunch with Jason Laster (@jasonlaster11), Brian Birtles (@brianskold) and Arai-san (@arai_unmht), I was specifically discussing about my woes when debugging websites and how cool it would be to just be able edit the JavaScript file inside the devtools debugger. Arai-san said « Oh but I have something a bit similar to this. »
So I told them… « Ship it! »

The afternoon went on with the current work in the Mozilla Tokyo office. But just before dinner, Arai-san decided to be my hero. They worked during the afternoon on packaging properly their tool and makes it an add-on for the Firefox devtools.

And indeed it was shipped by the end of the day! Discover Developer In The Middle. You can select a resource, prettify it in your favorite editor, change some logic, save it inside the UI and just reload the page. Magical and so much more practical.

Post-Scriptum

I never stop to be amazed by the quality, expertise and kindness of the Mozilla Japan team. I'm coming to the office once a week, because I live a bit far from the Tokyo office, but I'm definitely blessed to meet them every week.

Otsukare!

October 28, 2018

CSS overflow property: Originally a single property for controlling overflowing content in both horizontal & vertical directions, the `overflow` property is now a shorthand for `overflow-x` & `overflow-y`. The latest version of the specification also introduces the `clip` value that blocks programmatic scrolling.

October 19, 2018

Over in Bug 1359822, the fine folks on the JS team tried to make error messages for null or undefined property keys nicer in Firefox. So rather than something super lame (and sometimes confusing) like:

TypeError: window.pogs is undefined

You'd get something more helpful like:

TypeError: win.pogs is undefined, can't access property "slammer" of it

This was supposed to land in the Firefox 64 release cycle, but we ran into a fewsnags.

It turns out that sites (big ones like Flipkart) and libraries depend on the exact shape of an error message, and will fail is craptastic ways if their regular expressions expectations are not met. Like, blank pages and non-stop loading loops.

When an ECMAScript implementation detects a runtime error, it throws a new instance of one of the NativeError objects defined in 19.5.5. Each of these objects has the structure described below, differing only in the name used as the constructor name instead of NativeError, in the name property of the prototype object, and in the implementation-defined message property of the prototype object.

That's spec-talk for "these error messages can be different between browsers, and there's no guarantee they won't change, so attempting to rely on them is harmful to making things better in the future" (approximately).

I filed a bug, but getting upstream open source libraries fixed is way less hard than getting downstream sites to update.

(Almost as hard as pog math.)

The moral of the story is: don't write regular expressions against unstandardized browser-specific messages. Or maybe just never write regular expressions ever again. Seems easier?

3. For versions running on Android older than KitKat (v4), the Android version number is set to 4.41 to avoid UA sniffing assumptions tied to the Android platform capabilities.
4. Version 46 also added the ability to add the Android device name, controlled by the pref general.useragent.use_device. This is probably not widely used, if at all.

5. Version 46 added the ability to add a custom device string, with optional device ID, controlled by the pref general.useragent.device_string. This is also probably not widely used, if at all.

Footnotes to the Footnotes:
1. If I had to write this patch again, I would choose an obviously non-real 4.4.99, so it would be sniffable as a spoofed value. Yes, I am familiar with the concept of irony.

August 20, 2018

CSS justify-content: space-evenly: The "space-evenly" value for the `justify-content` property distributes the space between items evenly. It is similar to space-around but provides equal instead of half-sized space on the edges. Can be used in both CSS flexbox & grid.

Footnotes:
1. In 572659 we dropped pre-release indicators and patch level version numbers from geckoversion2. In 588909 we replaced Gecko/<builddate> with Gecko/<geckoversion>3. In 572659 we dropped pre-release indicators and patch level version numbers from firefoxversion4. In 815743 we reverted the changes from 588909 (because it broke too many sites, mostly banks)5. In 728773 we began using the frozen 201001011 builddate for all releases

July 03, 2018

Late last week we quietly landed a Nightly-only addon that spoofs the Chrome Mobile user agent string for Google Search (well, Facebook too, but that's another blog post).

Why?

Bug 975444 is one of the most-duped web compat bugs, which documents the fact that the version of Google Search that Firefox for Android users receive is a less rich version than the one served to Chrome Mobile. And people notice (hence all the dupes).

In order to turn this situation around, we've been working on a number of platforminterop bugs (in collaboration with some friendly members of the Blink team) and have hopes in making progress towards receiving Tier 1 search by default.

Part of the plan is to sniff out bugs we don't know about (or new bugs, as the site changes very quickly) by exposing the Nightly population to the spoofed Tier 1 version for 4 weeks (which should be July 27, 2018). If things get too bad, we can back out the addon earlier.

July 02, 2018

On July 2, 2013, I was hired by Mozilla on the Web Compatibility team. It has been 5 years. I didn't count the emails, the commits, the bugs opened and resolved. We do not necessary strive by what we accomplished, specifically when expressed in raw numbers. But there was a couple of transformations and skills that I have acquired during these last five years which are little gems for taking the next step.

Working is also a lot of failures, drawbacks, painful learning experiences. A working space is humanity. The material we work with (at least in computing) is mostly ideas conveyed by humans. Not the right word at the right moment, a wrong mood, a desire for a different outcome, we do fail. Then we try to rebuild, to protect ourselves. This delicate balance is though a risk worth taking on the long term.

I'm looking forward the next step, I really mean the next footstep. The one in the path, the one of the hikers, just the next one, which brings you closer from the next flower, the next grass, which transforms the landscape in an undetectable way. Breathing, discovering, learning, with tête-à-tête or alone.

Thanks to Mozilla and its community to allow me to share some of my values with some of yours. I'm very much looking forward the next day to continue this journey with you.

June 13, 2018

String.prototype.padStart(), String.prototype.padEnd(): The `padStart()` and `padEnd()` methods pad the current string with a given string (eventually repeated) so that the resulting string reaches a given length. The pad is applied from the start (left) of the current string for `padStart()`, and applied from the end (right) of the current string for `padEnd()`.